/*
 * Academy module pages. The lesson HTML is imported from the courses repo
 * (see import_academy_course), so Tailwind never sees its class names. These
 * rules are the web version of the course's A4 styles (shared/styles.html in each course folder).
 * Colours follow the primary / secondary palette in tailwind.config.js.
 */
.lesson, .academy-quiz {
  --line: #d9dfee;
  --surface: #ffffff;
  --surface-2: #eef2fb;
  --ink: #0e1726;
  --ink-2: #3b3f5c;
  --muted: #6b7189;
  --primary: #4B4CE3;      /* primary-500 */
  --primary-soft: #EDEDFC; /* primary-50 */
  --brand-deep: #1F1F5E;   /* primary-800 */
  --yellow: #FFD569;       /* secondary-500 */
  --yellow-soft: #FFF7E1;  /* secondary-100 */
  --yellow-ink: #664F15;   /* secondary-900 */
  --config: #805dca;
  --config-soft: #ede7f8;
  --optional: #8a90a8;
  --optional-soft: #eceef4;
  --good: #00ab55;
  --good-soft: #dff5ea;
  --bad: #e7515a;
  --bad-soft: #fdecee;
  --warn: #e2a03f;
  --warn-soft: #fff5e3;
  --amazon: #d4780f;
  --amazon-soft: #fff0dc;
  --shadow: 0 2px 2px rgba(224,230,237,.46), 1px 6px 14px rgba(224,230,237,.6);
  color: var(--ink);
  line-height: 1.55;
}

/* One former A4 page per section */
.lesson-section { display: flex; flex-direction: column; gap: 1.1rem; scroll-margin-top: 6rem; }
.lesson-section + .lesson-section { margin-top: 3.5rem; padding-top: 3.5rem; border-top: 1px solid var(--line); }
.lesson h2 { font-size: 1.875rem; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; margin: 0; }
.lesson h3 { font-size: 1.0625rem; line-height: 1.25; font-weight: 800; margin: 0 0 .3rem; }
.lesson p { margin: 0; }
.lesson b, .lesson strong { font-weight: 800; }
.lesson a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.lesson .eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); font-weight: 800; }
.lesson .eyebrow.step { align-self: flex-start; background: var(--yellow); color: var(--brand-deep); padding: .2rem .7rem; border-radius: 99px; letter-spacing: .1em; }
.lesson .lede { font-size: 1.125rem; color: var(--ink-2); }
.lesson .small { font-size: .875rem; color: var(--muted); }

.lesson .cols { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .lesson .cols-2 { grid-template-columns: 1fr 1fr; }
  .lesson .cols-3 { grid-template-columns: 1fr 1fr; }
  .lesson .cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .lesson .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lesson .cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.lesson .panel { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.lesson .panel p + p { margin-top: .4rem; }
.lesson .goals { margin: 0; padding-left: 1.3rem; display: grid; gap: .25rem; font-weight: 700; list-style: decimal; }

.lesson figure.shot { margin: .5rem 0; display: flex; flex-direction: column; gap: .5rem; }
.lesson figure.shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); background: #fff; }
.lesson figure.shot figcaption { font-size: .875rem; color: var(--muted); }

.lesson .callout { border-left: 5px solid var(--warn); background: var(--warn-soft); padding: .9rem 1.1rem; border-radius: .5rem; }
.lesson .callout .label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--primary); display: block; margin-bottom: .25rem; }
.lesson .callout .term { color: var(--primary); font-weight: 800; }
.lesson .callout.primary { border-color: var(--primary); background: var(--primary-soft); }
.lesson .callout.good { border-color: var(--good); background: var(--good-soft); }
.lesson .callout.good .label { color: var(--good); }
.lesson .callout.turn { border-color: var(--yellow); background: var(--yellow-soft); }
.lesson .callout.turn .label { color: var(--yellow-ink); }
.lesson .callout.case { border-color: var(--bad); background: var(--bad-soft); }
.lesson .callout.case .label { color: var(--bad); }

.lesson .chip { display: inline-block; padding: .1rem .6rem; border-radius: 99px; font-weight: 700; font-size: .8rem; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.lesson .t-req { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.lesson .t-cfg { background: var(--config-soft); color: var(--config); border-color: transparent; }
.lesson .t-opt { background: var(--optional-soft); color: var(--optional); border-color: transparent; }
.lesson .t-amz { background: var(--amazon-soft); color: var(--amazon); border-color: transparent; }

.lesson .steps { display: grid; gap: .6rem; }
.lesson .steps .step { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; align-items: start; padding: .75rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; }
.lesson .steps .num { width: 2rem; height: 2rem; border-radius: 50%; background: var(--yellow); color: var(--brand-deep); font-weight: 900; display: grid; place-items: center; }

/* Tables */
.lesson .gloss, .lesson .tbl { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; display: table; }
.lesson .gloss th, .lesson .tbl th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: .6rem .9rem; background: var(--surface-2); }
.lesson .gloss td, .lesson .tbl td { padding: .55rem .9rem; border-top: 1px solid var(--line); vertical-align: top; }
.lesson .gloss td:first-child { font-weight: 800; color: var(--primary); width: 34%; }
.lesson .gloss td .where { display: block; font-size: .8rem; color: var(--muted); font-weight: 600; }
.lesson .match { width: 100%; border-collapse: separate; border-spacing: 0 .4rem; font-size: .95rem; }
.lesson .match th { text-align: left; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding: 0 .8rem; }
.lesson .match td { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .5rem .8rem; font-weight: 700; }
.lesson .match td:first-child { border-left: 1px solid var(--line); border-radius: .5rem 0 0 .5rem; }
.lesson .match td:last-child { border-right: 1px solid var(--line); border-radius: 0 .5rem .5rem 0; }
.lesson .match td.arrow { color: var(--muted); text-align: center; font-weight: 400; }
.lesson .match td.diff { color: var(--amazon); }

/* Mini marketplace forms */
.lesson .mform { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; box-shadow: var(--shadow); }
.lesson .mform .head { padding: .6rem .9rem; font-weight: 800; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.lesson .mform .q { padding: .5rem .9rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .95rem; }
.lesson .mform .q:last-child { border-bottom: 0; }
.lesson .mform .q .star, .lesson .star { color: var(--bad); }

/* Rule type matrix and rule boxes */
.lesson .matrix { display: grid; grid-template-columns: 7rem 1fr 1fr; gap: .6rem; }
.lesson .matrix .lab { display: flex; align-items: center; font-weight: 800; color: var(--muted); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.lesson .matrix .lab.top { justify-content: center; }
.lesson .matrix .cell { background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; padding: .7rem .8rem; font-size: .92rem; }
.lesson .matrix .cell .title { font-weight: 800; margin-bottom: .15rem; }
.lesson .matrix .cell.req .title { color: var(--primary); }
.lesson .matrix .cell.cfg .title { color: var(--config); }
.lesson .matrix .cell.opt .title { color: var(--optional); }
.lesson .setup { display: grid; gap: 1rem; }
@media (min-width: 640px) { .lesson .setup { grid-template-columns: 1fr 1fr; } }
.lesson .rulebox { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; font-size: .95rem; }
.lesson .rb-head { display: flex; justify-content: space-between; align-items: center; padding: .55rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 800; }
.lesson .rb-row { padding: .35rem .9rem; border-bottom: 1px solid var(--line); font-weight: 700; }
.lesson .rb-row.amz { color: var(--amazon); background: var(--amazon-soft); }
.lesson .rb-row.gone { color: var(--muted); font-weight: 600; font-style: italic; }
.lesson .rb-foot { padding: .45rem .9rem; font-size: .85rem; color: var(--muted); }

.lesson .pc { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.lesson .pc li { padding-left: 1.2rem; position: relative; }
.lesson .pc li.pro::before { content: "+"; position: absolute; left: 0; color: var(--good); font-weight: 900; }
.lesson .pc li.con::before { content: "–"; position: absolute; left: 0; color: var(--bad); font-weight: 900; }

/* Inline styles in the source use millimetres for A4 spacing; keep them small on screen */
.lesson [style*="margin-top"] { margin-top: .5rem !important; }

/* Quiz */
.academy-quiz { scroll-margin-top: 6rem; }
.academy-quiz .quiz-card { background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
.academy-quiz .quiz-question { font-weight: 800; font-size: 1.05rem; margin: 0 0 .8rem; }
.academy-quiz .quiz-number { color: var(--primary); margin-right: .5rem; }
.academy-quiz .quiz-options { display: grid; gap: .5rem; }
.academy-quiz .quiz-option { display: flex; align-items: flex-start; gap: .7rem; width: 100%; text-align: left; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s; }
.academy-quiz .quiz-option:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.academy-quiz .quiz-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.academy-quiz .quiz-option:disabled { cursor: default; }
.academy-quiz .quiz-letter { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-2); color: var(--ink-2); }
.academy-quiz .quiz-option.is-picked { border-color: var(--bad); background: var(--bad-soft); }
.academy-quiz .quiz-option.is-answer { border-color: var(--good); background: var(--good-soft); }
.academy-quiz .quiz-option.is-answer .quiz-letter { background: var(--good); color: #fff; }
.academy-quiz .quiz-option.is-picked:not(.is-answer) .quiz-letter { background: var(--bad); color: #fff; }
.academy-quiz .quiz-explanation { margin: .5rem 0 0; padding: .75rem .9rem; border-radius: .6rem; background: var(--surface-2); color: var(--ink-2); }
.academy-quiz .is-right .quiz-verdict { color: var(--good); }
.academy-quiz .is-wrong .quiz-verdict { color: var(--bad); }

/* Course and module videos */
.academy-video { aspect-ratio: 16 / 9; }
.academy-quiz .quiz-reveal { margin-top: .9rem; }
.academy-quiz .quiz-reveal summary { cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--primary); }
.academy-quiz .quiz-reveal[open] summary { display: none; }
.academy-quiz .quiz-reveal .quiz-explanation { margin-top: 0; }