/* Shared stylesheet for the generated /notes/ study-guide pages.
 *
 * The rest of the site inlines its CSS per page. These pages do not, and the
 * reason is scale: this file is the same bytes on every one of them, and there
 * are meant to eventually be hundreds. Inlining would repeat ~4 KB per page for
 * no caching benefit and make a style change a regeneration of the whole set.
 *
 * The scale variables below are copied from the blog template so a generated
 * page and a hand-written one sit on the same type and spacing system. If the
 * scale changes there, change it here too -- check_notes_pages.py asserts the
 * two agree on the step values, so a drift fails a check rather than showing up
 * as a page that quietly looks wrong.
 */
  :root {
  /* Proportional scale. Every type size and every gap on the page is one of
     these steps. Below 1rem the steps sit close together because dense UI text
     needs fine control; from 1rem up they widen, which is what separates a
     heading from body copy at a glance. This replaced 59 ad-hoc font sizes,
     among them .82/.83/.84/.85/.86/.87/.88rem — differences no reader can see
     and no one could have chosen between deliberately. Reach for an existing
     step before inventing a value; if none fits, the scale is what should
     change, not the one declaration. */
  --step-3xs: 0.618rem;
  --step-2xs: 0.694rem;
  --step-xs:  0.786rem;
  --step-sm:  0.886rem;
  --step-md:  1rem;
  --step-lg:  1.272rem;
  --step-xl:  1.618rem;
  --step-2xl: 2.058rem;
  --step-3xl: 2.618rem;
  --step-4xl: 3.330rem;
  --step-5xl: 4.236rem;

  /* Spacing, same family. Each step is the sum of the two before it, so nested
     padding and margins stay related instead of drifting apart. */
  --space-3xs: 0.236rem;
  --space-2xs: 0.382rem;
  --space-xs:  0.618rem;
  --space-sm:  1rem;
  --space-md:  1.618rem;
  --space-lg:  2.618rem;
  --space-xl:  4.236rem;
  --space-2xl: 6.854rem;

  }

    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Inter',system-ui,sans-serif;color:#1a1a2e;background:#f8f9fa;line-height:1.7}
    a{color:#1A73E8;text-decoration:none}a:hover{text-decoration:underline}
    .header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}
    .header-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px}
    .logo{font-weight:800;font-size:var(--step-md);background:linear-gradient(90deg,#00d4ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .header-nav{margin-left:auto;display:flex;gap:20px;align-items:center}
    .header-nav a{font-size:var(--step-sm);color:#6b7280;font-weight:500}
    .btn-tool{background:#1A73E8;color:#fff!important;padding:8px 18px;border-radius:8px;font-weight:600;font-size:var(--step-sm);-webkit-text-fill-color:#fff}
    .layout{max-width:1100px;margin:0 auto;padding:48px 24px 80px;display:grid;grid-template-columns:1fr 300px;gap:48px}
    @media(max-width:860px){.layout{grid-template-columns:1fr}.sidebar{display:none}}
    .article-header{margin-bottom:32px}
    .article-category{font-size:var(--step-xs);font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#7b2ff7;margin-bottom:12px}
    .article-title{font-size:var(--step-2xl);font-weight:800;line-height:1.25;color:#1a1a2e;margin-bottom:16px}
    .article-meta{font-size:var(--step-xs);color:#9ca3af;display:flex;gap:16px;flex-wrap:wrap}
    .article-body{background:#fff;border-radius:14px;padding:40px;border:1px solid #e5e7eb}
    .article-body h2{font-size:var(--step-lg);font-weight:700;color:#1a1a2e;margin:36px 0 14px}
    .article-body h3{font-size:var(--step-md);font-weight:600;color:#1a1a2e;margin:24px 0 10px}
    .article-body p{margin-bottom:16px;color:#374151}
    .article-body ul,.article-body ol{margin:0 0 16px 24px;color:#374151}
    .article-body li{margin-bottom:8px}
    .article-body strong{color:#1a1a2e}
    .highlight-box{background:linear-gradient(135deg,#eff6ff,#f5f3ff);border-left:4px solid #1A73E8;border-radius:0 8px 8px 0;padding:16px 20px;margin:24px 0}
    .highlight-box p{margin:0;color:#1e40af;font-weight:500}
    .step-box{background:#f8f9fa;border:1px solid #e5e7eb;border-radius:10px;padding:16px 20px;margin:12px 0;display:flex;gap:16px;align-items:flex-start}
    .step-num{background:#1A73E8;color:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--step-sm);flex-shrink:0;margin-top:2px}
    .step-content strong{display:block;margin-bottom:4px;color:#1a1a2e}
    .step-content p{margin:0;font-size:var(--step-sm);color:#6b7280}
    .faq-item{border-bottom:1px solid #e5e7eb;padding:20px 0}
    .faq-item:last-child{border-bottom:none}
    .faq-q{font-weight:700;color:#1a1a2e;margin-bottom:8px}
    .faq-a{color:#374151;font-size:var(--step-md);margin:0}
    .cta-box{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-radius:14px;padding:36px;text-align:center;margin-top:40px}
    .cta-box h3{color:#fff;font-size:var(--step-lg);font-weight:800;margin-bottom:10px}
    .cta-box p{color:#a0aec0;margin-bottom:24px}
    .cta-btn{display:inline-block;background:#1A73E8;color:#fff;padding:14px 32px;border-radius:10px;font-weight:700;font-size:var(--step-md);text-decoration:none}
    .cta-btn:hover{background:#1558b0;text-decoration:none}
    .ad-block{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px;text-align:center;margin:32px 0;min-height:100px}
    .sidebar{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;gap:20px}
    .sidebar-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px}
    .sidebar-card h4{font-size:var(--step-sm);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#7b2ff7;margin-bottom:12px}
    .sidebar-card ul{list-style:none;padding:0;margin:0}
    .sidebar-card ul li{padding:6px 0;border-bottom:1px solid #f3f4f6;font-size:var(--step-sm)}
    .sidebar-card ul li:last-child{border-bottom:none}
    .sidebar-card ul li a{color:#374151;font-weight:500}
    .sidebar-tool-card{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;padding:24px;text-align:center;color:#fff}
    .sidebar-tool-card h4{color:#fff;font-size:var(--step-md);font-weight:700;margin-bottom:8px}
    .sidebar-tool-card p{color:#a0aec0;font-size:var(--step-sm);margin-bottom:16px}
    .sidebar-tool-card a{display:block;background:#1A73E8;color:#fff;padding:10px;border-radius:8px;font-weight:600;font-size:var(--step-sm)}
    footer{background:#1a1a2e;color:#a0aec0;text-align:center;padding:32px 24px;font-size:var(--step-sm)}
    footer a{color:#7b2ff7}
  
    /* These marketing headers had no mobile breakpoint at all: logo + three text
       links + the CTA needed ~440px of a 375px screen, so the CTA sat off-screen
       and every page scrolled sideways on a phone. Drop the text links below
       640px and keep the logo and the CTA, which is the only one that converts.
       a:not([class]) is the plain nav links; the CTA carries btn-primary/btn-tool. */
    @media (max-width: 640px) {
      .header-nav a:not([class]) { display: none; }
      .header-nav { gap: 12px; }
    }
</style>


/* ── Notes-page specifics ─────────────────────────────────────────────────── */
.source-box{background:#f8f9ff;border:1px solid #e3e6f5;border-left:4px solid #1A73E8;
  border-radius:8px;padding:var(--space-sm);margin:var(--space-md) 0;font-size:var(--step-sm);color:#4b5563}
.source-box strong{color:#1a1a2e}
.source-box a{color:#1A73E8}
.licence-note{font-size:var(--step-xs);color:#6b7280;margin-top:var(--space-2xs);line-height:1.55}
.chapter{border-left:3px solid #e3e6f5;padding-left:var(--space-sm);margin-bottom:var(--space-md)}
.chapter h3{margin:0 0 var(--space-3xs);font-size:var(--step-lg);color:#1a1a2e}
.chapter .ts{display:inline-block;font-size:var(--step-2xs);font-weight:700;color:#1A73E8;
  background:#eef4ff;border-radius:4px;padding:2px 7px;margin-bottom:var(--space-2xs)}
.chapter p{margin:0 0 var(--space-2xs);color:#4b5563}
.chapter ul{margin:0;padding-left:1.15rem;color:#4b5563}
.terms{display:grid;gap:var(--space-xs);padding:0;list-style:none;margin:0}
.terms li{background:#fff;border:1px solid #eceef7;border-radius:8px;padding:var(--space-xs) var(--space-sm)}
.terms b{color:#1a1a2e}
.kp{padding-left:1.15rem;color:#4b5563}
.kp li{margin-bottom:var(--space-2xs)}
.kp .ts{font-size:var(--step-2xs);font-weight:700;color:#1A73E8;margin-right:6px}
.cta-box{background:linear-gradient(135deg,#1A73E8,#7b2ff7);color:#fff;border-radius:12px;
  padding:var(--space-md);margin:var(--space-lg) 0 var(--space-md);text-align:center}
.cta-box h2{color:#fff;margin:0 0 var(--space-2xs);font-size:var(--step-xl)}
.cta-box p{color:rgba(255,255,255,.9);margin:0 0 var(--space-sm);font-size:var(--step-sm)}
.cta-box a{display:inline-block;background:#fff;color:#1A73E8;font-weight:700;
  padding:12px 26px;border-radius:8px;text-decoration:none}
.course-index{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-xs)}
.course-index li{border:1px solid #eceef7;border-radius:8px;padding:var(--space-xs) var(--space-sm)}
.course-index a{color:#1A73E8;font-weight:600;text-decoration:none}
.course-index span{display:block;font-size:var(--step-xs);color:#6b7280;margin-top:2px}