/* ==========================================================================
   Digital Literacy & Applied ICT — exportable documents.

   Self-contained on purpose. assets/export.js inlines this whole file into
   the standalone document it hands the teacher, so nothing here may rely on
   styles.css: no shared custom properties, no shared class names. Keep it
   that way and the download keeps looking like the page it came from.
   ========================================================================== */

.doc {
  --doc-ink: #161a22;
  --doc-soft: #39414f;
  --doc-muted: #626b7b;
  --doc-line: #dbe0e8;
  --doc-line-strong: #b4bcc9;
  --doc-bg: #ffffff;
  --doc-band: #f4f6fa;
  --doc-accent: #2b3fc4;
  --doc-safety: #c2700a;
  --doc-safety-bg: #fdf6e9;
  --doc-optional: #6a7488;
  --doc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--doc-font);
  background: var(--doc-bg);
  color: var(--doc-ink);
  line-height: 1.55;
  border: 1px solid var(--doc-line);
  border-radius: 14px;
  padding: 40px 44px 48px;
  margin: 0 0 28px;
}

@media (prefers-color-scheme: dark) {
  .doc {
    --doc-ink: #eef1f7;
    --doc-soft: #c3cad8;
    --doc-muted: #939db2;
    --doc-line: #2b3348;
    --doc-line-strong: #3d4762;
    --doc-bg: #151a26;
    --doc-band: #1b2231;
    --doc-accent: #8e9bf8;
    --doc-safety: #f0a63d;
    --doc-safety-bg: #251e10;
    --doc-optional: #97a1b5;
  }
}

/* ---------- Masthead ---------- */
.doc-masthead { border-bottom: 3px solid var(--doc-ink); padding-bottom: 18px; margin-bottom: 26px; }
.doc-eyebrow {
  margin: 0 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--doc-accent);
}
.doc-masthead h1 { margin: 0 0 10px; font-size: 1.95rem; line-height: 1.18; letter-spacing: -.01em; }
.doc-lede { margin: 0 0 12px; font-size: 1.02rem; color: var(--doc-soft); max-width: 62ch; }
.doc-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .88rem; color: var(--doc-muted); }
.doc-facts strong { color: var(--doc-ink); font-weight: 650; }

/* ---------- Structure ---------- */
.doc-section { margin: 34px 0 0; }
.doc h2 {
  margin: 0 0 12px; font-size: 1.2rem; letter-spacing: -.01em;
  padding-bottom: 7px; border-bottom: 1px solid var(--doc-line-strong);
}
.doc h3 { margin: 22px 0 8px; font-size: 1rem; }
.doc h4 { margin: 18px 0 6px; font-size: .92rem; color: var(--doc-soft); }
.doc p { margin: 0 0 .85rem; max-width: 74ch; }
.doc p:last-child { margin-bottom: 0; }
.doc-note { font-size: .88rem; color: var(--doc-muted); }
.doc ul.doc-list { margin: 0 0 .9rem; padding-left: 1.15em; }
.doc ul.doc-list li { margin-bottom: .3rem; }

/* Half-term heading above each block of weeks. */
.doc-half { margin-top: 22px; }
.doc-half-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.doc-half-head h3 { margin: 0; }
.doc-half-theme { margin: 0; font-size: .9rem; color: var(--doc-muted); }

/* ---------- Tables ---------- */
.doc-table-wrap { overflow-x: auto; margin-bottom: .6rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.doc caption { text-align: left; font-size: .85rem; color: var(--doc-muted); padding-bottom: 6px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--doc-line); }
.doc thead th {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--doc-muted); background: var(--doc-band); border-bottom: 1px solid var(--doc-line-strong);
}
.doc tbody tr:last-child th, .doc tbody tr:last-child td { border-bottom: 1px solid var(--doc-line-strong); }
.doc-wk { width: 3.4em; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--doc-muted); font-weight: 650; }
.doc-col-apps { width: 22%; }
.doc-col-strand { width: 20%; }
.doc-focus { margin: 0 0 2px; font-weight: 650; }
.doc-obj { margin: 0; color: var(--doc-soft); }
.doc-also, .doc-materials { margin: 4px 0 0; font-size: .84rem; color: var(--doc-muted); }
.doc-also strong, .doc-materials strong { font-weight: 650; color: var(--doc-soft); }
.doc-apps, .doc-strand { color: var(--doc-soft); }

.doc tr.is-safety { background: var(--doc-safety-bg); }
.doc tr.is-safety .doc-wk { color: var(--doc-safety); }
.doc tr.is-optional .doc-wk { font-weight: 550; }
.doc-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--doc-line-strong); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
  color: var(--doc-optional); vertical-align: 1px; white-space: nowrap;
}
.doc-tag.is-safety { color: var(--doc-safety); border-color: currentColor; }

/* ---------- Colophon ---------- */
.doc-colophon { margin-top: 34px; padding-top: 14px; border-top: 1px solid var(--doc-line-strong); font-size: .84rem; color: var(--doc-muted); }
.doc-colophon p { margin: 0 0 .35rem; max-width: none; }
.doc-colophon a { color: inherit; }

/* ---------- Standalone download ----------
   Only applies inside the file export.js writes, never on the site. */
body.doc-standalone { margin: 0; background: #eef1f6; }
@media (prefers-color-scheme: dark) { body.doc-standalone { background: #0f1420; } }
body.doc-standalone .doc { max-width: 940px; margin: 26px auto; }
@media (max-width: 700px) {
  .doc { padding: 24px 20px 30px; border-radius: 10px; }
  body.doc-standalone .doc { margin: 0; border: 0; border-radius: 0; }
}

/* ---------- Print ----------
   The document is the page: no chrome, no card, black on white. */
@media print {
  .doc {
    --doc-ink: #000; --doc-soft: #222; --doc-muted: #444;
    --doc-line: #bbb; --doc-line-strong: #777; --doc-bg: #fff;
    --doc-band: #f0f0f0; --doc-accent: #000; --doc-safety: #000; --doc-safety-bg: #fff;
    border: 0; border-radius: 0; padding: 0; margin: 0; font-size: 10.5pt;
  }
  body.doc-standalone { background: #fff; }
  body.doc-standalone .doc { max-width: none; margin: 0; }
  .doc-table-wrap { overflow: visible; }
  .doc table { font-size: 9.5pt; }
  .doc thead { display: table-header-group; }
  .doc tr, .doc .doc-half-head, .doc h2, .doc h3 { break-inside: avoid; }
  .doc h2, .doc h3 { break-after: avoid; }
  .doc tr.is-safety { background: #fff; }
  .doc tr.is-safety .doc-wk::after { content: " ▪"; }
  .doc-section.doc-break { break-before: page; }
  .doc a { color: #000; text-decoration: none; }
}