/* PipingInspector course shell.
   Palette deliberately matches the public site, so the free topics and the paid
   courses read as one product rather than two. */

:root {
  --ink: #1c1a17;
  --muted: #5f594f;
  --faint: #8a8580;
  --blue: #0b4f6c;
  --teal: #0f766e;
  --orange: #c2410c;
  --paper: #faf9f7;
  --card: #ffffff;
  --line: #e4e0d9;
  --sidebar: #1c1a17;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: rgba(15, 118, 110, 0.10);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* ---------- layout ---------- */

.shell {
  display: grid;
  grid-template-columns: 17rem 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--sidebar);
  color: #f3f0eb;
  padding: 1.75rem 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { margin-bottom: 1.5rem; }
.brand strong { display: block; font-size: 1.05rem; }
.brand span { display: block; color: #a8a29e; font-size: 0.85rem; margin-top: 0.15rem; }

.nav { display: flex; flex-direction: column; gap: 0.1rem; }
.nav a {
  color: #d6d3d1;
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav a.is-active { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }

.progress { margin-top: 1.75rem; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 1rem; }
.progress label { display: flex; justify-content: space-between; font-size: 0.82rem; color: #a8a29e; margin-bottom: 0.4rem; }
.progress strong { color: #fff; }
.progress progress { width: 100%; height: 6px; border: 0; border-radius: 99px; background: rgba(255,255,255,0.15); }
.progress progress::-webkit-progress-bar { background: rgba(255,255,255,0.15); border-radius: 99px; }
.progress progress::-webkit-progress-value { background: var(--teal); border-radius: 99px; }
.progress progress::-moz-progress-bar { background: var(--teal); border-radius: 99px; }

main { min-width: 0; padding: 2.5rem 3rem 5rem; }

/* ---------- hero ---------- */

.hero { max-width: 54rem; margin-bottom: 2.5rem; }
.kicker {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 0.5rem;
}
.hero h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 0.9rem; letter-spacing: -0.01em; }
.lede { font-size: 1.08rem; color: var(--muted); margin: 0 0 1.25rem; }

.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.stats span {
  font-size: 0.8rem; color: var(--muted);
  background: var(--card); border: 1px solid var(--line);
  padding: 0.3rem 0.65rem; border-radius: 99px;
}

/* ---------- content ---------- */

.content { max-width: 54rem; }

section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
}

section h2 { font-size: 1.45rem; margin: 0 0 1rem; letter-spacing: -0.01em; }
section h3 { font-size: 1.08rem; margin: 1.75rem 0 0.6rem; }
section h3:first-of-type { margin-top: 1.25rem; }
section p { margin: 0 0 1rem; }
section ul, section ol { margin: 0 0 1rem; padding-left: 1.3rem; }
section li { margin-bottom: 0.45rem; }

/* ---------- part divider ---------- */

/* Used where a module is long enough to need internal parts (module 13). */
.partline {
  margin: 2.5rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--line);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ---------- panels ---------- */

.callout, .warning, .danger, .task {
  border-left: 4px solid;
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.96rem;
}
.callout { border-color: var(--teal); background: rgba(15, 118, 110, 0.07); }
.warning { border-color: #ca8a04; background: rgba(202, 138, 4, 0.08); }
.danger  { border-color: var(--orange); background: rgba(194, 65, 12, 0.07); }
.task    { border-color: var(--blue); background: rgba(11, 79, 108, 0.07); }

.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.card h3 { margin: 0 0 0.5rem; font-size: 0.98rem; }
.card p { margin: 0; font-size: 0.94rem; color: var(--muted); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
thead th {
  text-align: left; background: var(--paper);
  border-bottom: 2px solid var(--line);
  padding: 0.6rem 0.75rem; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
tbody td { border-bottom: 1px solid var(--line); padding: 0.6rem 0.75rem; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { font-weight: 600; }

/* ---------- exercises ---------- */

details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 1.5rem;
  background: var(--paper);
}
details summary { cursor: pointer; font-weight: 600; color: var(--blue); }
details[open] summary { margin-bottom: 0.75rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
details p { margin: 0.75rem 0 0; font-size: 0.95rem; }

.checklist { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--line); }
.checklist label {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.92rem; color: var(--muted); cursor: pointer;
}
.checklist input { margin-top: 0.3rem; accent-color: var(--teal); flex-shrink: 0; }

/* ---------- module / course cards ---------- */

.module-list { display: grid; gap: 0.85rem; margin: 1.25rem 0; }
.module-list a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 1rem 1.2rem; background: var(--paper);
}
.module-list a:hover { border-color: var(--teal); background: #fff; }
.module-list .n { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal); }
.module-list strong { display: block; font-size: 1.02rem; margin: 0.2rem 0 0.3rem; }
.module-list p { margin: 0; font-size: 0.9rem; color: var(--muted); }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.pager a {
  flex: 1; text-decoration: none; color: var(--blue); font-weight: 600; font-size: 0.93rem;
  border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 1rem; background: var(--card);
}
.pager a:hover { border-color: var(--teal); }
.pager a.next { text-align: right; }
.pager span { display: block; font-size: 0.75rem; color: var(--faint); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- responsive ---------- */

@media (max-width: 62rem) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.25rem; }
  main { padding: 1.75rem 1.25rem 4rem; }
  .grid-two { grid-template-columns: 1fr; }
  section { padding: 1.35rem 1.25rem; }
  .hero h1 { font-size: 1.65rem; }
}

@media print {
  .sidebar, .pager { display: none; }
  .shell { display: block; }
  section { break-inside: avoid; border: 0; padding: 0; margin-bottom: 1.5rem; }
  details { break-inside: avoid; }
  details summary { display: none; }
}

/* ---------- assessment ---------- */

.quiz-intro { color: var(--muted); margin: 0 0 1.25rem; }

.quiz-q {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin: 0 0 1rem;
  background: var(--paper);
}
.quiz-q legend { font-weight: 600; padding: 0 0.4rem; display: flex; gap: 0.5rem; align-items: baseline; }
.quiz-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; border-radius: 99px;
  background: var(--teal); color: #fff; font-size: 0.78rem; flex-shrink: 0;
}

.quiz-opt {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer;
  font-size: 0.95rem;
}
.quiz-opt:hover { background: rgba(15, 118, 110, 0.06); }
.quiz-opt input { margin-top: 0.3rem; accent-color: var(--teal); flex-shrink: 0; }
.quiz-opt.is-correct { background: rgba(15, 118, 110, 0.12); font-weight: 600; }
.quiz-opt.is-wrong { background: rgba(194, 65, 12, 0.10); text-decoration: line-through; }

.quiz-explain {
  margin: 0.75rem 0 0; padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--teal); background: rgba(15, 118, 110, 0.06);
  font-size: 0.92rem; color: var(--muted); border-radius: 0 6px 6px 0;
}

.quiz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.25rem; }
.quiz-submit, .quiz-reset {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--teal); border-radius: 6px;
  padding: 0.55rem 1.1rem; background: var(--teal); color: #fff;
}
.quiz-reset { background: transparent; color: var(--teal); }
.quiz-submit:hover, .quiz-reset:hover { filter: brightness(1.08); }

.quiz-result { margin: 0; font-weight: 600; font-size: 0.95rem; }
.quiz-result.is-pass { color: var(--teal); }
.quiz-result.is-fail { color: var(--orange); }
.quiz-result.is-warn { color: #a16207; }

@media print {
  .quiz-actions, .quiz-opt input { display: none; }
  .quiz-explain { display: block !important; }
}

/* Preformatted blocks carry tag diagrams and formulae that must not be rewrapped,
   so they scroll rather than break the page — the same treatment as wide tables. */
pre {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
pre code {
  background: none;
  padding: 0;
  white-space: pre;
}

/* ---- figures ---- */
.fig {
  margin: 1.5rem 0;
}
.fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.fig figcaption {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- open book / closed book ---------- */
/* The API exam-preparation courses prepare somebody for an exam that is half
   open book and half closed book, and the two halves want different study.
   Every module and every quiz says which it is, prominently, because a
   candidate who revises the open-book material as though it had to be
   memorised has wasted the time. .bk is the inline per-lesson marker. */

.bookmode {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border: 2px solid;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.5rem 0;
  font-size: 0.96rem;
}
/* Only the opening line is a block. A later <strong> is an inline emphasis
   inside a sentence, and blocking it strands the rest of the sentence on the
   following line. */
.bookmode > div > strong:first-child { display: block; letter-spacing: 0.01em; }
.bookmode .bookmode__tag {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
}
.bookmode--open { border-color: var(--teal); background: rgba(15, 118, 110, 0.09); }
.bookmode--open .bookmode__tag { background: var(--teal); }
.bookmode--closed { border-color: var(--orange); background: rgba(194, 65, 12, 0.09); }
.bookmode--closed .bookmode__tag { background: var(--orange); }
.bookmode--both { border-color: #ca8a04; background: rgba(202, 138, 4, 0.1); }
.bookmode--both .bookmode__tag { background: #ca8a04; }

.bk {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  color: #fff;
}
.bk--open   { background: var(--teal); }
.bk--closed { background: var(--orange); }

@media (max-width: 700px) {
  .bookmode { flex-direction: column; gap: 0.6rem; }
}

/* ---------- timed mock paper ---------- */
.mock-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
}
.mock-bar strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mock-part { margin: 2rem 0; }
.mock-part > h3 {
  border-bottom: 2px solid var(--teal);
  padding-bottom: 0.35rem;
}

/* The mock clock's last-fifteen-minutes state. Set by mock-clock.js, which is
   an external file because the app's CSP forbids inline scripts. */
#mockClock.is-low { color: var(--orange); }