/* =============================================================================
   mera.bot shared theme
   Used by every page in html/. Load it before a page's own <style>:
     <link rel="stylesheet" href="assets/mera.css">
     <script src="assets/mera.js"></script>
   Holds: fonts, colour tokens (dark + light), base, logo, buttons, icon buttons,
   and the crew "mochi" bots. Page-specific layout stays in each page.
   ========================================================================== */

/* ---------- Fonts: Geist + Geist Mono (SIL OFL), self-hosted ---------- */
@font-face{font-family:"Geist";src:url("fonts/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ---------- Tokens ----------
   Every colour is light-dark(light, dark). The active theme is set on <html data-theme>
   by mera.js (default dark, the brand's home). */
:root{
  color-scheme:dark;
  /* grounds */
  --ink:light-dark(#F3F3F0,#0F100D);        /* page ground */
  --tile:light-dark(#FCFCFA,#1C1D18);       /* cards, panels */
  --tile-2:light-dark(#ECECE7,#24251F);     /* raised / hover */
  --tile-warm:light-dark(#F7EAE1,#2A1A12);  /* warm card */
  --tile-dark:light-dark(#E7E7E1,#141510);  /* deep card */
  --night:light-dark(#E4E4EE,#26271F);
  --field:light-dark(#FFFFFF,#1A1B17);      /* inputs */
  --field-line:light-dark(#CFCFC7,#3A3B35);
  --line:light-dark(#DCDCD5,#2A2B25);       /* hairlines, borders */
  /* text */
  --bone:light-dark(#121310,#EEEDE6);       /* primary text */
  --soft:light-dark(#33342E,#C9C8C0);       /* body copy */
  --muted:light-dark(#5E5F57,#A3A39A);      /* secondary */
  --dim:light-dark(#7A7B72,#6E6F66);        /* tertiary */
  --faint:light-dark(#6E6F66,#8C8C83);      /* placeholders, legal */
  /* the single accent */
  --signal:#FF6B2C;                          /* fills: buttons, lead bot */
  --signal-hi:#FF8A55;                       /* fill hover */
  --signal-ink:light-dark(#B8400B,#FF8A55);  /* orange used as small text (AA on each ground) */
  --signal-display:light-dark(#E0530F,#FF6B2C); /* orange used as large display text */
  --on-signal:#160A04;                       /* text on orange */
  /* status */
  --warn:light-dark(#9A5B00,#FFC163);
  --bad:light-dark(#B42318,#FF9B70);
  --ok:light-dark(#2F6B2A,#9AD48C);
  /* type, motion, shape */
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.16,1,.3,1);
  --r-pill:999px; --r-tile:24px; --r-sm:14px;
  --shadow:0 1px 0 light-dark(#fff,#ffffff0d) inset, 0 18px 40px -24px light-dark(#3d2a1a40,#00000099);
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:color-mix(in oklab,var(--signal) 35%,transparent)}
[hidden]{display:none!important}

/* ---------- Logo: the live mark (Hello's body, joined-arch "m" eyes) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--bone);font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1}
.brand:hover{color:var(--bone)}
.brand b{font:inherit}
.mark{width:32px;height:32px;display:block;flex:none}
.mark .mk-eyes{transform-box:fill-box;transform-origin:50% 60%}
.mark .mk-look{transition:transform .25s var(--out)}
@media (prefers-reduced-motion: no-preference){
  .mark .mk-eyes{animation:mk-blink 5.2s infinite}
  .brand:hover .mark .mk-eyes{animation:mk-blink .9s 1}
}
@keyframes mk-blink{0%,88%,100%{transform:scaleY(1)}90%{transform:scaleY(.12)}92%{transform:scaleY(1)}95%{transform:scaleY(1)}97%{transform:scaleY(.12)}99%{transform:scaleY(1)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r-pill);border:0;
  background:var(--signal);color:var(--on-signal);font:600 15px var(--sans);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.btn:hover{background:var(--signal-hi);color:var(--on-signal)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.lg{min-height:54px;padding:0 26px;font-size:16px}
.btn.ghost{background:transparent;color:var(--soft);font-weight:520;box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--tile-2);color:var(--bone)}
.btn .ico{width:20px;height:20px;flex:none}
.iconbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;color:var(--soft);
  transition:background .2s,color .2s,transform .15s}
.iconbtn:hover{background:var(--tile);color:var(--bone)}
.iconbtn:active{transform:scale(.96)}
.iconbtn svg{width:20px;height:20px}

/* ---------- Crew bots ("mochi") ----------
   Body colour = personality temperature, from the TONE scale in mera.js.
   The six crew values below are precomputed from that scale. */
.m{--c:oklch(var(--l) var(--ch) var(--h));--hi:oklch(calc(var(--l) + .13) calc(var(--ch) * .45) var(--h));--lo:oklch(calc(var(--l) - .1) calc(var(--ch) * 1.08) calc(var(--h) - 12));
  border-radius:50% 50% 46% 46% / 56% 56% 44% 44%!important;border:0!important;color:oklch(.24 .04 var(--h));
  background:
    radial-gradient(10% 6.5% at 25% 71%, oklch(.72 .17 8 / .6), transparent 100%),
    radial-gradient(10% 6.5% at 75% 71%, oklch(.72 .17 8 / .6), transparent 100%),
    radial-gradient(46% 34% at 36% 22%, color-mix(in oklab,#fff 68%,var(--hi)), transparent 100%),
    linear-gradient(180deg,var(--hi),var(--c) 52%,var(--lo))!important;
  box-shadow:inset 0 -.18em .32em color-mix(in oklab,var(--lo) 70%,transparent), 0 .5em .8em -.5em color-mix(in oklab,var(--lo) 80%,transparent)}
.m-hello{--h:401.7;--l:.740;--ch:.165}  /* warm: soft signal orange, the lead */
.m-peek{--h:256.2;--l:.800;--ch:.114}   /* cool: sky */
.m-nudge{--h:279.7;--l:.800;--ch:.119}  /* periwinkle */
.m-snooze{--h:275;--l:.800;--ch:.118}   /* dusk lilac */
.m-spark{--h:391.7;--l:.728;--ch:.168}  /* warmest: coral */
.m-hmm{--h:249.1;--l:.800;--ch:.113}    /* coolest: blue */
/* drawn eyes (mera.js drawFace): the two characters stay the face, drawn soft */
.m .face{display:inline-flex;gap:.04em;margin-top:.24em;letter-spacing:0;font-size:1.32em}
.e{position:relative;display:inline-block;width:.6em;height:1em;font-style:normal;text-align:center;line-height:1;font-weight:800}
.e::before,.e::after{content:"";position:absolute;left:50%;top:50%}
.e.g-arch::before{width:.44em;height:.26em;translate:-50% -60%;border:.09em solid currentColor;border-bottom:0;border-radius:.5em .5em 0 0}
.e.g-bead::before{width:.34em;height:.4em;translate:-50% -50%;border-radius:50%;background:currentColor}
.e.g-bead::after{width:.11em;height:.11em;translate:.02em -.17em;border-radius:50%;background:#fff}
.e.g-dot::before{width:.24em;height:.27em;translate:-50% -30%;border-radius:50%;background:currentColor}
.e.g-dot::after{width:.08em;height:.08em;translate:.01em -.06em;border-radius:50%;background:#fff}
.e.g-dash::before{width:.42em;height:.09em;translate:-50% -50%;border-radius:.1em;background:currentColor}
.e.g-txt{font-size:.92em;font-weight:800;line-height:1.05}
.e.g-txt::before,.e.g-txt::after{display:none}