/* The public website's look, from the You+Me+AI design system (the brand canvas, October 2026): its fonts, colour tokens
   in light and dark, and the front page and doors in (#intro in index.html). The other public pages (how-it-works.html
   and the rest) load this file for the fonts and tokens and carry their own layout rules. Everything is scoped to .site,
   so it never touches the app's own variables in app.css. */

/* ---------- fonts: self-hosted (no Google request), Latin only, under the SIL Open Font License (fonts/OFL.txt) ---------- */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-display:swap;font-weight:400 700;src:url(/fonts/familjen-grotesk.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-display:swap;font-weight:200 800;src:url(/fonts/atkinson-hyperlegible-next.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-display:swap;font-weight:200 900;src:url(/fonts/literata.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-display:swap;font-weight:200 900;src:url(/fonts/literata-italic.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- colour: ink and paper, one action colour, one per voice, red only for danger ---------- */
.site{
  color-scheme:light;
  --bg:#FBFAF7; --surface:#FFFEFD; --surface-sunk:#F5F3F0; --line:#DAD7D2; --field-line:#83868E;
  --text:#121826; --muted:#4F5564;
  --accent:#3B3E9C; --on-accent:#FFFEFD; --accent-tint:#E3E8FF;
  --person-a-tint:#B5E8F3; --person-b:#A6501A; --person-b-tint:#FFD4B4;
  --silas:#3F6640; --silas-tint:#D5EDD0;
  --danger:#B32322;
  --scrim:rgb(18 24 38 / 0.45);
  --focus-ring:0 0 0 3px var(--bg), 0 0 0 5px var(--accent);
  --char-sage:#3F6640; --char-sage-tint:#D5EDD0;
  --char-heather:#61517F; --char-heather-tint:#E8DFFC;
  --char-sand:#735426; --char-sand-tint:#F5E1C8;
  --char:var(--char-sage); --char-tint:var(--char-sage-tint);
  --shadow-1:0 1px 2px rgb(18 24 38 / 0.06);
  /* the app tile's colours stay the same in both themes */
  --logo-ground:#3B3E9C; --logo-you:#73CDDF; --logo-me:#F5B483; --logo-ai:#AAD5A5;

  /* type: Familjen Grotesk for headings, Atkinson Hyperlegible Next for reading, Literata for the characters' voice */
  --font-head:"Familjen Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:"Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-voice:"Literata", Georgia, "Times New Roman", serif;
  --text-s:clamp(0.875rem, 0.8505rem + 0.1087vw, 0.9375rem);
  --text-m:clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);
  --text-l:clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem);
  --text-h3:clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);
  --text-h2:clamp(1.5rem, 1.3043rem + 0.8696vw, 2rem);
  --text-h1:clamp(1.875rem, 1.5326rem + 1.5217vw, 2.75rem);
  --text-display:clamp(2.5rem, 1.913rem + 2.6087vw, 4rem);
  /* fixed steps, for things that must not flex: small print, the logo lockup */
  --text-xs:0.8125rem; --text-tile:0.6875rem; --text-wordmark:1.25rem;
  --leading-tight:1.05; --leading-head:1.2; --leading-body:1.55;
  --tracking-head:-0.02em; --measure:38rem;

  /* space (4px base), corners, motion */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem;
  --radius-m:14px; --radius-l:22px; --radius-bubble:20px; --radius-tail:6px; --radius-pill:999px;
  --ease-soft:cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-quick:180ms;
}
/* Always light, like the brand canvas: dark mode is off for now. The dark palette stays here, used only by data-theme="dark". */
  .site[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0E111B; --surface:#161A25; --surface-sunk:#1D212C; --line:#2D3340; --field-line:#6C717E;
    --text:#F4F1ED; --muted:#ABB1BE;
    --accent:#A4B1FE; --on-accent:#0E111B; --accent-tint:#262B4C;
    --person-a-tint:#003D49; --person-b:#F5B483; --person-b-tint:#572E16;
    --silas:#AAD5A5; --silas-tint:#263C27;
    --danger:#FF847D;
    --scrim:rgb(0 0 0 / 0.6);
    --char-sage:#AAD5A5; --char-sage-tint:#263C27;
    --char-heather:#CEBDF2; --char-heather-tint:#393049;
    --char-sand:#E4C191; --char-sand-tint:#43321A;
    --shadow-1:0 1px 2px rgb(0 0 0 / 0.3);
  }
/* each character's own colour: its emblem, name and bubble outline */
.site [data-character="silas"],.site[data-character="silas"]{--char:var(--char-sage);--char-tint:var(--char-sage-tint)}
.site [data-character="heather"]{--char:var(--char-heather);--char-tint:var(--char-heather-tint)}
.site [data-character="sand"]{--char:var(--char-sand);--char-tint:var(--char-sand-tint)}
@media (prefers-reduced-motion: reduce){ .site{--dur-quick:1ms} }

/* ---------- the public pages (body.site) ---------- */
body.site{margin:0;background:var(--bg)}
.site a:focus-visible,.site button:focus-visible,.site summary:focus-visible,.site input:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ---------- the front page inside the app (index.html #intro): the whole width, scrolling on its own ---------- */
body.onIntro .app{max-width:none;box-shadow:none;background:var(--bg)}
#intro{flex:1;min-height:0;overflow-y:auto;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--text-m);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
#intro a{color:var(--accent)}
#intro p{margin:0}
#intro .wrap{width:100%;max-width:1120px;margin:0 auto;padding-inline:clamp(16px,5vw,48px);box-sizing:border-box}
#intro .h{font-family:var(--font-head);font-weight:650;letter-spacing:var(--tracking-head);line-height:var(--leading-head);margin:0;text-wrap:balance}
#intro .lead{font-size:var(--text-l);line-height:var(--leading-body);color:var(--muted);max-width:var(--measure);text-wrap:pretty}
#intro .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--space-5)}
#intro .card{background:var(--surface);border-radius:var(--radius-l);box-shadow:inset 0 0 0 1px var(--line);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
#intro .card h3{font-family:var(--font-head);font-weight:650;font-size:var(--text-h3);letter-spacing:-0.01em;line-height:1.25;margin:0}
#intro .btn{min-height:48px;padding:0 24px;border:0;border-radius:999px;font:inherit;font-size:var(--text-m);font-weight:650;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;white-space:nowrap;box-sizing:border-box}
#intro .pri,#intro .btn.primary{background:var(--accent);color:var(--on-accent)}
#intro .ghost,#intro .btn.secondary{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--field-line)}
#intro .btn.quiet{background:transparent;color:var(--accent);padding:0 8px}
#intro .inv{background:var(--on-accent);color:var(--accent)}
#intro .sm{min-height:44px;padding:0 18px;font-size:var(--text-s)}
#intro .tl{color:var(--accent);font-weight:650}
#intro .who{font-size:var(--text-xs);font-weight:700;margin:6px 0 1px}
#intro .bub{max-width:84%;padding:9px 13px 7px;border-radius:var(--radius-bubble);font-size:var(--text-m);line-height:1.4;box-shadow:var(--shadow-1);color:var(--text)}
#intro .b{align-self:flex-start;background:var(--person-b-tint);border-top-left-radius:var(--radius-tail)}
#intro .a{align-self:flex-end;background:var(--person-a-tint);border-top-right-radius:var(--radius-tail)}
#intro .s{background:var(--surface);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--char) 45%, transparent);border-top-left-radius:var(--radius-tail);font-family:var(--font-voice);line-height:1.45;max-width:100%}
#intro .s.plain{box-shadow:inset 0 0 0 1px var(--field-line)}
#intro .em{border-radius:50%;background:var(--char-tint);color:var(--char);box-shadow:inset 0 0 0 1.5px var(--char);display:flex;align-items:center;justify-content:center;font-family:var(--font-voice);font-weight:600;flex:none;line-height:1}
#intro .em.helper{background:var(--surface-sunk);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--field-line)}
#intro .pill{flex:none;min-width:0;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--text-m)}
#intro .i{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#intro .sec{padding-block:clamp(56px,8vw,96px)}
#intro .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-bottom:14px}
#intro .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none}
#intro .tile{width:40px;height:40px;border-radius:9px;background:var(--logo-ground);display:flex;align-items:center;justify-content:center;flex:none}
#intro .tile span{font-family:var(--font-head);font-weight:700;font-size:var(--text-tile);line-height:.86;letter-spacing:-.03em;display:flex;flex-direction:column}
#intro .wmt{font-family:var(--font-head);font-weight:600;font-size:var(--text-wordmark);letter-spacing:-.025em}
#intro .wmt i{font-style:normal;font-weight:400;color:var(--muted)}
#intro .links{display:flex;align-items:center;gap:2px}
#intro .links a{color:var(--muted);text-decoration:none;font-weight:600;min-height:44px;display:flex;align-items:center;padding:0 12px;border-radius:999px}
#intro .links a:hover{color:var(--text);background:var(--surface-sunk)}
#intro .acts{display:flex;align-items:center;gap:6px}
#intro .signin{color:var(--accent);font-weight:650;text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 10px}
#intro .tag{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;font-size:var(--text-xs);font-weight:700;width:max-content}
#intro .tag.live{background:var(--silas-tint);color:var(--silas)}
#intro .tag.soon{background:var(--accent-tint);color:var(--accent)}
#intro .road{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
#intro .road li{display:flex;gap:10px;align-items:flex-start}
#intro .road li .i{width:20px;height:20px;margin-top:2px}
#intro .fcol{display:flex;flex-direction:column;gap:2px;min-width:140px}
#intro .fcol a{color:var(--muted);text-decoration:none;min-height:40px;display:flex;align-items:center}
#intro .fcol a:hover{color:var(--accent)}
#intro .flabel{font-size:var(--text-xs);font-weight:700;letter-spacing:0.02em;margin-bottom:4px}
/* the phone menu: under 760 px the links fold into a "Menu" button, a hidden checkbox and its label (no script) */
.site .nav{position:relative}
.site .navToggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.site .menuBtn{display:none;align-items:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);background:var(--surface-sunk);color:var(--text);font-weight:650;cursor:pointer;user-select:none}
.site .navToggle:checked + .menuBtn{background:var(--accent-tint);color:var(--accent)}
.site .navToggle:focus-visible + .menuBtn{box-shadow:var(--focus-ring)}
@media (max-width:760px){
  #intro .nav,.site .nav{gap:var(--space-2)}
  .site .nav .brand{margin-right:auto}
  .site .menuBtn{display:inline-flex}
  #intro .nav .links,.site .nav .links{display:none;position:absolute;top:100%;left:clamp(16px,5vw,48px);right:clamp(16px,5vw,48px);z-index:20;flex-direction:column;align-items:stretch;gap:2px;padding:var(--space-2);background:var(--surface);border-radius:var(--radius-m);box-shadow:inset 0 0 0 1px var(--line), var(--shadow-1)}
  #intro .navToggle:checked ~ .links,.site .navToggle:checked ~ .links{display:flex}
}
@media (max-width:440px){
  #intro .wmt{display:none}
  #intro .nav,.site .nav{gap:var(--space-2)}
  #intro .signin,.site .signin{padding:0 6px;white-space:nowrap}
  #intro .sm,.site .sm{padding:0 14px}
}

/* the hero's "Grab your name" form (#fGrab) */
#intro .grabForm{display:flex;flex-direction:column;gap:var(--space-2)}
#intro .grabForm > label{font-weight:700}
#intro .grab{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:stretch;max-width:540px}
#intro .grabf{flex:1 1 260px;min-width:0;min-height:52px;display:flex;align-items:center;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--field-line);padding:0 6px 0 18px;font-size:var(--text-m);box-sizing:border-box;cursor:text}
#intro .grabf:focus-within{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-tint)}
#intro .grabf span{color:var(--muted);white-space:nowrap}
#intro .grabf input{flex:1;width:0;min-width:60px;border:0;background:transparent;font:inherit;color:var(--text);outline:none;padding:0;box-shadow:none}
#intro .grabf input::placeholder{color:var(--muted);opacity:.8}
#intro .grab .btn{min-height:52px}
#intro .grabForm .err{color:var(--danger);font-size:var(--text-s)}
#intro .grabForm .err:empty{display:none}
#intro .counter{font-size:var(--text-s);font-weight:650;color:var(--muted)}

/* ---------- the doors in: sign in, say hello, an old chat's link, a new-password link, Michael's sign-in ---------- */
#intro .doors{width:100%;max-width:440px;margin:0 auto;padding:clamp(24px,6vw,56px) clamp(16px,5vw,24px) var(--space-7);box-sizing:border-box}
#intro .boxes{display:flex;flex-direction:column;gap:16px}
#intro .boxes h2{font-family:var(--font-head);font-weight:650;font-size:var(--text-h2);line-height:1.15;letter-spacing:-0.02em;margin:0 0 4px}
#intro .boxes label{display:flex;flex-direction:column;gap:6px;font-weight:700}
#intro .boxes input{width:100%;min-height:52px;box-sizing:border-box;border-radius:var(--radius-m);border:0;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--field-line);padding:0 16px;font:inherit;font-size:var(--text-m);font-weight:400;color:var(--text);outline:none}
#intro .boxes input:focus{box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-tint)}
#intro .boxes .hint{font-size:var(--text-s);line-height:1.45;color:var(--muted);margin:-8px 0 0}
#intro .boxes p.lead{font-size:var(--text-l);color:var(--muted);margin:-4px 0 0}
#intro .boxes .err{color:var(--danger);font-size:var(--text-s);margin:0}
#intro .boxes .err:empty{display:none}
#intro .boxes .alt{margin:0;font-size:var(--text-s);line-height:1.45;color:var(--muted)}
#intro .boxes .alt a{color:var(--accent);font-weight:650}
#intro .boxes > .btn{width:100%;min-height:52px;margin-top:4px}
#intro #noteActs .btn{width:100%;min-height:52px}
#intro .boxes label.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#intro .boxes .ts{min-height:65px}
#intro .linkBox{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 6px 0 16px;border-radius:var(--radius-m);background:var(--surface-sunk);font-weight:650;word-break:break-all}
#intro .linkBox span{flex:1;min-width:0}
/* the password field with its show/hide button (app.js pwField) */
#intro .pw{display:flex;flex-direction:column;gap:6px}
#intro .pwLabel{font-weight:700}
#intro .pwRow{display:flex;gap:8px;align-items:stretch}
#intro .boxes .pwRow input.pwInput{flex:1;min-width:0}
#intro .pwToggle{flex:0 0 auto;min-width:72px;min-height:52px;padding:0 14px;border:0;border-radius:var(--radius-m);background:var(--surface-sunk);color:var(--accent);font:inherit;font-size:var(--text-s);font-weight:650;cursor:pointer}
#intro .pwToggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the footer, on the front page and under the doors */
#intro .siteFoot{display:flex;flex-direction:column;gap:var(--space-6);padding-top:var(--space-7);padding-bottom:calc(var(--space-7) + env(safe-area-inset-bottom,0px));margin-top:auto}