/* Rebilon UI — the one set of pieces every surface is built from.
 *
 * The React site and app link this file; the pages the server renders
 * (connect links, errors, privacy, terms, opt-in) inline it. Tokens are
 * defined once, for light and dark, and every component below reads them,
 * so a colour or a radius changes in one place and every page follows.
 *
 * Served at /ui.css from web/public. Keep it free of anything page-specific:
 * a page that needs a one-off style is a missing piece here.
 */

:root {
  color-scheme: light dark;
  --ui-fg-rgb: 33 28 24;
  --ui-bg: #f6f2ed;
  --ui-bg-raised: #fbf8f4;
  --ui-surface: #ffffff;
  --ui-sunk: #eee9e3;
  --ui-ink: #211c18;
  --ui-soft: #5d544c;
  --ui-muted: #8b8178;
  --ui-line: rgb(70 45 20 / 0.09);
  --ui-line-hi: rgb(70 45 20 / 0.16);
  --ui-strong: #211c18;
  --ui-strong-ink: #fbf8f4;
  --ui-accent: #e8663a;
  --ui-accent-ink: #ffffff;
  --ui-accent-text: #c4502a;
  --ui-accent-soft: rgb(232 102 58 / 0.12);
  --ui-good: #2c9a5e;
  --ui-warn: #c98217;
  --ui-bad: #cf4a45;
  --ui-lift: 0 1px 2px rgb(60 35 10 / 0.06), 0 10px 30px rgb(60 35 10 / 0.08);
  --ui-radius: 18px;
  --ui-radius-lg: 26px;
  --ui-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ui-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Saturation and lightness for hue-tinted tiles: hsl(var(--h) var(--ui-tile-bg)). */
  --ui-tile-bg: 70% 92%;
  --ui-tile-fg: 45% 32%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ui-fg-rgb: 244 238 231;
    --ui-bg: #171412;
    --ui-bg-raised: #1c1916;
    --ui-surface: #221e1b;
    --ui-sunk: #2c2724;
    --ui-ink: #f4eee7;
    --ui-soft: #c9bfb5;
    --ui-muted: #9d9389;
    --ui-line: rgb(255 235 215 / 0.08);
    --ui-line-hi: rgb(255 235 215 / 0.15);
    --ui-strong: #f4eee7;
    --ui-strong-ink: #171412;
    --ui-accent: #ff8b5e;
    --ui-accent-ink: #1b1512;
    --ui-accent-text: #ff8b5e;
    --ui-accent-soft: rgb(255 139 94 / 0.14);
    --ui-good: #4cc486;
    --ui-warn: #e7a843;
    --ui-bad: #f07a73;
    --ui-lift: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);
    --ui-tile-bg: 30% 24%;
    --ui-tile-fg: 70% 82%;
  }
}

/* ── Orbit: the app's tokens (docs/orbit-design.md) ──────────────────── */
/* The signed-in app reads these as --ob-*; its own switch (data-theme)
   overrides the system setting. Light first, then dark. */

:root {
  --ob-paper: #FBFBFC;
  --ob-paper2: #F2F2F5;
  --ob-panel: #FFFFFF;
  --ob-ink: #16161B;
  --ob-soft: #5C5C68;
  --ob-muted: #9A9AA5;
  --ob-hair: #E8E8EE;
  --ob-hair2: #DADAE2;
  --ob-needs-text: #9A6200;
  --ob-bad: #D93C42;
  --ob-stage: radial-gradient(70% 60% at 50% 45%, #FFFFFF, #EDEDF1);
  --ob-lift: 0 1px 2px rgb(20 20 30 / .04), 0 12px 30px rgb(20 20 30 / .06);
  --ob-lift-hi: 0 1px 2px rgb(20 20 30 / .06), 0 24px 60px rgb(20 20 30 / .14);
  --ob-scrim: rgb(12 12 16 / .32);
  --ob-rail-bg: #FFFFFF;
  --ob-rail-fg: #16161B;
  --ob-rail-border: #E8E8EE;
  --ob-ui-fg-rgb: 22 22 27;
  --ob-ui-tile-bg: 10% 93%;
  --ob-ui-tile-fg: 18% 30%;
  --ob-group: #F2F2F5;
  --ob-card: #FFFFFF;
  --ob-blue: #2F5FD0;
  --ob-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ob-paper: #0C0C10;
    --ob-paper2: #1B1B22;
    --ob-panel: #131318;
    --ob-ink: #F4F4F6;
    --ob-soft: #B4B4BE;
    --ob-muted: #7A7A86;
    --ob-hair: rgb(255 255 255 / .08);
    --ob-hair2: rgb(255 255 255 / .14);
    --ob-needs-text: #F2A91C;
    --ob-bad: #FF6B6B;
    --ob-stage: radial-gradient(60% 60% at 50% 50%, #101016, #0C0C10);
    --ob-lift: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .35);
    --ob-lift-hi: 0 1px 2px rgb(0 0 0 / .4), 0 30px 70px rgb(0 0 0 / .55);
    --ob-scrim: rgb(0 0 0 / .55);
    --ob-rail-bg: rgb(255 255 255 / .10);
    --ob-rail-fg: #FFFFFF;
    --ob-rail-border: rgb(255 255 255 / .14);
    --ob-ui-fg-rgb: 244 244 246;
    --ob-ui-tile-bg: 8% 20%;
    --ob-ui-tile-fg: 20% 84%;
    --ob-group: #0C0C10;
    --ob-card: #1B1B22;
    --ob-blue: #8FA8FF;
    --ob-scheme: dark;
  }
}

[data-theme="light"] {
  --ob-paper: #FBFBFC;
  --ob-paper2: #F2F2F5;
  --ob-panel: #FFFFFF;
  --ob-ink: #16161B;
  --ob-soft: #5C5C68;
  --ob-muted: #9A9AA5;
  --ob-hair: #E8E8EE;
  --ob-hair2: #DADAE2;
  --ob-needs-text: #9A6200;
  --ob-bad: #D93C42;
  --ob-stage: radial-gradient(70% 60% at 50% 45%, #FFFFFF, #EDEDF1);
  --ob-lift: 0 1px 2px rgb(20 20 30 / .04), 0 12px 30px rgb(20 20 30 / .06);
  --ob-lift-hi: 0 1px 2px rgb(20 20 30 / .06), 0 24px 60px rgb(20 20 30 / .14);
  --ob-scrim: rgb(12 12 16 / .32);
  --ob-rail-bg: #FFFFFF;
  --ob-rail-fg: #16161B;
  --ob-rail-border: #E8E8EE;
  --ob-ui-fg-rgb: 22 22 27;
  --ob-ui-tile-bg: 10% 93%;
  --ob-ui-tile-fg: 18% 30%;
  --ob-group: #F2F2F5;
  --ob-card: #FFFFFF;
  --ob-blue: #2F5FD0;
  --ob-scheme: light;
}

[data-theme="dark"] {
  --ob-paper: #0C0C10;
  --ob-paper2: #1B1B22;
  --ob-panel: #131318;
  --ob-ink: #F4F4F6;
  --ob-soft: #B4B4BE;
  --ob-muted: #7A7A86;
  --ob-hair: rgb(255 255 255 / .08);
  --ob-hair2: rgb(255 255 255 / .14);
  --ob-needs-text: #F2A91C;
  --ob-bad: #FF6B6B;
  --ob-stage: radial-gradient(60% 60% at 50% 50%, #101016, #0C0C10);
  --ob-lift: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .35);
  --ob-lift-hi: 0 1px 2px rgb(0 0 0 / .4), 0 30px 70px rgb(0 0 0 / .55);
  --ob-scrim: rgb(0 0 0 / .55);
  --ob-rail-bg: rgb(255 255 255 / .10);
  --ob-rail-fg: #FFFFFF;
  --ob-rail-border: rgb(255 255 255 / .14);
  --ob-ui-fg-rgb: 244 244 246;
  --ob-ui-tile-bg: 8% 20%;
  --ob-ui-tile-fg: 20% 84%;
  --ob-group: #0C0C10;
  --ob-card: #1B1B22;
  --ob-blue: #8FA8FF;
  --ob-scheme: dark;
}

/* ── A page on its own (server-rendered) ──────────────────────────────── */

body.ui {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
:where(body.ui) a { color: var(--ui-accent-text); }
body.ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
body.ui * { box-sizing: border-box; }

/* One card in the middle of the page: connect links, errors, done. */
.ui-sheet {
  max-width: 440px;
  margin: 40px auto;
  padding: 30px 28px;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-lift);
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 480px) { .ui-sheet { margin: 16px; padding: 24px 20px; } }
.ui-sheet h1 { font-size: 22px; line-height: 1.25; margin: 4px 0 0; letter-spacing: -0.01em; text-wrap: balance; }
.ui-sheet p { color: var(--ui-soft); margin: 0; }
.ui-sheet ul { list-style: none; padding: 0; margin: 0; }
.ui-sheet li {
  color: var(--ui-soft); padding: 11px 0 11px 24px; position: relative; line-height: 1.45;
  border-bottom: 1px solid var(--ui-line);
}
.ui-sheet li:first-child { border-top: 1px solid var(--ui-line); }
.ui-sheet li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent);
}
.ui-face { display: block; width: 64px; height: 64px; }

/* ── Pieces ───────────────────────────────────────────────────────────── */

.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border: 0; border-radius: 999px;
  background: var(--ui-strong); color: var(--ui-strong-ink) !important;
  font: inherit; font-size: 16px; font-weight: 700;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.ui-btn:hover:not(:disabled) { transform: translateY(-1px); }
.ui-btn:disabled { opacity: .35; cursor: default; }
.ui-btn.block { display: flex; width: 100%; }
.ui-btn.small { padding: 10px 18px; font-size: 15px; }

.ui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--ui-line-hi); border-radius: 999px;
  background: var(--ui-surface); color: var(--ui-ink);
  font: inherit; font-size: 14.5px; font-weight: 550; text-decoration: none;
  cursor: pointer;
}
.ui-chip:hover:not(:disabled) { border-color: var(--ui-accent); }
.ui-chip:disabled { opacity: .5; cursor: default; }

.ui-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ui-line-hi); border-radius: 16px;
  background: var(--ui-surface); color: var(--ui-ink);
  font: inherit; font-size: 16px;
}
.ui-input::placeholder { color: var(--ui-muted); }
.ui-input:focus { outline: 2px solid var(--ui-accent); outline-offset: 0; border-color: transparent; }

.ui-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
  padding: 20px 22px;
}

.ui-list {
  list-style: none; margin: 0; padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: 20px;
}
.ui-row + .ui-row { border-top: 1px solid var(--ui-line); }

.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-muted); display: inline-block; flex: none; }
.ui-dot.good, .ui-dot.tone-good { background: var(--ui-good); }
.ui-dot.warn, .ui-dot.tone-warn { background: var(--ui-warn); }
.ui-dot.bad, .ui-dot.tone-bad { background: var(--ui-bad); }

.ui-note { border-radius: 14px; padding: 13px 16px; margin: 16px 0; border: 1px solid; }
.ui-note.ok { background: color-mix(in srgb, var(--ui-good) 10%, transparent); border-color: color-mix(in srgb, var(--ui-good) 34%, transparent); }
.ui-note.err { background: color-mix(in srgb, var(--ui-bad) 10%, transparent); border-color: color-mix(in srgb, var(--ui-bad) 34%, transparent); }
.ui-note p { color: var(--ui-ink); margin: 0; }

.ui-small { display: block; color: var(--ui-muted); font-size: 14px; line-height: 1.5; text-align: center; }
.ui-mono { font-family: var(--ui-mono); font-size: 13.5px; word-break: break-all; }
.ui-rule { border: 0; border-top: 1px solid var(--ui-line); margin: 22px 0; }
.ui-faint { color: var(--ui-muted); }

/* ── Site chrome for document pages (privacy, terms, opt-in) ─────────── */

.ui-wrap { max-width: 720px; margin: 0 auto; padding: 0 22px; }

.ui-nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ui-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ui-line);
}
.ui-nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 62px; max-width: 1080px; margin: 0 auto; padding: 0 22px;
}
.ui-logo { font-size: 18px; font-weight: 700; letter-spacing: -.03em; color: var(--ui-ink) !important; text-decoration: none; }
.ui-logo .dot { color: var(--ui-accent); }
.ui-nav-links { display: flex; gap: 24px; align-items: center; }
.ui-nav-links a:not(.ui-btn) { color: var(--ui-soft); text-decoration: none; font-size: 14px; }
.ui-nav-links a:not(.ui-btn):hover { color: var(--ui-ink); }
@media (max-width: 720px) { .ui-nav-links a:not(.ui-btn) { display: none; } }

.ui-prose { padding: 56px 0 72px; }
.ui-prose h1 { font-size: 32px; letter-spacing: -.02em; margin: 0 0 6px; }
.ui-prose h2 { font-size: 18px; letter-spacing: -.01em; margin: 34px 0 10px; padding-top: 20px; border-top: 1px solid var(--ui-line); }
.ui-prose h3 { font-size: 16px; margin: 24px 0 8px; }
.ui-prose p, .ui-prose li { color: var(--ui-soft); }
.ui-prose ul { margin: 0 0 14px; padding-left: 22px; }
.ui-prose li { margin-bottom: 6px; }
.ui-prose p { margin: 0 0 14px; }
.ui-prose strong { color: var(--ui-ink); font-weight: 600; }
.ui-prose .updated { color: var(--ui-muted); font-size: 14px; margin-bottom: 26px; }

.ui-foot { border-top: 1px solid var(--ui-line); padding: 30px 0 44px; font-size: 13px; color: var(--ui-muted); }
.ui-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 16px; }
.ui-foot-links a { color: var(--ui-soft); text-decoration: none; }
.ui-foot-links a:hover { color: var(--ui-ink); }

/* ── Form bits ────────────────────────────────────────────────────────── */

.ui-input.narrow { max-width: 320px; margin-top: 6px; }
.ui-card > p:last-child { margin-bottom: 0; }
.ui-check { display: flex; gap: 10px; align-items: flex-start; }
.ui-check input[type="checkbox"] { width: 17px; height: 17px; margin-top: 5px; flex: none; accent-color: var(--ui-accent); }