/* Deliberately plain. The layout question was already answered by the wca-proto
   mockup; this is here so the composer can be judged on how it feels to write
   in, not on how it looks. Colours live at the top so they are easy to replace
   with the prototype's palette later. */

:root {
  --bg: #14120f;
  --panel: #1e1b17;
  --panel-2: #262119;
  --ink: #ece4d7;
  --ink-dim: #a39785;
  --line: #3a3229;
  --accent: #c8a15a;
  --danger: #d4756a;
  --radius: 6px;
  --measure: 68ch;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at the lowest specificity, so any
   author 'display' below would quietly beat it and show a hidden element. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 Georgia, 'Times New Roman', serif;
}

.topbar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { color: var(--accent); font-weight: 700; text-decoration: none; letter-spacing: 0.02em; }
.spacer { flex: 1; }
.clock, .whoami { font-size: 0.85rem; color: var(--ink-dim); display: flex; gap: 0.75rem; align-items: center; }

.view { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }
.view > h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }

.muted { color: var(--ink-dim); }
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.back { color: var(--ink-dim); text-decoration: none; font-size: 0.85rem; }

/* ------------------------------------------------------------------ forms */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 1rem 0;
  display: grid;
  gap: 0.75rem;
}
.card.narrow { max-width: 24rem; }
.card h1 { margin: 0; font-size: 1.25rem; }

label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-dim); }

input, select, textarea, button {
  font: inherit;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem 0.6rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

button { cursor: pointer; }
button.primary { background: var(--accent); color: #221c12; border-color: var(--accent); font-weight: 700; }
button.ghost { background: transparent; color: var(--ink-dim); }
button.link { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }
button.small { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
button[disabled] { opacity: 0.5; cursor: progress; }

.notice { color: var(--danger); margin: 0.5rem 0; font-size: 0.9rem; }
.notice.muted { color: var(--ink-dim); }

/* ----------------------------------------------------------------- threads */

.scene-list { display: grid; gap: 0.5rem; margin-top: 1rem; }
.scene-row {
  display: grid;
  gap: 0.15rem;
  padding: 0.75rem 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.scene-row:hover { border-color: var(--accent); }
.scene-title { font-weight: 700; }
.scene-meta { font-size: 0.8rem; color: var(--ink-dim); }

/* ------------------------------------------------------------------- posts */

.thread { display: grid; gap: 1rem; margin: 1.5rem 0; }
.post { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; }
.post-head { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.85rem; margin-bottom: 0.5rem; }
.post-actions { margin-top: 0.5rem; font-size: 0.85rem; }

.post-body p { margin: 0 0 0.9rem; }
.post-body p:last-child { margin-bottom: 0; }
.post-body blockquote {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.9rem;
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
}
.post-body cite { display: block; font-size: 0.8rem; color: var(--ink-dim); font-style: normal; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body .akcja { border-bottom: 1px dashed var(--accent); cursor: help; }
.post-body .spoiler { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; }
.post-body .spoiler summary { cursor: pointer; color: var(--ink-dim); }
.post-body .center { text-align: center; }

/* ---------------------------------------------------------------- composer */

.composer {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.composer-head { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; color: var(--ink-dim); }
.composer-head .draft-status { margin-left: auto; }

.composer-toolbar { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tool { padding: 0.3rem 0.55rem; font-size: 0.9rem; line-height: 1; min-height: 2.2rem; }

.composer-ask { display: flex; gap: 0.35rem; }
.composer-ask input { flex: 1; }

/* Side by side where there is room; stacked on a phone, where the preview
   would otherwise steal half the writing surface. */
.composer-panes { display: grid; gap: 0.5rem; }
@media (min-width: 60rem) { .composer-panes { grid-template-columns: 1fr 1fr; } }

.composer-text { resize: vertical; min-height: 12rem; font-family: inherit; line-height: 1.6; }
.composer-preview {
  min-height: 6rem;
  padding: 0.5rem 0.75rem;
  background: var(--panel-2);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.composer-preview p { margin: 0 0 0.9rem; }
.composer-preview blockquote { margin: 0 0 0.9rem; padding: 0.4rem 0.8rem; border-left: 3px solid var(--accent); }
.composer-preview img { max-width: 100%; height: auto; }

.composer-actions { display: flex; gap: 0.5rem; align-items: center; }

/* --------------------------------------------------------------- rolls */

.roll {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.roll.pending { border-left-color: var(--ink-dim); font-style: italic; }
.roll.passed  { border-left-color: var(--accent); }
.roll.failed  { border-left-color: var(--danger); }
.roll-stat { font-weight: 700; }
.roll-question { color: var(--ink-dim); }
.roll-working { font-family: ui-monospace, Consolas, monospace; color: var(--ink-dim); }

.roll-picker { display: grid; gap: 0.4rem; }
.roll-row { display: flex; gap: 0.5rem; align-items: center; }
.roll-row > span { min-width: 3rem; }
.roll-fields { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.roll-fields input { flex: 1; min-width: 12rem; }
.tool.on, button.on { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- queue */

.queue { display: grid; gap: 1rem; margin-top: 1rem; }
.queue-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: grid;
  gap: 0.5rem;
}
.queue-item header { display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.queue-item p { margin: 0; }
.queue-post {
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: var(--panel-2);
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  max-height: 18rem;
  overflow-y: auto;
}
.queue-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- actions */

.action-summary {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.action { display: flex; gap: 0.5rem; align-items: baseline; }
.action-kind {
  color: var(--ink-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 7rem;
}
.action-undone { color: var(--ink-dim); font-style: italic; }
.action-status .action-text { color: var(--danger); }

.queue-conditions { font-size: 0.9rem; }
/* Advisory, and marked as advisory: the GM is meant to overrule it freely. */
button.suggested { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------- settlement */

.settle-days { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.settle-days input { width: 5rem; }

.settle-list { display: grid; gap: 0.75rem; }
.settle-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.4rem;
}
.settle-item header { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }

.settle-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.settle-kind { min-width: 5.5rem; color: var(--ink-dim); }
.settle-debt { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* Only a change in the modifier is coloured — the debt moves every episode. */
.settle-change { color: var(--danger); font-weight: 700; }

.settle-actions { margin-top: 1.25rem; }

/* ---------------------------------------------------- the character sheet */

.sheet-head { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.5rem; }
.sheet-head h1 { margin: 0 0 0.25rem; }
.avatar { width: 100px; height: 160px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

.view section { margin: 1.75rem 0; }
.view section h2 { font-size: 1.1rem; margin: 0 0 0.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
.view section h3 { font-size: 0.85rem; margin: 0.75rem 0 0.25rem; font-weight: normal; }

.stats { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.stats th, .stats td { text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); }
.stats thead th { color: var(--ink-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stats tbody th { font-weight: normal; }
.stat-start { color: var(--ink-dim); }
.stat-gain { color: var(--accent); }
.stat.maxed .stat-now strong { color: var(--accent); }

.items, .statuses, .supplies, .studio-list, .map-locations {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.9rem;
}
.statuses.past { margin-top: 0.5rem; }
.studio-list { gap: 0.35rem; margin-bottom: 0.5rem; }
.studio-list ul { list-style: none; margin: 0.15rem 0 0 1rem; padding: 0; font-size: 0.85rem; }

/* ------------------------------------------------------------- archive */

.search-form { display: flex; gap: 0.5rem; margin: 1rem 0; }
.search-form input { flex: 1; }

.results { display: grid; gap: 0.5rem; }
.result {
  display: grid; gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.result:hover { border-color: var(--accent); }
.result-where { font-size: 0.75rem; color: var(--ink-dim); }
.result-snippet { font-size: 0.9rem; }

/* ----------------------------------------------------------------- map */

/* A placeholder backdrop until there is a real map image to drop in — the
   pins and their positions are already real. */
.map {
  position: relative;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(200,161,90,.05) 14px 28px),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 1rem 0;
}
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.55rem;
  font-size: 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  color: #221c12;
  border: none;
  white-space: nowrap;
}
.map-detail { margin-top: 1rem; }

/* ------------------------------------------------- notifications & turns */

.bell { position: relative; font-size: 1rem; text-decoration: none; }
.bell-count {
  position: absolute; top: -0.4rem; right: -0.6rem;
  min-width: 1.1rem; padding: 0 0.25rem;
  background: var(--danger); color: #201512;
  border-radius: 999px;
  font-size: 0.65rem; line-height: 1.1rem; text-align: center; font-weight: 700;
}

.inbox { display: grid; gap: 0.4rem; margin: 1rem 0; }
.inbox-item {
  display: grid; gap: 0.15rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
}
.inbox-item.read { border-left-color: var(--line); opacity: 0.65; }
.inbox-kind { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); }
.inbox-title { font-weight: 700; font-size: 0.95rem; }
.inbox-body { font-size: 0.85rem; color: var(--ink-dim); white-space: pre-line; }
.inbox-when { font-size: 0.7rem; color: var(--ink-dim); }

label.checkbox { display: flex; gap: 0.5rem; align-items: center; }
label.checkbox input { width: auto; }

.turns { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; font-size: 0.85rem; }
.turn { padding: 0.15rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-dim); }
/* Marked, not enforced: it says whose turn it is and refuses nothing. */
.turn.current { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* ------------------------------------------------- the character card form */

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; }
.stat-cell { gap: 0.2rem; }
.stat-cell input { width: 100%; }

.invite-characters { display: grid; gap: 0.25rem; margin: 0.25rem 0; }
.invite-code {
  display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 1.1rem; letter-spacing: 0.08em;
  padding: 0.4rem 0.7rem;
  background: var(--panel-2); border: 1px dashed var(--accent);
  border-radius: var(--radius); color: var(--accent);
}

.carried { margin: 0.25rem 0 0.5rem; }
.carried-list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
label small { font-weight: normal; }

/* ------------------------------------------------------------- the rules */

.pages { max-width: none; }
.pages-layout { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .pages-layout { grid-template-columns: 16rem 1fr; align-items: start; } }

.page-nav { position: sticky; top: 1rem; font-size: 0.9rem; }
.page-nav h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-dim); margin: 1rem 0 0.4rem; border: none; }
.page-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.page-nav a { color: var(--ink-dim); text-decoration: none; display: block; padding: 0.15rem 0; }
.page-nav a:hover { color: var(--ink); }
.page-nav a.current { color: var(--accent); font-weight: 700; }

.page-body { max-width: 68ch; }
.page-body h1 { font-size: 1.5rem; margin: 0 0 1rem; }
.page-body p { margin: 0 0 0.9rem; }
.page-body blockquote { margin: 0 0 0.9rem; padding: 0.5rem 0.9rem; border-left: 3px solid var(--accent); background: var(--panel); }
.page-body ul, .page-body ol { margin: 0 0 0.9rem; padding-left: 1.4rem; }
.page-body img { max-width: 100%; height: auto; }