/* KuduDoc v6 — the fold's colour event, alternatives to the strand ribbon (study control).
   html[data-light] = mark | horizon | sheets | strands | plain. See light.js. */
.lt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform-origin: 70% 50%; will-change: transform, opacity; }
.lt-set { display: none; position: absolute; inset: 0; }
html[data-light="flat"] .lt-set[data-lt="flat"],
html[data-light="mark"] .lt-set[data-lt="mark"],
html[data-light="horizon"] .lt-set[data-lt="horizon"],
html[data-light="sheets"] .lt-set[data-lt="sheets"] { display: block; }
.lt-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lt-ember { opacity: 0; }
/* the strand ribbon only shows when it is the chosen colour event */
html[data-light]:not([data-light="strands"]) .sky__ribbon { visibility: hidden; }
/* phones: the shapes sit lower and further right, under the copy that opens each section */
@media (max-width: 700px) {
  .lt { transform-origin: 90% 70%; }
  .lt-art { left: 18%; top: 22%; width: 120%; height: 100%; }
}

/* ---------------------------------------------------------------- flat
   No glow anywhere: each phase of the sky is a flat colour field, and the colour event is the mark
   in solid colour. The bridges carry the change through blue rather than grey. */
.lt-bar { position: absolute; inset: 0; will-change: transform; }
html[data-light="flat"] .sky__phase--dawn { background: #0b2545; }
html[data-light="flat"] .sky__phase--morning { background: #0d3160; }
html[data-light="flat"] .sky__phase--ember { background: #0a2340; }
html[data-light="flat"] .sky__phase--day { background: #f8f5ef; }
html[data-light="flat"] .sky__phase--calm { background: #f5f3ee; }
html[data-light="flat"] .sky__phase--dusk { background: #0a2340; }
html[data-light="flat"] .sky__phase--twilight { background: #2d6cb0; }
html[data-light="flat"] .sky__phase--kindle { background: #0b2a4c; }
/* the document's halo is light too — gone in flat */
html[data-light="flat"] .tv-glow { display: none; }

/* ---------------------------------------------------------------- flat stroke palettes (html[data-flat])
   d = the dawn/dusk drawing, e = the seal (ember) drawing; stroke order as in the logo: blue, ORANGE, blue, blue.
   tonal (default): blues a few steps above the navy ground, the orange stroke burnt and quiet. */
html[data-flat="tonal"] {
  --lfd0: #0f2f55; --lfd1: #b8532f; --lfd2: #133763; --lfd3: #11335c;
  --lfe0: #0c2847; --lfe1: #d9582f; --lfe2: #0c2847; --lfe3: #0d2a4b;
}
/* deep: the blues nearly the ground itself, the orange a dark terracotta */
html[data-flat="deep"] {
  --lfd0: #0d2a4b; --lfd1: #7a3421; --lfd2: #0f2d50; --lfd3: #0e2b4d;
  --lfe0: #0b2442; --lfe1: #a8442a; --lfe2: #0b2442; --lfe3: #0b2442;
}
/* outline: all four strokes drawn in hairline, nothing filled — until the seal, where the orange
   stroke fills in */
html[data-flat="outline"] {
  --lsw: 1.5px;
  --lfd0: transparent; --lfd1: transparent; --lfd2: transparent; --lfd3: transparent;
  --lsd0: rgba(120, 180, 240, .34); --lsd1: rgba(255, 140, 80, .6); --lsd2: rgba(120, 180, 240, .34); --lsd3: rgba(120, 180, 240, .34);
  --lfe0: transparent; --lfe1: #c4552e; --lfe2: transparent; --lfe3: transparent;
  --lse0: rgba(120, 180, 240, .2); --lse1: none; --lse2: rgba(120, 180, 240, .2); --lse3: rgba(120, 180, 240, .2);
}
/* mono: blue only — the orange stroke is blue like the rest, and turns orange for the first time at
   the seal (the one ember moment) */
html[data-flat="mono"] {
  --lfd0: #0f2f55; --lfd1: #143b69; --lfd2: #123562; --lfd3: #11325c;
  --lfe0: #0c2847; --lfe1: #cf562d; --lfe2: #0c2847; --lfe3: #0d2a4b;
}
/* bright: the first flat version, for reference */
html[data-flat="bright"] {
  --lfd0: #0f3a6b; --lfd1: #ff762b; --lfd2: #0b4c8f; --lfd3: #16609f;
  --lfe0: #0c2f57; --lfe1: #ff5a2b; --lfe2: #0c2f57; --lfe3: #0e355f;
}

/* the flat strokes' drawings reach half a screen above and below, so no edge is ever cut mid-screen */
.lt-art.lt-tall { top: -50%; height: 200%; }
@media (max-width: 700px) { .lt-art.lt-tall { top: -28%; height: 200%; } }