/* ============================================================
   MeraProfessor — shared design system
   Palette adapted from the course style reference (warm paper).
   Tokens are the only thing meant to change per-theme.
   ============================================================ */
:root{
  --ink:#1a1410;        /* primary text                         */
  --paper:#f4ede2;      /* page background (light)              */
  --paper-2:#ece1d0;    /* raised surfaces / cards              */
  --line:#cdbfa8;       /* borders & hairlines                  */
  --muted:#6b5d4a;      /* secondary text                       */
  --accent:#b4451f;     /* PRIMARY accent (links, rules, emph)  */
  --accent-deep:#8a3214;/* darker primary accent                */
  --gold:#c98a1a;       /* SECONDARY accent (highlights)        */
  --cool:#1f5673;       /* "classic / established" panel hue    */
  --cool-bg:#e7eef2;    /* tint behind cool panel               */
  --warm:#9a3a16;       /* "new / featured" panel hue           */
  --warm-bg:#f3e3d6;    /* tint behind warm panel               */
  --dark:#1a1410;       /* dark callout background              */
  --result:#2f6b3d;     /* code OUTPUT panel hue (results)      */
  --result-bg:#e6efe6;  /* tint behind output panel             */
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb,var(--gold) 14%,transparent), transparent 40%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb,var(--accent) 10%,transparent), transparent 45%),
    var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:inherit;}
.wrap{max-width:1080px;margin:0 auto;padding:48px 28px 90px;}

/* ---- masthead ---- */
.masthead{display:flex;align-items:center;gap:16px;margin-bottom:6px;}
.masthead .mark{font-size:34px;line-height:1;}
.kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;}
h1.display{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(34px,5.5vw,58px);line-height:.98;margin:0 0 10px;letter-spacing:-.02em;}
h1.display em{font-style:italic;color:var(--accent);}
.lede{font-size:clamp(17px,2.2vw,21px);max-width:64ch;color:#33281c;margin:0 0 8px;}
.rule{height:3px;background:linear-gradient(90deg,var(--accent),var(--gold) 60%,transparent);margin:26px 0 10px;border-radius:2px;}

/* ---- breadcrumb ---- */
.crumbs{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;}
.crumbs a{color:var(--accent-deep);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.crumbs .sep{margin:0 8px;opacity:.6;}

/* ---- section ---- */
.section{margin-top:46px;}
.section-label{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:22px;}

/* ---- grade grid (dashboard) ---- */
.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.grade{
  position:relative;display:flex;flex-direction:column;gap:6px;
  background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--line);
  border-radius:10px;padding:16px 18px;text-decoration:none;color:var(--ink);
  box-shadow:0 10px 30px -24px rgba(60,40,20,.6);
  transition:transform .14s, border-color .14s, box-shadow .14s;
}
.grade .g-num{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.grade .g-name{font-family:"Fraunces",serif;font-weight:600;font-size:22px;line-height:1.1;}
.grade .g-tag{font-size:13px;color:var(--muted);}
.grade.ready{border-left-color:var(--accent);}
.grade.ready:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 18px 38px -26px rgba(120,50,20,.7);}
.grade.ready .g-num{color:var(--accent-deep);}
.grade.soon{opacity:.6;cursor:not-allowed;}
.grade .pill{position:absolute;top:12px;right:12px;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.4);color:var(--muted);}
.grade.ready .pill{background:rgba(180,69,31,.12);border-color:rgba(180,69,31,.4);color:var(--accent-deep);}

/* ---- subject cards ---- */
.subj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.subj{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:10px;padding:18px 20px;text-decoration:none;color:var(--ink);box-shadow:0 10px 30px -24px rgba(60,40,20,.6);transition:transform .14s, border-color .14s;}
.subj:hover{transform:translateY(-3px);border-color:var(--gold);}
.subj.soon{opacity:.55;border-left-color:var(--line);pointer-events:none;}
.subj .s-name{font-family:"Fraunces",serif;font-weight:600;font-size:22px;}
.subj .s-tag{font-size:14px;color:var(--muted);}

/* ---- chapter list (course outline) ---- */
.chapters{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.chapter{
  display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-left:5px solid var(--line);
  border-radius:10px;padding:15px 18px;box-shadow:0 10px 30px -26px rgba(60,40,20,.6);
  transition:transform .14s, border-color .14s;
}
.chapter .c-num{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:15px;background:var(--paper);border:1px solid var(--line);color:var(--muted);}
.chapter .c-body{flex:1;min-width:0;}
.chapter .c-title{display:block;font-family:"Fraunces",serif;font-weight:600;font-size:20px;line-height:1.2;}
.chapter .c-sub{display:block;font-size:14px;color:var(--muted);margin-top:3px;line-height:1.4;}
.chapter .badge{flex:none;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.4);color:var(--muted);}

/* per-chapter action buttons (lesson / lab) */
.c-actions{flex:none;display:flex;gap:8px;align-items:center;}
@media(max-width:560px){
  .chapter{flex-wrap:wrap;}
  .c-actions{width:100%;justify-content:flex-end;}
}
.c-btn{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-decoration:none;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--accent-deep);white-space:nowrap;transition:transform .12s, background .12s, border-color .12s;}
.c-btn:hover{transform:translateY(-1px);border-color:var(--accent);background:#fff;}
.c-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.c-btn.primary:hover{background:var(--accent-deep);}
.c-btn.soon{opacity:.5;pointer-events:none;background:transparent;color:var(--muted);}
.chapter.ready{border-left-color:var(--accent);}
.chapter.ready:hover{transform:translateY(-2px);border-color:var(--accent);}
.chapter.ready .c-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.chapter.ready .badge{background:rgba(180,69,31,.12);border-color:rgba(180,69,31,.4);color:var(--accent-deep);}
.chapter.progress{border-left-color:var(--gold);}
.chapter.progress .c-num{background:var(--gold);border-color:var(--gold);color:#2a1c05;}
.chapter.progress .badge{background:rgba(201,138,26,.16);border-color:rgba(201,138,26,.45);color:#7a5210;}
.chapter.soon{opacity:.62;pointer-events:none;}

/* ---- dark payoff banner ---- */
.payoff{background:var(--dark);color:#f4ece0;border-radius:12px;padding:26px 30px;position:relative;overflow:hidden;margin-top:40px;}
.payoff:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 55%);}
.payoff *{position:relative;}
.payoff h3{font-family:"Fraunces",serif;margin:0 0 6px;color:#fff;font-size:24px;font-weight:600;}
.payoff p{margin:0;color:#c9b89c;}

footer{margin-top:60px;border-top:1px solid var(--line);padding-top:18px;font-size:13px;color:var(--muted);font-family:"JetBrains Mono",monospace;}