/* T3: Cross-surface UI/UX polish — WCAG AA, reduced motion, mobile ≥320px, touch ≥44px, skeletons, empty states */
/*
 * Scoped, additive layer for the 10 v141–v170 surfaces:
 *   1. Mentor dashboard         .mentor-dashboard / .mentor-*
 *   2. Squad channels inbox     .mci
 *   3. Team workspace           .team-workspace / .tw-*
 *   4. Weekly quiz              .wq-*
 *   5. Ops docs library         .aikc-ops-*
 *   6. Run-of-show timer        .aikc-ros / .aikc-ros__*
 *   7. Mentor pacing pill       .aikc-mp-pill
 *   8. Mentor lounge            .aikc-mlounge
 *   9. Judges' UI               .judge-shell  +  body.judge (judge.html)
 *  10. Mentor invite team       .mentor-team
 *
 * Standards applied
 *   - WCAG 2.2 AA: 1.4.3 contrast, 2.4.7 focus visible, 2.5.5 target size
 *   - Fitts' Law: 44×44 minimum (kid-touch)
 *   - prefers-reduced-motion: reduce — no shimmer / slide / parallax
 *   - Mobile: ≥320px (no horizontal scroll), ≤480px compact rules
 *
 * Load AFTER mentor-mode.css, squad-channel.css, team-workspace.css,
 * weekly-quiz.css, ops-docs.css, run-of-show-timer.css.
 */

/* ============================================================================
 * 1. Shared tokens (scoped so they never leak globally)
 * ========================================================================== */
.mentor-dashboard,
.mci,
.team-workspace,
.wq-card, .wq-author-form, .wq-author-list,
.aikc-ops-docs,
.aikc-ros,
.aikc-mp-pill,
.aikc-mlounge,
.mentor-team,
.judge-shell {
  --aikc-tap: 44px;
  --aikc-focus-ring: 0 0 0 3px #f59e0b;
  --aikc-focus-offset: 2px;
  --aikc-ink: #0f172a;
  --aikc-ink-soft: #334155;
  --aikc-ink-muted: #475569;            /* 7.5:1 — replaces #64748b at 4.6:1 */
  --aikc-amber: #f59e0b;
  --aikc-amber-soft: #fde68a;
}

/* ============================================================================
 * 2. Touch targets — 44×44 minimum for buttons, links, controls
 *    Scoped per-surface so we never bump a global toolbar.
 * ========================================================================== */
.mentor-dashboard button:not(.mentor-banner__pill):not([data-density="compact"]),
.mentor-dashboard a.link-btn,
.mentor-dashboard a[role="button"],
.mci button,
.mci input[type="checkbox"],
.mci label.mci__check,
.team-workspace button,
.team-workspace a.tw-link,
.wq-card button,
.wq-choice,
.wq-author-row button,
.aikc-ops-docs button,
.aikc-ops-docs a.aikc-ops-back,
.aikc-ros button,
.aikc-ros [role="button"],
.aikc-mp-pill,
.aikc-mlounge button,
.aikc-mlounge a,
.mentor-team button,
.mentor-team a,
.judge-shell button,
.judge-shell a.btn {
  min-height: var(--aikc-tap);
  min-width: var(--aikc-tap);
}

/* Larger hit-area for tiny icon-only buttons (close, refresh, chevron) */
.mentor-drawer__close,
.aikc-mlounge__refresh,
.aikc-ros__chev,
.aikc-ros__icon,
.aikc-ops-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--aikc-tap);
  min-width: var(--aikc-tap);
}

/* Stepper / radio inputs in quiz */
.wq-choice__radio,
.wq-choice input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}
.wq-choice {
  padding-block: 12px;                  /* makes the whole row ≥44 */
}

/* ============================================================================
 * 3. Focus-visible — single canonical ring across all 10 surfaces
 * ========================================================================== */
.mentor-dashboard *:focus-visible,
.mci *:focus-visible,
.team-workspace *:focus-visible,
.wq-card *:focus-visible,
.wq-author-form *:focus-visible,
.wq-author-list *:focus-visible,
.aikc-ops-docs *:focus-visible,
.aikc-ros *:focus-visible,
.aikc-mp-pill:focus-visible,
.aikc-mlounge *:focus-visible,
.mentor-team *:focus-visible,
.judge-shell *:focus-visible {
  outline: none;                        /* we replace with box-shadow ring */
  box-shadow: var(--aikc-focus-ring);
  outline-offset: var(--aikc-focus-offset);
  border-radius: 8px;
}

/* ============================================================================
 * 4. High-contrast text — bump muted from #64748b (4.6:1) to #475569 (7.5:1)
 * ========================================================================== */
.mentor-dashboard .muted,
.mci .muted, .mci__sub, .mci__time, .mci__meta,
.team-workspace .tw-card__due, .team-workspace .muted,
.wq-card .muted, .wq-card__meta, .wq-card__eyebrow,
.aikc-ops-card__sub, .aikc-ops-card__meta, .aikc-ops-doc__sub, .aikc-ops-doc__meta,
.aikc-ros__hint, .aikc-ros__time,
.aikc-mlounge__hint, .aikc-mlounge__meta, .aikc-mlounge__time,
.mentor-team .muted,
.judge-shell .muted {
  color: var(--aikc-ink-muted);
}

/* ============================================================================
 * 5. Empty-state primitive — `<div class="aikc-empty-state">` with
 *    `<span class="spark-face">✨</span><p class="copy">…</p><button class="cta">…</button>`
 * ========================================================================== */
.aikc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 18px;
  text-align: center;
  background: #fffdf6;
  border: 1.5px dashed var(--aikc-amber-soft);
  border-radius: 18px;
  color: var(--aikc-ink-soft);
}
.aikc-empty-state .spark-face {
  font-size: 44px;
  line-height: 1;
  display: inline-block;
  animation: aikc-empty-bob 4s ease-in-out infinite;
}
.aikc-empty-state .copy {
  margin: 0;
  max-width: 36ch;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--aikc-ink-soft);
}
.aikc-empty-state .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--aikc-tap);
  padding: 10px 18px;
  background: var(--aikc-amber);
  color: #1c1917;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.aikc-empty-state .cta:hover { background: #d97706; color: #fff; }
@keyframes aikc-empty-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ============================================================================
 * 6. Loading skeleton primitives (scoped — coexists with skeleton.css globals)
 * ========================================================================== */
.aikc-skel {
  display: block;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: aikc-skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 10px;
  height: 16px;
  width: 100%;
}
.aikc-skel--text   { height: 12px; margin: 6px 0; border-radius: 6px; }
.aikc-skel--title  { height: 22px; width: 60%; margin: 0 0 10px; }
.aikc-skel--card   { height: 96px; border-radius: 16px; }
.aikc-skel--avatar { width: 44px; height: 44px; border-radius: 50%; }
@keyframes aikc-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
 * 7. Reduced-motion — disable shimmer, float, slide, transform animations
 *    across every T3 surface. Fade-only or instant.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mentor-dashboard *,
  .mci *,
  .team-workspace *,
  .wq-card *, .wq-author-form *, .wq-author-list *, .wq-badge-pop,
  .aikc-ops-docs *,
  .aikc-ros, .aikc-ros *,
  .aikc-mp-pill, .aikc-mp-pill *,
  .aikc-mlounge *,
  .mentor-team *,
  .judge-shell *,
  .aikc-empty-state .spark-face,
  .aikc-skel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  /* Keep visibility/opacity transitions snappy but not jarring */
  .aikc-ros--ping { animation: none !important; }
}

/* ============================================================================
 * 8. Mobile ≤480px — compact rules so the surfaces fit on phones
 * ========================================================================== */
@media (max-width: 480px) {
  .mentor-dashboard { padding: 12px; }
  .mentor-drawer { width: 100% !important; max-width: 100vw; border-radius: 0; }
  .mentor-drawer__head { padding: 14px; }

  .mci__row { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .mci__actions { width: 100%; justify-content: flex-end; }

  .team-workspace { padding: 12px; }
  .tw-board { grid-template-columns: 1fr !important; gap: 12px; }
  .tw-col { min-width: 0; }
  .tw-card { padding: 12px; }

  .wq-card { padding: 16px; border-radius: 18px; }
  .wq-choice { padding: 12px 14px; font-size: 0.95rem; }
  .wq-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .wq-actions > * { width: 100%; }

  .aikc-ops-docs { grid-template-columns: 1fr !important; }
  .aikc-ops-list { max-height: 50vh; overflow: auto; }
  .aikc-ops-reader { padding: 14px; }

  .aikc-ros__panel { width: calc(100vw - 24px); right: 12px; left: 12px; }
  .aikc-ros__row { padding: 10px 12px; }

  .aikc-mlounge { padding: 12px; border-radius: 18px; }
  .aikc-mlounge__compose-row { flex-direction: column; align-items: stretch; }
  .aikc-mlounge__compose-row > * { width: 100%; }

  .mentor-team__table { font-size: 0.9rem; }
  .mentor-team__row { flex-wrap: wrap; gap: 6px; }

  .judge-shell { padding: 12px 10px 80px; }
  .judge-shell .card { padding: 14px; border-radius: 16px; }
}

/* ============================================================================
 * 9. Tiny phones ≤320px — last-resort floor, prevent horizontal scroll
 * ========================================================================== */
@media (max-width: 320px) {
  .mentor-dashboard,
  .mci,
  .team-workspace,
  .wq-card,
  .aikc-ops-docs,
  .aikc-mlounge,
  .mentor-team,
  .judge-shell {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .mentor-drawer__head h2,
  .aikc-mlounge__title,
  .wq-card__title { font-size: 1rem; line-height: 1.3; }
  .tw-head__title { font-size: 0.95rem; }
  .aikc-ros__panel { width: 100vw; right: 0; left: 0; border-radius: 0; }
  .mentor-team__table th,
  .mentor-team__table td { padding: 6px 4px; font-size: 0.85rem; }
  /* Make every flex row wrap so nothing pushes past 320px */
  .mentor-feed__row,
  .mci__head,
  .tw-card__foot,
  .aikc-mlounge__head,
  .aikc-mlounge__meta { flex-wrap: wrap; }
}

/* ============================================================================
 * 10. Forced-colors / Windows high-contrast — keep ring + borders visible
 * ========================================================================== */
@media (forced-colors: active) {
  .mentor-dashboard *:focus-visible, .mci *:focus-visible,
  .team-workspace *:focus-visible, .wq-card *:focus-visible,
  .aikc-ops-docs *:focus-visible, .aikc-ros *:focus-visible,
  .aikc-mlounge *:focus-visible, .mentor-team *:focus-visible,
  .judge-shell *:focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
  .aikc-empty-state { border-color: CanvasText; }
}

/* ============================================================================
 * 11. M1 mobile + dark-mode pass — additive fixes from /tmp/aikc-ux-audit
 *     (don't refactor source; layer over the existing rules)
 * ========================================================================== */

/* 11.1 policies.html · retention table overflows ≤320 (37px hscroll).
       Wrap horizontally; ensure cells stop expanding past the viewport. */
@media (max-width: 480px) {
  .retention-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .retention-table thead,
  .retention-table tbody { display: table; width: 100%; min-width: 360px; }
}

/* 11.2 status.html · uptime-grid 90-col forces 808px width on 640 viewport.
       Lift the 45-cell breakpoint from 520 → 720 so tablets fit too. */
@media (max-width: 720px) {
  .uptime-grid { grid-template-columns: repeat(45, 1fr) !important; }
  .uptime-grid .uptime-cell:nth-child(-n+45) { display: none !important; }
}
@media (max-width: 380px) {
  .uptime-grid { grid-template-columns: repeat(30, 1fr) !important; }
  .uptime-grid .uptime-cell:nth-child(-n+60) { display: none !important; }
}

/* 11.3 classroom · /program hero overflows ≤640 (873px wide in 640vw).
       Force the hero + its children to honor the viewport. */
@media (max-width: 720px) {
  .aikc-view-host { max-width: 100%; overflow-x: hidden; }
  .aikc-program { max-width: 100%; }
  .aikc-program__hero {
    flex-direction: column;
    align-items: flex-start !important;
    max-width: 100%;
    box-sizing: border-box;
  }
  .aikc-program__hero > * { max-width: 100%; }
}

/* 11.4 Dark mode: light-background panels keep #fff while text inherits
       dark --c-text (≈ #e2e8f0) → unreadable. Re-apply dark surface tokens
       on the offending classroom widgets. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .aikc-notify-panel,
  :root[data-theme="dark"]  .aikc-notify-panel {
    background: var(--c-bg-card, #1e293b) !important;
    color: var(--c-text, #e2e8f0);
    border-color: var(--c-border, #334155);
  }
  :root[data-theme="auto"] .aikc-notify-panel__head,
  :root[data-theme="dark"]  .aikc-notify-panel__head {
    border-bottom-color: var(--c-border, #334155);
  }
  :root[data-theme="auto"] .aikc-notify-panel__markall:hover,
  :root[data-theme="dark"]  .aikc-notify-panel__markall:hover {
    background: var(--c-bg-soft, #111827);
  }

  :root[data-theme="auto"] .lab__mode-group,
  :root[data-theme="dark"]  .lab__mode-group {
    background: var(--c-bg-soft, #111827) !important;
    color: var(--c-text, #e2e8f0);
    border-color: var(--c-border, #334155);
  }

  :root[data-theme="auto"] .tw-empty,
  :root[data-theme="dark"]  .tw-empty {
    background: var(--c-bg-card, #1e293b) !important;
    color: var(--c-text, #e2e8f0);
    border-color: var(--c-border, #334155);
  }

  /* Light-amber avatars (cohort + notification icons) on dark bg → make text
     dark again so the emoji/initials stay visible on the warm chip. */
  :root[data-theme="auto"] .cohort-row__avatar,
  :root[data-theme="dark"]  .cohort-row__avatar,
  :root[data-theme="auto"] .aikc-notify-item__icon,
  :root[data-theme="dark"]  .aikc-notify-item__icon {
    color: #0f172a !important;
  }
}

/* 11.5 Tap target floor on classroom chrome that came up <44 in the audit:
       sidebar avatar/signout, nav-toggle, brand, bell, raise-hand, chip,
       and the mark-all action. Scoped to known classes — additive only. */
.classroom-side__avatar,
.classroom-side__signout,
.classroom-side__brand,
.nav-toggle,
.aikc-bell,
.aikc-raise-hand-btn,
.aikc-notify-panel__markall,
.aikc-notify-panel__close {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The site-wide skip-link is intentionally 0×0 until focus — exclude it
   so we don't break its visually-hidden state. */
.skip-link:not(:focus):not(:focus-visible) {
  min-height: 0;
  min-width: 0;
}

/* 11.6 Last-resort global guard: prevent any unforeseen child from breaking
       the viewport on phones. body + html only — narrower than `*`. */
@media (max-width: 480px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
}

/* ============================================================================
 * 12. v171 · Classroom UX polish — Sidebar Maya block, Raise Hand,
 *     Lab declutter, Spark tutor panel. All additive. Scoped per surface.
 * ========================================================================== */

/* 12.1 · Sidebar Maya block: credits row is now hidden via [hidden] in HTML.
         (No CSS needed — declutter.js still reads #side-credits text.) */

/* 12.2 · Raise hand button: prevent label truncation by snapping to an
         icon-only pill on very narrow viewports. The button itself is the
         only tap target — separated from the help "?" fab. */
.aikc-raise-hand-btn {
  /* Keep the label visible on normal viewports — let the pill size to content
     and never compete with the help fab in the bottom-right. */
  max-width: 220px;
  white-space: nowrap;
}
.aikc-raise-hand-btn .aikc-rh-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* Icon-only · keep the pill round so the emoji stays centered + tap target
     remains ≥44px. Label is removed from the accessible tree via aria-label
     on the button (the visible label becomes redundant on this width). */
  .aikc-raise-hand-btn {
    padding: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    gap: 0;
  }
  .aikc-raise-hand-btn .aikc-rh-label { display: none; }
  .aikc-raise-hand-btn .aikc-rh-emoji { font-size: 24px; }
}

/* 12.3 · Help "?" fab: force a vertical stack above the raise-hand pill so
         the two never look fused into a single button. help-widget.js's
         collision detector doesn't know about .aikc-raise-hand-btn, so we
         pin the offset deterministically when a raise-hand button is in DOM. */
body:has(.aikc-raise-hand-btn) .akc-help-fab {
  bottom: 88px;
}
@media (max-width: 480px) {
  body:has(.aikc-raise-hand-btn) .akc-help-fab {
    bottom: 86px;
    right: 14px;
  }
}

/* 12.4 · Tutor panel open: lift the raise-hand pill + help fab above the
         tutor's bottom edge so the kid can still reach them without the
         tutor obscuring the tap target. The tutor panel itself stays on top. */
body[data-tutor-open="true"] .aikc-raise-hand-btn {
  bottom: calc(56vh + 14px);
}
body[data-tutor-open="true"]:has(.aikc-raise-hand-btn) .akc-help-fab {
  bottom: calc(56vh + 80px);
}
@media (prefers-reduced-motion: reduce) {
  .aikc-raise-hand-btn,
  .akc-help-fab { transition: none !important; }
}

/* 12.5 · Lab — mode-aware toolbar
         Buttons tagged data-mode-only="code" only appear when .lab is in code mode.
         When .lab[data-mode] is image or video, hide them. */
.lab[data-mode="image"] [data-mode-only="code"],
.lab[data-mode="video"] [data-mode-only="code"] {
  display: none !important;
}

/* 12.6 · Lab — Prompts chip placed above the textarea (replaces toolbar button). */
.lab__form-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.lab__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid var(--c-border, #e2e8f0);
  background: var(--c-bg-warm, #FBF9F4);
  color: var(--c-ink-soft, #334155);
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.lab__chip:hover { border-color: #fcd34d; background: #fffbeb; transform: translateY(-1px); }
.lab__chip:focus-visible { outline: 3px solid #fcd34d; outline-offset: 2px; }
.lab__chip[aria-expanded="true"] { background: #fef3c7; border-color: #fbbf24; }
.lab__chip .aikc-icon { color: var(--c-amber-500, #f59e0b); }
@media (prefers-reduced-motion: reduce) {
  .lab__chip { transition: none; }
  .lab__chip:hover { transform: none; }
}

/* 12.7 · Lab — disabled Edit code styling (until first artifact arrives). */
.lab__edit-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.lab__edit-toggle:disabled:hover { transform: none; }

/* 12.8 · Lab — empty-state hero (single-column composer · no preview pane).
         When .lab[data-empty="true"], collapse the split-pane into a single
         full-width chat column with Spark's welcome above the input. */
.lab__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px 12px;
  gap: 10px;
}
.lab__hero-avatar { line-height: 0; }
.lab__hero-title {
  margin: 4px 0 0;
  font: 700 22px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--c-ink, #0f172a);
}
.lab__hero-body {
  margin: 0;
  max-width: 38ch;
  color: var(--c-ink-muted, #475569);
  font-size: 14px;
  line-height: 1.45;
}
/* Once the kid has sent a message, the hero disappears + split-pane returns. */
.lab[data-empty="false"] .lab__hero { display: none; }
/* Empty state: hide the preview pane + iteration sidebar, make chat full-width. */
.lab[data-empty="true"] .lab__split {
  display: block;
}
.lab[data-empty="true"] .lab__chat {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.lab[data-empty="true"] .lab__preview,
.lab[data-empty="true"] .lab__mt-sidebar,
.lab[data-empty="true"] .lab__edit-tabs {
  display: none !important;
}

/* 12.9 · Spark tutor panel — small notice chip in header (replaces full banner).
         The expanded sentence shows inline beneath when the chip is tapped. */
.tutor-panel__notice-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-right: 6px;
  border: 1px solid #fbbf24;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font: 600 11px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms, border-color 120ms;
  min-height: 28px;
}
.tutor-panel__notice-chip:hover { background: #fde68a; border-color: #f59e0b; }
.tutor-panel__notice-chip:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.tutor-panel__notice-chip[aria-expanded="true"] { background: #fde68a; }
.tutor-panel__notice--expanded {
  font-size: 12px;
  line-height: 1.45;
  color: #78350f;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  border-bottom: 1px solid #fde68a;
  padding: 8px 14px;
}

/* 12.10 · Tutor panel — starter prompt chips (replaces empty yellow body).
          Rendered above the first message; click fills the input + hides. */
.tutor-panel__starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 4px;
}
.tutor-panel__starter {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #0f172a;
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, transform 120ms;
}
.tutor-panel__starter:hover {
  border-color: #fcd34d;
  background: #fffbeb;
  transform: translateY(-1px);
}
.tutor-panel__starter:focus-visible {
  outline: 3px solid #fcd34d;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tutor-panel__starter { transition: none; }
  .tutor-panel__starter:hover { transform: none; }
}

/* 12.11 · Tap-target floors on new chips (≥44 on touch primarily). */
@media (pointer: coarse) {
  .lab__chip,
  .tutor-panel__starter,
  .tutor-panel__notice-chip {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* =============================================================
 * Phase E · Projects page rebuild
 *
 * Three routes now share a unified kid-cafe look:
 *   #/projects   → Your work + Shares sub-tab  (.aikc-projects)
 *   #/lab/ideas  → Build something new          (.aikc-lab-ideas)
 *   #/gallery    → Peer projects                (.aikc-gallery)
 * ============================================================= */

/* ---- shared: #/projects · Your work container ---- */
.aikc-projects {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.aikc-projects__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.aikc-projects__head h1 {
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -0.01em;
}
.aikc-projects__head-text p {
  margin: 0;
}
.aikc-projects__head .btn-primary {
  white-space: nowrap;
  min-height: 44px;
  align-self: center;
}

/* ---- sub-tab nav (Projects | Shares) ---- */
.aikc-projects__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #f1e6d4;
  padding: 0 0 0 2px;
  flex-wrap: wrap;
}
.aikc-projects__tab {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--c-ink-muted, #6b7280);
  cursor: pointer;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: 12px 12px 0 0;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.aikc-projects__tab:hover {
  background: #fef9ef;
  color: var(--c-ink, #2b2b2b);
}
.aikc-projects__tab:focus-visible {
  outline: 3px solid #f0b95c;
  outline-offset: 2px;
}
.aikc-projects__tab.is-active {
  color: var(--c-ink, #2b2b2b);
  border-bottom-color: #f0b95c;
}
.aikc-projects__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.78rem;
  font-weight: 700;
}
.aikc-projects__tab.is-active .aikc-projects__tab-count {
  background: #f0b95c;
  color: #5a3a0e;
}

.aikc-projects__panel { padding: 8px 0 24px; }
.aikc-projects__panel[hidden] { display: none; }

.aikc-projects__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 24px;
  text-align: center;
}
.aikc-projects__empty .classroom-empty__cta {
  min-height: 48px;
  align-self: center;
}

/* Project tile icon (unified per kind) — legacy compact treatment */
.project-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fef3c7;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--c-amber-700, #b45309);
}
.project-tile__icon .aikc-icon { width: 18px; height: 18px; }

/* D5 · Gallery-style tile with 16:9 thumb band per Agent 3 ('thumbnails
   on tiles. Without them this scene is fundamentally broken'). Until
   real preview-capture infra ships, the thumb shows a vivid per-kind
   gradient + large icon — visually distinguishable across kinds, much
   better than the icon-in-rounded-box treatment.

   Kind hues mirror the existing project-kind palette in the gallery
   surface so a chatbot tile looks the same in 'Projects' and 'Gallery'. */
.project-tile--gallery {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 14px;
  background: var(--c-bg-card, #fff);
  transition: transform 160ms, box-shadow 160ms;
}
.project-tile--gallery:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.15);
}
.project-tile--gallery a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.project-tile__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #fef3c7 0%, #fff8e6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.project-tile__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-tile__thumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
}
.project-tile__thumb-icon .aikc-icon { width: 48px; height: 48px; }

/* Per-kind gradient — visual differentiation across project kinds */
.project-tile--gallery[data-kind="chatbot"] .project-tile__thumb { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.project-tile--gallery[data-kind="web"] .project-tile__thumb { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); }
.project-tile--gallery[data-kind="image"] .project-tile__thumb { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); }
.project-tile--gallery[data-kind="video"] .project-tile__thumb { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.project-tile--gallery[data-kind="music"] .project-tile__thumb { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.project-tile--gallery[data-kind="game"] .project-tile__thumb { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); }
.project-tile--gallery[data-kind="story"] .project-tile__thumb { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); }
.project-tile--gallery[data-kind="three"] .project-tile__thumb { background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%); }
.project-tile--gallery[data-kind="tool"] .project-tile__thumb { background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); }

.project-tile__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.project-tile__body strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-text-strong, #0f172a);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.project-tile__vis {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  align-self: flex-start;
}
.project-tile__vis[data-vis="public"]  { background: #dcfce7; color: #166534; }
.project-tile__vis[data-vis="cohort"]  { background: #dbeafe; color: #1e3a8a; }
.project-tile__vis[data-vis="invited"] { background: #FEF3C7; color: #78350f; }
.project-tile__comments {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  align-self: flex-start;
}
.project-tile__comments[hidden] { display: none !important; }

/* ---- #/lab/ideas · Build something new ---- */
.aikc-lab-ideas,
.aikc-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 28px;
  max-width: 1080px;
  margin: 0 auto;
}
.aikc-lab-ideas__head,
.aikc-gallery__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aikc-lab-ideas__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  min-height: 28px;
}
.aikc-lab-ideas__head h1,
.aikc-gallery__head h1 {
  margin: 0;
  font-size: clamp(1.65rem, 2.6vw, 2.35rem);
  letter-spacing: -0.01em;
}
.aikc-lab-ideas__head p,
.aikc-gallery__head p {
  margin: 0;
}

.aikc-lab-ideas__filters,
.aikc-gallery .gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 6px 0 2px;
}
.aikc-lab-ideas__sep {
  color: var(--c-ink-muted, #94a3b8);
  margin: 0 4px;
  font-weight: 700;
}

.aikc-lab-ideas__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.aikc-lab-ideas__empty {
  grid-column: 1 / -1;
  padding: 32px 20px;
  text-align: center;
}

/* Unified idea-tile (used in #/lab/ideas) */
.aikc-lab-ideas__grid .idea-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1.5px solid #fde68a;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 180ms ease, border-color 180ms ease;
  min-height: 142px;
}
.aikc-lab-ideas__grid .idea-tile:hover,
.aikc-lab-ideas__grid .idea-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(240, 185, 92, 0.18);
  border-color: #f0b95c;
}
.aikc-lab-ideas__grid .idea-tile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.aikc-lab-ideas__grid .idea-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fef3c7;
  color: #0f172a;
}
.aikc-lab-ideas__grid .idea-tile__kind {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.aikc-lab-ideas__grid .idea-tile__title {
  font-size: 1.08rem;
  line-height: 1.15;
  margin: 0;
}
.aikc-lab-ideas__grid .idea-tile__summary {
  display: none;
}
.idea-tile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}
.idea-tile__duration,
.idea-tile__difficulty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.idea-tile__duration {
  background: #f1f5f9;
  color: #475569;
}
.idea-tile__difficulty--easy   { background: #dcfce7; color: #166534; }
.idea-tile__difficulty--medium { background: #fef3c7; color: #78350f; }
.idea-tile__difficulty--hard   { background: #fee2e2; color: #991b1b; }
.idea-tile__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: auto;
  border-radius: 999px;
  background: #0b1028;
  color: #fff;
}

/* ---- #/gallery container styling (reuses .gallery-grid / .gallery-card from classroom.css) ---- */
.aikc-gallery .gallery-tabs {
  margin-bottom: 8px;
}

/* ---- Touch targets: ensure all chips and tabs are ≥44px on coarse pointers ---- */
@media (pointer: coarse) {
  .aikc-projects__tab,
  .aikc-lab-ideas__filters .chip,
  .aikc-gallery .gallery-tabs .chip {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ---- Mobile responsive (≥320px) ---- */
@media (max-width: 600px) {
  .aikc-projects,
  .aikc-lab-ideas,
  .aikc-gallery {
    padding: 16px 14px;
  }
  .aikc-projects__head {
    flex-direction: column;
    align-items: stretch;
  }
  .aikc-projects__head .btn-primary {
    width: 100%;
  }
  .aikc-lab-ideas__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .aikc-projects__tab,
  .aikc-lab-ideas__grid .idea-tile {
    transition: none;
  }
  .aikc-lab-ideas__grid .idea-tile:hover {
    transform: none;
  }
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] {
  .aikc-projects__tabs {
    border-bottom-color: #3b2f1f;
  }
  .aikc-projects__tab {
    color: #c9bfae;
  }
  .aikc-projects__tab:hover {
    background: #2a2014;
    color: #fef9ef;
  }
  .aikc-projects__tab.is-active {
    color: #fef9ef;
  }
  .aikc-projects__tab-count {
    background: #3b2f1f;
    color: #fef3c7;
  }
  .aikc-projects__tab.is-active .aikc-projects__tab-count {
    background: #f0b95c;
    color: #2a1c08;
  }
  .project-tile__icon,
  .aikc-lab-ideas__grid .idea-tile__icon {
    background: #3b2f1f;
  }
  .aikc-lab-ideas__grid .idea-tile {
    background: #1e1812;
    border-color: #4b3b25;
  }
  .aikc-lab-ideas__grid .idea-tile:hover,
  .aikc-lab-ideas__grid .idea-tile:focus-visible {
    border-color: #f0b95c;
  }
  .idea-tile__duration {
    background: #2a2014;
    color: #c9bfae;
  }
} }


/* ============================================================
 * Phase H · Cross-surface polish (post V1+V2+V3) · v172
 * Card line-clamp, unified hover, cookie banner safety, "8 sec" labels
 * ============================================================ */

/* Card description normalization — 2-line clamp across surfaces */
.idea-tile__desc,
.gallery-tile__desc,
.aikc-session-card__teaser,
.project-tile__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Unified card hover state across all tile-like surfaces */
.idea-tile,
.gallery-tile,
.aikc-session-card,
.project-tile,
.aikc-projects .tile {
  transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 180ms ease,
              border-color 180ms ease;
}
.idea-tile:hover,
.gallery-tile:hover,
.aikc-session-card:hover,
.project-tile:hover,
.aikc-projects .tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -10px rgba(15, 23, 42, 0.18);
}
.idea-tile:focus-visible,
.gallery-tile:focus-visible,
.aikc-session-card:focus-visible,
.project-tile:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

/* Cookie banner padding safety — ensure all new routes inherit body padding */
body.aikc-cookie-banner-visible .aikc-lab-ideas,
body.aikc-cookie-banner-visible .aikc-projects,
body.aikc-cookie-banner-visible .aikc-gallery {
  padding-bottom: 140px;
}
@media (max-width: 520px) {
  body.aikc-cookie-banner-visible .aikc-lab-ideas,
  body.aikc-cookie-banner-visible .aikc-projects,
  body.aikc-cookie-banner-visible .aikc-gallery {
    padding-bottom: 220px;
  }
}

/* "8 sec" / video-duration labels — visual consistency across surfaces */
.aikc-week__video-len,
.aikc-block-video__duration,
.aikc-session-card__intro-len {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* prefers-reduced-motion neutralizes hover transitions */
@media (prefers-reduced-motion: reduce) {
  .idea-tile,
  .gallery-tile,
  .aikc-session-card,
  .project-tile,
  .aikc-projects .tile {
    transition: none;
  }
  .idea-tile:hover,
  .gallery-tile:hover,
  .aikc-session-card:hover,
  .project-tile:hover,
  .aikc-projects .tile:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Iteration 4 — "Your work" kid-friendly polish.
   Bigger friendly tiles, a colorful per-kind thumb + full-pill kind
   badge, a clear "Edited" line, a big "Open" tap target, and an inviting
   "Start a new build" tile as the first item in the grid. Full borders
   only — no side-accent stripes. Matches the It3 Learn / It1 Build bar.
   ════════════════════════════════════════════════════════════════════ */

/* Roomier grid so the bigger tiles breathe. */
.aikc-projects .projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}

/* "Start a new build" tile — first in the grid, always inviting. */
.project-newtile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  min-height: 232px;
  padding: 22px 18px;
  border-radius: 16px;
  border: 2px dashed #f0b95c;
  background:
    radial-gradient(120% 120% at 50% 0%, #fff7e8 0%, #ffffff 70%);
  color: var(--c-text-strong, #0f172a);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.project-newtile:hover {
  transform: translateY(-2px);
  border-color: var(--amber-500, #f59e0b);
  box-shadow: 0 14px 30px -12px rgba(245, 158, 11, 0.45);
}
.project-newtile:focus-visible {
  outline: 3px solid var(--amber-500, #f59e0b);
  outline-offset: 3px;
}
.project-newtile__plus {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 4px;
  background: var(--amber-500, #f59e0b);
  color: #1a1205;
  box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.55);
}
.project-newtile__plus .aikc-icon { width: 30px; height: 30px; color: #1a1205; }
.project-newtile__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
}
.project-newtile__sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink-muted, #6b7280);
}

/* Full-pill kind badge floating on the thumb (NOT a side stripe). */
.project-tile__kind {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.25);
}

/* Bigger, friendlier thumb icon (was a faint 0.35 alpha). */
.aikc-projects .project-tile__thumb { aspect-ratio: 16 / 10; }
.aikc-projects .project-tile__thumb-icon { color: rgba(15, 23, 42, 0.55); }
.aikc-projects .project-tile__thumb-icon .aikc-icon { width: 52px; height: 52px; }

/* Friendly "Edited Xh ago" line with a small clock. */
.project-tile__edited {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-ink-muted, #6b7280);
}
.project-tile__edited .aikc-icon { width: 13px; height: 13px; color: currentColor; }

/* Big, obvious Open tap target. */
.aikc-projects .project-tile__open {
  margin-top: 10px;
  min-height: 42px;
}
.aikc-projects .project-tile__open .aikc-icon {
  width: 16px; height: 16px; margin-left: 4px; color: #fff;
}
.project-tile--gallery:hover .project-tile__open { background: var(--amber-600, #d97706); }

/* Warmer empty state CTA already styled; keep spacing consistent. */
.aikc-projects__empty { margin-top: 12px; }

/* Dark-mode parity for the It4 additions. */
:root[data-theme="dark"] .project-newtile {
  background: var(--c-bg-card, #1e293b);
  border-color: #b4791f;
  color: var(--c-text-strong, #f8fafc);
}
:root[data-theme="dark"] .project-newtile__sub { color: var(--c-text-muted, #94a3b8); }
:root[data-theme="dark"] .project-tile__kind {
  background: rgba(15, 23, 42, 0.82);
  color: #f1f5f9;
}