/* ============================================================
   AI FOUNDATIONS, Stylesheet v4
   Editorial / print. Matches the CyberSip house style:
   warm paper, copper + violet accents, hairline rules,
   Newsreader for display, Plex Sans for body, Plex Mono for labels.
   Single light theme, as on cybersip.net.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* CyberSip core palette */
  --paper:      #f4efe6;
  --paper-mid:  #ede7db;
  --espresso:   #18120b;
  --cream:      #f1e8d7;
  --copper:     #c2722f;
  --violet:     #7d6aa8;

  /* surfaces */
  --bg:            var(--paper);
  --bg-tint:       var(--paper-mid);
  --surface:       #faf7f1;
  --surface2:      var(--paper-mid);
  --surface3:      #e2dacb;
  --border:        #d8cfbf;
  --border-strong: #c0b4a0;

  /* ink */
  --text:       #1c1710;
  --text-dim:   #3a3327;
  --text-muted: #655a4e;   /* darkened from the site's #7a6e62 to clear 4.5:1 at 8-10px */

  /* accents, copper leads, violet is the second voice */
  --primary:   var(--copper);
  --secondary: var(--violet);
  --gold:      #6b5410;   /* XP / achievements, brass, distinct from copper */
  --green:     #375f35;
  --red:       #932f1a;

  /* Brand copper is tuned for large display type and for cream-on-espresso.
     At 8-10px on paper it lands near 3.7:1, so small text uses a darkened
     copper instead. Rules, fills, borders and display type keep the real one. */
  --copper-ink:  #96551e;
  --violet-ink:  #5f4f85;

  --on-accent: #fdfaf4;

  /* tints */
  --primary-soft:   color-mix(in oklab, var(--primary) 11%, transparent);
  --primary-line:   color-mix(in oklab, var(--primary) 34%, transparent);
  --secondary-soft: color-mix(in oklab, var(--secondary) 11%, transparent);
  --secondary-line: color-mix(in oklab, var(--secondary) 34%, transparent);
  --gold-soft:      color-mix(in oklab, var(--gold) 12%, transparent);
  --gold-line:      color-mix(in oklab, var(--gold) 34%, transparent);
  --green-soft:     color-mix(in oklab, var(--green) 12%, transparent);
  --green-line:     color-mix(in oklab, var(--green) 34%, transparent);
  --red-soft:       color-mix(in oklab, var(--red) 10%, transparent);
  --red-line:       color-mix(in oklab, var(--red) 32%, transparent);

  --shadow-sm: 0 1px 2px rgba(28,23,16,0.05);
  --shadow-md: 0 6px 20px rgba(28,23,16,0.07);
  --shadow-lg: 0 16px 40px rgba(28,23,16,0.11);

  /* diagram ink stays in the warm family so illustrations sit on the paper */
  --illo-ink:   #3a3327;
  --illo-faint: rgba(28,23,16,0.05);

  /* print, not product: corners stay sharp */
  --radius:    3px;
  --radius-sm: 2px;
  --radius-lg: 4px;
  --hair:      0.5px solid var(--border);
  --transition: 0.15s ease;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  color-scheme: light;
}

/* ---------- RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:18px;line-height:1.65;
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em}
button{cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}

/* The house label: mono, uppercase, tracked out, quiet.
   Used for every kicker, tag, and meta line in the app. */
.k-label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);
}

/* icons */
.icn{width:1em;height:1em;display:inline-block;vertical-align:-0.14em;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icn-lg{width:1.5em;height:1.5em}

/* ---------- SCREENS ---------- */
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column}
#screen-app{display:none;flex-direction:column;height:100vh;overflow:hidden}
#screen-app.active{display:flex}

/* ============================================
   LANDING, the masthead
   ============================================ */
#screen-landing{
  background:var(--bg);
  align-items:stretch;justify-content:flex-start;
  position:relative;overflow-x:hidden;
}
/* Espresso masthead band, straight off the newsletter. Its height comes from
   the content inside it, so it can never crop or overlap the cards below. */
.landing-masthead{position:relative;width:100%;background:var(--espresso);flex-shrink:0}
.landing-particles{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse at 30% 60%, rgba(194,114,47,0.09) 0%, transparent 60%);
}
.landing-content{
  position:relative;z-index:1;
  width:100%;max-width:940px;margin:0 auto;
  padding:0 24px 72px;
  display:flex;flex-direction:column;align-items:stretch;gap:0;
}
.landing-logo{
  position:relative;z-index:1;
  max-width:940px;margin:0 auto;padding:54px 24px 48px;
  text-align:center;display:flex;flex-direction:column;align-items:center;
}
.logo-hex{
  width:40px;height:40px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;color:var(--copper);
}
.logo-hex .icn{width:41.5px;height:41.5px;stroke-width:1.2}
.landing-logo h1{
  font-family:var(--font-display);
  font-size:clamp(44px,7vw,77px);
  font-weight:300;letter-spacing:-0.02em;line-height:1;
  color:var(--cream);
}
.landing-logo h1 .accent{color:var(--copper)}
.tagline{
  font-family:var(--font-mono);font-size:12.5px;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(241,232,215,0.72);margin-top:14px;
}
.tagline-sub{
  display:flex;justify-content:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.07em;
  color:rgba(241,232,215,0.72);margin-top:24px;
}
/* .meta-chip is shared with the track cards on paper, where it is ink-coloured.
   On the espresso masthead it has to take the cream from its container. */
.tagline-sub .meta-chip{color:inherit;border-right-color:rgba(241,232,215,0.2)}

.track-grid-landing{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;
  background:var(--surface);border:var(--hair);border-top:none;margin-top:0}
@media(max-width:760px){.track-grid-landing{grid-template-columns:1fr}}

.track-card-landing{
  position:relative;background:transparent;
  border-radius:0;border:none;
  padding:34px 32px;cursor:pointer;overflow:hidden;
  transition:background var(--transition);
  /* column layout so the start button can be pinned to the bottom and the
     two cards line up regardless of how long their copy runs */
  display:flex;flex-direction:column;
}
.track-card-landing:first-child{border-right:var(--hair)}
@media(max-width:760px){
  .track-card-landing:first-child{border-right:none;border-bottom:var(--hair)}
}
.track-card-landing:hover{background:var(--paper-mid)}
/* the glow orb belongs to the old theme; keep the node, drop the effect */
.track-glow{display:none}

.track-badge-label{
  display:inline-block;font-family:var(--font-mono);
  font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--copper-ink);background:transparent;border:none;
  padding:0;border-radius:0;margin-bottom:14px;
}
.itpro-label{color:var(--violet-ink)}

.track-big-icon{
  width:34px;height:34px;border-radius:0;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--copper);
}
.itpro-card .track-big-icon{background:transparent;color:var(--violet)}
.track-big-icon .icn{width:32px;height:32px;stroke-width:1.3}
.track-card-landing h3{font-family:var(--font-display);font-size:28px;font-weight:600;margin-bottom:8px;color:var(--text);line-height:1.2}
.track-desc{color:var(--text-muted);font-size:15.5px;line-height:1.55;margin-bottom:18px}

.track-meta-row{display:flex;gap:0;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:14px;border-bottom:var(--hair)}
.meta-chip{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.07em;
  padding:0 10px 0 0;margin-right:10px;border-right:var(--hair);border-radius:0;
  background:none;color:var(--text-muted);
}
.meta-chip:last-child{border-right:none;margin-right:0;padding-right:0}

/* what you actually walk away with, replaces the old tier and topic chips */
.track-takeaways{margin-bottom:24px;padding-top:16px;border-top:var(--hair);flex-shrink:0}
.takeaway-label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--copper-ink);margin-bottom:12px;
}
.itpro-card .takeaway-label{color:var(--violet-ink)}
.track-takeaways ul{list-style:none;margin:0;padding:0}
.track-takeaways li{
  position:relative;padding:6px 0 6px 20px;
  font-size:14.5px;line-height:1.55;color:var(--text-dim);
  border-bottom:var(--hair);
}
.track-takeaways li:last-child{border-bottom:none}
.track-takeaways li::before{
  content:'\2192';position:absolute;left:0;top:6px;
  font-family:var(--font-mono);font-size:12px;color:var(--copper);
}
.itpro-card .track-takeaways li::before{color:var(--violet)}
.track-start-btn{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:var(--radius-sm);
  background:var(--espresso);color:var(--cream);
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:opacity var(--transition);
}
.track-start-btn:hover{opacity:0.85}
.track-start-btn .icn{width:15px;height:15px}
.itpro-start{background:var(--espresso)}

/* ============================================
   TOP NAV
   ============================================ */
.topnav{
  height:56px;background:var(--espresso);
  border-bottom:none;
  display:flex;align-items:center;padding:0 18px;gap:16px;
  position:sticky;top:0;z-index:100;flex-shrink:0;
}
.nav-left{display:flex;align-items:center;gap:12px}
.nav-hamburger{
  background:none;border:none;color:rgba(241,232,215,0.5);
  padding:6px;border-radius:var(--radius-sm);display:flex;transition:color var(--transition);
}
.nav-hamburger:hover{color:var(--cream)}
.nav-hamburger .icn{width:22px;height:22px}
.nav-brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:21.5px;font-weight:300;letter-spacing:-0.01em;
  color:var(--cream);cursor:pointer;white-space:nowrap;
}
.nav-brand .accent{color:var(--copper)}
.nav-brand .brand-mark{color:var(--copper);display:flex}
.nav-brand .brand-mark .icn{width:19.5px;height:19.5px;stroke-width:1.3}
.nav-center{flex:1;overflow:hidden}
.breadcrumb{
  display:block;max-width:100%;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(241,232,215,0.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.xp-pill{
  display:flex;align-items:center;gap:5px;
  background:transparent;border:none;padding:0;border-radius:0;
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:0.08em;
  color:var(--copper);
}
.xp-pill .icn{width:14px;height:14px}
.level-pill{
  background:transparent;color:rgba(241,232,215,0.55);
  border-left:1px solid rgba(241,232,215,0.14);
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:0.08em;
  padding:2px 0 2px 12px;border-radius:0;
}
.nav-icon-btn{
  background:none;border:none;color:rgba(241,232,215,0.5);
  width:30px;height:30px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  transition:color var(--transition);
}
.nav-icon-btn:hover{color:var(--cream)}
.nav-icon-btn .icn{width:19.5px;height:19.5px}

/* ============================================
   APP BODY / SIDEBAR
   ============================================ */
.app-body{display:flex;flex:1;overflow:hidden}
.sidebar{
  width:232px;flex-shrink:0;background:var(--surface);
  border-right:var(--hair);
  display:flex;flex-direction:column;overflow-y:auto;
  transition:width 0.2s ease;
}
.sidebar.collapsed{width:0;overflow:hidden}

.sidebar-top{padding:22px 20px 18px;border-bottom:var(--hair)}
.avatar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.avatar{
  width:38px;height:38px;border-radius:var(--radius-sm);
  background:var(--espresso);border:none;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:21.5px;font-weight:600;color:var(--copper);flex-shrink:0;
}
.avatar-level{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text)}
.avatar-title{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-top:2px}

.xp-bar-wrap{margin-bottom:12px}
.xp-bar-track{height:3px;background:var(--surface3);border-radius:0;overflow:hidden;margin-bottom:7px}
.xp-bar-fill{height:100%;background:var(--copper);border-radius:0;transition:width 0.8s ease;width:0%}
.xp-bar-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);letter-spacing:0.04em}

.track-indicator{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  padding:2px 8px;border-radius:2px;display:inline-block;margin-top:4px;
}
.track-indicator.enterprise{color:var(--copper-ink);background:transparent;border:1px solid var(--primary-line)}
.track-indicator.itpro{color:var(--violet-ink);background:transparent;border:1px solid var(--secondary-line)}

.sidebar-nav{padding:12px 0;flex:1}
.snav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 20px;font-size:16px;color:var(--text-dim);cursor:pointer;
  transition:all var(--transition);border-radius:0;margin:0;
  border-left:2px solid transparent;
}
.snav-item .icn{width:18.5px;height:18.5px;opacity:0.75}
.snav-item:hover{background:var(--paper-mid);color:var(--text)}
.snav-item.active{background:transparent;color:var(--copper-ink);border-left-color:var(--copper);font-weight:500}
.snav-item.active .icn{opacity:1}
.snav-divider{height:0;border-top:var(--hair);margin:10px 20px}

.sidebar-earned{padding:14px 20px;display:flex;flex-wrap:wrap;gap:6px;border-top:var(--hair)}
.sidebar-earned .earned-badge{
  width:26px;height:26px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);
}
.sidebar-earned .earned-badge .icn{width:16px;height:16px}

/* ============================================
   MAIN PANE / VIEWS
   ============================================ */
.main-pane{flex:1;overflow-y:auto;background:var(--bg)}
.view{display:none;padding:40px 44px 72px;min-height:100%;max-width:1100px;margin:0 auto}
.view.active{display:block}
@media(max-width:768px){.view{padding:24px 18px 56px}}

/* the newsletter's section rule: label, hairline, count */
.section-title-row{
  display:flex;align-items:center;gap:14px;margin-bottom:20px;
  padding-bottom:0;
}
.section-title-row h2{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);
  white-space:nowrap;
}
.section-title-row::after{content:'';flex:1;height:0.5px;background:var(--border);order:1}
.section-track-chip{
  order:2;font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;
}

/* ============================================
   DASHBOARD
   ============================================ */
.dash-hero{margin-bottom:26px;padding-bottom:22px;border-bottom:var(--hair)}
.dash-greeting{
  display:flex;align-items:center;gap:14px;color:var(--text);
  font-family:var(--font-display);font-size:clamp(29px,3vw,40px);font-weight:600;line-height:1.15;
}
.dash-greeting .dash-hero-icon{
  width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--copper);flex-shrink:0;
}
.dash-greeting .dash-hero-icon .icn{width:34.5px;height:34.5px;stroke-width:1.3}
.dash-sub{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin-top:10px;
}

.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:36px;
  border:var(--hair);background:var(--surface)}
@media(max-width:700px){.stats-bar{grid-template-columns:repeat(2,1fr)}}
.stat-box{
  background:transparent;border:none;border-right:var(--hair);
  border-radius:0;padding:18px 20px;
}
.stat-box:last-child{border-right:none}
@media(max-width:700px){
  .stat-box:nth-child(2){border-right:none}
  .stat-box:nth-child(1),.stat-box:nth-child(2){border-bottom:var(--hair)}
}
.stat-num{font-family:var(--font-display);font-size:36.5px;font-weight:600;color:var(--text);line-height:1}
.stat-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--text-muted);margin-top:7px}

.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.module-card{
  background:var(--surface);border:var(--hair);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.module-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.module-card.locked{opacity:0.5;cursor:not-allowed}
.module-card.locked:hover{border-color:var(--border);box-shadow:none}
.module-card.completed{border-color:var(--green-line)}

.module-card-illo{
  height:104px;display:flex;align-items:center;justify-content:center;
  background:var(--paper-mid);border-bottom:var(--hair);position:relative;overflow:hidden;
}
.module-card-illo svg{width:100%;height:100%;display:block}
.module-card-body{padding:18px 20px 20px}
.module-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.module-icon{
  width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--copper);
}
.module-icon .icn{width:25.5px;height:25.5px;stroke-width:1.4}

.module-card h3{font-family:var(--font-display);font-size:22.5px;font-weight:600;margin-bottom:5px;color:var(--text);line-height:1.22}
.module-card-sub{font-size:15px;color:var(--text-muted);line-height:1.5;margin-bottom:16px}
.module-progress-wrap{margin-bottom:13px}
.module-prog-bar{height:3px;background:var(--surface3);border-radius:0;overflow:hidden}
.module-prog-fill{height:100%;background:var(--copper);border-radius:0;transition:width 0.6s ease}
.module-prog-label{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);margin-top:7px;letter-spacing:0.04em}
.module-card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding-top:12px;border-top:var(--hair)}
.module-xp-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:0.06em;
  color:var(--gold);background:none;border:none;padding:0;border-radius:0;
}
.module-xp-chip .icn{width:12.5px;height:12.5px}

/* IT Pro track recolours to violet */
.track-itpro .module-icon,
.track-itpro .dash-hero-icon,
.track-itpro .avatar{color:var(--violet)}
.track-itpro .module-prog-fill,
.track-itpro .xp-bar-fill{background:var(--violet)}
.track-itpro .snav-item.active{color:var(--violet-ink);border-left-color:var(--violet)}
.track-itpro .xp-pill{color:#b3a5d4}

/* ============================================
   MODULE DETAIL
   ============================================ */
.module-detail-header{
  background:var(--surface);border:var(--hair);
  border-radius:var(--radius);padding:0 0 26px;margin-bottom:24px;overflow:hidden;
}
.module-detail-hero{
  height:140px;margin:0 0 22px;border-bottom:var(--hair);
  background:var(--paper-mid);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.module-detail-hero svg{width:100%;height:100%}
.module-detail-header > *:not(.module-detail-hero){padding-left:30px;padding-right:30px}
.mdh-icon{
  width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--copper);flex-shrink:0;
}
.mdh-icon .icn{width:37px;height:37px;stroke-width:1.3}
.module-detail-title{font-family:var(--font-display);font-size:32.5px;font-weight:600;margin-bottom:4px;color:var(--text);line-height:1.15}
.module-detail-meta{display:flex;gap:0;flex-wrap:wrap;align-items:center;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;color:var(--text-muted);margin-bottom:16px}
.module-detail-meta .meta-inline{display:inline-flex;align-items:center;gap:5px;
  padding-right:12px;margin-right:12px;border-right:var(--hair)}
.module-detail-meta .icn{width:14px;height:14px}
.module-detail-desc{color:var(--text-dim);line-height:1.75;font-size:16.5px}

.lessons-list{display:flex;flex-direction:column;gap:0;border:var(--hair);background:var(--surface)}
.lesson-item{
  background:transparent;border:none;border-bottom:var(--hair);border-radius:0;
  padding:16px 22px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:background var(--transition);
}
.lesson-item:last-child{border-bottom:none}
.lesson-item:hover{background:var(--paper-mid)}
.lesson-num{
  width:30px;height:30px;border-radius:0;background:transparent;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:20.5px;font-weight:600;color:var(--text-muted);
  flex-shrink:0;border:none;
}
.lesson-num .icn{width:18.5px;height:18.5px}
.lesson-item.completed .lesson-num{background:transparent;color:var(--green);border:none}
.lesson-info{flex:1;min-width:0}
.lesson-item-title{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:2px;line-height:1.3}
.lesson-item-meta{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.07em;color:var(--text-muted);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lesson-item-meta .icn{width:12.5px;height:12.5px}
.lesson-item-status{color:var(--border-strong);display:flex}
.lesson-item-status .icn{width:18.5px;height:18.5px}
.lesson-item.completed .lesson-item-status{color:var(--green)}
.lesson-quiz-item{background:var(--gold-soft)}
.lesson-quiz-item .lesson-num{color:var(--gold)}
.lesson-quiz-item:hover{background:color-mix(in oklab, var(--gold) 18%, transparent)}

/* ============================================
   LESSON VIEW
   ============================================ */
.lesson-top{
  background:var(--surface);border:var(--hair);
  border-radius:var(--radius);margin-bottom:26px;overflow:hidden;
}
.lesson-hero{
  height:158px;background:var(--paper-mid);border-bottom:var(--hair);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.lesson-hero svg{width:100%;height:100%}
.lesson-top-inner{padding:24px 30px 26px}
.lesson-module-crumb{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;
}
.lesson-module-crumb .icn{width:14px;height:14px}
.lesson-title-big{font-family:var(--font-display);font-size:clamp(29px,3.4vw,42px);font-weight:600;margin-bottom:14px;line-height:1.14;color:var(--text)}
.lesson-meta-row{display:flex;gap:0;align-items:center;flex-wrap:wrap}
.lesson-xp-tag,.lesson-done-tag{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:2px 8px;border-radius:2px;margin-right:6px;
  display:inline-flex;align-items:center;gap:5px;
}
.lesson-xp-tag{color:#5b4709;background:var(--gold-soft);border:1px solid var(--gold-line)}
.lesson-xp-tag .icn{width:12.5px;height:12.5px}
.lesson-done-tag{color:var(--green);background:var(--green-soft);border:1px solid var(--green-line)}
.lesson-done-tag .icn{width:12.5px;height:12.5px}

.lesson-content{display:flex;flex-direction:column;gap:22px;margin:0 auto 28px;max-width:800px}

/* ---- content blocks ---- */
.block-paragraph{color:var(--ink2,var(--text-dim));line-height:1.78;font-size:18px}
.block-paragraph strong{color:var(--text);font-weight:600}
.block-paragraph em{color:var(--copper-ink);font-style:italic;font-weight:400}

/* the opening paragraph of every lesson gets the newsletter drop cap */
.lesson-content > .block-paragraph:first-child{
  font-family:var(--font-display);font-size:20px;line-height:1.78;color:var(--text-dim);
}
.lesson-content > .block-paragraph:first-child::first-letter{
  font-size:3.1em;font-weight:600;float:left;line-height:0.78;
  margin:0.1em 0.12em 0 0;color:var(--copper);
}

.block-heading{
  font-family:var(--font-display);font-size:26px;font-weight:600;
  margin-top:14px;border-left:none;padding-left:0;line-height:1.24;
  padding-bottom:8px;border-bottom:var(--hair);
}

.block-callout{border-radius:var(--radius);padding:16px 18px;border:1px solid;line-height:1.7;font-size:16px;background:var(--surface);color:var(--text-dim)}
.callout-title{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:9px;
}
.callout-title .icn{width:15px;height:15px}
.block-callout.info{background:var(--surface);border-color:var(--border)}
.block-callout.info .callout-title{color:var(--copper-ink)}
.block-callout.warning{background:var(--gold-soft);border-color:var(--gold-line)}
.block-callout.warning .callout-title{color:#5b4709}
.block-callout.danger{background:var(--red-soft);border-color:var(--red-line)}
.block-callout.danger .callout-title{color:var(--red)}
.block-callout.success{background:var(--green-soft);border-color:var(--green-line)}
.block-callout.success .callout-title{color:var(--green)}
/* critical reads as the newsletter's "don't miss", violet spine, no fill */
.block-callout.critical{
  background:transparent;border:none;border-left:2.5px solid var(--violet);
  border-radius:0;padding:2px 0 2px 14px;color:#3e3458;
}
.block-callout.critical .callout-title{color:var(--violet-ink)}

.block-dialogue{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.dialogue-header{
  display:flex;align-items:center;gap:8px;background:var(--paper-mid);padding:11px 18px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);border-bottom:var(--hair);
}
.dialogue-header .icn{width:15px;height:15px;color:var(--text-muted)}
.dialogue-exchanges{padding:18px;display:flex;flex-direction:column;gap:16px}
.dialogue-bubble{display:flex;gap:12px;align-items:flex-start}
.bubble-avatar{width:26px;height:26px;border-radius:2px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bubble-avatar .icn{width:17px;height:17px}
.bubble-human .bubble-avatar{background:transparent;color:var(--copper);border:1px solid var(--primary-line)}
.bubble-ai .bubble-avatar{background:transparent;color:var(--violet);border:1px solid var(--secondary-line)}
.bubble-content{flex:1;min-width:0}
.bubble-speaker{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;margin-bottom:5px;text-transform:uppercase}
.bubble-human .bubble-speaker{color:var(--copper-ink)}
.bubble-ai .bubble-speaker{color:var(--violet-ink)}
.bubble-text{background:transparent;border:none;border-left:var(--hair);border-radius:0;
  padding:0 0 0 14px;font-size:16px;color:var(--text-dim);line-height:1.7}
.dialogue-note{
  display:flex;gap:8px;margin:0 18px 18px;padding:12px 0 0;
  background:none;border:none;border-top:var(--hair);border-radius:0;
  font-size:15px;color:var(--text-muted);line-height:1.6;
}
.dialogue-note .icn{width:15px;height:15px;color:var(--copper);flex-shrink:0;margin-top:3px}

.block-keypoints{background:transparent;border:none;border-radius:0;padding:0}
.keypoints-title{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--copper-ink);margin-bottom:10px;
}
.keypoints-title .icn{width:15px;height:15px}
/* the newsletter's action list: arrow bullets, hairline separated */
.keypoint-item{display:flex;gap:9px;align-items:flex-start;padding:6px 0;font-size:15.5px;color:var(--text-dim);line-height:1.6;border-bottom:var(--hair)}
.keypoint-item:last-child{border-bottom:none}
.keypoint-bullet{flex-shrink:0;margin-top:2px;display:flex;position:relative;width:10px}
.keypoint-bullet .icn{display:none}
.keypoint-bullet::before{content:'→';font-family:var(--font-mono);color:var(--copper);font-size:12.5px;line-height:1.6}

.block-vocab{background:var(--surface);border:var(--hair);border-radius:var(--radius);padding:20px 22px}
.vocab-block-title{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--violet-ink);margin-bottom:12px;
}
.vocab-block-title .icn{width:15px;height:15px}
.vocab-term-row{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;padding:9px 0;border-bottom:var(--hair);font-size:16px}
.vocab-term-row:last-child{border-bottom:none}
.vocab-term-name{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--copper-ink);flex-shrink:0}
.vocab-term-sep{color:var(--border-strong)}
.vocab-term-def{color:var(--text-dim);line-height:1.6;flex:1;min-width:200px}

.block-comparison{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.comparison-grid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:640px){.comparison-grid{grid-template-columns:1fr}}
.comparison-col{padding:20px 22px}
.comparison-col:first-child{border-right:var(--hair)}
@media(max-width:640px){.comparison-col:first-child{border-right:none;border-bottom:var(--hair)}}
.comparison-col-label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  margin-bottom:12px;padding-bottom:9px;border-bottom:var(--hair);
}
.comparison-col:first-child .comparison-col-label{color:var(--copper-ink)}
.comparison-col:last-child .comparison-col-label{color:var(--violet-ink)}
.comparison-item{font-size:15px;color:var(--text-dim);padding:7px 0;border-bottom:var(--hair);display:flex;gap:9px;align-items:flex-start;line-height:1.55}
.comparison-item:last-child{border-bottom:none}
.comparison-dot{flex-shrink:0;margin-top:2px;display:flex;width:9px}
.comparison-dot .icn{display:none}
.comparison-dot::before{content:'→';font-family:var(--font-mono);color:var(--border-strong);font-size:11.5px}

.block-cost-table{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.cost-table-header{
  display:flex;align-items:center;gap:8px;background:var(--paper-mid);padding:11px 18px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--gold);border-bottom:var(--hair);
}
.cost-table-header .icn{width:15px;height:15px}
.cost-row{display:grid;grid-template-columns:1fr 1fr 1.6fr;padding:11px 18px;border-bottom:var(--hair);font-size:15px;align-items:start;gap:12px}
.cost-row:last-child{border-bottom:none}
.cost-label{color:var(--text);font-weight:500}
.cost-value{font-family:var(--font-mono);font-size:13.5px;color:var(--copper-ink);font-weight:500;line-height:1.5}
.cost-note{color:var(--text-muted);font-size:15px;line-height:1.5}
@media(max-width:640px){.cost-row{grid-template-columns:1fr;gap:4px}}

.block-scenario{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.scenario-header{display:flex;align-items:center;gap:9px;background:var(--paper-mid);padding:13px 20px;border-bottom:var(--hair)}
.scenario-header .icn{width:17px;height:17px;color:var(--copper)}
.scenario-title{font-family:var(--font-display);font-size:19px;font-weight:600}
.scenario-body{padding:20px;display:flex;flex-direction:column;gap:16px}
.scenario-section-label{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.scenario-situation{color:var(--text-dim);font-size:16px;line-height:1.7}
.scenario-risk,.scenario-rec{display:flex;gap:9px;color:var(--text-dim);font-size:15.5px;line-height:1.65}
.scenario-risk .icn{width:16px;height:16px;color:var(--red);flex-shrink:0;margin-top:3px}
.scenario-rec .icn{width:16px;height:16px;color:var(--green);flex-shrink:0;margin-top:3px}

/* concept illustration block */
.block-illustration{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.illo-frame{background:var(--paper-mid);padding:26px;display:flex;align-items:center;justify-content:center;border-bottom:var(--hair)}
.illo-frame svg{width:100%;max-width:560px;height:auto}
.illo-caption{padding:14px 20px;display:flex;gap:10px;align-items:flex-start}
.illo-caption .icn{width:15px;height:15px;color:var(--copper);flex-shrink:0;margin-top:3px}
.illo-caption-text{flex:1}
.illo-caption-title{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.illo-caption-desc{font-size:15px;color:var(--text-muted);line-height:1.6}

.lesson-footer{
  display:flex;justify-content:space-between;align-items:center;
  background:transparent;border:none;border-top:var(--hair);border-radius:0;
  padding:20px 0 0;flex-wrap:wrap;gap:12px;max-width:800px;margin:0 auto;
}
.lesson-nav-info{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}

/* ---- buttons: mono, uppercase, squared ---- */
.btn-complete,.btn-quiz,.btn-continue,.btn-modal,.btn-fc-knew,.btn-fc-review,.btn-back,.btn-outline{
  font-family:var(--font-mono);font-size:12.5px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;border-radius:var(--radius-sm);
}
.btn-complete{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border:none;
  background:var(--espresso);color:var(--cream);
  transition:opacity var(--transition);
}
.btn-complete:hover{opacity:0.85}
.btn-complete .icn{width:16px;height:16px}
.btn-complete.itpro{background:var(--espresso)}
.btn-back{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;border:1px solid var(--border);
  background:transparent;color:var(--text-muted);transition:all var(--transition);
}
.btn-back:hover{border-color:var(--border-strong);color:var(--text)}
.btn-back .icn{width:15px;height:15px}

/* ============================================
   QUIZ
   ============================================ */
.quiz-wrap{max-width:720px;margin:0 auto}
.quiz-header-box{background:transparent;border:none;border-bottom:var(--hair);border-radius:0;padding:0 0 20px;margin-bottom:24px;text-align:left}
.quiz-progress-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.quiz-prog-bar{height:3px;background:var(--surface3);border-radius:0;overflow:hidden;margin-bottom:16px}
.quiz-prog-fill{height:100%;background:var(--copper);border-radius:0;transition:width 0.4s ease}
.quiz-title{font-family:var(--font-display);font-size:30px;font-weight:600;margin-bottom:2px;line-height:1.2}
.quiz-sub{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.quiz-question-box{background:var(--surface);border:var(--hair);border-radius:var(--radius);padding:28px 30px}
.quiz-q-num{font-family:var(--font-mono);font-size:11px;color:var(--copper-ink);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px}
.quiz-q-text{font-family:var(--font-display);font-size:23.5px;font-weight:600;line-height:1.35;margin-bottom:24px;color:var(--text)}
.quiz-options{display:flex;flex-direction:column;gap:0;border-top:var(--hair)}
.quiz-option{
  background:transparent;border:none;border-bottom:var(--hair);border-radius:0;
  padding:14px 4px;font-size:16px;color:var(--text-dim);cursor:pointer;
  transition:all var(--transition);text-align:left;line-height:1.55;
}
.quiz-option:hover:not(:disabled){color:var(--text);background:var(--paper-mid);padding-left:10px}
.quiz-option:disabled{cursor:default}
.quiz-option.selected{color:var(--text);background:var(--primary-soft)}
.quiz-option.correct{color:#2f5e2d;background:var(--green-soft);box-shadow:inset 2.5px 0 0 var(--green);padding-left:10px}
.quiz-option.wrong{color:var(--red);background:var(--red-soft);box-shadow:inset 2.5px 0 0 var(--red);padding-left:10px}
.quiz-feedback{margin-top:20px;padding:14px 0 0;border-top:var(--hair);border-radius:0;font-size:16px;line-height:1.7;display:none;color:var(--text-dim)}
.quiz-feedback.show{display:block}
.quiz-feedback.correct-fb{background:none;border-top-color:var(--green-line)}
.quiz-feedback.wrong-fb{background:none;border-top-color:var(--red-line)}
.quiz-feedback-label{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  margin-bottom:8px;
}
.quiz-feedback-label .icn{width:15px;height:15px}
.quiz-feedback.correct-fb .quiz-feedback-label{color:var(--green)}
.quiz-feedback.wrong-fb .quiz-feedback-label{color:var(--red)}
.quiz-controls{margin-top:22px;padding-top:18px;border-top:var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px}
.btn-quiz{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border:none;
  background:var(--espresso);color:var(--cream);transition:opacity var(--transition);
}
.btn-quiz .icn{width:16px;height:16px}
.btn-quiz:disabled{opacity:0.3;cursor:not-allowed}
.btn-quiz:not(:disabled):hover{opacity:0.85}
.quiz-xp-earned{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:12.5px;color:var(--gold);font-weight:500;letter-spacing:0.06em}
.quiz-xp-earned .icn{width:14px;height:14px}

.quiz-complete-box{background:var(--surface);border:var(--hair);border-radius:var(--radius);padding:44px 40px;text-align:center}
.quiz-complete-icon{width:52px;height:52px;margin:0 auto 16px;border-radius:0;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--copper)}
.quiz-complete-icon .icn{width:50.5px;height:50.5px;stroke-width:1.2}
.quiz-complete-title{font-family:var(--font-display);font-size:36.5px;font-weight:600;margin-bottom:6px;line-height:1.1}
.quiz-complete-score{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.quiz-complete-xp{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:15.5px;color:var(--gold);font-weight:500;letter-spacing:0.08em;background:var(--gold-soft);border:1px solid var(--gold-line);padding:8px 20px;border-radius:2px;margin-bottom:22px}
.quiz-complete-xp .icn{width:17px;height:17px}
.btn-continue{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border:none;
  background:var(--espresso);color:var(--cream);transition:opacity var(--transition);
}
.btn-continue:hover{opacity:0.85}
.btn-continue .icn{width:16px;height:16px}

/* high score readout */
.quiz-highscore-row{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin:18px 0 20px;
  border-top:var(--hair);border-bottom:var(--hair);padding:14px 0}
.qhs-item{min-width:110px;padding:0 20px;border-radius:0;background:none;border:none;border-right:var(--hair)}
.qhs-item:last-child{border-right:none}
.qhs-item.is-new .qhs-value{color:var(--copper)}
.qhs-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.qhs-item.is-new .qhs-label{color:var(--copper-ink)}
.qhs-value{display:flex;align-items:center;justify-content:center;gap:5px;font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--text);line-height:1}
.qhs-value .icn{width:16px;height:16px;color:var(--gold)}
.quiz-best-chip{
  display:inline-flex;align-items:center;gap:4px;margin-left:9px;vertical-align:middle;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);
  padding:1px 7px;border-radius:2px;
}
.quiz-best-chip .icn{width:10.5px;height:10.5px}
.module-best-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:0.06em;
  color:var(--gold);background:none;border:none;padding:0;
}
.module-best-chip .icn{width:11.5px;height:11.5px}

/* ============================================
   VOCABULARY
   ============================================ */
.page-header{margin-bottom:24px;padding-bottom:20px;border-bottom:var(--hair)}
.page-header h2{font-family:var(--font-display);font-size:clamp(31px,3.2vw,42px);font-weight:600;margin-bottom:6px;line-height:1.12}
.page-sub{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.vocab-controls{margin-bottom:24px}
.search-box{
  width:100%;padding:12px 14px;background:var(--surface);border:var(--hair);
  border-radius:var(--radius-sm);color:var(--text);font-size:16.5px;outline:none;
  transition:border-color var(--transition);margin-bottom:14px;
}
.search-box:focus{border-color:var(--copper)}
.search-box::placeholder{color:var(--text-muted)}
.vocab-cats{display:flex;gap:6px;flex-wrap:wrap}
.vocab-cat-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:2px;border:1px solid var(--border);
  background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition);
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
}
.vocab-cat-btn .icn{width:12.5px;height:12.5px}
.vocab-cat-btn:hover,.vocab-cat-btn.active{background:var(--primary-soft);color:#7a441a;border-color:var(--primary-line)}
.vocab-cat-btn.fc-btn{color:var(--gold);border-color:var(--gold-line)}
.vocab-cat-btn.fc-btn:hover{background:var(--gold-soft);color:var(--gold)}

.vocab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0;
  border-top:var(--hair);border-left:var(--hair)}
.vocab-card{background:var(--surface);border:none;border-right:var(--hair);border-bottom:var(--hair);
  border-radius:0;padding:18px 20px;transition:background var(--transition)}
.vocab-card:hover{background:var(--paper-mid)}
.vocab-card-term{font-family:var(--font-display);font-size:21.5px;font-weight:600;color:var(--text);margin-bottom:4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vocab-card-acronym{font-family:var(--font-body);font-size:13.5px;color:var(--text-muted);background:none;padding:0;border-radius:0;font-weight:400;font-style:italic}
.vocab-card-cat{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--copper-ink);margin-bottom:9px}
.vocab-card-def{font-size:15px;color:var(--text-dim);line-height:1.65}
.vocab-card-example{margin-top:10px;font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--text-muted);border-left:2px solid var(--secondary-line);padding-left:10px;line-height:1.55}

/* ============================================
   ACHIEVEMENTS
   ============================================ */
.badge-card.rarity-bronze  { --rar:#6f421d; --rar2:#542f17; }
.badge-card.rarity-silver  { --rar:#6e675c; --rar2:#4d4941; }
.badge-card.rarity-gold    { --rar:var(--gold); --rar2:#6d5413; }
.badge-card.rarity-platinum{ --rar:var(--violet); --rar2:#544479; }

.ach-summary{
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
  background:var(--surface);border:var(--hair);border-radius:var(--radius);
  padding:22px 26px;margin-bottom:28px;
}
.ach-ring{
  --ach-pct:0;
  width:96px;height:96px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--copper) calc(var(--ach-pct) * 1%), var(--surface3) 0);
  display:flex;align-items:center;justify-content:center;
}
.ach-ring-inner{
  width:78px;height:78px;border-radius:50%;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.ach-ring-num{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--text);line-height:1}
.ach-ring-num span{font-size:15.5px;color:var(--text-muted);font-weight:400}
.ach-ring-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.16em;color:var(--text-muted);font-weight:500}
.ach-summary-stats{display:flex;gap:0;flex-wrap:wrap}
.ach-stat{padding:0 26px;border-right:var(--hair)}
.ach-stat:first-child{padding-left:0}
.ach-stat:last-child{border-right:none}
.ach-stat-num{font-family:var(--font-display);font-size:28px;font-weight:600;color:var(--copper);line-height:1}
.ach-stat-lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-top:6px}

.badges-grid{display:flex;flex-direction:column;gap:32px}
.ach-group-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ach-group-title{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.ach-group-desc{display:none}
.ach-group-head > div:first-child{display:contents}
.ach-group-head::after{content:'';flex:1;height:0.5px;background:var(--border)}
.ach-group-count{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.1em;
  color:var(--text-muted);background:none;border:none;padding:0;border-radius:0;flex-shrink:0;order:3;
}
.ach-group-count.is-complete{color:var(--copper-ink)}
.ach-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:0;
  border-top:var(--hair);border-left:var(--hair)}

.badge-card{
  background:var(--surface);border:none;border-right:var(--hair);border-bottom:var(--hair);
  border-radius:0;padding:26px 16px 20px;text-align:center;position:relative;overflow:hidden;
  transition:background var(--transition);
}
.badge-card.earned{background:var(--surface)}
.badge-card.earned:hover{background:var(--paper-mid)}
.badge-card.locked-badge{opacity:0.55}
.badge-card.locked-badge .badge-name{color:var(--text-muted)}

.badge-ribbon{
  position:absolute;top:0;left:0;right:0;
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.18em;
  padding:5px 0;color:var(--text-muted);background:var(--paper-mid);
  border-bottom:var(--hair);
}
.badge-card.earned .badge-ribbon{
  color:var(--text-dim);background:color-mix(in oklab, var(--rar) 13%, transparent);
  border-bottom-color:color-mix(in oklab, var(--rar) 30%, transparent);
}

.badge-medal{position:relative;width:70px;height:70px;margin:8px auto 12px;display:flex;align-items:center;justify-content:center}
.badge-medal-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px dashed var(--border-strong);
}
.badge-card.earned .badge-medal-ring{
  border-style:solid;border-color:color-mix(in oklab, var(--rar) 45%, transparent);
}
.badge-medal-face{
  width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:var(--surface3);color:var(--text-muted);
}
.badge-card.earned .badge-medal-face{
  background:linear-gradient(150deg, var(--rar), var(--rar2));
  color:#fdfaf4;
}
.badge-medal-face .icn{width:27.5px;height:27.5px;stroke-width:1.7}
.badge-medal-check{
  position:absolute;bottom:0;right:2px;width:18px;height:18px;border-radius:50%;
  background:var(--rar);color:#fdfaf4;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);
}
.badge-medal-check .icn{width:10.5px;height:10.5px;stroke-width:3.5}

.badge-rarity-tag{
  font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:6px;
}
.badge-card.earned .badge-rarity-tag{color:var(--rar)}
.badge-name{font-family:var(--font-display);font-size:18px;font-weight:600;margin-bottom:4px;line-height:1.25}
.badge-desc{font-size:14.5px;color:var(--text-muted);line-height:1.5}
.badge-xp-chip{
  display:inline-flex;align-items:center;gap:4px;margin-top:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;
  color:var(--gold);background:none;border:none;padding:0;border-radius:0;
}
.badge-card.locked-badge .badge-xp-chip{color:var(--text-muted)}
.badge-xp-chip .icn{width:11.5px;height:11.5px}

/* ============================================
   NOTES
   ============================================ */
.notes-toolbar{display:flex;gap:8px;margin-bottom:16px}
.btn-outline{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--border);
  background:transparent;color:var(--text-muted);transition:all var(--transition);
}
.btn-outline:hover{border-color:var(--border-strong);color:var(--text)}
.btn-outline .icn{width:15px;height:15px}
.notes-area{
  width:100%;min-height:58vh;background:var(--surface);border:var(--hair);
  border-radius:var(--radius);padding:22px 24px;color:var(--text);font-size:17.5px;line-height:1.85;
  resize:vertical;outline:none;transition:border-color var(--transition);
}
.notes-area:focus{border-color:var(--copper)}
.notes-area::placeholder{color:var(--text-muted)}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(24,18,11,0.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;animation:fade-in 0.2s ease;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--paper);border:1px solid var(--border-strong);border-radius:var(--radius);padding:40px 36px;text-align:center;max-width:400px;width:90%;animation:slide-up 0.28s ease;position:relative;box-shadow:var(--shadow-lg)}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.xp-burst{font-family:var(--font-display);font-size:60px;font-weight:600;color:var(--copper);margin-bottom:4px;line-height:1}
.xp-modal-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:26px}
.badge-unlock-animate{position:relative;height:88px;margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.badge-unlock-ring{position:absolute;width:76px;height:76px;border-radius:50%;border:1px solid var(--copper);animation:ring-pulse 1.1s ease-out infinite}
@keyframes ring-pulse{0%{transform:scale(0.82);opacity:1}100%{transform:scale(1.35);opacity:0}}
.badge-unlock-icon{
  width:62px;height:62px;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(150deg,var(--copper),#8a4f20);color:#fdfaf4;
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.badge-unlock-icon .icn{width:34.5px;height:34.5px}
.modal-badge-header{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px;color:var(--copper-ink)}
.modal-badge-name{font-family:var(--font-display);font-size:26px;font-weight:600;margin-bottom:6px;line-height:1.2}
.modal-badge-desc{font-size:15.5px;color:var(--text-muted);margin-bottom:14px;line-height:1.6}
.modal-badge-xp{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13.5px;color:var(--gold);font-weight:500;letter-spacing:0.08em;margin-bottom:24px}
.modal-badge-xp .icn{width:15px;height:15px}
.level-up-starburst{width:52px;height:52px;margin:0 auto 12px;border-radius:0;background:transparent;color:var(--copper);display:flex;align-items:center;justify-content:center;animation:pop-star 0.5s ease}
.level-up-starburst .icn{width:50.5px;height:50.5px;stroke-width:1.2}
@keyframes pop-star{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.level-up-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.level-up-number{font-family:var(--font-display);font-size:76px;font-weight:600;color:var(--copper);line-height:1;margin-bottom:4px}
.level-up-title{font-family:var(--font-display);font-size:22.5px;font-style:italic;color:var(--text-dim);margin-bottom:26px}
.btn-modal{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border:none;background:var(--espresso);color:var(--cream);transition:opacity var(--transition)}
.btn-modal:hover{opacity:0.85}

/* ============================================
   DIAGRAMS
   ============================================ */
.block-diagram{background:var(--surface);border:var(--hair);border-radius:var(--radius);overflow:hidden}
.diagram-title{
  display:flex;align-items:center;gap:8px;background:var(--paper-mid);padding:11px 18px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--copper-ink);border-bottom:var(--hair);
}
.diagram-title .icn{width:15px;height:15px}
.flow-diagram{padding:24px;display:flex;flex-direction:column;gap:0;align-items:center}
.flow-step{background:var(--paper-mid);border:var(--hair);border-radius:var(--radius-sm);padding:12px 18px;text-align:center;min-width:210px;max-width:340px;width:100%}
.flow-step-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.flow-step-content{font-size:15px;color:var(--text-dim);line-height:1.5}
.flow-step.highlight{border-color:var(--primary-line);background:var(--primary-soft)}
.flow-step.highlight .flow-step-content{color:var(--text)}
.flow-arrow{color:var(--border-strong);padding:5px 0;display:flex;align-items:center;justify-content:center}
.flow-arrow .icn{width:18.5px;height:18.5px}
.flow-loop-indicator{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;padding:9px 14px;background:var(--secondary-soft);border:1px solid var(--secondary-line);border-radius:var(--radius-sm);font-size:15px;color:var(--violet-ink);width:100%}
.flow-loop-indicator .icn{width:15px;height:15px}
.matrix-diagram{padding:18px;overflow-x:auto}
.matrix-row{display:flex;gap:0;margin-bottom:0;align-items:stretch}
.matrix-cell{flex:1;background:transparent;border:var(--hair);margin:-0.25px;border-radius:0;padding:10px 12px;font-size:15px;line-height:1.5;color:var(--text-dim);min-width:110px}
.matrix-cell.header{color:var(--copper-ink);font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;background:var(--paper-mid)}
.matrix-cell.itpro-header{color:var(--violet-ink);background:var(--secondary-soft)}
.context-window-diagram{padding:22px}
.cw-whiteboard{background:var(--paper-mid);border:var(--hair);border-radius:var(--radius-sm);padding:14px;min-height:120px;position:relative;overflow:hidden;margin-bottom:12px}
.cw-content-block{height:22px;border-radius:2px;margin-bottom:6px;display:flex;align-items:center;padding:0 10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.04em}
.cw-content-block.old{background:var(--red-soft);color:var(--red);border:1px solid var(--red-line)}
.cw-content-block.mid{background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
.cw-content-block.new-content{background:var(--green-soft);color:var(--green);border:1px solid var(--green-line)}
.cw-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--text-muted);text-align:center}

/* ============================================
   FLASHCARDS
   ============================================ */
#view-flashcards{padding:40px 44px 72px;max-width:1100px;margin:0 auto}
@media(max-width:768px){#view-flashcards{padding:24px 18px 56px}}
.flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.flashcard-header h2{font-family:var(--font-display);font-size:32.5px;font-weight:600}
.flashcard-progress-bar{height:3px;background:var(--surface3);border-radius:0;overflow:hidden;margin-bottom:14px}
.flashcard-prog-fill{height:100%;background:var(--copper);border-radius:0;transition:width 0.4s ease}
.flashcard-counter{display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:18px}
.flashcard-counter .icn{width:14px;height:14px}
.flashcard-scene{perspective:1200px;max-width:620px;margin:0 auto;cursor:pointer}
.flashcard-card{width:100%;min-height:300px;position:relative;transform-style:preserve-3d;transition:transform 0.5s ease}
.flashcard-card.flipped{transform:rotateY(180deg)}
.flashcard-face{position:absolute;width:100%;min-height:300px;backface-visibility:hidden;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);padding:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow-sm)}
.flashcard-face.back{transform:rotateY(180deg);border-color:var(--secondary-line)}
.flashcard-category{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--copper-ink);margin-bottom:18px}
.flashcard-term{font-family:var(--font-display);font-size:36.5px;font-weight:600;color:var(--text);margin-bottom:8px;line-height:1.15}
.flashcard-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}
.flashcard-definition{font-size:17.5px;color:var(--text-dim);line-height:1.7;margin-bottom:16px}
.flashcard-example{font-family:var(--font-display);font-style:italic;font-size:15px;color:var(--text-muted);border-top:var(--hair);padding-top:14px;width:100%;text-align:left;line-height:1.6}
.flashcard-actions{display:flex;gap:10px;justify-content:center;max-width:620px;margin:20px auto 0;flex-wrap:wrap}
.btn-fc-knew{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;background:var(--espresso);color:var(--cream);flex:1;min-width:130px;transition:opacity var(--transition)}
.btn-fc-knew:hover{opacity:0.85}
.btn-fc-knew .icn{width:16px;height:16px}
.btn-fc-review{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:1px solid var(--border);background:transparent;color:var(--text-muted);flex:1;min-width:130px;transition:all var(--transition)}
.btn-fc-review:hover{border-color:var(--border-strong);color:var(--text)}
.btn-fc-review .icn{width:16px;height:16px}
.flashcard-complete{max-width:520px;margin:60px auto;background:var(--surface);border:var(--hair);border-radius:var(--radius);padding:44px 40px;text-align:center}
.fc-complete-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:0;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--copper)}
.fc-complete-icon .icn{width:50.5px;height:50.5px;stroke-width:1.2}
.fc-complete-title{font-family:var(--font-display);font-size:32.5px;font-weight:600;margin-bottom:6px}
.fc-complete-stats{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px}

/* ============================================
   SCROLLBAR + UTIL
   ============================================ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper-mid)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:0;border:3px solid var(--paper-mid)}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}
.hidden{display:none!important}
.text-primary{color:var(--copper-ink)}
.text-secondary{color:var(--violet-ink)}
.text-gold{color:var(--gold)}
.text-muted{color:var(--text-muted)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}

/* ============================================
   CLOUD SYNC (hosted build only)
   ============================================ */
.cloud-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--radius-sm);
  border:1px solid rgba(241,232,215,0.22);background:transparent;
  color:rgba(241,232,215,0.82);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;
  transition:all var(--transition);
}
.cloud-btn:hover{border-color:rgba(241,232,215,0.5);color:var(--cream)}
.cloud-btn .icn{width:13px;height:13px}
.cloud-btn.is-in{color:var(--copper);border-color:color-mix(in oklab, var(--copper) 45%, transparent)}
@media(max-width:640px){.cloud-btn span{display:none}.cloud-btn{padding:6px 9px}}

.cloud-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--espresso);color:var(--cream);
  border:1px solid rgba(241,232,215,0.16);border-radius:var(--radius-sm);
  padding:10px 18px;z-index:2000;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.cloud-toast.show{opacity:1;transform:translate(-50%,0)}
.cloud-toast.bad{border-color:color-mix(in oklab, var(--red) 55%, transparent);color:#f3c4bb}

/* ============================================
   FREE MODULE GATE (hosted build only)
   ============================================ */
.module-card.is-locked{opacity:0.62;position:relative}
.module-card.is-locked:hover{border-color:var(--border);box-shadow:none}
.module-lock{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:7px 0;background:var(--espresso);color:var(--cream);
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
}
.module-lock .icn{width:12px;height:12px}

.gate-box{max-width:620px;margin:0 auto;padding:44px 40px;text-align:left}
.gate-kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--copper-ink);margin-bottom:14px;
}
.gate-title{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1.15;margin-bottom:14px}
.gate-body{font-size:16px;line-height:1.72;color:var(--text-dim);margin-bottom:20px}
.gate-points{list-style:none;margin:0 0 26px;padding:0}
.gate-points li{
  position:relative;padding:8px 0 8px 22px;
  font-size:14.5px;line-height:1.55;color:var(--text-dim);border-bottom:var(--hair);
}
.gate-points li:last-child{border-bottom:none}
.gate-points li::before{
  content:'92';position:absolute;left:0;top:8px;
  font-family:var(--font-mono);font-size:12px;color:var(--copper);
}
.gate-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 26px;border:none;border-radius:var(--radius-sm);
  background:var(--espresso);color:var(--cream);
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:opacity var(--transition);
}
.gate-btn:hover{opacity:0.85}
.gate-foot{margin-top:18px;font-size:12.5px;line-height:1.6;color:var(--text-muted)}