/* The about page: slides, like the report. One idea per screen, a flick moves a
   whole one. Rides on app.css (fonts, colours, header, chips); this file only
   adds what a page that scrolls needs.

   The type keeps to four sizes, so the page is easy on the eye:
     title   the slide's name, in the dot-matrix face, lime
     prose   what the rat says: 15 to 18 px
     detail  the fine grain under it: 13 to 14 px, dim
     micro   labels and footnotes: 10 to 11 px, dim, condensed */

html.page { height: auto; overflow-x: hidden; overflow-y: auto; scroll-padding-top: var(--head); scroll-snap-type: y mandatory; }
html.page body { height: auto; min-height: 100%; overflow: visible; }
@media (prefers-reduced-motion: no-preference) { html.page { scroll-behavior: smooth; } }
/* the same dust as the chat's world, behind everything. it steps out while the game is on */
.page .world { position: fixed; top: var(--head); left: 0; width: 100%; height: calc(100% - var(--head)); z-index: 0; transition: opacity .5s; }
.playing .world { opacity: 0; }
.page main { position: relative; z-index: 1; padding-top: var(--head); }
.sheet { width: 100%; max-width: 1080px; margin: 0 auto; padding-inline: var(--pad); }
.page a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.page a:hover { text-decoration-color: var(--good); }
.page a.ask { text-decoration: none; display: inline-flex; align-items: center; align-self: flex-start; }
.ctl a { padding: 6px 0; white-space: nowrap; text-decoration: none; }

.slide { position: relative; min-height: calc(100svh - var(--head)); scroll-snap-align: start; padding: clamp(28px, 5vw, 56px) 0 clamp(36px, 6vw, 64px); }

/* ---------- a slide with a name: the name in the margin, the words beside it ---------- */
.sec { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px 48px; align-content: center; }
.sec-h { margin: 0; align-self: start; font-family: var(--dots); font-variation-settings: var(--dots-small); font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.05; color: var(--good); }
@media (max-width: 760px) { .sec { grid-template-columns: minmax(0, 1fr); } }
.prose { min-width: 0; max-width: 64ch; }
.prose.wide { max-width: none; }
.prose p { margin: 0 0 1em; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; text-wrap: pretty; }
.prose > :last-child { margin-bottom: 0; }
.prose p.fine { margin-top: 1.4em; font-size: 13px; color: var(--dim); }

/* a list longer than a screen scrolls inside its slide, between two lines: the heading stays put above, and the
   bottom line sits well clear of the screen's edge, so rows don't seem to rise out of nowhere. no scrollbar */
.sec.long { height: calc(100svh - var(--head)); align-content: stretch; grid-template-rows: minmax(0, 1fr); }
.sec.long .prose { display: flex; flex-direction: column; min-height: 0; }
.sec.long .scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--dim); }
.scroll::-webkit-scrollbar { display: none; }
/* while there's more to scroll, the same quiet words as the chat sit under the line; at the end they step out (and keep their room) */
.scroll-more { flex: none; align-self: flex-start; margin-top: 10px; padding: 2px 0; font-size: 12px; color: var(--good); font-stretch: 85%; border-bottom: 1px solid var(--good); transition: opacity .2s; }
.scroll-more.off { opacity: 0; pointer-events: none; }
.sec.long { padding-bottom: clamp(18px, 3vw, 34px); }
.scroll:focus-visible { outline: 1px dashed var(--good); outline-offset: 2px; }
@media (max-width: 760px) { .sec.long { grid-template-rows: auto minmax(0, 1fr); } }
.scroll > .fine { padding-bottom: 16px; }

/* ---------- 1. who it is ---------- */
.slide.first { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.hero { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.6vw, 26px); }
/* each character can be touched. nothing says so: it just answers. em here is the size of the face.
   big enough to be the face of the page, not so big the dots stop reading as characters */
.rat { display: flex; align-items: flex-start; width: max-content; max-width: 100%; margin-left: -.06em; font-size: clamp(72px, 13vw, 132px); color: var(--good); transition: transform .3s ease-out; }
.part { display: block; width: .66em; color: inherit; font-size: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.part.gap { margin-left: .4em; }
.part[data-part="tail"] { touch-action: none; cursor: grab; }
.part:focus-visible { outline: none; }
.part:focus-visible .glyph { outline: 2px solid var(--good); outline-offset: 2px; }
.glyph { display: block; height: .88em; font-family: var(--dots); font-variation-settings: var(--dots-big); font-weight: 900; line-height: .86; text-shadow: 0 0 40px color-mix(in srgb, var(--good) 25%, transparent); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), opacity .25s; transform-origin: 50% 55%; }
:root[data-theme="day"] .glyph { text-shadow: none; } /* by day the glow turns to haze */
.part:hover .glyph { transform: translateY(-.035em); }
.part:active .glyph { transform: scale(.93); }
/* one part picked: the rest step back */
.rat.picked .part:not(.sel) .glyph { opacity: .34; }
.glyph.blink { transform: scaleY(.12); transition-duration: .05s; }
.glyph.flip { transform: scaleY(-1); transition: none; }
.glyph.pulled { transform-origin: 0 55%; transition: none; }
[data-part="tail"] .glyph { transform-origin: 0 55%; }
@media (prefers-reduced-motion: no-preference) { .glyph.sniff { animation: sniff .28s steps(2) infinite; } }
@keyframes sniff { 50% { transform: translateX(-.04em); } }

.hero-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.hw-a, .hw-b { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kicker { margin: 0; font-size: 13px; color: var(--dim); font-stretch: 85%; }
.hero h1 { margin: 0; font-size: clamp(26px, 4.2vw, 46px); font-weight: 700; font-stretch: 112.5%; line-height: 1.12; letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; }
/* what it says: the intro until the rat is touched, then whatever that part has to say, typed like the chat */
.words { min-height: 7.4em; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.6; display: flex; flex-direction: column; gap: .5em; }
.words p { margin: 0; max-width: 56ch; text-wrap: pretty; }
.words p.aside { font-size: 13px; color: var(--dim); }
.say-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--good); text-underline-offset: 3px; }
.say-link:hover { color: var(--good); }
.words .watching { line-height: 0; padding: 3px 0; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* the floor: a wire with a rat on it, until someone taps the rat */
.first-floor { display: flex; flex-direction: column; gap: 8px; }
.page a.down { align-self: flex-start; font-size: 12px; color: var(--good); font-stretch: 85%; text-decoration: none; border-bottom: 1px solid var(--good); padding: 2px 0; }
.rr { position: relative; height: 56px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: height .45s cubic-bezier(.2, .9, .3, 1); }
.rr:focus { outline: none; }
.rr:not(.open):focus-visible { outline: 1px dashed var(--good); outline-offset: 4px; }
.rr.open { height: 190px; cursor: default; background: var(--bg); box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.rr canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rr-meta { position: absolute; top: 8px; left: 12px; right: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; color: var(--dim); font-stretch: 75%; white-space: pre; opacity: 0; visibility: hidden; transition: opacity .3s .2s; }
.rr.open .rr-meta { opacity: 1; visibility: visible; }
.rr-meta span { overflow: hidden; text-overflow: ellipsis; }
.rr-x { flex: none; color: var(--dim); padding: 2px 4px; }
.rr-x:hover { color: var(--ink); }
.rr-toast { position: absolute; left: 50%; top: 30px; transform: translate(-50%, 4px); max-width: calc(100% - 28px); font-size: 11px; font-weight: 600; color: var(--good); font-stretch: 85%; text-align: center; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.rr-toast.on { opacity: 1; transform: translate(-50%, 0); }
.rr-msg { position: absolute; inset: 28px 12px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; text-align: center; pointer-events: none; background: color-mix(in srgb, var(--bg) 86%, transparent); animation: rise .3s ease both; }
.rr-msg p { margin: 0; max-width: 56ch; }
.rr-cause { font-size: clamp(14px, 1.6vw, 16px); font-weight: 700; text-wrap: balance; }
.rr-tip { font-size: 11px; line-height: 1.5; color: var(--dim); font-stretch: 85%; }
.rr-tip:empty { display: none; }
.rr-again { margin-top: 4px !important; font-size: 11px; color: var(--good); font-stretch: 85%; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }

/* ---------- 2. the suspects stand along one wire, in the order your data meets them (this is the list without javascript) ---------- */
.wire { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.wire::before { content: ''; position: absolute; left: 4px; top: 12px; bottom: 30px; width: 1px; background: var(--dim); opacity: .6; }
.wire li { position: relative; padding: 0 0 22px 38px; }
.wire li::before { content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--good); }
.wire h3 { margin: 0 0 4px; font-size: clamp(17px, 1.9vw, 21px); font-weight: 700; font-stretch: 112.5%; line-height: 1.25; }
.prose .wire p { margin: 0; font-size: clamp(15px, 1.6vw, 18px); }
.prose .wire p.how { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--dim); }
/* with javascript they become six stops, and the slide stays put while you scroll through them: each flick walks the
   rat one stop along. --steps is how many; a step is half a screen of scrolling, with a snap point at each */
.walk.stepped { position: relative; height: calc((100svh - var(--head)) * (1 + (var(--steps) - 1) * .5)); }
.walk.stepped .walk-pin { position: sticky; top: var(--head); scroll-snap-align: none; }
.walk-snap { position: absolute; left: 0; top: calc((100svh - var(--head)) * .5 * var(--i)); width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
/* with javascript they become six stops: tap one, the rat walks there, and only that suspect speaks */
.stops { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 14px; padding-top: 28px; }
.stops::before { content: ''; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 32px; height: 1px; background: var(--dim); opacity: .6; }
.stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; min-height: 48px; font-size: 11px; color: var(--dim); font-stretch: 85%; -webkit-tap-highlight-color: transparent; transition: color .2s; }
.stop::before { content: ''; position: relative; width: 9px; height: 9px; background: var(--bg); border: 1px solid var(--good); transition: background .2s, transform .2s; }
.stop:hover { color: var(--ink); }
.stop.here { color: var(--good); font-weight: 700; }
.stop.here::before { background: var(--good); transform: scale(1.25); }
.walker { position: absolute; top: 0; left: calc(100% / 12); transform: translateX(-50%); font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--good); white-space: pre; pointer-events: none; transition: left .5s cubic-bezier(.3, 1.15, .4, 1); }
.wire.tabs { margin-top: 16px; min-height: 11em; }
.wire.tabs::before, .wire.tabs li::before { display: none; }
.wire.tabs li { display: none; padding: 0; }
.wire.tabs li.here { display: block; animation: rise .3s ease both; }
.wire.tabs h3 { margin-bottom: 8px; font-size: clamp(20px, 2.4vw, 26px); }

/* ---------- 3. options: the flag, the button it is in the chat, what it does ---------- */
.group { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 8px; font-size: 11px; font-weight: 400; color: var(--dim); font-stretch: 75%; letter-spacing: .04em; background: var(--bg); border-bottom: 1px solid var(--line); }
.opts { margin: 0; display: flex; flex-direction: column; }
.opts > div { display: flex; flex-direction: column; gap: 7px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.opts > div:last-child { border-bottom: 0; }
.opts dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.opts code { font: inherit; font-size: 13px; font-weight: 700; color: var(--good); }
.opts .btn { font-size: 11px; padding: 5px 9px; border: 1px solid var(--line); font-stretch: 85%; }
.opts dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 60ch; }
.opts dd i { font-style: normal; color: var(--ink); }

/* ---------- 4. what i sniff: plain words, nerd words, how. the column names stay put while the rows go by ---------- */
.dict > div { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 2px 20px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; }
.dict > div:last-child { border-bottom: 0; }
.dict b { font-weight: 700; }
.dict .nerd { color: var(--good); }
.dict .via { color: var(--dim); font-size: 12px; font-stretch: 85%; }
.dict > .dict-head { position: sticky; top: 0; z-index: 1; padding: 10px 0 8px; background: var(--bg); border-bottom-color: var(--dim); font-size: 10px; font-stretch: 75%; letter-spacing: .04em; }
.dict-head b { font-weight: 400; color: var(--dim); }
.dict-head .via { font-size: 10px; font-stretch: 75%; }
@media (max-width: 560px) {
  /* a phone has no room for three columns: each row stacks, and the frozen line names the three in their own colours */
  .dict > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dict b { font-size: 14px; }
  .dict > div:not(.dict-head) .nerd::before { content: '↳ '; color: var(--dim); }
  .dict > .dict-head { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .dict-head b { font-weight: 700; color: var(--ink); }
  .dict-head .nerd::before, .dict-head .via::before { content: '· '; color: var(--dim); margin-right: 8px; }
}

/* ---------- 5. caveats ---------- */
.notes { margin: 1.2em 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.notes li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; color: var(--dim); }
.notes li::before { content: '■'; position: absolute; left: 0; top: .5em; font-size: 7px; color: var(--good); }

/* ---------- 6. the honest version: what, and where it goes ---------- */
.ledger { margin: 0; border-top: 1px solid var(--line); }
.ledger > div { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ledger dt { font-size: 14px; font-weight: 700; line-height: 1.5; }
.ledger dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); }
@media (max-width: 640px) { .ledger > div { grid-template-columns: minmax(0, 1fr); padding: 10px 0; } }

/* ---------- 7. asked often: folded, a tap opens one ---------- */
.faq details { border-bottom: 1px dashed var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: clamp(15px, 1.6vw, 17px); font-weight: 700; line-height: 1.4; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; color: var(--good); font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { color: var(--good); }
.prose.faq details p { margin: 0; padding-bottom: 14px; font-size: 14px; line-height: 1.6; color: var(--dim); }

/* ---------- 8. still in beta, the mail, and the way back ---------- */
.prose .mail { margin-top: 4px; }
.prose p.end-big { margin: clamp(36px, 7vw, 72px) 0 18px; font-size: clamp(26px, 4.4vw, 48px); font-weight: 700; font-stretch: 112.5%; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }