/* ==========================================================================
   GLOBAL — Interactive Activities 2026
   ONE shared file: TOKENS (edit here for a rebrand) + shared component styles.
   Each activity links this and adds only its ACTIVITY-SPECIFIC css (cards etc.).
   Values verified against Figma (colors + buttons) and the token files
   (typography.js, spacing.md, lines-borders.md).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'); /* Font Awesome Free */

:root {
  /* ======================= TOKENS (rebrand here) ======================== */
  /* Color primitives */
  --color-blue-100: #E2EEFF; --color-blue-200: #9DC6FF; --color-blue-300: #4592FF; --color-blue-400: #00409B; --color-blue-500: #00204D;
  --color-yellow-100: #FFF5D9; --color-yellow-200: #FFECB9; --color-yellow-300: #FFD768; --color-yellow-400: #B08200; --color-yellow-500: #4C3800;
  --color-green-100: #D8F0E0; --color-green-200: #8FD5A6; --color-green-300: #41AA64; --color-green-400: #22723C; --color-green-500: #044F1D;
  --color-neutral-000: #FFFFFF; --color-neutral-50: #E5E7EB; --color-neutral-100: #A3ACB7; --color-neutral-200: #6C747F; --color-neutral-300: #485260; --color-neutral-400: #283445; --color-neutral-500: #011633;
  --color-red-100: #FEC4C1; --color-red-200: #E8706A; --color-red-300: #B3261E;
  /* Grade palettes (Main used now; accents reserved) */
  --grade-lower-main: #F2EDB1; --grade-lower-accent-1: #A4C5FF; --grade-lower-accent-2: #F96B94; --grade-lower-accent-3: #A0BA5D;
  --grade-upper-main: #BDDBFF; --grade-upper-accent-1: #4592FF; --grade-upper-accent-2: #8D8AFF; --grade-upper-accent-3: #FFB889;
  --grade-mh-main:    #F5F2ED; --grade-mh-accent-1: #00409B; --grade-mh-accent-2: #A675CB; --grade-mh-accent-3: #E1EEFF;
  /* Semantic status */
  --color-correct: var(--color-green-300); --color-incorrect: var(--color-red-300); --color-selected: var(--color-yellow-300);
  /* Typography (Lexend) */
  --font-family: "Lexend", system-ui, -apple-system, sans-serif;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --text-xs: 0.75rem; --text-s: 0.875rem; --text-m: 1rem; --text-l: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.25rem;
  /* Spacing (px; DS scale) */
  --spacing-0: 0px; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px;
  --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 72px;
  --spacing-24: 80px; --spacing-28: 112px; --spacing-32: 128px; --spacing-36: 144px; --spacing-40: 160px; --spacing-44: 176px; --spacing-48: 192px; --spacing-52: 208px;
  --spacing-56: 224px; --spacing-60: 240px; --spacing-64: 256px; --spacing-72: 288px; --spacing-80: 320px; --spacing-96: 384px;
  /* Radius */
  --radius-sm: 2px; --radius-default: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-full: 9999px;
  /* Borders */
  --border-width: 1px; --border-color-default: var(--color-neutral-100); --border-color-hover: var(--color-neutral-200);
  /* Shadows (Figma) */
  --shadow-500: 0 10px 32px -4px #18274B1A, 0 6px 14px -6px #18274B1F;
  --shadow-chip: 0 12px 42px -4px #18274B1F, 0 8px 18px -6px #18274B1F;
  /* Icons */
  --icon-color: var(--color-neutral-500); --icon-color-inverse: #FFFFFF; --icon-size: 1.25rem;

  /* =================== SEMANTIC ALIASES (design refs these) ============= */
  --bg:           var(--color-blue-100);   /* page background (was #E8F1FB) */
  --bg-hover:     #CFE1F7;                  /* literal — no token between Blue 100/200 */
  --surface:      var(--color-neutral-000);/* white */
  --navy:         var(--color-blue-500);   /* was #1A3561 → closest Blue 500 */
  --navy-mid:     var(--color-blue-300);   /* was #2F5FCC → closest Blue 300 */
  --text:         var(--color-neutral-500);/* was #1A3561 → Neutral 500 */
  --muted:        var(--color-neutral-200);/* was #6B7A99 → Neutral 200 */
  --card-border:  rgba(26,53,97,0.09);      /* literal — navy tint */
  --slot-bg:      rgba(26,53,97,0.04);      /* literal — navy tint */
  --slot-border:  rgba(26,53,97,0.22);      /* literal — navy tint */
  --correct:      var(--color-correct);
  --incorrect:    var(--color-incorrect);
  --selected:     var(--color-selected);
  --topbar-bg:    #C1DBFF;                  /* base; grade classes override */
  --btn-yellow:       var(--color-yellow-200);
  --btn-yellow-hover: var(--color-yellow-300);
  --btn-blue:         var(--color-blue-400);
  --btn-blue-hover:   var(--color-blue-500);
  --radius:       var(--radius-2xl);        /* was 14px → 16px (closest) */
  --gap:          var(--spacing-3);         /* 12px */
  --font:         var(--font-family);

  /* sizing (mobile-first; desktop bumps below) */
  --nub-size: 26px; --nub-center: 50%;
  --content-max-width: 860px;
  --content-pad:       var(--spacing-5);    /* 20px */
  --fs-title:           var(--text-xl);     /* 1.5rem */
  --fs-instructions:    var(--text-s);
  --fs-card:            var(--text-s);
  --fs-section-label:   var(--text-xs);
  --fs-btn:             var(--text-s);
  --card-min-h: 60px; --card-pad-y: 14px; --card-pad-x: var(--spacing-4);
  --rack-width: 300px; --btn-pad-y: 10px; --btn-pad-x: 22px;
}

/* Responsive type — mirrors typography.js (Tailwind sm=640px, lg=1024px) */
@media (max-width: 1023.98px) { :root { --text-l: 1rem; --text-2xl: 1.75rem; --text-3xl: 2rem; } }
@media (max-width: 639.98px)  { :root { --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; } }

/* Desktop size-up (all bumps in one place) */
@media (min-width: 721px) {
  :root {
    --content-max-width: 1120px;
    --fs-title: 2.1rem; --fs-instructions: 1.1rem; --fs-card: 1.1rem;
    --fs-section-label: 0.82rem; --fs-btn: 1rem;
    --card-min-h: 82px; --card-pad-y: 18px; --card-pad-x: 24px;
    --rack-width: 380px; --btn-pad-y: 13px; --btn-pad-x: 28px; --gap: 16px;
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(26,53,97,0.09) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  min-height: 100vh;
}
main { padding: 0; }

/* Grade-level top bar (grade switch changes ONLY this) */
body.grade-lower { --topbar-bg: var(--grade-lower-main); }
body.grade-upper { --topbar-bg: var(--grade-upper-main); }
body.grade-mh    { --topbar-bg: var(--grade-mh-main); }

/* ==========================================================================
   PROTOTYPE TOOLBAR — DELETE before engineering handoff
   ========================================================================== */
.proto-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 16px; background: var(--navy); color: white; font-size: 12px; font-family: monospace; }
.proto-bar input { flex: 1; min-width: 200px; padding: 5px 10px; border: none; border-radius: 6px; font-family: monospace; font-size: 12px; }
.proto-bar button { padding: 5px 12px; border: none; border-radius: 6px; cursor: pointer; background: var(--selected); color: #3a2f00; font-weight: 700; font-family: inherit; }
.proto-bar label { display: flex; align-items: center; gap: 5px; opacity: .8; }
.proto-bar select { padding: 5px 8px; border: none; border-radius: 6px; font-family: inherit; font-size: 12px; cursor: pointer; }
.proto-bar .hint { width: 100%; font-size: 11px; opacity: .5; }

/* ==========================================================================
   STATE / LOADER
   ========================================================================== */
.state { text-align: center; padding: 100px 20px; color: var(--muted); font-size: 0.95rem; }
.state.error { color: var(--incorrect); }
.loader { width: 44px; height: 44px; border: 3px solid rgba(26,53,97,0.15); border-top-color: var(--navy-mid); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar { background: var(--topbar-bg); padding: 18px var(--content-pad); }
.top-bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 56px; }
.top-bar-text { grid-column: 2; text-align: center; }
.top-bar-action { grid-column: 3; justify-self: end; }
.activity-title { font-size: var(--fs-title); font-weight: 700; color: var(--navy); margin-bottom: 6px; line-height: 1.2; }
.activity-instructions { font-size: var(--fs-instructions); color: var(--navy); opacity: 0.75; font-weight: 400; }

/* Toolbar row (Submit / Restart) */
.toolbar-row { display: flex; justify-content: center; gap: 10px; margin: 24px 0 28px; flex-wrap: wrap; }

/* Content shell + section labels */
.app-shell { max-width: var(--content-max-width); margin: 0 auto; padding: 24px var(--content-pad) 80px; }
.section-label { font-size: var(--fs-section-label); font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 10px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn { border: none; border-radius: 999px; padding: var(--btn-pad-y) var(--btn-pad-x); font-weight: 600; font-size: var(--fs-btn); cursor: pointer; font-family: inherit; transition: transform 0.1s, opacity 0.15s, background-color 0.15s; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--btn-blue); color: white; box-shadow: 0 2px 12px rgba(0,64,155,0.28); }
.btn-primary:hover { background: var(--btn-blue-hover); }
.btn-primary:active { background: var(--btn-blue-hover); }
.btn-ghost { background: var(--btn-yellow); color: var(--navy); border: 1.5px solid var(--btn-yellow-hover); }
.btn-ghost:hover { background: var(--btn-yellow-hover); border-color: var(--btn-yellow-hover); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ==========================================================================
   MODAL / OVERLAY
   ========================================================================== */
.overlay { position: fixed; inset: 0; background: rgba(26,53,97,0.38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 20; }
.overlay[hidden] { display: none; }
.modal { position: relative; background: white; color: var(--navy); border-radius: 28px; max-width: 520px; width: 100%; padding: 40px 36px; text-align: center; box-shadow: 0 28px 72px rgba(26,53,97,0.22); animation: modal-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--bg); color: var(--navy); cursor: pointer; font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.modal-close:hover { background: var(--bg-hover); }
@keyframes modal-in { from { transform: scale(0.88) translateY(16px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.modal h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; line-height: 1.2; }
.modal p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; margin-bottom: 28px; font-weight: 400; }
.modal .cta-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cta-row--single-line { flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cta-row--single-line .btn { padding: 10px 16px; font-size: 0.8rem; flex-shrink: 0; }
.modal-image-placeholder { width: 160px; height: 120px; background: var(--bg); border: 2px dashed var(--slot-border); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 34px; margin: 0 auto 20px; }
.celebration-img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin: 0 auto 20px; display: block; box-shadow: 0 4px 24px rgba(26,53,97,0.15); }
.warning-badge { width: 52px; height: 52px; background: #FFF4E5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 18px; }

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--incorrect); color: white; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; z-index: 30; box-shadow: 0 4px 16px rgba(224,64,42,0.3); }
.toast[hidden] { display: none; }

/* ==========================================================================
   SHARED ANIMATIONS
   ========================================================================== */
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.shake { animation: shake 0.35s; }

/* ==========================================================================
   SHARED RESPONSIVE (chrome only — activity layout lives in each activity)
   ========================================================================== */
@media (min-width: 721px) {
  .app-shell { padding-top: 32px; padding-bottom: 40px; }
}
@media (max-width: 720px) {
  .modal { padding: 32px 24px; }
  .top-bar-inner { grid-template-columns: 1fr; gap: 12px; }
  .top-bar-text   { grid-column: 1; }
  .top-bar-action { grid-column: 1; justify-self: center; }
}