/* Built from dev/account-white.css by dev/release.js: edit it there and run `node dev/release.js` again. */
/* The profile page (dev/account.html) in the white skin of dev/layout.html. Loaded after site.css: the live page's
   layout and every element stay as they are, only their light changes. Behind the card lie the page's soft light
   (.lo-bg) and the day world (.lo-world), both drawn by layout.js. The same rules as the home mock-up: one ink, colour
   only in the light behind, frosted white glass on hairlines, black buttons.

   The skin holds for the light theme only (:root[data-theme='light'], dev/themes.js): in the dark one the page is the
   live site's own, over the same light and world drawn by night. */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff') format('woff'); }

/* ---------------------------------------------------------------- tokens */

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #fbfbfc;
  --bg-raised: #ffffff;
  --text: #111214;
  --ink-2: #3b3e46;
  --muted: #62656d;
  --faint: #9a9ca3;
  --line: rgb(0 0 0 / 0.07);
  --line-strong: rgb(0 0 0 / 0.12);
  --accent: #3b3e46;
  --accent-deep: #3b3e46;
  --ok: #24a46c;
  --float: 0 1px 2px rgb(16 18 24 / 0.05), 0 14px 34px -22px rgb(16 18 24 / 0.28);
  --float-up: 0 1px 2px rgb(16 18 24 / 0.06), 0 22px 44px -24px rgb(16 18 24 / 0.34);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  body { background: var(--bg); color: var(--text); }
  body::after { display: none; } /* the film grain belongs to the dark pages */
  ::selection { background: rgb(17 18 20 / 0.12); color: var(--text); }
  :focus-visible { outline-color: var(--ink-2); }
}

/* ---------------------------------------------------------------- the page's light and the day world */

.lo-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.lo-world.is-account {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: layout paint;
  /* the hills sit low behind the card and dissolve into the page at both ends */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, rgb(0 0 0 / 0.5) 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 72%, rgb(0 0 0 / 0.5) 86%, transparent);
}
.lo-world > * { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.lo-world > i, .lo-world > .lo-sun, .lo-world > .lo-leaf { image-rendering: pixelated; }
.order-page { isolation: auto; background: none; }
.order-page .hero-scene { display: none; }

/* everything below, up to the motion, is the light theme's */
:root[data-theme='light'] {

/* ---------------------------------------------------------------- navigation: one light glass pill */

.nav-pill, .nav.is-scrolled .nav-pill {
  background: rgb(255 255 255 / 0.78);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 32px -18px rgb(16 18 24 / 0.3);
}
.nav-brand { color: var(--text); }
.nav-brand .blade { color: var(--text); }
.nav-cta { background: #111214; color: #fff; }
.nav-cta:hover { background: #000; }

/* ---------------------------------------------------------------- the card */

.order-card {
  background: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(16 18 24 / 0.06), 0 40px 90px -40px rgb(16 18 24 / 0.38);
}
.order-card::before { background: linear-gradient(to right, transparent, rgb(255 255 255 / 0.95), transparent); }
.order-card h1 { color: var(--text); -webkit-text-fill-color: currentColor; background: none; }
h1 > .w, h2 > .w, .order-card h2 { -webkit-text-fill-color: currentColor; background: none; }
.order-status { background: rgb(255 255 255 / 0.75); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.order-status.is-paid { --dot: #24a46c; }
.order-status.is-pending { --dot: #e0a93a; }
.order-status.is-bad { --dot: #e06a55; }

/* buttons: black pills, soft white pills */
.btn-primary { background: #111214; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 12px 26px -16px rgb(0 0 0 / 0.45); }
.btn-primary:hover { background: #000; box-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 16px 32px -14px rgb(0 0 0 / 0.5); }
.btn-ghost { background: rgb(255 255 255 / 0.72); color: var(--text); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.btn-ghost:hover { background: #fff; }

/* fields: white, a hairline, and an ink ring when focused */
.field > span { color: var(--muted); }
.field input { background: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); color: var(--text); }
.field input:hover { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.field input:focus { background: #fff; box-shadow: inset 0 0 0 1px rgb(17 18 20 / 0.55), 0 0 0 4px rgb(17 18 20 / 0.07); }
.field input::placeholder { color: #b8bac0; }
.form-error, .buy-error { color: #c8452f; }
.auth-alt a, .link-btn, .acc-details summary { color: var(--text); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.22); text-underline-offset: 3px; }
.auth-alt a:hover, .link-btn:hover:not(:disabled) { text-decoration-color: currentColor; }

/* the sign-in / sign-up switch */
.auth-tabs { background: rgb(0 0 0 / 0.045); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.04); }
.auth-tabs a { color: var(--muted); }
.auth-tabs a[aria-selected='true'] { color: var(--text); }
.auth-tabs-thumb { background: #fff; box-shadow: 0 1px 2px rgb(16 18 24 / 0.08), 0 6px 16px -8px rgb(16 18 24 / 0.25); }

/* notes */
.buy-note { background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07); color: var(--muted); }
.dev-note { background: rgb(255 244 222 / 0.8); box-shadow: inset 0 0 0 1px rgb(224 169 58 / 0.35); color: #6b5a3a; }
.dev-note code { color: #8a5a10; }

/* the profile's sections */
.acc-section { border-top-color: var(--line); }
.acc-big { color: var(--text) !important; }
.acc-buy { background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07), var(--float); }
.order-details, .order-details div, .acc-orders, .acc-orders a { border-color: var(--line); }
.acc-orders a:hover { color: var(--text); background: rgb(0 0 0 / 0.025); }
.acc-order-status.is-paid { color: #24a46c; }
.acc-order-status.is-pending { color: #b8862a; }
.order-key { background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.order-hint { color: var(--faint); }

/* the referral link, and the code from the client typed into one cell per character */
.ref-link { background: rgb(255 255 255 / 0.85); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }
.ref-link code { color: var(--text); }
.code-cell { background: rgb(255 255 255 / 0.9); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); color: var(--text); }
.code-cell.is-filled { background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18); }
.code-cell.is-active { box-shadow: inset 0 0 0 1px rgb(17 18 20 / 0.55), 0 0 0 4px rgb(17 18 20 / 0.07); }
.code-cell.is-active:empty::after { background: var(--text); }
.code-dash { color: var(--faint); }
.field .type-box input::selection { background: rgb(17 18 20 / 0.14); }
.type-char.is-decoding { color: var(--ink-2); }

/* the media application: its cards, the platform switch and the badge */
.media-app { background: rgb(255 255 255 / 0.7); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07); }
.media-app-channel a { color: var(--text); text-decoration: underline; text-decoration-color: rgb(0 0 0 / 0.22); text-underline-offset: 3px; }
.media-badge { background: rgb(0 0 0 / 0.05); color: var(--text); }
.segmented { background: rgb(0 0 0 / 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.segmented-thumb { background: #fff; box-shadow: 0 1px 2px rgb(16 18 24 / 0.08), 0 6px 16px -8px rgb(16 18 24 / 0.25); }

/* the toast */
.toast { background: rgb(255 255 255 / 0.92); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.07), var(--float-up); color: var(--text); }

}
@keyframes char-glow { from { opacity: 0; color: #6f8fe8; text-shadow: 0 0 12px rgb(111 143 232 / 0.6); } 20% { opacity: 1; } }

/* ---------------------------------------------------------------- motion: the card arrives, each view slides in */

.order-card { animation: acc-in 0.8s var(--ease) 0.1s backwards; }
@keyframes acc-in { from { opacity: 0; translate: 0 18px; scale: 0.98; filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  .order-card { animation: none; }
}