/* The Codex: a book lying open in the Void. One deliberate look, single-theme by choice. */
:root {
  color-scheme: dark;
  --void: #0b0a14;
  --void-2: #16132a;
  --starlight: #cfc6ff;
  --parchment: #efe3c6;
  --parchment-edge: #d9c69c;
  --ink: #2b2118;
  --ink-soft: #5e4d3b;
  --rubric: #8e2a1f;
  --gilt: #c9a24a;
  --gilt-soft: #e7cf8a;
  --display: "IM Fell English SC", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Alegreya", "Palatino Linotype", Palatino, Georgia, serif;
  --capital: "UnifrakturMaguntia", "IM Fell English SC", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--void); }
body {
  margin: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, var(--starlight) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%, var(--starlight) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 72%, var(--gilt-soft) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 86%, var(--starlight) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 55%, var(--starlight) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 62%, var(--gilt-soft) 50%, transparent 51%),
    radial-gradient(ellipse at 50% 30%, var(--void-2), var(--void) 70%);
  background-color: var(--void);
  background-attachment: fixed;
  color: var(--parchment);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  padding-inline: 16px;
  padding-block: 32px 64px;
}
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; display: grid; gap: 36px; }

/* Cover */
.cover { text-align: center; display: grid; justify-items: center; gap: 12px; padding-block: 12px; }
.cover .home { text-decoration: none; display: grid; justify-items: center; gap: 12px; }
.sigil { width: min(220px, 60vw); height: auto; }
.cover.slim .sigil { width: 84px; }
.sigil circle { fill: none; stroke: var(--gilt); stroke-width: 1.4; }
.sigil text { fill: var(--gilt-soft); font-family: var(--display); font-size: 9px; letter-spacing: 1.5px; }
.cover.slim .sigil text { display: none; }
.cover h1 {
  font-family: var(--display); font-weight: 400; margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.2rem); letter-spacing: .06em; line-height: 1.05;
  color: var(--gilt-soft); text-wrap: balance; text-shadow: 0 0 24px rgba(201,162,74,.25);
}
.cover.slim h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.cover .sub { font-family: var(--display); letter-spacing: .22em; font-size: .85rem; color: var(--starlight); opacity: .85; margin: 0; }
.cover .motto { font-style: italic; color: var(--parchment-edge); max-width: 34em; margin: 4px 0 0; text-wrap: balance; }

/* The open book */
.book {
  margin-inline: 8px;
  display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr;
  background: var(--parchment); color: var(--ink);
  border-radius: 6px 6px 10px 10px;
  box-shadow: 0 0 0 6px #3a2616, 0 0 0 8px var(--gilt), 0 30px 80px rgba(0,0,0,.6);
}
.page {
  padding: 40px 44px 48px; min-width: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(150,110,50,.18), transparent 55%),
    var(--parchment);
}
.page.left { border-radius: 6px 0 0 10px; box-shadow: inset -12px 0 24px -16px rgba(60,40,20,.55); }
.page.right { border-radius: 0 6px 10px 0; box-shadow: inset 12px 0 24px -16px rgba(60,40,20,.55); }

.eyebrow { font-family: var(--display); letter-spacing: .18em; font-size: .78rem; color: var(--rubric); margin: 0 0 6px; }
summary.eyebrow { cursor: pointer; list-style: none; }
summary.eyebrow::-webkit-details-marker { display: none; }
summary.eyebrow::after { content: "  ▸ tap to open"; letter-spacing: .08em; color: var(--ink-soft); }
details[open] > summary.eyebrow::after { content: "  ▾"; }
@media (min-width: 761px) { details[open] > summary.eyebrow::after { content: ""; } }
.page h2 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 0 0 20px; line-height: 1.15; text-wrap: balance; }

/* Contents */
.contents, .contents .sub, .chapters { list-style: none; margin: 0; padding: 0; }
.contents { display: grid; gap: 1px; margin-top: 10px; }
.contents .part { font-family: var(--display); letter-spacing: .06em; color: var(--rubric); margin-top: 16px; font-size: .92rem; line-height: 1.3; }
.contents a {
  display: flex; gap: 10px; align-items: baseline; padding: 4px 6px; border-radius: 3px;
  text-decoration: none; font-size: .98rem; line-height: 1.35;
}
.contents a .n { font-family: var(--display); color: var(--ink-soft); min-width: 2.4em; font-size: .82rem; flex: none; }
.contents a:hover { background: rgba(201,162,74,.2); }
.contents a:focus-visible, .chapters a:focus-visible { outline: 2px solid var(--rubric); outline-offset: 1px; }
.contents a[aria-current="page"] { background: rgba(142,42,31,.1); font-weight: 700; }
.contents .realm > a .n::after { content: " ◈"; color: var(--gilt); }
.contents .sub { margin: 2px 0 8px 3em; border-left: 1px solid var(--parchment-edge); }
.contents .sub a { font-size: .88rem; padding: 3px 8px; color: var(--ink-soft); }

.chapters { display: grid; gap: 8px; margin-top: 12px; }
.chapters a { font-family: var(--display); font-size: 1.1rem; }

/* Rendered canon */
.entry { max-width: 40em; }
.entry p, .entry ul, .entry ol, .entry blockquote, .entry table { margin: 0 0 14px; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin-bottom: 6px; }
.entry li > ul, .entry li > ol { margin-top: 6px; }
.entry strong { color: #1d150e; }
.entry em { color: #3a2c1f; }
.entry hr { border: 0; height: 10px; margin: 22px 0;
  background: radial-gradient(circle, var(--gilt) 2px, transparent 3px) center/10px 10px no-repeat,
              linear-gradient(var(--parchment-edge), var(--parchment-edge)) center/100% 1px no-repeat; }
.entry blockquote { padding: 10px 16px; border-left: 3px double var(--rubric); background: rgba(201,162,74,.12); }
.entry blockquote p:last-child { margin-bottom: 0; }
.entry code { font-size: .9em; background: rgba(94,77,59,.1); padding: 0 4px; border-radius: 3px; }
.entry table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .92rem; max-width: 100%; }
.entry th, .entry td { border-bottom: 1px solid var(--parchment-edge); padding: 6px 10px; text-align: left; vertical-align: top; }
.entry th { font-family: var(--display); font-weight: 400; color: var(--rubric); letter-spacing: .04em; }
.lead-cap > p:first-child::first-letter {
  font-family: var(--capital); color: var(--rubric); float: left;
  font-size: 4.2em; line-height: .82; padding: 6px 10px 0 0; text-shadow: 1px 1px 0 var(--gilt);
}

.section { margin-top: 30px; scroll-margin-top: 16px; }
.section h3 { font-family: var(--display); font-weight: 400; line-height: 1.25; margin: 0 0 12px; text-wrap: balance; }
.section.d3 h3 { font-size: 1.35rem; padding-top: 18px; border-top: 1px solid var(--parchment-edge); }
.section.d4 h3 { font-size: 1.12rem; color: var(--ink-soft); }
.section h3 strong { font-weight: 400; }

.marginalia { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--parchment-edge); font-size: .9rem; color: var(--ink-soft); }
.seal {
  display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b3402f, var(--rubric) 60%, #5c170f);
  color: var(--gilt-soft); font-family: var(--display); font-size: .6rem; letter-spacing: .08em; text-align: center; line-height: 1.1;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), inset 0 0 0 3px rgba(0,0,0,.15);
}
.cite { font-family: var(--display); letter-spacing: .06em; }

.colophon { text-align: center; font-size: .9rem; color: var(--parchment-edge); opacity: .8; font-style: italic; margin: 0; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .book { grid-template-columns: 1fr; }
  .page { padding: 26px 20px 30px; }
  .page.left { border-radius: 6px 6px 0 0; border-bottom: 1px solid var(--parchment-edge); box-shadow: none; padding-bottom: 18px; }
  .page.right { border-radius: 0 0 10px 10px; box-shadow: none; }
  .page h2 { font-size: 1.55rem; }
}
/* No load animation: on an iPhone (2026-09-23) the page sat faded at the animation's start frame. Text is always fully visible. */

/* Recorder notes (shown only with ?r=1) */
.recorder { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--ink-soft); border-radius: 4px; background: rgba(94,77,59,.07); font-size: .92rem; color: var(--ink-soft); }
.recorder p:last-child { margin-bottom: 0; }
.recorder-tag { display: block; font-family: var(--display); letter-spacing: .12em; font-size: .72rem; color: var(--rubric); margin-bottom: 4px; }
.recorder-toggle { margin-left: auto; font-family: var(--display); letter-spacing: .06em; font-size: .85rem; color: var(--rubric); }

/* Book switch (Player's Book | Canon) */
.books { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.books a { font-family: var(--display); letter-spacing: .1em; font-size: .8rem; text-decoration: none; color: var(--parchment-edge); padding: 4px 12px; border: 1px solid rgba(201,162,74,.35); border-radius: 999px; }
.books a[aria-current="page"] { color: var(--void); background: var(--gilt-soft); border-color: var(--gilt-soft); }
.books a:focus-visible { outline: 2px solid var(--gilt-soft); outline-offset: 2px; }

/* ── Phase 3: account bar, forms, the Hall, admin ─────────────────────────────────── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.account { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-end; align-items: center; font-family: var(--display); letter-spacing: .08em; font-size: .85rem; }
.account a { color: var(--parchment-edge); text-decoration: none; padding: 2px 4px; border-bottom: 1px solid transparent; }
.account a[aria-current="page"] { color: var(--gilt-soft); border-bottom-color: var(--gilt); }
.account .who { color: var(--starlight); opacity: .85; }
.inline { display: inline; margin: 0; }
button.linkish { all: unset; cursor: pointer; color: var(--parchment-edge); font: inherit; letter-spacing: inherit; }
button.linkish:hover, .account a:hover { color: var(--gilt-soft); }
button.linkish:focus-visible, .account a:focus-visible { outline: 2px solid var(--gilt-soft); outline-offset: 2px; }

.sheet { margin-inline: 8px; background: var(--parchment); color: var(--ink); border-radius: 8px;
  box-shadow: 0 0 0 6px #3a2616, 0 0 0 8px var(--gilt), 0 30px 80px rgba(0,0,0,.6); }
.panel { padding: 32px 36px 40px; }
.panel.narrow { max-width: 30rem; margin: 0 auto; }
.panel h2 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; margin: 0 0 16px; }
.panel h3 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 28px 0 10px; padding-top: 14px; border-top: 1px solid var(--parchment-edge); }
.hint { color: var(--ink-soft); font-size: .9rem; }

.form { display: grid; gap: 6px; }
.form label { font-family: var(--display); letter-spacing: .04em; margin-top: 8px; }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--ink); background: #fbf5e6; border: 1px solid var(--parchment-edge); border-radius: 4px; padding: 8px 10px; max-width: 100%; }
/* A range (slider) is not a text box: without this it inherits the box above (padding, border, background), and Chromium paints the
   track across the padding while the thumb only travels inside it, so the fill never reaches either end (Codi #335, Alex #336). */
input[type=range] { padding: 0; border: 0; background: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--rubric); outline-offset: 1px; }
button { font-family: var(--display); letter-spacing: .08em; font-size: .95rem; cursor: pointer; color: var(--gilt-soft); background: var(--rubric); border: 0; border-radius: 4px; padding: 9px 16px; }
button:hover { background: #a3372a; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.small { font-size: .78rem; padding: 5px 9px; background: #5e4d3b; }
button.small.warn { background: var(--rubric); }
.form button { margin-top: 14px; justify-self: start; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row input { flex: 1 1 16rem; }

.flash { padding: 10px 14px; border-radius: 4px; margin: 0 0 14px; }
.flash.err { background: rgba(142,42,31,.1); border-left: 3px solid var(--rubric); }
.flash.ok { background: rgba(80,110,40,.12); border-left: 3px solid #56712a; }
.newlink { background: rgba(201,162,74,.18); border: 1px dashed var(--gilt); border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; }
.newlink input { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

.scroll { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: .92rem; }
table.grid th, table.grid td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--parchment-edge); }
table.grid th { font-family: var(--display); font-weight: 400; color: var(--rubric); letter-spacing: .04em; }
table.grid.small { font-size: .82rem; }
table.grid tr.off td { color: var(--ink-soft); text-decoration: line-through; }
table.grid td.actions { white-space: nowrap; }
table.grid td.msg { max-width: 28rem; overflow-wrap: anywhere; }
.tag { font-size: .7rem; padding: 1px 5px; border-radius: 3px; background: var(--ink-soft); color: var(--parchment); }

/* The Hall */
.hall .log { list-style: none; margin: 0 0 12px; padding: 0 4px 0 0; max-height: 60vh; overflow-y: auto; display: grid; gap: 10px; }
.hall .log li { background: rgba(255,255,255,.35); border: 1px solid var(--parchment-edge); border-radius: 6px; padding: 8px 12px; }
.hall .log li.removed { opacity: .6; font-style: italic; }
.hall .from { font-family: var(--display); color: var(--rubric); letter-spacing: .04em; margin-right: 10px; }
.hall time { font-size: .8rem; color: var(--ink-soft); }
.hall .log p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hall .say { display: flex; gap: 8px; align-items: flex-end; }
.hall .say textarea { flex: 1; resize: vertical; min-height: 2.8em; }

@media (max-width: 760px) {
  .panel { padding: 22px 18px 28px; }
  .account { justify-content: center; }
}

/* Who is here + clear-the-Hall row */
.hall-body { display: grid; grid-template-columns: 1fr 13rem; gap: 16px; align-items: start; }
.hall .present { background: rgba(255,255,255,.3); border: 1px solid var(--parchment-edge); border-radius: 6px; padding: 10px 12px; }
.hall .present h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 1rem; }
.hall .present ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hall .present li::before { content: "● "; color: #56712a; }
.clear-room { margin-bottom: 10px; font-size: .92rem; }
@media (max-width: 760px) { .hall-body { grid-template-columns: 1fr; } .hall .present { order: -1; } }

/* Q&A: one list, question then answer (Alex, msg 2218) */
.qa-list { margin: 18px 0 0; }
.qa-list dt { font-family: var(--display); font-size: 1.25rem; color: var(--rubric); margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--parchment-edge); line-height: 1.3; }
.qa-list dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.qa-list dd { margin: 8px 0 0; max-width: 42em; }
.qa-list h4 { font-family: var(--display); font-weight: 400; margin: 12px 0 6px; }
.pager { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.pager a { font-family: var(--display); text-decoration: none; padding: 4px 10px; border: 1px solid var(--parchment-edge); border-radius: 4px; color: var(--ink); }
.pager a[aria-current="page"] { background: var(--rubric); color: var(--gilt-soft); border-color: var(--rubric); }

/* The Player's Codex: searched, not browsed */
.pcodex .search { margin: 14px 0 18px; }
.pcodex .search input[type=search] { flex: 1 1 18rem; }
.pcodex .hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pcodex .hits a { font-family: var(--display); font-size: 1.1rem; }
.pcodex .found { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--parchment-edge); }
.pcodex .found h3 { font-family: var(--display); font-weight: 400; font-size: 1.4rem; margin: 0 0 10px; }

.page.right .search { margin: 0 0 18px; }
.page.right .search input[type=search] { flex: 1 1 14rem; }
.page.right .hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.page.right .hits a { font-family: var(--display); font-size: 1.05rem; }

/* Character sheet editor: a fixed frame, and boxes that grow to fit (sheet.js) */
.sheet-sec { border: 1px solid var(--parchment-edge); border-radius: 4px; padding: 10px 14px 14px; margin: 14px 0 0; display: grid; gap: 6px; }
.sheet-sec legend { font-family: var(--display); color: var(--rubric); letter-spacing: .04em; padding: 0 6px; font-size: 1.1rem; }
.sheet-prompt p { margin: 0 0 6px; }
.form label.slot { margin-top: 4px; font-size: .92rem; }
textarea.grow { width: 100%; resize: vertical; overflow: hidden; min-height: 2.4em; line-height: 1.4; }
.sheet-sec .add-slot { justify-self: start; margin-top: 6px; }
.tabs { display: flex; gap: 6px; margin: 14px 0 0; border-bottom: 1px solid var(--parchment-edge); }
.tabs .tab { font: inherit; font-family: var(--display); letter-spacing: .04em; background: transparent; color: var(--ink-soft); border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; padding: 6px 14px; margin: 0; cursor: pointer; }
.tabs .tab[aria-selected="true"] { color: var(--rubric); border-color: var(--parchment-edge); background: #fbf5e6; }
details.minion { border: 1px solid var(--parchment-edge); border-radius: 4px; margin: 10px 0 0; background: rgba(251,245,230,.5); }
details.minion > summary { cursor: pointer; padding: 10px 14px; font-family: var(--display); color: var(--rubric); letter-spacing: .04em; font-size: 1.05rem; }
details.minion[open] > summary { border-bottom: 1px solid var(--parchment-edge); }
.minion-body { padding: 6px 14px 14px; display: grid; gap: 6px; }
.tab-panel > .add-minion { display: block; margin-top: 14px; }
.added-slot { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: end; }
.added-slot label.slot { grid-column: 1 / -1; }
.added-slot .remove-slot { background: transparent; color: var(--rubric); border: 1px solid var(--parchment-edge); margin: 0; }
.sheet-sec.trackers #bruise_slots { width: 5em; justify-self: start; }
.tracker-row { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 12px; padding: 8px 0; border-top: 1px dashed var(--parchment-edge); }
.tracker-row .tr-field { display: inline-flex; align-items: center; gap: 6px; }
.tracker-row label { margin-top: 0; font-size: .92rem; }
.tracker-row .tr-name { width: 12em; max-width: 100%; }
.tracker-row .tr-n, .tracker-row .tr-max { width: 5em; }
.tracker-row .tr-n[readonly] { background: transparent; }
.tracker-row .tr-move button { background: transparent; color: var(--rubric); border: 1px solid var(--parchment-edge); margin: 0; }
.tracker-row .tr-err { flex-basis: 100%; margin: 0; }
.sheet-sec.trackers .add-tracker { justify-self: start; margin-top: 6px; }
.sheet-trackers { margin-top: 12px; }
.sheet-trackers .tracker-list { margin: 4px 0 0; padding-left: 1.2em; }

/* The Tavern chat bar (dock.js): pinned to the bottom of every page but the Tavern */
body.has-dock { padding-bottom: 56px; }
.dock { position: fixed; right: 16px; bottom: 0; width: min(380px, calc(100vw - 32px)); z-index: 50;
  background: var(--parchment, #efe3c6); border: 1px solid var(--parchment-edge); border-bottom: none; border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,0,.35); color: var(--ink); }
.dock-tab { all: unset; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer;
  padding: 10px 14px; font-family: var(--display); letter-spacing: .04em; color: var(--rubric); }
.dock-tab:focus-visible { outline: 2px solid var(--rubric); outline-offset: -2px; }
.dock-new { font-size: .75rem; background: var(--rubric); color: #fbf5e6; border-radius: 10px; padding: 1px 8px; }
.dock-panel { padding: 0 12px 10px; border-top: 1px solid var(--parchment-edge); }
.dock .log { list-style: none; margin: 8px 0; padding: 0; height: min(320px, 45vh); overflow-y: auto; font-size: .92rem; }
.dock .log li { margin: 0 0 8px; }
.dock .log .from { font-weight: bold; margin-right: 6px; }
.dock .log time { color: var(--ink-soft); font-size: .78rem; }
.dock .log p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.dock .say { display: flex; gap: 6px; }
.dock .say textarea { flex: 1; resize: none; min-height: 2.4em; }
.dock-full { margin: 6px 0 0; font-size: .82rem; }
@media (max-width: 480px) { .dock { right: 0; width: 100vw; border-radius: 8px 8px 0 0; } }
.hall-main { min-width: 0; }
.hall .older { display: block; margin: 0 auto 10px; }
.chatlog .log-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.chatlog .log-list li { background: rgba(255,255,255,.35); border: 1px solid var(--parchment-edge); border-radius: 6px; padding: 8px 12px; }
.chatlog .log-list li.was-cleared { background: rgba(0,0,0,.04); }
.chatlog .log-list li.removed p { text-decoration: line-through; opacity: .7; }
.chatlog .log-list li.cleared { background: none; border-style: dashed; text-align: center; color: var(--ink-soft); font-style: italic; }
.chatlog .from { font-family: var(--display); color: var(--rubric); letter-spacing: .04em; }
.chatlog .log-list p { margin: 4px 0 0; overflow-wrap: anywhere; }
.chatlog .search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chatlog .search input { flex: 1; min-width: 12rem; }
table.grid tr.mine td { background: rgba(201,162,74,.12); }
table.grid .tag { font-size: .72rem; background: var(--rubric); color: #fbf5e6; border-radius: 8px; padding: 1px 7px; margin-left: 6px; }

/* Dice (app/dice.php): a roll made by the server, never by typing. Marked by the server's flag only. */
.log li.roll { border-left: 4px solid var(--rubric); }
.dock .log li.roll { padding-left: 8px; }
.die { font-family: var(--display); font-size: .68rem; letter-spacing: .08em; padding: 1px 6px; border-radius: 3px; background: var(--rubric); color: #fbf5e6; vertical-align: middle; }

/* The Tavern's Sound on/off switch (chime.js) sits on parchment, not on the night sky: ink, not gilt. */
#chime-toggle, .dock-full .linkish { color: var(--rubric); text-decoration: underline; text-underline-offset: 2px; }
#chime-toggle:hover, .dock-full .linkish:hover { color: var(--ink); }

/* Your own messages, lit up for you only (Alex, msg 2586): each reader's page marks the messages by its own reader. */
.hall .log li.mine { background: rgba(201,162,74,.22); border-color: rgba(201,162,74,.75); }
.dock .log li.mine { background: rgba(201,162,74,.20); border-radius: 4px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; }

/* Someone wrote @you (Alex, msg 2594: "a different sound and brighter highlight"): brighter than your own. */
.hall .log li.mention { background: rgba(232,190,90,.55); border: 2px solid #c9a24a; }
.dock .log li.mention { background: rgba(232,190,90,.50); border-radius: 4px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; box-shadow: inset 3px 0 0 #c9a24a; }

/* The Tavern's volume slider (chime.js, Alex msg 2603), beside Sound on/off. */
.chime-vol { white-space: nowrap; font-size: .9em; color: var(--ink-soft); }
.chime-vol input[type=range] { width: 110px; vertical-align: middle; accent-color: var(--rubric); }   /* the box reset is site-wide: input[type=range] above */

/* Admin chat (Alex, msg 2613): a second bar "to the side" of the Tavern bar, GM roles only. */
.dock-admin .dock-tab { background: #3a2f4a; color: #efe6d2; }
.dock-admin { right: calc(16px + min(380px, calc(100vw - 32px)) + 12px); }
body:not(.two-docks) .dock-admin { right: 16px; }   /* alone (on the Tavern page itself): the usual corner */
@media (max-width: 820px) {
  body.two-docks .dock { width: calc(50vw - 12px); right: 8px; }
  body.two-docks .dock-admin { right: calc(50vw + 4px); }
  /* Both tabs stay in one row at the bottom; the open bar's panel rises above them, full width, so the
     other tab is never covered (dock.js closes the other bar when one opens at this width). */
  body.two-docks .dock.open { z-index: 60; }
  body.two-docks .dock.open .dock-panel { position: fixed; left: 8px; right: 8px; bottom: 44px; background: var(--parchment, #efe3c6);
    border: 1px solid var(--parchment-edge); border-radius: 8px 8px 0 0; box-shadow: 0 -4px 18px rgba(0,0,0,.35); }
}

/* The @ picker (mention.js, Alex msg 2670): pops up just above the chat box. */
.mention-pick { position: absolute; left: 0; bottom: 100%; margin: 0 0 6px; padding: 4px 0; list-style: none; z-index: 70;
  min-width: 200px; max-width: 100%; max-height: 240px; overflow-y: auto; background: #fbf5e6; border: 1px solid var(--parchment-edge);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); color: var(--ink); font-size: .95rem; }
.mention-pick li { padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.mention-pick li.on, .mention-pick li:hover { background: rgba(201,162,74,.35); }

/* In the @ list: who is in this chat right now (Alex, msg 2696). */
.mention-pick .here-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3f8f4e; margin-right: 8px; vertical-align: middle; }
.mention-pick .here-dot.away { background: transparent; }