/* The front door's pages, in Life's light look (tokens, the colour field, the glass card and the icon copied from
   pb_public/css/style.css, the sign-in screen's look; the door cannot load Life's own CSS). Centred, like that screen. */
:root {
  --bg: #F2F3F7; --card: #FFFFFF; --ink: #0B0B0F; --ink-2: #3A3A42; --muted: #6C6C72;
  --accent: #0A6CDE; --accent-text: #0A6CDE; --red: #D7261E; --green: #177A3B;
  --field: rgba(118, 118, 128, .12);
  --glass: rgba(255, 255, 255, .55); --glass-blur: blur(22px) saturate(190%);
  --glass-edge-hi: rgba(255, 255, 255, .95); --glass-edge-lo: rgba(255, 255, 255, .18); --glass-inset: rgba(255, 255, 255, .85);
  --glass-shadow: 0 14px 34px -10px rgba(30, 45, 95, .28), 0 2px 6px rgba(30, 45, 95, .08);
  --field-1: rgba(110, 165, 255, .55); --field-2: rgba(255, 176, 140, .45); --field-3: rgba(165, 135, 255, .40); --field-4: rgba(110, 215, 195, .35);
  --card-shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 10px 26px -14px rgba(20, 30, 60, .16);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 22px; --radius-sm: 14px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; isolation: isolate; font: 17px/1.4 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
main { max-width: 380px; margin: 0 auto; padding: 10vh 16px 32px; }
/* The colour field: soft light at the corners, fixed behind everything. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(70% 38% at 0% 0%, var(--field-1), transparent 70%),
  radial-gradient(60% 34% at 100% 22%, var(--field-2), transparent 70%),
  radial-gradient(80% 42% at 90% 100%, var(--field-3), transparent 70%),
  radial-gradient(70% 36% at 0% 72%, var(--field-4), transparent 70%),
  transparent; }
.door-icon { display: block; width: 88px; height: 88px; margin: 0 auto 16px; border-radius: 20px;
             box-shadow: 0 12px 28px -10px rgba(30, 45, 95, .40), 0 2px 6px rgba(30, 45, 95, .10); }
h1 { font-size: 34px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; margin: 10px 0 8px; text-align: center; }
p { margin: 0 0 16px; }
.muted { color: var(--muted); text-align: center; }
/* Life's glass card: a translucent fill that blurs what is behind, a soft shadow, a highlight along the top, and a light
   edge (a 1 px gradient border cut out with a mask). */
.card { position: relative; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
        border-radius: 28px; padding: 20px; margin-bottom: 16px; box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inset); }
.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(155deg, var(--glass-edge-hi), var(--glass-edge-lo) 32%, transparent 52%, var(--glass-edge-lo) 78%, var(--glass-edge-hi));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
label { display: block; font-size: 15px; color: var(--ink-2); margin: 0 0 14px; }
input, select { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); background: var(--field); font: inherit; color: var(--ink); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { width: 100%; padding: 14px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button[disabled] { opacity: .6; cursor: default; }
a { color: var(--accent-text); text-decoration: none; word-break: break-all; }
.error { color: var(--red); font-size: 15px; margin: 12px 0 0; text-align: center; }

.done { text-align: center; color: var(--green); font-weight: 600; }
p.card { text-align: center; margin-bottom: 16px; }
/* The find page's button while it checks: a small spinner before "Checking…" (still, with reduced motion). */
.spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: door-spin .8s linear infinite; }
@keyframes door-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* The website's look (13 Nov 2026, docs/superpowers/specs/2026-11-13-app-site-look-design.md), as in Life's own
   style.css: the site's typeface (fonts/OFL-AtkinsonNext.txt), ExtraBold titles and the faint calendar grid. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("fonts/AtkinsonHyperlegibleNext.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }
:root { --font: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --grid: rgba(40, 60, 120, .07); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 75%); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { body::after { display: none; } }
h1 { font-weight: 800; letter-spacing: -.02em; }