/* Nectar's tokens, defined once: the app (/nectar.css), the run site, the
   Lobby, sign-in, /setup and the installer all read them. Ink on warm paper;
   honey is a light (the glow behind glass, the current place, state), never a
   flat fill on a button. Hanken Grotesk is self-hosted (/fonts/fonts.css). */
@import url('/fonts/fonts.css');

:root {
  --n-page: #fffcf5;
  --n-surface: #ffffff;
  --n-ink: #1c1a17;
  --n-muted: #5f5a52;
  --n-line: #eee8dc;
  --n-head: #faf6ee;
  --n-field: #cfc6b6;
  --n-honey: #f6b23e;
  --n-honey-facet: #fbcb6e;
  --n-honey-pill: #fdcb68;
  --n-honey-soft: #fde7b8;
  --n-honey-wash: #fff5e1;
  --n-honey-ink: #8a4b06;
  --n-pending-ink: #6b4a12;
  --n-glow: radial-gradient(closest-side, rgba(249, 194, 90, .55), rgba(253, 227, 173, .3) 55%, rgba(253, 227, 173, 0));
  --n-glass: rgba(255, 248, 232, .62);
  --n-glass-edge: rgba(255, 255, 255, .7);
  --n-glass-shadow: 0 20px 50px rgba(178, 112, 20, .18);
  --n-card-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 8px 24px rgba(120, 80, 20, .06);
  --n-font: 'Hanken Grotesk', 'Hanken Grotesk Fallback', Arial, sans-serif;
  --n-radius: 18px;
  --n-radius-glass: 22px;
  --n-radius-field: 12px;

  --rer-font-body: var(--n-font);
  --rer-font-heading: var(--n-font);
  --rer-page: var(--n-page);
  --rer-surface: var(--n-surface);
  --rer-text: var(--n-ink);
  --rer-muted: var(--n-muted);
  --rer-border: var(--n-field);
  --rer-focus: var(--n-ink);
  --rer-link: var(--n-honey-ink);
  --rer-accent: var(--n-ink);
  --rer-accent-text: var(--n-page);
  --rer-radius: var(--n-radius);
  --rer-button-radius: 999px;
  --rer-wordmark-weight: 800;
  --rer-logo: url('/brand/mark.svg');
}

/* Sign-in (operator-auth) and first-run /setup: Base's no-script frames wear
   the theme through these rules. A centred white card on paper with the honey
   glow behind it, the mark and name centred above the heading, a dark pill. */
html.rer-themed body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 30% 34% at 30% 30%, rgba(249, 194, 90, .42), rgba(253, 227, 173, .22) 55%, rgba(253, 227, 173, 0)),
    radial-gradient(ellipse 26% 30% at 76% 42%, rgba(249, 194, 90, .32), rgba(253, 227, 173, .18) 55%, rgba(253, 227, 173, 0)),
    var(--n-page);
  color: var(--n-ink);
  font-family: var(--n-font);
  -webkit-font-smoothing: antialiased;
  display: block;
  padding: 48px 20px;
}
html.rer-themed body main { width: 100%; max-width: 680px; margin: 10vh auto 0; padding: 56px 80px 60px; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-radius-glass); box-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 24px 60px rgba(178, 112, 20, .14); }
html.rer-themed body .brand,
html.rer-themed body .rer-brand { justify-content: center; gap: 12px; margin: 0 0 36px; color: var(--n-ink); font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
html.rer-themed body .brand::before,
html.rer-themed body .rer-brand::before { width: 34px; height: 34px; }
html.rer-themed body h1 { margin: 0 0 16px; font-size: 52px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; text-align: center; color: var(--n-ink); }
html.rer-themed body h1 + p { text-align: center; font-size: 17px; margin: 0 0 32px; }
html.rer-themed body p { color: var(--n-muted); }
html.rer-themed body h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
html.rer-themed body label { color: var(--n-ink); font-size: 16px; font-weight: 500; margin: 32px 0 10px; }
html.rer-themed body label:has(input[type=checkbox]) { align-items: center; gap: 14px; margin: 0; }
html.rer-themed body input:not([type=checkbox]):not([type=hidden]) { min-height: 56px; margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--n-field); border-radius: var(--n-radius-field); background: var(--n-surface); color: var(--n-ink); font-size: 17px; }
html.rer-themed body input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--n-ink); }
html.rer-themed body button,
html.rer-themed body .action { min-height: 60px; border: 0; border-radius: 999px; background: var(--n-ink); color: var(--n-page); font-size: 18px; font-weight: 600; }
html.rer-themed body button:hover,
html.rer-themed body .action:hover { background: #33302a; box-shadow: none; }
html.rer-themed body button.secondary { background: transparent; color: var(--n-ink); border: 1.5px solid rgba(28, 26, 23, .25); }
html.rer-themed body .notice { border: 0; border-radius: var(--n-radius-field); background: var(--n-honey-wash); color: var(--n-ink); padding: 14px 16px; }
html.rer-themed body .secondary-link a { color: var(--n-honey-ink); }
html.rer-themed body :focus-visible { outline: 3px solid var(--n-ink); outline-offset: 3px; }
/* /setup: the owner as ruled rows, then the confirmation and the action. */
html.rer-themed body dl { grid-template-columns: 150px minmax(0, 1fr); gap: 0; margin: 0 0 30px; border-top: 1px solid var(--n-line); }
html.rer-themed body dt,
html.rer-themed body dd { padding: 18px 0; border-bottom: 1px solid var(--n-line); font-size: 17px; }
html.rer-themed body dt { color: var(--n-muted); }
html.rer-themed body form { gap: 32px; }
html.rer-themed body form p { color: var(--n-ink); font-size: 17px; }
@media (max-width: 600px) {
  html.rer-themed body { padding: 24px 16px; background-size: 200% 70%, 200% 70%, auto; background-position: 20% 0, 80% 30%, 0 0; background-repeat: no-repeat; background-color: var(--n-page); }
  html.rer-themed body main { margin-top: 4vh; padding: 40px 24px 36px; }
  html.rer-themed body .brand,
  html.rer-themed body .rer-brand { font-size: 26px; margin-bottom: 28px; }
  html.rer-themed body h1 { font-size: 38px; }
  html.rer-themed body dl { grid-template-columns: 90px minmax(0, 1fr); }
  html.rer-themed body button,
  html.rer-themed body .action { min-height: 56px; }
}

/* The Lobby (Base's door at /) sits in the same white card as sign-in. */
.door > .door-card { width: 100%; max-width: 680px; padding: 56px 64px 52px; background: var(--n-surface); border: 1px solid var(--n-line); border-radius: var(--n-radius-glass); box-shadow: 0 1px 2px rgba(60, 40, 10, .05), 0 24px 60px rgba(178, 112, 20, .14); }
.door > .door-card .line { color: var(--n-muted); }
main.door { padding-top: 16vh; }
@media (max-width: 640px) {
  main.door { padding-top: 96px; }
  .door > .door-card { padding: 40px 22px 36px; }
}

/* Base's /run and not-found pages wear the homepage's header and its 800 headings. */
body > header.bar { max-width: 1440px; min-height: 96px; padding: 0 48px; }
body > header.bar::after { content: ''; position: absolute; left: 48px; right: 48px; bottom: 0; border-top: 1px solid var(--n-line); }
body > header.bar .brand { gap: 12px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
body > header.bar .brand img { width: 26px; height: 26px; }
body > header.bar nav { gap: 44px; font-size: 18px; font-weight: 400; }
body > header.bar nav a { color: var(--n-muted); }
body > header.bar nav a:hover { color: var(--n-ink); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
body > header.bar ~ main h1 { font-weight: 800; }
@media (max-width: 760px) {
  body > header.bar { min-height: 68px; padding: 0 16px; }
  body > header.bar::after { left: 16px; right: 16px; }
  body > header.bar .brand { gap: 10px; font-size: 20px; }
  body > header.bar .brand img { width: 26px; height: 26px; }
  body > header.bar nav { gap: 24px; font-size: 16px; }
}