/* ══════════════════════════════════════════════════════════════════════════
   css/study-lab.css — The Actuarial Study Lab
   ──────────────────────────────────────────────────────────────────────────
   Namespaced `lab-*` throughout, deliberately. resources.php and
   actuaries-101.php once collided over a shared `.res-card` and had to be
   untangled; this page shares no class name with anything else on the site.

   Every colour comes from the tokens the rest of the site already defines, so
   the Lab cannot drift away from the brand when those change.
   ══════════════════════════════════════════════════════════════════════════ */

.lab-wrap { padding: 44px 0 64px; }
.lab-wrap .wrap { max-width: 1120px; }

/* ── The counted figures ────────────────────────────────────────────────── */
/* The dividing lines are drawn on the ITEMS, not by letting a coloured
   container show through a 1px gap. With the gap trick, an odd number of
   figures leaves a filled grey rectangle where the missing cell would be -
   which is exactly what happened the first time this rendered, because the
   glossary count is omitted when it cannot be read. Borders on the items mean
   three figures, or five, look deliberate instead of broken. */
.lab-figs {
  list-style: none; padding: 0;
  margin: 0 0 52px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0; background: #fff;
  border: 1px solid var(--line, #E7E3D9); border-radius: 14px; overflow: hidden;
}
.lab-figs li {
  background: #fff; padding: 20px 18px; min-width: 0;
  border-right: 1px solid var(--line, #E7E3D9);
  border-bottom: 1px solid var(--line, #E7E3D9);
}
.lab-figs b {
  display: block; font-size: 2.1rem; font-weight: 900; line-height: 1;
  color: var(--navy, #0B1D3F); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.lab-figs span { display: block; margin-top: 7px; font-size: .86rem; color: var(--ink-3, #78848F); line-height: 1.45; }

/* ── Section headings ───────────────────────────────────────────────────── */
.lab-h2 {
  font-size: clamp(1.45rem, 3.4vw, 1.9rem); font-weight: 900; color: var(--navy, #0B1D3F);
  letter-spacing: -.028em; margin: 0 0 10px; padding-top: 14px;
}
.lab-lead { font-size: 1.02rem; color: var(--ink-2, #4A5666); line-height: 1.65; max-width: 62ch; margin: 0 0 26px; }

/* ── The six paper panels ───────────────────────────────────────────────── */
.lab-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px; margin: 0 0 54px;
}
.lab-paper {
  background: #fff; border: 1px solid var(--line, #E7E3D9); border-radius: 14px;
  padding: 18px 18px 15px; min-width: 0;
  display: flex; flex-direction: column;
}
.lab-paper-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 13px; }
.lab-code {
  background: var(--navy, #0B1D3F); color: #fff; border-radius: 7px;
  padding: 4px 10px; font-size: .78rem; font-weight: 900; letter-spacing: .06em;
}
.lab-paper-name { font-size: .92rem; color: var(--ink-2, #4A5666); font-weight: 600; min-width: 0; }
.lab-n {
  margin-left: auto; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--orange-ink, #B45309);
  background: var(--bg-orange, #FFF7ED); border: 1px solid #FCD9B5;
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.lab-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 1px; flex: 1 1 auto; }
.lab-list li { border-bottom: 1px solid var(--bg-2, #F4F2EC); }
.lab-list li:last-child { border-bottom: 0; }
.lab-list a {
  display: block; padding: 9px 0; font-size: .93rem; line-height: 1.45;
  color: var(--navy, #0B1D3F); text-decoration: none; font-weight: 600;
}
.lab-list a:hover, .lab-list a:focus-visible { color: var(--orange-ink, #B45309); text-decoration: underline; }
.lab-more {
  align-self: flex-start; font-size: .83rem; font-weight: 800; letter-spacing: .02em;
  color: var(--orange-ink, #B45309); text-decoration: none;
}
.lab-more:hover, .lab-more:focus-visible { text-decoration: underline; }

/* ── Calculators ────────────────────────────────────────────────────────── */
.lab-calcs {
  list-style: none; padding: 0; margin: 0 0 54px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px;
}
.lab-calcs a {
  display: block; height: 100%; padding: 15px 16px; text-decoration: none;
  background: #fff; border: 1px solid var(--line, #E7E3D9); border-radius: 12px;
  transition: border-color .16s ease, transform .16s ease;
}
.lab-calcs a:hover, .lab-calcs a:focus-visible {
  border-color: var(--orange, #D97706); transform: translateY(-2px);
}
.lab-calc-name { display: block; font-weight: 800; color: var(--navy, #0B1D3F); margin-bottom: 4px; }
.lab-calc-what { display: block; font-size: .87rem; color: var(--ink-3, #78848F); line-height: 1.5; }

/* ── The rest ───────────────────────────────────────────────────────────── */
.lab-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 13px; margin: 0 0 34px;
}
.lab-card {
  display: block; padding: 18px 18px 16px; text-decoration: none;
  background: var(--bg-2, #F4F2EC); border: 1px solid var(--line, #E7E3D9);
  border-radius: 13px; transition: border-color .16s ease, background .16s ease;
}
.lab-card:hover, .lab-card:focus-visible { background: #fff; border-color: var(--navy, #0B1D3F); }
.lab-card b { display: block; font-size: 1.02rem; color: var(--navy, #0B1D3F); margin-bottom: 5px; }
.lab-card span { display: block; font-size: .89rem; color: var(--ink-2, #4A5666); line-height: 1.55; }

.lab-foot { font-size: .93rem; color: var(--ink-3, #78848F); line-height: 1.65; max-width: 60ch; }
.lab-foot a { color: var(--orange-ink, #B45309); font-weight: 700; }

@media (max-width: 560px) {
  .lab-wrap { padding: 30px 0 46px; }
  .lab-figs { margin-bottom: 38px; }
  .lab-figs b { font-size: 1.8rem; }
  .lab-grid, .lab-calcs, .lab-cards { gap: 11px; }
}

/* ── The one feature worth a card of its own ─────────────────────────────── */
.lab-feature {
  display: block; margin: 0 0 54px; padding: 20px 20px 18px; text-decoration: none;
  background: var(--bg-orange, #FFF7ED); border: 1px solid #FCD9B5;
  border-left: 4px solid var(--orange, #D97706); border-radius: 13px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.lab-feature:hover, .lab-feature:focus-visible {
  transform: translateY(-2px); box-shadow: 0 7px 18px rgba(214,122,42,.15);
}
.lab-feature-name {
  display: block; font-size: 1.1rem; font-weight: 900;
  color: var(--navy, #0B1D3F); margin-bottom: 5px; letter-spacing: -.02em;
}
.lab-feature-what { display: block; font-size: .92rem; color: var(--ink-2, #4A5666); line-height: 1.55; }