/* ═══════════════════════════════════════════════════════════════
   wordlab-common.css — Shared styles for all Word Labs pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*{ box-sizing:border-box; margin:0; padding:0; }
button,input,select,textarea{ font:inherit; }

/* ── CSS Custom Properties ── */
:root{
  --bg:#f5f5f5;
  --panel:#ffffff;
  --line:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;

  /* Brand */
  --indigo:#4338ca;
  --indigo-2:#6366f1;
  --indigo-soft:#eef2ff;

  /* Feedback */
  --green:#16a34a;
  --green-soft:#f0fdf4;
  --green-line:#bbf7d0;
  --green-text:#166534;
  --orange:#ea580c;
  --orange-soft:#fff7ed;
  --orange-line:#fed7aa;
  --orange-text:#9a3412;
  --bad:#dc2626;
  --teal:#0d9488;

  /* Accent (pages override as needed) */
  --accent:#4338ca;
  --accent-rgb:67,56,202;
  --header-rgb:13,11,26;
}

/* ── Base ── */
body{
  margin:0;
  font-family:'Lexend',sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ── Utilities ── */
.hidden{ display:none!important; }

/* ── Accessibility: Skip Link ── */
.skip-link{
  position:absolute; top:-40px; left:0;
  background:#4338ca; color:#fff;
  padding:8px 16px; z-index:10000;
  font-weight:700; font-size:14px;
  border-radius:0 0 8px 0;
  transition:top .2s;
}
.skip-link:focus{ top:0; }

/* ── Accessibility: Focus Indicators (WCAG 2.1 AA) ── */
button:focus-visible,
[tabindex="0"]:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--accent, #4338ca);
  outline-offset:2px;
}
/* Don't double-outline skip link (already has position-based indicator) */
.skip-link:focus-visible{ outline:none; }


/* ═══════════════════════════════════════════════════════════════
   HEADER — Dark Sticky (info/teacher pages)
   ═══════════════════════════════════════════════════════════════ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,11,26,.85);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
/* Fixed variant for game pages */
.header--fixed{
  position:fixed; top:0; left:0; right:0;
  background:rgba(var(--header-rgb),.75);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:0;
}

/* Header inner — supports both naming conventions */
.headerInner,
.header-inner{
  max-width:1200px; margin:0 auto;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
/* Game pages use compact inner */
.header--fixed .headerInner{
  padding:0 20px; height:56px; gap:12px;
  flex-wrap:wrap; max-width:none;
}

/* Brand */
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brandIcon,
.brand-icon{
  width:36px; height:36px; border-radius:10px;
  background:#4338ca; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex:0 0 auto;
}
.brandName,
.brand-name{
  font-size:18px; font-weight:900;
  color:#e0e7ff; letter-spacing:-.02em;
}

/* Header nav links (kebab-case pages) */
.header-links{
  display:flex; align-items:center; gap:16px;
}
.header-links a{
  font-size:13px; font-weight:700; color:#94a3b8;
  text-decoration:none; transition:color .15s;
}
.header-links a:hover{ color:#e0e7ff; }

/* Header nav links (camelCase pages) */
.headerRight{
  display:flex; align-items:center; gap:16px;
}
.headerLink{
  font-size:13px; font-weight:700; color:#94a3b8;
  text-decoration:none; transition:color .15s;
}
.headerLink:hover{ color:#e0e7ff; }

/* Header buttons */
.topBtn{
  border:none;
  background:rgba(255,255,255,.06);
  color:#94a3b8;
  font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:8px;
  cursor:pointer; font-family:inherit;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap; flex-shrink:0;
  transition:color .15s, background .15s;
}
.topBtn:hover{
  color:#e0e7ff;
  background:rgba(255,255,255,.1);
}
/* Game pages use bolder topBtn */
.header--fixed .topBtn{
  font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.12em;
  padding:7px 13px; border-radius:10px;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
}
.header--fixed .topBtn:hover{
  background:rgba(255,255,255,.18);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — Dark
   ═══════════════════════════════════════════════════════════════ */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:#080716;
  margin-top:24px;
  position:relative; z-index:2;
}
.footer-inner{
  max-width:1200px; margin:0 auto;
  padding:20px 24px;
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
  flex-wrap:wrap;
}
.footer-brand{
  font-size:14px; font-weight:800; color:#4338ca;
}
.footer-note{
  font-size:12px; color:#94a3b8; font-weight:600;
}
.footer-note a{
  color:#94a3b8; text-decoration:none;
}
.footer-note a:hover{ color:#e0e7ff; }

/* Light footer variant */
.footer--light{
  background:transparent;
  border-top:1px solid #e2e8f0;
}
.footer--light .footer-inner{
  justify-content:center;
}
.footer--light .footer-note{
  text-align:center;
}
.footer--light .footer-note a{ color:#64748b; }
.footer--light .footer-note a:hover{ color:#4338ca; }


/* ═══════════════════════════════════════════════════════════════
   BUTTONS — Common patterns
   ═══════════════════════════════════════════════════════════════ */
.btn-primary{
  border:none;
  background:var(--indigo); color:#fff;
  font-weight:900; font-size:14px;
  padding:14px 28px; border-radius:14px;
  cursor:pointer;
  font-family:'Lexend',sans-serif;
  text-transform:uppercase; letter-spacing:.06em;
  transition:background .15s;
}
.btn-primary:hover{ background:#3730a3; }
.btn-primary:disabled{ opacity:.5; cursor:default; }


/* ═══════════════════════════════════════════════════════════════
   OVERLAY — Modal backdrop
   ═══════════════════════════════════════════════════════════════ */
.wl-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(13,11,26,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}


/* ═══════════════════════════════════════════════════════════════
   ROUND PROGRESS BAR — shows how far through the current round
   ═══════════════════════════════════════════════════════════════ */
.wlProgressBar{
  position:relative; width:100%; max-width:520px; height:4px;
  border-radius:999px; background:rgba(255,255,255,.14);
  margin:0 auto 14px; overflow:hidden;
}
.wlProgressBar-fill{
  position:absolute; inset:0;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg,#6366f1 0%,#22d3ee 100%);
  border-radius:999px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.wlProgressBar[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){
  .wlProgressBar-fill{ transition:none; }
}
body.low-stim .wlProgressBar-fill{
  background:#6366f1; transition:none;
}


/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE — friendly placeholder for "nothing here yet" screens
   Extracted from the spelling-sets empty state in dashboard.html,
   which was the gold-standard pattern across the product. Use the
   .light modifier on pages with a light background.
   ═══════════════════════════════════════════════════════════════ */
.wlEmpty{
  position:relative;
  background:linear-gradient(135deg,#1e293b 0%,#243352 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:60px 32px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  overflow:hidden;
}
.wlEmpty::before{
  content:''; position:absolute; top:-50%; left:50%;
  transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.12) 0%,transparent 60%);
  pointer-events:none;
}
.wlEmpty-illus{
  position:relative; z-index:1;
  width:96px; height:96px; border-radius:24px;
  background:linear-gradient(135deg,#6366f1 0%,#22d3ee 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:46px; margin:0 auto 22px;
  box-shadow:0 16px 36px rgba(99,102,241,.35);
  animation:wlEmptyFloat 4s ease-in-out infinite;
}
.wlEmpty-title{
  position:relative; z-index:1;
  font-size:24px; font-weight:900;
  color:#f1f5f9; letter-spacing:-.02em;
  margin:0 0 10px;
}
.wlEmpty-sub{
  position:relative; z-index:1;
  font-size:14px; color:#94a3b8;
  font-weight:600; max-width:440px;
  margin:0 auto 24px; line-height:1.6;
}
.wlEmpty-cta{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  border:none; background:#6366f1; color:#fff;
  font-family:'Lexend',sans-serif; font-weight:900;
  font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  padding:14px 28px; border-radius:14px;
  box-shadow:0 12px 28px rgba(99,102,241,.35);
  cursor:pointer; transition:transform .15s;
}
.wlEmpty-cta:hover{ transform:translateY(-3px); }
/* Light variant for pages with a pale background */
.wlEmpty.light{
  background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);
  border-color:rgba(99,102,241,.18);
}
.wlEmpty.light .wlEmpty-title{ color:#1e293b; }
.wlEmpty.light .wlEmpty-sub{ color:#64748b; }
@keyframes wlEmptyFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
  .wlEmpty-illus{ animation:none; }
}
body.low-stim .wlEmpty-illus{ animation:none; }


/* ═══════════════════════════════════════════════════════════════
   SKELETON LOADER — shimmering placeholder while async data loads
   Use .wlSkeletonRow wrappers to build a table-like skeleton. The
   shimmer sweep uses transform: translateX for 60fps on weak GPUs.
   ═══════════════════════════════════════════════════════════════ */
.wlSkeleton{
  position:relative;
  border-radius:8px;
  background:rgba(99,102,241,.10);
  overflow:hidden;
}
.wlSkeleton::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:wlSkelShimmer 1.6s ease-in-out infinite;
}
.wlSkeletonWrap{ padding:18px; }
.wlSkeletonRow{
  display:flex; gap:8px; align-items:center;
  margin-bottom:8px;
}
.wlSkeletonRow .wlSkeleton{ height:20px; }
.wlSkeleton.name{ width:140px; flex-shrink:0; }
.wlSkeleton.cell{ flex:1; min-width:32px; }
@keyframes wlSkelShimmer{
  0%{ transform:translateX(-100%); }
  60%,100%{ transform:translateX(100%); }
}
@media (prefers-reduced-motion: reduce){
  .wlSkeleton::after{ animation:none; }
}
body.low-stim .wlSkeleton::after{ animation:none; }


/* ═══════════════════════════════════════════════════════════════
   INLINE SCREENSHOT — product screenshots on marketing pages
   Used on about.html and pricing.html to show procurement reviewers
   (who scan rather than read) what the product actually looks like.
   ═══════════════════════════════════════════════════════════════ */
.wlScreen{
  display:block;
  max-width:800px;
  width:100%;
  margin:24px auto 6px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.18);
  box-shadow:0 18px 48px rgba(15,23,42,.18);
  background:#fff;
}
.wlScreenCaption{
  display:block;
  max-width:800px;
  margin:0 auto 36px;
  text-align:center;
  font-size:13px;
  color:#64748b;
  font-weight:600;
  font-style:italic;
}
@media (max-width:640px){
  .wlScreen{ border-radius:10px; margin:18px auto 6px; }
  .wlScreenCaption{ margin:0 auto 24px; padding:0 12px; }
}

/* ── Tablet: shrink in-game scientist to avoid taking up too much screen ── */
@media (max-width:1024px) and (min-width:481px){
  #sciCharWrap{ width:72px !important; height:90px !important; }
}