/* Fi pane kit: tokens and the shared primitives every tab uses (Fi mark, shimmer, source chip,
   paper surface, buttons, status dots, figures). Tabs style their own layouts in their own file
   and never redefine these. Contrast: every text token below passes WCAG AA on its surface. */

.fp,.fp-reels{ /* the reel row sits above the pane and shares its tokens */
  /* stage (dark) */
  --fp-ink:#0e0f12;
  --fp-stage:#10131a;
  --fp-stage-2:#151924;
  --fp-stage-rim:rgba(255,255,255,.075);
  --fp-stage-rim-2:rgba(255,255,255,.13);
  --fp-on-stage:#eeeae0;        /* 15.6:1 on stage */
  --fp-on-stage-2:#aeb3c0;      /* 8.7:1 */
  --fp-on-stage-3:#8a90a0;      /* 5.6:1 */

  /* paper (product surfaces) */
  --fp-paper:#fffcf5;
  --fp-paper-2:#f7f3ea;
  --fp-paper-3:#efe9dc;
  --fp-line:#e7e0d1;
  --fp-line-2:#d9d1c0;
  --fp-text:#15171c;            /* 17.6:1 on paper */
  --fp-text-2:#464a55;          /* 8.6:1 */
  --fp-text-3:#676b75;          /* 5.3:1 */

  /* accents */
  --fp-cobalt:#1e47d1;          /* 7.0:1 on paper */
  --fp-blue:#5f82ff;
  --fp-blue-wash:#e9eefc;
  --fp-hl:#d9e3ff;              /* source highlight */
  --fp-gain:#2a7350;            /* 5.6:1 */
  --fp-gain-wash:#e4f1e9;
  --fp-loss:#b3402a;            /* 5.4:1 */
  --fp-loss-wash:#f9e7e1;
  --fp-wait:#9a5b0c;            /* 5.5:1, "Needs you" */
  --fp-wait-wash:#f8eedb;

  /* type */
  --fp-sans:Manrope,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fp-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --fp-serif:'Instrument Serif',Georgia,serif;

  /* shape + material */
  --fp-r-1:4px;
  --fp-r-2:5px;
  --fp-r-3:6px;
  --fp-r-stage:10px;
  --fp-sh-paper:inset 0 1px 0 #fff, 0 0 0 1px var(--fp-line), 0 1px 2px rgba(14,15,18,.06), 0 14px 34px -14px rgba(0,0,0,.42);
  --fp-sh-float:inset 0 1px 0 #fff, 0 0 0 1px rgba(14,15,18,.07), 0 2px 5px rgba(0,0,0,.12), 0 28px 64px -22px rgba(0,0,0,.66);
  --fp-sh-lift:inset 0 1px 0 #fff, 0 0 0 1px rgba(30,71,209,.28), 0 4px 10px rgba(0,0,0,.14), 0 34px 74px -24px rgba(0,0,0,.7);

  /* motion (JS mirrors these in seq.js EASE) */
  --fp-ease-out:cubic-bezier(.16,1,.3,1);
  --fp-ease-std:cubic-bezier(.22,1,.36,1);
  --fp-ease-inout:cubic-bezier(.65,0,.35,1);
  --fp-t-micro:140ms;
  --fp-t-state:240ms;
  --fp-t-enter:520ms;
  /* Type scale, measured from The Agent reel (29 Oct): every reel uses only these. */
  --fp-fs-hero:23px;--fp-fs-num:18px;--fp-fs-title:16px;--fp-fs-head:14px;--fp-fs-body:13px;--fp-fs-ui:12px;--fp-fs-meta:11px;
  /* The tour row above the pane: tab names 26 px at 1440 × 900 → 18 px at 768 → 17 px on phones; their one line. */
  --fp-fs-tab:clamp(17px,min(calc(8.857px + 1.19vw),2.9vh),26px);--fp-fs-tab-s:clamp(13px,1.75vh,15px); /* both also follow the viewport height (short laptops) */

  font-family:var(--fp-sans);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' on;
}
.fp *{box-sizing:border-box}
.fp p,.fp h3,.fp h4,.fp ul,.fp ol,.fp figure{margin:0;padding:0}
.fp ul,.fp ol{list-style:none}
.fp :where(button){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.fp button:focus-visible,.fp a:focus-visible,.fp [tabindex]:focus-visible{outline:2px solid var(--fp-blue);outline-offset:3px;border-radius:var(--fp-r-1)}

/* ── Figures: every number on screen ─────────────────────────────── */
.fp-num{font-family:var(--fp-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.fp-num small{font-family:var(--fp-sans);font-size:max(11px,.78em);letter-spacing:0;color:var(--fp-text-3);margin-left:.15em}
.fp-was{color:var(--fp-text-3);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:rgba(103,107,117,.6)}
.fp-up{color:var(--fp-gain)}
.fp-down{color:var(--fp-loss)}

/* ── Paper surface ──────────────────────────────────────────────── */
.fp-paper{background:var(--fp-paper);color:var(--fp-text);border-radius:var(--fp-r-3);box-shadow:var(--fp-sh-paper)}
.fp-paper--float{box-shadow:var(--fp-sh-float)}

/* ── The Fi mark ────────────────────────────────────────────────── */
/* <span class="fp-fi" data-state="idle|working|done" aria-hidden="true"><i>fi</i></span> */
.fp-fi{--s:22px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,#7d9bff 0%,#2f5bf0 42%,#1b3cb8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.25),0 1px 2px rgba(14,15,18,.25),0 0 0 .5px rgba(14,15,18,.2)}
.fp-fi i{font:italic calc(var(--s)*.66)/1 var(--fp-serif);color:#fff;letter-spacing:-.02em;transform:translate(-.03em,-.02em);text-shadow:0 1px 1px rgba(0,0,0,.18)}
.fp-fi::before{content:'';position:absolute;inset:calc(var(--s)*-.2);border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(95,130,255,.0) 60%,rgba(95,130,255,.85) 92%,#c9d6ff 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  transition:opacity var(--fp-t-state) var(--fp-ease-std)}
.fp-fi::after{content:'';position:absolute;inset:calc(var(--s)*-.2);border-radius:50%;box-shadow:0 0 0 1px rgba(95,130,255,.32);opacity:0;transition:opacity var(--fp-t-state)}
.fp-fi[data-state=working]::before{opacity:1;animation:fp-spin 1.15s linear infinite}
.fp-fi[data-state=working]::after{opacity:1}
.fp-fi[data-state=done]::after{opacity:1;box-shadow:0 0 0 1px rgba(42,115,80,.4)}
.fp-fi--lg{--s:30px}
.fp-fi--sm{--s:16px}
@keyframes fp-spin{to{transform:rotate(1turn)}}

/* ── Working text: a light sweep through the letters ───────────── */
.fp-shimmer{background:linear-gradient(90deg,currentColor 0 38%,var(--fp-shimmer-hi,#9db2ff) 50%,currentColor 62% 100%) 100% 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fp-sweep 1.7s linear infinite}
@keyframes fp-sweep{to{background-position:-150% 0}}

/* ── Typing caret ───────────────────────────────────────────────── */
.fp-caret::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:var(--fp-cobalt);animation:fp-blink 1s steps(1) infinite}
@keyframes fp-blink{50%{opacity:0}}

/* ── Source chip: the citation object, same everywhere ─────────── */
/* <span class="fp-chip" data-kind="pdf|mail|csv"><svg class="fp-chip-icon">…</svg><span>Supplier B module quote.pdf</span><span class="fp-chip-loc">p. 2</span></span> */
.fp-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:26px;padding:0 10px 0 7px;border-radius:4px;
  background:var(--fp-paper);box-shadow:inset 0 0 0 1px var(--fp-line-2);font-size:12px;font-weight:600;line-height:1;color:var(--fp-text);white-space:nowrap}
.fp-chip>span:not(.fp-chip-loc){overflow:hidden;text-overflow:ellipsis}
.fp-chip-icon{width:14px;height:14px;flex:none}
.fp-chip[data-kind=pdf] .fp-chip-icon{color:#c2412b}
.fp-chip[data-kind=mail] .fp-chip-icon{color:var(--fp-cobalt)}
.fp-chip[data-kind=csv] .fp-chip-icon{color:var(--fp-gain)}
.fp-chip-loc{font-family:var(--fp-mono);font-weight:400;font-size:11px;color:var(--fp-text-3);padding-left:6px;margin-left:1px;box-shadow:inset 1px 0 0 var(--fp-line-2)}

/* ── Source highlight: a marker that sweeps under the exact words ─ */
.fp-mark{position:relative;z-index:0;padding:0 2px;margin:0 -2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fp-mark::before{content:'';position:absolute;inset:-1px 0;z-index:-1;border-radius:2px;background:var(--fp-hl);transform-origin:0 50%;transform:scaleX(var(--fp-mark,1))}
/* The same marker for words that may wrap: a band per line (the ::before above spans one box only). A gradient on the
   inline element, cloned onto every line box; --fp-mark (0 → 1) sweeps it left to right. Driver, from a tab:
   seq.tween(420, (p) => el.style.setProperty('--fp-mark', p.toFixed(3)), { ease: ease.out })  ·  reset: --fp-mark 0. */
.fp-mark-lines{padding:1px 2px;margin:-1px -2px;border-radius:2px;color:inherit;background:linear-gradient(var(--fp-hl),var(--fp-hl)) no-repeat 0 0/calc(var(--fp-mark,1)*100%) 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ── Status ────────────────────────────────────────────────────── */
.fp-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;line-height:1;color:var(--fp-text-2);white-space:nowrap}
.fp-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.fp-status[data-tone=wait]{color:var(--fp-wait)}
.fp-status[data-tone=done]{color:var(--fp-gain)}
.fp-status[data-tone=fi]{color:var(--fp-cobalt)}
.fp-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:4px;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap;background:var(--fp-paper-2);box-shadow:inset 0 0 0 1px var(--fp-line);color:var(--fp-text-2)}
.fp-pill[data-tone=wait]{background:var(--fp-wait-wash);box-shadow:inset 0 0 0 1px #ecd7b2;color:var(--fp-wait)}
.fp-pill[data-tone=done]{background:var(--fp-gain-wash);box-shadow:inset 0 0 0 1px #c8e2d3;color:var(--fp-gain)}
.fp-pill[data-tone=loss]{background:var(--fp-loss-wash);box-shadow:inset 0 0 0 1px #efc3b7;color:var(--fp-loss)}

/* ── A person's message to Fi (The Agent's brief): <p class="fa-who"><span class="fa-av">MC</span>Maya C.</p>
   <h3|p class="fa-title">…</h3>. No bubble. Zero specificity: a chapter's own rules (ask.css) win. ─ */
:where(.fp) .fa-who{display:flex;align-items:center;gap:7px;margin-bottom:4px;font-size:12px;font-weight:600;line-height:18px;color:var(--fp-text-2)}
:where(.fp) .fa-av{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e4dccb;color:var(--fp-text-2);font-size:8.5px;font-weight:700}
:where(.fp) .fa-title{font-size:var(--fa-tf,16px);line-height:1.412;font-weight:600;letter-spacing:-.014em;color:var(--fp-text);text-wrap:pretty}

/* ── Buttons ───────────────────────────────────────────────────── */
.fp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:4px;cursor:pointer;
  font-size:13px;font-weight:600;line-height:1;white-space:nowrap;background:var(--fp-paper);color:var(--fp-text);
  box-shadow:inset 0 0 0 1px var(--fp-line-2),0 1px 1px rgba(14,15,18,.05);
  transition:background var(--fp-t-micro),box-shadow var(--fp-t-micro),transform var(--fp-t-micro) var(--fp-ease-std)}
.fp-btn:hover{background:var(--fp-paper-2)}
.fp-btn:active,.fp-btn[data-pressed]{transform:translateY(1px) scale(.985)}
.fp-btn--primary{color:#fff;background:linear-gradient(180deg,#2c57e6,#1e47d1);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px #1a3db5,0 2px 6px -1px rgba(30,71,209,.45)}
.fp-btn--primary:hover{background:linear-gradient(180deg,#3360f0,#2149d8)}
.fp-btn--ink{color:#fff;background:#17191f;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px #0b0c0f}
.fp-btn--ink:hover{background:#22252d}

/* ── Pointer: an authored cursor for autoplay clicks (never the visitor's) ─ */
/* The one cursor (black arrow, white outline), drawn here once: every chapter's markup is <span class="fp-cursor …" aria-hidden="true"></span> */
.fp-cursor{position:absolute;left:0;top:0;width:18px;height:22px;z-index:20;pointer-events:none;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.fp-cursor:empty{display:block;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M2.2 1.6v16.1l4.2-3.9 2.6 6.2 2.8-1.2-2.6-6.1 5.8-.3Z' fill='%2315171c' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/18px 22px no-repeat}

@media (prefers-reduced-motion:reduce){
  html:not(.motion-ok) .fp-fi[data-state=working]::before{animation:none}
  html:not(.motion-ok) .fp-shimmer{animation:none;-webkit-text-fill-color:currentColor;background:none}
  html:not(.motion-ok) .fp-caret::after{animation:none}
}