/* Building blocks for slide content: boxes, tips, figures, lists, chips, flows, cheat sheets, credits.
   Loaded for every topic unless its topic.json says "helpers": false (older lessons that bring their own). */
@layer core {
  /* helpers available to slide content */
  .big { font-size: 1.8em; font-weight: 800; letter-spacing: .02em; }
  .huge { font-size: 2.8em; font-weight: 800; line-height: 1.1; }
  .hl { background: var(--yellow); border-radius: 10px; padding: 0 .25em; }
  .c-accent { color: var(--accent); }
  .c-blue { color: var(--blue); }
  .c-green { color: var(--green); }
  .c-purple { color: var(--purple); }
  .c-red { color: var(--red); }
  .small { font-size: .78em; color: var(--muted); }
  .row { display: flex; gap: 16px; align-items: stretch; justify-content: center; flex-wrap: wrap; width: 100%; }
  .box {
    border: 3px solid var(--line); border-radius: 18px; padding: 12px 18px; background: var(--tint);
    flex: 1 1 200px; max-width: 420px;
  }
  .box .ico { font-size: 1.8em; line-height: 1.1; }
  .box b.name { display: block; font-size: 1.1em; }
  .box.def { flex: none; max-width: 860px; text-align: left; border-color: var(--purple); background: #f7f3ff; }
  .tip {
    border: 3px dashed var(--green); border-radius: 18px; padding: 8px 18px; color: var(--green); font-weight: 700;
  }
  .tip.warn { border-color: var(--red); color: var(--red); }

  .split { display: flex; gap: 24px; align-items: center; justify-content: center; width: 100%; }
  .split > .txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
  .fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 1 auto; min-width: 0; }
  .fig img {
    display: block; max-width: 100%; max-height: min(42vh, 380px); width: auto; height: auto;
    border-radius: 18px; border: 3px solid var(--line);
  }
  .split > .fig { max-width: 50%; }
  .fig figcaption { font-size: .68em; color: var(--muted); line-height: 1.3; }
  .fig figcaption b { color: var(--ink); font-size: 1.2em; }
  .row > .fig { flex: 1 1 0; }
  .row > .fig img { max-height: min(30vh, 270px); }
  .row.mini > .fig img { max-height: min(17vh, 150px); }

  ul.facts, ol.facts {
    list-style: none; margin: 0; padding: 0; text-align: left;
    display: flex; flex-direction: column; gap: .5em;
  }
  .facts li { display: flex; gap: .6em; align-items: flex-start; }
  .facts li > i { font-style: normal; flex: none; width: 1.5em; text-align: center; }
  .facts .num {
    flex: none; width: 1.55em; height: 1.55em; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9em;
  }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .chip { background: var(--chip); border-radius: 999px; padding: 4px 16px; font-weight: 700; }

  /* a chain of steps: A → B → C */
  .flow { display: flex; align-items: stretch; justify-content: center; gap: 8px; width: 100%; flex-wrap: wrap; }
  .flow .f {
    flex: 1 1 130px; max-width: 230px; border-radius: 16px; padding: 10px; font-size: .82em; line-height: 1.3;
    border: 3px solid var(--line); background: var(--tint); display: flex; flex-direction: column; gap: 2px; justify-content: center;
  }
  .flow .f .ico { font-size: 1.9em; line-height: 1.1; }
  .flow .arrow { align-self: center; color: var(--muted); font-weight: 800; }

  .cheat { text-align: left; width: 100%; display: flex; flex-direction: column; gap: 8px; font-size: .8em; line-height: 1.35; }
  .cheat > div { border-left: 6px solid var(--green); background: #f0fbf5; border-radius: 0 14px 14px 0; padding: 6px 14px; }
  .cheat > div > b:first-child { color: var(--purple); }

  .credits { text-align: left; font-size: 14px; line-height: 1.5; color: var(--muted); columns: 2; column-gap: 32px; width: 100%; }
  .credits p { margin: 0 0 6px; break-inside: avoid; }


  @media (max-width: 700px) {
    .split { flex-direction: column; gap: 12px; }
    .split > .txt { flex: none; width: 100%; }
    .split > .fig { max-width: 100%; }
    .fig img { max-height: 28vh; }
    .flow .arrow { display: none; }
    .credits { columns: 1; }
  }
}