/* charcoal and chalk, nothing else: the light theme is chalk paper with charcoal lines, the dark one the other way round */
:root {
  --charcoal: #1c1b19; --chalk: #f3f0e8;
  --bg: var(--chalk); --ink: var(--charcoal); --paper: var(--bg);
  --soft: color-mix(in srgb, var(--ink) 58%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --wash: color-mix(in srgb, var(--ink) 4%, transparent);
  --wash2: color-mix(in srgb, var(--ink) 8%, transparent);
  --sans: 'Manrope', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  color-scheme: light;
  /* motion: the transitions.dev scale, the same as Little Box's */
  --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  /* the bar's height, for anything else that sticks under it */
  --bar: 62px;
}
:root[data-theme="dark"] { --bg: var(--charcoal); --ink: var(--chalk); color-scheme: dark }
html { background: var(--bg); scroll-padding-top: 120px }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; accent-color: var(--ink) }
a { color: inherit }
::selection { background: var(--ink); color: var(--bg) }

/* the bar stays at the top as the page scrolls, solid black with no line under it. once the page scrolls, a fade one bar
   deep hangs under it, black into nothing, so the page slips out of sight behind it. a page that fills the window and
   never scrolls has no fade over it; a browser without scroll timelines just keeps the fade showing */
.top { display: flex; align-items: center; gap: 18px; padding: 14px 20px; position: sticky; top: 0; z-index: 30; background: var(--bg) }
/* an open menu or account card rises over toolbars that stick under the bar */
.top:is(.open, :has(.acct-pop:not([hidden]))) { z-index: 45 }
.top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 100%; z-index: -1; background: linear-gradient(var(--bg), transparent); pointer-events: none; opacity: 0; animation: bar-fade linear both; animation-timeline: scroll(root); animation-range: 0 var(--bar) }
@keyframes bar-fade { to { opacity: 1 } }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: -.02em }
/* the hand-drawn wordmark, as a mask so it takes the ink colour in light and dark */
.brand .logo { display: block; width: 136px; aspect-ratio: 1387.1 / 203.8; background: currentColor; -webkit-mask: url(/site/mushlove.svg) center / contain no-repeat; mask: url(/site/mushlove.svg) center / contain no-repeat }
.brand:hover .logo { opacity: .8 }
.top nav { display: flex; gap: 2px; flex-wrap: wrap }
.top nav a { text-decoration: none; font-weight: 600; font-size: 14px; padding: 6px 10px; border-radius: 999px; color: var(--soft); transition: color .15s, background .15s }
.top nav a:hover { color: var(--ink); background: var(--wash) }
.top nav a { position: relative; isolation: isolate }
/* the pill behind the page you're on is its own layer, so it can slide to the next page's name when you move */
.top nav a[aria-current] { color: var(--ink); background: none }
.top nav a[aria-current]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wash2); view-transition-name: nav-pill }
/* dark only: the theme switch is still in the pages' markup, where Sign in is built beside it, but it isn't shown */
.mode { display: none }
/* signing in: a pill for a visitor, a round initial once you're in, and Sign out under it */
/* the owner's pages, for a signed-in browser only (theme.js marks the root before the first paint) */
:root:not([data-owner]) .top nav a:is([href="/canvas"], [href="/studio"]), :root:not([data-owner]) .owner-only { display: none }
/* and what a visitor sees in its place, where a list needs something there (a Related pages slot) */
:root[data-owner] .visitor-only { display: none }
/* Psionics is still being built: a visitor sees its name and a Soon pill, with nothing to press (theme.js takes
   the href away as well, for the keyboard and screen readers). Keyed on data-owner, so it never shows as a link first.
   The owner keeps the live link, marked with a small dot so they know what visitors see; the menu has room for the pill */
.top nav a:is([href="/psionics"], [data-soon]) { display: inline-flex; align-items: center; gap: 7px }
.top nav a:is([href="/psionics"], [data-soon])::after { content: 'Soon'; flex: none; display: inline-flex; align-items: center; height: 26px; box-sizing: border-box; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--soft); font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
:root:not([data-owner]) .top nav a:is([href="/psionics"], [data-soon]) { padding-block: 2.5px; cursor: default; pointer-events: none; -webkit-tap-highlight-color: transparent }
:root:not([data-owner]) .top nav a:is([href="/psionics"], [data-soon]):hover { color: var(--soft); background: none }
/* the owner's bar has two more pages in it and no room to spare at 1024, so on a laptop their pill is just a dot */
@media (min-width: 641px) { :root[data-owner] .top nav a:is([href="/psionics"], [data-soon])::after { content: ''; width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: currentColor; opacity: .55 } }
.acct { position: relative; flex: none; display: flex; margin-left: auto }
.acct > button { height: 34px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 13px var(--sans); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s }
.acct .acct-in { padding: 0 13px }
.acct .acct-in:hover { border-color: var(--soft) }
.acct .acct-me { width: 34px; padding: 0; border-color: var(--ink); background: var(--ink); color: var(--bg); font-size: 14px }
.acct .acct-me:hover, .acct .acct-me[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--wash2) }
.acct-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 45; min-width: 200px; max-width: min(300px, calc(100vw - 32px)); padding: 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--charcoal) 45%, transparent) }
.acct-pop[hidden] { display: none }
.acct-who { margin: 0 0 10px; font-size: 13px; color: var(--soft); overflow-wrap: anywhere }
.acct-pages { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px }
.acct-pages a { padding: 7px 10px; border-radius: 10px; color: var(--soft); font: 600 14px var(--sans); text-decoration: none }
.acct-pages a:hover { color: var(--ink); background: var(--wash) }
.acct-pages a[aria-current] { color: var(--ink); background: var(--wash2) }
.acct-out { width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); font: 600 13px var(--sans); cursor: pointer }
.acct-out:hover { background: var(--wash) }
.top .menu { display: none }
/* a phone: the wordmark, the theme switch and a menu button; the pages drop down under the bar when it's opened */
@media (max-width: 640px) {
  :root { --bar: 56px }
  .top { padding: 10px 16px; gap: 8px }
  .brand .logo { width: 118px }
  .acct > button { height: 36px }
  .acct .acct-me { width: 36px }
  .top .menu { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent }
  .top .menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible }
  .top .menu path { transition: transform .2s ease, opacity .15s; transform-origin: 12px 12px }
  .top.open .menu { background: var(--ink); color: var(--bg); border-color: var(--ink) }
  .top.open .menu .a { transform: translateY(5px) rotate(45deg) }
  .top.open .menu .b { opacity: 0 }
  .top.open .menu .c { transform: translateY(-5px) rotate(-45deg) }
  .top nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; gap: 2px; padding: 8px 12px 14px; background: var(--bg); box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--charcoal) 45%, transparent); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility 0s .16s }
  .top.open nav { visibility: visible; opacity: 1; transform: none; transition: opacity .16s ease, transform .16s ease }
  .top nav a { font-size: 17px; padding: 12px 14px; border-radius: 12px }
  /* the pill is taller than a line of the name, so a little comes off the padding to keep every row the same height */
  .top nav a:is([href="/psionics"], [data-soon]), :root:not([data-owner]) .top nav a:is([href="/psionics"], [data-soon]) { padding-block: 10.5px }
  /* the owner's menu has room for the pill itself, dashed: it's what visitors see, not something they've got */
  :root[data-owner] .top nav a:is([href="/psionics"], [data-soon])::after { border-style: dashed }
}
@media (prefers-reduced-motion: reduce) { .top nav, .top.open nav, .top .menu path { transition: none } }


/* moving between pages: the bar stays where it is, its pill slides along to the new page's name, and the rest
   cross-fades. The pill is drawn by its own box, so it keeps its round ends as it stretches or shrinks (the picture of
   the old one is hidden), and comes and goes with a fade on a page with no name lit, like the home page */
@view-transition { navigation: auto }
.top { view-transition-name: top }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--duration-fast); animation-timing-function: var(--ease-smooth-out) }
/* the bar is the same on both pages, so neither copy fades: cross-fading two copies of it dims it half way (Safari) */
::view-transition-old(top), ::view-transition-new(top) { animation: none; mix-blend-mode: normal }
::view-transition-old(nav-pill), ::view-transition-new(nav-pill) { width: 100%; height: 100%; border-radius: 999px; background: var(--wash2); object-position: -9999px -9999px }
/* a phone: the pages are in the menu, which closes as you go, so the bar just fades it away */
@media (max-width: 640px) { .top nav a[aria-current]::before { view-transition-name: none } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none } }