/* HONU — shared theme tokens.
   Every page links this first, then writes its own layout in a <style> block.
   Change a token here and the whole site follows. Keep the ring palette. */

:root{
  /* surface */
  --bg:#04121a;
  --bg2:#071c26;
  --bg3:#08222c;
  --line:#0f3a45;
  --line-lt:#17515e;

  /* ink */
  --ink:#d8f3f0;
  --dim:#6f9aa0;
  --dim2:#7fa8ad;

  /* brand */
  --teal:#0F766E;
  --teal-lt:#14B8A6;

  /* status accents — the ring set, do not change */
  --idle:#14B8A6;
  --thinking:#38BDF8;
  --working:#F59E0B;
  --attention:#EF4444;
  --speaking:#A78BFA;

  /* current accent, pages set this */
  --accent:var(--idle);

  /* The orb's own palette, resolved from the state colours above. theme.js looks for
     --orb-<state> first and falls back to its own literals — and until these existed the
     lookup always missed, so the 3/6/9 digits stayed the default teal no matter what
     skin or theme was applied around them. Because custom properties resolve against the
     element that carries them, redefining --idle on a skin recolours the digits too.
     The values are the same colours theme.js already used, so nothing moves by default. */
  --orb-idle:var(--idle);
  --orb-listening:var(--thinking);
  --orb-thinking:var(--thinking);
  --orb-working:var(--working);
  --orb-attention:var(--attention);
  --orb-speaking:var(--speaking);

  /* spacing + shape */
  --gap:14px;
  --pad:20px;
  --radius:12px;
  --radius-sm:8px;
  --rail:248px;

  /* type */
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;

  /* glow strength: the customizer scales this */
  --glow:1;
}

/* ---- optional skins, toggled by the customizer via <html data-skin> ---- */
html[data-skin="abyss"]{ --bg:#02080d; --bg2:#04121a; --bg3:#061a24; --line:#0a2b34; }
html[data-skin="deep"] { --bg:#031820; --bg2:#062733; --bg3:#08303d; --line:#14505c; }
html[data-skin="ash"]  { --bg:#0a0e12; --bg2:#121820; --bg3:#171f28; --line:#243040; }
html[data-skin="rose"] { --bg:#140a12; --bg2:#1f0f1c; --bg3:#2a1426; --line:#4a2440; }

/* ---- density, toggled by the customizer ---- */
html[data-density="compact"]{ --gap:8px; --pad:12px; --rail:200px; }

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:radial-gradient(1100px 700px at 50% 6%, var(--bg3) 0%, var(--bg) 62%) fixed, var(--bg);
  color:var(--ink);
  font:15px/1.5 var(--sans);
}

a{color:var(--teal-lt);text-decoration:none}
a:hover{text-decoration:underline}

.mono{font-family:var(--mono);font-size:12.5px}

/* the shared chrome every page wears */
.top{
  display:flex;align-items:center;gap:var(--gap);padding:14px var(--pad);
  border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mark{font-size:19px;letter-spacing:.42em;font-weight:600;color:var(--teal-lt)}
.sub{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.spacer{flex:1}
.chip{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--dim);
}
.chip.on{border-color:var(--teal-lt);color:var(--teal-lt)}
.chip:hover{border-color:var(--teal-lt);color:var(--teal-lt)}

/* the status orb: a sphere of the digits 3, 6 and 9, drawn on a canvas.
   The engine in theme.js paints it and recolors it per state; the CSS only
   places it. Same palette the ring used — do not change the state colors. */
.face{position:relative;width:min(300px,52vh);aspect-ratio:1}
canvas.orb{display:block}
.face canvas.orb{position:absolute;inset:0;width:100%;height:100%}
.face.s-thinking{--accent:var(--thinking)}
.face.s-working{--accent:var(--working)}
.face.s-attention{--accent:var(--attention)}
.face.s-speaking{--accent:var(--speaking)}
.face.s-idle{--accent:var(--idle)}

/* the JARVIS/Ultron holo layer: a soft scan over the whole page */
.holo{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:calc(.05 * var(--glow));
  background:repeating-linear-gradient(0deg, transparent 0 2px, var(--teal-lt) 2px 3px);
  mix-blend-mode:screen;
}
html[data-holo="off"] .holo{display:none}

/* ---------------- shell: rail + main ---------------- */
body{display:flex;flex-direction:column}
.shell{flex:1 1 auto;display:flex;min-height:0}

.rail{
  flex:0 0 var(--rail);width:var(--rail);display:flex;flex-direction:column;
  gap:2px;padding:var(--pad) 12px;border-right:1px solid var(--line);min-height:0;
}
.rail-link{
  padding:9px 12px;border-radius:var(--radius-sm);color:var(--ink);font-size:14px;
  border:1px solid transparent;text-decoration:none;
}
.rail-link:hover{border-color:var(--line);background:var(--bg2);text-decoration:none}
.rail-link.cur{border-color:var(--teal-lt);background:var(--bg2);color:var(--teal-lt)}
.rail-foot{margin-top:auto}
.rail-note{color:var(--dim2);font-size:11.5px;line-height:1.5}

main{flex:1 1 auto;min-width:0;min-height:0;overflow:auto;padding:var(--pad)}
.wrap{max-width:1040px;margin:0 auto}

/* ---------------- the ring core text ---------------- */
.core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;
}
.core-word{
  font-family:var(--mono);font-size:13px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);transition:color .4s ease;
}
.core-sub{color:var(--dim);font-size:12px}

/* ---------------- echoes ---------------- */
.echoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap)}
.echo{
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  background:var(--bg2);cursor:pointer;user-select:none;
}
.echo:hover{border-color:var(--line-lt)}
.echo.on{border-color:currentColor;background:var(--bg3)}
.echo-name{font-size:15px;color:var(--ink)}
.echo-note{color:var(--dim2);font-size:11.5px;margin-top:3px}
.echo[data-echo="honu"]{color:var(--idle)}
.echo[data-echo="jvon"]{color:var(--speaking)}
.echo[data-echo="nora"]{color:var(--thinking)}

/* ---------------- threads ---------------- */
.thread{display:flex;flex-direction:column;gap:10px;margin-top:var(--gap)}
[hidden]{display:none!important}
.msg{max-width:min(680px,86%);border-radius:var(--radius);padding:10px 14px;border:1px solid var(--line);background:var(--bg2)}
.msg.u{margin-left:auto;background:var(--bg3);border-color:var(--line-lt)}
.msg.e{border-left:3px solid var(--accent)}
.msg.withheld{border-left-style:dashed;color:var(--dim);font-style:italic}
.msg-who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
[data-thread="honu"] .msg.e{border-left-color:var(--idle)}
[data-thread="jvon"] .msg.e{border-left-color:var(--speaking)}
[data-thread="nora"] .msg.e{border-left-color:var(--thinking)}
.thread-end{
  align-self:center;color:var(--dim2);font-family:var(--mono);font-size:11.5px;
  border:1px dashed var(--line);border-radius:999px;padding:5px 14px;
}

/* ---------------- compaction ---------------- */
.compact{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 2px;margin:2px 0;color:var(--dim);font:inherit;font-size:12.5px;cursor:pointer;
}
.compact:hover{color:var(--teal-lt)}
.compact-rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-lt),transparent)}
.compact-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;white-space:nowrap}
.note{
  border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius-sm);
  background:var(--bg2);padding:12px 16px;color:var(--dim);font-size:13.5px;margin-top:10px;
}
.note b{color:var(--ink);font-weight:600}

/* ---------------- generic page bits ---------------- */
h1{font-size:27px;font-weight:600;letter-spacing:.01em;margin:0 0 8px}
h2{font-size:15px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-lt);margin:30px 0 10px}
p{margin:0 0 12px;max-width:74ch}
.lede{color:var(--dim);font-size:15.5px;max-width:70ch}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:var(--pad);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.card:hover{border-color:var(--line-lt);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 20px rgba(20,184,166,.06)}
.echo{transition:border-color .25s ease,transform .25s ease}
.echo:hover{transform:translateY(-2px)}
.row{display:flex;gap:var(--gap);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--gap)}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim2);font-size:12.5px;max-width:74ch}

/* focus that shows up for keyboard users without glaring at everyone else */
a:focus-visible,button:focus-visible,.rail-link:focus-visible,.echo:focus-visible{
  outline:2px solid var(--teal-lt);outline-offset:2px}

/* ---------------- the entrance: sections rise as they come into view.
   No JS library, one observer in theme.js. Off entirely for reduced motion. ---------------- */
[data-reveal]{opacity:1}
html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------------- the start-here strip: the three things a stranger can do ---------------- */
.start{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);margin-top:26px}
.start a{
  display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg2);padding:14px 16px;text-decoration:none;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.start a:hover{border-color:var(--teal-lt);transform:translateY(-2px);text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.start .s-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lt)}
.start .s-t{font-size:15px;color:var(--ink)}
.start .s-d{font-size:12.5px;color:var(--dim2)}

/* ---------------- the customizer ---------------- */
.cust{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,92vw);z-index:20;
  background:var(--bg2);border-left:1px solid var(--line-lt);
  display:flex;flex-direction:column;transform:translateX(102%);
  visibility:hidden;
  transition:transform .28s ease,visibility .28s;box-shadow:-24px 0 60px rgba(0,0,0,.5);
}
.cust[aria-hidden="false"]{visibility:visible}
.cust-head{display:flex;align-items:center;gap:var(--gap);padding:14px var(--pad);border-bottom:1px solid var(--line)}
.cust-title{flex:1;font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-lt)}
.cust-body{padding:var(--pad);overflow:auto;display:flex;flex-direction:column;gap:10px}
.cust-sect{color:var(--dim2);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-top:10px}
.cust-row{display:flex;align-items:center;gap:10px}
.cust-lab{flex:0 0 auto;color:var(--dim);font-size:12.5px;min-width:64px}
.cust-inp{
  flex:1;min-width:0;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px 10px;font:inherit;font-size:13px;
}
.cust-inp:focus{outline:none;border-color:var(--teal-lt)}
select.cust-inp{appearance:none}
input[type=range]{flex:1;accent-color:var(--teal-lt)}
button.chip{background:none;font:inherit;cursor:pointer}
/* narrow screens: the rail becomes a strip under the top bar rather than
   vanishing, so a first-time visitor on a phone can still reach every page */
@media (max-width:720px){
  /* The top bar is a single row of fixed-width things — wordmark, page name, two chips —
     and at 390px it does not fit: the chips ran off the right edge and the last one was
     cut in half. Tighten the type and the gaps rather than wrapping, so the bar stays one
     line and every control stays reachable. */
  .top{gap:8px;padding:11px 12px}
  .mark{font-size:15px;letter-spacing:.28em}
  .sub{font-size:10.5px;letter-spacing:.1em}
  .chip{font-size:10px;padding:3px 8px;letter-spacing:.06em}

  .shell{flex-direction:column}
  .rail{
    flex:0 0 auto;width:auto;flex-direction:row;gap:6px;
    overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:8px 10px;
  }
  .rail-link{white-space:nowrap;font-size:13px;padding:7px 11px}
  .rail-foot{display:none}
  main{padding:14px 10px}
  .msg{max-width:94%}
  h1{font-size:21px}
  .cust{width:min(340px,96vw)}
}
