/* Общий стиль курса «$100M Offers». Подключается каждым уроком, справочником и главной.
   Палитра, шрифты и упражнения — собственные, от дизайн-системы сайта не зависят. */
:root {
  --ink: #1d1b18;
  --muted: #6b655c;
  --paper: #fffdf8;
  --rule: #e4ddd0;
  --accent: #9a3b1b;
  --ok: #2f6b3a;
  --ok-bg: #eef5ec;
  --bad: #9a2f24;
  --bad-bg: #f8ecea;
  --note-bg: #f5f0e6;
  --up: #2f6b3a;   /* драйверы, которые растим */
  --down: #9a3b1b; /* драйверы, которые режем */
  --sans: -apple-system, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 18px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 42rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
header.lesson { border-bottom: 1px solid var(--rule); margin-bottom: 2rem; padding-bottom: 1.25rem; }
.kicker { font: 600 0.72rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
h1 { font-size: 2.1rem; line-height: 1.15; margin: 0.4rem 0 0.6rem; font-weight: 600; }
h2 { font-size: 1.3rem; margin: 2.6rem 0 0.6rem; font-weight: 600; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; font-weight: 600; }
p, li { hyphens: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { font-size: 0.85em; background: var(--note-bg); padding: 0.05em 0.3em; border-radius: 3px; }
.meta { color: var(--muted); font-size: 0.9rem; }
.big { font-size: 1.25rem; line-height: 1.45; border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0; }
.cite { font: 0.72rem/1 var(--sans); color: var(--muted); white-space: nowrap; }
.cite a { color: var(--muted); }
.note { background: var(--note-bg); padding: 0.9rem 1.1rem; border-radius: 4px; font-size: 0.95rem; margin: 1.2rem 0; }
.note b:first-child { font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.warn { border-left: 3px solid var(--bad); }

/* Нумерованные шаги (пять шагов оффера, четыре признака рынка и т. п.) */
.steps { list-style: none; padding: 0; margin: 1.5rem 0; counter-reset: step; }
.steps li { position: relative; padding: 0.7rem 0 0.7rem 3rem; border-top: 1px solid var(--rule); }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.65rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--accent); color: #fff; font: 600 0.95rem/2rem var(--sans); text-align: center;
}
.steps.letters li::before { content: counter(step, upper-latin); background: var(--muted); }
.steps b { display: block; }
.steps .ex { display: block; color: var(--muted); font-size: 0.92rem; margin-top: 0.15rem; }

/* Уравнение ценности */
.equation { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 1.6rem 0; font-family: var(--sans); }
.equation .lhs { font-weight: 600; }
.equation .frac { display: inline-flex; flex-direction: column; text-align: center; }
.equation .frac span { padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.equation .frac span:first-child { border-bottom: 2px solid var(--ink); color: var(--up); font-weight: 600; }
.equation .frac span:last-child { color: var(--down); font-weight: 600; }
.up { color: var(--up); font-weight: 600; }
.down { color: var(--down); font-weight: 600; }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 1rem 0; }
th, td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid var(--rule); }
th { font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; padding-right: 0.9rem; white-space: nowrap; }
tr.total td { font-weight: 600; border-top: 2px solid var(--ink); }

/* Упражнения */
.task { border: 1px solid var(--rule); border-radius: 6px; padding: 1rem 1.1rem; margin: 1rem 0; background: #fff; }
.task .item { font-weight: 600; margin-bottom: 0.6rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.choices button, .mcq button, .tool {
  font: 0.85rem/1.2 var(--sans);
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 0.45rem 0.8rem; cursor: pointer;
}
.mcq button { display: block; width: 100%; text-align: left; border-radius: 6px; margin: 0.35rem 0; }
.choices button:hover, .mcq button:hover, .tool:hover { border-color: var(--ink); }
.mcq.locked button { cursor: default; }
.mcq.locked button:hover { border-color: var(--rule); }
.mcq.locked button.right:hover { border-color: var(--ok); }
.mcq.locked button.wrong:hover { border-color: var(--bad); }
button.right { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
button.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
button.picked { background: var(--note-bg); border-color: var(--ink); }
.feedback { display: none; margin-top: 0.7rem; font-size: 0.92rem; }
.feedback.show { display: block; }
.feedback .verdict { font: 600 0.75rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.4rem; }
.feedback.ok .verdict { color: var(--ok); }
.feedback.no .verdict { color: var(--bad); }
.score { font: 600 0.85rem/1.3 var(--sans); color: var(--muted); margin-top: 0.8rem; }
.empty { color: var(--muted); font-size: 0.92rem; font-style: italic; }

/* Числовой ответ */
.num-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.num-row input {
  font: 1rem/1.2 var(--sans); width: 9rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink);
}
.num-row input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.num-row .unit { font: 0.85rem/1 var(--sans); color: var(--muted); }

/* Свободное вспоминание и рабочий лист */
textarea {
  display: block; width: 100%; min-height: 4.2rem; resize: vertical;
  font: 0.95rem/1.45 var(--sans); padding: 0.55rem 0.7rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink);
}
.free .answer { display: none; background: var(--note-bg); border-radius: 4px; padding: 0.7rem 0.9rem; margin-top: 0.7rem; font-size: 0.92rem; }
.free .answer.show { display: block; }
.free .answer > :first-child { margin-top: 0; }
.free .answer > :last-child { margin-bottom: 0; }
.free .row, .toolbar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.6rem; }
.grade { display: none; }
.grade.show { display: flex; }
.grade span, .toolbar span { font: 0.8rem/1.2 var(--sans); color: var(--muted); }

.sheet-block { border: 1px solid var(--accent); border-radius: 6px; padding: 1rem 1.1rem 1.1rem; margin: 1rem 0; background: #fff; }
.sheet-block > .kicker { color: var(--accent); margin-bottom: 0.2rem; }
.sheet-block h3 { margin-top: 0.2rem; }
.field { margin: 0.9rem 0 0; }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.field .hint { color: var(--muted); font-size: 0.85rem; margin: 0.1rem 0 0.35rem; }
.field .saved { font: 0.72rem/1 var(--sans); color: var(--muted); height: 0.9rem; margin-top: 0.25rem; }
details.hyp { margin: 1rem 0; border: 1px dashed var(--rule); border-radius: 6px; padding: 0.7rem 1rem; background: var(--note-bg); font-size: 0.95rem; }
details.hyp summary { cursor: pointer; font: 600 0.8rem/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
details.hyp[open] summary { margin-bottom: 0.5rem; }
details.hyp > :last-child { margin-bottom: 0; }

/* Главная: карта курса */
.map { list-style: none; padding: 0; margin: 1.2rem 0; }
.map li { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: 0.2rem 0.7rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.map li:last-child { border-bottom: 1px solid var(--rule); }
.map .n { font: 600 0.85rem/1 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.map .t a { font-weight: 600; text-decoration: none; }
.map .t a:hover { text-decoration: underline; }
.map .d { grid-column: 2 / 4; color: var(--muted); font-size: 0.88rem; }
.pill { font: 600 0.7rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.5rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; }
.pill.done { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.pill.part { border-color: var(--accent); color: var(--accent); }
.bar { height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; margin: 0.6rem 0 0.3rem; }
.bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width 0.3s; }
.summary { font: 0.85rem/1.4 var(--sans); color: var(--muted); }
.cta { display: inline-block; font: 600 0.9rem/1 var(--sans); background: var(--ink); color: var(--paper); text-decoration: none; padding: 0.7rem 1rem; border-radius: 6px; margin: 0.6rem 0.4rem 0 0; }
.cta.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; font: 0.85rem/1.3 var(--sans); margin-top: 1rem; }
footer.colophon { margin-top: 3.5rem; padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.colophon dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.9rem 1.2rem; margin: 0; }
.colophon dt { font: 600 0.72rem/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.15rem; }
.colophon dd { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--muted); }
pre.snippet { font: 0.8rem/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--ink); color: var(--paper); padding: 1rem 1.1rem; border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 1rem 0 0; }
@media (max-width: 30rem) { .colophon dl { grid-template-columns: 1fr; gap: 0.15rem; } .colophon dd { margin-bottom: 0.8rem; } }
footer.lesson { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.92rem; color: var(--muted); }
.ask { background: var(--ink); color: var(--paper); padding: 1rem 1.2rem; border-radius: 6px; margin: 2rem 0; }
.ask a { color: #f3c9b5; }

@media (max-width: 34rem) {
  html { font-size: 17px; }
  h1 { font-size: 1.7rem; }
  .equation { flex-direction: column; gap: 0.3rem; }
  table { font-size: 0.8rem; }
  th, td { padding-right: 0.4rem; hyphens: auto; overflow-wrap: anywhere; }
  th:first-child, td:first-child { min-width: 5.6rem; }
  td.num, th.num { padding-right: 0.4rem; white-space: normal; min-width: 0; }
  .cite { white-space: normal; }
}

@media print {
  html { font-size: 11pt; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
  .task, .ask, .sheet-block { break-inside: avoid; }
  .feedback, .free .answer { display: block !important; }
  details.hyp { border: 1px solid #999; }
  button, .tool { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
  .toolbar, .lesson-nav, .cta { display: none !important; }
  a { color: #000; text-decoration: none; }
}