/* ============================================================
   Malazan Companion — night-desert token system
   nightsky  #14161d  page ground
   basalt    #1e2129  raised surfaces
   bone      #e8e0cf  text
   ash       #9a948a  secondary text
   otataral  #b4553a  THE seal color: boundary + sealed things only
   warren    #5d8a7a  safe interactive accents
   ============================================================ */
:root{
  --nightsky:#14161d; --basalt:#1e2129; --bone:#e8e0cf; --ash:#9a948a;
  --otataral:#b4553a; --otataral-dim:#7c3d2c; --warren:#5d8a7a;
  --display:"IM Fell English",Georgia,serif;
  --body:"Alegreya Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --radius:10px; --pad:16px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--nightsky);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.55}
.hidden{display:none!important}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em;margin:0 0 .35em}
h1.display{font-size:2.3rem;line-height:1.1}
h2.display{font-size:1.5rem;color:var(--bone)}
.mono{font-family:var(--mono);font-size:.85em}
.hint{color:var(--ash);font-size:.9rem}
.error{color:var(--otataral);min-height:1.2em;font-size:.95rem}
a{color:var(--warren)}
:focus-visible{outline:2px solid var(--warren);outline-offset:2px;border-radius:4px}

/* ---------- gates (login / boundary) ---------- */
.gate{max-width:430px;margin:0 auto;padding:14vh var(--pad) 4rem;text-align:left}
.gate .tagline{color:var(--ash);font-style:italic;margin-top:-.4rem}
.gate form{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
label{font-size:.95rem;color:var(--ash)}
input,select{background:var(--basalt);color:var(--bone);border:1px solid #303541;border-radius:var(--radius);padding:.65rem .8rem;font:inherit;width:100%}
input[type=range]{padding:0;accent-color:var(--warren)}
fieldset{border:1px solid #303541;border-radius:var(--radius);padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
legend{padding:0 .4rem;color:var(--ash);font-size:.9rem}
details summary{cursor:pointer;color:var(--warren)}
.row{display:flex;gap:.7rem}
.row label{flex:1;display:flex;flex-direction:column;gap:.3rem}

.btn{border:0;border-radius:var(--radius);padding:.7rem 1.1rem;font:inherit;font-weight:700;cursor:pointer}
.btn.primary{background:var(--warren);color:#0d1512}
.btn.primary:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;color:var(--ash)}

/* ---------- the boundary seal (signature element) ---------- */
#seal{position:sticky;top:0;z-index:10;background:linear-gradient(var(--nightsky) 78%,transparent);padding:10px var(--pad) 14px}
.seal-inner{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:var(--basalt);color:var(--bone);border:1px solid var(--otataral-dim);
  border-radius:var(--radius);padding:.55rem .8rem;cursor:pointer;font:inherit;
  box-shadow:0 0 0 3px rgba(180,85,58,.12),0 6px 18px rgba(0,0,0,.45)}
.seal-mark{width:14px;height:14px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%,#d4785a,var(--otataral) 60%,#5e2d20);
  box-shadow:0 0 6px rgba(180,85,58,.8)}
.seal-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.seal-text strong{font-family:var(--display);font-weight:400;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seal-sub{color:var(--ash);font-size:.72rem;letter-spacing:.03em}
.seal-ordinal{color:var(--otataral);font-size:.72rem}

/* sealed chips */
.sealed-chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(180,85,58,.12);
  color:var(--otataral);border:1px solid var(--otataral-dim);border-radius:999px;
  padding:.1rem .6rem;font-size:.78rem;font-family:var(--mono)}
.sealed-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--otataral)}

/* ---------- layout ---------- */
main{max-width:720px;margin:0 auto;padding:0 var(--pad) 90px}
.tab-panel{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}

.card-stack{display:flex;flex-direction:column;gap:.9rem}
.card{background:var(--basalt);border:1px solid #2a2f3a;border-radius:var(--radius);padding:.95rem 1rem}
.card h3{margin:.1rem 0 .3rem;font-family:var(--display);font-weight:400;font-size:1.15rem}
.card .src{color:var(--ash);font-size:.8rem;font-family:var(--mono)}
.card p{margin:.4rem 0;white-space:pre-wrap}

/* codex grid */
.subtabs{display:flex;gap:.4rem;margin:.4rem 0 1rem}
.subtabs button{background:transparent;border:1px solid #303541;color:var(--ash);border-radius:999px;padding:.35rem .9rem;font:inherit;font-size:.9rem;cursor:pointer}
.subtabs button.active{border-color:var(--warren);color:var(--warren)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.tile{background:var(--basalt);border:1px solid #2a2f3a;border-radius:var(--radius);
  padding:.8rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;text-align:center;color:var(--bone);font:inherit}
.tile img{width:74px;height:74px}
.tile .name{font-family:var(--display);font-size:1.02rem;line-height:1.2}
.tile:hover{border-color:var(--warren)}

/* chat */
.chat-log{display:flex;flex-direction:column;gap:.7rem;margin-bottom:.8rem}
.msg{border-radius:var(--radius);padding:.7rem .9rem;max-width:92%;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:#27313d}
.msg.bot{align-self:flex-start;background:var(--basalt);border:1px solid #2a2f3a}
.msg .cites{display:block;margin-top:.5rem;color:var(--ash);font-size:.78rem;font-family:var(--mono)}
.msg.mode-raw::after{content:"budget saver: raw excerpts";display:block;margin-top:.4rem;color:var(--otataral);font-size:.72rem;font-family:var(--mono)}
.chat-form{display:flex;gap:.5rem}
.chat-form input{flex:1}

/* maps */
.map-frame{background:var(--basalt);border:1px solid #2a2f3a;border-radius:var(--radius);overflow:hidden}
.map-frame svg{display:block;width:100%;height:auto}

/* dialog */
dialog{background:var(--basalt);color:var(--bone);border:1px solid #303541;border-radius:14px;
  padding:1.1rem;max-width:min(94vw,480px);width:100%}
dialog::backdrop{background:rgba(10,12,16,.7)}
#dialog-close{position:absolute;top:.4rem;right:.4rem}
.entity-head{display:flex;gap:.9rem;align-items:center;margin-bottom:.4rem}
.entity-head img{width:84px;height:84px}
.aliases{color:var(--ash);font-style:italic;font-size:.9rem}
.facts{margin:.6rem 0 0;padding-left:1.1rem}
.facts li{margin:.35rem 0}

/* ---------- the chronicle ---------- */
.timeline{display:flex;gap:4px;overflow-x:auto;padding:.15rem 2px .85rem;scrollbar-width:thin}
.notch{flex:none;width:20px;height:26px;border-radius:5px;border:1px solid #2a2f3a;background:var(--basalt);padding:0;cursor:pointer}
.notch.completed{background:var(--warren);border-color:var(--warren);opacity:.7}
.notch.completed:hover{opacity:1}
.notch.sel{outline:2px solid var(--bone);outline-offset:1px;opacity:1}
.notch.current{background:radial-gradient(circle at 35% 35%,#d4785a,var(--otataral) 60%,#5e2d20);border-color:var(--otataral);box-shadow:0 0 6px rgba(180,85,58,.7)}
.notch.future{background:transparent;border-color:var(--otataral-dim);opacity:.45;cursor:default}

.chron .chron-recap{font-family:var(--display);font-size:1.16rem;line-height:1.7;max-width:60ch;white-space:normal}
.chron-recap.small{font-size:1rem;line-height:1.6}
details.arc{margin:.6rem 0 .2rem}
details.arc summary,.excerpts summary{cursor:pointer;color:var(--warren);font-size:.9rem}
.threads{display:flex;flex-direction:column;gap:.5rem;margin-top:.9rem}
.thread{text-align:left;background:rgba(93,138,122,.08);border:1px solid #2a2f3a;border-left:3px solid var(--warren);border-radius:var(--radius);padding:.55rem .8rem;color:var(--bone);font:inherit;cursor:pointer}
.thread:hover{border-color:var(--warren)}
.chron-prev summary{font-family:var(--display);font-size:1.05rem;cursor:pointer}

/* one-tap finish */
#finish-chapter{display:block;width:100%;margin-top:.45rem;background:transparent;
  border:1px dashed var(--warren);color:var(--warren);font-weight:500;padding:.45rem}
#finish-chapter:hover{background:rgba(93,138,122,.12)}
#finish-chapter:disabled{opacity:.5;cursor:default}

/* streaming + excerpts */
.msg.streaming::after{content:"▋";animation:blink 1s steps(1) infinite;color:var(--warren)}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.msg.streaming::after{animation:none}}
.msg .excerpts{margin-top:.55rem;border-top:1px dashed #2a2f3a;padding-top:.4rem}
.msg .excerpts .src{display:block;margin-top:.45rem;color:var(--ash);font-size:.8rem;font-family:var(--mono)}
.msg .excerpts p{margin:.25rem 0 .4rem}

/* tab bar */
#tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(20,22,29,.96);
  border-top:1px solid #2a2f3a;padding:.35rem .5rem calc(.35rem + env(safe-area-inset-bottom))}
#tabbar button{flex:1;background:none;border:0;color:var(--ash);font:inherit;font-size:.85rem;
  padding:.55rem 0;cursor:pointer;border-radius:8px}
#tabbar button.active{color:var(--warren);font-weight:700}