/* ============================================================================
   03-document.css — the skin for anything a parent, GLL or Learning Support
   colleague will read.

   Clean and professional rather than austere: a clear school note, not a legal
   instrument. But never the app's skin — no rounded display face, no sticker
   shadows, no pill radii, no candy accents. The boundary is what makes the
   playful app safe to use on serious content.
   ========================================================================= */

@layer doc {

  .doc-stage {
    background: #E7E4DD;
    padding: var(--sp-5) var(--sp-4);
    min-height: 100dvh;
  }
  @media (max-width: 640px) {
    /* Full-bleed on a phone: no app chrome frames a child's record during a
       meeting. */
    .doc-stage { padding: 0; background: var(--doc-paper); }
  }

  /* Advisory chrome. Sits outside the paper and is never printed. */
  .doc__preview {
    max-width: 21cm; margin: 0 auto var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #F4F4F5; color: #3A3A3A;
    border: 1px solid #C6C6CC; border-radius: 8px;
    font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* ======================================================================
     TOKEN NEUTRALISATION — the real enforcement.
     Every play switch and every app colour is redefined. An app component
     reused inside a report renders as a plain box on white.
     The failure mode of a mistake is calmness.
     ====================================================================== */
  .doc {
    color-scheme: light;

    --display-face: var(--doc-face);
    --lift   : 0 0 0 transparent;
    --lift-lg: 0 0 0 transparent;
    --press  : 0px;
    --pill   : 4px;
    --bw     : 1px;

    --doc-face: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --c-bg: var(--doc-paper); --c-surface: var(--doc-paper); --c-surface-2: #F4F4F5;
    --c-fg: var(--doc-ink);   --c-fg-2: var(--doc-ink-2);    --c-fg-3: var(--doc-ink-2);
    --c-line: #C6C6CC;
    --c-accent: var(--doc-ink); --c-accent-2: var(--doc-ink); --c-violet: var(--doc-ink);

    max-width: 21cm; margin: 0 auto;
    background: var(--doc-paper); color: var(--doc-ink);
    padding: 2.2cm 2cm;
    font: 400 16px/1.6 var(--doc-face);
  }
  @media (max-width: 640px) { .doc { padding: var(--sp-5) var(--sp-4); } }

  .doc h1 {
    font: 600 28px/1.2 var(--doc-face);
    margin: 0 0 var(--sp-2); letter-spacing: -.01em;
  }
  .doc h2 {
    font: 600 13px/1.3 var(--doc-face);
    letter-spacing: .08em; text-transform: uppercase;
    color: #5A5A66; margin: var(--sp-5) 0 var(--sp-2);
  }
  .doc p  { margin: 0 0 var(--sp-3); }
  .doc ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; }
  .doc li { margin-bottom: 4px; }

  .doc__school  { font: 600 12px/1 var(--doc-face); letter-spacing: .12em;
                  text-transform: uppercase; color: #5A5A66; margin-bottom: var(--sp-2); }
  .doc__address { font: 400 14px/1.6 var(--doc-face); color: var(--doc-ink-2); }
  .doc__head    { border-bottom: 2px solid var(--doc-ink); padding-bottom: var(--sp-4);
                  margin-bottom: var(--sp-4); }
  .doc__runfoot { font: 400 13px/1.5 var(--doc-face); color: #5A5A66;
                  border-left: 2px solid #D8D8DE; padding-left: var(--sp-3); margin-top: -4px; }
  .doc__foot    { border-top: 1px solid #D8D8DE; margin-top: var(--sp-6);
                  padding-top: var(--sp-3);
                  font: 400 13px/1.5 var(--doc-face); color: #5A5A66; }

  /* No sprite, no severity swatch, no app iconography on a document. */
  .doc .spr, .doc .sev__swatch, .doc .tick { display: none; }
  .doc .sev { border: 1px solid var(--c-line); border-radius: 4px; box-shadow: none;
              font: 400 14px/1 var(--doc-face) !important; padding: 6px 10px; }
}

/* ============================================================================
   PRINT — UNLAYERED ON PURPOSE. Unlayered declarations beat every @layer
   above, so nothing in the app skin can leak onto paper.
   ========================================================================= */
@media print {
  :root {
    --display-face: "Source Sans 3", system-ui, sans-serif !important;
    --lift   : 0 0 0 transparent !important;
    --lift-lg: 0 0 0 transparent !important;
    --press  : 0px !important;
    --pill   : 0 !important;
  }
  body { background: #FFF !important; padding: 0 !important; }
  .marquee, .nav, .actionbar, .toast, .doc__preview, .skip-link { display: none !important; }
  .doc-stage { padding: 0 !important; background: #FFF !important; min-height: 0 !important; }
  .doc {
    max-width: none; margin: 0; padding: 0;
    font-size: 11pt; color: #000 !important; background: #FFF !important;
  }
  .doc h1 { font-size: 20pt; }
  .doc h2 { font-size: 9pt; break-after: avoid; }
  .doc section { break-inside: avoid; }
  .doc__foot { break-before: avoid; }
  @page { margin: 2cm; }
}