/* The public pages' share of the app's look (site-orb.js): the orb, its words, the dotted line and the lime light that
   runs down it, the charge + burst of the light / dark switch. Values from flowboard.css (.fl-orbw, .fl-rail, .fl-rlit…). */
.sko, .skd, .skh {
  --sk-sv: #c9d2dc; --sk-sv2: #8f98a3; --sk-sv-ln: rgba(201,210,220,.14); --sk-sv-ln2: rgba(201,210,220,.26); --sk-sv-bg: rgba(201,210,220,.035);
  --sk-lm: #c6ff3d; --sk-lm-ln: rgba(198,255,61,.32); --sk-lm-bg: rgba(198,255,61,.06);
}
body.light .sko, body.light .skd, body.light .skh {
  --sk-sv: #5d6776; --sk-sv2: #7f8894; --sk-sv-ln: rgba(93,103,118,.2); --sk-sv-ln2: rgba(93,103,118,.34); --sk-sv-bg: rgba(93,103,118,.045);
  --sk-lm: #4a8a00; --sk-lm-ln: rgba(74,138,0,.36); --sk-lm-bg: rgba(198,255,61,.16);
}
.sko { --os: 104px; position: relative; display: inline-flex; align-items: center; gap: 2px; isolation: isolate; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.sko-c { display: block; width: var(--os); height: var(--os); mask-image: radial-gradient(closest-side, #000 68%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 68%, transparent); }
.sko::before, .sko::after { content: ""; position: absolute; left: calc(var(--os) / 2); top: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1; }
.sko::before { width: calc(var(--os) * 2); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); mask-image: radial-gradient(closest-side, #000 40%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.sko::after { width: calc(var(--os) * 1.5); background-color: color-mix(in srgb, var(--sk-sv) 9%, transparent); mask-image: radial-gradient(closest-side, #000, rgba(0,0,0,.35) 50%, transparent); -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0,0,0,.35) 50%, transparent); opacity: .6; transition: background-color .5s; animation: sko-br 9s ease-in-out infinite alternate; }
@keyframes sko-br { from { opacity: .45; scale: .94; } to { opacity: .75; scale: 1.04; } }
.sko.is-hov::after, .sko.is-lime::after { background-color: color-mix(in srgb, var(--sk-lm) 15%, transparent); opacity: 1; }
.sko:focus-visible .sko-c { outline: 2px solid var(--sk-lm-ln); outline-offset: -8px; border-radius: 50%; }
.sko-t { font: 400 10.5px/1.3 "Geist Mono", "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; color: color-mix(in srgb, var(--sk-sv2) 74%, transparent); white-space: nowrap; transition: color .4s, opacity .17s ease; }
.sko-t.is-swap { opacity: 0; }
.sko.is-hov .sko-t, .sko.is-lime .sko-t { color: var(--sk-lm); }
.sko.is-pulse .sko-c { animation: sko-pulse .42s cubic-bezier(.3,0,.2,1); }
@keyframes sko-pulse { 0% { scale: 1; } 35% { scale: 1.07; } 100% { scale: 1; } }
body.light .sko-t { color: #5a6270; }
body.light .sko::after { background-color: color-mix(in srgb, var(--sk-lm) 9%, transparent); opacity: .55; }

/* the dotted line (the schedule's spine) and the lime light that runs down it */
.sko-rail { width: 2px; background: radial-gradient(circle, var(--sk-sv-ln2) 1px, transparent 1.4px) 0 0 / 2px 9px; opacity: .7; }
body.light .sko-rail { opacity: 1; background-image: radial-gradient(circle, rgba(79,89,103,.6) 1.1px, transparent 1.5px); }
.sko-rlit, .sko-rbead, .sko-rping { position: absolute; z-index: 6; pointer-events: none; }
.sko-rlit { width: 2px; background: radial-gradient(circle, var(--sk-lm, #c6ff3d) 1.1px, transparent 1.5px) 0 0 / 2px 9px; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--sk-lm, #c6ff3d) 70%, transparent)); }
.sko-rbead { width: 2px; height: 46px; border-radius: 2px; background: linear-gradient(to bottom, transparent, var(--sk-lm, #c6ff3d)); box-shadow: 0 6px 12px -2px color-mix(in srgb, var(--sk-lm, #c6ff3d) 60%, transparent); }
.sko-rping { width: 8px; height: 8px; border-radius: 50%; background: var(--sk-lm, #c6ff3d); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sk-lm, #c6ff3d) 22%, transparent), 0 0 14px color-mix(in srgb, var(--sk-lm, #c6ff3d) 60%, transparent); }

/* light / dark: the charge (the orb, or the switch itself, shakes and builds up lime), then the burst reveals the new page */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { clip-path: circle(var(--vr, 150vmax) at var(--mx, 50%) var(--my, 25%)); }
::view-transition-old(root) { animation: sko-modeout .95s ease-out both; }
@keyframes sko-modeout { 0% { filter: none; } 15% { filter: brightness(1.15); } 100% { filter: brightness(.85) blur(1.5px); } }
.sko-burst { view-transition-name: sko-burst; }
::view-transition-group(sko-burst), ::view-transition-old(sko-burst), ::view-transition-new(sko-burst) { animation: none; }
::view-transition-group(sko-burst) { z-index: 10; }
@keyframes sko-shake {
  0% { translate: 0 0; scale: 1; filter: none; }
  10% { translate: -1px 1px; } 20% { translate: 1.5px -1px; } 30% { translate: -2px -1.5px; } 40% { translate: 2px 2px; scale: 1.04; }
  50% { translate: -2.5px 1px; } 60% { translate: 3px -2px; scale: 1.07; } 70% { translate: -3px -2.5px; } 80% { translate: 3px 2.5px; scale: 1.1; }
  90% { translate: -2px 1px; scale: .9; filter: brightness(1.9) drop-shadow(0 0 14px #c6ff3d); }
  100% { translate: 0 0; scale: 1.22; filter: brightness(2.2) drop-shadow(0 0 22px #c6ff3d); } }
.sko.sko-charge .sko-c, a.sko-charge { animation: sko-shake .42s cubic-bezier(.5,0,.9,.6) forwards; }
.sko.sko-charge::after { background-color: color-mix(in srgb, var(--sk-lm) 30%, transparent); opacity: 1; }
.sko.sko-charge .sko-t { color: var(--sk-lm); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .sko::after { animation: none; opacity: .7; } .sko-t { transition: none; } .sko.is-pulse .sko-c, .sko.sko-charge .sko-c, a.sko-charge { animation: none; }
}

/* in a row next to the orb, the words wrap onto a second line instead of running past the edge (the jokes are long);
   two lines fit inside the orb's height, so nothing moves when the words change */
.skd-orbrow .sko, .skh-orbrow .sko { min-width: 0; max-width: 100%; }
.skd-orbrow .sko-t, .skh-orbrow .sko-t { flex: 0 1 auto; min-width: 0; max-width: 24ch; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }