/* =========================================================================
   OIFC Leadership Readiness Programme — "Confidential Dossier" design system
   Display: Fraunces · Body: Newsreader · Labels/UI: IBM Plex Mono
   ========================================================================= */

:root{
  --ink:#0E2233;        /* primary dark / chrome */
  --ink-2:#16344b;
  --ink-3:#1f4763;
  --paper:#F7F4EC;      /* page */
  --card:#FCFAF3;       /* surfaces */
  --brass:#A8782B;      /* accent (used with restraint) */
  --brass-2:#C79A45;
  --brass-soft:rgba(168,120,43,.12);
  --slate:#52626E;      /* secondary text */
  --slate-2:#76838d;
  --line:rgba(14,34,51,.14);
  --line-soft:rgba(14,34,51,.08);
  --garnet:#7A2B2B;     /* exam / serious */
  --good:#2E6B4F;
  --good-bg:rgba(46,107,79,.10);
  --bad:#9A3535;
  --bad-bg:rgba(154,53,53,.09);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Newsreader",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --rail:300px;
  --maxread:46rem;
  --r:4px;            /* sharp, institutional radii */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  font-family:var(--body);
  font-size:19px;
  line-height:1.72;
  color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14,34,51,.035) 1px, transparent 0);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--brass);text-decoration:none;border-bottom:1px solid var(--brass-soft)}
a:hover{border-bottom-color:var(--brass)}

/* ---------- Layout shell ---------- */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}

/* ---------- Sidebar / syllabus rail ---------- */
.rail{
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  background:var(--ink);color:#dfe7ee;
  border-right:1px solid #08151f;
  padding:0 0 2rem;
}
.rail::-webkit-scrollbar{width:9px}
.rail::-webkit-scrollbar-thumb{background:#24445d;border-radius:9px}

.brand{padding:1.5rem 1.4rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .seal{display:flex;align-items:center;gap:.7rem}
.brand .crest{width:34px;height:34px;flex:none}
.brand h1{
  font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0;color:#fff;line-height:1.35
}
.brand .sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--brass-2);
  text-transform:uppercase;margin-top:.55rem}
.brand .for{font-family:var(--body);font-style:italic;font-size:.92rem;color:#b9c6d1;margin-top:.5rem}

.progresswrap{padding:1.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:.9rem}
.ring{width:48px;height:48px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:rgba(255,255,255,.12)}
.ring .fg{stroke:var(--brass-2);stroke-linecap:round;transition:stroke-dashoffset .6s ease}
.progresswrap .pct{font-family:var(--mono);font-size:1.05rem;color:#fff}
.progresswrap .plabel{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate-2)}

nav.toc{padding:.6rem 0}
.toc .phase{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  color:#cdd8e1;padding:.7rem 1.4rem .55rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}
.toc .phase .num{color:var(--brass-2);font-weight:600}
.toc .phase.locked{color:#5e7384;cursor:not-allowed}
.toc .phase .lock{margin-left:auto;opacity:.6}
.toc .lessons{display:flex;flex-direction:column}
.toc .lesson{background:none;border:0;text-align:left;cursor:pointer;
  color:#aebcc7;font-family:var(--body);font-size:.95rem;line-height:1.3;
  padding:.42rem 1.4rem .42rem 2.7rem;display:flex;gap:.55rem;align-items:flex-start;
  border-left:2px solid transparent}
.toc .lesson:hover{color:#fff;background:rgba(255,255,255,.04)}
.toc .lesson.active{color:#fff;border-left-color:var(--brass-2);background:rgba(199,154,69,.10)}
.toc .lesson .tick{flex:none;width:15px;height:15px;margin-top:.28rem;border-radius:50%;
  border:1.5px solid #44606f;font-size:.6rem;display:grid;place-items:center;color:transparent}
.toc .lesson.done .tick{background:var(--brass-2);border-color:var(--brass-2);color:var(--ink)}
.toc .kind{font-family:var(--mono);font-size:.78rem}
.toc .kind.exam{color:#e0a3a3}

.rail .reset{margin:1rem 1.4rem 0;width:calc(100% - 2.8rem);background:transparent;
  border:1px solid rgba(255,255,255,.14);color:#9fb0bc;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;padding:.55rem;border-radius:var(--r);cursor:pointer}
.rail .reset:hover{border-color:var(--garnet);color:#e7b6b6}

/* ---------- Main column ---------- */
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:5;background:rgba(247,244,236,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:.7rem clamp(1.2rem,4vw,3rem);display:flex;align-items:center;gap:1rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.topbar .confid{color:var(--garnet);border:1px solid rgba(122,43,43,.4);padding:.2rem .5rem;border-radius:var(--r)}
.topbar .crumbs{margin-left:auto;color:var(--slate)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  padding:.35rem .6rem;font-family:var(--mono);cursor:pointer;color:var(--ink)}

.view{padding:clamp(1.8rem,4vw,3.4rem) clamp(1.2rem,5vw,3rem) 6rem;
  max-width:calc(var(--maxread) + 6rem);margin:0 auto}

/* ---------- Typography ---------- */
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .8rem}
h1.title{font-family:var(--display);font-weight:540;font-size:clamp(2rem,4.4vw,3rem);
  line-height:1.08;letter-spacing:-.01em;margin:.2rem 0 1rem;font-optical-sizing:auto}
h2.lh{font-family:var(--display);font-weight:560;font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.12;margin:.3rem 0 .9rem}
.view h3{font-family:var(--display);font-weight:600;font-size:1.32rem;margin:2.2rem 0 .5rem;line-height:1.2}
.view h4{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);margin:1.8rem 0 .4rem}
.view p{margin:0 0 1.05rem}
.lede{font-size:1.22rem;line-height:1.6;color:var(--ink-2)}
.view ul,.view ol{margin:0 0 1.1rem;padding-left:1.3rem}
.view li{margin:.35rem 0}
.view strong{font-weight:640}
.view em{color:var(--ink-2)}
hr.rule{border:0;border-top:1px solid var(--line);margin:2.4rem 0}

/* ---------- Components ---------- */
.dossier{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brass);
  border-radius:var(--r);padding:1.1rem 1.3rem;margin:1.5rem 0;box-shadow:0 1px 0 rgba(14,34,51,.03)}
.dossier .h{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem}
.dossier.angle{border-left-color:var(--ink-3)}
.dossier.angle .h{color:var(--ink-3)}
.dossier.warn{border-left-color:var(--garnet);background:rgba(122,43,43,.04)}
.dossier.warn .h{color:var(--garnet)}
.dossier p:last-child,.dossier ul:last-child{margin-bottom:0}

.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:1.6rem 0}
.factgrid .cell{background:var(--card);padding:1rem 1.1rem}
.factgrid .big{font-family:var(--display);font-size:1.7rem;line-height:1;color:var(--ink);font-weight:560}
.factgrid .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin-top:.45rem;line-height:1.3}

figure.diagram{margin:1.8rem 0;text-align:center}
figure.diagram svg{max-width:100%;height:auto}
figure.diagram figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:var(--slate);margin-top:.6rem;text-transform:uppercase}

table.data{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.96rem}
table.data th,table.data td{border:1px solid var(--line);padding:.6rem .75rem;text-align:left;vertical-align:top}
table.data th{background:var(--ink);color:#fff;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500}
table.data tr:nth-child(even) td{background:rgba(14,34,51,.025)}

.peoplecard{display:flex;gap:1rem;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;margin:.8rem 0}
.peoplecard .avatar{width:46px;height:46px;flex:none;border-radius:50%;background:var(--ink);
  color:var(--brass-2);display:grid;place-items:center;font-family:var(--display);font-size:1.1rem}
.peoplecard .nm{font-family:var(--display);font-size:1.12rem;font-weight:560;line-height:1.1}
.peoplecard .rl{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass);margin:.25rem 0 .4rem}
.peoplecard p{font-size:.95rem;margin:0;color:var(--slate)}

/* ---------- Hero (home) ---------- */
.hero{padding:clamp(2.5rem,7vw,5rem) 0 1rem}
.hero .kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--brass)}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1.02;letter-spacing:-.015em;margin:1rem 0}
.hero .stripe{height:3px;width:90px;background:var(--brass);margin:1.4rem 0}
.phasecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:2.4rem 0}
.pcard{display:block;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:1.3rem;cursor:pointer;transition:transform .15s,box-shadow .15s;color:inherit;position:relative}
.pcard:hover{transform:translateY(-3px);box-shadow:0 10px 30px -12px rgba(14,34,51,.35);border-bottom:1px solid var(--line)}
.pcard .pn{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--brass);text-transform:uppercase}
.pcard h3{font-family:var(--display);font-size:1.3rem;font-weight:560;margin:.5rem 0 .4rem;line-height:1.12}
.pcard p{font-size:.92rem;color:var(--slate);margin:0}
.pcard .status{margin-top:.9rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate-2)}
.pcard.done .status{color:var(--good)}
.pcard.locked{opacity:.55}

/* ---------- Buttons / nav ---------- */
.btnrow{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.4rem;align-items:center}
.btn{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.8rem 1.4rem;border-radius:var(--r);cursor:pointer;border:1px solid var(--ink);
  background:var(--ink);color:#fff;transition:.15s}
.btn:hover{background:var(--ink-2)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:rgba(14,34,51,.05)}
.btn.brass{background:var(--brass);border-color:var(--brass)}
.btn.brass:hover{background:#946a24}
.btn:disabled{opacity:.4;cursor:not-allowed}
.spacer{flex:1}

/* ---------- Quiz / Exam ---------- */
.examhead{background:var(--ink);color:#fff;border-radius:var(--r);padding:1.4rem 1.6rem;margin-bottom:2rem}
.examhead.garnet{background:var(--garnet)}
.examhead .eyebrow{color:var(--brass-2)}
.examhead h1{color:#fff;margin:.3rem 0 .4rem;font-family:var(--display);font-weight:540;font-size:1.9rem}
.examhead p{margin:0;color:#cfdae3;font-size:1rem}

.q{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;margin:1rem 0}
.q .qn{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:var(--brass);text-transform:uppercase}
.q .qt{font-family:var(--body);font-size:1.1rem;line-height:1.4;margin:.4rem 0 .9rem;font-weight:500}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:.7rem .9rem;margin:.45rem 0;cursor:pointer;font-family:var(--body);
  font-size:1rem;line-height:1.4;transition:.12s;color:var(--ink)}
.opt:hover{border-color:var(--brass);background:var(--brass-soft)}
.opt.sel{border-color:var(--ink);background:rgba(14,34,51,.05)}
.opt.correct{border-color:var(--good);background:var(--good-bg)}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg)}
.opt .mk{font-family:var(--mono);font-size:.8rem;color:var(--brass);margin-right:.6rem}
.explain{margin-top:.7rem;padding:.7rem .9rem;border-left:3px solid var(--good);
  background:var(--good-bg);border-radius:0 var(--r) var(--r) 0;font-size:.95rem;display:none}
.explain.show{display:block}
.explain .lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--good)}

.scoreboard{text-align:center;padding:2.5rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:1.5rem 0}
.scoreboard .pct{font-family:var(--display);font-size:4rem;line-height:1;color:var(--ink)}
.scoreboard.pass .pct{color:var(--good)}
.scoreboard.fail .pct{color:var(--bad)}
.scoreboard .verdict{font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;margin-top:.6rem;font-size:.8rem}

/* ---------- Mock interview ---------- */
.mock{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:1rem 0;overflow:hidden}
.mock .ask{padding:1.1rem 1.3rem;cursor:pointer;display:flex;gap:.8rem;align-items:flex-start}
.mock .ask .who{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--ink-3);padding:.2rem .5rem;border-radius:var(--r);flex:none;margin-top:.2rem}
.mock .ask .qq{font-family:var(--body);font-size:1.08rem;font-weight:500;line-height:1.4}
.mock .ans{padding:0 1.3rem;max-height:0;overflow:hidden;transition:max-height .3s ease;
  background:rgba(14,34,51,.02);border-top:1px solid transparent}
.mock.open .ans{max-height:1200px;padding:1.1rem 1.3rem;border-top:1px solid var(--line)}
.mock .ans .lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:.4rem}
.mock .ans p{font-size:1rem;margin:0 0 .7rem}

/* ---------- Resources ---------- */
.reslist{display:grid;gap:.7rem;margin:1.5rem 0}
.resitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem}
.resitem .rt{font-family:var(--display);font-size:1.1rem;font-weight:560}
.resitem .rm{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:.2rem 0}
.resitem p{font-size:.93rem;color:var(--slate);margin:.3rem 0 0}

/* ---------- Certificate ---------- */
.cert{border:3px double var(--brass);background:
  linear-gradient(0deg,rgba(168,120,43,.04),rgba(168,120,43,.04)),var(--card);
  padding:3rem 2rem;text-align:center;border-radius:var(--r);margin:2rem 0}
.cert .seal{width:64px;height:64px;margin:0 auto 1rem}
.cert .ttl{font-family:var(--display);font-size:2rem;font-weight:540}
.cert .nm{font-family:var(--display);font-size:1.6rem;color:var(--brass);margin:1rem 0}
.cert .meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}

/* ---------- Mobile ---------- */
.scrim{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;z-index:30;width:84%;max-width:340px;transform:translateX(-100%);transition:transform .25s}
  .app.open .rail{transform:none}
  .app.open .scrim{display:block;position:fixed;inset:0;background:rgba(14,34,51,.45);z-index:20}
  .menu-btn{display:inline-block}
  body{font-size:18px}
}
@media print{
  .rail,.topbar,.btnrow,.menu-btn{display:none!important}
  .app{display:block}.view{max-width:none}
  body{background:#fff;font-size:12pt}
}