/* Feyer AI - PROPRIETARY AND CONFIDENTIAL
   Copyright (c) 2026 Eric Feyer. All rights reserved.

   Feyer Forms — one stylesheet for every page.

   Before this there were three: the landing page used #C8102E with the system
   font stack, the form and approve pages used #D63031 with Manrope and Outfit,
   and the packet pages used a third mix. Same product, three identities. Every
   page now links this and declares nothing of its own beyond page-specific
   layout.

   Three-state theming throughout. `:root` carries the complete light palette;
   the media query redefines only the tokens, guarded so an explicit light
   choice beats a dark OS; `[data-theme="dark"]` redefines them again so a
   toggle wins in both directions. Inside Alpha the portal sets the stamp and
   this follows it. No colour is ever declared only inside a media block. */

:root {
  --ff-red:#D63031; --ff-red-dark:#B71F20; --ff-gold:#C8A86E;
  --ff-bg:#F2F1EE; --ff-surface:#FAFAF8; --ff-field:#FFFFFF;
  --ff-panel:#111318; --ff-panel-ink:#FFFFFF;
  --ff-panel-quiet:rgba(255,255,255,0.5);
  --ff-panel-line:rgba(255,255,255,0.08);
  --ff-panel-fill:rgba(255,255,255,0.04);
  --ff-ink:#111318; --ff-muted:#6B7280; --ff-quiet:#94A3B8;
  --ff-line:rgba(0,0,0,0.07); --ff-line-2:rgba(0,0,0,0.12);
  --ff-shadow:0 2px 8px rgba(17,19,24,0.06);
  --ff-lift:0 10px 32px rgba(17,19,24,0.12);
  --ff-deep:0 12px 48px rgba(17,19,24,0.18);
  --ff-r-card:24px; --ff-r-el:12px; --ff-r-pill:999px;
  --ff-good:#1F7A4D; --ff-good-soft:rgba(31,122,77,0.12);
  --ff-warn:#8A6A38; --ff-warn-soft:rgba(138,106,56,0.14);
  --ff-disp:'Outfit',system-ui,-apple-system,sans-serif;
  --ff-body:'Manrope',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ff-bg:#14161A; --ff-surface:#1C1F24; --ff-field:#22262C;
    --ff-panel:#22262C; --ff-panel-ink:#F2F1EE;
    --ff-panel-quiet:rgba(242,241,238,0.5);
    --ff-panel-line:rgba(255,255,255,0.09);
    --ff-panel-fill:rgba(255,255,255,0.05);
    --ff-ink:#F2F1EE; --ff-muted:#9AA3AE; --ff-quiet:#6E7681;
    --ff-line:rgba(255,255,255,0.09); --ff-line-2:rgba(255,255,255,0.18);
    --ff-shadow:0 2px 8px rgba(0,0,0,0.4);
    --ff-lift:0 10px 32px rgba(0,0,0,0.5);
    --ff-deep:0 12px 48px rgba(0,0,0,0.55);
    --ff-good:#4FBF87; --ff-good-soft:rgba(79,191,135,0.16);
    --ff-warn:#D2A86A; --ff-warn-soft:rgba(210,168,106,0.16);
  }
}
:root[data-theme="dark"] {
  --ff-bg:#14161A; --ff-surface:#1C1F24; --ff-field:#22262C;
  --ff-panel:#22262C; --ff-panel-ink:#F2F1EE;
  --ff-panel-quiet:rgba(242,241,238,0.5);
  --ff-panel-line:rgba(255,255,255,0.09);
  --ff-panel-fill:rgba(255,255,255,0.05);
  --ff-ink:#F2F1EE; --ff-muted:#9AA3AE; --ff-quiet:#6E7681;
  --ff-line:rgba(255,255,255,0.09); --ff-line-2:rgba(255,255,255,0.18);
  --ff-shadow:0 2px 8px rgba(0,0,0,0.4);
  --ff-lift:0 10px 32px rgba(0,0,0,0.5);
  --ff-deep:0 12px 48px rgba(0,0,0,0.55);
  --ff-good:#4FBF87; --ff-good-soft:rgba(79,191,135,0.16);
  --ff-warn:#D2A86A; --ff-warn-soft:rgba(210,168,106,0.16);
}

@font-face {
  font-family:'Outfit';
  src:url('/assets/OutfitVariable.ttf') format('truetype-variations'),
      url('/assets/OutfitVariable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  background:var(--ff-bg);
  color:var(--ff-ink);
  font-family:var(--ff-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--ff-red); text-decoration:none; }
a:hover { color:var(--ff-red-dark); text-decoration:underline; }
:focus-visible { outline:2px solid var(--ff-red); outline-offset:2px; border-radius:4px; }
::placeholder { color:var(--ff-quiet); }

/* ---------- shell ---------- */

.ff-wrap { max-width:960px; margin:0 auto; padding:0 20px 72px; }

.ff-top {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:18px 0 22px;
}
.ff-mark {
  font-family:var(--ff-disp); font-weight:900; font-size:21px;
  letter-spacing:-0.6px; text-transform:uppercase; color:var(--ff-ink);
  white-space:nowrap;
}
.ff-mark:hover { text-decoration:none; color:var(--ff-ink); }
.ff-mark b { color:var(--ff-red); font-weight:900; }
.ff-nav { display:flex; gap:4px; flex-wrap:wrap; }
.ff-nav a {
  display:inline-flex; align-items:center; min-height:38px;
  padding:0 16px; border-radius:var(--ff-r-pill);
  font-size:14px; font-weight:600; color:var(--ff-muted);
}
.ff-nav a:hover { background:var(--ff-surface); color:var(--ff-ink); text-decoration:none; }
.ff-nav a.on { background:var(--ff-panel); color:var(--ff-panel-ink); }
.ff-nav a.on:hover { color:var(--ff-panel-ink); }
.ff-who {
  margin-left:auto; display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ff-muted); white-space:nowrap;
}
.ff-who b { color:var(--ff-ink); font-weight:600; }
.ff-signout { font-weight:600; }

/* Inside Alpha the portal already draws a bar with the wordmark, who you are
   and a Sign out. Drawing ours underneath gives the page two identities and
   two ways to sign out, one of which leaves the shell still believing you are
   signed in. The shell owns that row; this app owns everything below it. */
html.ff-framed .ff-own-chrome { display:none !important; }
html.ff-framed .ff-top { padding-top:10px; }

h1.ff-h1 {
  font-family:var(--ff-disp); font-weight:900; font-size:40px;
  letter-spacing:-1.2px; text-transform:uppercase; margin:6px 0 6px;
  text-wrap:balance;
}
.ff-lead { color:var(--ff-muted); font-size:15px; margin:0 0 26px; max-width:62ch; }
.ff-back {
  display:inline-flex; align-items:center; gap:6px; min-height:38px;
  font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
}

/* ---------- surfaces ---------- */

.ff-card {
  background:var(--ff-surface); border:1px solid var(--ff-line);
  border-radius:var(--ff-r-card); box-shadow:var(--ff-shadow);
  padding:24px;
}
.ff-panel {
  background:var(--ff-panel); color:var(--ff-panel-ink);
  border-radius:var(--ff-r-card); padding:24px;
}
.ff-panel a { color:var(--ff-panel-ink); }
.ff-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ff-quiet); margin:0 0 14px;
}
.ff-panel .ff-eyebrow { color:var(--ff-panel-quiet); }

.ff-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ff-grid-1 { display:grid; grid-template-columns:1fr; gap:16px; }

/* ---------- rows ---------- */

.ff-row {
  display:flex; align-items:center; gap:12px;
  padding:13px 0; border-top:1px solid var(--ff-line);
}
.ff-row:first-child { border-top:0; }
.ff-panel .ff-row { border-color:var(--ff-panel-line); }
.ff-row-main { min-width:0; flex:1; }
.ff-row-t { font-size:15px; font-weight:600; }
.ff-row-m { font-size:12.5px; color:var(--ff-muted); margin-top:3px; }
.ff-panel .ff-row-m { color:var(--ff-panel-quiet); }
.ff-row-side { margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }

/* ---------- controls ---------- */

.ff-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border:0; cursor:pointer;
  border-radius:var(--ff-r-el); background:var(--ff-red); color:#fff;
  font-family:var(--ff-body); font-size:14.5px; font-weight:700;
}
.ff-btn:hover { background:var(--ff-red-dark); color:#fff; text-decoration:none; }
.ff-btn:disabled { opacity:.5; cursor:default; }
.ff-btn.ghost {
  background:var(--ff-field); color:var(--ff-ink); border:1px solid var(--ff-line-2);
}
.ff-btn.ghost:hover { background:var(--ff-bg); color:var(--ff-ink); }
.ff-btn.small { min-height:36px; padding:0 14px; font-size:13px; }
.ff-panel .ff-btn.ghost {
  background:var(--ff-panel-fill); color:var(--ff-panel-ink); border-color:var(--ff-panel-line);
}

.ff-chip {
  display:inline-flex; align-items:center; min-height:38px; padding:0 16px;
  border-radius:var(--ff-r-pill); border:1px solid var(--ff-line-2);
  background:var(--ff-field); color:var(--ff-ink);
  font-family:var(--ff-body); font-size:13.5px; font-weight:600; cursor:pointer;
}
.ff-chip:hover { border-color:var(--ff-quiet); }
.ff-chip.on { background:var(--ff-panel); color:var(--ff-panel-ink); border-color:var(--ff-panel); }

.ff-tag {
  display:inline-block; padding:3px 9px; border-radius:var(--ff-r-pill);
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  background:var(--ff-line); color:var(--ff-muted); white-space:nowrap;
}
.ff-tag.red { background:rgba(214,48,49,0.1); color:var(--ff-red); }
.ff-tag.good { background:var(--ff-good-soft); color:var(--ff-good); }
.ff-tag.warn { background:var(--ff-warn-soft); color:var(--ff-warn); }
.ff-panel .ff-tag { background:var(--ff-panel-fill); color:var(--ff-panel-quiet); }
.ff-panel .ff-tag.red { background:rgba(214,48,49,0.2); color:#FF8A8B; }

label.ff-label {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:13px; font-weight:600; color:var(--ff-ink); margin:0 0 7px;
}
.ff-req {
  font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ff-quiet);
}
.ff-req.is-required { color:var(--ff-red); }

.ff-field, input[type=text].ff-field, input[type=email].ff-field,
input[type=tel].ff-field, input[type=date].ff-field, input[type=number].ff-field,
select.ff-field, textarea.ff-field {
  width:100%; min-height:46px; padding:11px 14px;
  font-family:var(--ff-body); font-size:15px; color:var(--ff-ink);
  background:var(--ff-field); border:1px solid var(--ff-line-2);
  border-radius:var(--ff-r-el); outline:none;
}
textarea.ff-field { min-height:78px; resize:vertical; }
.ff-field:focus { border-color:var(--ff-red); }
.ff-field.bad { border-color:var(--ff-red); background:rgba(214,48,49,0.04); }
.ff-err { display:none; color:var(--ff-red); font-size:12.5px; font-weight:600; margin-top:6px; }
.ff-err.on { display:block; }

.ff-search {
  width:100%; min-height:56px; padding:14px 20px;
  font-family:var(--ff-body); font-size:15.5px; color:var(--ff-ink);
  background:var(--ff-surface); border:1px solid var(--ff-line);
  border-radius:var(--ff-r-pill); box-shadow:var(--ff-shadow); outline:none;
}
.ff-search:focus { border-color:var(--ff-red); }

/* ---------- form cards ---------- */

.ff-formcard {
  display:flex; flex-direction:column; gap:12px;
  background:var(--ff-surface); border:1px solid var(--ff-line);
  border-radius:var(--ff-r-card); box-shadow:var(--ff-shadow);
  padding:20px 22px; color:var(--ff-ink);
}
a.ff-formcard:hover {
  text-decoration:none; color:var(--ff-ink);
  border-color:var(--ff-line-2); box-shadow:var(--ff-lift);
  transform:translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { a.ff-formcard:hover { transform:none; } }
.ff-formcard-top { display:flex; align-items:flex-start; gap:12px; }
.ff-formcard h3 {
  font-family:var(--ff-disp); font-weight:800; font-size:17px;
  letter-spacing:-0.3px; margin:0; flex:1; text-wrap:balance;
}
.ff-formcard p { margin:0; font-size:13.5px; color:var(--ff-muted); }
.ff-formcard footer {
  display:flex; align-items:center; gap:10px; margin-top:auto;
  font-size:12px; color:var(--ff-quiet);
}
.ff-dot { width:4px; height:4px; border-radius:50%; background:var(--ff-quiet); }

/* ---------- states ---------- */

.ff-empty { color:var(--ff-quiet); font-size:14px; padding:6px 0; }
.ff-panel .ff-empty { color:var(--ff-panel-quiet); }
.ff-msg { font-size:14px; font-weight:600; margin-top:14px; min-height:20px; }
.ff-msg.err { color:var(--ff-red); }
.ff-msg.ok { color:var(--ff-good); }
.hide { display:none !important; }

.ff-done { text-align:center; padding:44px 26px; }
.ff-done .check {
  width:60px; height:60px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ff-gold); color:var(--ff-panel); font-size:28px; font-weight:700;
}
.ff-done h2 {
  font-family:var(--ff-disp); font-weight:800; font-size:24px;
  letter-spacing:-0.4px; margin:0 0 8px;
}
.ff-done p { color:var(--ff-muted); margin:0 auto; max-width:46ch; }

.ff-foot {
  text-align:center; font-size:11px; color:var(--ff-quiet);
  margin-top:44px; line-height:1.7;
}

/* ---------- sign in ---------- */

/* No viewport units anywhere, framed or not: inside Alpha the frame is the
   viewport minus 147px of chrome, and vh maths against the wrong box is
   how a shell ends up scrolling inside a scroll. */
.ff-signin { max-width:380px; margin:56px auto 0; text-align:center; }
.ff-signin .ff-field { margin-top:10px; text-align:left; }
.ff-signin .ff-btn { width:100%; margin-top:14px; }

/* ---------- phone ----------
   One breakpoint, on the container. Everything above is single-column by
   default on a phone, which is where forms are actually filled in. */

@media (max-width: 760px) {
  .ff-wrap { padding:0 16px 60px; }
  h1.ff-h1 { font-size:30px; letter-spacing:-0.8px; }
  .ff-grid { grid-template-columns:1fr; }
  .ff-top { gap:10px 14px; padding:14px 0 18px; }
  .ff-who { width:100%; margin-left:0; order:3; }
  .ff-nav { order:2; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ff-card, .ff-panel { padding:20px 18px; border-radius:20px; }
  .ff-row { flex-wrap:wrap; }
  .ff-row-side { width:100%; margin-left:0; }
  .ff-btn { width:100%; }
  .ff-row-side .ff-btn { width:auto; flex:1; }
}