/* Landing: the drifting wall of books, and the open book the sign-in steps are written on.
   Everything here is scoped to html.kl-on (set by js/landing/config.js), so the classic page is untouched
   when the landing is off. Motion uses transform and opacity only. Tokens come from kit.css. */

html.kl-on {
  --kl-paper: var(--surf);
  --kl-shade: var(--surf-3);
  --kl-line: #D9C3A6;
  --kl-rule: #A08A76;            /* input rules: 3.2:1 against the page (#FFFCF7) */
  --kl-shadow-rgb: 96, 64, 36;
  --kl-ease-enter: cubic-bezier(0.18, 0.75, 0.22, 1);
}
@media (prefers-color-scheme: dark) {
  html.kl-on:not([data-theme='light']) { --kl-line: #54443A; --kl-rule: #86715F; --kl-shadow-rgb: 38, 26, 19; }
}
html.kl-on[data-theme='dark'] { --kl-line: #54443A; --kl-rule: #86715F; --kl-shadow-rgb: 38, 26, 19; }

/* ---------- the page frame: header and footer float over the wall ---------- */
/* Safari 26 tints its top and bottom bars with one solid colour. It takes the background of a fixed element at the edge,
   else html/body. That colour is the ground, which the progressive glass at the top already fades the wall into. */
html.kl-on, html.kl-on body { background: var(--ground); }
/* The wall is normal-flow content, as on apple.com, so Safari 26 draws it under its floating bars. Safari draws no position:fixed
   content below the bottom toolbar, and a fixed or sticky header gives a solid top band. So nothing fixed or sticky touches the top
   or bottom edge: header, glass, CTA and footer are absolute inside the body. The page is as tall as the large viewport, and the
   bottom controls lift by the difference (--kl-gap) so they stay above the toolbar. */
html.kl-on { --kl-gap: max(0px, calc(100lvh - 100svh)); overflow: hidden; }
html.kl-on body { position: relative; height: 100lvh; min-height: 100lvh; overflow: hidden; }
html.kl-on main { display: none; }
html.kl-on #shell-loader { position: absolute; }   /* the loader overlay is fixed on other pages; here it would touch both edges */
html.kl-on .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40; justify-content: center;
  padding: max(var(--s4), env(safe-area-inset-top, 0px)) var(--s5) 0; pointer-events: none;
}
html.kl-on .topbar > * { pointer-events: auto; }
html.kl-on .topbar .wordmark { font-size: 22px; line-height: 1.2; }
/* the text keeps its own soft halo in the ground colour, so a light frost over a busy cover never costs legibility */
html.kl-on .topbar .wordmark, html.kl-on footer nav a { text-shadow: 0 0 2px var(--ground), 0 0 5px var(--ground), 0 0 10px var(--ground), 0 0 18px var(--ground), 0 0 28px var(--ground); }
html.kl-on .topbar .nav-theme { position: absolute; right: max(8px, env(safe-area-inset-right, 0px)); top: max(var(--s2), env(safe-area-inset-top, 0px)); }
html.kl-on footer {
  position: absolute; left: 0; right: 0; bottom: var(--kl-gap); z-index: 40; flex-direction: row; justify-content: center; align-items: center;
  padding: 0 var(--s4) env(safe-area-inset-bottom, 0px); font-size: 12.5px; pointer-events: none;
}
html.kl-on footer > span { display: none; }
html.kl-on footer nav { pointer-events: auto; gap: 4px; }
html.kl-on footer nav a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
html.kl-on .topbar, html.kl-on footer { transition: opacity 0.2s var(--kl-ease-enter); }
/* Progressive glass: four layers behind each bar. Each blurs more and reaches less far, and its mask fades to nothing,
   so the frost and the ground tint grow gradually toward the edge and there is no line. The layers are siblings of the
   wall, never ancestors of the 3D book. */
html.kl-on { --kl-bar-top: 56px; --kl-bar-bot: 52px; --kl-fade: 64px; --kl-glass-a: 40%; }
.kl-glass { position: absolute; left: 0; right: 0; z-index: 35; pointer-events: none; }
.kl-glass-top { top: 2px; height: calc(var(--kl-bar-top) + var(--kl-fade) + env(safe-area-inset-top, 0px)); }
.kl-glass-bottom { position: absolute; bottom: 0; height: calc(var(--kl-gap) + var(--kl-bar-bot) + var(--kl-fade) + env(safe-area-inset-bottom, 0px)); }
.kl-g { position: absolute; inset: 0; }
.kl-g0 {
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  background: linear-gradient(var(--d), color-mix(in srgb, var(--ground) var(--kl-glass-a), transparent) 0%, color-mix(in srgb, var(--ground) 26%, transparent) 55%, color-mix(in srgb, var(--ground) 9%, transparent) 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(var(--d), #000 42%, transparent 100%); mask-image: linear-gradient(var(--d), #000 42%, transparent 100%);
}
.kl-g1 { -webkit-backdrop-filter: blur(5px) saturate(120%); backdrop-filter: blur(5px) saturate(120%); -webkit-mask-image: linear-gradient(var(--d), #000 30%, transparent 92%); mask-image: linear-gradient(var(--d), #000 30%, transparent 92%); }
.kl-g2 { -webkit-backdrop-filter: blur(10px) saturate(130%); backdrop-filter: blur(10px) saturate(130%); -webkit-mask-image: linear-gradient(var(--d), #000 40%, transparent 82%); mask-image: linear-gradient(var(--d), #000 40%, transparent 82%); }
.kl-g3 { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); -webkit-mask-image: linear-gradient(var(--d), #000 45%, transparent 70%); mask-image: linear-gradient(var(--d), #000 45%, transparent 70%); }
.kl-glass-top { --d: to bottom; }
.kl-glass-bottom { --d: to top; }

/* ---------- a phone: the wall is a tall page that scrolls (html.kl-scroll, set by config.js) ----------
   iOS Safari paints the strip above the page, and below its end, in the html background. It draws page content under its
   floating bars only where the page goes on, and a flick that scrolls the page folds the toolbar away. So on a phone the
   wall is five screens tall and scrolls natively. The top of the page is solid ground, the colour Safari paints above it,
   and fades into the wall: no edge at the top. The button and the links stay on screen (fixed, above the toolbar).
   While the book is open the page does not scroll (kl-lock), and the book sits on the screen the visitor sees. */
html.kl-on.kl-scroll { --kl-wall-h: calc(100lvh * 5); --kl-fade: 92px; overflow: visible; }
html.kl-on.kl-scroll.kl-lock { overflow: hidden; }
html.kl-on.kl-scroll body { height: auto; min-height: 0; overflow: visible; }
html.kl-scroll .kl { height: var(--kl-wall-h); }
html.kl-scroll .kl-stage { touch-action: pan-y; }
html.kl-scroll .kl-hero { bottom: auto; height: 100lvh; }
html.kl-scroll .kl-cta-wrap { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); }
html.kl-on.kl-scroll footer { position: fixed; bottom: 0; }
html.kl-scroll .kl-glass-bottom { display: none; }
html.kl-scroll .kl-glass-top { top: 0; }
/* the wordmark sits on near-solid ground here; its halo would only darken the top row by rounding */
html.kl-on.kl-scroll .topbar .wordmark { text-shadow: none; }
/* iOS Safari ignores the mask on a backdrop-filter, so each blur layer would end in a hard line across the covers. On a phone
   the top glass is the ground fade alone, with no blur: solid ground at the top row, then smoothly clear. */
html.kl-scroll .kl-g1, html.kl-scroll .kl-g2, html.kl-scroll .kl-g3 { display: none; }
html.kl-scroll .kl-g0 {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(to bottom, var(--ground) 0%, var(--ground) 12%, color-mix(in srgb, var(--ground) 90%, transparent) 26%,
    color-mix(in srgb, var(--ground) 70%, transparent) 42%, color-mix(in srgb, var(--ground) 46%, transparent) 58%,
    color-mix(in srgb, var(--ground) 24%, transparent) 74%, color-mix(in srgb, var(--ground) 8%, transparent) 88%, transparent 100%);
  -webkit-mask-image: none; mask-image: none;
}

/* the theme change is one instant swap: for one frame nothing may animate, so no element lags behind the others */
html.kl-nt, html.kl-nt *, html.kl-nt *::before, html.kl-nt *::after { transition: none !important; }
html.kl-leaving .topbar, html.kl-leaving footer { opacity: 0; }

/* ---------- layers ---------- */
.kl { position: relative; width: 100%; height: 100lvh; z-index: 30; overflow: hidden; overflow: clip; opacity: 0; transition: opacity 0.3s var(--kl-ease-enter); }
.kl.kl-ready { opacity: 1; }
.kl-paper { position: absolute; inset: 0; z-index: 2; background: var(--kl-paper); display: none; }
.kl-ground { position: absolute; inset: 0; z-index: 3; background: var(--ground); }
.kl-stage { position: absolute; inset: 0; z-index: 4; overflow: hidden; overflow: clip; touch-action: none; user-select: none; -webkit-user-select: none; }
.kl-hero { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.kl-fill { position: absolute; inset: 0; z-index: 7; background: var(--ground); opacity: 0; pointer-events: none; }
.kl-ui { position: absolute; inset: 0; z-index: 38; pointer-events: none; }   /* above the glass (35), below the header and footer (40) */
.kl-cta-wrap {
  position: absolute; left: 0; right: 0; bottom: calc(var(--kl-gap) + env(safe-area-inset-bottom, 0px) + 60px);
  display: flex; justify-content: center; pointer-events: none; opacity: 0;
}
.kl-cta { pointer-events: auto; height: 48px; padding: 0 30px; cursor: pointer; border: 0; }
.kl-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* no focus box after a tap or click on any landing control; keyboard users (html.kl-kbd) keep the ink ring */
html.kl-on:not(.kl-kbd) :is(a, button, summary, [role='button'], [tabindex]):is(:focus, :focus-visible) { outline: none !important; }
html.kl-on:not(.kl-kbd) .kl-cta:is(:focus, :focus-visible), html.kl-on:not(.kl-kbd) .b3-form-slot :is(a, button, .btn):is(:focus, :focus-visible) { box-shadow: none !important; }

/* ---------- hero scene wrappers ---------- */
.hero-kb, .hero-cam { position: absolute; inset: 0; }
.hero-pos, .hero-shift, .hero-scale, .hero-tilt { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.hero-pos { left: auto; top: auto; }
.hero-tilt { transform-style: preserve-3d; }
.hero-shadow {
  position: absolute; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--kl-shadow-rgb), 0.6), rgba(var(--kl-shadow-rgb), 0.22) 55%, rgba(var(--kl-shadow-rgb), 0));
}

/* ---------- the wall ---------- */
.w3 { position: absolute; inset: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.w3-col { position: absolute; left: 0; top: 0; height: 0; will-change: transform; }
.w3-cover {
  position: absolute; left: 0; border-radius: 8px; isolation: isolate;
  background-size: 100% 100%; background-repeat: no-repeat; background-color: var(--kl-shade);
  box-shadow: 0 0 0 1px rgba(var(--kl-shadow-rgb), 0.14), 0 6px 14px rgba(var(--kl-shadow-rgb), 0.2);
}

/* ---------- the 3D book ---------- */
.b3 { position: absolute; transform-style: preserve-3d; --o: 1; }
.b3-f { border-radius: 7%/4.7%; position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: var(--o); }
.b3-back { left: 0; top: 0; width: 100%; height: 100%; }
.b3-spine { background-size: 100% 100%; background-repeat: no-repeat; }
.b3-fore { background: repeating-linear-gradient(90deg, var(--kl-line) 0 1px, var(--kl-shade) 1px 2.4px); }
.b3-fore, .b3-head, .b3-tail { border-radius: 0; }
.b3-head, .b3-tail { background: repeating-linear-gradient(0deg, var(--kl-line) 0 1px, var(--kl-shade) 1px 2.4px); }
.b3-page, .b3-front { position: absolute; left: 0; top: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.b3-recto, .b3-verso, .b3-out, .b3-in { left: 0; top: 0; width: 100%; height: 100%; }
.b3-recto { background: var(--kl-paper); }
.b3-gut { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--kl-shadow-rgb), 0.12), rgba(0, 0, 0, 0) 12%); pointer-events: none; }
.b3-bleed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--kl-paper); border-radius: inherit; }
.b3-verso .b3-bleed { background: var(--kl-shade); }
.b3-verso { transform: rotateY(180deg); background: var(--kl-shade); }
.b3-out {
  background-size: 100% 100%; background-repeat: no-repeat; background-color: var(--kl-shade);
  box-shadow: 0 0 0 1px rgba(var(--kl-shadow-rgb), 0.28);
}
/* inside of the cover: an endpaper in the cover's colour family */
.b3-in { transform: rotateY(180deg); background: linear-gradient(90deg, rgba(var(--kl-shadow-rgb), 0) 86%, rgba(var(--kl-shadow-rgb), 0.16)), var(--kl-ep, var(--kl-shade)); }
.b3-endpaper {
  position: absolute; inset: 6%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--kl-ep-ink, var(--ink)); pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--kl-ep-ink, var(--ink)) 28%, transparent); border-radius: 6px; padding: 0 10%;
}
.b3-ep-title { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.b3-ep-rule { width: 2.4em; height: 1px; margin: 0.9em 0 0.7em; background: currentColor; opacity: 0.55; }
.b3-ep-author { font-size: 0.56em; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.b3-form-slot { position: absolute; left: 12%; right: 9%; top: 6%; bottom: 4%; pointer-events: none; }

/* ---------- the steps, written on the page ---------- */
.b3-form-slot .entry { width: 100%; height: 100%; max-width: none; text-align: center; pointer-events: auto; position: relative; display: block; }
.b3-form-slot .entry > .form-msg { margin: 0 0 6px; font-size: 12.5px; text-align: center; }
.b3-form-slot .entry > div:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.b3-form-slot .entry > #account-deleted-notice:not([hidden]) + #step-signup:not([hidden]),
.b3-form-slot .entry > #account-deleted-notice:not([hidden]) ~ div:not([hidden]) { height: calc(100% - 24px); }
.kl-title, .b3-form-slot h1 {
  flex: none; margin: 4px 0 10px; font-size: 24px; line-height: 1.12; font-weight: 700; letter-spacing: var(--h-track, -0.02em);
  text-wrap: balance; text-align: center; color: var(--ink);
}
.b3-form-slot #step-code > h1, .b3-form-slot #step-signup > h1 { font-size: 24px !important; }
.b3-form-slot #step-email > h1.greeting, .b3-form-slot #step-email > h1.greeting + p.sub { display: none; }
.b3-form-slot #step-code > p.sub { flex: none; margin: 0 0 6px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.b3-form-slot .panel { margin: auto 0 0; padding: 0; gap: 14px; background: none; box-shadow: none; border-radius: 0; text-align: left; }
.b3-form-slot #step-code > .panel { margin-top: auto; }
.b3-form-slot #step-code > .code-actions { margin: 8px 0 auto !important; }
.b3-form-slot #use-different-email::before { display: none; }
.b3-form-slot #step-email { justify-content: center; }
.b3-form-slot #step-email > .panel { margin: 0; }
.b3-form-slot #step-signup > .panel { margin-bottom: auto; }
.b3-form-slot .field { font-size: 13px; font-style: italic; font-weight: 400; color: var(--ink-3); }
.b3-form-slot .field input {
  height: 44px; margin-top: 6px; padding: 6px 2px 7px; border: 0; border-bottom: 1px solid var(--kl-rule); border-radius: 0;
  background: transparent; box-shadow: none; color: var(--ink); font-style: normal; font-size: 16px;
}
/* No box around the field, in any state (click, tap, autofill). Only a keyboard user sees the line grow, in the ink colour. */
.b3-form-slot .field input, .b3-form-slot .field input:focus, .b3-form-slot .field input:focus-visible, .b3-form-slot .field input:active {
  outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
}
.b3-form-slot .field input:focus { border-color: transparent; border-bottom-color: var(--kl-rule); }
.b3-form-slot .field input[aria-invalid='true']:focus { border-bottom-color: var(--danger, var(--rose-ink)); }
html.kl-kbd .b3-form-slot .field input:focus-visible { border-bottom: 2px solid var(--ink); padding-bottom: 6px; box-shadow: 0 1px 0 0 var(--ink) !important; }
.b3-form-slot .field input:-webkit-autofill, .b3-form-slot .field input:-webkit-autofill:hover, .b3-form-slot .field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--kl-paper) inset !important; box-shadow: 0 0 0 1000px var(--kl-paper) inset !important;
}
.kl, .kl *, .b3-form-slot, .b3-form-slot * { -webkit-tap-highlight-color: transparent; }
/* buttons and links on the page keep a visible ring, in the ink colour (not blue) */
.b3-form-slot :is(button, a, summary, .btn):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.b3-form-slot .field input::placeholder { color: var(--ink-3); }
.b3-form-slot .field input[aria-invalid='true'] { border-bottom-color: var(--danger, var(--rose-ink)); }
.b3-form-slot .code-field input { font-size: 22px; font-style: normal; }
.b3-form-slot .cs-slot { border-color: var(--kl-rule); background: transparent; }
.b3-form-slot .form-msg { font-size: 12.5px; line-height: 1.35; }
.b3-form-slot .code-message { min-height: 2.4em; }
.b3-form-slot .submit { height: 46px; margin-top: 0; }
.b3-form-slot .btn:active { transform: none !important; opacity: 0.85; }
.b3-form-slot .rule { margin: 12px 0 8px; font-size: 11.5px; color: var(--ink-3); }
.b3-form-slot .rule::before, .b3-form-slot .rule::after { background: var(--kl-rule); }
.b3-form-slot .sso { gap: 8px; }
.b3-form-slot .sso .btn { height: 42px; background: transparent; box-shadow: none; border: 1px solid var(--kl-rule); font-size: 14.5px; }
.b3-form-slot #config-status { min-height: 0; margin: 0; font-size: 12px; text-align: center; }
.b3-form-slot #config-status:empty { display: none; }
.b3-form-slot .code-actions .linklike, .b3-form-slot .linklike { font-size: 13.5px; }
.b3-form-slot details.devbox { margin-top: 8px; }

/* a way back for keyboard and screen-reader users: hidden until it has focus */
.kl-back {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; background: none; color: var(--link);
  font: inherit; font-size: 13px; font-style: italic; cursor: pointer;
}
.kl-back:focus-visible { top: -26px; width: auto; height: auto; margin: 0; padding: 2px 4px; overflow: visible; clip-path: none; outline: 2px solid var(--ink); outline-offset: 2px; }

/* the hidden steps stay out of the tab order while the book is shut (the entry is inert and parked) */
@media (prefers-reduced-motion: reduce) {
  .kl, html.kl-on .topbar, html.kl-on footer { transition: none; }
}