/* v3.6 R-30 · THE DOORS — the small one-off pages a person opens from a link or from the open web, in the design's language
   (STANDARDS §2, §8, §9, §9.1, §10): the app account's activation / new-password page (/app/account/<token>), the Passport
   "My record" (/me), the representative's signed copy (/c/<token>), the company's public page (/, /about) and its SMS terms,
   privacy policy and opt-in pages (/sms, /privacy, /opt-in). Before R-30 each was a classic, dark-only page.
   Fixed path /web/field-door.css, served by the gateway (no outside loads; Geist from the gateway's own font allow-list).
   A page opts in with class="fd" on <html>; nothing here touches any other page.
   THEMES — light is the default. Dark is its own material (a deep sage-graphite field, smoked glass), never light inverted:
     · html.fd.fd-auto       follows the device (prefers-color-scheme) — the public pages, the copy, My record;
     · html.fd.nf-night      the field app's own Appearance choice (localStorage tcc.fieldTheme, set in the page head) — the
                             app account page, which follows the field app's rule: light unless the person chose Dark.
   The page's company accent arrives as --brand (the company's primary) on <html>; it is used deliberately: the eyebrow dot,
   the accent full stop, the focus ring. The one primary action is graphite (light) / pale stone (dark), like the partner doors. */
@font-face { font-family: "Geist"; src: url("/lib/fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/lib/fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

html.fd {
  --fd-f: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --fd-fm: "Geist Mono", ui-monospace, Menlo, monospace;
  --fd-brand: var(--brand, #197733); --fd-acc: var(--brand-lit, #81e59d);
  --fd-sage: color-mix(in srgb, var(--fd-acc) 38%, #c3d3ca);
  --fd-bg: #e3e8e5; --fd-ink: #18201d; --fd-ink2: #3c4742; --fd-sub: #56635d; --fd-line: rgba(24, 40, 32, .1); --fd-wash: rgba(24, 40, 32, .045);
  --fd-glass: rgba(255, 255, 255, .56); --fd-glass-hi: rgba(255, 255, 255, .82); --fd-solid: rgba(250, 251, 250, .97); --fd-edge: rgba(255, 255, 255, .9);
  --fd-gr: #1e2425; --fd-gr2: #273031; --fd-on-gr: #f2f5f3;
  --fd-ok: #3f8a58; --fd-warn: #8f6312; --fd-bad: #b5452b;
  --fd-stop: var(--fd-brand); --fd-focus: color-mix(in srgb, var(--fd-brand) 75%, #1d4fd0);
  --fd-shg: inset 0 1px 0 var(--fd-edge), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 1px 1px rgba(20, 36, 28, .03), 0 20px 44px -28px rgba(20, 40, 30, .34);
  --fd-lit: radial-gradient(70% 45% at 0% 0%, rgba(255, 255, 255, .8), transparent 70%), radial-gradient(60% 45% at 100% 6%, color-mix(in srgb, var(--fd-sage) 70%, transparent), transparent 72%);
  /* the drawing kit's colours (/lib/outside.js · DXK) on this material */
  --dxk-ink: var(--fd-ink); --dxk-ink-2: var(--fd-ink2); --dxk-sub: var(--fd-sub); --dxk-line: var(--fd-line); --dxk-plate: var(--fd-solid); --dxk-ok: var(--fd-ok); --dxk-bad: var(--fd-bad); --dxk-watch: var(--fd-warn);
  color-scheme: light;
  min-height: 100%; background: var(--fd-bg);
}
/* dark: the device's (fd-auto) … */
@media (prefers-color-scheme: dark) { html.fd.fd-auto:not([data-theme="light"]) {
  --fd-sage: color-mix(in srgb, var(--fd-acc) 26%, #25302b);
  --fd-bg: #0b0e0d; --fd-ink: #eef2ef; --fd-ink2: #c6d0cb; --fd-sub: #9caaa3; --fd-line: rgba(255, 255, 255, .09); --fd-wash: rgba(255, 255, 255, .05);
  --fd-glass: rgba(30, 37, 35, .58); --fd-glass-hi: rgba(40, 48, 45, .86); --fd-solid: rgba(22, 28, 26, .98); --fd-edge: rgba(255, 255, 255, .09);
  --fd-gr: #e9eeeb; --fd-gr2: #dbe3de; --fd-on-gr: #101513;
  --fd-ok: #6fc28d; --fd-warn: #dcaa4a; --fd-bad: #e8866b; --fd-stop: var(--fd-acc); --fd-focus: color-mix(in srgb, var(--fd-acc) 80%, #8ab4ff);
  --fd-shg: inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8);
  --fd-lit: radial-gradient(70% 45% at 0% 0%, rgba(205, 228, 214, .07), transparent 70%), radial-gradient(60% 45% at 100% 6%, color-mix(in srgb, var(--fd-acc) 14%, transparent), transparent 72%);
  color-scheme: dark; } }
/* … or the person's own Appearance choice in the field app (nf-night) */
html.fd.nf-night, html.fd[data-theme="dark"] {
  --fd-sage: color-mix(in srgb, var(--fd-acc) 26%, #25302b);
  --fd-bg: #0b0e0d; --fd-ink: #eef2ef; --fd-ink2: #c6d0cb; --fd-sub: #9caaa3; --fd-line: rgba(255, 255, 255, .09); --fd-wash: rgba(255, 255, 255, .05);
  --fd-glass: rgba(30, 37, 35, .58); --fd-glass-hi: rgba(40, 48, 45, .86); --fd-solid: rgba(22, 28, 26, .98); --fd-edge: rgba(255, 255, 255, .09);
  --fd-gr: #e9eeeb; --fd-gr2: #dbe3de; --fd-on-gr: #101513;
  --fd-ok: #6fc28d; --fd-warn: #dcaa4a; --fd-bad: #e8866b; --fd-stop: var(--fd-acc); --fd-focus: color-mix(in srgb, var(--fd-acc) 80%, #8ab4ff);
  --fd-shg: inset 0 1px 0 rgba(255, 255, 255, .085), inset 0 0 0 1px rgba(255, 255, 255, .035), 0 1px 0 rgba(0, 0, 0, .45), 0 26px 52px -26px rgba(0, 0, 0, .8);
  --fd-lit: radial-gradient(70% 45% at 0% 0%, rgba(205, 228, 214, .07), transparent 70%), radial-gradient(60% 45% at 100% 6%, color-mix(in srgb, var(--fd-acc) 14%, transparent), transparent 72%);
  color-scheme: dark;
}

/* the field: lit from the upper left, sage from the right */
html.fd * { box-sizing: border-box; }
html.fd body { display: flow-root; margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--fd-lit), var(--fd-bg); background-attachment: fixed; color: var(--fd-ink); font: 400 15px/1.55 var(--fd-f); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
html.fd :is(button, input, select, textarea) { font-family: var(--fd-f); }
html.fd [hidden] { display: none !important; }

/* one floating glass bar: the company (its mark and name), and what the page needs beside it */
html.fd .fd-bar { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; width: calc(100% - 20px); max-width: calc(var(--fd-w, 680px) - 36px); min-height: 60px; margin: calc(env(safe-area-inset-top, 0px) + 12px) auto 0; padding: 8px 8px 8px 16px; border-radius: 24px; background: var(--fd-glass); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--fd-shg); }
/* the shared translator's English / Español button lands in the page's header (i18n.js): a quiet pill there */
html.fd .fd-bar #langBtn { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--fd-glass-hi); color: var(--fd-ink); font: 500 13.5px/1 var(--fd-f); box-shadow: inset 0 0 0 1px var(--fd-line); cursor: pointer; }
html.fd .fd-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; color: var(--fd-ink); text-decoration: none; }
html.fd .fd-brand img { height: 30px; width: auto; flex: none; }
html.fd .fd-word { font: 650 12.5px/1.15 var(--fd-f); letter-spacing: .12em; text-transform: uppercase; color: var(--fd-ink); }
html.fd .fd-word span { font-weight: 500; color: var(--fd-sub); }
html.fd .fd-who { font: 500 13px/1.3 var(--fd-f); color: var(--fd-sub); overflow-wrap: anywhere; }
/* places as one pill row */
html.fd .fd-places { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--fd-wash); box-shadow: inset 0 0 0 1px var(--fd-line); }
html.fd .fd-places a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; font: 500 13.5px/1 var(--fd-f); color: var(--fd-ink2); text-decoration: none; }
html.fd .fd-places a[aria-current="page"] { background: var(--fd-glass-hi); color: var(--fd-ink); box-shadow: inset 0 0 0 1px var(--fd-line), 0 6px 14px -10px rgba(10, 24, 18, .4); }
html.fd .fd-places a:hover { color: var(--fd-ink); }

/* the page */
html.fd main { max-width: var(--fd-w, 680px); margin: 0 auto; padding: 30px 18px 56px; }
html.fd main.fd-narrow { --fd-w: 520px; }
html.fd.fd-solo main { padding-top: calc(env(safe-area-inset-top, 0px) + 44px); }
@media (min-width: 900px) { html.fd.fd-solo main { padding-top: 12vh; } }

/* the editorial head: eyebrow · title with the accent full stop · one sentence */
html.fd :is(.fd-eb, .eyebrow) { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font: 500 11px/1.4 var(--fd-fm); letter-spacing: .15em; text-transform: uppercase; color: var(--fd-sub); }
/* L4 (19 Oct 2026): the dot sits beside the words in its own box (as the truck order's eyebrow, G8) — same 7 px dot and 3 px ring;
   as a flex item it read as the words' background to the contrast check */
html.fd :is(.fd-eb, .eyebrow) { position: relative; padding-left: 20px; }
html.fd :is(.fd-eb, .eyebrow)::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -6.5px; width: 7px; height: 7px; box-sizing: content-box; border-radius: 50%; background: var(--fd-acc); border: 3px solid color-mix(in srgb, var(--fd-acc) 28%, transparent); background-clip: padding-box; }
html.fd h1 { margin: 14px 0 12px; font: 400 clamp(34px, 5.2vw, 52px)/1.04 var(--fd-f); letter-spacing: -.042em; color: var(--fd-ink); text-wrap: balance; overflow-wrap: anywhere; }
html.fd h1 :is(i, em) { font-style: normal; color: inherit; }
html.fd .fd-stop { color: var(--fd-stop); }
html.fd h2 { margin: 30px 0 8px; font: 500 19px/1.25 var(--fd-f); letter-spacing: -.016em; color: var(--fd-ink); }
html.fd main p, html.fd main li { color: var(--fd-ink2); }
html.fd :is(.sub, .fd-lead) { margin: 0 0 22px; font: 400 16.5px/1.5 var(--fd-f); color: var(--fd-ink2); }
html.fd :is(.small, .note, .fine, .fd-note) { font-size: 13.5px; line-height: 1.5; color: var(--fd-sub); }
html.fd a { color: var(--fd-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fd-brand) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
html.fd a:hover { text-decoration-color: var(--fd-brand); }
html.fd b, html.fd strong { font-weight: 600; color: var(--fd-ink); }

/* surfaces: glass on the lit field (never under content), soft layered shadow, a white top edge */
html.fd :is(.card, .fd-card) { margin: 14px 0; padding: 20px 22px; border: 0; border-radius: 24px; background: var(--fd-glass); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--fd-shg); }
html.fd :is(.k, .fd-k) { font: 500 11px/1.4 var(--fd-fm); letter-spacing: .14em; text-transform: uppercase; color: var(--fd-sub); }
html.fd .fd-fig { font: 300 44px/1 var(--fd-f); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--fd-ink); }

/* forms: labels in words, 48 px solid fields, the accent ring on focus */
html.fd main form:not(.fd-plain) { display: grid; gap: 4px; margin: 22px 0 0; padding: 22px; border-radius: 26px; background: var(--fd-glass); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); box-shadow: var(--fd-shg); }
html.fd main form label:not(.consent) { display: block; margin: 12px 0 6px; font: 500 13.5px/1.4 var(--fd-f); letter-spacing: 0; text-transform: none; color: var(--fd-ink2); }
html.fd main form label:first-of-type { margin-top: 0; }
html.fd :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; background-color: var(--fd-solid); color: var(--fd-ink); font: 400 17px/1.3 var(--fd-f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fd-ink) 16%, transparent); -webkit-appearance: none; appearance: none; }
html.fd select { background-image: linear-gradient(45deg, transparent 50%, var(--fd-sub) 50%), linear-gradient(135deg, var(--fd-sub) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px !important; }
html.fd input::placeholder { color: color-mix(in srgb, var(--fd-sub) 80%, transparent); }
html.fd :is(input, select, textarea, button, a):focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 2px; }
html.fd :is(input, select, textarea):focus { outline: none; box-shadow: inset 0 0 0 2px var(--fd-focus); }
html.fd input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--fd-gr); }

/* actions: the one primary (graphite on light · pale stone on dark), a quiet pill for anything else */
html.fd :is(.fd-btn, main form button[type="submit"]) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 20px 0 0; padding: 0 22px; border: 0; border-radius: 8px; background: var(--fd-gr); color: var(--fd-on-gr); font: 600 16px/1.2 var(--fd-f); letter-spacing: -.005em; text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); transition: transform .2s cubic-bezier(.22, .8, .24, 1), box-shadow .2s; }
html.fd :is(.fd-btn, main form button[type="submit"]):active { transform: scale(.985); }
html.fd :is(.fd-btn, main form button[type="submit"]):disabled { opacity: .5; cursor: default; }
html.fd .fd-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--fd-glass-hi); color: var(--fd-ink); font: 500 14px/1 var(--fd-f); text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--fd-line); }

/* states: words first, the semantic colour as a quiet edge (ok moss · warn ochre · bad terracotta) */
html.fd .bad, html.fd .err { color: var(--fd-bad); }
html.fd :is(.ok, .fd-state) { margin: 16px 0; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--fd-ok) 11%, var(--fd-solid)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fd-ok) 32%, transparent); color: var(--fd-ink); }
html.fd .ok.bad { background: color-mix(in srgb, var(--fd-bad) 10%, var(--fd-solid)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fd-bad) 36%, transparent); color: var(--fd-ink); }
html.fd .est { color: var(--fd-ink2); }

html.fd footer, html.fd .fd-foot { margin-top: 34px; font-size: 12.5px; line-height: 1.5; color: var(--fd-sub); }
/* the drawing kit's "moment" (a spent link) in this type */
html.fd .dxk-moment .say { font: 400 24px/1.15 var(--fd-f) !important; letter-spacing: -.02em; color: var(--fd-ink) !important; }
html.fd .dxk-moment .sub { color: var(--fd-ink2) !important; }

/* arrival: the page's parts rise once, in order (nothing moves at rest) */
@media (prefers-reduced-motion: no-preference) {
  html.fd main > * { animation: fd-rise .55s cubic-bezier(.22, .8, .24, 1) backwards; }
  html.fd main > *:nth-child(2) { animation-delay: .05s; } html.fd main > *:nth-child(3) { animation-delay: .1s; } html.fd main > *:nth-child(4) { animation-delay: .15s; } html.fd main > *:nth-child(n+5) { animation-delay: .2s; }
  @keyframes fd-rise { from { opacity: 0; transform: translateY(10px); } }
}
@media (max-width: 520px) {
  html.fd main { padding: 24px 16px 48px; }
  html.fd h1 { font-size: 36px; letter-spacing: -.038em; }
  html.fd :is(.card, .fd-card) { padding: 18px; border-radius: 22px; }
  html.fd main form:not(.fd-plain) { padding: 18px; border-radius: 24px; }
}