/* Class notes — shared styles. Palette and type follow the Indian-IT-AI-Forecasting note. */
:root {
  color-scheme: light;
  --bg: #fbf8f3; --panel: #fffdf9; --ink: #2a2318; --ink-2: #5e5245; --ink-3: #8a7d6d;
  --rule: #e6ddd0; --rule-2: #cfc4b4;
  --accent: #235fa6; --accent-soft: #e8eef6;
  --hand: #2f7a52; --hand-soft: #e6f1ea;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --top: 56px;
  --gut: 136px; --gg: 22px;   /* margin-label gutter + gap to text */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 20px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif);
  font-size: 17.5px; line-height: 1.6; font-optical-sizing: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
p { margin: 0 0 1.05em; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.topbar-inner { height: 100%; padding: 0 40px 0 28px; display: flex; align-items: center; gap: 28px; }
.brand { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand span { color: var(--ink-3); font-weight: 400; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); text-decoration: none; padding: 6px 12px;
  border-radius: 5px; white-space: nowrap; }
.tab:hover { background: var(--panel); color: var(--ink); }
.tab[aria-current="page"] { background: var(--ink); color: var(--bg); }
.tab.soon { color: var(--ink-3); cursor: default; }
.tab.soon:hover { background: transparent; color: var(--ink-3); }
.tab.soon small { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 5px; opacity: 0.8; }

/* ---------- course layout ---------- */
.course { display: none; }
.course.active { display: block; }
.layout { padding: 0 40px 0 28px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; }
.sidebar { position: sticky; top: calc(var(--top) + 28px); align-self: start; max-height: calc(100vh - var(--top) - 44px); overflow-y: auto;
  padding: 0 6px 24px 0; font-family: var(--sans); scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.s-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.s-head { font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin: 0; font-weight: 600; }
.s-toggle { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.s-toggle:hover { color: var(--accent); }
.legend { margin: 22px 0 0; font-size: 13px; color: var(--ink-3); }

/* search: a bare field that swaps the outline for matches while typing */
.search { margin: 0 0 10px; }
.search input { width: 100%; font: 13.5px var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 4px 8px; outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--ink-3); opacity: 0.75; }
.search input:focus { border-bottom-color: var(--rule-2); }
.search input::-webkit-search-cancel-button { display: none; }
.s-results { display: flex; flex-direction: column; gap: 1px; }
.s-results a { display: block; padding: 5px 8px; border-radius: 5px; text-decoration: none; color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.s-results a:hover, .s-results a.first { background: var(--panel); color: var(--ink); }
.s-results small { display: block; font-size: 12px; color: var(--ink-3); }
.s-none { font-size: 13px; color: var(--ink-3); padding: 4px 8px; margin: 0; }
.outline[hidden], .s-results[hidden] { display: none; }

/* outline tree */
.outline { display: flex; flex-direction: column; gap: 1px; }
.o-row { display: flex; align-items: center; border-radius: 6px; transition: background 0.15s; }
.o-row:hover { background: var(--panel); }
.o-link { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.7em 1fr; align-items: baseline; padding: 6px 4px 6px 8px;
  color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.o-n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; }
.o-link:hover { color: var(--ink); }
.o-sec.current > .o-row { background: var(--accent-soft); }
.o-sec.current .o-link { color: var(--ink); font-weight: 600; }
.o-sec.current .o-n { color: var(--accent); }
.o-caret { flex: none; width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; border-radius: 5px;
  color: var(--ink-3); cursor: pointer; }
.o-caret:hover { color: var(--ink); background: var(--rule); }
.o-caret svg { transition: transform 0.2s ease; }
.o-sec.open .o-caret svg { transform: rotate(90deg); }
.o-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.o-sec.open .o-kids { grid-template-rows: 1fr; }
.o-kids-inner { overflow: hidden; position: relative; margin-left: 15px; padding-left: 12px; }
.o-sec.open .o-kids-inner { padding-top: 3px; padding-bottom: 6px; }
.o-track { position: absolute; left: 0; top: 4px; bottom: 6px; width: 1.5px; background: var(--rule); border-radius: 1px; }
.o-track i { display: block; width: 100%; height: 0; background: var(--accent); border-radius: 1px; transition: height 0.12s linear; }
.o-sec:not(.current) .o-track i { height: 0 !important; }
.o-sub { display: grid; grid-template-columns: 2.2em 1fr; padding: 4px 6px; color: var(--ink-3); text-decoration: none; font-size: 13.5px;
  line-height: 1.35; border-radius: 5px; }
.o-sub.no-n { grid-template-columns: 1fr; }
.o-sn { font-variant-numeric: tabular-nums; color: var(--ink-3); opacity: 0.8; }
.o-sub:hover { color: var(--ink); background: var(--panel); }
.o-sub.on { color: var(--accent); font-weight: 600; }
.o-sub.on .o-sn { color: var(--accent); opacity: 1; }
.o-link:focus-visible, .o-sub:focus-visible, .o-caret:focus-visible, .s-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

main.content { padding: 48px 0 96px calc(var(--gut) + var(--gg)); min-width: 0; max-width: 1240px; }

/* ---------- headings ---------- */
.course-head { padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.kicker { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px; }
h1 { font-size: 2.05rem; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; }
.byline { font-family: var(--sans); font-size: 15px; color: var(--ink-2); margin: 0; }
.lede { margin: 16px 0 0; color: var(--ink-2); font-size: 16.5px; }

section.lec, section.topic { padding-top: 8px; }
section.lec + section.lec, section.defs + section.lec, section.topic + section.topic { border-top: 1px solid var(--rule); margin-top: 56px; padding-top: 40px; }
h2 { font-size: 1.75rem; line-height: 1.25; font-weight: 600; margin: 1.6em 0 0.2em; letter-spacing: -0.012em; }
h2 .num { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.reading { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); margin: 0 0 1.6em; }
.reading i { font-family: var(--serif); }
h3 { font-size: 1.32rem; font-weight: 600; margin: 2.2em 0 0.7em; line-height: 1.3; letter-spacing: -0.008em; }
h3 .h-num { font-family: var(--sans); font-size: 0.82em; font-weight: 600; color: var(--accent); margin-right: 0.6em; font-variant-numeric: tabular-nums; }
h4 { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin: 1.6em 0 0.6em; }

ul, ol { padding-left: 1.25em; margin: 0 0 1.05em; }
li { margin-bottom: 0.35em; }
li > ul, li > ol { margin: 0.35em 0 0.2em; }
strong { font-weight: 600; }
dfn { font-style: normal; font-weight: 600; }

/* example sentences */
.ex { list-style: none; padding: 0 0 0 20px; margin: 0.6em 0 1.1em; border-left: 2px solid var(--rule); }
.ex li { margin-bottom: 0.25em; font-style: italic; }
.ex li .gl { font-style: normal; font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-left: 6px; }
.ex li .bad { font-style: normal; color: var(--ink-3); margin-right: 4px; }
/* two example lists side by side (parallel arguments) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0.6em 0 1.1em; }
.pair .ex { margin: 0; }
.pair-h { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 0.4em; }
@media (max-width: 600px) { .pair { grid-template-columns: 1fr; } }

/* logic */
.logic { font-family: var(--serif); font-size: 1.02em; white-space: nowrap; }
.formula { margin: 0.8em 0 1.1em; padding-left: 20px; font-size: 1.04em; overflow-x: auto; white-space: nowrap; }

/* notes: handout supplements, corrections, clarifications */
.tag { display: inline-block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--hand); margin-right: 8px; vertical-align: 1px; }

.src { font-family: var(--sans); font-size: 12px; color: var(--ink-3); }

/* glossary */
.defs h3 { font-family: var(--sans); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 2em 0 0.4em; }
.defs h3 a { color: inherit; text-decoration: none; }
.defs h3 a:hover { color: var(--accent); }
dl.gloss { margin: 0; }
dl.gloss > div { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
dl.gloss dt { font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1.45; padding-top: 1px; }
dl.gloss dd { margin: 0; font-size: 16px; line-height: 1.5; }

/* kaplan chain */
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14.5px; margin: 1em 0 1.3em; }
.chain .c { border: 1px solid var(--rule-2); background: var(--panel); border-radius: 5px; padding: 4px 10px; font-weight: 600; }
.chain .arr { color: var(--ink-3); font-size: 13px; }

/* labelled items: label hangs in the left gutter, text stays in the column */
.thm, .pf { display: grid; grid-template-columns: var(--gut) minmax(0, 1fr); column-gap: var(--gg);
  margin: 1.7em 0 1.7em calc(-1 * (var(--gut) + var(--gg))); }
.thm.exs { margin-top: 1.2em; margin-bottom: 1.2em; }
.th-m { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; padding-top: 0.28em; font-family: var(--sans); }
.th-b { min-width: 0; }
.th-b > :last-child, .th-b > :last-child > :last-child { margin-bottom: 0; }
.th-b ol, .th-b ul { margin-top: 0.3em; }
.th-k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); line-height: 1.35; }
.def .th-k { color: var(--accent); }
.th-k.th-term { font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.exs .th-k { color: var(--hand); font-weight: 600; }
.pf .th-k { color: var(--ink-3); }
.th-m .tag { margin: 0; }
.tag.src { color: var(--ink-3); font-weight: 600; }
.legend-2 { margin-top: 6px; }
.th-n { font-weight: 600; }
.th-pf { font-size: 12.5px; text-decoration: none; color: var(--ink-3); white-space: nowrap; }
.th-pf:hover { color: var(--accent); }
.exs li { margin-bottom: 0.4em; }
.exs .th-b > ul { padding-left: 1.1em; }
.pf { margin-bottom: 1.6em; }
.pf .stmt { color: var(--ink-2); font-style: italic; }
.pf .stmt .th-n { font-style: normal; color: var(--ink); }
.pf .qed { float: right; color: var(--ink-3); margin-left: 8px; }
.pf-body p { margin-bottom: 0.6em; }
.thm:target, .pf:target { animation: flash 1.8s ease; border-radius: 4px; }
@keyframes flash { 0%, 35% { background: var(--accent-soft); } 100% { background: transparent; } }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; max-width: 100%; margin: 0.6em 0 !important; }
mjx-container { font-size: 103% !important; }

/* prev / next */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; font-family: var(--sans); font-size: 14.5px; }
.pager a { text-decoration: none; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 14px; max-width: 48%; }
.pager a:hover { border-color: var(--rule-2); color: var(--ink); background: var(--panel); }
.pager a small { display: block; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.pager .next { margin-left: auto; text-align: right; }

/* mobile contents bar + drawer */
.jump, .drawer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 40; background: rgba(42, 35, 24, 0); transition: background 0.2s; }
.drawer.in { background: rgba(42, 35, 24, 0.28); }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); background: var(--bg); border-right: 1px solid var(--rule);
  padding: 18px 14px 32px; overflow-y: auto; font-family: var(--sans); transform: translateX(-100%); transition: transform 0.2s ease;
  box-shadow: 0 0 30px rgba(42, 35, 24, 0.12); }
.drawer.in .drawer-panel { transform: none; }
.drawer-close { font-size: 24px; line-height: 1; background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0 4px; }

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  main.content { max-width: 860px; }
  .sidebar { display: none; }
  .jump { display: block; position: sticky; top: var(--top); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--rule);
    margin: 0 -16px 0 calc(-16px - var(--gut) - var(--gg)); padding: 8px 16px; }
  .jump-btn { width: 100%; display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
    background: var(--panel); border: 1px solid var(--rule-2); border-radius: 6px; padding: 7px 10px; cursor: pointer; text-align: left; }
  .jb-icon { flex: none; width: 14px; height: 10px; border-top: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); position: relative; }
  .jb-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid var(--ink-2); transform: translateY(-50%); }
  .jb-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .jb-text b { font-weight: 600; margin-right: 8px; }
  .jb-sub { color: var(--ink-2); }
  .jb-sub .o-sn { margin-right: 6px; color: var(--accent); opacity: 1; }
  html { scroll-padding-top: calc(var(--top) + 64px); }
  main.content { padding-top: 0; }
  .course-head { margin-top: 28px; }
  .topbar-inner { padding: 0 16px; gap: 16px; }
  .brand span { display: none; }
}
@media (max-width: 760px) {
  main.content { padding-left: 0; }
  .jump { margin-left: -16px; }
  .thm, .pf { display: block; margin-left: 0; }
  .th-m { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0; margin-bottom: 2px; text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  h1 { font-size: 1.7rem; }
  dl.gloss > div { grid-template-columns: 1fr; gap: 2px; }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
}