/* Account pages: full page, split. The left half is the black keyboard
   after dark, a heading and the floor of the close's sleeping keyboard with
   the graphite fn lit at its corner and the island rising out of it. The
   right half is the paper the form sits on: the two doors, Google, and the
   fields, nothing else. Loaded after site.css on account pages only; no
   inline styles anywhere (the strict policy). */

.page-auth { background: var(--paper); }
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

/* ---------- the keyboard half ---------- */

.ab {
  position: -webkit-sticky;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vh, 3rem);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 4.4vw, 4.5rem) 0;
  background-color: var(--night);
  background:
    radial-gradient(70% 42% at 28% 100%, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #131316 0%, var(--night) 55%, #08080a 100%);
  color: #fff;
  overflow: hidden;
  overflow: clip;
}
/* The seam where the keyboard meets the paper: one hairline of rim light. */
.ab::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255, 255, 255, 0.07); pointer-events: none; z-index: 5; }
.ab ::selection { background: #fff; color: var(--night); }
.ab :focus-visible { outline-color: #fff; }
.ab .brand, .ab .wordmark { color: #fff; }
.ab .tile { border-color: rgba(190, 190, 200, 0.38); }
.ab-top { display: flex; align-items: center; min-height: 2.75rem; }
.ab-h { font: 600 clamp(2.375rem, 3.9vw, 4rem)/1.01 var(--serif); letter-spacing: -0.024em; color: #fff; text-wrap: balance; max-width: 11em; }
.ab-h em { font-weight: 500; font-style: italic; letter-spacing: -0.01em; }

/* The floor: --fn the lit key, --nu the sleeping board's keys, --lift the
   room the island needs above fn. It sits at the bottom of the half, and the
   board's chassis runs off the bottom and right edges. */
.ab-floor {
  --fn: clamp(8rem, min(12.5vw, 24vh), 14rem);
  --nu: calc(var(--fn) * 0.42);
  --lift: 9.875rem;
  align-self: end;
  padding-top: 2.75rem;
  min-width: 0;
}
.ab-rig { margin-left: max(0px, calc((16.5rem - var(--fn)) / 2)); margin-right: calc(clamp(1.5rem, 4.4vw, 4.5rem) * -1); margin-bottom: calc(var(--nu) * 0.62); }
.ab .island { cursor: default; pointer-events: none; }
.island.still .tick path { stroke-dashoffset: 0; }
.ab-board {
  --bu: var(--nu);
  position: absolute; z-index: 1;
  left: calc(var(--fn) - var(--nu) * 0.6);
  bottom: calc(var(--fn) * 0.035 - var(--nu) * 0.42 - 3rem);
  padding: calc(var(--nu) * 0.16) calc(var(--nu) * 0.16) calc(var(--nu) * 0.42 + 3rem) calc(var(--nu) * 0.8);
  margin: 0;
}
.ab-board .key.half { height: calc(var(--nu) * 0.47); }

/* fn, lit: the one key awake on a sleeping board. */
.ab .fn-hero { cursor: default; }
.ab .fn-hero .cap {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 0 calc(var(--fn) * 0.42) rgba(255, 255, 255, 0.11),
    0 0 calc(var(--fn) * 0.09) rgba(255, 255, 255, 0.15),
    0 calc(var(--fn) * 0.06) calc(var(--fn) * 0.14) rgba(0, 0, 0, 0.6);
}
.ab .fn-hero.is-down .cap { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 calc(var(--fn) * 0.5) rgba(255, 255, 255, 0.16), 0 0 calc(var(--fn) * 0.1) rgba(255, 255, 255, 0.2), 0 calc(var(--fn) * 0.02) calc(var(--fn) * 0.05) rgba(0, 0, 0, 0.6); }
.ab .fn-hero .lg { text-shadow: 0 0 0.75rem rgba(255, 255, 255, 0.55); }
.ab .fn-hero .lg.mark svg { filter: drop-shadow(0 0 0.25rem rgba(255, 255, 255, 0.45)); }
@supports selector(:has(a)) {
  .ab .rig:has(.fn-hero.is-down) .dock { transform: translateY(calc(var(--fn) * 0.05)); transition-duration: 0.07s; }
}

/* The pen note sits over the board's top edge, pointing back at fn. The
   board stands about 1.91 fn tall above the rig's floor, so the note and
   the z's ride that edge at every size. */
.ab-note { left: calc(var(--fn) + 1.75rem); top: calc(var(--lift) - var(--fn) * 0.908 - 2.5rem); z-index: 3; font-size: clamp(1.5rem, 1.9vw, 1.875rem); color: var(--blush); transform: rotate(-4deg); }
.ab-note .scrawl { left: -3.25rem; top: 1rem; width: 3rem; height: 2.25rem; }
.ab .zzz { color: rgba(255, 255, 255, 0.5); font-size: clamp(1.375rem, 1.8vw, 1.875rem); z-index: 3; }
.ab .rig .zzz.z1 { left: calc(var(--fn) + var(--nu) * 4.9); top: calc(var(--lift) - var(--fn) * 0.908 - 1.75rem); bottom: auto; }
.ab .rig .zzz.z2 { left: calc(var(--fn) + var(--nu) * 6.9); top: calc(var(--lift) - var(--fn) * 0.908 - 1rem); bottom: auto; }
.ab .rig .zzz.z3 { display: none; left: calc(var(--fn) + var(--nu) * 8.9); top: calc(var(--lift) - var(--fn) * 0.908 - 2.125rem); bottom: auto; }

/* ---------- the paper half ---------- */

.af {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(1rem, 2vw, 1.5rem) var(--gutter) 0.75rem;
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  background: var(--paper);
  min-width: 0;
}
.af-top { display: flex; justify-content: flex-end; align-items: center; min-height: 2.75rem; }
.af-back { font-size: 0.9375rem; font-weight: 400; color: var(--ink-2); text-decoration: none; }
.af-back svg, .af-back-in svg { transition: transform 0.3s var(--ease); }
@media (hover: hover) {
  .af-back:hover, .af-back-in:hover { color: var(--ink); }
  .af-back:hover svg, .af-back-in:hover svg { transform: translateX(-0.1875rem); }
}
.af-main { align-self: center; justify-self: center; width: min(100%, 26rem); padding: clamp(1rem, 3.5vh, 2.5rem) 0; }
.af h1 { font-size: clamp(2.375rem, 3.4vw, 3.25rem); line-height: 1.02; letter-spacing: -0.024em; }
.af h1.sr { font-size: 1rem; }
.af-lede { margin-top: 0.875rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.af-lede strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.af-small { margin-top: 0.875rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.af-small a { color: var(--ink-2); }

/* The two doors: two keycaps in one tray. */
.auth-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; padding: 0.3125rem; border-radius: 0.9375rem; background: var(--paper-3); box-shadow: inset 0 1px 2px rgba(40, 34, 20, 0.12); }
.auth-switch a { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 0.75rem 2px; border-radius: 0.6875rem; font: 500 0.9688rem/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: color 0.15s, background-color 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
.auth-switch a[aria-current='page'] { color: var(--ink0); background: linear-gradient(180deg, #fff, #f3f1ec); box-shadow: inset 0 -0.1875rem 0 rgba(60, 50, 30, 0.1), 0 0 0 1px rgba(25, 25, 30, 0.12), 0 0.25rem 0.5rem -0.25rem rgba(40, 34, 20, 0.3); }
@media (hover: hover) {
  .auth-switch a:not([aria-current]):hover { color: var(--ink); background: rgba(255, 255, 255, 0.5); }
}

/* Continue with Google, drawn the way Google's sign in guidance asks: a
   white button, the #747775 outline, #1F1F1F text in Roboto Medium where
   the visitor has it, and the four colour G on white. */
.gbtn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3rem; margin-top: 1.375rem; padding: 0 0.75rem;
  border-radius: 0.8125rem; border: 1px solid #747775;
  background: #fff; color: #1f1f1f;
  font: 500 0.9375rem/1.25 Roboto, 'Google Sans', var(--sans); letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.gbtn .g-mark { width: 1.25rem; height: 1.25rem; flex: none; }
.gbtn:active { background: #f1f2f2; }
.gbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.1875rem; }
@media (hover: hover) {
  .gbtn:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.18), 0 1px 3px 1px rgba(60, 64, 67, 0.1); }
}

/* or: a hairline with the word on it. */
.af-or { display: flex; align-items: center; gap: 0.875rem; margin: 1.125rem 0 0; font-size: 0.8438rem; color: var(--ink-3); }
.af-or::before, .af-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }

.af-problem { margin-top: 1.125rem; padding: 0.6875rem 0.875rem; border-radius: 0.75rem; background: var(--pen-wash); border: 1px solid rgba(178, 60, 42, 0.18); color: #7d2b1e; font-size: 0.9375rem; line-height: 1.45; text-wrap: pretty; }
.af-problem a { color: inherit; font-weight: 500; text-decoration-color: rgba(125, 43, 30, 0.4); }
.af-problem.shake { animation: af-shake 0.42s var(--ease); }
@keyframes af-shake { 20% { transform: translateX(-0.375rem); } 45% { transform: translateX(0.3125rem); } 70% { transform: translateX(-0.1875rem); } }

.af-form { margin-top: 1.125rem; display: grid; gap: 1rem; }
.af h1 + .af-form, .af-lede + .af-form, .af h1 + .af-problem { margin-top: 1.5rem; }
.af-field { display: grid; gap: 0.4375rem; }
.af-field label { font: 500 0.875rem/1.2 var(--sans); color: var(--ink); }
.af-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.af-forgot { font-size: 0.875rem; line-height: 1.2; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; padding: 0.875rem 0 0.875rem 0.5rem; margin: -0.875rem 0; }
@media (hover: hover) {
  .af-forgot:hover { color: var(--ink); text-decoration-color: currentColor; }
}
.af-field input {
  width: 100%; height: 3rem; padding: 0 0.9375rem;
  border-radius: 0.8125rem; border: 1px solid var(--line-strong);
  background: var(--white); font: 400 1rem var(--sans); color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none; appearance: none;
}
.af-field input::placeholder { color: var(--ink-3); opacity: 1; }
.af-field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 0.25rem rgba(20, 20, 22, 0.08); }
.af-field input[aria-invalid='true'] { border-color: var(--pen); box-shadow: 0 0 0 0.25rem rgba(178, 60, 42, 0.08); }
@media (hover: hover) {
  .af-field input:hover:not(:focus) { border-color: rgba(25, 25, 30, 0.36); }
}
.pw { position: relative; }
.pw input { padding-right: 3.5rem; }
.pw-eye { position: absolute; right: 0.125rem; top: 50%; width: 2.75rem; height: 2.75rem; margin-top: -1.375rem; border-radius: 0.625rem; display: grid; place-items: center; color: var(--ink-3); transition: color 0.15s, background-color 0.15s; }
.pw-eye svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pw-eye .i-hide { display: none; }
.pw-eye[aria-pressed='true'] .i-show { display: none; }
.pw-eye[aria-pressed='true'] .i-hide { display: block; }
@media (hover: hover) {
  .pw-eye:hover { color: var(--ink); background: rgba(20, 20, 22, 0.05); }
}
.pw-req { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; line-height: 1.2; color: var(--ink-3); transition: color 0.2s; }
.pw-req svg { width: 0.875rem; height: 0.875rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; transition: opacity 0.2s, transform 0.3s var(--spring); }
.pw-req.met { color: var(--ink); }
.pw-req.met svg { opacity: 1; transform: scale(1.12); }
.af-form .btn { margin-top: 0.375rem; }
.af-one { margin-top: 1.5rem; }

.af-legal { margin-top: 1rem; font-size: 0.8438rem; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.af-legal a { color: var(--ink-2); }
.af-alt { margin-top: 1rem; }
.af-back-in { font-weight: 400; font-size: 0.9688rem; color: var(--ink-2); text-decoration: none; }

.af-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1rem; font-size: 0.8125rem; color: var(--ink-3); padding-bottom: env(safe-area-inset-bottom); }
.af-foot a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-3); text-decoration: none; }
@media (hover: hover) {
  .af-foot a:hover { color: var(--ink); }
}

/* Signing in for the Mac app: the island itself, rising above the doors. */
.af-banner:empty { display: none; }
.af-banner { margin-bottom: 1.125rem; }
.af-banner > *, .connect-isle {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0.4375rem 1.25rem 0.4375rem 0.5rem;
  border-radius: 1.625rem; background: #08080a; border: 1px solid rgba(190, 190, 200, 0.32); color: #fff;
  font: 500 0.9375rem/1.3 var(--sans);
  box-shadow: 0 1.125rem 2.25rem -1.25rem rgba(8, 8, 12, 0.6), 0 0.25rem 0.625rem -0.25rem rgba(8, 8, 12, 0.3);
  transform-origin: 50% 100%;
  animation: isle-rise 0.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
.af-banner p { margin: 0; color: #fff; }
.ci-globe { width: 2.375rem; height: 2.375rem; flex: none; }
.af-banner ::selection { background: #fff; color: var(--night); }
@keyframes isle-rise { from { opacity: 0; transform: translateY(0.75rem) scale(0.9); filter: blur(0.25rem); } }

/* Done: a pressed graphite key holding a tick (or the envelope). */
.af-done { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; margin-bottom: 1.5rem; border-radius: 0.9375rem; color: #fff; background: linear-gradient(180deg, #2b2b31, #0b0b0d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -0.25rem 0 rgba(0, 0, 0, 0.6), 0 0 0 1px #000, 0 0.75rem 1.5rem -0.75rem rgba(20, 20, 25, 0.55); }
.af-done svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.page-auth-connected .af-done svg, .page-auth-reset-done .af-done svg { stroke-width: 2.4; stroke-dasharray: 24; stroke-dashoffset: 0; animation: tick-draw 0.5s 0.25s ease both; }
@keyframes tick-draw { from { stroke-dashoffset: 24; } }
.af-cue { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; color: var(--ink-2); }
.af-next { margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--line-2); }
.af-go { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }

/* Account: who you are, the download, the way out. */
.af-who { margin-top: 1.5rem; border-top: 1px solid var(--ink); }
.af-who > div { display: grid; gap: 0.375rem; padding: 0.9375rem 0 1rem; border-bottom: 1px solid var(--line-2); }
.af-who dt { font-size: 0.8125rem; line-height: 1.2; color: var(--ink-3); }
.af-who dd { font: 500 1.0625rem/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.af-get { margin-top: 2rem; display: grid; gap: 0.75rem; justify-items: start; }
.af-get h2 { font-size: 1.625rem; line-height: 1.15; }
.af-get p { font-size: 0.9688rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.af-get .btn { margin-top: 0.375rem; }
.af-note { font-size: 0.875rem; color: var(--ink-3); }
.af-note a { color: var(--ink-2); }
.af-out { margin-top: 2rem; padding-top: 1.125rem; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.9375rem; color: var(--ink-2); }
.af-out button { min-height: 2.75rem; font: 500 0.9375rem/1.4 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
@media (hover: hover) {
  .af-out button:hover { text-decoration-color: currentColor; }
}

/* ---------- capture and reduced motion ---------- */

.capture .af-banner > *, .capture .connect-isle, .capture .af-done svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .af-banner > *, .connect-isle, .af-done svg, .af-problem.shake { animation: none; }
  .pw-req svg, .af-back svg, .af-back-in svg { transition: none; }
}

/* ---------- responsive ---------- */

@media (min-width: 1680px) {
  .ab-h { font-optical-sizing: none; font-variation-settings: 'opsz' 60; }
  .af h1 { font-optical-sizing: none; font-variation-settings: 'opsz' 48; }
  .ab .rig .zzz.z3 { display: block; }
}
@media (max-width: 1180px) {
  .ab .rig .zzz.z2 { display: none; }
}

/* Short laptop screens: the form tightens so Create account fits whole. */
@media (min-width: 861px) and (max-height: 800px) {
  .af-main { padding: 0.5rem 0; }
  .auth-switch a { min-height: 2.5rem; }
  .gbtn { margin-top: 1rem; min-height: 2.75rem; }
  .af-or { margin-top: 0.75rem; }
  .af-problem { margin-top: 0.875rem; padding-top: 0.5625rem; padding-bottom: 0.5625rem; }
  .af-form { margin-top: 0.875rem; gap: 0.75rem; }
  .af-field { gap: 0.375rem; }
  .af-field input { height: 2.75rem; }
  .af-form .btn.lg { height: 3.25rem; }
  .af-legal { margin-top: 0.75rem; }
  .af-banner { margin-bottom: 0.75rem; }
  .af-banner > *, .connect-isle { min-height: 2.875rem; }
  .ab-floor { --fn: clamp(7.25rem, min(11vw, 21vh), 12rem); }
}
@media (min-width: 861px) and (max-height: 660px) {
  .af { padding-top: 0.5rem; }
  .af-top { min-height: 2.25rem; }
}

/* Phones and narrow tablets: the keyboard becomes a band across the top
   with the heading, and the paper slides up over it with the form. The band
   shows the board's bottom row, fn lit at its corner. */
@media (max-width: 860px) {
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ab { position: relative; height: auto; grid-template-rows: auto auto auto; gap: 0.375rem; padding: 0.625rem var(--gutter) 0; padding-top: max(0.625rem, env(safe-area-inset-top)); }
  .ab::after { display: none; }
  .ab .dock { display: none; }
  .ab-h { margin-top: 0.5rem; font-size: clamp(1.875rem, 7.8vw, 2.5rem); line-height: 1.04; max-width: 11em; }
  .ab-floor { --fn: 5.75rem; --nu: 2.5rem; --lift: 0rem; padding-top: 2.25rem; }
  .ab-rig { margin-left: 0; margin-right: calc(var(--gutter) * -1); margin-bottom: 2.625rem; }
  .ab-board .brow:not(:last-child) { display: none; }
  .ab .fn-hero .lg.tr { font-size: 0.875rem; }
  .ab-note { left: calc(var(--fn) + 1.25rem); top: -1.875rem; font-size: 1.375rem; }
  .ab-note .scrawl { left: -2.375rem; top: 0.875rem; width: 2.125rem; height: 1.625rem; }
  .ab .zzz { font-size: 1.25rem; }
  .ab .rig .zzz.z1, .ab .rig .zzz.z3 { display: none; }
  .ab .rig .zzz.z2 { display: block; left: auto; right: calc(var(--gutter) + 0.75rem); top: -1.125rem; }
  .af { grid-template-rows: minmax(0, 1fr) auto; position: relative; z-index: 2; min-height: 0; margin-top: -1.5rem; border-radius: 1.5rem 1.5rem 0 0; padding-top: 0.25rem; box-shadow: 0 -0.75rem 1.75rem -1rem rgba(0, 0, 0, 0.55); }
  .af-top { display: none; }
  .af-main { width: 100%; max-width: 30rem; padding: 1.75rem 0 2rem; }
  .af h1 { font-size: clamp(2.25rem, 9.4vw, 2.75rem); }
  .af-field input { font-size: 1rem; }
}

@media (max-width: 360px) {
  .ab-note { font-size: 1.25rem; }
  .auth-switch a { font-size: 0.9063rem; padding: 0 0.5rem 2px; }
  .af-lrow { flex-wrap: wrap; }
}