/* ---- ui-skin/00-base.css ---- */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap");
/*
 * FoxEra Calls app: cinematic skin (David, 27 Sep 2026: the app wears the same design as foxera.co.uk).
 * Served by /ui-skin.css?page=<page> when the platform flag "ui_skin" is cinematic (the default); the
 * classic setting serves an empty sheet, so the approved light look comes straight back.
 * Order: this shared file, then ui-skin/pages/<page>/10-generated.css (an automatic colour-only mirror of
 * the page's own CSS), then hand-tuned pages/<page>/20+*.css files.
 * Rules: colours, fonts and shadows only. Never change layout (width, padding, grid, display, position).
 */
:root {
  --cx-ink: #0a090c;
  --cx-ink-1: #111015;
  --cx-ink-2: #19171e;
  --cx-ink-3: #221f28;
  --cx-line: rgba(246, 241, 231, 0.12);
  --cx-line-2: rgba(246, 241, 231, 0.22);
  --cx-fox: #ff5426;
  --cx-fox-text: #ff7a55;
  --cx-amber: #ff7a1a;
  --cx-amber-hi: #ffa04d;
  --cx-amber-soft: rgba(255, 122, 26, 0.16);
  --cx-cream: #f6f1e7;
  --cx-cream-2: #d3cabc;
  --cx-cream-3: #a39a8c;
  --cx-green: #7fe0a0;
  --cx-red: #ff6b5b;
  --cx-on-accent: #150a02;
  --cx-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  accent-color: var(--cx-amber);
}

html:root {
  background: var(--cx-ink);
  scrollbar-color: #3a2a1f #000;
}
:root body {
  background:
    radial-gradient(1100px 640px at 80% -120px, rgba(255, 96, 34, 0.13), transparent 70%),
    var(--cx-ink);
  background-attachment: fixed;
  color: var(--cx-cream-2);
  font-family: var(--cx-sans);
  font-stretch: 100%;
}
/* Static film grain: never animates, never catches a click, sits under every overlay. */
:root body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  :root body::after { display: none; }
}

:root h1, :root h2, :root h3, :root h4 { color: var(--cx-cream); }
:root a { color: var(--cx-amber-hi); }
:root a:hover { color: #ffc27a; }
:root ::selection { background: rgba(255, 122, 26, 0.35); color: var(--cx-cream); }

:root button, :root input, :root select, :root textarea { font-family: inherit; }
:root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: var(--cx-ink-2);
  color: var(--cx-cream);
  border-color: var(--cx-line-2);
}
:root input::placeholder, :root textarea::placeholder { color: #8d8477; opacity: 1; }
:root :where(input, select, textarea, button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cx-amber);
}
:root select option { background: var(--cx-ink-2); color: var(--cx-cream); }
:root input:disabled, :root select:disabled, :root textarea:disabled, :root button:disabled { opacity: 0.55; }

:root table { color: var(--cx-cream-2); }
:root hr { border-color: var(--cx-line); }
:root code, :root pre, :root kbd { color: var(--cx-cream); }
:root img[src$="foxera-fox.svg"] { filter: drop-shadow(0 0 12px rgba(255, 84, 38, 0.35)); }

/* ---- login/10-generated.css ---- */
/* GENERATED by calls-skin-harness/generate-skin.cjs from login.html, ui-locale.css — colour-only mirror, do not hand-edit; put fixes in a later file. 24 rules, 38 declarations. */
:root body {
    color: var(--cx-cream)
}
:root .card {
    background-color: var(--cx-ink-1);
    border-color: var(--cx-line-2);
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root h1 .fox {
    color: var(--cx-fox-text)
}
:root .muted {
    color: var(--cx-cream-3)
}
:root label {
    color: var(--cx-cream)
}
:root input {
    background-color: var(--cx-ink-1);
    border-color: var(--cx-line-2);
    color: var(--cx-cream)
}
:root input:focus {
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root button {
    color: var(--cx-cream);
    border-color: var(--cx-line-2);
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root button:hover {
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root button:active {
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root .toggle {
    color: var(--cx-cream-3)
}
:root .toggle a {
    color: var(--cx-fox-text)
}
:root #error,
:root #accept-error {
    background-color: var(--cx-ink-1);
    border-color: #ff8a7a;
    color: #ff8a7a
}
:root .google-btn {
    background-color: var(--cx-ink-1);
    color: var(--cx-cream);
    border-color: var(--cx-line-2)
}
:root .google-btn:hover {
    background-color: var(--cx-ink)
}
:root .verify-note {
    color: var(--cx-cream-3)
}
:root #verify-status {
    color: #6fd8cb
}
:root .pw-eye:hover,
:root .pw-eye:focus-visible {
    background-color: rgba(246,241,231,0.08)
}
:root .ui-language-panel {
    background-color: var(--cx-ink-1);
    color: var(--cx-cream);
    border-color: var(--cx-line-2);
    box-shadow: 0 18px 44px -26px rgba(0,0,0,.9)
}
:root .ui-language-panel input {
    border-color: var(--cx-line-2)
}
:root .ui-language-panel button {
    background-color: var(--cx-ink-1);
    color: var(--cx-cream)
}
:root .ui-language-panel button[aria-pressed="true"] {
    background-color: var(--cx-amber)
}
:root .ui-language-panel button:hover {
    background-color: var(--cx-ink-2)
}
:root .ui-language :focus-visible {
    outline-color: var(--cx-amber)
}

/* ---- login/20-tuned.css ---- */
/*
 * login.html: hand-tuned cinematic layer (loads after 10-generated.css).
 * Colours, backgrounds, shadows and type voice only: every size, gap and position is the approved layout.
 * The page's chunky 3px borders become transparent gutters (background-clip: padding-box) with a 1px hairline
 * drawn inside by box-shadow, which is how foxera.co.uk draws its cards, inputs and ghost buttons.
 * !important appears only where the page writes an inline style="" (chat bubbles, terms panel, JS-set errors).
 */

/* The page's own palette, re-pointed for the dark stage. Inline styles and JS read these
   (setup label hint uses --muted, the "Email confirmed" banner --teal, the setup error --red). */
:root {
  --muted: var(--cx-cream-3);
  --teal: var(--cx-green);
  --red: #ff9a8c;
  --lime: rgba(255, 122, 26, 0.16);
  --paper: var(--cx-ink);
}

/* ---------------------------------------------------------------- the card: dark glass with a soft amber key light */
:root body .card {
  color: var(--cx-cream-2);
  border-color: transparent;
  --cx-vf: rgba(246, 241, 231, 0.34);
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(255, 122, 26, 0.11), transparent 62%),
    linear-gradient(var(--cx-vf), var(--cx-vf)) left 8px top 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) left 8px top 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) right 8px top 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) right 8px top 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) left 8px bottom 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) left 8px bottom 8px / 1.5px 12px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) right 8px bottom 8px / 12px 1.5px no-repeat,
    linear-gradient(var(--cx-vf), var(--cx-vf)) right 8px bottom 8px / 1.5px 12px no-repeat,
    linear-gradient(180deg, rgba(24, 21, 29, 0.93), rgba(12, 11, 15, 0.95));
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 1px var(--cx-line),
    inset 0 1px 0 rgba(255, 160, 77, 0.22),
    0 44px 90px -44px rgba(0, 0, 0, 0.95),
    0 0 110px -34px rgba(255, 96, 34, 0.30);
}

/* Wordmark: cream "Fox", fox-orange "Era", as on foxera.co.uk's bar. */
:root body .card h1 {
  color: var(--cx-cream);
  font-stretch: 88%;
  font-weight: 800;
  letter-spacing: 0.005em;
}
:root body .card h1 .fox { color: var(--cx-fox); }
:root body .card h1 .fox-mark { filter: drop-shadow(0 0 10px rgba(255, 84, 38, 0.45)); }
:root body .card h2 {
  color: var(--cx-cream);
  font-stretch: 72%;
  font-weight: 800;
  letter-spacing: 0.004em;
}

:root body .card .muted,
:root body .card .verify-note { color: var(--cx-cream-3); }
:root body .card label { color: var(--cx-cream-2); }
:root body .card .verify-email { color: var(--cx-cream); }
:root body .card .verify-icon { filter: drop-shadow(0 6px 18px rgba(255, 122, 26, 0.35)); }

/* ---------------------------------------------------------------- fields */
:root body :is(#login-card, #setup-card, #verify-card, #signup-chat-card, #accept-card) input:not([type="checkbox"]):not([type="radio"]) {
  background-color: var(--cx-ink-2);
  background-clip: padding-box;
  border-color: transparent;
  color: var(--cx-cream);
  caret-color: var(--cx-amber);
  box-shadow: inset 0 0 0 1px var(--cx-line-2);
}
:root body :is(#login-card, #setup-card, #verify-card, #signup-chat-card, #accept-card) input:not([type="checkbox"]):not([type="radio"]):hover {
  box-shadow: inset 0 0 0 1px rgba(246, 241, 231, 0.36);
}
:root body :is(#login-card, #setup-card, #verify-card, #signup-chat-card, #accept-card) input:not([type="checkbox"]):not([type="radio"]):focus {
  box-shadow: inset 0 0 0 1px var(--cx-amber), 0 0 0 3px rgba(255, 122, 26, 0.28);
}
/* Browser autofill paints its own pale fill; keep the field dark and the text cream. */
:root body :is(#login-card, #setup-card, #verify-card, #signup-chat-card, #accept-card) input:-webkit-autofill {
  -webkit-text-fill-color: var(--cx-cream);
  box-shadow: inset 0 0 0 1px var(--cx-line-2), inset 0 0 0 60px var(--cx-ink-2);
}
:root body :is(#login-card, #setup-card, #verify-card, #signup-chat-card, #accept-card) input:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1px var(--cx-amber), inset 0 0 0 60px var(--cx-ink-2), 0 0 0 3px rgba(255, 122, 26, 0.28);
}

/* The show-password eye */
:root body .pw-eye {
  color: var(--cx-cream-3);
  box-shadow: none;
}
:root body .pw-eye:hover,
:root body .pw-eye:focus-visible {
  color: var(--cx-cream);
  background-color: rgba(246, 241, 231, 0.08);
  box-shadow: none;
}

/* ---------------------------------------------------------------- primary buttons: the site's amber CTA */
:root body :is(#submit-btn, #setup-btn, #accept-btn, #verify-code-btn, #signup-chat-send) {
  background-color: var(--cx-amber);
  background-clip: padding-box;
  border-color: transparent;
  color: var(--cx-on-accent);
  box-shadow: 0 14px 34px -14px rgba(255, 122, 26, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
:root body :is(#submit-btn, #setup-btn, #accept-btn, #verify-code-btn, #signup-chat-send):hover {
  background-color: var(--cx-amber-hi);
  color: var(--cx-on-accent);
  box-shadow: 0 20px 44px -14px rgba(255, 122, 26, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
:root body :is(#submit-btn, #setup-btn, #accept-btn, #verify-code-btn, #signup-chat-send):active {
  box-shadow: 0 8px 20px -12px rgba(255, 122, 26, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
:root body :is(#submit-btn, #setup-btn, #accept-btn, #verify-code-btn, #signup-chat-send):focus-visible {
  outline: 2px solid var(--cx-amber-hi);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- ghost buttons: resend, Google, open inbox */
:root body #verify-resend,
:root body .google-btn {
  background-color: transparent;
  background-clip: padding-box;
  border-color: transparent;
  color: var(--cx-cream);
  box-shadow: inset 0 0 0 1px var(--cx-line-2);
}
:root body #verify-resend:hover,
:root body .google-btn:hover {
  background-color: rgba(246, 241, 231, 0.04);
  color: var(--cx-amber-hi);
  box-shadow: inset 0 0 0 1px var(--cx-amber);
}
:root body #verify-resend:focus-visible,
:root body .google-btn:focus-visible {
  outline: 2px solid var(--cx-amber-hi);
  outline-offset: 3px;
}

/* "Fill in a form instead" is a text link drawn as a button (its own inline style keeps it bare). */
:root body #signup-chat-manual,
:root body #signup-chat-manual:hover,
:root body #signup-chat-manual:active {
  box-shadow: none;
}
:root body #signup-chat-manual:hover { color: var(--cx-amber-hi) !important; }

/* ---------------------------------------------------------------- the setup chat */
:root body #signup-chat-thread > div[style*="flex-start"] {
  background-color: rgba(246, 241, 231, 0.045) !important;
  border-color: var(--cx-line) !important;
  color: var(--cx-cream-2);
}
:root body #signup-chat-thread > div[style*="flex-end"] {
  background-color: rgba(255, 122, 26, 0.14) !important;
  border-color: rgba(255, 122, 26, 0.5) !important;
  color: var(--cx-cream);
}
:root body #signup-chat-choices > button {
  background-color: rgba(255, 122, 26, 0.08);
  background-clip: padding-box;
  border-color: transparent;
  color: var(--cx-amber-hi);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.55);
}
:root body #signup-chat-choices > button:hover {
  background-color: var(--cx-amber);
  color: var(--cx-on-accent);
  box-shadow: inset 0 0 0 1px var(--cx-amber), 0 12px 28px -14px rgba(255, 122, 26, 0.8);
}
:root body #signup-chat-thread { scrollbar-color: #3a2a1f transparent; }

/* ---------------------------------------------------------------- terms row and panel */
:root body #terms-row label { color: var(--cx-cream-2); }
:root body #terms-panel {
  background-color: rgba(10, 9, 12, 0.6);
  border-color: var(--cx-line-2) !important;
  color: var(--cx-cream-2);
  scrollbar-color: #4a3424 transparent;
}
:root body #terms-accept { accent-color: var(--cx-amber); }

/* ---------------------------------------------------------------- links under the form */
:root body .card .toggle { color: var(--cx-cream-3); }
:root body .card .toggle a { color: var(--cx-amber-hi); }
:root body .card .toggle a:hover { color: var(--cx-cream); }

/* ---------------------------------------------------------------- messages: tinted dark chips */
:root body #error,
:root body #accept-error,
:root body #setup-error[style*="block"] {
  background-color: rgba(255, 107, 91, 0.1);
  background-clip: padding-box;
  border-color: transparent !important;
  color: #ff9a8c;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 91, 0.5);
}
/* "Email confirmed … Sign in!" reuses #error with an inline var(--teal) colour (re-pointed to green above). */
:root body #error[style*="teal"] {
  background-color: rgba(127, 224, 160, 0.1);
  color: var(--cx-green);
  box-shadow: inset 0 0 0 1px rgba(127, 224, 160, 0.45);
}
:root body #verify-status { color: var(--cx-green); }

/* ---------------------------------------------------------------- language picker (top right) */
:root body #ui-public-language .ui-language summary {
  color: var(--cx-cream-2);
  border-color: var(--cx-line-2);
  background-color: rgba(10, 9, 12, 0.72);
}
:root body #ui-public-language .ui-language summary:hover,
:root body #ui-public-language .ui-language[open] summary {
  color: var(--cx-cream);
  border-color: var(--cx-amber);
}
:root body #ui-public-language .ui-language-panel {
  background-color: #141218;
  border-color: var(--cx-line-2);
  color: var(--cx-cream);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
:root body #ui-public-language .ui-language-panel input {
  background-color: var(--cx-ink);
  border-color: var(--cx-line-2);
  color: var(--cx-cream);
}
:root body #ui-public-language .ui-language-panel button,
:root body #ui-public-language .ui-language-panel button:hover,
:root body #ui-public-language .ui-language-panel button:active {
  box-shadow: none;
}
:root body #ui-public-language .ui-language-panel button { background-color: transparent; color: var(--cx-cream-2); }
:root body #ui-public-language .ui-language-panel button:hover { background-color: var(--cx-ink-3); color: var(--cx-cream); }
:root body #ui-public-language .ui-language-panel button[aria-pressed="true"] {
  background-color: var(--cx-amber);
  color: var(--cx-on-accent);
  font-weight: 700;
}
:root body #ui-public-language .ui-language-panel p { color: var(--cx-cream-3); }