/* ============================================================
   Общая тема уроков курса «Фундамент веб-разработки».
   Подключается в каждом НОВОМ уроке: <link rel="stylesheet" href="lesson.css">
   Кастомные компоненты конкретного урока добавляются маленьким
   инлайновым <style> уже после этой ссылки.
   (Старые уроки 0001–0008 держат тему инлайн — значения совпадают.)
   ============================================================ */

:root{
  --bg:#fbfaf7; --surface:#ffffff; --ink:#1c1b19; --muted:#6f6b63;
  --line:#e8e3d9; --soft:#f3efe6;
  --accent:#0f766e; --accent-soft:#d7efe9;
  --good:#15803d; --good-bg:#e7f5ea;
  --bad:#b91c1c; --bad-bg:#fbeaea;
  --warn:#b45309; --warn-bg:#fdf2e0;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:760px; margin:0 auto; padding:56px 24px 96px}
::selection{background:var(--accent-soft)}

/* hero */
.eyebrow{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 18px}
h1{font-family:var(--serif); font-weight:600; font-size:42px; line-height:1.12; letter-spacing:-.01em; margin:0 0 18px}
.dek{font-size:21px; line-height:1.5; color:#403d37; margin:0 0 20px; font-family:var(--serif)}
.meta{font-size:14px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin:28px 0 0}
.meta b{color:var(--ink); font-weight:600}

/* sections */
section{margin-top:52px}
h2{font-family:var(--serif); font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.01em; margin:0 0 6px}
.kicker{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 10px}
p{margin:0 0 16px}
.lead{font-size:19px; color:#36332d}
strong{font-weight:650}
code{font-family:var(--mono); font-size:.86em; background:var(--soft); padding:1px 6px; border-radius:6px}

/* why box */
.why{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:22px 24px}
.why .kicker{margin-bottom:8px}
.why p{margin:0}

/* generic note */
.recognise{margin-top:18px; background:var(--soft); border-radius:12px; padding:13px 18px; font-size:15px; color:#403d37}

/* analogy */
.analogy{margin-top:22px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px 24px}
.analogy .kicker{margin-bottom:8px}
.analogy .rows{display:grid; gap:10px; margin-top:6px}
.analogy .ar{display:grid; grid-template-columns:160px 1fr; gap:12px; align-items:baseline; font-size:16px}
.analogy .ar .l{font-weight:700; color:var(--accent)}

/* aha box */
.aha{background:var(--accent); color:#eafaf6; border-radius:16px; padding:26px 28px; margin-top:26px}
.aha h2{color:#fff; font-size:24px}
.aha .kicker{color:#9fe6d8}
.aha p{margin:0 0 10px} .aha p:last-child{margin:0}
.aha ol,.aha ul{margin:14px 0 0; padding-left:22px}
.aha li{margin:0 0 12px; line-height:1.55} .aha li:last-child{margin:0}
.aha .hl{color:#fff; font-weight:700}

/* phrase table: «фраза агента» → смысл */
.phrase{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; margin-top:8px}
.phrase .pr{display:grid; grid-template-columns:1fr 1.25fr; border-top:1px solid var(--line)}
.phrase .pr:first-child{border-top:0}
.phrase .ph,.phrase .me{padding:15px 18px}
.phrase .ph{background:var(--soft); font-family:var(--serif); font-style:italic; font-size:16px}
.phrase .me{font-size:15.5px}
.phrase .warn{color:var(--warn); font-weight:600}

/* definitions */
.defs{background:var(--soft); border-radius:12px; padding:18px 22px; margin-top:22px; font-size:15.5px}
.defs p{margin:0 0 10px} .defs p:last-child{margin:0}
.defs b{color:var(--ink)}

/* ---- generic reusable building blocks ---- */
.cols2{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px}
.box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
.box.elev{box-shadow:0 6px 20px rgba(15,118,110,.06)}

.tbl{width:100%; border-collapse:collapse; margin:22px 0 8px; font-size:15px; background:#fff;
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
.tbl th,.tbl td{text-align:left; padding:11px 14px; border-top:1px solid var(--line); vertical-align:top}
.tbl th{background:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border-top:0}
.tbl td b{font-size:16px}

.codeblk{background:#fbfaf7; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:11px 13px; overflow-x:auto; margin-top:14px}
.codeblk pre{margin:0}
.codeblk code{font-family:var(--mono); font-size:13px; line-height:1.6; color:#2b2a26; white-space:pre; display:block; background:none; padding:0}

.tag{display:inline-block; font-size:13px; font-weight:600; padding:2px 10px; border-radius:999px; background:var(--soft); color:#5a564e}

/* quiz */
.quiz{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin-top:16px}
.quiz__q{font-weight:650; margin:0 0 14px; font-size:17px}
.opt{display:block; width:100%; text-align:left; font:inherit; font-size:16px; background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 9px; cursor:pointer; transition:.12s; color:var(--ink)}
.opt:hover{border-color:#c9c3b6; background:#fdfdfc}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--good); background:var(--good-bg)}
.opt.wrong{border-color:var(--bad); background:var(--bad-bg)}
.opt .mark{float:right; font-weight:700}
.opt.correct .mark{color:var(--good)} .opt.wrong .mark{color:var(--bad)}
.quiz__fb{margin:6px 0 0; font-size:15px; padding:12px 14px; border-radius:10px; background:var(--soft); color:#403d37}
.quiz__fb[hidden]{display:none}

/* roadmap (7 блоков) */
.road{list-style:none; padding:0; margin:18px 0 0}
.road li{display:flex; gap:14px; align-items:baseline; padding:11px 0; border-top:1px solid var(--line)}
.road li:first-child{border-top:0}
.road .num{flex:0 0 auto; font-family:var(--serif); color:var(--muted); font-size:15px; width:26px}
.road .tl{flex:1} .road .tl b{font-weight:650}
.road .tl a{color:var(--accent); text-decoration:none; font-weight:650}
.road .tl small{display:block; color:var(--muted); font-size:14px; line-height:1.4; margin-top:1px}
.road .st{flex:0 0 auto; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.road .done .st{color:var(--good)} .road .soon .st{color:var(--muted)}
.road .here{background:var(--accent-soft); margin:0 -12px; padding:11px 12px; border-radius:10px; border-top:0}
.road .here + li{border-top:0}

/* footer */
footer{margin-top:64px; border-top:2px solid var(--ink); padding-top:26px}
.teacher{background:var(--accent-soft); border-radius:14px; padding:20px 22px; margin-bottom:26px}
.teacher h2{font-size:21px; margin-bottom:6px}
.teacher p{margin:0; font-size:16px}

/* pager: prev / next */
.pager{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px}
.pager > *{display:flex; flex-direction:column; gap:3px; text-decoration:none;
  border:1.5px solid var(--line); border-radius:12px; padding:13px 16px; background:#fff; transition:.13s}
.pager a:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:0 6px 18px rgba(15,118,110,.08)}
.pager .dir{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent)}
.pager .ttl{font-size:15px; font-weight:650; color:var(--ink); line-height:1.3}
.pager .next{text-align:right; align-items:flex-end}
.pager .disabled{background:var(--soft); border-style:dashed; cursor:default}
.pager .disabled .dir,.pager .disabled .ttl{color:var(--muted); font-weight:600}

.nav{display:flex; gap:12px; flex-wrap:wrap}
.navlink{display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--accent);
  font-weight:650; border:1.5px solid var(--accent); border-radius:10px; padding:10px 16px; font-size:15.5px}
.navlink:hover{background:var(--accent); color:#fff}

/* sources */
.sources{font-size:14px; color:var(--muted); margin-top:30px}
.sources h3{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 10px; font-weight:700}
.sources ol{margin:0; padding-left:20px} .sources li{margin:0 0 7px}
.sources a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft); word-break:break-word}
.sources a:hover{border-bottom-color:var(--accent)}
sup.c{font-size:.7em; color:var(--accent); font-weight:700; vertical-align:super; margin-left:1px}

@media (max-width:560px){
  body{font-size:17px} h1{font-size:32px} .dek{font-size:19px}
  .cols2{grid-template-columns:1fr}
  .phrase .pr{grid-template-columns:1fr} .phrase .ph{border-bottom:1px solid var(--line)}
  .analogy .ar{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr} .pager .next{text-align:left; align-items:flex-start}
  .tbl{font-size:14px} .tbl th,.tbl td{padding:9px 10px}
}
@media print{
  :root{--bg:#fff} body{font-size:12pt} .wrap{max-width:none; padding:0}
  .opt{cursor:default} .quiz__fb{display:block!important}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .teacher,.pager{break-inside:avoid}
}