/* =====================================================
   Eloniq base · shared by index.html (landing) and reportai.html (the Eloniq app)
   Tokens, reset, buttons and the demo's Ask button live ONLY here,
   so the landing page and the app always look the same.
   When you change this file, bump ?v= in both pages.
   ===================================================== */
:root{
  /* type roles: every size on the landing and in the app is one of these (display headlines use their own clamp) */
  --t-meta:12.5px; --t-ui:13.5px; --t-body:15.5px; --t-lead:17px; --t-title:19px; --t-sub:22px;
  /* drawn icons: the text fonts carry no arrows or ticks, so these replace glyphs that fell back to system fonts */
  --i-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E"); --i-return:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3v4.5a2 2 0 0 1-2 2H3M6 6.5l-3 3 3 3'/%3E%3C/svg%3E"); --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  --bg:#0A0A0B; --bg2:#0F0F11; --raised:#151517; --raised2:#1C1C1F; --paper:#FFFFFF;
  --ink:#EDEDEE; --ink2:#A0A0A6; --muted:#8A8A90; --faint:#5E5E64 /* lines and hover edges only, never text (3:1) */; --ghost:#2E2E33;
  --line:#222225; --line2:#19191C; --line-hi:#3A3A40; --rule:#4A4A50;
  --sig:#5263FF; --sig-t:#7A86FF; --sig-soft:rgba(82,99,255,.14); --pos:#3DD68C;
  --sans:"Host Grotesk",system-ui,sans-serif; --num:"Host Grotesk",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --ease:cubic-bezier(.2,.7,.2,1);
  --w:1240px;
  /* legacy names used by demo.css */
  --card:var(--raised); --surface:var(--raised2); --accent:var(--sig); --accent-d:#3F4FEA; --soft:var(--sig-soft);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
/* figures line up in columns; prose keeps normal spacing (tabular on the whole body widened punctuation) */
table{font-variant-numeric:tabular-nums}
p,li{text-wrap:pretty}
::selection{background:var(--sig);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:var(--t-ui);font-weight:500;transform:translateY(-160%);transition:transform .15s var(--ease)}
.skip:focus-visible{transform:none;outline-offset:3px}
main:focus{outline:0}

/* buttons: white at rest, signal on hover */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;background:var(--ink);color:var(--bg);font-size:var(--t-ui);font-weight:500;transition:background .18s,color .18s,box-shadow .18s}
.btn:hover{background:var(--sig);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn.ghost:hover{background:var(--raised);box-shadow:inset 0 0 0 1px var(--sig)}
.btn i{font-size:0;width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat;transition:transform .3s var(--ease)}
/* one icon helper for spans that held a glyph */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-.14em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.btn:hover i{transform:translateX(3px)}

/* the Ask button in the demo window (same look as the landing's .ask .go) */
.dm-go:focus{outline:0}
.dm-go:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.dm-go{margin-left:auto;width:32px;height:32px;border-radius:6px;background:var(--raised2);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--muted);transition:background .18s,color .18s,box-shadow .18s;flex:none}
.dm-go{font-size:0;display:grid;place-items:center}
.dm-go::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-arrow) center/contain no-repeat;mask:var(--i-arrow) center/contain no-repeat}
.dm-go.on{background:var(--ink);color:var(--bg);box-shadow:none}
.dm-go:hover{background:var(--sig);color:#fff;box-shadow:none}
/* while a live answer loads the button stops it: a filled square instead of the return arrow */
.dm-go.stop{background:var(--ink);color:var(--bg);box-shadow:none}
.dm-go.stop:hover{background:var(--sig);color:#fff}
.dm-go.stop::before{width:10px;height:10px;border-radius:2px;-webkit-mask:none;mask:none}

/* spinners (landing status line, demo steps) */
@keyframes spin{to{transform:rotate(360deg)}}

/* shared by the landing and the app */
/* reduced motion: nothing slides, grows or pulses; state changes (hover, answers, bars, panels) still show through a short fade, and the loading spinners keeps turning slowly so waiting is visible */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.15s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .status .sp,.dm-steps li:not(.fin) .ic{animation:spin 1.6s linear infinite!important}
  .rv,.cmp .dy,.cmp .m{transform:none!important}
}