/* ============================================================================
   classroom.css — Finlingo Classroom
   Calm dark surfaces with white interaction, amber intervention signals, and
   green reserved for correct/completed outcomes.
   visual language. Reuses the .ml-* quiz components from coach.css for the
   learner assignment player; everything else is .cl-*. Lives inside the narrow
   app-shell (.screen provides the page padding + width).
   ============================================================================ */

:root {
  /* ── Surface system — Phase 8: converged onto the canonical --fl-* charcoal
     ramp (theme.css) so Classroom shares one surface language with the rest of
     the app. The layered-charcoal hierarchy is preserved (deep→hover). ── */
  --cl-bg-page:   var(--fl-bg-deep);        /* outermost page                       */
  --cl-bg-shell:  var(--fl-bg);             /* classroom workspace / scroll surface  */
  --cl-bg-card:   var(--fl-surface);        /* content cards                         */
  --cl-bg-field:  var(--fl-surface-passive);/* inputs, selects, recessed fills       */
  --cl-bg-hover:  var(--fl-surface-hover);  /* interactive hover surface             */

  /* ── Borders — converged onto the canonical two weights ─────────────── */
  --cl-border: var(--fl-border);
  --cl-border-strong: var(--fl-border-strong);

  /* ── One restrained Finlingo accent (soft financial green) ──────────────
     Aliases the canonical mint accent (--fl-accent* in theme.css) — the
     shared brand accent across Learn / Market / Classroom. As of Phase 8 the
     neutral surface/border/text ramp above/below is also converged onto the
     canonical --fl-* primitives. ── */
  --cl-accent: var(--fl-accent);
  --cl-accent-hover: var(--fl-accent-hover);
  --cl-accent-soft: var(--fl-accent-soft);
  --cl-accent-border: var(--fl-accent-border);

  /* ── Text hierarchy — Phase 8: converged onto the canonical --fl-* ramp ── */
  --cl-text-primary: var(--fl-title);
  --cl-text-secondary: var(--fl-body);
  --cl-text-muted: var(--fl-muted);
  --cl-text-faint: var(--fl-faint);

  /* ── Spacing scale (use these instead of one-off margins) ───────────── */
  --cl-space-1: 4px;
  --cl-space-2: 8px;
  --cl-space-3: 12px;
  --cl-space-4: 16px;
  --cl-space-5: 24px;

  /* ── Legacy aliases → mapped onto the system above so every existing
     .cl-* selector inherits the refined theme without per-rule churn. ── */
  --cl-bg: var(--cl-bg-shell);       /* .cl-screen surface + sticky-fade base */
  --cl-card: var(--cl-bg-card);
  --cl-card-2: var(--cl-bg-field);
  --cl-title: var(--cl-text-primary);
  --cl-body: var(--cl-text-secondary);
  --cl-muted: var(--cl-text-muted);
  --cl-eyebrow: var(--cl-text-secondary);

  /* Semantic outcome colours kept intact (correct/attention/severe). */
  --cl-green: #2bbd6a;
  --cl-green-bright: #22F05A;
  --cl-amber: #d8a23a;
  --cl-red: #c0594f;
  --cl-radius: var(--fl-radius-card);      /* 16px — aliased, unchanged */
  --cl-radius-sm: var(--fl-radius-control); /* 12px — aliased, unchanged */
}

/* The app shell zeroes `.screen` padding and expects each screen's own content
   wrapper to provide horizontal padding (see .market-learning-shell etc.). The
   large bottom value clears the fixed mobile bottom-nav; the desktop shell
   (min-width:900px) overrides this to a tighter value in refine.css. */
/* Page is the outermost surface; the classroom workspace (.cl-screen) is a
   distinct, slightly lighter layer that carries the cards. */
#classroomScreen { background: var(--cl-bg-page); }
.cl-screen { display: block; padding: var(--cl-space-5) 20px 120px; background: var(--cl-bg-shell); }
.cl-center { text-align: center; }

/* ── Header ─────────────────────────────────────────────────────────────── */
/* Title stays visually connected to the content below (scale spacing). */
.cl-header { margin: var(--cl-space-1) 0 var(--cl-space-4); }
.cl-header h1 { margin: 0 0 6px; font: 700 1.5rem/1.2 var(--font-d, var(--font-b)); color: var(--cl-title); letter-spacing: -0.01em; }
.cl-header p { margin: 0; color: var(--cl-text-secondary); font: 400 0.92rem/1.45 var(--font-b); }

.cl-kicker { font: 700 0.7rem var(--font-b); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cl-eyebrow); margin-bottom: 6px; }
.cl-section-title { font: 700 0.8rem var(--font-b); letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-eyebrow); margin: 6px 0 12px; }
.cl-mt { margin-top: 14px; }
.cl-muted { color: var(--cl-muted); font: 400 0.88rem/1.5 var(--font-b); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.cl-card {
  background: var(--cl-bg-card);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  padding: var(--cl-space-4);
  margin-bottom: var(--cl-space-3);
  /* Slight inset top highlight + very restrained lift — not a floating panel. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.14);
}
.cl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cl-card-head strong { font: 600 1.02rem var(--font-b); color: var(--cl-title); }
.cl-card-head-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 8px; color: var(--cl-muted); font: 400 0.82rem var(--font-b); }
.cl-card-actions { display: flex; gap: var(--cl-space-2); margin-top: var(--cl-space-4); }
.cl-card-actions .cl-btn { width: auto; flex: 1; }

/* ── Overflow ("•••") menu ───────────────────────────────────────────────── */
.cl-menu { position: relative; flex: 0 0 auto; }
.cl-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--cl-muted);
}
.cl-menu-btn:hover { color: var(--cl-title); background: var(--cl-card-2); border-color: var(--cl-border); }
.cl-menu-btn svg { width: 20px; height: 20px; fill: currentColor; }
.cl-menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 168px; padding: 6px; display: none;
  background: var(--cl-card); border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm); box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.cl-menu-pop.is-open { display: block; }
/* Flip upward when there is not enough room below (set by toggleMenu), so the
   menu is never clipped by the viewport edge or the sticky action bar. */
.cl-menu-pop.is-up { top: auto; bottom: calc(100% + 4px); }
.cl-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0;
  border-radius: 9px; background: transparent; color: var(--cl-body);
  font: 500 0.88rem var(--font-b); cursor: pointer;
}
.cl-menu-item:hover { background: var(--cl-card-2); color: var(--cl-title); }
.cl-menu-item-danger { color: #e08a82; }
.cl-menu-item-danger:hover { background: rgba(192,89,79,0.12); color: #f0aaa3; }

.cl-code-chip {
  font: 700 0.78rem var(--font-m, monospace); letter-spacing: 0.06em;
  color: var(--cl-title); background: rgba(255,255,255,0.06);
  border: 1px solid var(--cl-border-strong); border-radius: 999px; padding: 4px 10px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.cl-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 16px; border-radius: 13px; border: 1px solid transparent;
  font: 700 0.92rem var(--font-b); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .06s ease, opacity .12s ease;
}
.cl-btn:active { transform: translateY(1px); }
.cl-btn:disabled { opacity: 0.55; cursor: default; }
.cl-btn:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }
/* Primary = the single most important action: restrained financial-green. */
.cl-btn-primary { background: var(--cl-accent); color: #06130d; }
.cl-btn-primary:hover:not(:disabled) { background: var(--cl-accent-hover); }
.cl-btn-line { background: transparent; border-color: var(--cl-border-strong); color: var(--cl-text-primary); }
.cl-btn-line:hover:not(:disabled) { border-color: var(--cl-border-strong); background: var(--cl-bg-hover); }
.cl-btn-ghost { background: transparent; color: var(--cl-text-muted); }
.cl-btn-ghost:hover:not(:disabled) { color: var(--cl-text-primary); background: var(--cl-bg-hover); }
/* Secondary "+ Create assignment": dark surface + muted border so it stays
   visible but sits below the assignment cards, never a dominant white fill. */
.cl-btn-create { background: var(--cl-bg-field); border-color: var(--cl-border); color: var(--cl-text-primary); font-weight: 600; }
.cl-btn-create:hover:not(:disabled) { background: var(--cl-bg-hover); border-color: var(--cl-border-strong); }
.cl-btn-compact { width: auto; flex: 0 0 auto; padding: 8px 16px; font-size: 0.84rem; border-radius: 10px; }

.cl-stack { display: flex; flex-direction: column; gap: 10px; }

/* ── Group detail: head + summary row ────────────────────────────────────── */
.cl-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 2px 0 14px; }
.cl-detail-head-main { min-width: 0; }
.cl-detail-head-main h1 { margin: 0 0 4px; font: 700 1.4rem/1.2 var(--font-d, var(--font-b)); color: var(--cl-title); letter-spacing: -0.01em; }
.cl-detail-head-main p { margin: 0; color: var(--cl-text-secondary); font: 400 0.9rem/1.45 var(--font-b); }

.cl-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cl-summary-item { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm); padding: 11px 12px; }
.cl-summary-val { font: 700 1.05rem var(--font-d, var(--font-b)); color: var(--cl-title); line-height: 1.1; }
.cl-summary-label { margin-top: 3px; color: var(--cl-muted); font: 400 0.72rem var(--font-b); }

/* ── Compact join-code card (group detail / insights empty) ──────────────── */
.cl-code-card-sm { text-align: left; padding: 13px 14px; }
.cl-code-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-code-mid { margin-top: 3px; font: 800 1.35rem var(--font-m, monospace); letter-spacing: 0.12em; color: #fff; text-transform: uppercase; }

/* ── Assignment title line ───────────────────────────────────────────────── */
.cl-assign-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 4px 0 2px; }
.cl-assign-title { color: var(--cl-title); font: 600 0.96rem var(--font-b); }

/* ── Back link ──────────────────────────────────────────────────────────── */
.cl-back {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: 0;
  color: var(--cl-muted); font: 600 0.86rem var(--font-b); cursor: pointer;
  padding: 0; margin: 0 0 14px;
}
.cl-back:hover { color: var(--cl-title); }
.cl-back svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Empty / threshold / error states ──────────────────────────────────── */
.cl-empty {
  text-align: center; padding: 30px 18px; background: var(--cl-card-2);
  border: 1px solid var(--cl-border); border-radius: var(--cl-radius); margin-top: 4px;
}
.cl-empty h2 { margin: 0 0 8px; font: 700 1.12rem var(--font-d, var(--font-b)); color: var(--cl-title); }
.cl-empty p { margin: 0 auto 16px; max-width: 280px; color: var(--cl-muted); font: 400 0.9rem/1.5 var(--font-b); }
.cl-empty .cl-btn { margin-top: 8px; }

.cl-threshold {
  padding: 16px; border: 1px dashed var(--cl-border-strong); border-radius: var(--cl-radius-sm);
  color: var(--cl-muted); font: 400 0.9rem/1.5 var(--font-b); text-align: center;
}
.cl-error { padding: 16px; border: 1px solid rgba(192,89,79,0.4); background: rgba(192,89,79,0.08); border-radius: var(--cl-radius-sm); }
.cl-error p { margin: 0 0 10px; color: #e9b3ad; font: 400 0.9rem/1.5 var(--font-b); }

/* ── Loading ────────────────────────────────────────────────────────────── */
.cl-loading { text-align: center; padding: 30px 0; }
.cl-loading p { margin-top: 12px; color: var(--cl-muted); font: 400 0.88rem var(--font-b); }
/* Loading spinner: white indicator on a dark-gray track (never green — green is
   reserved for correct/success states only). */
.cl-spinner {
  width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
  border: 2.5px solid var(--cl-border-strong); border-top-color: #ffffff;
  animation: cl-spin 0.7s linear infinite;
}
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.cl-form { display: block; }
.cl-field { display: block; margin-bottom: 14px; }
.cl-field-label { display: block; margin-bottom: 6px; font: 600 0.82rem var(--font-b); color: var(--cl-eyebrow); }
.cl-input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 12px 14px;
  background: var(--cl-bg-field); border: 1px solid var(--cl-border);
  border-radius: 12px; color: var(--cl-text-primary);
  font: 500 0.96rem var(--font-b); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.cl-input::placeholder { color: var(--cl-text-faint); }
/* Hover: slightly stronger border, no large colour change. */
.cl-input:hover:not(:focus) { border-color: var(--cl-border-strong); }
/* Focus: accent border + soft ring, no browser-default blue outline. */
.cl-input:focus { border-color: var(--cl-accent); box-shadow: 0 0 0 3px var(--cl-accent-soft); }
textarea.cl-input { min-height: 92px; resize: vertical; line-height: 1.5; }
/* Selects share the field system with a subtle custom chevron. */
select.cl-input {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.cl-input-code { letter-spacing: 0.28em; text-transform: uppercase; font-family: var(--font-m, monospace); font-weight: 700; text-align: center; font-size: 1.15rem; }
.cl-check { display: flex; align-items: center; gap: 9px; color: var(--cl-body); font: 500 0.9rem var(--font-b); margin: 4px 0 4px; cursor: pointer; }
.cl-check input { width: 16px; height: 16px; accent-color: var(--cl-accent); }

/* Clearer section spacing in the (denser) assignment form. */
.cl-form-spaced .cl-form-group { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--cl-border); }
.cl-form-spaced .cl-form-group:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.cl-form-spaced .cl-form-group .cl-field:last-child { margin-bottom: 0; }

/* Full-width toggle row (replaces the teach-it-back checkbox). */
.cl-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 14px; cursor: pointer;
  background: var(--cl-card-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
}
.cl-toggle-row:hover { border-color: var(--cl-border-strong); }
.cl-toggle-text { color: var(--cl-body); font: 500 0.92rem var(--font-b); text-align: left; }
.cl-toggle-switch {
  flex: 0 0 auto; position: relative; width: 42px; height: 24px; border-radius: 999px;
  background: #2a2f37; border: 1px solid var(--cl-border-strong); transition: background .15s ease, border-color .15s ease;
}
.cl-toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #c4c9d0; transition: transform .15s ease, background .15s ease;
}
/* Active = restrained accent track with a dark knob (the accent marks the
   "on"/active state consistently with the rest of the refined system). */
.cl-toggle-row.is-on .cl-toggle-switch { background: var(--cl-accent); border-color: var(--cl-accent); }
.cl-toggle-row.is-on .cl-toggle-switch::after { transform: translateX(18px); background: #06130d; }

/* Animated reveal (due-date input under its switch). Off by default; opens with
   a subtle height+fade transition. max-height keeps it Safari-safe. */
.cl-reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .22s ease, opacity .18s ease; }
.cl-reveal.is-open { max-height: 120px; opacity: 1; }
.cl-reveal-inner { margin: 10px 0 0; }
.cl-reveal-inner.cl-field { display: block; }

/* Creation-path: two equal, selectable cards (icon · title · one-line · chevron). */
.cl-path-cards { display: flex; flex-direction: column; gap: 10px; }
.cl-path-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px; cursor: pointer;
  background: var(--cl-card-2); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-sm); color: var(--cl-body);
  transition: border-color .12s ease, background .12s ease, transform .06s ease;
}
.cl-path-card:hover { border-color: var(--cl-border-strong); background: var(--cl-bg-hover); }
.cl-path-card:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }
.cl-path-card:active { transform: translateY(1px); }
.cl-path-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cl-card); border: 1px solid var(--cl-border); color: var(--cl-title);
}
.cl-path-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cl-path-body { flex: 1; min-width: 0; }
.cl-path-body strong { display: block; color: var(--cl-title); font: 600 .96rem var(--font-b); }
.cl-path-body small { display: block; margin-top: 2px; color: var(--cl-muted); font: 400 .8rem/1.4 var(--font-b); }
.cl-path-chevron { flex: 0 0 auto; color: var(--cl-muted); display: flex; }
.cl-path-chevron svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-path-card:hover .cl-path-chevron { color: var(--cl-title); }

/* ── Generating state ─────────────────────────────────────────────────────── */
.cl-generating { padding-top: 40px; }
.cl-spinner-lg { width: 34px; height: 34px; border-width: 3px; }
.cl-gen-title { margin: 18px auto 18px; max-width: 280px; font: 700 1.12rem/1.4 var(--font-d, var(--font-b)); color: var(--cl-title); }
.cl-gen-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 280px; text-align: left; display: flex; flex-direction: column; gap: 11px; }
.cl-gen-step { display: flex; align-items: center; gap: 10px; color: var(--cl-body); font: 500 0.9rem var(--font-b); opacity: 0.35; animation: cl-gen-reveal 1.6s ease-in-out infinite; }
.cl-gen-step:nth-child(1) { animation-delay: 0s; }
.cl-gen-step:nth-child(2) { animation-delay: 0.45s; }
.cl-gen-step:nth-child(3) { animation-delay: 0.9s; }
.cl-gen-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cl-accent); }
@keyframes cl-gen-reveal { 0%, 70%, 100% { opacity: 0.32; } 25%, 45% { opacity: 1; } }
.cl-gen-note { margin-top: 22px; color: var(--cl-muted); font: 400 0.84rem var(--font-b); }

/* ── Inline success banner (published / etc.) ─────────────────────────────── */
.cl-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--cl-radius); margin: 2px 0 4px; }
.cl-banner-success { background: var(--cl-card); border: 1px solid var(--cl-border-strong); }
.cl-banner-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; border: 1.5px solid var(--cl-border-strong); color: #ffffff; font-weight: 800; font-size: 0.95rem; }
.cl-state-icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cl-banner-text { display: flex; flex-direction: column; gap: 3px; }
.cl-banner-text strong { color: var(--cl-title); font: 700 1rem var(--font-b); }
.cl-banner-text span { color: var(--cl-body); font: 400 0.88rem/1.45 var(--font-b); }

/* ── Join-code success / card ───────────────────────────────────────────── */
/* Monochrome success circle: a WHITE checkmark inside a subtle dark outlined
   circle (no green disc, no accent colour) — matches the rest of Finlingo's
   line icons. */
.cl-success-badge {
  width: 56px; height: 56px; margin: 8px auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
  color: #ffffff; background: transparent;
  border: 1.5px solid var(--cl-border-strong); line-height: 1;
}
.cl-success-title { margin: 0 0 4px; font: 700 1.3rem var(--font-d, var(--font-b)); color: var(--cl-title); }
.cl-success-sub { margin: 0 0 4px; color: var(--cl-muted); font: 400 0.95rem var(--font-b); }
.cl-code-card { text-align: center; }
.cl-code-label { font: 600 0.75rem var(--font-b); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cl-muted); }
.cl-code-big {
  margin: 8px 0 14px; font: 800 2rem var(--font-m, monospace); letter-spacing: 0.18em;
  color: #fff; text-transform: uppercase;
}

/* ── Assignment preview ─────────────────────────────────────────────────── */
.cl-preview-title { margin: 2px 0 6px; font: 700 1.3rem var(--font-d, var(--font-b)); color: var(--cl-title); }
.cl-preview-list { display: flex; flex-direction: column; gap: 8px; }
.cl-preview-q { display: flex; width: 100%; gap: 11px; padding: 13px; text-align: left; cursor: pointer; color: inherit; background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm); }
.cl-preview-q:hover { border-color: var(--cl-border-strong); }
.cl-q-num { flex: 0 0 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--cl-card-2); border: 1px solid var(--cl-border); color: var(--cl-muted); font: 700 0.74rem var(--font-b); margin-top: 1px; }
.cl-q-body { flex: 1; min-width: 0; }
.cl-q-tags { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: baseline; gap: 5px; margin-bottom: 4px; }
/* Concept/category first, in high-contrast light type (never green). */
.cl-q-cat { display: block; max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 0.74rem var(--font-b); color: var(--cl-title); }
/* Separator + question type both muted gray, after the category. */
.cl-q-sep { color: var(--cl-border-strong); font: 600 0.72rem var(--font-b); }
.cl-q-type { font: 600 0.72rem var(--font-b); color: var(--cl-muted); }
.cl-q-type { white-space: nowrap; }
.cl-q-prompt { color: var(--cl-title); font: 500 0.94rem/1.4 var(--font-b); }
.cl-preview-q .cl-q-prompt { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ── Add-question control (lower emphasis than the real question cards) ─────
   Same width as a question card, but visibly a control, not a card: a muted
   dashed border over a darker/more transparent fill, separated from the last
   card by ~14px. Stays quieter than Preview / Publish in the bottom bar. */
.cl-add-q {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 14px 13px; cursor: pointer;
  background: rgba(0, 0, 0, 0.18); border: 1px dashed var(--cl-border);
  border-radius: var(--cl-radius-sm); color: var(--cl-muted);
  font: 600 0.88rem var(--font-b);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.cl-add-q:hover { border-color: var(--cl-border-strong); color: var(--cl-title); }
.cl-add-q svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Manual question editor: answer-option rows ──────────────────────────── */
.cl-opt-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cl-opt-row input[type="radio"] { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--cl-accent); }
.cl-opt-row .cl-input { margin: 0; }
.cl-opt-hint { margin: 2px 0 12px; color: var(--cl-muted); font: 400 0.78rem var(--font-b); }

/* ── Assignment preview: sticky bottom actions (never clipped) ────────────── */
/* Sticky publish bar is a last-child in the single scroll flow, so it occupies
   its own space — only a small safe-area gap is needed below it. */
.cl-preview-screen { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.cl-preview-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 10px; margin: 16px -20px 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(13,16,19,0) 0%, var(--cl-bg) 26%);
}
.cl-preview-actions .cl-btn { flex: 1; width: auto; }
.cl-preview-actions .cl-btn-line { flex: 0 0 96px; }
.cl-explain p { margin: 0; color: var(--cl-body); font: 400 0.94rem/1.6 var(--font-b); }
.cl-chart-note span, .cl-insight-row span { display: block; font: 700 0.7rem var(--font-b); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 4px; }
.cl-chart-note p { margin: 0; color: var(--cl-body); font: 400 0.9rem/1.5 var(--font-b); }

/* ── Insights: stats grid ───────────────────────────────────────────────── */
.cl-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cl-stat { background: var(--cl-card); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm); padding: 14px; }
.cl-stat-val { font: 700 1.5rem var(--font-d, var(--font-b)); color: var(--cl-title); }
.cl-stat-label { margin-top: 2px; color: var(--cl-muted); font: 400 0.78rem var(--font-b); }

/* ── Concept bars ───────────────────────────────────────────────────────── */
.cl-concept { margin-bottom: 12px; }
.cl-concept-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cl-concept-top span { color: var(--cl-body); font: 500 0.9rem var(--font-b); }
.cl-concept-top strong { color: var(--cl-title); font: 700 0.9rem var(--font-num, var(--font-b)); }
.cl-bar { height: 8px; border-radius: 999px; background: #192230; overflow: hidden; }
.cl-bar-slim { height: 6px; flex: 1; }
.cl-bar-fill { height: 100%; border-radius: 999px; transition: width .5s cubic-bezier(.34,1.2,.64,1); }
.cl-bar-good { background: linear-gradient(90deg, var(--cl-green), var(--cl-green-bright)); }
/* Learner assignment progress uses the restrained accent (flat, no glow). */
.cl-bar-white { background: var(--cl-accent); }
.cl-bar-mid { background: linear-gradient(90deg, #b78a2e, var(--cl-amber)); }
.cl-bar-low { background: linear-gradient(90deg, #a14a42, var(--cl-red)); }

/* ── Claude group-insight card ──────────────────────────────────────────── */
.cl-insight-card { background: var(--cl-card); border: 1px solid var(--cl-border-strong); border-radius: var(--cl-radius); padding: 16px; }
.cl-insight-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 0.95rem var(--font-b); color: var(--cl-title); margin-bottom: 8px; }
.cl-insight-summary { margin: 0 0 12px; color: var(--cl-body); font: 400 0.95rem/1.6 var(--font-b); }
.cl-insight-row { margin-bottom: 10px; }
.cl-insight-row p { margin: 0; color: var(--cl-body); font: 400 0.92rem/1.55 var(--font-b); }
.cl-insight-note { margin-top: 6px; color: var(--cl-muted); font: 400 0.78rem var(--font-b); font-style: italic; }
.cl-conf { font: 700 0.66rem var(--font-b); letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.cl-conf-high { color: var(--cl-title); background: rgba(255,255,255,0.08); }
.cl-conf-medium { color: var(--cl-amber); background: rgba(216,162,58,0.14); }
.cl-conf-low { color: #b9bec6; background: rgba(255,255,255,0.06); }

/* ── Demo tag ───────────────────────────────────────────────────────────── */
.cl-demo-tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px;
  font: 700 0.68rem var(--font-b); letter-spacing: 0.08em; text-transform: uppercase;
  color: #070B12; background: var(--cl-amber);
}

/* ── Demo entry — opt-in, kept clearly apart from real owned groups ──────── */
.cl-demo-entry { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.cl-demo-entry-copy { color: var(--cl-muted); font: 400 0.78rem/1.45 var(--font-b); max-width: 260px; }
/* Lower-emphasis variant shown beneath a leader's real groups. */
.cl-demo-entry-link { padding-top: 14px; border-top: 1px solid var(--cl-border); }
.cl-demo-link {
  background: transparent; border: 0; color: var(--cl-body);
  font: 600 0.86rem var(--font-b); cursor: pointer; padding: 4px 6px; border-radius: 8px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cl-demo-link:hover { color: var(--cl-title); }
.cl-demo-link:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }

/* ── Learner player chrome ──────────────────────────────────────────────── */
.cl-player-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cl-back-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--cl-border); background: var(--cl-card-2); color: var(--cl-muted); font-size: 0.9rem; cursor: pointer; }
.cl-back-x:hover { color: var(--cl-title); }
.cl-qcount { flex: 0 0 auto; color: var(--cl-muted); font: 700 0.8rem var(--font-num, var(--font-b)); }
.cl-teach { margin-top: 4px; }

/* ── Learner completion summary (private, lighter than leader insights) ──── */
.cl-ls { text-align: left; margin-top: 22px; }
.cl-ls-section { margin-top: 16px; }
.cl-ls-label { font: 700 0.68rem var(--font-b); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cl-muted); margin-bottom: 8px; }
.cl-ls-item {
  padding: 12px 13px; margin-bottom: 8px;
  background: var(--cl-card-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
  border-left: 3px solid var(--cl-border-strong);
}
.cl-ls-item:last-child { margin-bottom: 0; }
.cl-ls-item-know { border-left-color: var(--cl-green); }
.cl-ls-item-review { border-left-color: var(--cl-amber); }
.cl-ls-item-teach { border-left-color: var(--cl-border-strong); }
.cl-ls-title { color: var(--cl-title); font: 600 0.9rem var(--font-b); margin-bottom: 3px; }
.cl-ls-desc { color: var(--cl-muted); font: 400 0.84rem/1.5 var(--font-b); }
.cl-ls-desc + .cl-ls-desc { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   INTERVENTION WORKFLOW — premium insights hierarchy
   Hierarchy through spacing/typography/dividers rather than many bordered
   cards. Green = positive, amber = emerging concern, red = severe/persistent.
   ════════════════════════════════════════════════════════════════════════ */

/* Insights header + "Early results" + mission/privacy lines */
.cl-insights-header p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-early-tag {
  font: 700 0.6rem var(--font-b); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cl-eyebrow); background: rgba(255,255,255,0.06);
  border: 1px solid var(--cl-border); border-radius: 999px; padding: 2px 8px;
}
.cl-privacy-note { margin-top: 22px; color: var(--cl-muted); font: 400 0.78rem var(--font-b); font-style: italic; }
.cl-mission-note { margin-top: 16px; color: var(--cl-muted); font: 400 0.78rem/1.5 var(--font-b); }

/* ── B. What needs attention (visually dominant, light-touch amber accent) ── */
.cl-attention {
  padding: 16px 4px 18px; margin: 18px 0 6px;
  border-top: 1px solid var(--cl-border); border-bottom: 1px solid var(--cl-border);
}
.cl-attention-kicker {
  font: 800 0.68rem var(--font-b); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cl-amber); margin-bottom: 9px;
}
.cl-attention-headline {
  margin: 0 0 12px; color: var(--cl-title);
  font: 700 1.3rem/1.35 var(--font-d, var(--font-b)); letter-spacing: -0.01em;
}
.cl-attention-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cl-attention-evidence { color: var(--cl-muted); font: 400 0.84rem var(--font-b); }

/* Confidence labels used only inside assignment results. */
.cl-conf-early { color: var(--cl-eyebrow); background: rgba(255,255,255,0.06); }
.cl-conf-developing { color: var(--cl-amber); background: rgba(216,162,58,0.14); }
.cl-conf-strong { color: var(--cl-title); background: rgba(255,255,255,0.08); border: 1px solid var(--cl-border-strong); }

/* ── C. Concept understanding (grouped chips, no equal-weight bar wall) ───── */
.cl-concept-group { margin-bottom: 14px; }
.cl-concept-group-label {
  font: 700 0.7rem var(--font-b); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.cl-concept-group-good { color: var(--cl-green-bright); }
.cl-concept-group-needs { color: var(--cl-amber); }
.cl-concept-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-concept-chip {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  background: var(--cl-card-2); border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
}
.cl-concept-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.cl-concept-chip-good .cl-concept-dot { background: var(--cl-green); }
.cl-concept-chip-needs .cl-concept-dot { background: var(--cl-amber); }
.cl-concept-name { flex: 1; min-width: 0; color: var(--cl-body); font: 500 0.9rem var(--font-b); }
.cl-concept-pct { flex: 0 0 auto; color: var(--cl-amber); font: 700 0.84rem var(--font-num, var(--font-b)); }

/* ── Disclosures (View all concepts / View detailed analysis) ─────────────── */
.cl-disclosure { margin-top: 4px; }
.cl-disclosure > summary {
  list-style: none; cursor: pointer; color: var(--cl-eyebrow);
  font: 600 0.82rem var(--font-b); padding: 8px 0;
}
.cl-disclosure > summary::-webkit-details-marker { display: none; }
.cl-disclosure > summary::before { content: '▸ '; color: var(--cl-muted); }
.cl-disclosure[open] > summary::before { content: '▾ '; }
.cl-disclosure > summary:hover { color: var(--cl-title); }
.cl-disclosure-body { padding-top: 8px; }
.cl-disclosure-tight .cl-disclosure-body p { margin: 0 0 8px; color: var(--cl-body); font: 400 0.9rem/1.55 var(--font-b); }

/* ── D. Claude intervention brief ────────────────────────────────────────── */
.cl-brief {
  background: var(--cl-card); border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius); padding: 16px 16px 14px;
}
.cl-brief-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font: 700 1rem var(--font-b); color: var(--cl-title);
}
.cl-brief-badge {
  font: 800 0.6rem var(--font-b); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: #2a2f37; border: 1px solid var(--cl-border-strong); border-radius: 6px; padding: 3px 7px;
}
.cl-brief-block { padding: 11px 0; border-top: 1px solid var(--cl-border); }
.cl-brief-block:first-of-type { border-top: 0; padding-top: 0; }
.cl-brief-label {
  font: 700 0.68rem var(--font-b); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cl-muted); margin-bottom: 5px;
}
.cl-brief-text { margin: 0; color: var(--cl-body); font: 400 0.94rem/1.55 var(--font-b); }
.cl-brief-move .cl-brief-label { color: var(--cl-amber); }
.cl-brief-move .cl-brief-text { color: var(--cl-title); font-weight: 500; }
.cl-brief-evidence {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--cl-border);
  color: var(--cl-muted); font: 400 0.8rem/1.5 var(--font-b); font-style: italic;
}
.cl-brief .cl-disclosure { margin-top: 8px; }

/* ── Grounded actions ────────────────────────────────────────────────────── */
.cl-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.cl-action-primary { grid-column: 1 / -1; }
.cl-actions-grid .cl-btn { width: auto; }

.cl-action-card {
  margin-top: 12px; padding: 14px; background: var(--cl-card-2);
  border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
}
.cl-action-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; color: var(--cl-title); font: 700 0.86rem var(--font-b);
}
.cl-action-copy {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--cl-border-strong);
  color: var(--cl-title); font: 600 0.78rem var(--font-b);
}
.cl-action-copy:hover { border-color: var(--cl-border-strong); }
.cl-action-body { margin: 0 0 8px; color: var(--cl-body); font: 400 0.92rem/1.55 var(--font-b); }
.cl-action-note { margin-top: 6px; color: var(--cl-muted); font: 400 0.76rem var(--font-b); font-style: italic; }
.cl-notes {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  color: var(--cl-body); font: 400 0.86rem/1.55 var(--font-m, monospace);
}

/* ── Follow-up grounding banner + scenario card ──────────────────────────── */
.cl-gap-banner {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--cl-radius-sm);
  background: rgba(216,162,58,0.08); border: 1px solid rgba(216,162,58,0.28);
}
.cl-gap-banner-kicker {
  font: 800 0.64rem var(--font-b); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cl-amber); margin-bottom: 4px;
}
.cl-gap-banner-concept { color: var(--cl-title); font: 700 1.05rem var(--font-d, var(--font-b)); }
.cl-gap-banner-obj { margin-top: 8px; color: var(--cl-body); font: 400 0.86rem/1.5 var(--font-b); }
.cl-gap-banner-obj span {
  display: block; font: 700 0.64rem var(--font-b); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cl-muted); margin-bottom: 2px;
}
.cl-scenario-label {
  display: block; font: 700 0.68rem var(--font-b); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--cl-eyebrow); margin-bottom: 5px;
}
.cl-scenario p { margin: 0; color: var(--cl-body); font: 400 0.92rem/1.6 var(--font-b); }

/* ── Group-card intelligence line ────────────────────────────────────────── */
.cl-intel {
  display: flex; align-items: center; gap: 8px; margin-top: 9px;
  color: var(--cl-body); font: 500 0.84rem var(--font-b);
}
.cl-intel-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--cl-muted); }
.cl-intel-ontrack { color: var(--cl-body); }
.cl-intel-ontrack .cl-intel-dot { background: var(--cl-muted); }
.cl-intel-attention .cl-intel-dot,
.cl-intel-early .cl-intel-dot { background: var(--cl-amber); }
.cl-intel-attention, .cl-intel-early { color: var(--cl-eyebrow); }
.cl-intel-waiting { color: var(--cl-muted); }

/* ── Group-detail: active-assignment status + latest finding ──────────────── */
.cl-active-assign {
  padding: 14px 0; margin-bottom: 14px;
  border-top: 1px solid var(--cl-border); border-bottom: 1px solid var(--cl-border);
}
.cl-active-empty { border-bottom: 1px solid var(--cl-border); }
.cl-active-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cl-active-kicker {
  font: 700 0.66rem var(--font-b); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cl-muted); margin-bottom: 4px;
}
.cl-active-title { color: var(--cl-title); font: 600 1.02rem var(--font-b); }
.cl-active-progress { margin-top: 8px; color: var(--cl-body); font: 500 0.86rem var(--font-b); }
.cl-finding { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--cl-border); }
.cl-finding-kicker {
  font: 700 0.66rem var(--font-b); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cl-amber); margin-bottom: 4px;
}
.cl-finding-text { margin: 0; color: var(--cl-body); font: 400 0.92rem/1.5 var(--font-b); }

/* ── Account: Finlingo-mode toggle (rendered inside the Account overlay) ─── */
.account-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.account-mode-opt {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px; border-radius: var(--cl-radius-sm);
  border: 1px solid var(--cl-border); background: var(--cl-card-2); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.account-mode-opt strong { color: var(--cl-title); font: 600 0.88rem var(--font-b); }
.account-mode-opt small { color: var(--cl-muted); font: 400 0.74rem var(--font-b); }
/* Selected = refined accent selection: accent border + soft accent fill,
   same dark family — never a white button. */
.account-mode-opt.is-active {
  border-color: var(--cl-accent-border);
  background: var(--cl-accent-soft);
  box-shadow: inset 0 0 0 1px var(--cl-accent-border);
}
.account-mode-opt.is-active strong { color: var(--cl-title); }
.account-mode-opt.is-active small { color: var(--cl-muted); }
/* Clearly visible keyboard focus on both states. */
.account-mode-opt:focus-visible {
  outline: 2px solid var(--cl-accent);
  outline-offset: 2px;
}
.account-mode-note { margin: 10px 0 0; color: var(--cl-muted); font: 400 .76rem/1.5 var(--font-b); }

/* ── Personal (learner) join card + assignment status pill ────────────────── */
.cl-join-card { padding: 16px; }
.cl-join-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cl-join-fields .cl-field { margin-bottom: 0; }
.cl-join-card .cl-btn { width: 100%; }
@media (max-width: 380px) { .cl-join-fields { grid-template-columns: 1fr; } }
.cl-status-pill {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--cl-border-strong);
  color: var(--cl-muted); font: 700 .64rem var(--font-b); letter-spacing: .04em; text-transform: uppercase;
}
.cl-status-done { color: var(--cl-green-bright); border-color: rgba(43,189,106,.4); background: rgba(43,189,106,.1); }

/* ── Structured generated copy / follow-up draft ───────────────────────── */
.cl-rich-list { margin: 8px 0 0; padding-left: 18px; color: var(--cl-body); font: 400 .92rem/1.55 var(--font-b); }
.cl-copy-section { margin-top: 14px; padding: 15px 0; border-bottom: 1px solid var(--cl-border); }
.cl-copy-section p { margin: 0 0 8px; color: var(--cl-body); font: 400 .94rem/1.6 var(--font-b); }
.cl-copy-section p:last-child { margin-bottom: 0; }
.cl-copy-label { margin-bottom: 7px; color: var(--cl-muted); font: 800 .66rem var(--font-b); letter-spacing: .09em; text-transform: uppercase; }
.cl-key-idea { border-top: 1px solid var(--cl-border); }
.cl-compare { padding: 14px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm); background: var(--cl-card-2); }
.cl-compare-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--cl-border); }
.cl-compare-row:last-child { border-bottom: 0; }
.cl-compare-row span { color: var(--cl-body); font: 500 .84rem var(--font-b); }
.cl-compare-row strong { color: var(--cl-title); text-align: right; font: 700 .84rem var(--font-b); }
.cl-segments { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-top: 18px; padding: 4px; background: var(--cl-card-2); border: 1px solid var(--cl-border); border-radius: 12px; }
.cl-segments button { padding: 9px 5px; border: 0; border-radius: 8px; background: transparent; color: var(--cl-muted); font: 700 .76rem var(--font-b); cursor: pointer; }
.cl-segments button.is-active { background: var(--cl-accent-soft); color: var(--cl-accent); box-shadow: inset 0 0 0 1px var(--cl-accent-border); }
.cl-follow-panel[hidden] { display: none; }
.cl-setting-row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cl-border); color: var(--cl-muted); font: 500 .88rem var(--font-b); }
.cl-setting-row strong { color: var(--cl-title); text-transform: capitalize; }
.cl-setting-button { width: 100%; background: transparent; border: 0; cursor: pointer; }
.cl-draft-tools { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.cl-draft-tools > span { width: 100%; color: var(--cl-muted); font: 700 .66rem var(--font-b); letter-spacing: .08em; text-transform: uppercase; }
.cl-draft-tools button { padding: 8px 10px; border: 1px solid var(--cl-border-strong); border-radius: 9px; background: transparent; color: var(--cl-body); font: 600 .76rem var(--font-b); cursor: pointer; }
.cl-draft-tools button:hover { color: var(--cl-title); border-color: var(--cl-border-strong); }
.cl-next-action { margin: 0 0 14px; padding: 15px; border: 1px solid rgba(216,162,58,.28); background: rgba(216,162,58,.07); border-radius: var(--cl-radius-sm); }
.cl-next-kicker,.cl-next-label { color: var(--cl-amber); font: 800 .65rem var(--font-b); letter-spacing: .09em; text-transform: uppercase; }
.cl-next-action p { margin: 8px 0 12px; color: var(--cl-body); font: 400 .9rem/1.5 var(--font-b); }
.cl-next-label { color: var(--cl-muted); margin-bottom: 4px; }
.cl-next-action strong { color: var(--cl-title); font: 600 .86rem var(--font-b); }

/* ── Classroom IA: group cards, assignment cards, question selection ─────── */
.cl-latest-line {
  margin-top: 10px; color: var(--cl-body); font: 500 .86rem/1.45 var(--font-b);
}
.cl-latest-line span { color: var(--cl-muted); font-weight: 700; }
.cl-click-card {
  cursor: pointer; padding: 14px;
  transition: border-color .12s ease, background .12s ease, transform .12s ease, box-shadow .12s ease;
}
/* Hover lift only on pointer-capable devices — never a large floating card. */
@media (hover: hover) and (pointer: fine) {
  .cl-click-card:hover {
    border-color: var(--cl-border-strong); background: var(--cl-bg-hover);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 10px 28px rgba(0, 0, 0, 0.2);
  }
  .cl-click-card:hover .cl-card-link span { transform: translateX(2px); }
}
.cl-click-card:focus-visible {
  outline: 2px solid var(--cl-accent); outline-offset: 2px;
}
.cl-click-card:active { transform: translateY(1px); }
.cl-card-link {
  margin-top: 12px; color: var(--cl-text-secondary); font: 700 .84rem var(--font-b);
  display: inline-flex; align-items: center; gap: 6px;
}
/* Directional arrow carries the restrained accent. */
.cl-card-link span { color: var(--cl-accent); transition: transform .12s ease; }
.cl-assignment-card { padding: 13px 14px; }
.cl-assignment-card .cl-card-head-main { align-items: flex-start; }
/* Title is the strongest element on the card. */
.cl-assignment-card .cl-card-head strong { font: 650 1.06rem/1.25 var(--font-b); letter-spacing: -0.01em; }
.cl-assignment-card .cl-card-meta { margin-top: 5px; font-size: 0.8rem; }
/* Single-line response state — secondary text (a step above muted metadata). */
.cl-asg-state { margin-top: 9px; color: var(--cl-text-secondary); font: 500 0.86rem/1.4 var(--font-b); }
/* Thin progress bar — only rendered when the group has ≥1 learner. */
.cl-asg-progress {
  margin-top: 9px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.cl-asg-progress span { display: block; height: 100%; border-radius: inherit; background: var(--cl-accent); transition: width .3s ease; }
.cl-assignment-card .cl-card-link { margin-top: 11px; }
.cl-assignment-section { margin-top: 12px; }
.cl-assignment-section-title {
  margin: 12px 0 8px; color: var(--cl-muted);
  font: 800 .68rem var(--font-b); letter-spacing: .08em; text-transform: uppercase;
}

.cl-btn small {
  display: block; margin-top: 3px; color: inherit; opacity: .72;
  font: 500 .72rem/1.25 var(--font-b);
}
.cl-btn span { display: block; }

/* Single scroll container: the review bar sticks in-flow (never position:fixed),
   so only a small safe-area gap is needed at the bottom of the screen. */
.cl-question-select { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* Horizontally-scrollable filters with a right-edge fade cue and hidden
   scrollbar. The wrapper's mask fades the trailing chips when more scroll
   remains; the scroll padding keeps the final chip fully visible. */
.cl-filter-wrap {
  position: relative; margin-bottom: 10px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
}
.cl-filter-row {
  display: flex; gap: 7px; overflow-x: auto; padding: 0 26px 8px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cl-filter-row::-webkit-scrollbar { display: none; height: 0; }
.cl-filter-row button {
  flex: 0 0 auto; padding: 8px 12px; border: 1px solid var(--cl-border);
  border-radius: 999px; background: transparent; color: var(--cl-muted);
  font: 700 .72rem var(--font-b); cursor: pointer; white-space: nowrap;
}
/* Selected filter = restrained accent (soft fill + accent text), not a solid
   white pill, so a row of filters never reads as a wall of bright chips. */
.cl-filter-row button.is-active { background: var(--cl-accent-soft); border-color: var(--cl-accent-border); color: var(--cl-accent); }
.cl-filter-row button:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }

.cl-candidate-list { display: flex; flex-direction: column; gap: 8px; }

/* ── Simplified question card (.cl-qc) — one subtle border, content dominant,
   controls secondary, reduced padding, no nested boxes/dashed dividers. ─────── */
.cl-qc {
  padding: 11px 12px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
  background: var(--cl-card); transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.cl-qc.is-selected { border-color: var(--cl-accent-border); background: var(--cl-accent-soft); }
.cl-qc.is-loading { opacity: .6; }
.cl-qc.is-dragging { opacity: .4; }
.cl-qc-top { display: flex; align-items: flex-start; gap: 9px; }
.cl-qc-check { flex: 0 0 auto; display: flex; align-items: center; cursor: pointer; padding-top: 1px; }
.cl-qc-check input { width: 17px; height: 17px; accent-color: var(--cl-accent); cursor: pointer; }
.cl-qc-handle { flex: 0 0 auto; display: flex; align-items: center; color: var(--cl-muted); cursor: grab; opacity: .6; }
.cl-qc-handle:active { cursor: grabbing; }
.cl-qc-handle svg { width: 16px; height: 16px; fill: currentColor; }
.cl-qc-headings { flex: 1; min-width: 0; }
.cl-qc-title { color: var(--cl-title); font: 700 .9rem var(--font-b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-qc-meta { margin-top: 2px; color: var(--cl-muted); font: 600 .72rem var(--font-b); display: flex; align-items: center; gap: 6px; }
.cl-qc-badge, .cl-qc-pill {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--cl-border-strong);
  color: var(--cl-eyebrow); font: 700 .64rem var(--font-b); letter-spacing: .04em;
  white-space: nowrap;
}
/* Count of questions matching the active filter, sitting just under the filter
   row (the currently displayed / filtered results). */
.cl-filter-count {
  margin: -4px 0 10px; color: var(--cl-muted);
  font: 600 .74rem var(--font-b);
}
.cl-qc-prompt { margin: 9px 0 0; color: var(--cl-body); font: 400 .9rem/1.5 var(--font-b); }
.cl-qc-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cl-qc-edit {
  padding: 6px 12px; border: 1px solid var(--cl-border-strong); border-radius: 8px;
  background: transparent; color: var(--cl-body); font: 600 .76rem var(--font-b); cursor: pointer;
}
.cl-qc-edit:hover { color: var(--cl-title); border-color: var(--cl-border-strong); }
/* Refine trigger (AI questions only). Menu reuses .cl-menu-pop / .cl-menu-item. */
.cl-refine-menu { position: relative; }
.cl-qc-refine {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--cl-border-strong); border-radius: 8px;
  background: transparent; color: var(--cl-body); font: 600 .76rem var(--font-b); cursor: pointer;
}
.cl-qc-refine:hover { color: var(--cl-title); border-color: var(--cl-border-strong); }
.cl-qc-refine svg { width: 14px; height: 14px; fill: currentColor; }
.cl-refine-menu .cl-menu-pop { left: 0; right: auto; }
.cl-qc .cl-menu-btn { margin: -4px -4px 0 0; }
/* Sticky review bar — lives INSIDE the single .cl-screen scroll flow (not
   position:fixed), so it can never be mis-offset by the desktop sidebar or hide
   behind a nav layer. It rests after the last card and sticks to the bottom of
   the scroll viewport while scrolling. Bleeds to the screen edges via negative
   margins that match the .cl-screen 20px horizontal padding. */
.cl-bottom-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px -20px 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(13,16,19,0) 0%, var(--cl-bg) 30%);
  border-top: 1px solid var(--cl-border);
}
.cl-bottom-bar strong { color: var(--cl-title); font: 700 .9rem var(--font-b); }
.cl-review-count { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cl-review-hint { color: var(--cl-muted); font: 500 .72rem var(--font-b); }
.cl-review-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cl-review-actions .cl-btn { min-height: 40px; }

/* Compact empty state used inside the review workspace. */
.cl-empty-compact { padding: 22px 16px; }
.cl-empty-compact h2 { font-size: 1.02rem; }
.cl-empty-compact p { margin-bottom: 12px; }

.cl-preview-facts {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 14px;
}
.cl-preview-facts div {
  padding: 11px; border: 1px solid var(--cl-border); border-radius: var(--cl-radius-sm);
  background: var(--cl-card-2);
}
.cl-preview-facts span {
  display: block; margin-bottom: 4px; color: var(--cl-muted);
  font: 700 .64rem var(--font-b); letter-spacing: .08em; text-transform: uppercase;
}
.cl-preview-facts strong { color: var(--cl-title); font: 700 .84rem/1.35 var(--font-b); text-transform: capitalize; }

/* Single highlighted Teach-it-back indicator (replaces the redundant 5-tile
   summary grid — the other facts already live in the compact meta line). */
.cl-teachback-flag {
  display: flex; align-items: flex-start; gap: 12px; margin-top: 14px;
  padding: 13px 14px; border-radius: var(--cl-radius-sm);
  border: 1px solid var(--cl-border); background: var(--cl-card-2);
}
.cl-teachback-flag.cl-teachback-on {
  border-color: var(--fl-accent-border); background: var(--fl-accent-soft);
}
.cl-teachback-ic {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; background: rgba(255,255,255,0.05); color: var(--cl-muted);
}
.cl-teachback-on .cl-teachback-ic { background: rgba(105,221,165,0.14); color: var(--fl-accent); }
.cl-teachback-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cl-teachback-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cl-teachback-copy strong {
  font-family: var(--fl-font-label);
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cl-title);
}
.cl-teachback-on .cl-teachback-copy strong { color: var(--fl-accent); }
.cl-teachback-copy span { font: 400 0.84rem/1.4 var(--font-b); color: var(--cl-body); }

/* Respect reduced-motion for the animated reveal / generating steps. */
@media (prefers-reduced-motion: reduce) {
  .cl-reveal, .cl-path-card, .cl-qc, .cl-bar-fill,
  .cl-click-card, .cl-card-link span, .cl-asg-progress span { transition: none !important; }
  .cl-click-card:hover { transform: none !important; }
  .cl-gen-step, .cl-spinner { animation: none !important; opacity: 1 !important; }
}

/* Finlingo edit-question modal — a left-aligned form body inside the shared
   app modal, with a scroll cap so long MCQ forms stay within the viewport. */
.cl-edit-modal .modal-body { text-align: left; padding-top: 4px; max-height: 62vh; overflow-y: auto; }
.cl-edit-modal .modal-title { text-align: center; }
.cl-edit-modal .cl-form { margin: 0; }
.cl-edit-modal .cl-field:last-child { margin-bottom: 0; }
.cl-edit-choices[hidden] { display: none; }

/* Comfortable 44px minimum touch targets on small screens. */
@media (max-width: 640px) {
  .cl-qc-edit, .cl-qc-refine, .cl-menu-item, .cl-filter-row button,
  .cl-btn-compact, .account-mode-opt { min-height: 44px; }
  .cl-menu-btn { width: 40px; height: 40px; }
}


/* ============================================================
   STITCH FIDELITY — CLASSROOM PREMIUM POLISH  (Phase: Classroom)

   Presentation-only. Brings Classroom to the same language as Learn /
   Market / Coach / Mastery: mono structural labels + counts + codes,
   display-font headers/stat values, flat surfaces (no gradients / no
   deep shadow), thin progress tracks, mint for actionable/success.
   Reuses the canonical --fl-* layer (Classroom already aliases --cl-*
   onto it). NO changes to routes/APIs/Supabase/auth/assignment/
   scoring/aggregation/persistence logic or any renderer markup.
   Appended last so it wins the cascade.
   ============================================================ */

/* ── Headers — display face, tighter top rhythm ── */
.cl-screen { padding-top: var(--cl-space-4); }
.cl-header { margin-top: 0; }
.cl-header h1 {
  font-family: var(--fl-font-display);
  font-size: 1.6rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em;
}
.cl-empty h2,
.cl-card-head strong,
.cl-summary-val,
.cl-stat-val,
.cl-gap-banner-concept { font-family: var(--fl-font-display); }

/* ── Mono structural labels / counts / statuses ──
   Font-only overrides (no layout impact). */
.cl-kicker,
.cl-section-title,
.cl-card-meta,
.cl-latest-line,
.cl-code-label,
.cl-copy-label,
.cl-ls-label,
.cl-field-label,
.cl-summary-label,
.cl-stat-label,
.cl-status-pill,
.cl-qc-pill,
.cl-demo-tag,
.cl-gap-banner-kicker {
  font-family: var(--fl-font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-kicker,
.cl-section-title { font-weight: 500; }
.cl-card-meta,
.cl-latest-line,
.cl-summary-label,
.cl-stat-label { font-weight: 500; letter-spacing: 0.06em; }

/* ── Join / assignment codes → true mono (was Inter via --font-m) ──
   Findable and copyable, but not allowed to dominate the page. */
.cl-code-mid {
  font-family: var(--fl-font-label);
  font-size: 1.18rem; font-weight: 600; letter-spacing: 0.14em;
}
.cl-input-code { font-family: var(--fl-font-label); }
.cl-code-inline { font-family: var(--fl-font-label); }

/* ── Cards — flat: subtle inset only, no deep drop shadow ── */
.cl-card { box-shadow: var(--fl-inset); }

/* ── Progress tracks — thin, flat (no gradients) ── */
.cl-bar { height: 6px; background: var(--fl-track-bg); }
.cl-bar-slim { height: 4px; }
.cl-bar-good,
.cl-bar-white { background: var(--fl-accent); }   /* success / progress = mint */
.cl-bar-mid { background: var(--cl-amber); }        /* mid performance — flat tone */
.cl-bar-low { background: var(--cl-red); }          /* low performance — flat tone */

/* ── Status pills — subdued (not decorative); success stays mint-green ── */
.cl-status-pill { font-weight: 500; letter-spacing: 0.08em; }

/* ── Results — participation / understanding stat cards read as data ── */
.cl-summary-val,
.cl-stat-val { letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.cl-summary-label,
.cl-stat-label { color: var(--fl-faint); }