/* ═══════════════════════════════════════════════════════════════
   components.css — SHARED COMPONENT LAYER  (v1 · 2026-08-13)
   ═══════════════════════════════════════════════════════════════
   Collapses ~40 "alike but different" legacy classes into 10 semantic
   components, one definition each, driven by CSS custom properties so
   each theme family (base / modern / genz) keeps its own identity
   (shape + color) without duplicating rules.

   Tokens: base defaults live in :root below. The wrapped families
   (theme-wrapped.css) already override --chip-* / --btn-primary-* /
   --field-* on [data-theme="…"], which win by specificity. Tag colors
   follow each family's accent automatically via --teal / --teal-4.

   Load AFTER theme-2.css / panoramica.css / learner.css so the alias
   selectors below become the single effective definition.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ⚠️ Tokens the wrapped families OWN (--chip-*, --btn-primary-*,
     --input-*, --field-*, --font-display) are intentionally NOT defined
     here: defining them on :root would override [data-theme=…] at equal
     specificity (components.css loads last) and flatten each family's
     identity. Components use var(TOKEN, fallback) so base theme falls
     back to the defaults below while modern/genz keep their tokens. */

  /* tag / badge (accent follows --teal/--teal-4 per family) */
  --tag-bg:var(--teal-4,rgba(6,182,212,.1));
  --tag-text:var(--teal,#06b6d4);
  --tag-border:var(--teal-4,rgba(6,182,212,.3));
  --tag-radius:8px;

  /* ghost button (wrapped themes don't define these) */
  --btn-ghost-bg:transparent;
  --btn-ghost-border:var(--line,#dce7f0);
  --btn-ghost-text:var(--text,#0b1e2b);
  --btn-ghost-radius:var(--radius-btn,14px);

  /* text roles */
  --micro-size:11px; --micro-weight:700;
  --under-size:13px;
  --card-title-size:18px;
  --section-title-size:22px;
  --stat-size:28px;
}

/* ═══════════════════════ 1 · TAG / BADGE ═══════════════════════ */
.c-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-ui);font-size:11px;font-weight:var(--tag-font,800);line-height:1.4;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:var(--tag-radius,8px);background:var(--tag-bg,var(--teal-4,rgba(6,182,212,.1)));color:var(--tag-text,var(--teal,#06b6d4));border:1px solid var(--tag-border,var(--teal-4,rgba(6,182,212,.3)));white-space:nowrap}
.c-tag--neutral{background:var(--bg);color:var(--text-soft);border-color:var(--line)}
.c-tag--success{background:rgba(34,197,94,.12);color:#16a34a;border-color:rgba(34,197,94,.3)}
.c-tag--warn{background:rgba(217,119,6,.12);color:#b45309;border-color:rgba(217,119,6,.32)}
.c-tag--error{background:rgba(220,38,38,.1);color:#dc2626;border-color:rgba(220,38,38,.3)}
.c-tag--solid{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-color:transparent}

/* ═══════════════════════ 2 · PILL / ACTION ═══════════════════════ */
.c-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1;padding:8px 18px;border-radius:var(--chip-radius,100px);background:var(--chip-bg,var(--card,#fff));border:var(--chip-border-w,1.5px) solid var(--chip-border-c,var(--line,#dce7f0));color:var(--chip-text,var(--text-soft,#42606f));cursor:pointer;transition:all var(--transition,.2s);white-space:nowrap;user-select:none;text-decoration:none}
.c-pill:hover{border-color:var(--chip-hover-border-c,var(--cyan,#06b6d4));color:var(--chip-hover-text,var(--cyan,#06b6d4));background:var(--chip-hover-bg,rgba(6,182,212,.06))}
.c-pill.active,.c-pill--active{background:var(--chip-active-bg,var(--cyan,#06b6d4));border-color:var(--chip-active-bg,var(--cyan,#06b6d4));color:var(--chip-active-text,#fff);font-weight:700}
.c-pill--ghost{background:transparent}
.c-pill--danger:hover{border-color:#dc2626;color:#dc2626;background:rgba(220,38,38,.06)}

/* ═══════════════════════ 3 · MICRO-LABEL ═══════════════════════ */
.c-micro{font-family:var(--font-ui);font-size:var(--micro-size,11px);font-weight:var(--micro-weight,700);text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft,#42606f);line-height:1.4;margin:0}
.c-micro--mono{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);letter-spacing:.2em;opacity:.6}
.c-micro--faint{opacity:.65}

/* ═══════════════════════ 4 · UNDERTITLE / META ═══════════════════════ */
.c-under{font-family:var(--font-ui);font-size:var(--under-size,13px);font-weight:400;color:var(--text-soft,#42606f);line-height:1.45;margin:0}
.c-under--strong{font-weight:600}
.c-under--clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══════════════════════ 5 · CARD / ITEM TITLE ═══════════════════════ */
.c-card-title{font-family:var(--font-ui);font-size:var(--card-title-size,18px);font-weight:700;line-height:1.25;color:var(--text,#0b1e2b);margin:0;letter-spacing:-.01em;word-break:break-word}

/* ═══════════════════════ 6 · SECTION TITLE ═══════════════════════ */
.c-section-title{font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif);font-size:var(--section-title-size,22px);font-weight:800;line-height:1.12;color:var(--text,#0b1e2b);margin:0;letter-spacing:-.02em}
.c-section-title--upper{text-transform:uppercase;letter-spacing:.04em}

/* ═══════════════════════ 7 · STAT VALUE ═══════════════════════ */
.c-stat{font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif);font-size:var(--stat-size,28px);font-weight:800;line-height:1.1;color:var(--cyan,#06b6d4);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0}

/* ═══════════════════════ 8 · PRIMARY BUTTON ═══════════════════════ */
.c-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-size:15px;font-weight:700;min-height:44px;padding:0 24px;border-radius:var(--btn-primary-radius,var(--radius-btn,14px));background:var(--btn-primary-bg,var(--black-btn,#0b1e2b));color:var(--btn-primary-text,var(--panel,#fff));border:none;cursor:pointer;text-decoration:none;transition:transform var(--transition,.2s),background var(--transition,.2s),box-shadow var(--transition,.2s)}
.c-btn-primary:hover{transform:translateY(-1px)}
.c-btn-primary:active{transform:translateY(0) scale(.98)}

/* ═══════════════════════ 9 · GHOST BUTTON ═══════════════════════ */
.c-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--btn-ghost-radius,var(--radius-btn,14px));background:var(--btn-ghost-bg,transparent);border:1px solid var(--btn-ghost-border,var(--line,#dce7f0));color:var(--btn-ghost-text,var(--text,#0b1e2b));cursor:pointer;text-decoration:none;transition:all var(--transition,.2s)}
.c-btn-ghost:hover{border-color:var(--cyan,#06b6d4);color:var(--cyan,#06b6d4)}

/* ═══════════════════════ 10 · INPUT / SELECT ═══════════════════════ */
.c-input{font-family:var(--font-ui);font-size:15px;font-weight:400;padding:9px 14px;border-radius:var(--input-radius,12px);background:var(--input-bg,var(--bg,#f4f8fb));border:var(--input-border-w,1px) solid var(--input-border-c,var(--line,#dce7f0));color:var(--text,#0b1e2b);outline:none;transition:border-color var(--transition,.2s)}
.c-input:focus{border-color:var(--input-focus-c,var(--cyan,#06b6d4))}
.c-input::placeholder{color:var(--text-faint,#7693a5)}
select.c-input{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--text-faint,#7693a5) 50%),linear-gradient(135deg,var(--text-faint,#7693a5) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}

/* ═══════════════════════════════════════════════════════════════
   ALIASES — legacy "alike but different" classes → components.
   One definition, N aliases, one token per family.
   NOTE: wrapped themes already override .q-chip / .primary-btn /
   .field with [data-theme=…] selectors (higher specificity), so the
   aliases below effectively unify the BASE theme while wrapped
   families keep their tokenized identity. Per-class "emphasis"
   (font-weight) is preserved via the nuance section at the bottom.
   ═══════════════════════════════════════════════════════════════ */

/* TAG / badge — shape+size unified, accent follows family */
.wb-chip-lvl,.unit-badge,.ics-badge,.pr-lang-active,.wsc-badge,.section-badge,.lang-badge,.status-badge{font-family:var(--font-ui);font-size:11px;font-weight:800;line-height:1.4;text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:var(--tag-radius,8px);background:var(--tag-bg,var(--teal-4,rgba(6,182,212,.1)));color:var(--tag-text,var(--teal,#06b6d4));border:1px solid var(--tag-border,var(--teal-4,rgba(6,182,212,.3)));white-space:nowrap;display:inline-flex;align-items:center;gap:5px;flex-shrink:0}
.wsc-badge{padding:4px 12px}
.wb-chip-lvl{background:transparent;border-color:transparent;color:var(--text-faint);padding:0;font-weight:700}

/* PILL — filter / action chips */
.fchip,.q-chip,.lesson-link,.tr-filter-chip,.wb-btn,.wb-card-actions .btn-action{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13px;font-weight:600;line-height:1;padding:8px 18px;border-radius:var(--chip-radius,100px);background:var(--chip-bg,var(--card,#fff));border:var(--chip-border-w,1.5px) solid var(--chip-border-c,var(--line,#dce7f0));color:var(--chip-text,var(--text-soft,#42606f));cursor:pointer;transition:all var(--transition,.2s);white-space:nowrap;user-select:none;text-decoration:none}
.fchip:hover,.q-chip:hover,.lesson-link:hover,.tr-filter-chip:hover,.wb-btn:hover,.wb-card-actions .btn-action:hover{border-color:var(--chip-hover-border-c,var(--cyan,#06b6d4));color:var(--chip-hover-text,var(--cyan,#06b6d4));background:var(--chip-hover-bg,rgba(6,182,212,.06))}
.fchip.active,.q-chip.active,.tr-filter-chip.active,.wb-btn.active,.wb-card-actions .btn-action.active{background:var(--chip-active-bg,var(--cyan,#06b6d4));border-color:var(--chip-active-bg,var(--cyan,#06b6d4));color:var(--chip-active-text,#fff);font-weight:700}

/* MICRO-LABEL — uppercase tiny labels */
.metric-label,.step-kicker,.st-label,.pr-ls-l,.pr-cefr-title,.rai-option-label,.field label{font-family:var(--font-ui);font-size:var(--micro-size,11px);font-weight:var(--micro-weight,700);text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft,#42606f);line-height:1.4;margin:0}
.sidebar-section-title{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft);opacity:.6;line-height:1.4;margin:0}
.wb-table th{text-align:left;padding:9px 10px;font-family:var(--font-ui);font-size:var(--micro-size,11px);font-weight:var(--micro-weight,700);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint,#7693a5);border-bottom:2px solid var(--line-strong,#c2d5e3)}

/* UNDERTITLE / META */
.wb-card-subtitle,.wb-card-signal,.tr-card-date,.tr-meta-item,.wbf-front-sub,.unit-sub,.ll-sub,.pc-desc,.tr-card-excerpt,.rai-product-desc,.lr-bank-meta{font-family:var(--font-ui);font-size:var(--under-size,13px);font-weight:400;color:var(--text-soft,#42606f);line-height:1.45;margin:0}
.lr-bank-meta{font-weight:600}
.tr-card-excerpt,.wbf-front-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* CARD / ITEM TITLE */
.wb-card-head h4,.pc-title,.lr-bank-name,.lr-review-title,.wbf-front-title,.ms-card-title,.ll-title,.unit-title,.lr-mission-title,.pr-lang-name,.rai-product-name,.tr-card-name{font-family:var(--font-ui);font-size:var(--card-title-size,18px);font-weight:700;line-height:1.25;color:var(--text,#0b1e2b);margin:0;letter-spacing:-.01em;word-break:break-word}
.wb-card-head h4{padding-right:28px}
.wbf-front-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* SECTION TITLE */
.le-title,.wb-section-head h3,.wb-section-title,.wbf-section-label{font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif);font-size:var(--section-title-size,22px);font-weight:800;line-height:1.12;color:var(--text,#0b1e2b);margin:0;letter-spacing:-.02em}
.wb-section-head h3,.wb-section-title,.wbf-section-label{text-transform:uppercase;letter-spacing:.04em}

/* STAT VALUE */
.wb-stat .stat-value,.stat-tile .st-value,.lh-xp,.ms-stat-val,.wbf-title{font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif);font-size:var(--stat-size,28px);font-weight:800;line-height:1.1;color:var(--cyan,#06b6d4);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:0}

/* PRIMARY BUTTON */
.primary-btn,.rai-generate-btn,.start-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-size:15px;font-weight:700;min-height:44px;padding:0 24px;border-radius:var(--btn-primary-radius,var(--radius-btn,14px));background:var(--btn-primary-bg,var(--black-btn,#0b1e2b));color:var(--btn-primary-text,var(--panel,#fff));border:none;cursor:pointer;text-decoration:none;transition:transform var(--transition,.2s),background var(--transition,.2s),box-shadow var(--transition,.2s)}
.primary-btn:hover,.rai-generate-btn:hover,.start-btn:hover{transform:translateY(-1px)}

/* GHOST BUTTON */
.ghost-btn,.btn-outline-teal{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--btn-ghost-radius,var(--radius-btn,14px));background:var(--btn-ghost-bg,transparent);border:1px solid var(--btn-ghost-border,var(--line,#dce7f0));color:var(--btn-ghost-text,var(--text,#0b1e2b));cursor:pointer;text-decoration:none;transition:all var(--transition,.2s)}
.ghost-btn:hover,.btn-outline-teal:hover{border-color:var(--cyan,#06b6d4);color:var(--cyan,#06b6d4)}

/* INPUT / SELECT */
.wb-search-input,.rai-select,.field input,.field select,.field textarea{font-family:var(--font-ui);font-size:15px;font-weight:400;padding:9px 14px;border-radius:var(--input-radius,12px);background:var(--input-bg,var(--bg,#f4f8fb));border:var(--input-border-w,1px) solid var(--input-border-c,var(--line,#dce7f0));color:var(--text,#0b1e2b);outline:none;transition:border-color var(--transition,.2s)}
.wb-search-input:focus,.rai-select:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--input-focus-c,var(--cyan,#06b6d4))}
.wb-search-input::placeholder,.field input::placeholder{color:var(--text-faint,#7693a5)}

/* ═══════════ EMPHASIS (keep each class's established weight) ═══════════ */
.metric-label{font-weight:900}
.step-kicker{font-weight:800}
.pc-title,.lr-bank-name,.lr-review-title,.unit-title,.lr-mission-title,.pr-lang-name,.ll-title{font-weight:800}
.lh-xp,.stat-tile .st-value,.wb-stat .stat-value{font-weight:900}
.lesson-link{font-weight:700}
.pr-lang-active{font-weight:800}

/* ═══════════════════════════════════════════════════════════════
   UNIFICATION UTILITIES (Phase 1) — inline-style patterns promoted
   to classes so repeated styles live in one place.
   ═══════════════════════════════════════════════════════════════ */
.f-ui{font-family:var(--font-ui)}
.f-display{font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif)}

/* micro-label — was ~8 identical inline attrs (11px/700/uppercase) */
.c-micro--cyan{color:var(--cyan)}
.c-micro--soft{color:var(--text-soft)}
.c-micro--dim{opacity:.5}
.c-micro--dim70{opacity:.7}
.c-micro--spread{letter-spacing:.2em}
.c-micro--mb{margin:0 0 4px}

/* meta line — 13px soft subtitle */
.c-meta{font-family:var(--font-ui);font-size:13px;font-weight:400;color:var(--text-soft);line-height:1.5}
.c-meta--dim{opacity:.5}
.c-meta--mt{margin-top:4px}

/* glass pill chip */
.c-pill--glass{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);width:fit-content}

/* profile / settings section clusters */
.c-section-h3{font-family:var(--font-ui);font-size:28px;font-weight:700;color:var(--text);margin:0 0 8px;letter-spacing:-.02em}
.c-section-sub{font-family:var(--font-ui);font-size:13px;color:var(--text-soft);line-height:1.5;margin:0}
.c-micro--man{font-family:'Manrope',sans-serif;letter-spacing:.08em;display:block}
.c-micro--mb2{margin-bottom:2px}
.c-micro--mb4{margin-bottom:4px}
.c-micro--mb6{margin-bottom:6px}

/* ─── PILL BUTTON FAMILY (Phase 3) — was ~8 identical inline pill CTAs ───
   cyan primary / inverted / ghost. Manrope inline → --font-display so each
   family keeps its display font (base fallback = Manrope → zero change).
   The onmouseover/onmouseout JS hovers become plain CSS :hover. */
.c-btn-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display,'Manrope',ui-sans-serif,sans-serif);font-size:15px;font-weight:700;padding:14px 36px;border-radius:100px;background:var(--cyan,#06b6d4);color:#fff;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--transition,.2s),box-shadow var(--transition,.2s),background var(--transition,.2s)}
.c-btn-pill:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(6,182,212,.35)}
.c-btn-pill:active{transform:translateY(0) scale(.98)}
.c-btn-pill--md{padding:12px 32px}
.c-btn-pill--sm{padding:10px 22px;font-size:13px;font-weight:600}
.c-btn-pill--invert{background:var(--text,#0b1e2b);color:var(--bg,#f4f8fb);box-shadow:0 2px 12px rgba(0,0,0,.18)}
.c-btn-pill--invert:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.24)}
.c-btn-pill--ghost{background:var(--bg,#f4f8fb);color:var(--text-soft,#42606f);border:1.5px solid var(--line,#dce7f0);box-shadow:none}
.c-btn-pill--ghost:hover{border-color:var(--cyan,#06b6d4);color:var(--cyan,#06b6d4);transform:none;box-shadow:none}
.c-btn-pill--fade{font-size:13px;font-weight:700}
.c-btn-pill--fade:hover{opacity:.85;transform:translateY(-1px);box-shadow:none}
.c-btn-pill--block{width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--line,#dce7f0);color:var(--text,#0b1e2b);font-size:13px;font-weight:600}
.c-btn-pill--block:hover{transform:none;box-shadow:none}

/* ─── HOVER INTERACTION UTILITIES (Phase 5) — JS onmouseover/out → CSS :hover ───
   !important on :hover overrides the base inline styles these elements keep
   (inline otherwise beats classes). All var()-driven → per-family colors kept
   (genz untouched: --cyan=#ffeb3b etc.); no font changes. */
.hv-bg{transition:background var(--transition,.15s)}
.hv-bg:hover{background:var(--bg,#f4f8fb) !important}
.hv-border{transition:border-color var(--transition,.15s)}
.hv-border:hover{border-color:var(--cyan,#06b6d4) !important}
.hv-border-lift{transition:border-color var(--transition,.15s),transform var(--transition,.15s)}
.hv-border-lift:hover{border-color:var(--cyan,#06b6d4) !important;transform:translateY(-2px) !important}
.hv-bg-cyan{transition:background var(--transition,.15s)}
.hv-bg-cyan:hover{background:rgba(6,182,212,.2) !important}
.hv-danger-bg{transition:color var(--transition,.15s),background var(--transition,.15s)}
.hv-danger-bg:hover{color:#dc2626 !important;background:rgba(220,38,38,.08) !important}
.hv-cyan{transition:color var(--transition,.15s)}
.hv-cyan:hover{color:var(--cyan,#06b6d4) !important}
.hv-cyan-border{transition:border-color var(--transition,.15s),color var(--transition,.15s)}
.hv-cyan-border:hover{border-color:var(--cyan,#06b6d4) !important;color:var(--cyan,#06b6d4) !important}
.hv-border-green{transition:border-color var(--transition,.15s)}
.hv-border-green:hover{border-color:var(--accent-green,#10b981) !important}
.hv-border-green-lift{transition:border-color var(--transition,.15s),transform var(--transition,.15s)}
.hv-border-green-lift:hover{border-color:var(--accent-green,#10b981) !important;transform:translateY(-2px) !important}
.hv-bg-cyan-soft{transition:background var(--transition,.15s)}
.hv-bg-cyan-soft:hover{background:rgba(6,182,212,.04) !important}
.hv-red{transition:color var(--transition,.15s)}
.hv-red:hover{color:#EF4444 !important}
.hv-scale{transition:transform var(--transition,.15s)}
.hv-scale:hover{transform:scale(1.1) !important}
.hv-scale-105{transition:transform var(--transition,.15s)}
.hv-scale-105:hover{transform:scale(1.05) !important}
.hv-start:hover{background:linear-gradient(135deg,rgba(192,132,252,.28),rgba(192,132,252,.12)) !important;border-color:rgba(192,132,252,.4) !important;box-shadow:0 0 28px rgba(192,132,252,.22),0 4px 12px rgba(0,0,0,.25) !important}
.hv-chip:not(.active):hover{border-color:var(--cyan,#06b6d4) !important;color:var(--cyan,#06b6d4) !important}
.hv-red-bg:hover{background:#e05b5b !important}
.hv-glass:hover{background:rgba(255,255,255,.06) !important}
.hv-lift:hover{transform:translateY(-2px) !important;box-shadow:0 12px 32px rgba(6,182,212,.4) !important}
.hv-bg-text:hover{background:var(--bg,#f4f8fb) !important;color:var(--text,#0b1e2b) !important}