/* Borrowed tokens from Sanad's design system (Bootstrap kit) — reused, not Bootstrap. */
:root{
  --g-primary:#7C3AED; --g-primary-d:#6D28D9; --g-primary-l:#EDE9FE;
  --g-ink:#1E293B; --g-muted:#64748B; --g-faint:#94A3B8; --g-line:#E2E8F0; --g-bg:#F4F4FA;
  --g-success:#10B981; --g-danger:#EF4444; --g-gold:#F59E0B; --g-info:#3B82F6; --g-flame:#F97316;
  --g-shadow:0 5px 0 rgba(15,23,42,.85); --g-outline:2px solid #0f172a; --g-radius:18px;
}
/* Cairo is loaded via a <link> in base.html <head>. A CSS @import is only valid BEFORE any
   style rule, so an @import here (after :root) was silently dropped and the font never loaded. */
.g-font{font-family:'Cairo',system-ui,sans-serif;}
.g-card{background:#fff;border:var(--g-outline);border-radius:var(--g-radius);box-shadow:var(--g-shadow);}
.g-btn{background:var(--g-primary);color:#fff;font-weight:800;border:var(--g-outline);
       border-radius:14px;padding:12px;box-shadow:0 4px 0 rgba(15,23,42,.85);cursor:pointer;font-family:'Cairo',sans-serif;}
.g-btn.gold{background:var(--g-gold);color:#3b2606;}
.g-track{height:12px;background:rgba(15,23,42,.15);border-radius:20px;overflow:hidden;}
.g-fill{height:100%;background:linear-gradient(90deg,#FDE68A,#F59E0B);border-radius:20px;}
.g-hud{background:linear-gradient(160deg,var(--g-primary),var(--g-primary-d));color:#fff;
       border-radius:0 0 20px 20px;padding:14px 16px;font-family:'Cairo',sans-serif;}
/* On windows wider than the 1400px content column the LESSON page's HUD kept the full window width while the breadcrumb and
   the cards below stayed centred (Said 2026-10-10). Same column for all three; nothing changes up to 1440px.
   Lesson page only: the dashboard's cards are full width, so its HUD stays full width too (Codex). */
.lesson-hud-column{max-width:1400px;margin-left:auto;margin-right:auto;}
.g-chips{display:flex;gap:8px;margin-top:10px;}
.g-chip{flex:1;background:rgba(255,255,255,.16);border-radius:14px;padding:8px 6px;text-align:center;color:#fff;}
.g-chip .v{font-size:16px;font-weight:800;} .g-chip .k{font-size:10.5px;opacity:.85;}

/* Journey nodes (Phase 2) */
.g-node{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:20px;text-decoration:none;border:3px solid #1f2937;
  box-shadow:0 4px 0 #1f2937;}
.g-node-done{background:#22c55e;color:#fff;}
.g-node-coin_completed{background:#22c55e;color:#fff;}
.g-node-current{background:#facc15;width:58px;height:58px;font-size:28px;
  box-shadow:0 0 0 4px #facc15,0 5px 0 #1f2937;z-index:2;}
.g-node-locked{background:#e5e7eb;color:#9ca3af;border-color:#cbd5e1;box-shadow:none;cursor:not-allowed;}
.g-here{position:absolute;transform:translate(-50%,-42px);background:#1f2937;color:#fff;
  font-size:11px;padding:2px 8px;border-radius:8px;white-space:nowrap;z-index:3;}

/* W23: readable, non-modal earning feedback. It sits below the navbar, leaves the page usable,
   and groups simultaneous XP/coin earns instead of overlaying two fast flying chips. */
.g-earn-receipt{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:1100;
  width:min(360px,calc(100vw - 28px));display:flex;align-items:center;gap:12px;
  background:#fff;color:var(--g-ink);border:var(--g-outline);border-radius:16px;
  box-shadow:0 7px 0 rgba(15,23,42,.82);padding:12px 14px;animation:g-receipt-in .22s ease-out;}
.g-earn-receipt-copy{flex:1;min-width:0;display:grid;gap:5px;}
.g-earn-receipt-copy strong{font-size:15px;line-height:1.4;}
.g-earn-receipt-amounts{display:flex;flex-wrap:wrap;gap:5px 12px;color:#6D28D9;
  font-size:15px;font-weight:800;line-height:1.5;}
.g-earn-receipt-close{flex:0 0 34px;width:34px;height:34px;border:0;border-radius:50%;
  background:var(--g-primary-l);color:#5B21B6;font:800 23px/1 system-ui;cursor:pointer;}
@keyframes g-receipt-in{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.g-earn-receipt{animation:none;}}