/* ===========================================================================
   FernAI AI ROI Calculator — public brand system.

   Same token set as the Value Discovery app (fernai repo,
   value-discovery/frontend/src/theme.css, ADR 0004), since both are linked
   from fernai.co.uk and should read as one brand: FernAI navy and red,
   Archivo as the only face, square corners, two rule weights, no glows.

   Declared light-first on :root; [data-theme="dark"] overrides colour only.
   =========================================================================== */
:root {
  --app-bg: #f3f2f2;
  --app-panel: #eae9e9;
  --app-panel-2: #f8f7f7;
  --app-ink: #0f172a;
  --app-muted: rgba(15, 23, 42, 0.62);
  --app-faint: rgba(15, 23, 42, 0.45);
  --app-line: rgba(15, 23, 42, 0.4);
  --app-line-soft: rgba(15, 23, 42, 0.16);
  --app-accent: #ec3013;
  --app-accent-ink: #b3240e;
  --app-accent-wash: rgba(236, 48, 19, 0.07);
  --app-accent-hover: #c9260c;
  --app-nav: #0f172a;
  --app-nav-ink: #f3f2f2;
  --app-nav-muted: rgba(243, 242, 242, 0.6);
  --app-nav-line: rgba(243, 242, 242, 0.3);

  /* Bars: flagship in ink, efficient in a lighter ink. The accent is spent on
     the selected model and the headline figure only. */
  --bar-flagship: var(--app-ink);
  --bar-efficient: rgba(15, 23, 42, 0.32);
  --bar-track: rgba(15, 23, 42, 0.06);

  --font-body: "Archivo", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --app-bg: #0f172a;
  --app-panel: #16203a;
  --app-panel-2: #1b2644;
  --app-ink: #f3f2f2;
  --app-muted: rgba(243, 242, 242, 0.68);
  --app-faint: rgba(243, 242, 242, 0.5);
  --app-line: rgba(243, 242, 242, 0.34);
  --app-line-soft: rgba(243, 242, 242, 0.14);
  --app-accent: #ec3013;
  --app-accent-ink: #f4795e;
  --app-accent-wash: rgba(236, 48, 19, 0.12);
  --app-accent-hover: #c9260c;
  --app-nav: #080d18;
  --app-nav-ink: #f3f2f2;
  --app-nav-muted: rgba(243, 242, 242, 0.55);
  --app-nav-line: rgba(243, 242, 242, 0.3);

  --bar-efficient: rgba(243, 242, 242, 0.36);
  --bar-track: rgba(243, 242, 242, 0.07);
}

* { box-sizing: border-box; }
/* The hidden attribute always wins over a component's own display rule
   (e.g. .legend-row is display: flex). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

input, select, button { font-family: inherit; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; width: 100%; }
@media (max-width: 640px) { .container { padding: 0 16px; } }

/* ---- header bar -------------------------------------------------------- */
.appbar { background: var(--app-nav); color: var(--app-nav-ink); }
.appbar-in {
  display: flex; align-items: center; gap: 24px;
  padding-top: 16px; padding-bottom: 16px;
}
.lockup {
  display: flex; align-items: center; gap: 12px; margin-right: auto;
  color: var(--app-nav-ink); text-decoration: none;
}
.lockup:hover { color: var(--app-nav-ink); }
.lockup-mark { height: 24px; width: auto; display: block; color: var(--app-nav-ink); }
.lockup-sub {
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--app-nav-muted); position: relative; top: 2px;
}
.appbar-right { display: flex; align-items: center; gap: 20px; }
.appbar-note, .navbtn {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.appbar-note { color: var(--app-nav-muted); }
.lockup-sub, .navbtn { white-space: nowrap; }
@media (max-width: 400px) { .appbar-in { gap: 12px; } .lockup-sub { letter-spacing: 0.14em; } }
@media (max-width: 360px) { .lockup-sub { display: none; } }
@media (max-width: 480px) { .appbar-note { display: none; } }
.navbtn {
  padding: 9px 14px; background: transparent; cursor: pointer;
  border: 1px solid var(--app-nav-line); color: var(--app-nav-ink);
}
.navbtn:hover { border-color: var(--app-accent); color: var(--app-accent); }

/* ---- page head --------------------------------------------------------- */
.main { flex: 1; padding: 56px 0 72px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--app-accent-ink); margin: 0;
  display: flex; align-items: center; gap: 16px;
}
.eyebrow::after { content: ""; height: 2px; width: 64px; background: var(--app-accent); }

.screen-title {
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1; margin: 14px 0 0;
  max-width: 22ch;
}
.screen-sub {
  font-size: 16px; line-height: 1.65; color: var(--app-muted);
  margin: 18px 0 0; max-width: 62ch;
}
.rule-2 { height: 2px; background: var(--app-line); margin: 36px 0 40px; }

/* ---- layout ------------------------------------------------------------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.card { background: var(--app-panel); padding: 26px 28px; }
@media (max-width: 480px) { .card { padding: 22px 18px; } }

.kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--app-accent-ink); margin: 0 0 18px;
}
.group-head { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--app-line-soft); }

.micro {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--app-faint); margin: 0;
}

.note { color: var(--app-faint); font-size: 12.5px; margin: 6px 0 0; line-height: 1.55; }

.section { margin-top: 40px; }
.section-head {
  display: flex; align-items: center; gap: 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 0 0 18px;
}
.section-head::after { content: ""; flex: 1; height: 2px; background: var(--app-line-soft); }
.section-note { color: var(--app-faint); font-size: 13px; margin: -6px 0 14px; max-width: 78ch; }

/* ---- form --------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-muted); margin-bottom: 7px;
}
.field label .val {
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--app-ink); font-variant-numeric: tabular-nums;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row .field label { min-height: 2.6em; align-items: flex-end; }
.field-row .field { margin-bottom: 8px; }

.hint { font-size: 12.5px; line-height: 1.5; color: var(--app-faint); margin: 7px 0 0; }
.field-row-hint { margin: 0 0 18px; }

/* Number input with a currency symbol and/or unit drawn inside the box. */
.input-unit {
  display: flex; align-items: center;
  background: var(--app-panel-2); border: 1px solid var(--app-line-soft);
}
.input-unit:focus-within { border-color: var(--app-accent); }
.input-unit input[type="number"] { border: 0; background: transparent; min-width: 0; flex: 1; }
.input-unit input[type="number"]:focus { border: 0; }
.unit-prefix, .unit-suffix { color: var(--app-faint); font-size: 13px; white-space: nowrap; }
.unit-prefix { padding-left: 14px; margin-right: -8px; color: var(--app-muted); font-size: 15px; }
.unit-suffix { padding-right: 14px; }

input[type="range"] { accent-color: var(--app-accent); width: 100%; margin: 4px 0 0; }
input[type="number"], select {
  width: 100%;
  background: var(--app-panel-2);
  border: 1px solid var(--app-line-soft);
  color: var(--app-ink);
  font-size: 15px;
  padding: 11px 14px;
}
input[type="number"]:focus, select:focus { outline: none; border-color: var(--app-accent); }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
select option { background: var(--app-panel-2); color: var(--app-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-muted); padding: 0; margin-bottom: 2px;
}
fieldset:disabled .task { opacity: 0.45; }

/* Two-way choice drawn as one ruled control. The layout sits on a plain div
   rather than the fieldset, which some browsers (notably Safari) won't lay
   out as a grid or flex container reliably. Labels are kept to one line and
   each option fills its half, so the selected fill is always full height. */
.segmented { display: flex; border: 1px solid var(--app-line); }
.segmented label { flex: 1 1 0; position: relative; display: flex; cursor: pointer; min-width: 0; }
.segmented input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.segmented span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; white-space: nowrap; padding: 12px 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-muted);
}
.segmented label + label span { border-left: 1px solid var(--app-line); }
.segmented input:checked + span { background: var(--app-ink); color: var(--app-bg); }
.segmented input:focus-visible + span { outline: 2px solid var(--app-accent); outline-offset: -2px; }
.access + .hint { margin-bottom: 18px; }

.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.check input { accent-color: var(--app-accent); width: 16px; height: 16px; margin: 3px 0 0; flex: none; }
.field label.check {
  justify-content: flex-start; align-items: flex-start; text-transform: none; letter-spacing: 0;
  font-size: 14px; font-weight: 400; color: var(--app-ink); margin-bottom: 0;
}
.task { padding: 9px 0; border-bottom: 1px solid var(--app-line-soft); }
.task:last-child { border-bottom: 0; }
.task strong { display: block; font-weight: 600; }
.task small { display: block; color: var(--app-faint); font-size: 12.5px; }
#task-list { margin-top: 6px; }

.usage-summary {
  font-size: 13px; color: var(--app-muted); margin: 0 0 14px;
  padding: 10px 12px; background: var(--app-panel-2); border-left: 2px solid var(--app-accent);
}
.field.manual { margin-bottom: 14px; }
.field.manual .check { font-size: 13px; color: var(--app-muted); }

/* ---- assistant ------------------------------------------------------------ */
.assistant { border: 2px solid var(--app-line); margin-bottom: 40px; }
.assistant-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 18px 36px; padding: 26px 28px;
}
@media (max-width: 900px) { .assistant-in { grid-template-columns: 1fr; padding: 22px 18px; } }
.assistant .kicker { margin-bottom: 8px; }
.assistant-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.assistant textarea {
  width: 100%; background: var(--app-panel-2); border: 1px solid var(--app-line-soft);
  color: var(--app-ink); font-size: 15px; line-height: 1.55; padding: 12px 14px; resize: vertical;
}
.assistant textarea:focus { outline: none; border-color: var(--app-accent); }
.assistant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; }
.assistant-actions .act { border: 0; cursor: pointer; }
.assistant-actions .act:disabled { background: transparent; color: var(--app-faint); outline: 1px solid var(--app-line-soft); cursor: wait; }
.assistant-status { font-size: 13px; color: var(--app-muted); }
.turnstile:empty { display: none; }
.assistant-result { grid-column: 1 / -1; border-top: 1px solid var(--app-line-soft); padding-top: 18px; }
.assistant-summary { margin: 6px 0 8px; font-size: 15px; }
.assistant-result ul { margin: 0 0 8px; padding-left: 18px; font-size: 13.5px; color: var(--app-muted); }
.assistant-result li { margin-bottom: 4px; }
.assistant-result li strong { color: var(--app-ink); font-weight: 600; }

/* ---- results ------------------------------------------------------------ */
.hero {
  border: 2px solid var(--app-line);
  border-bottom: 0;
  padding: 26px 26px 22px;
  background: var(--app-accent-wash);
}
.hero-figure {
  font-size: clamp(40px, 6vw, 60px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; margin-top: 8px;
  color: var(--app-accent); font-variant-numeric: tabular-nums;
}
.hero-sub { margin: 8px 0 0; font-size: 14px; color: var(--app-muted); }
/* Losing money is not the brand moment: drop the accent rather than invent a
   second warning hue. */
.hero.roi-neg { background: transparent; }
.hero.roi-neg .hero-figure { color: var(--app-ink); }

.stat-strip {
  border: 2px solid var(--app-line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stat-cell { padding: 18px 20px; border-left: 2px solid var(--app-line); }
.stat-cell:first-child { border-left: 0; }
.stat-num {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.03em;
  margin-top: 6px; font-variant-numeric: tabular-nums;
}
.stat-hint { font-size: 12px; color: var(--app-faint); margin: 4px 0 0; }

.method { margin-top: 16px; font-size: 13px; color: var(--app-muted); }
.method summary {
  cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-ink);
}
.method summary:hover { color: var(--app-accent-ink); }
.method ul { margin: 12px 0 0; padding-left: 18px; }
.method li { margin-bottom: 6px; }
.method p { margin: 10px 0 0; }
.method strong { color: var(--app-ink); font-weight: 600; }

@media (max-width: 560px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-cell { border-left: 0; border-top: 1px solid var(--app-line-soft); }
  .stat-cell:first-child { border-top: 0; }
}

/* ---- model bars --------------------------------------------------------- */
.legend-row { display: flex; gap: 20px; margin: 0 0 16px; font-size: 12px; color: var(--app-muted); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: -1px; }
.legend-swatch.flagship { background: var(--bar-flagship); }
.legend-swatch.efficient { background: var(--bar-efficient); }

.bar-list { border-top: 2px solid var(--app-line); }
.bar-row {
  display: grid; grid-template-columns: 180px 1fr 90px; gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--app-line-soft);
}
@media (max-width: 640px) { .bar-row { grid-template-columns: 112px 1fr 72px; gap: 10px; } }
.bar-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-name .vendor {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--app-faint);
}
.bar-track { height: 14px; background: var(--bar-track); overflow: hidden; }
.bar-fill { height: 100%; background: var(--bar-flagship); transition: width 400ms ease; }
.bar-fill.efficient { background: var(--bar-efficient); }
.bar-value { font-size: 13.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bar-row.selected .bar-name,
.bar-row.selected .bar-value { color: var(--app-accent-ink); font-weight: 700; }
.bar-row.selected .bar-fill { background: var(--app-accent); }

.loading { color: var(--app-faint); font-size: 13px; padding: 24px 0; }

/* ---- call to action ---------------------------------------------------- */
.cta { margin-top: 44px; background: var(--app-nav); color: var(--app-nav-ink); padding: 30px 32px; }
.cta .kicker { color: #f4795e; margin-bottom: 10px; }
.cta-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.cta-body { color: var(--app-nav-muted); margin: 10px 0 22px; max-width: 60ch; }
@media (max-width: 480px) { .cta { padding: 24px 20px; } }

.act {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  border: 1px solid var(--app-line);
  color: var(--app-ink);
}
.act.primary { background: var(--app-accent); border-color: var(--app-accent); color: #fff; }
.act.primary:hover { background: var(--app-accent-hover); border-color: var(--app-accent-hover); color: #fff; }
.arrow { font-weight: 400; margin-left: 6px; }

/* ---- footer -------------------------------------------------------------- */
.source-line { margin: 48px 0 0; font-size: 12px; color: var(--app-faint); }

.appfoot { border-top: 2px solid var(--app-line); }
.appfoot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px;
  padding-top: 28px; padding-bottom: 28px; font-size: 12px; color: var(--app-faint);
}
.appfoot-links { display: flex; flex-wrap: wrap; gap: 22px; }

/* ---- embed mode (?embed=1) ----------------------------------------------
   Inside an iframe on fernai.co.uk the host page already provides the brand
   chrome, so the header bar and footer go and the top padding shrinks.
   ------------------------------------------------------------------------- */
:root[data-embed] .appbar,
:root[data-embed] .appfoot { display: none; }
:root[data-embed] body { min-height: 0; }
:root[data-embed] .main { padding: 40px 0 32px; }

/* ---- panel embed (?embed=panel) ---------------------------------------------
   For host pages that strip scripts and so can't resize the frame: the host
   gives the frame a fixed height (85vh in the README snippet), shorter than
   the calculator, which keeps its normal layout and scrolls as one inside
   it, so there's never empty space below. While the headline result is out
   of view, a slim bar pinned to the top of the frame shows it.
   ------------------------------------------------------------------------- */
.mini-summary { display: none; }

:root[data-embed-panel] .mini-summary.show {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: 9px 16px; background: var(--app-nav); color: var(--app-nav-ink);
}
:root[data-embed-panel] .mini-summary .micro { color: var(--app-nav-muted); }
:root[data-embed-panel] .mini-summary strong {
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #f4795e;
}
:root[data-embed-panel] .mini-summary.neg strong { color: var(--app-nav-ink); }
:root[data-embed-panel] .mini-jump {
  margin-left: auto; background: transparent; border: 1px solid var(--app-nav-line);
  color: var(--app-nav-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 7px 10px; cursor: pointer;
}
:root[data-embed-panel] #outcome-head { scroll-margin-top: 72px; }
@media (max-width: 480px) {
  :root[data-embed-panel] .mini-summary .micro { flex-basis: 100%; }
}

/* ===========================================================================
   Brand invariants, enforced once at the foot of the cascade.
   =========================================================================== */
*, *::before, *::after {
  border-radius: 0 !important;
  font-family: var(--font-body);
}

:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
::selection { background: var(--app-accent-wash); }

a { color: var(--app-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--app-accent); }
.appfoot a, .source-line a { color: inherit; }
.appfoot a:hover, .source-line a:hover { color: var(--app-accent-ink); }

a, button, input, select {
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}