/* ============================================================
   Class XII Business Studies (CBSE 054) — Presentation Deck
   Shared stylesheet · Solarized Light
   Derived from ../../microeconomics/assets/deck.css, then adapted.
   This file is OURS. Never edit another subject's stylesheet, and
   never assume a fix made there has reached this one.
   ============================================================ */

:root {
  /* Solarized base tones */
  --bg:        #fdf6e3;  /* base3  — page */
  --bg-2:      #f7f0dd;  /* between base3 and base2 */
  --panel:     #eee8d5;  /* base2  — cards, boxes */
  --panel-2:   #e4dcc4;  /* deeper panel, table heads */
  --line:      #d9d0b6;  /* borders */
  --ink:       #52666d;  /* base01 — body text */
  --ink-strong:#073642;  /* base02 — headings, emphasis */
  --ink-dim:   #556a71;  /* base00 — secondary text */
  --ink-faint: #5b6966;  /* base1  — captions, axes */

  /* Solarized accents */
  --amber:  #a17a00;  /* yellow  — highlight, optimum, key point */
  --teal:   #748500;  /* green   — examples, answers */
  --blue:   #1f7ab8;  /* blue    — definitions, demand */
  --rose:   #c62b28;  /* red     — warnings, loss, excess */
  --violet: #6c71c4;  /* violet  — insight, shifted curves */
  --cyan:   #238b84;  /* cyan    — forward/back links to other chapters */

  /* text tier — darker, for labels and tags (WCAG AA on panel) */
  --amber-t:  #755900;
  --teal-t:   #586600;
  --blue-t:   #175f90;
  --rose-t:   #b02522;
  --violet-t: #5055a0;
  --cyan-t:   #196b65;

  /* Axis grey. Not a Solarized accent — it is the one neutral that has to
     read as a *rule* rather than as ink, on both --bg and --panel. Rarely
     needed in this subject (Business Studies has structures, not curves). */
  --axis: #75837f;

  --radius: 14px;
  --maxw: 1240px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 1.28vw, 23px);
  line-height: 1.55;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */
#bar {
  position: fixed; top: 0; left: 0; right: 0; height: 52px;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.2rem;
  background: rgba(253,246,227,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  z-index: 50;
}
#bar .brand {
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  color: var(--amber-t); white-space: nowrap;
}
#bar .sect {
  font-size: 13px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
#bar .sect::before { content: "› "; color: var(--ink-faint); }
#bar .tools { display: flex; align-items: center; gap: .45rem; }
#bar button {
  background: var(--panel); color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .32rem .6rem; font-size: 12px; cursor: pointer;
  font-family: inherit;
}
#bar button:hover { background: var(--panel-2); color: var(--ink-strong); }
#counter {
  font-variant-numeric: tabular-nums; font-size: 13px;
  color: var(--ink-dim); white-space: nowrap;
}

#progress {
  position: fixed; top: 52px; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--amber), var(--teal));
  z-index: 51; transition: width .25s ease;
}

/* ---------- Slide area ---------- */
#stage {
  position: fixed; top: 55px; bottom: 0; left: 0; right: 0;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
}

.slide {
  display: none;
  min-height: 100%;
  padding: 30px 46px 60px;
  max-width: var(--maxw);
  margin: 0 auto;
  animation: fade .28s ease;
}
.slide.on { display: flex; flex-direction: column; justify-content: center; }

@keyframes fade { from { opacity: 0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ---------- Typography ---------- */
h1 {
  font-size: clamp(2.3rem, 3.9vw, 3.05rem); line-height: 1.12;
  margin: 0 0 .6rem; font-weight: 750; letter-spacing: -.02em;
  color: var(--ink-strong);
}
h2 {
  font-size: clamp(1.65rem, 2.7vw, 2.12rem); line-height: 1.2;
  margin: 0 0 1.1rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--ink-strong);
}
h2 .num {
  display: inline-block; font-size: .5em; font-weight: 700;
  color: var(--bg); background: var(--amber-t);
  border-radius: 6px; padding: .12em .5em; vertical-align: middle;
  margin-right: .6rem; letter-spacing: .04em;
}
h3 {
  font-size: 1.10rem; margin: 1.3rem 0 .5rem; font-weight: 700;
  color: var(--amber-t); letter-spacing: .01em;
}
p { margin: 0 0 .75rem; }
ul, ol { margin: .2rem 0 .8rem; padding-left: 1.35rem; }
li { margin: .3rem 0; }
b, strong { color: var(--ink-strong); font-weight: 650; }
em { color: var(--amber-t); font-style: normal; font-weight: 650; }
code, .mono {
  font-family: "SF Mono", "Cascadia Code", Consolas, monospace;
  font-size: .93em; background: rgba(38,139,210,.10);
  padding: .1em .38em; border-radius: 5px; color: var(--blue-t);
}
.lead { font-size: 1.15em; color: var(--ink-dim); }
.small { font-size: .88em; color: var(--ink-dim); }
.center { text-align: center; }

/* ---------- Title slide ---------- */
.title-slide { text-align: center; align-items: center; }
.title-slide .kicker {
  font-size: .9rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber-t); font-weight: 700; margin-bottom: 1rem;
}
.title-slide .sub { font-size: 1.2rem; color: var(--ink-dim); max-width: 44rem; margin: .4rem auto 0; }
.title-slide .rule {
  width: 90px; height: 4px; border-radius: 2px; margin: 1.6rem auto;
  background: linear-gradient(90deg, var(--amber), var(--rose));
}
/* The "→ next chapter" link on a closing title slide. A class, not an inline
   style: the rule against hard-coded colours applies to chapter files too. */
.nextlink {
  display: inline-block; margin-top: 1.6rem;
  color: var(--amber-t); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(181,137,0,.35); padding-bottom: .1rem;
  transition: border-color .15s ease;
}
.nextlink:hover { border-bottom-color: var(--amber); }
/* The "what the next chapter will re-use from this one" note that closes a
   deck. A class, not an inline margin, so no chapter file styles itself. */
.title-slide .small { margin-top: 1.6rem; }

/* ---------- Content boxes ---------- */
.box {
  border-radius: var(--radius);
  padding: 1.05rem 1.3rem;
  margin: .85rem 0;
  border-left: 5px solid var(--line);
  background: var(--panel);
}
.box .tag {
  display: block; font-size: .7rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .45rem; color: var(--ink-faint);
}
.box p:last-child, .box ul:last-child, .box ol:last-child { margin-bottom: 0; }

.defn   { border-left-color: var(--blue);   background: linear-gradient(90deg, rgba(38,139,210,.12), var(--panel) 60%); }
.defn   .tag { color: var(--blue-t); }
.defn   .term { color: var(--ink-strong); font-weight: 750; }

.eg     { border-left-color: var(--teal);   background: linear-gradient(90deg, rgba(133,153,0,.14), var(--panel) 60%); }
.eg     .tag { color: var(--teal-t); }

.insight{ border-left-color: var(--violet); background: linear-gradient(90deg, rgba(108,113,196,.13), var(--panel) 60%); }
.insight .tag { color: var(--violet-t); }

.warn   { border-left-color: var(--rose);   background: linear-gradient(90deg, rgba(220,50,47,.10), var(--panel) 60%); }
.warn   .tag { color: var(--rose-t); }

.bridge { border-left-color: var(--cyan);   background: linear-gradient(90deg, rgba(42,161,152,.13), var(--panel) 60%); }
.bridge .tag { color: var(--cyan-t); }

.note   { border-left-color: var(--ink-faint); }

/* ---------- Question / Answer machinery ---------- */
.qcard {
  border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: .7rem 0;
  background: linear-gradient(90deg, rgba(181,137,0,.15), var(--panel) 65%);
  border-left: 5px solid var(--amber);
}
.qcard .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber-t); margin-bottom: .45rem;
}
.qcard p:last-child, .qcard ol:last-child, .qcard ul:last-child { margin-bottom: 0; }

.ready {
  text-align: center; padding: 1.1rem; margin: 1.1rem 0;
  font-size: 1.35rem; font-weight: 700; color: var(--amber-t);
  border: 2px dashed rgba(181,137,0,.55); border-radius: var(--radius);
  background: rgba(181,137,0,.08);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.72} 50%{opacity:1} }

.answer {
  border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: .7rem 0;
  background: linear-gradient(90deg, rgba(133,153,0,.18), var(--panel) 65%);
  border-left: 5px solid var(--teal);
}
.answer .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-t); margin-bottom: .45rem;
}
.answer p:last-child, .answer ul:last-child, .answer ol:last-child { margin-bottom: 0; }

/* Challenge question — one per section, deeper than the routine checks */
.challenge {
  border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: .7rem 0;
  background: linear-gradient(90deg, rgba(108,113,196,.16), var(--panel) 65%);
  border-left: 5px solid var(--violet);
}
.challenge .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet-t); margin-bottom: .45rem;
}
.challenge .tag::before { content: "★ "; }
.challenge p:last-child, .challenge ol:last-child, .challenge ul:last-child { margin-bottom: 0; }

.reveal { display: none; }
.reveal.shown { display: block; animation: fade .3s ease; }

/* ============================================================
   BUSINESS STUDIES ADDITIONS
   Roughly 60% of the CBSE 054 paper is application and analysis,
   and it is marked on structure and keywords rather than prose.
   Everything below exists to teach that form as deliberately as
   the content. Documented in DESIGN.md §5.
   ============================================================ */

/* ---------- Mark weight ---------- */
/* Students must learn to size an answer, so every question carries
   its weight in its own tag:  <span class="tag">Question 3 <span
   class="mk">4 marks</span></span>. Deliberately not a colour of its
   own — it inherits the tag's hue so it reads as part of the label. */
.tag .mk {
  display: inline-block; margin-left: .5em;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0 .55em; font-size: .95em; letter-spacing: .08em;
  opacity: .82;
}

/* ---------- The keyword IS the mark ---------- */
/* Where the examiner is hunting for one specific term — esprit de
   corps, functional foremanship, trading on equity — that word is
   wrapped in .kw so the class can see exactly what earns the mark. */
.kw {
  background: rgba(181,137,0,.20); color: var(--amber-t);
  font-weight: 700; border-radius: 5px; padding: .04em .34em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.answer .kw { background: rgba(181,137,0,.24); }

/* ---------- Point-wise answers ---------- */
/* A BST answer is never a paragraph. Bolded heading, then one or two
   lines of explanation. Points ≈ marks. The heading is what the
   examiner's eye lands on, so it gets its own line-start weight. */
.points { list-style: none; counter-reset: pt; padding-left: 0; margin: .4rem 0 .2rem; }
.points > li {
  counter-increment: pt; position: relative;
  padding-left: 1.9rem; margin: .55rem 0;
}
.points > li::before {
  content: counter(pt); position: absolute; left: 0; top: .18em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: rgba(133,153,0,.28); color: var(--teal-t);
  font-weight: 800; font-size: .72rem;
  display: flex; align-items: center; justify-content: center;
}
.points > li > b:first-child,
.points > li > .h {
  color: var(--ink-strong); font-weight: 700;
}
.points > li > .h::after { content: " — "; font-weight: 400; color: var(--ink-faint); }
/* inside an amber/violet box the numerals pick up that box's hue */
.qcard .points > li::before,
.challenge .points > li::before { background: rgba(181,137,0,.26); color: var(--amber-t); }
.defn .points > li::before { background: rgba(38,139,210,.20); color: var(--blue-t); }

/* ---------- Case study ---------- */
/* Every concept gets a named firm, a named person and a concrete
   decision on the slide where it is introduced. Green, like every
   other example, but ruled on BOTH sides so it reads as a quoted
   situation rather than as the teacher talking. */
.case {
  border-radius: var(--radius); padding: 1rem 1.3rem; margin: .8rem 0;
  background: linear-gradient(90deg, rgba(133,153,0,.13), var(--panel) 55%);
  border-left: 5px solid var(--teal);
  border-right: 1px solid var(--line);
}
.case .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-t); margin-bottom: .45rem;
}
.case .tag::before { content: "▸ "; }
.case p:last-child, .case ul:last-child { margin-bottom: 0; }
.case .who { color: var(--ink-strong); font-weight: 650; }

/* The line that proves it. Step 5 of the five-step drill is where
   marks are actually won, and it is the step students skip — so the
   proving sentence is highlighted inside the case text itself. */
mark.ev {
  background: rgba(181,137,0,.30); color: var(--ink-strong);
  padding: .06em .2em; border-radius: 4px; font-weight: 600;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* …and re-quoted inside the answer, so the two are visibly the same line. */
.evidence {
  margin: .7rem 0 0; padding: .6rem .9rem;
  border-left: 4px solid var(--amber); border-radius: 0 8px 8px 0;
  background: rgba(181,137,0,.12); color: var(--ink-strong);
  font-size: .95em;
}
.evidence::before {
  content: "The line that proves it";
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber-t); margin-bottom: .3rem;
}

/* Run the drill in reverse: give the concept, ask the class to WRITE
   a case for it. A student who can construct the situation can always
   recognise it; the reverse is not true. */
.reverse {
  border-radius: var(--radius); padding: 1rem 1.3rem; margin: .8rem 0;
  background: linear-gradient(90deg, rgba(42,161,152,.14), var(--panel) 60%);
  border-left: 5px solid var(--cyan);
}
.reverse .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan-t); margin-bottom: .45rem;
}
.reverse .tag::before { content: "⇄ "; }
.reverse p:last-child, .reverse ul:last-child { margin-bottom: 0; }

/* ---------- Mnemonic ---------- */
/* Make the list memorable, but never let the hook replace the
   explanation — so the mnemonic is a strip, not a box, and it is
   always followed by the real teaching. */
.mnemonic {
  display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap;
  margin: .8rem 0; padding: .6rem 1.1rem;
  border: 1px dashed rgba(108,113,196,.55); border-radius: var(--radius);
  background: rgba(108,113,196,.08);
}
.mnemonic .tag {
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet-t); white-space: nowrap;
}
.mnemonic .hook {
  font-size: 1.12em; font-weight: 700; color: var(--ink-strong); letter-spacing: .01em;
}
.mnemonic .hook b { color: var(--violet-t); }

/* ---------- Layout helpers ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; align-items: start; }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.6rem; align-items: center; }
@media (max-width: 900px) {
  .grid2, .grid3, .split { grid-template-columns: 1fr; }
  .slide { padding: 20px 16px 56px; }
}

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .95rem 1.1rem;
}
.card h4 {
  margin: 0 0 .4rem; font-size: 1rem; color: var(--amber-t); font-weight: 700;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* ---------- Tables ---------- */
table {
  border-collapse: collapse; width: 100%; margin: .8rem 0;
  font-variant-numeric: tabular-nums; font-size: .95em;
}
th, td {
  border: 1px solid var(--line); padding: .45rem .7rem; text-align: center;
}
th {
  background: var(--panel-2); color: var(--amber-t);
  font-weight: 700; font-size: .85em; letter-spacing: .03em;
}
td { background: rgba(238,232,213,.6); }
tr:hover td { background: rgba(228,220,196,.85); }
td.lbl, th.lbl { text-align: left; }
.hi  { background: rgba(181,137,0,.22) !important; color: var(--ink-strong); font-weight: 650; }
.hi2 { background: rgba(133,153,0,.22) !important; color: var(--ink-strong); font-weight: 650; }
caption { caption-side: bottom; font-size: .82em; color: var(--ink-faint); padding-top: .5rem; }

/* ---------- "Distinguish between" table ---------- */
/* A "distinguish between" answer is a TABLE, not two paragraphs, and
   the basis column must be NAMED — Meaning, Scope, Authority, Cost,
   Suitability. A student who writes two paragraphs with no basis
   column loses most of the marks even when the content is right.
   So the basis column is styled to dominate: it is the thing being
   examined.

   <table class="distinguish">
     <caption>…</caption>
     <thead><tr><th class="basis">Basis</th><th>Delegation</th><th>Decentralisation</th></tr></thead>
     <tbody><tr><th class="basis">Meaning</th><td>…</td><td>…</td></tr></tbody>
   </table>                                                            */
.distinguish { font-variant-numeric: normal; }
.distinguish td { text-align: left; vertical-align: top; line-height: 1.45; }
.distinguish thead th { text-align: left; }
.distinguish thead th:first-child { width: 8.5rem; }
.distinguish th.basis {
  background: var(--panel-2); color: var(--amber-t);
  text-align: left; font-weight: 700; font-size: .92em;
  letter-spacing: .01em; white-space: nowrap;
}
.distinguish tbody th.basis { border-left: 4px solid var(--amber); }
/* The two sides of the comparison, tinted so the eye can track a
   column across four rows without re-reading the header. */
.distinguish tbody td:nth-of-type(1) { background: rgba(38,139,210,.08); }
.distinguish tbody td:nth-of-type(2) { background: rgba(220,50,47,.07); }
.distinguish tbody td:nth-of-type(3) { background: rgba(133,153,0,.09); }
/* A fourth column, for the rare four-way comparison — induction /
   vestibule / apprenticeship / internship in Chapter 6. Violet, so the
   four columns read blue · rose · green · violet and none is left bare. */
.distinguish tbody td:nth-of-type(4) { background: rgba(108,113,196,.09); }
.distinguish tr:hover td { filter: brightness(.985); }
@media (max-width: 700px) {
  .distinguish, .distinguish tbody, .distinguish tr, .distinguish td, .distinguish th { display: block; width: auto; }
  .distinguish thead { display: none; }
  .distinguish tbody tr { margin-bottom: .7rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  .distinguish thead th:first-child { width: auto; }
}

/* ---------- Formula ---------- */
.formula {
  text-align: center; font-size: 1.3rem; padding: 1rem 1.2rem; margin: .9rem 0;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink-strong); letter-spacing: .01em;
}
.formula .frac {
  display: inline-flex; flex-direction: column; vertical-align: middle;
  text-align: center; margin: 0 .35rem; font-size: .78em;
}
.formula .frac > span:first-child { border-bottom: 2px solid var(--ink-dim); padding: 0 .5rem .12rem; }
.formula .frac > span:last-child { padding: .12rem .5rem 0; }

/* ---------- Steps ---------- */
.steps { counter-reset: s; list-style: none; padding-left: 0; }
.steps > li {
  counter-increment: s; position: relative; padding-left: 2.5rem; margin: .7rem 0;
}
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: .05em;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--amber-t); color: var(--bg);
  font-weight: 800; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Diagrams ---------- */
figure { margin: .8rem 0; text-align: center; }
figure svg { max-width: 100%; height: auto; }
figcaption { font-size: .84em; color: var(--ink-faint); margin-top: .45rem; }

/* Diagram + "how to read it" panel side by side. The graph keeps the room's
   attention; the panel tells a student what to actually look at. Collapses to
   one column on a narrow screen so the graph never gets squeezed. */
.figrow { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1.4rem; align-items: center; }
.figrow > figure { margin: .2rem 0; min-width: 0; }
/* Tall two-panel diagrams would otherwise push the slide into a scrollbar. */
.figrow > figure svg { max-height: 66vh; }
/* …and smaller still when a table or box follows the row on the same slide. */
.figrow.compact > figure svg { max-height: 44vh; }
.readfig {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  background: var(--panel); border-radius: 6px; padding: .7rem .9rem;
  text-align: left; font-size: .92em;
}
.readfig .tag {
  display: block; font-size: .72em; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 800; color: var(--blue-t); margin-bottom: .35rem;
}
.readfig ol, .readfig ul { margin: 0; padding-left: 1.1rem; }
.readfig li { margin: .3rem 0; line-height: 1.45; }
.readfig p { margin: .3rem 0; line-height: 1.45; }
@media (max-width: 1000px) { .figrow { grid-template-columns: 1fr; } }
.axis  { stroke: var(--axis); stroke-width: 2; }
.grid  { stroke: var(--panel-2); stroke-width: 1; }
.curve { fill: none; stroke-width: 3; stroke-linecap: round; }
.c-amber { stroke: var(--amber); } .c-teal { stroke: var(--teal); }
.c-blue  { stroke: var(--blue); }  .c-rose { stroke: var(--rose); }
.c-violet{ stroke: var(--violet);} .c-cyan { stroke: var(--cyan); }
.dash { stroke-dasharray: 6 5; stroke-width: 2; fill: none; }
svg text { fill: var(--ink-dim); font-size: 15px; font-family: inherit; }
svg text.lab { fill: var(--ink-strong); font-weight: 700; font-size: 16px; }
svg .pt { fill: var(--amber); stroke: var(--bg); stroke-width: 2; }

/* ---------- Structure diagrams (Business Studies) ---------- */
/* This subject has no curves, but a great deal of it is *shape* — a
   process is a sequence, an organisation is a tree, a market has
   tiers. A slide that bullet-lists a process that has an order has
   thrown away the thing the student needed to see. These classes are
   the vocabulary for hand-drawn inline SVG: a box, a link and a
   numbered step, in the six semantic hues.

   Semantic hues inside a diagram (see DESIGN.md §2):
   blue = definitions and structures · green = examples and cases ·
   amber = the key node / the answer · rose = warnings and traps ·
   violet = insight · cyan = a link to another chapter.            */
svg .node {
  fill: var(--panel); stroke: var(--line); stroke-width: 1.5;
}
svg .n-blue   { fill: rgba(38,139,210,.14);  stroke: var(--blue);   stroke-width: 2; }
svg .n-teal   { fill: rgba(133,153,0,.16);   stroke: var(--teal);   stroke-width: 2; }
svg .n-amber  { fill: rgba(181,137,0,.18);   stroke: var(--amber);  stroke-width: 2; }
svg .n-rose   { fill: rgba(220,50,47,.12);   stroke: var(--rose);   stroke-width: 2; }
svg .n-violet { fill: rgba(108,113,196,.15); stroke: var(--violet); stroke-width: 2; }
svg .n-cyan   { fill: rgba(42,161,152,.15);  stroke: var(--cyan);   stroke-width: 2; }
/* the node the whole diagram is about — heavier stroke, not a new hue */
svg .n-key { stroke-width: 3; }

/* Connectors. .link is the ordinary arrow; .link.dash is an informal,
   implied or feedback relationship and must be explained in the
   "how to read this" panel wherever it appears. */
svg .link { stroke: var(--ink-faint); stroke-width: 2; fill: none; }
svg .link.dash { stroke-dasharray: 6 5; }
svg .link.thick { stroke-width: 3; }
svg .l-amber { stroke: var(--amber); } svg .l-rose { stroke: var(--rose); }
svg .l-cyan  { stroke: var(--cyan); }  svg .l-blue { stroke: var(--blue); }
svg .l-teal  { stroke: var(--teal); }  svg .l-violet { stroke: var(--violet); }

/* Step numerals: an amber disc with the numeral knocked out of it,
   matching the .steps list so a diagram and its prose agree. */
svg .numdot { fill: var(--amber-t); }
svg text.numlab {
  fill: var(--bg); font-weight: 800; font-size: 13px;
  text-anchor: middle; dominant-baseline: central;
}
/* Text inside a node. Nodes are centred boxes, so centre by default. */
svg text.nlab {
  fill: var(--ink-strong); font-weight: 700; font-size: 14px;
  text-anchor: middle;
}
svg text.nsub {
  fill: var(--ink-dim); font-size: 12px; text-anchor: middle;
}
/* A band label down the side of a tier diagram (redressal machinery,
   levels of management, Maslow's pyramid). */
svg text.tier {
  fill: var(--amber-t); font-weight: 800; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Information button ---------- */
/* Sized in rem, never em: the button is the same small disc whether it sits in
   an h2, a table cell or a .small caption. Sized from the root, so it still
   scales with the projector. Raised like a trademark mark so it rides above
   the top-right of the word instead of shouldering the line apart. */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: .95rem; height: .95rem; margin: 0 .08em 0 .18em; padding: 0;
  border-radius: 50%; border: 1px solid var(--blue);
  background: rgba(38,139,210,.12); color: var(--blue-t);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: .68rem; line-height: 1;
  cursor: pointer;
  /* Raised in the button's OWN em, not the parent's — `vertical-align: super`
     would scale the lift with the heading and reintroduce the inconsistency. */
  vertical-align: baseline; position: relative; top: -.3em;
  transition: background .15s ease, color .15s ease;
}
.info:hover,
.info[aria-expanded="true"] { background: var(--blue); color: var(--bg); }
.info:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.infopanel {
  display: none;
  margin: .9rem 0 .2rem; padding: 1rem 1.25rem;
  border-radius: var(--radius); border-left: 5px solid var(--blue);
  background: linear-gradient(90deg, rgba(38,139,210,.14), var(--panel-2) 70%);
  font-size: .95em;
}
.infopanel.open { display: block; animation: fade .25s ease; }
.infopanel .tag {
  display: block; font-size: .7rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-t); margin-bottom: .5rem;
}
.infopanel p:last-child, .infopanel ul:last-child { margin-bottom: 0; }
.infopanel .q {
  border-left: 3px solid var(--line); padding-left: .9rem; margin: .6rem 0;
  color: var(--ink-dim);
}

/* ---------- Recap chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.chip {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .9rem; font-size: .88rem; color: var(--ink);
}
.chip.k { border-color: rgba(181,137,0,.55); color: var(--amber-t); background: rgba(181,137,0,.09); }

/* ---------- Menu overlay ---------- */
#menu {
  position: fixed; inset: 0; background: rgba(253,246,227,.98);
  z-index: 100; display: none; overflow-y: auto; padding: 3.5rem 2rem;
}
#menu.on { display: block; }
#menu h3 { margin-top: 0; text-align: center; color: var(--ink-strong); font-size: 22px; }
#menu .mlist { max-width: 780px; margin: 1.5rem auto; }
#menu .mgroup {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-t); font-weight: 800; margin: 1.4rem 0 .5rem;
  border-bottom: 1px solid var(--line); padding-bottom: .35rem;
}
#menu a {
  display: flex; gap: .8rem; padding: .45rem .7rem; border-radius: 8px;
  color: var(--ink-dim); text-decoration: none; font-size: 15px;
}
#menu a:hover { background: var(--panel); color: var(--ink-strong); }
#menu a .n { color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 2.4rem; }
#menu .hint { text-align: center; color: var(--ink-faint); font-size: 13px; }

/* ---------- Nav arrows ---------- */
.nav {
  position: fixed; bottom: 1.1rem; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); cursor: pointer;
  font-size: 20px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(88,110,117,.12);
}
.nav:hover { background: var(--amber); color: var(--bg); border-color: var(--amber); }
#prev { right: 4.6rem; } #next { right: 1.1rem; }
.nav:disabled { opacity: .35; cursor: default; }
.nav:disabled:hover { background: var(--panel); color: var(--ink); border-color: var(--line); }

/* ---------- Home page (index) ---------- */
.home { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
.home h1 { text-align: center; }
.home .sub { text-align: center; color: var(--ink-dim); font-size: 1.15rem; margin-bottom: 2.5rem; }

/* ---------- Book cards (course home) ---------- */
/* The CBSE course is published as two physical books and examined as
   two parts with separate mark weights, so the course home offers the
   two books first and each book page carries its own chapter list. */
.books { display: grid; gap: 1.2rem; margin-bottom: 2.2rem; }
.books a {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius); padding: 1.4rem 1.6rem;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.books a:hover, .books a:focus-visible {
  transform: translateX(5px); box-shadow: 0 3px 14px rgba(7,54,66,.12);
}
.books a.b2 { border-left-color: var(--teal); }
.books .pn {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-t); font-weight: 800;
}
.books a.b2 .pn { color: var(--teal-t); }
.books .pt { font-size: 1.5rem; font-weight: 700; color: var(--ink-strong); margin: .2rem 0 .4rem; }
.books .pd { color: var(--ink-dim); font-size: .95rem; margin: 0; }
.books .pmeta { color: var(--ink-faint); font-size: .82rem; margin-top: .6rem; }
.books .pmeta b { color: var(--amber-t); }

/* A quiet way back up the hierarchy from a book page to the course
   home, and from the course home to the repository landing page. */
.crumb { margin: 0 0 1.4rem; font-size: .88rem; color: var(--ink-faint); text-align: center; }
.crumb a { color: var(--cyan-t); text-decoration: none; border-bottom: 1px solid rgba(42,161,152,.4); }
.crumb a:hover { color: var(--ink-strong); border-bottom-color: var(--ink-strong); }
.crumb .sep { margin: 0 .5rem; opacity: .6; }

.chapters { display: grid; gap: 1rem; }
.chapters a {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 5px solid var(--amber);
  border-radius: var(--radius); padding: 1.2rem 1.4rem;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.chapters a:hover {
  transform: translateX(5px); border-color: var(--amber);
  box-shadow: 0 2px 8px rgba(88,110,117,.10);
}
.chapters a.soon { border-left-color: var(--line); opacity: .55; }
.chapters .cn {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-t); font-weight: 800;
}
.chapters .ct { font-size: 1.35rem; font-weight: 700; color: var(--ink-strong); margin: .2rem 0 .35rem; }
.chapters .cd { color: var(--ink-dim); font-size: .95rem; margin: 0; }
.chapters .cmeta { color: var(--ink-faint); font-size: .82rem; margin-top: .5rem; }
/* Part B chapter cards carry the green accent of the second book, so a
   student can tell which half of the paper a chapter belongs to at a
   glance — the two parts are examined for 50 and 30 marks separately. */
.chapters.p2 a { border-left-color: var(--teal); }
.chapters.p2 a:hover { border-color: var(--teal); }
.chapters.p2 .cn { color: var(--teal-t); }
/* A section heading between groups of chapter cards. */
.chapters .cgroup {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 800; margin: 1.2rem 0 -.2rem;
  border-bottom: 1px solid var(--line); padding-bottom: .4rem;
}
/* The decks lock scrolling on html+body (they use a fixed #stage instead).
   The course home page is an ordinary document, so it must release BOTH locks —
   overriding body alone leaves html:overflow:hidden still clipping the page. */
html.homepage,
html.homepage body { overflow: auto; height: auto; }