/* HalusAI design tokens and base components: one source for the public site and the app.
   A near-black, monochrome look: colour only where it means something (good, warn, bad).
   Solid white primary buttons, hairline borders, flat panels. Nothing loads from outside
   (CSP 'self'); the fonts are served by the site. */
/* ?v=2: the cut with cv08 (the serif capital I, below). layout.html preloads this same URL */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/Inter.woff2?v=2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 600;font-display:swap;src:url(/static/fonts/JetBrainsMono.woff2) format("woff2")}
/* Arial sized to Inter's metrics (Inter 4: ascender 1984, descender -494, 2048 units): the text keeps its
   room while Inter.woff2 loads, so the swap barely moves the page (layout shift) */
@font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0%;size-adjust:107.06%}
/* Dark for everyone unless the visitor picks Light or Auto: theme.js sets data-theme="light"|"dark"
   on <html> before the first paint. Without the script the light variant follows the device
   (prefers-color-scheme), so each light rule here and in site.css comes twice, once for the device
   and once for data-theme="light". A .dark-island (the landing hero) keeps the dark tokens in both themes. */
:root,.dark-island{
  --bg:#08080a; --bg2:#0c0c0f; --panel:#111114; --panel2:#18181c; --line:#1f1f24; --line2:#2c2c32;
  --ink:#fafafa; --dim:#a1a1aa; --faint:#8e8e98;
  --accent:#fafafa; --accent2:#d4d4d8; --violet:#a1a1aa; --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --glow:0 0 0 1px #2c2c32;                         /* a hairline ring, no glow */
  --sheen:#fafafa; --card-shadow:0 0 #0000;        /* cards cast no shadow on dark */
  --on-accent:#09090b;                              /* labels on the solid --accent fill (white buttons): near-black */
  --edge:#2c2c32;                                   /* fields' edges and empty meter tracks */
  --sans:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --radius:12px;
  color-scheme:dark;
}
.dark-island{color:var(--ink)}
/* light: every text token at least 4.5:1 on --bg, --panel and --panel2 (tests/test_theme.py) */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#ffffff; --bg2:#fafafa; --panel:#ffffff; --panel2:#f4f4f5; --line:#e4e4e7; --line2:#d4d4d8;
    --ink:#09090b; --dim:#52525b; --faint:#62626b;
    --accent:#09090b; --accent2:#3f3f46; --violet:#52525b; --good:#15803d; --warn:#a34a06; --bad:#c81e1e;
    --glow:0 0 0 1px #d4d4d8;
    --sheen:#09090b; --card-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -16px rgba(0,0,0,.12);
    --on-accent:#fafafa; --edge:#d4d4d8;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
    --bg:#ffffff; --bg2:#fafafa; --panel:#ffffff; --panel2:#f4f4f5; --line:#e4e4e7; --line2:#d4d4d8;
    --ink:#09090b; --dim:#52525b; --faint:#62626b;
    --accent:#09090b; --accent2:#3f3f46; --violet:#52525b; --good:#15803d; --warn:#a34a06; --bad:#c81e1e;
    --glow:0 0 0 1px #d4d4d8;
    --sheen:#09090b; --card-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -16px rgba(0,0,0,.12);
    --on-accent:#fafafa; --edge:#d4d4d8;
    color-scheme:light;
}
/* a switch by the visitor (theme.js): every colour at once */
.theme-swap,.theme-swap *,.theme-swap *::before,.theme-swap *::after{transition:none!important}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:transparent;min-height:100vh;font:15.5px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/* one faint white spotlight at the top of the page, still; none on light */
body::before{content:"";position:absolute;left:0;right:0;top:0;height:760px;z-index:-2;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%,rgba(255,255,255,.05),transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::before{display:none}}
:root[data-theme="light"] body::before{display:none}
::selection{background:color-mix(in srgb,var(--ink) 22%,transparent)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Inter's cv08, the capital I with serifs, on the whole site: HalusAI and AI never read as "Halusal"
   (the brand kit, marketing/brand/logo/README.md). Set on every element, not only the body: the font
   shorthand (font:500 13px var(--sans) on chips, pills and tabs) resets font-feature-settings to
   normal, and form fields do not inherit it. Plain Inter, if a part ever needs it, is "cv08" 0 with
   !important, never normal. JetBrains Mono has no cv08, so mono text is unchanged. */
*,::before,::after{font-feature-settings:"cv08" 1!important}

[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* links inside running text: the text's ink, told apart by a hairline underline (not by colour alone) */
:where(p,li,dd,td,figcaption,.note,.lede) a:where(:not(.btn,.chip,.brand)){text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
:where(p,li,dd,td,figcaption,.note,.lede) a:where(:not(.btn,.chip,.brand)):hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
button{font:inherit}
img{max-width:100%}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ── brand ─────────────────────────────────────────────── */
/* The wordmark ("Quiet Capitals", marketing/brand/logo/): layout.html's <symbol id="hai-wordmark">, drawn
   in the text colour, so it is paper on dark and ink on light. 22 px tall is 94 px wide (975:228), its
   petite capitals about 13 px: well over the 56 px minimum. Never stretched, recoloured or shadowed. */
.brand{display:inline-flex;align-items:center;color:var(--ink)}
.brand:hover{text-decoration:none}
.wordmark{display:block;height:22px;width:94px;fill:currentColor;flex:none}
/* the horizontal lockup (H tile, hairline, wordmark) where the symbol is introduced: the partner pages */
.lockup{display:block;height:28px;width:143px;fill:currentColor;flex:none}

/* ── cards, pills, chips ──────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;min-width:0;box-shadow:var(--card-shadow);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.card.lift:hover{border-color:var(--line2)}
.pill{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--sans);padding:5px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line2);color:var(--dim)}
.pill b{color:var(--ink);font-weight:600}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel);color:var(--dim);font:500 13px var(--sans);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.chip:hover{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 28%,var(--line2))}
.chip[aria-pressed="true"],.chip.on{color:var(--on-accent);border-color:var(--accent);background:var(--accent)}
.badge{display:inline-block;font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent)}
.kicker{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid var(--line2);
  background:var(--panel);font:500 12.5px/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}

/* ── buttons ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:8px;border:1px solid transparent;
  font:600 14.5px var(--sans);letter-spacing:-.005em;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{color:var(--on-accent);background:var(--accent);border-color:var(--accent);box-shadow:none}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--bg));border-color:color-mix(in srgb,var(--accent) 86%,var(--bg))}
.btn.ghost{color:var(--ink);background:transparent;border-color:var(--line2)}
.btn.ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);border-color:color-mix(in srgb,var(--ink) 30%,var(--line2))}
.btn.small{padding:7px 14px;font-size:13px}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ── the theme toggle (theme.js): Auto, Light, Dark; the icon of the current mode, from the first
   paint (data-theme-mode on <html>). Without the script it does nothing, so it is not shown. ── */
.themebtn{display:none;place-items:center;width:38px;height:38px;padding:0;flex:none;border-radius:8px;border:1px solid transparent;
  background:transparent;color:var(--dim);cursor:pointer;transition:color .2s,border-color .2s,background .2s}
:root[data-theme-mode] .themebtn{display:inline-grid}
.themebtn:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent);border-color:var(--line2)}
.themebtn:focus-visible{border-radius:8px}               /* the ring follows the button's corners */
.themebtn .ic{grid-area:1/1;width:18px;height:18px}
.themebtn .ti-light,.themebtn .ti-dark,
:root[data-theme-mode="light"] .themebtn .ti-auto,:root[data-theme-mode="dark"] .themebtn .ti-auto{display:none}
:root[data-theme-mode="light"] .themebtn .ti-light,:root[data-theme-mode="dark"] .themebtn .ti-dark{display:block}
/* fields: a solid ring on focus in both themes (--ink: white on dark, near-black on light) */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}