/* The preorder page's own styles: its content windows, the form, the terms page. The windows, the chat,
   the taskbar and the runes come from desk.css, the same file the app uses. */
:root { --surface: #17141f; }
[data-theme] { --surface: var(--glass); }
/* The calm looks (Thor, 2026-10-01): no speckles, no big glowing rune behind, solid panels. They apply to whichever
   look the visitor picks in the hero card (the "Try a look" buttons). */
[data-theme] #sky, [data-theme] .wallmark { display: none; }
[data-theme] #w-hero, [data-theme] .lite #w-hero { background: var(--glass) !important; border-color: var(--line); }
[data-theme] .show-card { background: var(--glass); }
[data-theme] .show-card img { background: var(--glass-2); }
[data-theme] .show-text a, [data-theme] .chips button { color: var(--accent); border-color: var(--accent-44); background: var(--accent-soft); }
[data-theme="dyslexia"] .test-banner, [data-theme="large"] .test-banner { background: #f3e3b5; color: #4a3500; }

/* Stone (Thor, 2026-10-01: "Stone is good, but... it just doesn't feel modern anymore"). The page's default look:
   warm grey, in between the old night look and the cream, with the easy-to-read font and spacing (the name starts
   with "dyslexia" so themes.css gives it those). Modern without glow: a soft colour wash behind, bigger type,
   cards with depth, and a gentle rise as the page opens. */
[data-theme="dyslexia-stone"] {
  --bg: #bdb5a6; --glass: #e6e0d4; --glass-2: #d8d1c3; --line: #cfc6b5; --text: #1d1813; --muted: #4a4236; --faint: #5e5649;
  --accent: #4b33b5; --accent-2: #4b33b5; --accent-soft: #4b33b514; --accent-44: #4b33b544; --accent-55: #4b33b555; --accent-66: #4b33b566; --accent-88: #4b33b588;
  --good: #1f6e44; --error: #a3241c; --link: #3a2599; --rune: #4b33b5; --glass-solid: #e6e0d4;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif; --serif: var(--sans); --sky-glow: none;
  --win-shadow: 0 1px 2px #3a2f1a14, 0 24px 48px -16px #3a2f1a59; --win-shadow-focus: 0 1px 2px #3a2f1a14, 0 28px 56px -16px #3a2f1a66;
  --bar-shadow: 0 1px 2px #3a2f1a14, 0 16px 32px -12px #3a2f1a4d;
  --bubble: #ddd5c6; --field: #f1ece3; --on-accent: #ffffff; --you-text: #ffffff;
  color-scheme: light;
}
[data-theme="dyslexia-stone"] body {
  background:
    radial-gradient(900px 520px at 12% -8%, #d9d1c1 0%, transparent 70%),
    radial-gradient(760px 480px at 100% 10%, #c4b9d6 0%, transparent 70%),
    radial-gradient(900px 600px at 60% 110%, #c9bda6 0%, transparent 70%),
    var(--bg) fixed;
}
[data-theme="dyslexia-stone"] .win { border-radius: 22px; border-color: #ffffff80; box-shadow: var(--win-shadow); }
[data-theme="dyslexia-stone"] .win .bar { border-bottom-color: var(--line); }
[data-theme="dyslexia-stone"] .win .hero h1 { font-size: 46px; font-weight: 700; letter-spacing: -.01em; }
[data-theme="dyslexia-stone"] .win .hero .lede { font-size: 22px; }
[data-theme="dyslexia-stone"] input[type=text], [data-theme="dyslexia-stone"] input:not([type]), [data-theme="dyslexia-stone"] input[type=email] { background: var(--field); border-color: var(--line); }
[data-theme="dyslexia-stone"] .test-banner { background: #e9d9a8; color: #4a3500; }
[data-theme="dyslexia-stone"] .taskbar { background: #e6e0d4e6; border-color: #ffffff80; }
@media (prefers-reduced-motion: no-preference) {
  [data-theme="dyslexia-stone"] #desk > .win { animation: rise .6s cubic-bezier(.2,.8,.2,1) backwards; }
  [data-theme="dyslexia-stone"] #desk > .win:nth-child(2) { animation-delay: .08s; }
  [data-theme="dyslexia-stone"] #desk > .win:nth-child(3) { animation-delay: .16s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* No glow anywhere in the calm look: the runes are plain carved marks with no halo and no breathing. The payment
   spinner still carves itself, just without the glow. */
[data-theme] .rn .aura { display: none; }
/* The pitch line under the name: calm, readable, no glow. */
[data-theme] .win .hero .lede { font-size: 20px; line-height: 1.4; color: var(--text); }
body { font-size: 16px; }
main { max-width: 640px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 .8em; }
a { color: var(--accent); }
.muted { color: var(--muted); }

.test-banner { background: #5a3d00; color: #ffe6a8; text-align: center; padding: 8px 16px; font-size: 14px; }

.hero { text-align: center; padding: 72px 0 36px; }
.hero h1 { font-size: 56px; letter-spacing: .02em; margin-bottom: .2em; }
.lede { font-family: var(--serif); font-size: 26px; margin-bottom: .6em; }
.sub { color: var(--muted); max-width: 30em; margin: 0 auto 1.2em; }
.building { display: inline-block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 12px; border-radius: 99px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; margin-bottom: 48px; scroll-margin-top: 16px; }
.card h2 { font-size: 30px; }
.promise { color: var(--accent); font-weight: 600; }

form { margin: 20px 0 8px; display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
input[type=text], input:not([type]), input[type=email] {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; width: 100%;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.hint { font-size: 13px; }
.check { display: flex; gap: 10px; align-items: center; color: var(--text); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }
.error { color: var(--error); font-size: 15px; }
.pay { margin-top: 12px; min-height: 50px; color-scheme: light; } /* PayPal's buttons are a light frame; without this Chrome paints a white box behind them on a dark page */
.fake-paypal { width: 100%; font: 18px var(--sans); padding: 13px; border-radius: 99px; border: 0; background: #ffc439; color: #111; cursor: pointer; }
.fake-paypal b { color: #003087; font-style: italic; }
.fake-paypal:disabled { opacity: .6; cursor: wait; }

#done-view { text-align: center; }
.done-mark { font-size: 40px; margin-bottom: 4px; }

.about { display: grid; gap: 24px; margin-bottom: 56px; }
.about h3 { font-size: 21px; margin-bottom: .3em; }
.about p { color: var(--muted); }


.faq { margin-bottom: 48px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; }
details p { color: var(--muted); margin: 10px 0 0; }

footer { text-align: center; color: var(--muted); font-size: 14px; padding: 8px 20px 40px; }

@media (min-width: 640px) {
  .about { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .hero { padding-top: 48px; }
  .hero h1 { font-size: 44px; }
  .lede { font-size: 22px; }
  .card { padding: 22px 18px; }
}

.fine { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
footer p { margin: 0 0 6px; }

.doc { max-width: 640px; padding-top: 32px; padding-bottom: 32px; }
.doc h1 { font-size: 38px; margin-top: 28px; }
.doc h2 { font-size: 22px; margin-top: 32px; }
.doc p { color: var(--muted); }
.doc strong { color: var(--text); }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font: 600 20px var(--serif); }


/* Carved runes with a breathing glow */
.mark { display: block; width: 92px; height: 92px; margin: 0 auto 14px; }
/* Only the big background rune and the logo breathe; the rest glow still (Helgi, 2026-09-27: fewer runes,
   and 13 breathing ones behind frosted glass cost the front page frames). */
.rn-md .aura, .task-logo .aura { animation: none; opacity: .6; }
.rn-md { display: block; width: 46px; height: 46px; margin-bottom: 6px; }
.rn-sm { width: 22px; height: 22px; }
.rn-inline { width: 30px; height: 30px; vertical-align: -5px; margin-right: 8px; }
.rn-back { width: 30px; height: 30px; }
/* Don't let every rune breathe in step */
.about > div:nth-child(2) .aura { animation-delay: -1.4s; }
.about > div:nth-child(3) .aura { animation-delay: -2.8s; }
.divider .rn:nth-child(2) .aura { animation-delay: -.8s; }
.divider .rn:nth-child(3) .aura { animation-delay: -1.6s; }
.rune-name { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); opacity: .8; margin-bottom: 10px; }
.divider { display: flex; justify-content: center; gap: 8px; margin: 0 0 44px; opacity: .6; }

/* Thinking: reið carves itself, glows, fades, again. Shown while a payment is confirmed. */
.working { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; color: var(--muted); font-size: 15px; }
.working .rn { width: 30px; height: 30px; }
.working .rn .stone, .working .rn .aura { stroke-dasharray: 190; stroke-dashoffset: 190; animation: carvein 2.8s cubic-bezier(.55,0,.25,1) infinite; }
.working .rn .aura { animation-name: carvein, breathe; animation-duration: 2.8s, 2.8s; }
@keyframes carvein { 0% { stroke-dashoffset: 190; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rn .aura { animation: none; opacity: .6; }
  .working .rn .stone, .working .rn .aura { animation: none; stroke-dashoffset: 0; }
}

/* ---------- The front page as the app's desktop (desk.css) ---------- */
.wallmark { position: fixed; right: 4vw; bottom: 8vh; width: min(30vw, 360px); height: min(30vw, 360px); opacity: .12; pointer-events: none; z-index: 0; }

/* Narrower than 1180px it's a normal scrolling page: windows stack, nothing drags. */
#desk { height: auto; max-width: 680px; margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
body.desktop #desk { max-width: none; margin: 0; padding: 0; display: block; }
#w-hero { order: 1; } #deposit { order: 2; } #w-show { order: 3; } #w-chat { order: 4; } #made { order: 5; }
#w-about { order: 7; } #w-faq { order: 9; } #desk > footer { order: 10; }
.win { container-type: inline-size; scroll-margin-top: 16px; }
body:not(.desktop) .win { position: relative; }
.bar * { -webkit-user-drag: none; }
.pill { font: 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: #d9ceff; margin-left: 6px; vertical-align: 1px; }
.win-body { padding: 18px 20px; }

/* hero: a small see-through card with no title bar */
#w-hero { background: #17141f66; border-color: #2a253699; }
.lite #w-hero { background-color: #19152a8c !important; }
.win .hero { text-align: left; padding: 16px 18px 18px; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; }
.win .hero .mark { width: 54px; height: 54px; margin: 0; }
.win .hero h1 { font-size: 36px; margin: 0; }
.win .hero .lede { font-size: 18px; margin: 0; }
.win .hero .sub { grid-column: 1 / -1; margin: 10px 0 8px; max-width: none; font-size: 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.glow-l { opacity: 0; animation: glow-in 1.4s ease-out forwards; }
@keyframes glow-in {
  0% { opacity: 0; color: #fff; text-shadow: 0 0 14px #b39dff, 0 0 4px #e6ddff; }
  25% { opacity: 1; color: #fff; text-shadow: 0 0 12px #b39dff, 0 0 3px #e6ddff; }
  100% { opacity: 1; color: inherit; text-shadow: 0 0 0 transparent; }
}
.win .hero .nosetup { grid-column: 1 / -1; margin: 0 0 10px; font-size: 15px; color: var(--text); font-weight: 600; }
.win .hero .building { grid-column: 1 / -1; justify-self: start; }
/* "Try a look": each button wears its own look's colours and font, so it is a little preview of it. */
.win .hero .looks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.looks p { flex-basis: 100%; margin: 0 0 2px; font-size: 15px; color: var(--muted); }
.looks button { font: 600 15px/1.2 var(--sans); letter-spacing: .03em; padding: 10px 14px; min-height: 44px; border-radius: 12px; cursor: pointer;
  background: var(--glass); color: var(--text); border: 2px solid var(--line); }
.looks button:hover { border-color: var(--accent); }
.looks button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.looks button[aria-pressed="true"]::before { content: "✓ "; color: var(--accent); }
.looks button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* "Bigger words" has to look bigger here too: this page sets its own small sizes, so lift them. */
[data-theme="large"] .win p, [data-theme="large"] .win label, [data-theme="large"] .win li { font-size: 18px; }
[data-theme="large"] .win .hero .lede { font-size: 23px; }
[data-theme="large"] .looks button { font-size: 17px; }

/* preorder window */
#deposit .win-body { padding: 20px 22px 22px; }
#deposit h2 { font-size: 26px; }
#deposit form { margin-top: 16px; }

/* what Rune is */
.win .about { margin: 0; padding: 20px 22px 8px; gap: 18px; }
@container (min-width: 480px) { .win .about { grid-template-columns: repeat(3, 1fr); } }
.win .about h3 { font-size: 19px; }
.win .about p { font-size: 15px; }

/* made by Rune: the showcase */
.show-body { padding: 14px; overflow-y: auto; }
body.desktop .show-body { flex: 1; min-height: 0; }
.show-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@container (min-width: 520px) { .show-grid { grid-template-columns: 1fr 1fr; } }
.show-card { background: #0f0d15; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.show-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 40%; display: block; background: #0b0a10; border-bottom: 1px solid var(--line); }
.show-text { padding: 11px 13px 13px; display: grid; gap: 5px; }
.show-text h3 { font-size: 17px; margin: 0; }
.show-text p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.45; }
.show-text a { justify-self: start; font-size: 13px; font-weight: 600; color: #d9ceff; text-decoration: none; border: 1px solid #a48bff55; border-radius: 99px; padding: 4px 11px; margin-top: 3px; }
.show-text a:hover { background: var(--accent-soft); }
.show-foot { text-align: center; color: var(--muted); font-size: 13px; margin: 14px 0 2px; }

/* questions */
.win.faq { margin: 0; }
.win.faq details:last-child { border-bottom: 0; }
.win.faq details:first-child { padding-top: 0; }

/* the demo chat is the app's chat window (desk.css); its bubbles are built from HTML, so no kept line breaks */
#w-chat { height: 560px; }
#w-chat .m { white-space: normal; text-wrap: pretty; }
#w-chat .compose input::placeholder { color: var(--faint); }

/* taskbar: the app's (desk.css), shown on the desktop layout only */
body:not(.desktop) .taskbar { display: none; }
.taskbar button.closed { color: var(--muted); }
#replay2 { border-left: 1px solid var(--line); border-radius: 0 9px 9px 0; margin-left: 4px; }

body.desktop #desk > footer { position: absolute; left: 16px; bottom: 100px; text-align: left; padding: 0; font-size: 13px; }
#desk > footer { padding: 8px 0 16px; }

/* The $29 button (Thor, 2026-10-01: "just straight to 29"). Wears the look's accent, so it follows the chosen look. */
.start { width: 100%; font: 700 18px var(--sans); padding: 14px; border-radius: 99px; border: 0; background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; min-height: 52px; }
.start:hover { filter: brightness(1.06); }
.start:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.start:disabled { opacity: .6; cursor: wait; }
.fine strong { color: var(--text); }