/* Changemaker — ink field, bone text, blood as accent only.
   Meaning is carried by its own palette: polarity by warmth, instrument by hue.
   Design language inherited from where-is-this-going.html. */
:root{
  --ink:#15171b;
  --ink-raised:#1c1f26;
  --bone:#e8e1d0;
  --bone-dim:#9a9484;
  --bone-faint:#6b675d;
  --blood:#97231c;
  --blood-lift:#bd3a2e;
  /* meaning-bearing, never decorative */
  --yes:#d9b05e;
  --no:#8090ba;
  --i-yi:#9186c9;
  --i-oracle:#5f9e8f;
  --i-fate:#cdd4e0;
  --hair:rgba(232,225,208,0.12);
  --hair-soft:rgba(232,225,208,0.06);
  --serif:"Cardo",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone);height:100%}
body{
  font-family:var(--serif);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:calc(.9rem + env(safe-area-inset-top))
          calc(1.1rem + env(safe-area-inset-right))
          calc(1rem + env(safe-area-inset-bottom))
          calc(1.1rem + env(safe-area-inset-left));
}
.wrap{width:100%;max-width:680px;display:flex;flex-direction:column;min-height:0}

/* masthead — small, because it is not the point */
.mast{display:flex;align-items:center;gap:.7rem;margin-bottom:.7rem;flex:0 0 auto}
.mark{font-size:1.5rem;line-height:1;font-weight:700;letter-spacing:-.02em}
.mast-text .eng{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone-faint);
}
.session-state{
  margin-left:auto;font-family:var(--sans);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-faint);
}
.session-state.live{color:var(--bone-dim)}
.session-state.live::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--blood-lift);margin-right:.45rem;vertical-align:.1em;
}

/* the honesty strip — visible, never nagging. Capped so a long list can never
   push the writing off the screen: threads stay whole, the strip scrolls. */
.threads{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;
  padding-bottom:.5rem;margin-bottom:.5rem;
  border-bottom:1px solid var(--hair-soft);
  flex:0 0 auto;max-height:4.2rem;overflow-y:auto;
  scrollbar-width:none;
}
.threads::-webkit-scrollbar{display:none}
.thread{
  display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:.82rem;line-height:1.35;color:var(--bone-dim);
}
.thread i{width:4px;height:4px;border-radius:50%;background:var(--blood);flex:0 0 auto;position:relative;top:-2px}

/* the surface: this is the page. The four registers take their positions as the
   markers are typed — the buffer stays plain markdown underneath. */
#write{flex:1 1 auto;width:100%;min-height:44vh;display:flex;min-height:0}
body.in-session #write{min-height:52vh}
.cm-editor{
  flex:1 1 auto;width:100%;background:transparent;color:var(--bone);
  font-family:var(--serif);font-size:1.12rem;line-height:1.62;
}
.cm-editor.cm-focused{outline:none}
.cm-scroller{font-family:inherit;line-height:inherit;overflow-y:auto}
.cm-content{
  /* CodeMirror's base theme sets monospace here; the reading voice is serif */
  font-family:var(--serif);padding:.2rem 0 1rem;caret-color:var(--bone);
}
.cm-cursor,.cm-dropCursor{border-left-color:var(--bone)}
.cm-placeholder{color:var(--bone-faint);font-style:italic}
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground,
.cm-content ::selection{background:rgba(232,225,208,.18)}
.cm-line{padding:0}

.cm-line.r-talk{
  font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--bone-dim);
  border-left:1px solid var(--hair);padding-left:.85rem;
}
.cm-line.r-design{
  font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--bone-dim);
  text-align:right;border-right:1px solid var(--hair);padding-right:.85rem;
}
.cm-line.r-roll{
  font-family:var(--mono);font-size:.86rem;text-align:center;color:var(--bone-dim);
}

/* the bar sits under the writing, in normal flow — nothing to position
   against a keyboard, which is the whole reason it survives mobile */
.bar{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.7rem 0;border-top:1px solid var(--hair);
  flex:0 0 auto;
}
.bar-spacer{flex:1 1 auto}
.register{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-faint);
}
.register.thinking{color:var(--i-yi)}
button.cast{
  background:transparent;color:var(--bone);
  border:1px solid var(--bone-dim);border-radius:2px;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.55rem 1rem;cursor:pointer;transition:background .2s,color .2s;
}
button.cast:hover{background:var(--bone);color:var(--ink)}
button.cast:focus-visible{outline:2px solid var(--blood-lift);outline-offset:2px}
button.ghost{
  background:transparent;border:1px solid var(--hair);border-radius:2px;
  color:var(--bone-dim);cursor:pointer;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.5rem .8rem;
}
button.ghost:hover{color:var(--bone);border-color:var(--bone-dim)}
button.ghost:focus-visible{outline:2px solid var(--blood-lift);outline-offset:2px}

.status{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.04em;
  color:var(--bone-faint);min-height:1.2rem;padding-bottom:.3rem;flex:0 0 auto;
}
.status.ok{color:var(--bone-dim)}
.status.err{color:var(--blood-lift)}

/* folds — everything that is not writing lives behind one */
details.fold{border-top:1px solid var(--hair-soft);flex:0 0 auto}
details.fold summary{
  cursor:pointer;list-style:none;padding:.6rem 0;
  font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone-faint);
}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary::before{content:"▸ ";color:var(--bone-faint)}
details.fold[open] summary::before{content:"▾ "}
details.fold .grid{display:grid;grid-template-columns:auto 1fr;gap:.55rem .85rem;align-items:center;padding-bottom:1rem}
details.fold label{
  font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);
}
details.fold input{
  background:transparent;border:none;border-bottom:1px solid var(--hair);
  color:var(--bone);font-family:var(--mono);font-size:.85rem;
  padding:.3rem 0;outline:none;width:100%;
}
details.fold input:focus{border-bottom-color:var(--bone-dim)}
details.fold .note{
  grid-column:1 / -1;font-family:var(--sans);font-size:.7rem;
  color:var(--bone-faint);line-height:1.6;
}
.quiet{color:var(--bone-faint);font-style:italic;font-size:.95rem;padding-bottom:.8rem}
.state-body{white-space:pre-wrap;font-size:.98rem;color:var(--bone-dim);padding-bottom:1rem;max-width:62ch}
.state-body.loaded{color:var(--bone)}

/* the log */
.log-head{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;padding-bottom:.4rem}
.log-head input{
  flex:1 1 10rem;background:transparent;border:none;border-bottom:1px solid var(--hair);
  color:var(--bone);font-family:var(--serif);font-size:.98rem;padding:.3rem 0;outline:none;
}
.log-head input:focus{border-bottom-color:var(--bone-dim)}
details.entry{border-top:1px solid var(--hair-soft)}
details.entry summary{
  cursor:pointer;list-style:none;padding:.5rem 0;
  display:flex;align-items:baseline;gap:.7rem;
}
details.entry summary::-webkit-details-marker{display:none}
details.entry summary::before{content:"·";color:var(--bone-faint)}
details.entry[open] summary::before{content:"—";color:var(--blood-lift)}
details.entry .when{font-family:var(--mono);font-size:.8rem;color:var(--bone-dim);white-space:nowrap;flex:0 0 auto}
details.entry .peek{color:var(--bone-faint);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
details.entry[open] .peek{visibility:hidden}
/* pre-wrap: the player's line breaks are the player's — never reflowed */
details.entry .body{white-space:pre-wrap;padding:.2rem 0 1rem;font-size:1.02rem;max-width:62ch}

footer{
  margin-top:.6rem;padding:.8rem 0 0;border-top:1px solid var(--hair-soft);
  font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  display:flex;gap:1.3rem;flex-wrap:wrap;flex:0 0 auto;
}
footer a{color:var(--bone-faint);text-decoration:none}
footer a:hover{color:var(--bone-dim)}

/* ============ the tray — raised over the page, then gone ============ */
body.tray-open{overflow:hidden}
.tray{
  position:fixed;inset:0;z-index:50;
  background:rgba(21,23,27,.92);
  display:flex;align-items:flex-end;justify-content:center;
  padding:1rem;
}
.tray[hidden]{display:none}
.tray-inner{
  width:100%;max-width:680px;
  background:var(--ink);
  border:1px solid var(--hair);border-radius:3px;
  padding:.9rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:.7rem;
  max-height:92vh;overflow-y:auto;
}
#dice-canvas{
  display:block;width:100%;height:min(34vh,290px);
  touch-action:none;border-bottom:1px solid var(--hair-soft);
}
.tray-result{
  font-family:var(--mono);font-size:1.05rem;text-align:center;
  min-height:1.6rem;opacity:0;transition:opacity .35s ease;
  color:var(--bone);
}
.tray-result.shown{opacity:1}
.tray-result.yes{color:var(--yes)}
.tray-result.no{color:var(--no)}
.tray-result.yi{color:var(--i-yi)}
.tray-result.oracle{color:var(--i-oracle)}
.tray-result.fate{color:var(--i-fate)}
.tray-choices{display:flex;flex-direction:column;gap:.75rem}
.choice-group[hidden]{display:none}
.choice-label{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-faint);margin-bottom:.35rem;
}
.choice-row{display:flex;flex-wrap:wrap;gap:.4rem}
button.lvl{
  background:transparent;border:1px solid var(--hair);border-radius:2px;
  color:var(--bone-dim);cursor:pointer;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.1em;
  padding:.5rem .7rem;flex:1 1 auto;
}
button.lvl:hover{color:var(--bone);border-color:var(--bone-dim)}
button.lvl:focus-visible{outline:2px solid var(--blood-lift);outline-offset:2px}
.tray-close{align-self:flex-end}

@media (prefers-reduced-motion:reduce){
  .tray-result{transition:none}
}

/* the resume question — asked only where there is a choice, never a modal */
.resume{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  padding:.55rem 0 .7rem;
  border-bottom:1px solid var(--hair-soft);
  flex:0 0 auto;
}
.resume[hidden]{display:none}
.resume .ask{
  font-size:.98rem;color:var(--bone-dim);font-style:italic;
  margin-right:auto;
}
.resume .ask b{font-style:normal;color:var(--bone);font-weight:400}
.session-state.held{color:var(--bone-dim)}
.session-state.held::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  border:1px solid var(--blood-lift);margin-right:.45rem;vertical-align:.1em;
}

/* whether the words have reached the vault — stated, never celebrated */
.sync{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blood-lift);
}
.sync.safe{color:var(--bone-faint)}

/* naming a session as it closes */
.ending{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem 0 .7rem;flex:0 0 auto;
}
.ending[hidden]{display:none}
.ending input{
  flex:1 1 12rem;background:transparent;border:none;
  border-bottom:1px solid var(--hair);color:var(--bone);
  font-family:var(--serif);font-size:1.02rem;padding:.35rem 0;outline:none;
}
.ending input:focus{border-bottom-color:var(--bone-dim)}
.ending input::placeholder{color:var(--bone-faint);font-style:italic}

/* ============ the four registers, four positions ============ */
.m-story{
  margin-bottom:.75rem;font-family:var(--serif);font-size:1.02rem;
  color:var(--bone);white-space:pre-wrap;max-width:62ch;
}
.m-talk{
  margin:.65rem 0;padding-left:.85rem;border-left:1px solid var(--hair);
  font-family:var(--sans);font-size:.86rem;line-height:1.6;
  color:var(--bone-dim);white-space:pre-wrap;max-width:56ch;
}
.m-roll{
  margin:.8rem 0;text-align:center;
  font-family:var(--mono);font-size:.86rem;
  color:var(--bone-dim);white-space:pre-wrap;
}
.m-roll.t-yes{color:var(--yes)}
.m-roll.t-no{color:var(--no)}
.m-roll.t-yi{color:var(--i-yi)}
.m-roll.t-oracle{color:var(--i-oracle)}
.m-roll.t-fate{color:var(--i-fate)}
.m-design{
  margin:.65rem 0 .65rem auto;padding-right:.85rem;
  border-right:1px solid var(--hair);text-align:right;
  font-family:var(--sans);font-size:.86rem;line-height:1.6;
  color:var(--bone-dim);white-space:pre-wrap;max-width:52ch;
}
.m-talk.unclosed,.m-design.unclosed{border-color:var(--blood)}

/* the register chip — one tap from table-talk to system-design */
button.chip{
  background:transparent;border:1px dashed var(--hair);border-radius:2px;
  color:var(--bone-faint);cursor:pointer;padding:.2rem .45rem;
  font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
}
button.chip:hover{color:var(--i-yi);border-color:var(--i-yi)}
button.chip[hidden]{display:none}
.register.r-table-talk{color:var(--bone-dim)}
.register.r-system-design{color:var(--i-yi)}
button.ghost.src[aria-pressed="true"]{color:var(--bone);border-color:var(--bone-dim)}
#ask{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--hair);
  color:var(--bone);font-family:var(--serif);font-size:1rem;
  padding:.4rem 0;outline:none;
}
#ask:focus{border-bottom-color:var(--bone-dim)}
#ask::placeholder{color:var(--bone-faint);font-style:italic}
.m-note{
  display:block;margin-top:.3rem;font-family:var(--serif);font-style:italic;
  font-size:.92rem;color:var(--bone-faint);max-width:54ch;
  margin-left:auto;margin-right:auto;
}
.vault-status{
  grid-column:1 / -1;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.04em;color:var(--bone-faint);padding-top:.2rem;min-height:1rem;
}
.vault-status.ok{color:var(--yes)}
.vault-status.warn{color:var(--bone-dim)}
.vault-status.err{color:var(--blood-lift)}