/* ==========================================================================
   KuduDoc v6 — alternatives to the bubbles (study control).
   html[data-ambient] = records (default) | bubbles | lines | stars | none
   Every alternative reuses the bubbles' own machinery in sky.js — the slow rise,
   the sway, the scroll parallax and the per-phase opacity — and only swaps what
   each floater draws. "stars" adds one static star field that belongs to the
   dark phases (dawn, dusk), so the page reads as one day: stars, sunlit dust, stars.
   ========================================================================== */

/* the alternatives' parts are always in the DOM; only the chosen one shows */
.amb-record, .amb-mote { display: none; }
.amb-stars { display: none; }

/* any mode but bubbles: strip the soap-bubble look off each floater */
html[data-ambient]:not([data-ambient="bubbles"]) .sky__orb {
  background: none; box-shadow: none; border-radius: 0; container-type: size;
}
html[data-ambient]:not([data-ambient="bubbles"]) .sky__orb::before,
html[data-ambient]:not([data-ambient="bubbles"]) .sky__orb::after { content: none; }
html[data-ambient]:not([data-ambient="bubbles"]) .sky__orb > img { display: none; }
html[data-ambient="none"] .sky__bubbles { display: none; }

/* ---------------------------------------------------------------- records
   Small paper records drifting up at depth — the papers a life runs on. Each carries the mark;
   some carry a seal stamp. Sized in container units so each scales with its floater. */
html[data-ambient="records"] .amb-record { display: block; }
.amb-record {
  position: absolute; left: 12cqw; top: 0; width: 76cqw; height: 100cqh; padding: 10cqw 9cqw 0;
  border-radius: 6cqw; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, #fffefb 0%, #faf6ee 100%);
  box-shadow: inset 0 0 0 .8cqw rgba(16, 45, 73, .06), 0 2cqw 5cqw rgba(6, 22, 42, .28);
  transform: rotate(var(--rr, -6deg)) scale(1.45);
  opacity: var(--ro, .86);
}
.amb-record i { display: block; height: 2.8cqw; margin-top: 5cqw; border-radius: 2cqw; background: #e8e2d6; }
.amb-record i:nth-of-type(2) { width: 82%; }
.amb-record i:nth-of-type(3) { width: 58%; }
.amb-record__k { display: block; width: 28cqw; height: 2.6cqw; border-radius: 2cqw; background: var(--blue); opacity: .8; }
.amb-record__t { display: block; margin-top: 6cqw; font: 700 8.6cqw/1.12 var(--font-display); letter-spacing: -.02em; }
.amb-record__m { position: absolute; left: 9cqw; bottom: 8cqw; width: 13cqw; height: 12cqw; background: url(../../assets/brand/mark-skew.svg?v=552ffa5be1) center / contain no-repeat; opacity: .85; }
.amb-record__s {
  position: absolute; right: 7cqw; bottom: 7cqw; padding: 1.6cqw 2.6cqw; border-radius: 2cqw;
  font: 800 4.6cqw/1 var(--font-display); letter-spacing: .14em; color: #e0441f;
  box-shadow: inset 0 0 0 .9cqw rgba(255, 77, 43, .8); transform: rotate(-9deg);
}

/* ---------------------------------------------------------------- lines
   The logo's own line rhythm, quiet: its four strokes at their real lengths and slant, kept whole
   or in part, drawn as hairline outlines or soft translucent fills. No glow. The second stroke is
   ember only where the logo would have it, and only in a few floaters. */
.amb-line { display: none; }
html[data-ambient="lines"] .amb-line { display: block; }
.amb-line { position: absolute; inset: 0; opacity: var(--lo, .5); }
.amb-lines { width: 100%; height: 100%; overflow: visible; }
.amb-lines--outline rect { fill: none; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.amb-lines--outline .s { stroke: rgba(191, 227, 255, .9); }
.amb-lines--outline .e { stroke: rgba(255, 179, 71, .95); }
.amb-lines--soft .s { fill: rgba(79, 179, 255, .42); }
.amb-lines--soft .e { fill: rgba(255, 150, 80, .42); }
html[data-ground="light"] .amb-lines--outline .s { stroke: rgba(0, 107, 203, .55); }
html[data-ground="light"] .amb-lines--outline .e { stroke: rgba(255, 118, 43, .7); }
html[data-ground="light"] .amb-lines--soft .s { fill: rgba(0, 107, 203, .14); }
html[data-ground="light"] .amb-lines--soft .e { fill: rgba(255, 118, 43, .22); }

/* ---------------------------------------------------------------- stars + sunlit motes
   Motes ride the floaters (warm specks: embers on the dark ground, dust in the light).
   The star field is its own layer behind the ribbon, faded in by the dark phases only. */
html[data-ambient="stars"] .amb-mote { display: block; }
.amb-mote {
  position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 238, 1) 0%, rgba(255, 214, 150, .75) 38%, rgba(255, 179, 71, 0) 100%);
  transform: scale(var(--ms, 1));
}
html[data-ground="light"] .amb-mote {
  width: 12cqw; height: 12cqw; margin: -6cqw 0 0 -6cqw;
  background: radial-gradient(closest-side, rgba(255, 170, 70, .85) 0%, rgba(255, 118, 43, .32) 45%, rgba(255, 118, 43, 0) 100%);
}
html[data-ambient="stars"] .amb-stars { display: block; }
.amb-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity; }
.amb-stars__l {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 360px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .35) 70%, transparent 88%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .35) 70%, transparent 88%);
  will-change: transform;
}
.amb-stars__dots { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.amb-glint {
  position: absolute; width: var(--g, 14px); height: var(--g, 14px); margin: calc(var(--g, 14px) / -2) 0 0 calc(var(--g, 14px) / -2);
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(191, 227, 255, 0) 70%) center / 34% 34% no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(223, 240, 255, .9) 50%, transparent 100%) center / 100% 1.5px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(223, 240, 255, .9) 50%, transparent 100%) center / 1.5px 100% no-repeat;
}

/* ---------------------------------------------------------------- the switcher (study control only) */
.amb-panel { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: grid; gap: 6px; justify-items: start; }
.amb-switch {
  position: relative; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 999px; background: rgba(6, 22, 42, .9); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(191, 227, 255, .16);
  font: 600 12.5px/1 var(--font-body); color: rgba(226, 238, 250, .75);
}
.amb-switch__label { min-width: 104px; padding: 0 10px 0 12px; letter-spacing: .02em; white-space: nowrap; }
.amb-switch button {
  height: 32px; padding: 0 12px; border-radius: 999px; color: rgba(226, 238, 250, .82); white-space: nowrap;
  transition: background-color 140ms var(--ease), color 140ms var(--ease);
}
.amb-switch button:hover { background: rgba(191, 227, 255, .12); color: #fff; }
.amb-switch button[aria-checked="true"] { background: #fff; color: var(--ink); }
@media (max-width: 640px) {
  .amb-panel { left: 8px; right: 8px; bottom: 8px; justify-items: stretch; }
  .amb-switch { overflow-x: auto; }
  .amb-switch__label { display: none; }
  .amb-switch button { flex: 1; padding: 0 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .amb-switch button { transition: none; }
}

/* the Strokes row only matters for the Flat light */
html:not([data-light="flat"]) .amb-switch--flat { display: none; }