/* One stylesheet, no framework. Colours are named once per theme and used
   through variables, so the dark theme is a second block rather than a second
   set of rules. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #5c6672;
  --line: #dde2e8;
  --accent: #1f6feb;
  --given: #1a7f4b;
  --held: #8a6d00;
  --danger: #b42318;
  --event: #6941c6;
  --ok-bg: #e9f7ef;
  --below-bg: #fdecea;
  --radius: 10px;
}

:root[data-theme="dark"] {
  --bg: #14171c;
  --panel: #1c2027;
  --ink: #e6e9ee;
  --muted: #9aa4b2;
  --line: #2c323b;
  --accent: #5b9bff;
  --given: #4ec98a;
  --held: #d9b441;
  --danger: #ff7a6e;
  --event: #b79bff;
  --ok-bg: #16301f;
  --below-bg: #33201e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1 { font-size: 1.1rem; margin: 0; }
.version {
  font-size: .75rem; font-weight: 400; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-left: .4rem;
}
h2 { font-size: 1rem; margin: 0 0 .75rem; }
h3 { font-size: .8rem; margin: 1rem 0 .35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); margin-bottom: 1rem;
}
.bar-right { display: flex; align-items: center; gap: .6rem; }
.badge {
  font-size: .8rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .7rem;
}

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem;
}

#picker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
#picker label { font-weight: 600; }
#picker p { flex-basis: 100%; margin: .2rem 0 0; }

select, textarea, button { font: inherit; color: inherit; }
select, textarea {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .6rem;
}
select { min-width: 20rem; }
textarea { width: 100%; resize: vertical; }
textarea:disabled { opacity: .6; }

button { border-radius: 8px; padding: .45rem .9rem; cursor: pointer; border: 1px solid var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ghost { background: transparent; }

main { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { main { grid-template-columns: 1fr; } }

.chart ul { margin: 0; padding-left: 1.1rem; }
.chart li { margin: .1rem 0; }
.who { margin: 0 0 .4rem; font-weight: 600; }
.earned { list-style: none; padding: 0; margin: 0; }
.earned li { border-left: 3px solid var(--given); padding: .15rem .5rem; margin: .25rem 0; }

/* No height and no scrollbar of its own. A transcript inside a box that
   scrolls separately from the page hides how long the encounter is getting,
   and puts the composer in a different place depending on where you had
   scrolled to. The panel grows and the page scrolls. */
.transcript { list-style: none; margin: 0 0 1rem; padding: 0; }
.turn { border-top: 1px solid var(--line); padding: .7rem 0; }
.turn:first-child { border-top: 0; }
.turn.closed { color: var(--muted); font-style: italic; text-align: center; }
.said p { margin: .2rem 0 .4rem; font-weight: 600; }
.when { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.why { margin: -.2rem 0 .4rem; font-weight: 400; font-style: italic; color: var(--muted); }
.waited { margin-left: .5rem; font-size: .8rem; color: var(--held); }

.row { display: flex; gap: .5rem; align-items: baseline; padding: .1rem 0; }
.tag {
  flex: 0 0 5.5rem; text-align: right; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.row.given span:last-child { color: var(--given); }
.row.held span:last-child { color: var(--held); }
.row.danger span:last-child { color: var(--danger); font-weight: 600; }
.row.warn-row span:last-child { color: var(--held); }
.row.event span:last-child { color: var(--event); }
.row.muted-row span:last-child, .muted { color: var(--muted); }

.composer { display: grid; gap: .5rem; }
.composer-actions { display: flex; gap: .5rem; }

.headline { font-size: 1.15rem; margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: 8px; }
.headline.ok { background: var(--ok-bg); }
.headline.below { background: var(--below-bg); }
.veto { color: var(--danger); font-weight: 600; }

.dims { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.dims th, .dims td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); }
.dims .num { text-align: right; font-variant-numeric: tabular-nums; }
.dims tr.ok td:first-child { border-left: 3px solid var(--given); }
.dims tr.below td:first-child { border-left: 3px solid var(--danger); }

/* Both modals are <dialog>: the browser handles the backdrop, the focus trap
   and Escape, none of which is worth reimplementing. */
.modal {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); padding: 1.2rem;
  width: min(30rem, 92vw); box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.modal.wide { width: min(70rem, 94vw); }
.modal::backdrop { background: rgba(0, 0, 0, .55); }
.modal h2 { margin-top: 0; }
.modal label { display: block; margin: .7rem 0 .2rem; font-weight: 600; }
.modal input {
  width: 100%; padding: .5rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit;
}
.modal button[type="submit"] { margin-top: 1rem; width: 100%; }
#login-error { margin-bottom: 0; }

.editor-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.editor-bar h2 { margin: 0; }
.editor-actions { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }
.danger-button { color: var(--danger); border-color: var(--danger); }
#source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.45; tab-size: 2;
}
#editor-result { margin-top: .6rem; }
#editor-result ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
#editor-result .counts { font-variant-numeric: tabular-nums; }
.read-only { opacity: .75; }

.report-actions { display: flex; gap: .5rem; margin-top: 1rem; }
#replay-result { margin: .6rem 0 0; }
.ok { color: var(--given); }

.advice { margin: 0; padding-left: 1.1rem; }
.advice li { margin: .2rem 0; }
.footer { font-size: .8rem; margin-top: 1rem; }
.warn { color: var(--danger); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}