/* One visual system for all 691 pages.

   The site grew as five stylesheets -- the home and guide sheet, the subject
   sheet (22 identical copies), the Data Science sheet, the UGC NET sheet, and
   the inline styles of the hubs and syllabus maps -- and a browser measured
   what that looked like side by side: three header systems, seven link
   colours (two of them below the 4.5:1 contrast a body link needs, and one,
   on the Statistics hub, the browser's own default blue because no rule set
   it at all), three near-identical page backgrounds, and paragraphs up to
   1,056px wide, about 150 characters to a line.

   This file does not rewrite those sheets. It is linked after them on every
   page, so it wins by cascade order wherever it speaks, and it speaks only
   where the site must agree with itself: colour, the reading measure, and the
   shape of a page's header. Everything a section does on purpose -- its boxes,
   its tables, its cards -- is left to the section. */

:root {
  --nl-blue:       #0f4c81;   /* the brand: bar, banners, favicon, share card */
  --nl-blue-lit:   #17659f;   /* #1e7fbf behind white text was 4.1:1 */
  --nl-blue-deep:  #0a3763;
  --nl-ink:        #16233a;
  --nl-ink-soft:   #46566f;
  --nl-ground:     #f4f6fa;
  --nl-card:       #ffffff;
  --nl-line:       #e3e9f2;
  /* 5.6:1 on the page ground and 6.1:1 on white. The two link blues this
     replaces measured 4.0:1 (#1e7fbf) and 3.4:1 (#3b82f6). */
  --nl-link:       #1565a8;
  --nl-link-hover: #0f4c81;
  --nl-radius:     14px;
  --nl-banner:     linear-gradient(135deg, #0f4c81 0%, #17659f 100%);
  /* About 75 characters of body text: the range every typographic study, and
     every reference site this was compared with, settles on. */
  --nl-measure:    75ch;

  /* The UGC NET sheet takes its palette from these two variables; pointing
     them at the brand re-themes its buttons, headings and cards from indigo
     to the site's blue without editing that sheet. */
  --primary:       var(--nl-blue);
  --primary-light: var(--nl-blue-lit);
  --bg:            var(--nl-ground);
}

body { background: var(--nl-ground); color: var(--nl-ink); }

/* ---- contrast: measured, not assumed ------------------------------------
   tools/check_contrast.js measures every text element on 26 representative
   pages against the background actually painted behind it. Before this block
   the LIGHT theme -- which nothing had ever measured -- had these below WCAG
   AA, most of them one colour repeated:

     white on the banner gradient's light end (#1e7fbf)          4.1:1
     the gold breadcrumb links on the same                        2.9:1
     the A-Z entries and every link in the home/guide sheet       4.0:1
     white labels on the green example boxes (#059669)            3.8:1
     white labels on the amber formula boxes (#f59e0b)            2.2:1
     UGC NET's white "EXAMPLE" on #10b981, amber unit numbers     2.5, 2.2:1
     the small grey text of the home sheet (#6b7a90)              4.4:1

   Each is corrected here once, by the smallest change that passes: a darker
   shade of the same hue, never a different colour. */
:root {
  --blue-lit: #17659f;       /* the home/guide sheet's link and accent blue */
  --ink-faint: #5b6a80;      /* its small grey text: 4.4 -> 5.5:1 */
  --success: #047857;        /* UGC NET's example green: 2.5 -> 5.5:1 */
  --accent: #b45309;         /* UGC NET's amber: 2.2 -> 5.0:1 */
}
.banner, .mcq-unit-head { background: var(--nl-banner); }
.hero {
  background:
    radial-gradient(1100px 380px at 78% -12%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(135deg, #0a3763 0%, #0f4c81 45%, #17659f 100%);
}
.topics-head { background: linear-gradient(135deg, #0a3763 0%, #17659f 100%); }
.topics-head .eyebrow, .topics-head .eyebrow a { color: rgba(255, 255, 255, .9); }
.topics-head .lede { color: #fff; }
.concept .label { background: #1565a8; }
.formula .label { background: #b45309; }
.example .label, .example .ex-label { background: #047857; }
.ready .status { color: #047857; }
.planned .status, .pending .status { color: #5b6474; }
footer, .unit-tally { color: #5b6474; }
/* The gold breadcrumb links were 2.9:1 on the banner's light end, and still 4.4:1
   lightened; white, underlined so a link still reads as one, is 6.2:1. */
.banner .crumbs a { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.topics-head .shint, .hero .shint { color: rgba(255, 255, 255, .82); }
.site-header .badge { background: rgba(0, 0, 0, .2); }
.site-footer a { color: #fbbf24; }          /* amber on UGC NET's dark footer */

/* ---- links -----------------------------------------------------------------
   An element selector, so it overrides the sheets' own bare `a` rules and
   nothing more: every link a section styles by class -- a card, a chip, a
   breadcrumb, a pager button -- keeps its own look. */
a { color: var(--nl-link); }
a:hover { color: var(--nl-link-hover); }

/* A link inside running text is underlined as well as coloured. The link blue
   is only 2.6:1 against the body text colour, so colour alone does not tell a
   reader which words are a link (WCAG 1.4.1). */
:is(p, li, dd, td, th, blockquote, figcaption) > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

/* A page's contents list is navigation, not prose: one colour for it
   everywhere (9.9:1), no underline until hovered. The UGC NET sheet had drawn
   its list in the light blue that fails contrast; the subject sheets in this
   one. */
.toc a, details.toc a { color: #24405c; text-decoration: none; }
.toc a:hover, details.toc a:hover { color: var(--nl-blue); text-decoration: underline; }
/* ...and the running-text underline rule below is more specific than a plain
   `.toc a`, so it is undone here at matching strength. */
.toc :is(p, li) > a:not([class]) { text-decoration: none; }
.toc :is(p, li) > a:not([class]):hover { text-decoration: underline; }

/* ---- the reading measure ---------------------------------------------------
   Prose stops at about 75 characters; tables, code, formulae, figures and the
   section boxes keep the full column, because they are read differently. */
:is(main, .wrapper, .container, .wrap) :is(p, li, dd, blockquote) {
  max-width: var(--nl-measure);
}
/* A capped paragraph in a centred block would sit to the left of the centre. */
:is(footer, [style*="text-align:center"], [style*="text-align: center"]) p {
  margin-left: auto; margin-right: auto;
}

/* ---- one header -------------------------------------------------------------
   The rounded banner card is the site's page header. The UGC NET pages had a
   third design -- a full-bleed, centred, indigo band -- and it becomes the
   same card, aligned to the same column as the page under it. */
.site-header {
  max-width: calc(1100px - 3rem);
  margin: 28px auto 0;
  padding: 30px 22px;
  border-radius: var(--nl-radius);
  background: var(--nl-banner);
  box-shadow: 0 6px 20px rgba(15, 76, 129, .18);
  text-align: left;
}
.site-header h1 { font-size: 1.9rem; letter-spacing: .3px; margin: 0 0 6px; }
.site-header p  { font-size: 1rem; margin: 0; max-width: var(--nl-measure); }
@media (max-width: 1148px) {
  .site-header { margin-left: 1.5rem; margin-right: 1.5rem; }
}

/* The top-level pages (A-Z, the test chooser, About) share the home page's
   full-width band; it is tightened so the first thing below it is on screen. */
.topics-head { padding: 28px 0 22px; }

/* ---- "Start here": a numbered path through a section ---------------------
   On the Examinations and UGC NET hubs, the three steps a first-time reader
   should take, in order -- the "start here" framing exam-preparation sites
   lead with. */
ol.start-path {
  list-style: none; counter-reset: step; padding: 0; margin: 22px 0 30px;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
ol.start-path > li {
  counter-increment: step; position: relative; max-width: none;
  background: var(--nl-card); border: 1px solid var(--nl-line); border-radius: 12px;
  padding: 16px 16px 16px 58px; line-height: 1.5; color: var(--nl-ink-soft);
}
ol.start-path > li::before {
  content: counter(step); position: absolute; left: 16px; top: 15px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--nl-blue);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
ol.start-path b { color: var(--nl-ink); }
ol.start-path a b { color: inherit; }   /* a linked step reads as a link */

/* ---- exam <-> course links (tools/build_exam_courses.py) ------------------
   Which courses an exam's map sends a reader to, and on each course, which
   exams it serves and what comes next in learning order. */
.exam-courses { margin: 34px 0 26px; }
.exam-courses dl { margin: 14px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; }
.exam-courses dt { font-weight: 700; color: var(--nl-ink); }
.exam-courses dd { margin: 0; line-height: 1.75; }
.exam-courses small, .next-course small {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; color: var(--nl-ink-soft);
  margin-left: 2px;
}
@media (max-width: 720px) {
  .exam-courses dl { grid-template-columns: 1fr; gap: 2px; }
  .exam-courses dd { margin-bottom: 10px; }
}
p.useful-for, p.next-course {
  background: var(--nl-card); border: 1px solid var(--nl-line); border-radius: 10px;
  padding: 10px 14px; margin: 14px 0 20px; max-width: none;
}
p.useful-for b { color: var(--nl-ink); margin-right: 6px; }
/* A page that reproduces an official syllabus says so, because its
   semesters and credits are that document's and not the site's. */
p.source-note {
  background: var(--nl-card); border: 1px solid var(--nl-line); border-left: 4px solid var(--nl-blue);
  border-radius: 10px; padding: 10px 14px; margin: 14px 0 20px; max-width: none; color: var(--nl-ink-soft);
}
p.source-note b { color: var(--nl-ink); }
p.next-course { margin-top: 26px; }

/* ---- your progress (assets/progress.js) ------------------------------------
   Everything here is added by the script, so none of it exists with scripts
   off. Kept in this browser only; see the About page. */
.progress-toggle { margin: 14px 0 18px; }
.progress-toggle button, .progress-clear {
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--nl-link); background: var(--nl-card); color: var(--nl-link);
}
.progress-toggle button[aria-pressed="true"] { background: #047857; border-color: #047857; color: #fff; }
.progress-toggle button:focus-visible, .progress-clear:focus-visible { outline: 3px solid var(--nl-blue-lit); outline-offset: 2px; }
p.progress-line, p.progress-continue {
  background: var(--nl-card); border: 1px solid var(--nl-line); border-radius: 10px;
  padding: 10px 14px; margin: 14px 0 20px; max-width: none; color: var(--nl-ink);
}
p.progress-continue { margin-top: 24px; }
.progress-badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  padding: 1px 8px; border-radius: 999px; background: #e7f0f8; color: #0f4c81;
}
.progress-badge.is-complete { background: #047857; color: #fff; }
.progress-tick { margin-left: 6px; color: #047857; font-weight: 700; }
.progress-controls p { margin: 0 0 10px; }

/* ---- About and any future plain-prose page --------------------------------- */
main.wrap.prose { padding-top: 34px; padding-bottom: 20px; }
.prose section { margin-bottom: 34px; }
.prose h2 { margin: 0 0 10px; font-size: 1.35rem; color: var(--nl-ink); }
.prose ul { padding-left: 1.3em; }
.prose li { margin: 0 0 6px; }

@media (max-width: 720px) {
  /* A long inline formula is one unbreakable box, and on a phone it pushed
     the whole page sideways (114 pages at 390px). Display maths already
     scrolls in its own box (each section's stylesheet); this gives inline
     maths the same treatment, so only the formula scrolls, never the page. */
  mjx-container:not([display="true"]) {
    display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    vertical-align: middle;
  }
  /* A numbered equation (\tag) is laid out full width, and MathJax writes
     its natural width into an inline min-width, which defeats the scroll. */
  mjx-container[width="full"] { min-width: 0 !important; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
  /* 1.5rem: the side padding of the UGC NET content column, so the header
     card and the card under it share one left edge on a phone. */
  .site-header { margin: 18px 1.5rem 0; padding: 22px 18px; }
  .site-header h1 { font-size: 1.5rem; }
}

/* ---- print ------------------------------------------------------------------
   Measured by printing each kind of page to A4. The bar and footer links were
   already hidden; what was wrong was a scrolling table: the test chooser's
   13-row table sits in an overflow:auto wrapper, which on screen scrolls and on
   paper simply cuts its right-hand columns off. */
/* Collapsible topic sections (assets/sections.js, on long pages only). The
   heading keeps its own look -- each section's stylesheet sets it -- and the
   button inside it only takes the click. */
h2.sec-head { position: relative; }
.sec-toggle {
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left;
  background: none; border: 0; padding: 0 0 0 1.35em; margin: 0; width: 100%;
  cursor: pointer; display: block; position: relative;
}
.sec-toggle::before {
  content: "\25B8"; position: absolute; left: 0; top: 0;
  font-size: .85em; line-height: inherit; color: var(--nl-link);
  transition: transform .15s ease;
}
.sec-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
/* A closed section is a heading in a list of headings: the page's own h2
   margins, sized to separate long passages, would leave a screen of air
   between them. */
h2.sec-head:has(+ .sec-body[hidden]) { margin-bottom: .15em; }
.sec-body[hidden] + h2.sec-head { margin-top: .75em; }
.sec-toggle:focus-visible { outline: 3px solid var(--nl-blue-lit); outline-offset: 3px; border-radius: 4px; }
.sec-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 18px 0 6px; font-size: .9rem; color: var(--nl-ink-soft);
}
.sec-bar span { margin-right: 4px; }
.sec-bar button {
  font: inherit; font-weight: 600; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--nl-link); background: var(--nl-card); color: var(--nl-link);
}
.sec-bar button:focus-visible { outline: 3px solid var(--nl-blue-lit); outline-offset: 2px; }

@media print {
  body { background: #fff; }
  .tablewrap, .table-scroll, .table-wrap { overflow: visible !important; }
  table.tests { width: 100%; min-width: 0 !important; font-size: 10.5px; }   /* 56rem on screen */
  tr, .concept, .formula, .example, .theorem, .definition { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  /* Links that only move a reader around the site do nothing on paper. */
  .page-nav, .pagination, ol.start-path, details.toc, .chips,
  .progress-toggle, .progress-continue, .progress-controls { display: none; }
  .sec-bar { display: none; }
  .sec-body[hidden] { display: block !important; content-visibility: visible !important; }
  .sec-toggle::before { content: none; }
}