@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600&display=swap");
/* CompTIA Security+ (SY0-701) companion: course design system, shared with the CISSP guide.
   Semantic tokens first (the contract), Hermetic brand palette behind them. */

:root{
  --on-a:#fff;
  /* Hermetic ground tokens */
  --ground:#eef1f5; --surface:#ffffff; --surface-2:#f6f8fb;
  --ink:#141a22; --muted:#57616e; --faint:#8a94a1; --line:#dde3ea;
  --a:#106efd; --a-tint:rgba(16,110,253,.08); --a-line:rgba(16,110,253,.34); --a-ink:#011871;
  --ok:#1f7a44; --ok-tint:rgba(31,122,68,.08); --warn:#b26a1c; --warn-tint:rgba(178,106,28,.09); --bad:#b3261e; --bad-tint:rgba(179,38,30,.08);

  /* Contract aliases */
  --color-bg:var(--ground);
  --color-surface:var(--surface);
  --color-surface-muted:var(--surface-2);
  --color-text:var(--ink);
  --color-muted:var(--muted);
  --color-border:var(--line);
  --color-brand:var(--a);
  --color-brand-strong:var(--a-ink);
  --color-brand-soft:var(--a-tint);
  --color-accent:#40cfde;
  --color-accent-text:#0b5d66;
  --color-focus:#106efd;
  --color-success:var(--ok);
  --color-warning:var(--warn);
  --color-danger:var(--bad);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px;
  --radius-1:6px; --radius-2:12px;
  --shadow-1:0 1px 2px rgba(20,26,34,.06);
  --shadow-2:0 6px 20px rgba(20,26,34,.08);
  --measure:70ch;
  --target-min:44px;

  --h-font:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --b-font:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#10151c; --surface:#161c24; --surface-2:#1c232c;
    --ink:#dde3ea; --muted:#9ca6b1; --faint:#6c7682; --line:#27303a; --heading:#eef2f6;
    --a:#40cfde; --a-tint:rgba(64,207,222,.10); --a-line:rgba(64,207,222,.30); --a-ink:#40cfde; --on-a:#06232a;
    --ok:#6dbd8b; --ok-tint:rgba(109,189,139,.12); --warn:#d9a35f; --warn-tint:rgba(217,163,95,.12); --bad:#e8958e; --bad-tint:rgba(232,149,142,.12);
    --color-accent:#40cfde; --color-accent-text:#40cfde; --color-focus:#40cfde;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#10151c; --surface:#161c24; --surface-2:#1c232c;
  --ink:#dde3ea; --muted:#9ca6b1; --faint:#6c7682; --line:#27303a; --heading:#eef2f6;
  --a:#40cfde; --a-tint:rgba(64,207,222,.10); --a-line:rgba(64,207,222,.30); --a-ink:#40cfde; --on-a:#06232a;
  --ok:#6dbd8b; --ok-tint:rgba(109,189,139,.12); --warn:#d9a35f; --warn-tint:rgba(217,163,95,.12); --bad:#e8958e; --bad-tint:rgba(232,149,142,.12);
  --color-accent:#40cfde; --color-accent-text:#40cfde; --color-focus:#40cfde;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 6px 20px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--color-bg); color:var(--color-text); font:16px/1.6 var(--b-font); -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; height:auto}
a{color:var(--color-brand-strong)}
a:hover{color:var(--color-brand)}
h1,h2,h3,h4{font-family:var(--h-font); font-stretch:75%; font-weight:800; line-height:1.15; margin:0 0 var(--space-3); color:var(--color-text)}
h1{font-size:clamp(28px,4vw,40px)}
h2{font-size:clamp(21px,2.6vw,27px); margin-top:var(--space-6)}
h3{font-size:18px; margin-top:var(--space-5)}
p,ul,ol,dl{margin:0 0 var(--space-4)}
code{font-family:ui-monospace,Consolas,monospace; font-size:.92em; background:var(--color-surface-muted); padding:1px 5px; border-radius:4px}
table{border-collapse:collapse; width:100%; margin:0 0 var(--space-5); font-size:15px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--color-border); vertical-align:top}
th{font-weight:700; background:var(--color-surface-muted)}
.tablewrap,.reader table{display:block; overflow-x:auto; max-width:100%}
.reader table{display:table}
.reader .tablewrap{display:block}
button{font:inherit}

/* Focus */
:focus-visible{outline:3px solid var(--color-focus); outline-offset:2px; border-radius:4px}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:8px; background:var(--color-brand-strong); color:var(--on-a); padding:10px 14px; border-radius:var(--radius-1); z-index:100}
.skip-link:focus{left:8px}

/* Header */
.course-header{position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:var(--space-4); padding:10px clamp(16px,3vw,32px); background:var(--color-surface); border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-1)}
.brand{flex:0 0 auto}
.brand img{height:34px; width:auto; display:block}
.brand img.logo-dark{display:none}
:root[data-theme="dark"] .brand img.logo-dark{display:block}
:root[data-theme="dark"] .brand img.logo-light{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .brand img.logo-dark{display:block} :root:not([data-theme="light"]) .brand img.logo-light{display:none} }
.course-name{margin:0; font-weight:800; font-stretch:75%; font-size:18px; flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
.course-name a{text-decoration:none; color:var(--color-text)}
.section-nav{display:flex; flex-wrap:wrap; gap:4px; padding-bottom:var(--space-3); margin-bottom:var(--space-3); border-bottom:1px solid var(--color-border)}
.section-nav a{text-decoration:none; color:var(--color-muted); padding:5px 10px; border-radius:999px; border:1px solid var(--color-border); display:inline-flex; align-items:center; font-weight:600; font-size:13px; line-height:1.3}
.section-nav a:hover,.section-nav a.on{color:var(--color-brand-strong); background:var(--color-brand-soft); border-color:transparent}
.onpage{padding-bottom:var(--space-3); margin-bottom:var(--space-3); border-bottom:1px solid var(--color-border)}
.onpage[hidden]{display:none}
.outline-h{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--color-muted); margin:0 0 4px}
.onpage nav{display:flex; flex-direction:column}
.onpage nav a{text-decoration:none; color:var(--color-text); font-size:13.5px; line-height:1.35; padding:5px 8px; border-left:2px solid var(--color-border)}
.onpage nav a:hover{color:var(--color-brand-strong); background:var(--color-surface-muted)}
.onpage nav a.on{color:var(--color-brand-strong); border-left-color:var(--color-brand); font-weight:700}
.outline-toggle,.themebtn{min-height:var(--target-min); padding:8px 12px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); border-radius:var(--radius-1); cursor:pointer; font-weight:600; flex:0 0 auto}
.outline-toggle{display:none; gap:6px}
.outline-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}

/* Layout */
.course-layout{max-width:1280px; margin:0 auto; display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(20px,3vw,40px); padding:clamp(20px,3vw,36px) clamp(16px,3vw,32px) 60px; align-items:start}
.course-outline{position:sticky; top:72px; max-height:calc(100vh - 90px); overflow:auto; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4)}
.course-main{min-width:0}
.view[hidden]{display:none}

/* Progress */
.progress-panel{padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border); margin-bottom:var(--space-4)}
.progress-label{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-muted); margin:0 0 6px}
progress[data-progress-bar]{width:100%; height:10px; accent-color:var(--color-brand)}
.continue-link{display:inline-block; margin-top:8px; font-size:14px; font-weight:600}

/* Outline */
.outline-track{margin:0 0 var(--space-4)}
.outline-track h3{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--color-muted); margin:0 0 6px}
.outline-track ol{list-style:none; margin:0; padding:0}
.outline-track li a{display:flex; gap:8px; align-items:baseline; padding:7px 8px; border-radius:var(--radius-1); text-decoration:none; color:var(--color-text); font-size:14px; line-height:1.35; min-height:var(--target-min)}
.outline-track li a:hover{background:var(--color-surface-muted)}
.outline-track li a.current{background:var(--color-brand-soft); color:var(--color-brand-strong); font-weight:700}
.outline-track li a.done .no{color:var(--color-success)}
.outline-track .no{font-weight:800; font-stretch:75%; color:var(--color-brand); min-width:24px}
.outline-track li a.done .no::after{content:" \2713"}

/* Hero */
.hero{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:clamp(20px,3vw,32px); margin-bottom:var(--space-6)}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted); margin:0 0 6px}
.promise{font-size:18px; max-width:var(--measure)}
.guiding-question{color:var(--color-muted); max-width:var(--measure)}
.hero-actions{display:flex; gap:var(--space-3); flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--target-min); padding:10px 16px; border-radius:var(--radius-1); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); text-decoration:none; font-weight:700; cursor:pointer}
.btn:hover{border-color:var(--color-brand); color:var(--color-brand-strong)}
.btn-primary{background:var(--color-brand); color:var(--on-a); border-color:var(--color-brand)}
.btn-primary:hover{background:var(--color-brand-strong); color:var(--on-a)}
.btn[aria-pressed="true"]{background:var(--color-success); border-color:var(--color-success); color:var(--on-a)}

/* Course map */
.course-map{margin-bottom:var(--space-6)}
.course-visual{margin:0 0 var(--space-4); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-3)}
.course-visual img{display:block; width:100%; max-width:720px; margin:0 auto}
.course-visual figcaption{font-size:14px; color:var(--color-muted); margin-top:8px}
.mode-choice{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4)}
.mode-card{display:block; background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-brand); border-radius:var(--radius-2); padding:var(--space-4); text-decoration:none; color:inherit}
.mode-card:hover{border-color:var(--color-brand); box-shadow:var(--shadow-2)}
.mode-card h3{margin-top:0}
.mode-card p{margin:0; color:var(--color-muted)}

/* Track tabs */
.track-tabs{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4)}
.track-tabs [role="tab"]{min-height:var(--target-min); padding:8px 14px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-muted); font-weight:700; cursor:pointer}
.track-tabs [role="tab"][aria-selected="true"]{background:var(--color-brand); border-color:var(--color-brand); color:var(--on-a)}
.track-panel[hidden]{display:none}
.track-goal{color:var(--color-muted); max-width:var(--measure)}
.module-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--space-4); list-style:none; padding:0; margin:0}
.module-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-1)}
.module-card.current{border-color:var(--color-brand); box-shadow:0 0 0 2px var(--color-brand-soft)}
.module-card.done{border-left:4px solid var(--color-success)}
.module-card .status{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-muted); background:var(--color-surface-muted); align-self:flex-start}
.module-card.done .status{color:var(--color-success); border-color:var(--color-success); background:var(--ok-tint)}
.module-card h3{margin:0; font-size:17px}
.module-card h3 a{text-decoration:none; color:inherit}
.module-card h3 a:hover{color:var(--color-brand-strong)}
.module-card p{margin:0; color:var(--color-muted); font-size:14px}
.module-card .concepts{font-size:12.5px; color:var(--color-muted)}
.module-card .concepts span{display:inline-block; background:var(--color-surface-muted); border-radius:4px; padding:2px 6px; margin:2px 4px 0 0}

/* Habits */
.habits-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4)}
.card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); box-shadow:var(--shadow-1)}
.card h3,.card h4{margin-top:0; font-size:16.5px}
.card p:last-child{margin-bottom:0}
.plan-link{margin-top:var(--space-4)}

/* Reader */
.reader{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:clamp(18px,3vw,36px)}
.reader > div > *, .reader p, .reader li{max-width:var(--measure)}
.reader table, .reader figure, .reader .lesson-diagram, .reader .first-principles-grid, .reader .quiz, .reader .lab-card, .reader .rubric, .reader .tablewrap{max-width:none}
.module-header{margin-bottom:var(--space-5); padding-bottom:var(--space-4); border-bottom:1px solid var(--color-border)}
.module-eyebrow{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted); margin:0 0 6px}
.module-lede{font-size:18px; color:var(--color-muted)}

/* Lesson diagram: full reader width, prose below */
.lesson-diagram .diagram-art{margin:0 0 var(--space-4); background:var(--color-surface-muted); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-3)}
.lesson-diagram .diagram-art img{display:block; width:100%; max-width:760px; margin:0 auto; border-radius:8px; background:#fff}
.lesson-diagram figcaption{font-size:14px; color:var(--color-muted); margin-top:8px}
.lesson-diagram p[data-example]::before,.lesson-diagram p[data-metaphor]::before,.lesson-diagram p[data-test]::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--color-brand); margin-right:8px; vertical-align:middle}

/* Real-world anchor */
.real-world-anchor{border-left:4px solid var(--color-accent); background:var(--color-surface-muted); padding:var(--space-4) var(--space-5); border-radius:0 var(--radius-2) var(--radius-2) 0; margin:var(--space-5) 0}
.real-world-anchor h2{margin-top:0}
.real-world-anchor p[data-boundary]{color:var(--color-muted); margin-bottom:0}

/* First principles grid */
.first-principles-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--space-3); margin-bottom:var(--space-4)}
.first-principles-grid > div{background:var(--color-surface-muted); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-3) var(--space-4)}
.first-principles-grid h3{margin-top:0; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--color-muted)}
.card-lead{font-weight:700; margin:0 0 6px}
.card-points{margin:0; padding-left:18px; font-size:14.5px}
.card-points li{margin-bottom:4px}
.teach-back{border-left:4px solid var(--color-brand); padding:var(--space-3) var(--space-4); background:var(--color-brand-soft); border-radius:0 var(--radius-2) var(--radius-2) 0}
.teach-back h3{margin-top:0; font-size:15px}
.teach-back p{margin:0}

/* Reasoning, trap, practice */
.expert-upgrade p[data-move]{border-left:3px solid var(--color-accent); padding-left:12px}
.common-trap{background:var(--warn-tint); border-left:4px solid var(--color-warning); padding:var(--space-4) var(--space-5); border-radius:0 var(--radius-2) var(--radius-2) 0}
.common-trap h2{margin-top:0}
.common-trap p:last-child{margin-bottom:0}
.practice-levels [data-practice]{border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); margin-bottom:var(--space-3); background:var(--color-surface)}
.practice-levels [data-practice]::before{display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); margin-bottom:6px}
.practice-levels [data-practice="worked"]::before{content:"Worked for you"}
.practice-levels [data-practice="faded"]::before{content:"You finish it"}
.practice-levels [data-practice="independent"]::before{content:"On your own"}
.practice-levels [data-practice="transfer"]::before{content:"New surface, same idea"}
details{border:1px solid var(--color-border); border-radius:var(--radius-1); padding:8px 12px; margin:8px 0}
summary{cursor:pointer; font-weight:700}
details[open] summary{margin-bottom:8px}

/* Rubrics */
.rubric th:first-child{width:38%}
.rubric-threshold,.rubric-weak,.rubric-repair{font-size:15px}
.rubric-repair{border-left:3px solid var(--color-warning); padding-left:10px}
.build-project{border:1px solid var(--color-border); border-top:4px solid var(--color-brand); border-radius:var(--radius-2); padding:var(--space-4) var(--space-5); margin:var(--space-5) 0}
.build-project h2{margin-top:0}
.project-goal{font-size:17px; font-weight:600}

/* Quiz */
.quiz{border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); margin:var(--space-4) 0; background:var(--color-surface)}
.quiz fieldset{border:0; padding:0; margin:0; min-width:0}
.quiz legend{float:left; width:100%; padding:0; margin:0 0 10px; font-weight:700}
.quiz legend + *{clear:both}
.quiz .quiz-stem{font-weight:700}
.quiz-options{list-style:none; padding:0; margin:0 0 10px}
.quiz-options li{margin:0}
.quiz-options label{display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start; padding:8px 10px; border-radius:var(--radius-1); min-height:var(--target-min); cursor:pointer}
.quiz-options label:hover{background:var(--color-surface-muted)}
.quiz-options input{margin:4px 0 0; width:18px; height:18px}
.quiz-options li.right label{background:var(--ok-tint); outline:1px solid var(--color-success)}
.quiz-options li.wrong label{background:var(--bad-tint); outline:1px solid var(--color-danger)}
.quiz-feedback{font-weight:700; margin:6px 0}
.quiz-feedback.ok{color:var(--color-success)}
.quiz-feedback.bad{color:var(--color-danger)}
.quiz-explain{display:none; background:var(--color-surface-muted); border-radius:var(--radius-1); padding:10px 12px; margin:0}
.quiz.answered .quiz-explain{display:block}
.quiz-check{margin-top:4px}

/* Labs */
.lab-card{border:1px solid var(--color-border); border-left:4px solid var(--color-accent); border-radius:var(--radius-2); padding:var(--space-4) var(--space-5); margin:var(--space-4) 0; background:var(--color-surface-muted)}
.lab-card h3{margin-top:0}
.lab-card .lab-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-muted); margin:0 0 4px}
.lab-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-3); margin:var(--space-3) 0}
.lab-grid label{display:flex; flex-direction:column; gap:4px; font-size:14px; font-weight:600}
.lab-grid input,.lab-grid select{min-height:var(--target-min); padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-1); background:var(--color-surface); color:var(--color-text); font:inherit}
.lab-grid input[aria-invalid="true"]{border-color:var(--color-danger); outline:2px solid var(--bad-tint)}
.lab-error{color:var(--color-danger); font-weight:700; margin:4px 0}
.lab-output{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-1); padding:var(--space-3) var(--space-4); margin:var(--space-3) 0}
.lab-output .result{font-size:20px; font-weight:800; font-stretch:75%; color:var(--color-brand-strong); margin:0 0 6px}
.lab-output p:last-child{margin-bottom:0}
.lab-section{margin:var(--space-3) 0}
.lab-section h4{font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--color-muted); margin:0 0 4px}
.lab-section p,.lab-section li{margin-bottom:4px; font-size:15px}
.lab-choice{display:flex; flex-direction:column; gap:6px; margin:var(--space-3) 0}
.lab-choice label{display:grid; grid-template-columns:24px 1fr; gap:10px; min-height:var(--target-min); align-items:center; padding:6px 10px; border-radius:var(--radius-1); background:var(--color-surface); border:1px solid var(--color-border); cursor:pointer}
.lab-order{list-style:none; padding:0; margin:var(--space-3) 0; display:flex; flex-direction:column; gap:6px}
.lab-order li{display:flex; align-items:center; gap:8px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-1); padding:6px 10px}
.lab-order button{min-height:var(--target-min); min-width:var(--target-min); border:1px solid var(--color-border); background:var(--color-surface-muted); border-radius:var(--radius-1); cursor:pointer}

/* Completion */
.completion{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--color-border)}
.next-up{margin-top:var(--space-5); font-weight:600}
.back-link{margin-top:var(--space-5)}

/* Problems */
.problems-intro,.patterns-intro,.resources-intro,.glossary-intro{margin-bottom:var(--space-5); max-width:var(--measure)}
.problem-track{margin-bottom:var(--space-6)}
.problem-track h2{margin-top:0}
.problem-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4); list-style:none; padding:0; margin:0}
.problem-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-1)}
.problem-card.done{border-left:4px solid var(--color-success)}
.problem-card .difficulty{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; align-self:flex-start; padding:4px 9px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-muted); background:var(--color-surface-muted)}
.problem-card .difficulty.hard,.problem-card .difficulty.capstone{color:var(--color-warning); border-color:var(--color-warning); background:var(--warn-tint)}
.problem-card h3{margin:0; font-size:17px}
.problem-card h3 a{text-decoration:none; color:inherit}
.problem-card dl{margin:0; font-size:14px; display:grid; grid-template-columns:auto 1fr; gap:2px 10px}
.problem-card dt{font-weight:700; color:var(--color-muted)}
.problem-card dd{margin:0}

/* Problem prompts */
.problem-framing{background:var(--color-brand-soft); border-left:4px solid var(--color-brand); padding:var(--space-4) var(--space-5); border-radius:0 var(--radius-2) var(--radius-2) 0}
.problem-framing h2{margin-top:0}
[data-prompt]{border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); margin:var(--space-4) 0; background:var(--color-surface)}
[data-prompt] textarea{width:100%; min-height:96px; padding:10px; border:1px solid var(--color-border); border-radius:var(--radius-1); font:inherit; background:var(--color-surface); color:var(--color-text); margin:8px 0}
[data-problem-feedback]{display:none; background:var(--color-surface-muted); border-left:3px solid var(--color-accent); padding:10px 12px; border-radius:0 var(--radius-1) var(--radius-1) 0; margin-top:8px}
[data-prompt].answered [data-problem-feedback]{display:block}
.expert-name{border-top:4px solid var(--color-accent); padding-top:var(--space-4); margin-top:var(--space-5)}

/* Patterns */
.pattern-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-4)}
.pattern-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4) var(--space-5); box-shadow:var(--shadow-1)}
.pattern-card h3{margin-top:0}
.pattern-card .formal{font-size:13px; color:var(--color-muted); margin:-6px 0 10px}
.pattern-card .cue{border-left:3px solid var(--color-accent); padding-left:10px; font-weight:600}
.pattern-card ol{padding-left:20px; font-size:15px}
.pattern-card .trace{background:var(--color-surface-muted); border-radius:var(--radius-1); padding:10px 12px; font-size:14.5px}
.pattern-card .misleads{color:var(--color-warning); font-size:14.5px}
.pattern-card .contrast{font-size:14px; color:var(--color-muted)}
.pattern-card .maps{font-size:13px}
.pattern-card .maps a{margin-right:8px}
.drills{margin-top:var(--space-6)}
.drill{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-4)}
.drill .track-chip{font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--color-muted)}
.drill-feedback{display:none; margin-top:10px; padding:10px 12px; border-radius:var(--radius-1); background:var(--color-surface-muted)}
.drill.answered .drill-feedback{display:block}
.drill-feedback.ok{border-left:3px solid var(--color-success)}
.drill-feedback.bad{border-left:3px solid var(--color-warning)}

/* Resources */
.resource-filters{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4)}
.resource-filters label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--color-muted)}
.resource-filters select{min-height:var(--target-min); padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-1); background:var(--color-surface); color:var(--color-text); font:inherit; min-width:150px}
.resource-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--space-4)}
.resource-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-1)}
.resource-card .meta{font-size:12.5px; color:var(--color-muted)}
.resource-card .meta span{display:inline-block; background:var(--color-surface-muted); border-radius:4px; padding:2px 6px; margin:0 4px 4px 0}
.resource-card h3{margin:0; font-size:16.5px}
.resource-card p{margin:0; font-size:14.5px}
.resource-card .use-when{font-weight:600}
.resource-card .action{margin-top:auto; align-self:flex-start}

/* Glossary */
.glossary-search{display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:14px; max-width:360px}
.glossary-search input{min-height:var(--target-min); padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-1); background:var(--color-surface); color:var(--color-text); font:inherit}
.glossary{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4) var(--space-5)}
.glossary dt{font-weight:700; margin-top:var(--space-3)}
.glossary dd{margin:0 0 4px; color:var(--color-muted)}
.glossary dd .src{font-size:13px}

/* Footer */
.course-footer{max-width:1280px; margin:0 auto; padding:0 clamp(16px,3vw,32px) 40px; color:var(--color-muted); font-size:14px}
.course-footer .tag{font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px}

/* Flashcards */
.flash-intro{margin-bottom:var(--space-4); max-width:var(--measure)}
.flash-controls{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:var(--space-4)}
.flash-controls label{display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:13px}
.flash-controls select{min-height:var(--target-min); padding:6px 10px; border:1px solid var(--color-border); border-radius:var(--radius-1); background:var(--color-surface); color:var(--color-text); font:inherit; font-weight:400; max-width:min(340px,86vw)}
.flash-stage{max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-3)}
.flash-count{margin:0; text-align:center; color:var(--color-muted); font-size:14px; font-weight:600}
.flashcard{position:relative; display:block; width:100%; height:clamp(260px,50vh,400px); border:0; padding:0; background:none; cursor:pointer; touch-action:pan-y; font:inherit; color:inherit; transition:transform .2s ease; -webkit-tap-highlight-color:transparent}
.flashcard.swiping{transition:none}
.flashcard.dealt{animation:deal .28s ease}
@keyframes deal{from{opacity:0; transform:translateY(10px) scale(.98)}to{opacity:1; transform:none}}
.flashcard .face{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:clamp(20px,5vw,40px); text-align:center; overflow:auto;
  border-radius:18px; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-2);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:perspective(1400px) rotateY(0); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.flashcard .back{transform:perspective(1400px) rotateY(180deg); border-top:4px solid var(--color-brand)}
.flashcard.flipped .front{transform:perspective(1400px) rotateY(-180deg)}
.flashcard.flipped .back{transform:perspective(1400px) rotateY(0)}
.flashcard[hidden],.flash-actions[hidden],.flash-done[hidden]{display:none}
.fc-label{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted)}
.fc-term{font-size:clamp(26px,6vw,38px); font-weight:800; font-stretch:75%; line-height:1.1; color:var(--color-text)}
.fc-def{font-size:clamp(16px,3.8vw,19px); line-height:1.55; max-width:46ch; color:var(--color-text)}
.fc-src{font-size:13px; color:var(--color-muted)}
.flash-actions{display:grid; grid-template-columns:56px 1fr 1fr; gap:10px}
.flash-actions .btn{justify-content:center; min-height:52px; font-size:16px; font-weight:700}
.flash-again{color:var(--color-danger); border-color:color-mix(in srgb,var(--color-danger) 45%,transparent)}
.flash-again:hover{background:var(--bad-tint); color:var(--color-danger); border-color:var(--color-danger)}
.flash-done{text-align:center; background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; padding:var(--space-5)}
.flash-done h2{margin-top:0}
.flash-help{text-align:center; font-size:13px; color:var(--color-muted); margin:0; line-height:1.7}
.flash-help kbd{font:600 11.5px/1 inherit; border:1px solid var(--color-border); border-radius:4px; padding:2px 5px; background:var(--color-surface)}

/* Responsive */
@media (max-width: 960px){
  .course-layout{grid-template-columns:minmax(0,1fr)}
  /* Phones and tablets: the menu is a drawer from the right, out of the way until opened. */
  .course-outline{position:fixed; top:var(--hdr,56px); right:0; bottom:0; left:auto; width:min(380px,100%); max-height:none; z-index:40; border-radius:0; border-width:0 0 0 1px; box-shadow:var(--shadow-2);
    transform:translateX(105%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s}
  .course-outline.open{transform:none; visibility:visible; transition:transform .22s ease; box-shadow:0 0 0 100vmax rgba(8,14,24,.35)}
  .outline-toggle{display:inline-flex; align-items:center}
  .onpage nav a{padding:8px 10px; font-size:14.5px}
  .section-nav a{padding:7px 12px; font-size:14px}
  .reader{padding:16px}
  .first-principles-grid{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .course-outline{width:100%; border-left:0}
  .course-outline.open{box-shadow:none}
  /* Flashcards: card and grading buttons on one screen. */
  .flash-intro{margin-bottom:var(--space-3)}
  .flash-intro p{display:none}
  .flash-controls{display:grid; grid-template-columns:1fr auto auto; gap:8px; margin-bottom:var(--space-3)}
  .flash-controls label:first-child{grid-column:1/-1}
  .flash-controls select{max-width:none; width:100%}
  .flash-controls .btn{min-height:var(--target-min); padding:6px 12px; font-size:14px}
  .flashcard{height:clamp(240px,44vh,360px)}
  .flash-help{display:none}
}
@media (max-width: 560px){
  .course-header{gap:8px; padding:8px 12px}
  .course-name{font-size:15px}
  .brand img{height:26px}
  .outline-toggle,.themebtn{padding:6px 10px; min-height:38px; font-size:13.5px}
  table{font-size:13.5px}
  .reader table{display:block; overflow-x:auto}
  th,td{padding:6px}
}

/* Dark mode: take the glare off bright diagrams and screenshots. */
:root[data-theme="dark"] .course-main img{filter:brightness(.9)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .course-main img{filter:brightness(.9)} }

/* =====================================================================================
   Framer-style theme, matching the training site (2026-10-03, see _assets/STYLE.md).
   Dark grey boxes on a textured background, mac-style buttons, Inter type, cyan accents.
   ===================================================================================== */
:root{
  --surface-3:#eceef2; --line-2:rgba(16,24,40,.15);
  --pat:rgba(16,24,40,.06); --glow-a:rgba(64,207,222,.20); --glow-b:rgba(16,110,253,.12);
  --btn:linear-gradient(#ffffff,#eef0f3); --btn-edge:rgba(16,24,40,.16); --btn-hi:rgba(255,255,255,.95); --btn-ink:#16181d; --btn-shadow:0 1px 2px rgba(16,24,40,.12);
  --well:rgba(16,24,40,.05);
  --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(16%2C24%2C40%2C0.07)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  --radius-1:8px; --radius-2:18px;
  --h-font:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --b-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow-1:none; --shadow-2:none;
}
:root[data-theme="dark"]{
  --ground:#0a0c10; --surface:#15171c; --surface-2:#1b1e24; --surface-3:#23262d;
    --ink:#e6e8ec; --muted:#a0a5ae; --faint:#6b707a; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
    --pat:rgba(255,255,255,.05); --glow-a:rgba(64,207,222,.13); --glow-b:rgba(16,110,253,.17);
    --btn:linear-gradient(#3b3e45,#2c2f35); --btn-edge:rgba(255,255,255,.10); --btn-hi:rgba(255,255,255,.10); --btn-ink:#eceef1; --btn-shadow:0 1px 2px rgba(0,0,0,.45);
    --well:rgba(0,0,0,.28);
    --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.06)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0a0c10; --surface:#15171c; --surface-2:#1b1e24; --surface-3:#23262d;
    --ink:#e6e8ec; --muted:#a0a5ae; --faint:#6b707a; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
    --pat:rgba(255,255,255,.05); --glow-a:rgba(64,207,222,.13); --glow-b:rgba(16,110,253,.17);
    --btn:linear-gradient(#3b3e45,#2c2f35); --btn-edge:rgba(255,255,255,.10); --btn-hi:rgba(255,255,255,.10); --btn-ink:#eceef1; --btn-shadow:0 1px 2px rgba(0,0,0,.45);
    --well:rgba(0,0,0,.28);
    --cube:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2745.03%27%20height%3D%2778%27%20viewBox%3D%270%200%2045.03%2078%27%3E%3Cpath%20d%3D%27M0%20-26L22.52%20-13L22.52%2013L0%2026L-22.52%2013L-22.52%20-13ZM0%200L-22.52%20-13M0%200L22.52%20-13M0%200L0%2026M45.03%20-26L67.55%20-13L67.55%2013L45.03%2026L22.52%2013L22.52%20-13ZM45.03%200L22.52%20-13M45.03%200L67.55%20-13M45.03%200L45.03%2026M22.52%2013L45.03%2026L45.03%2052L22.52%2065L0%2052L0%2026ZM22.52%2039L0%2026M22.52%2039L45.03%2026M22.52%2039L22.52%2065M0%2052L22.52%2065L22.52%2091L0%20104L-22.52%2091L-22.52%2065ZM0%2078L-22.52%2065M0%2078L22.52%2065M0%2078L0%20104M45.03%2052L67.55%2065L67.55%2091L45.03%20104L22.52%2091L22.52%2065ZM45.03%2078L22.52%2065M45.03%2078L67.55%2065M45.03%2078L45.03%20104%27%20fill%3D%27none%27%20stroke%3D%27rgba(255%2C255%2C255%2C0.06)%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  }
}

/* Background: soft glows behind, the cube texture fading out down the page. */
body::before,body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none}
body::before{background:
  radial-gradient(900px 620px at 8% -12%, var(--glow-a), transparent 62%),
  radial-gradient(820px 700px at 100% 4%, var(--glow-b), transparent 60%),
  radial-gradient(1100px 760px at 50% 125%, var(--glow-b), transparent 62%)}
body::after{background-image:var(--cube); background-size:45.03px 78px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, rgba(0,0,0,.6) 45%, transparent 80%)}
body{font-size:17px; letter-spacing:-.006em}

/* Type: medium-weight Inter Tight, tight tracking. */
h1,h2,h3,h4{font-family:var(--h-font); font-stretch:100%; font-weight:600; letter-spacing:-.025em}
h1{letter-spacing:-.035em}
.course-name{font-family:var(--h-font); font-stretch:100%; font-weight:600; letter-spacing:-.02em}

/* Chrome. */
body:not(#x) .course-header{background:color-mix(in srgb,var(--ground) 72%,transparent); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); box-shadow:none}
body:not(#x) .course-outline{background:var(--surface); border:1px solid var(--line); box-shadow:none}
@media (max-width:960px){ body:not(#x) .course-outline{background:color-mix(in srgb,var(--surface) 94%,transparent); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)} }
body:not(#x) .reader{background:var(--surface); border:1px solid var(--line); box-shadow:none}

/* Dark grey boxes everywhere. */
body:not(#x) .card,body:not(#x) .module-card,body:not(#x) .mode-card,body:not(#x) .problem-card,body:not(#x) .pattern-card,
body:not(#x) .resource-card,body:not(#x) .lab-card,body:not(#x) .hero,body:not(#x) .quiz{background:var(--surface); border:1px solid var(--line); box-shadow:none}
body:not(#x) .module-card,body:not(#x) .mode-card,body:not(#x) .problem-card{transition:background .2s, border-color .2s, transform .2s}
body:not(#x) .module-card:hover,body:not(#x) .mode-card:hover,body:not(#x) .problem-card:hover{background:var(--surface-2); border-color:var(--line-2); box-shadow:none}
body:not(#x) .mode-card:hover{transform:translateY(-2px)}
body:not(#x) .module-card.current{border-color:color-mix(in srgb,var(--a) 45%,transparent); box-shadow:none; background:linear-gradient(180deg,color-mix(in srgb,var(--a) 9%,var(--surface)),var(--surface) 70%)}

/* Mac-style buttons; the primary is a cyan mac button with dark text. */
body:not(#x) .btn,body:not(#x) .outline-toggle,body:not(#x) .themebtn{background:var(--btn); color:var(--btn-ink); border:1px solid var(--btn-edge); border-radius:8px;
  box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow); font-family:var(--b-font); font-weight:500; transition:filter .15s}
body:not(#x) .btn:hover,body:not(#x) .outline-toggle:hover,body:not(#x) .themebtn:hover{filter:brightness(1.08); color:var(--btn-ink); border-color:var(--btn-edge)}
body:not(#x) .btn:active,body:not(#x) .outline-toggle:active,body:not(#x) .themebtn:active{filter:brightness(.94)}
body:not(#x) .btn-primary,body:not(#x) .btn-primary:hover{background:linear-gradient(#5ad9e6,#2fbccd); color:#04252b; border-color:rgba(0,0,0,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.35)}
body:not(#x) .btn[aria-pressed="true"]{background:linear-gradient(#6fd393,#3fae6a); color:#0a2a16; border-color:rgba(0,0,0,.18)}

/* Track tabs as a macOS segmented control. */
body:not(#x) .track-tabs{display:inline-flex; gap:2px; padding:3px; background:var(--well); border:1px solid var(--line); border-radius:10px}
body:not(#x) .track-tabs [role="tab"]{border:0; background:transparent; color:var(--muted); border-radius:7px; box-shadow:none}
body:not(#x) .track-tabs [role="tab"][aria-selected="true"]{background:var(--btn); color:var(--btn-ink); box-shadow:inset 0 1px 0 var(--btn-hi), var(--btn-shadow), 0 0 0 1px var(--btn-edge)}

/* Callouts: tinted panels with a soft edge. */
body:not(#x) .teach-back,body:not(#x) .problem-framing,body:not(#x) .real-world-anchor,body:not(#x) .common-trap,body:not(#x) .build-project{border-radius:14px}
/* Titles get focus when a page opens (for screen readers); don't draw a ring for that. */
[tabindex="-1"]:focus{outline:none}
body:not(#x) .flash-again{color:var(--bad)}

/* ===== Security+ companion additions ===== */
.hero-stats{margin:var(--space-3) 0 0; color:var(--color-muted); font-size:14.5px}
.pill{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.04em; padding:2px 9px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface-muted); color:var(--color-muted)}
.pill.ok{color:var(--color-success); border-color:var(--color-success); background:var(--ok-tint)}
.pill.src-book{color:var(--color-brand-strong); border-color:var(--a-line); background:var(--color-brand-soft)}
.pill.src-added{color:var(--color-warning); border-color:color-mix(in srgb,var(--color-warning) 45%,transparent); background:var(--warn-tint)}

/* Home: chapters in book order */
.chapter-cards{list-style:none; margin:0 0 var(--space-6); padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:var(--space-4)}
.chapter-card{display:grid; grid-template-columns:44px 1fr; gap:var(--space-3); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4)}
.chapter-card.current{border-color:var(--color-brand); box-shadow:0 0 0 2px var(--color-brand-soft)}
.chapter-card.done{border-left:4px solid var(--color-success)}
.chapter-card .no{font-weight:800; font-stretch:75%; font-size:26px; line-height:1; color:var(--color-brand); font-variant-numeric:tabular-nums}
.chapter-card h3{margin:0 0 6px; font-size:17px}
.chapter-card h3 a{text-decoration:none; color:inherit}
.chapter-card h3 a:hover{color:var(--color-brand-strong)}
.chapter-card .meta{margin:0 0 6px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:13px; color:var(--color-muted)}
.chapter-card .obj{margin:0; font-size:13px; color:var(--color-muted)}
.tool-card{display:block; text-decoration:none; color:inherit}
.tool-card:hover{border-color:var(--color-brand)}
.tool-card p{margin:0; color:var(--color-muted); font-size:14.5px}

/* Chapter reader */
.objectives{font-size:13.5px; color:var(--color-muted)}
.objectives span{display:inline-block; margin:0 6px 0 0; padding:1px 8px; border-radius:6px; border:1px solid var(--color-border); background:var(--color-surface-muted); font-variant-numeric:tabular-nums}
.chapter-links{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-3) 0 0}
.sec{margin:0 0 var(--space-6); padding-top:var(--space-4); border-top:1px solid var(--color-border)}
.sec:first-of-type{border-top:0}
.sec-kicker{margin:0 0 2px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--color-muted)}
.sec h2{margin-top:0}
.sec-body h3{margin:var(--space-5) 0 var(--space-2); font-size:19px; scroll-margin-top:84px}
.sec-body h4{margin:var(--space-4) 0 var(--space-2); font-size:16px; color:var(--color-muted)}
.sec-body aside{margin:var(--space-4) 0; padding:var(--space-3) var(--space-4); border-radius:var(--radius-1); border-left:4px solid var(--color-accent); background:var(--color-surface-muted)}
.sec-body aside p{margin:0}
.sec-body aside p + p{margin-top:var(--space-2)}
.sec-body aside.exam-note{border-left-color:var(--color-warning); background:var(--warn-tint)}
.sec-body aside.exam-note::before{content:"Exam note"; display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-warning); margin-bottom:4px}
.sec-body aside.anchor::before{content:"At a managed service provider"; display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-accent-text); margin-bottom:4px}
.sec-body table{width:100%; border-collapse:collapse; margin:var(--space-4) 0; font-size:14.5px}
.sec-body th,.sec-body td{border:1px solid var(--color-border); padding:8px 10px; text-align:left; vertical-align:top}
.sec-body th{background:var(--color-surface-muted)}
.sec-body pre{overflow-x:auto; padding:var(--space-3); border-radius:var(--radius-1); background:var(--color-surface-muted); border:1px solid var(--color-border)}
.sec-practice{margin-top:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-3) var(--space-4); background:var(--color-surface)}
.sec-practice summary{cursor:pointer; font-weight:700; min-height:var(--target-min); display:flex; align-items:center}
.sec-practice[open] summary{margin-bottom:var(--space-3)}
.sec-links{font-size:14px; color:var(--color-muted); margin:var(--space-3) 0 0}
.recall ul{padding-left:20px}
.recall li{margin-bottom:6px}

/* Practice */
.practice-intro{margin-bottom:var(--space-4); max-width:var(--measure)}
.practice-filters{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--space-3); margin-bottom:var(--space-4)}
.practice-filters label,.glossary-tools label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--color-muted)}
.practice-filters select,.glossary-tools select{min-height:var(--target-min); padding:8px 10px; border:1px solid var(--color-border); border-radius:var(--radius-1); background:var(--color-surface); color:var(--color-text); font:inherit; font-weight:500; max-width:100%}
.practice-filters select:disabled{opacity:.55}
.practice-bar{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; justify-content:space-between; margin-bottom:var(--space-4)}
.practice-count{margin:0; font-weight:700}
.practice-actions{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.practice-actions .btn[aria-pressed="true"]:not(.btn-primary){background:var(--color-brand-soft); border-color:var(--color-brand); color:var(--color-brand-strong)}
.practice-actions .btn.btn-primary[aria-pressed="false"]{background:var(--color-surface); color:var(--color-text); border-color:var(--color-border)}
.practice-actions .btn[data-show-answers][aria-pressed="true"]{background:var(--color-brand-soft); color:var(--color-brand-strong); border-color:var(--color-brand)}
.glossary-tools{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.pq{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-2); padding:var(--space-4); margin:0 0 var(--space-4)}
.sec-practice .pq{background:var(--color-surface-muted)}
.pq-meta{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:0 0 var(--space-3); font-size:13px}
.pq-where{color:var(--color-muted)}
.pq fieldset{border:0; padding:0; margin:0; min-width:0}
.pq legend{float:left; width:100%; padding:0; margin:0 0 var(--space-3); font-weight:600; line-height:1.5}
.pq legend + *{clear:both}
.pq legend code,.pq .quiz-options code{font-size:.92em}
.pq-fig{margin:0 0 var(--space-3)}
.pq-fig img{display:block; max-width:100%; height:auto; border:1px solid var(--color-border); border-radius:var(--radius-1); background:#fff}
.pq-hint{margin:0 0 var(--space-2); font-size:13.5px; color:var(--color-muted); font-style:italic}
.pq .quiz-options label{grid-template-columns:24px 28px 1fr}
.opt-l{font-weight:700; color:var(--color-muted)}
.pq-actions{display:flex; gap:var(--space-2); flex-wrap:wrap}
.pq-actions [hidden]{display:none}
.pq-explain{margin-top:var(--space-2); padding:var(--space-3); border-radius:var(--radius-1); background:var(--color-surface-muted); font-size:15px}
.sec-practice .pq-explain{background:var(--color-surface)}
.pq-explain p{margin:0}
.pq-src{margin-top:6px !important; font-size:12.5px; color:var(--color-muted)}
.pq.revealed .quiz-options li.right label{background:var(--ok-tint); outline:1px solid var(--color-success)}
.quiz-progress{font-weight:700; color:var(--color-muted); margin:0 0 var(--space-3)}
.glossary dd .src{font-size:13px}

@media (max-width:560px){
  .chapter-cards{grid-template-columns:1fr}
  .practice-actions .btn{flex:1 1 auto}
  .pq{padding:var(--space-3)}
  .sec-body table{display:block; overflow-x:auto}
}

input[type="radio"],input[type="checkbox"]{accent-color:var(--color-brand)}
:root[data-theme="dark"]{color-scheme:dark}
.sec-more{font-size:14px; color:var(--color-muted); margin:0}

/* Chapter cards: styled like the homepage course cards; the whole card is the link */
.chapter-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
a.chapter-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:26px 26px 22px; border-radius:18px; text-decoration:none; color:inherit; background:var(--color-surface); border:1px solid var(--color-border); transition:transform .2s ease, background .2s ease, border-color .2s ease}
a.chapter-card::after{content:""; position:absolute; left:20px; right:20px; top:0; height:1px; opacity:0; transition:opacity .3s; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-brand) 80%,transparent),transparent)}
a.chapter-card:hover,a.chapter-card:focus-visible{transform:translateY(-2px); background:var(--color-surface-muted); border-color:var(--a-line)}
a.chapter-card:hover::after,a.chapter-card:focus-visible::after{opacity:1}
a.chapter-card:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
a.chapter-card.current{border-color:var(--color-brand); box-shadow:0 0 0 2px var(--color-brand-soft)}
a.chapter-card.done{border-left:4px solid var(--color-success)}
.cc-no{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font:700 18px/1 var(--b-font); font-variant-numeric:tabular-nums; color:var(--color-brand); background:var(--color-surface-muted); box-shadow:inset 0 0 0 1px var(--color-border)}
a.chapter-card:hover .cc-no{box-shadow:inset 0 0 0 1px var(--a-line), 0 0 18px -4px color-mix(in srgb,var(--color-brand) 45%,transparent)}
.cc-title{font:600 19px/1.2 var(--b-font); letter-spacing:-.02em; color:var(--color-text)}
.cc-desc{color:var(--color-muted); font-size:14.5px; line-height:1.55; flex:1 1 auto}
.cc-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:8px}
.cc-pill{font:700 10.5px/1 var(--b-font); letter-spacing:.07em; text-transform:uppercase; padding:6px 10px; border-radius:999px; border:1px solid var(--color-border); color:var(--color-muted); background:var(--color-surface-muted); white-space:nowrap}
.cc-pill.next{color:var(--color-brand-strong); border-color:var(--a-line); background:var(--color-brand-soft)}
.cc-pill.cert,.cc-pill.ok{color:var(--color-success); border-color:var(--color-success); background:var(--ok-tint)}
.cc-arrow{margin-left:auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:var(--color-muted); background:var(--color-surface-muted); box-shadow:inset 0 0 0 1px var(--color-border); transition:background .2s, color .2s, transform .2s}
.cc-arrow svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
a.chapter-card:hover .cc-arrow,a.chapter-card:focus-visible .cc-arrow{background:var(--color-brand); color:var(--on-a); transform:translateX(2px)}
.cc-obj{font-size:12.5px; color:var(--color-muted)}

.chapter-cards{align-items:stretch}
.chapter-cards > li{display:flex}
.chapter-cards > li > a{flex:1}
.hero .hero-stats + .hero-actions{margin-top:var(--space-4)}
.hero .hero-stats{max-width:var(--measure)}

/* Parts on the home page (same look as the Network+ course index) */
.spart{margin:0 0 var(--space-6)}
.spart-h{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 14px; margin:0 0 var(--space-4)}
.spart-h .k{justify-self:start; font:600 11px/1 var(--b-font); letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand); border:1px solid var(--a-line); background:var(--color-brand-soft); border-radius:999px; padding:5px 9px}
.spart-h h3{margin:0; font-size:clamp(20px,2vw,24px)}
.spart-h p{grid-column:1/-1; margin:2px 0 0; color:var(--color-muted); font-size:15px}
.spart .chapter-cards{margin:0}
.parts-note{margin:0 0 var(--space-4); color:var(--color-muted); font-size:14px; max-width:var(--measure)}

/* Chapter card with a separate Read link: the whole card opens the chapter, Read opens the book */
div.chapter-card{position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:26px 26px 22px; border-radius:18px; color:inherit; background:var(--color-surface); border:1px solid var(--color-border); transition:transform .2s ease, background .2s ease, border-color .2s ease}
div.chapter-card:hover,div.chapter-card:focus-within{transform:translateY(-2px); background:var(--color-surface-muted); border-color:var(--a-line)}
div.chapter-card.current{border-color:var(--color-brand); box-shadow:0 0 0 2px var(--color-brand-soft)}
div.chapter-card.done{border-left:4px solid var(--color-success)}
.cc-link{position:absolute; inset:0; z-index:1; border-radius:18px}
.cc-link:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
div.chapter-card .cc-no,div.chapter-card .cc-title,div.chapter-card .cc-desc,div.chapter-card .cc-meta,div.chapter-card .cc-obj{pointer-events:none}
.cc-acts{position:relative; z-index:2; display:flex; align-items:center; gap:10px; margin-top:6px}
.cc-read{min-height:40px; padding:8px 18px; gap:8px}
.cc-read svg,.chapter-links .btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.chapter-links .btn svg{margin-right:6px}
.cc-acts .cc-arrow{margin-left:auto; pointer-events:none}
div.chapter-card:hover .cc-arrow{background:var(--color-brand); color:var(--on-a); transform:translateX(2px)}