/*
 * Inkwll base styles.
 *
 * Colours, fonts and spacing are CSS variables, set once in :root below.
 * A future skin only needs to override these variables.
 */

:root {
  --color-bg: #f7f5f0;
  --color-surface: #ffffff;
  --color-text: #222222;
  --color-muted: #6b6b6b;
  --color-border: #dcd8ce;
  --color-accent: #5b3f8c;
  --color-accent-text: #ffffff;
  --color-notice: #e6f2e6;
  --color-alert: #f8e3e3;

  --font-body: Arial, Helvetica, sans-serif;
  --font-ui: Arial, Helvetica, sans-serif;

  --space: 1rem;
  --radius: 6px;
  --sidebar-width: 20rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1c1b1f;
    --color-surface: #26252b;
    --color-text: #e8e6e3;
    --color-muted: #a09ea8;
    --color-border: #3a3842;
    --color-accent: #a98be0;
    --color-accent-text: #1c1b1f;
    --color-notice: #23362a;
    --color-alert: #3d2426;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.5;
}

a { color: var(--color-accent); }

h1, h2, h3 { font-family: var(--font-heading, var(--font-ui)); line-height: 1.2; }
h2 { font-size: 1.1rem; margin-top: calc(var(--space) * 1.5); }

.muted { color: var(--color-muted); }

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space);
  padding: calc(var(--space) / 2) var(--space);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
}

.site-header__title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: bold; font-size: 1.2rem; text-decoration: none; }
.game-icon { object-fit: cover; border-radius: var(--radius); }
.game-icon--small { width: 1.6rem; height: 1.6rem; }
.game-icon--large { width: clamp(2.5rem, 7vw, 3.6rem); height: clamp(2.5rem, 7vw, 3.6rem); }
.game-intro__name { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.game-settings__icon .game-icon { display: block; margin-bottom: 0.4rem; }
.site-header__nav { display: flex; align-items: center; gap: var(--space); flex-wrap: wrap; }
.site-header__account { display: flex; align-items: center; gap: var(--space); margin-left: auto; flex-wrap: wrap; }
.site-header__player { color: var(--color-muted); }

.switcher { display: flex; align-items: center; gap: 0.5rem; }
.switcher__label { color: var(--color-muted); font-size: 0.9rem; }

/* Phones: the game's name and account on one line, then the links as icons
   only (their words stay for screen readers), so the bar is two short rows. */
@media (max-width: 600px) {
  .site-header { gap: 0.3rem 0.75rem; padding: 0.4rem 0.75rem; }
  .site-header__title { font-size: 1.05rem; }
  .site-header__account { order: 1; gap: 0.6rem; font-size: 0.9rem; }
  .site-header__nav { order: 2; width: 100%; gap: 0.25rem 1.1rem; }
  .site-header__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header__icon, .message-count__icon, .alert-bell__icon { width: 22px; height: 22px; }
  .switcher__label { display: none; }
  .switcher select { max-width: 8rem; }
  .switcher__options { right: auto; left: 0; }
  .site-header__preview { display: none; }
}

/* Layout: main content with the OOC chat beside it */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: calc(100vh - 3.5rem);
}

.main { padding: var(--space) calc(var(--space) * 2); max-width: 60rem; width: 100%; }
.main--narrow { margin: 0 auto; max-width: 26rem; }
/* The front page sits centred in the space beside the OOC Chat, as it does for guests. */
.main:has(.game-intro) { margin: 0 auto; }

@media (max-width: 800px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .main { padding: var(--space); }
}

/* Flash messages */

.flash { padding: 0.5rem var(--space); border-radius: var(--radius); font-family: var(--font-ui); }
.flash ul { margin: 0; padding-left: 1.2rem; }
.flash--notice { background: var(--color-notice); }
.flash--alert { background: var(--color-alert); }

/* Forms and buttons */

.form { display: flex; flex-direction: column; gap: var(--space); font-family: var(--font-ui); }
.form--inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field--checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
.field small { color: var(--color-muted); }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], input[type="date"], textarea, select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.button, input[type="submit"].button {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-text);
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
}

.button-link {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* button_to wraps buttons in a form; keep those forms inline. */
form.button_to { display: inline; }

/* Lists */

.list { padding-left: 1.2rem; }
.list li { margin-bottom: 0.25rem; }
.list--inline { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; padding: 0; }

.tag {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-text);
}

/* Rooms and exits */

.exits { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }

.exit-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 1rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
}

.message-count--unread { font-weight: bold; }
.message-count__number { display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.75rem; text-align: center; text-decoration: none; }
.conversations__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space); }
.conversations { list-style: none; padding: 0; }
.conversations__item { padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); }
.conversations__item--unread .conversations__subject { font-weight: bold; }
.conversations__meta { font-family: var(--font-ui); font-size: 0.85rem; margin-top: 0.2rem; }
.conversation__members { font-family: var(--font-ui); }
.conversation__messages { margin: var(--space) 0; }
.conversation-message { padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.conversation-message--mine { background: var(--color-bg); }
.conversation-message__header { display: flex; gap: 0.5rem; align-items: baseline; font-family: var(--font-ui); font-size: 0.9rem; }
.conversation-message__sender { font-weight: bold; }
.conversation-message__body { margin-top: 0.3rem; }
.conversation__actions { display: flex; justify-content: flex-end; }
.conversation__leave { margin-top: var(--space); font-size: 0.85rem; }
.room__save { margin: -0.5rem 0 1rem; font-family: var(--font-ui); font-size: 0.85rem; }
.my-places { list-style: none; padding: 0; }
.my-places__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.my-places__areas { display: block; font-family: var(--font-ui); font-size: 0.8rem; }
.my-places__link { font-weight: bold; }
.my-places__actions { display: flex; align-items: center; gap: var(--space); font-family: var(--font-ui); font-size: 0.9rem; }
.scene-setting__paths { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; margin: 0.3rem 0; font-size: 0.85rem; }
.scene-setting__path { display: inline; }
.exit-link--small { padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.exit-link:hover { background: var(--color-accent); color: var(--color-accent-text); }
.exit-link--disabled, .exit-link--disabled:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: default;
}

/* OOC chat */

.ooc-sidebar {
  display: flex;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  width: var(--sidebar-width);
  height: calc(100vh - 3.5rem - var(--tabs-height, 0px));
  position: sticky;
  top: 0;
}

.ooc-sidebar__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 0 var(--space) var(--space);
}

/* The header bar stays put while the messages scroll under it. */
.ooc-sidebar__title {
  margin: 0 calc(-1 * var(--space)) 0.5rem;
  padding: 0.6rem var(--space);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

/* The strip along the chat's left edge that folds it away and brings it back. */
.ooc-sidebar__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 1.75rem;
  padding: 0.75rem 0;
  border: none;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}

.ooc-sidebar__toggle:hover { color: inherit; background: var(--color-border); }
.ooc-sidebar__arrow { font-size: 1.25rem; line-height: 1; }
.ooc-sidebar__tab-label { display: none; writing-mode: vertical-rl; font-weight: bold; letter-spacing: 0.1em; }

.ooc-sidebar__count {
  min-width: 1.25rem;
  padding: 0.1rem 0.3rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
}

.ooc-sidebar__count[hidden] { display: none; }

.ooc-sidebar--collapsed { width: auto; }
.ooc-sidebar--collapsed .ooc-sidebar__body { display: none; }
.ooc-sidebar--collapsed .ooc-sidebar__toggle { border-right: none; }
.ooc-sidebar--collapsed .ooc-sidebar__arrow { transform: rotate(180deg); }
.ooc-sidebar--collapsed .ooc-sidebar__tab-label { display: block; }

/* On phones the chat drops down from a bar across the top of it
   ("v OOC Chat"), instead of folding out from the side. The bar's label
   stands in for the title. */
@media (max-width: 800px) {
  .ooc-sidebar { flex-direction: column; width: auto; border-left: none; border-top: 1px solid var(--color-border); height: 28rem; position: static; }
  .ooc-sidebar--collapsed { height: auto; }
  .ooc-sidebar__toggle { flex-direction: row; width: 100%; padding: 0.6rem var(--space); border-right: none; border-bottom: 1px solid var(--color-border);
    background: var(--color-accent); color: var(--color-accent-text); font-family: var(--font-ui); font-size: 1rem; }
  .ooc-sidebar__toggle:hover { background: var(--color-accent); color: var(--color-accent-text); opacity: 0.9; }
  .ooc-sidebar__tab-label, .ooc-sidebar--collapsed .ooc-sidebar__tab-label { display: block; writing-mode: horizontal-tb; letter-spacing: 0.03em; }
  .ooc-sidebar__arrow { transform: rotate(90deg); }
  .ooc-sidebar--collapsed .ooc-sidebar__arrow { transform: none; }
  .ooc-sidebar__count { background: var(--color-accent-text); color: var(--color-accent); }
  .ooc-sidebar__title { display: none; }
  .ooc-sidebar__body { min-height: 0; padding-top: 0.5rem; }
  .ooc-sidebar--collapsed .ooc-sidebar__toggle { border-bottom: none; }
}

.ooc-page { display: flex; flex-direction: column; height: 70vh; }

.ooc-messages {
  flex: 1;
  overflow-y: auto;
  font-family: var(--font-ui);
  font-size: 0.9rem;
}

.ooc-message { padding: 0.2rem 0; overflow-wrap: anywhere; }
.player-icon {
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.3rem;
  border-radius: 3px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  vertical-align: -0.15rem;
}
.ooc-message__author { font-weight: bold; }
.ooc-message__author--guest { font-weight: normal; font-style: italic; }
.player-icon--default { border-radius: 50%; }
.nib-icon__back { fill: var(--color-accent-text); }
.nib-icon__nib { fill: var(--color-accent); }
.nib-icon__slit { stroke: var(--color-accent-text); }
.nib-icon__hole { fill: var(--color-accent-text); }
.player-icon--guest .nib-icon__back { fill: var(--color-muted); }
.player-icon--guest .nib-icon__nib { fill: var(--color-surface); }
.player-icon--guest .nib-icon__slit { stroke: var(--color-muted); }
.player-icon--guest .nib-icon__hole { fill: var(--color-muted); }
.player-icon--image { object-fit: cover; }
.player-icon--large { width: 6rem; height: 6rem; margin: 0; border-radius: var(--radius); font-size: 2.5rem; vertical-align: middle; }
a.ooc-message__author { color: inherit; text-decoration: none; }
a.ooc-message__author:hover { text-decoration: underline; }
.player-profile__header, .character-profile__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space); margin-bottom: var(--space); }
.player-profile__name, .character-profile__name { margin: 0; }
.player-profile__kind, .character-profile__where { margin: 0.2rem 0 0.5rem; }
.player-characters { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.player-characters__item { display: flex; align-items: center; gap: 0.5rem; }
.ooc-message__time { color: var(--color-muted); font-size: 0.8rem; margin: 0 0.25rem; }
.ooc-message__body--deleted, .ooc-message__edited { color: var(--color-muted); }
.ooc-message__edited { font-size: 0.8rem; margin-left: 0.25rem; }
/* Edit, Delete and Block: hidden unless it's your message or you're staff
   (Block only for staff who can ban). */
.ooc-message__actions { display: none; align-items: center; vertical-align: middle; gap: 0.5rem; margin-left: 0.5rem; font-family: var(--font-ui); font-size: 0.8rem; }
.is-staff .ooc-message__actions { display: inline-flex; }
.ooc-message__block { display: none; }
.can-ban .ooc-message__block { display: inline-flex; }
.ooc-message__action.ooc-message__block, .ooc-message__action.ooc-message__block:hover { color: #c62828; }
.ooc-message__delete-form { display: inline-flex; }
.ooc-message__action { color: var(--color-muted); display: inline-flex; align-items: center; }
.ooc-message__action:hover { color: var(--color-accent); }
.ooc-message__icon { display: block; }

.ooc-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.ooc-form__problem { flex-basis: 100%; margin: 0; color: #a33; font-family: var(--font-ui); font-size: 0.85rem; }
.ooc-form__guest { flex-basis: 100%; margin: 0; font-family: var(--font-ui); font-size: 0.85rem; }
.ooc-form input.ooc-form__name { flex: 0 1 9rem; min-width: 0; }
.ooc-sidebar .ooc-form input.ooc-form__name { flex-basis: 100%; }
.ooc-form input[type="text"] { flex: 1; min-width: 0; }

/* Menu (extras that aren't the roleplay itself) */

.menu { position: relative; }
.menu summary { cursor: pointer; color: var(--color-accent); }
.menu__items {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 12rem;
  margin-top: 0.4rem;
  padding: 0.6rem var(--space);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.menu__link { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }

/* Built-in line icons (IconsHelper). They take the colour of the text around them. */
.icon { flex-shrink: 0; vertical-align: middle; }
.site-header__link, .message-count { display: inline-flex; align-items: center; gap: 0.3rem; }
.menu summary { display: flex; align-items: center; gap: 0.3rem; }
.menu__icon { opacity: 0.85; }
/* Wiki pages added to the Menu sit indented under Wiki, lined up with its text. */
.menu__wiki-page { padding-left: calc(16px + 0.45rem); white-space: nowrap; }
/* The tile drawn when an Area, Setting or board has no icon picture of its own. */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; background: var(--color-accent); color: var(--color-accent-text); }
.board__name { display: inline-flex; align-items: center; }
.board__icon.icon-tile .icon { width: 0.95rem; height: 0.95rem; }

/* The banner drawn when an Area or Setting has no banner picture: the look's
   accent colour with gold ink lines and drops (Slate blue and gold). */
.banner-default { position: relative; height: 5rem; background: var(--color-accent); overflow: hidden; }
.banner-default::before { content: ""; position: absolute; inset: 0; background: var(--color-accent-text); opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M0 22 C40 2 80 42 120 22 S200 2 240 22'/><path d='M0 54 C40 34 80 74 120 54 S200 34 240 54' opacity='.6'/></g><g fill='%23000'><path d='M60 37c-2 3-3 5-3 6.5a3 3 0 0 0 6 0c0-1.5-1-3.5-3-6.5z'/><path d='M180 68c-2 3-3 5-3 6.5a3 3 0 0 0 6 0c0-1.5-1-3.5-3-6.5z' opacity='.6'/></g></svg>") repeat center / 240px 80px; mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'><g fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'><path d='M0 22 C40 2 80 42 120 22 S200 2 240 22'/><path d='M0 54 C40 34 80 74 120 54 S200 34 240 54' opacity='.6'/></g><g fill='%23000'><path d='M60 37c-2 3-3 5-3 6.5a3 3 0 0 0 6 0c0-1.5-1-3.5-3-6.5z'/><path d='M180 68c-2 3-3 5-3 6.5a3 3 0 0 0 6 0c0-1.5-1-3.5-3-6.5z' opacity='.6'/></g></svg>") repeat center / 240px 80px; }
.description-image.banner-default { border-radius: var(--radius); }

/* Area pages: the Settings and Areas inside, as lists */

.where-now { font-family: var(--font-ui); color: var(--color-muted); }
.where-now .character-icon { width: 1.2rem; height: 1.2rem; font-size: 0.7rem; vertical-align: -0.25em; margin-right: 0.15rem; }
.where-now__name { font-weight: bold; }

.breadcrumbs { font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-muted); }

.board {
  margin: var(--space) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.board__header { padding: 0.6rem var(--space); border-bottom: 1px solid var(--color-border); }
.board__title { margin: 0; font-size: 1.15rem; }
section.board > .board__title { padding: 0.6rem var(--space); border-bottom: 1px solid var(--color-border); }
.board__description { margin: 0.25rem 0 0; color: var(--color-muted); }
.board__rows { list-style: none; margin: 0; padding: 0; }
.board__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
  padding: 0.5rem var(--space);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-ui);
}
.board__row:first-child { border-top: none; }
.board__name { font-weight: 600; }
.board__empty { padding: 0.5rem var(--space); margin: 0; }

/* Admin panel */

.admin-sections { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; font-family: var(--font-ui); }
.admin-sections a { font-weight: 600; margin-right: 0.5rem; }

.table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); }
.table th, .table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-border); }

.tree { padding-left: 1.2rem; font-family: var(--font-ui); }
.tree li { margin: 0.25rem 0; }

fieldset.field { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem var(--space); }

/* Admin: Build several Settings */

.bulk-build__rooms, .bulk-build__paths { display: flex; flex-direction: column; gap: var(--space); }
.bulk-build__room { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.5rem var(--space) var(--space); margin: 0; }
.bulk-build__room-number { font-weight: 600; padding: 0 0.25rem; }
.bulk-build__room .bulk-build__remove { align-self: flex-start; }
.bulk-build__path { padding-bottom: var(--space); border-bottom: 1px solid var(--color-border); }
.bulk-build__path select { max-width: 14rem; }
.bulk-build__path .bulk-build__remove { align-self: center; }

/* Images on Areas and Settings */

.description-image { margin: var(--space) 0; }
.description-image img, .board__image { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.board__image { max-height: 12rem; margin-bottom: 0.5rem; }
.image-preview { max-width: 12rem; height: auto; border-radius: var(--radius); }

/* Front page: the game's name and blurb, then one card per top-level Area
   with an Enter button. Shortcuts to Settings are tucked in a small fold. */

.game-intro {
  margin: calc(var(--space) * 0.25) 0 calc(var(--space) * 0.5);
  padding: var(--space);
  text-align: center;
  border-radius: var(--radius);
  background: var(--intro-image, none) center / cover;
}
.game-intro__name { margin: 0; font-size: clamp(2rem, 6vw, 3.2rem); letter-spacing: 0.02em; }
.game-intro__blurb { max-width: 40rem; margin: 0.4rem auto 0; color: var(--color-muted); font-size: 1.05rem; }
.game-intro__blurb p { margin: 0.3rem 0; }
.game-status { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1rem; text-align: center; }
.game-status > p { margin: 0.1rem 0; }

.places { display: flex; flex-direction: column; gap: var(--space); margin: calc(var(--space) * 0.5) 0 calc(var(--space) * 2); }
.place {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space);
  align-items: center;
  padding: var(--space);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.place__banner { grid-column: 1 / -1; width: calc(100% + 2 * var(--space)); max-height: 12rem; margin: calc(var(--space) * -1) calc(var(--space) * -1) var(--space);
  object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.place__name { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.4rem; }
a.place__title { color: inherit; text-decoration: none; }
a.place__title:hover { text-decoration: underline; }
.place__icon { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius); }
.place__summary { margin: 0.4rem 0 0; color: var(--color-muted); }
.place__activity { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-muted); }
.place__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.place__enter { min-width: 6rem; text-align: center; line-height: 1.5; }
.place__enter-form { margin: 0; }
.place__shortcuts { position: relative; font-family: var(--font-ui); font-size: 0.8rem; }
.place__shortcuts-toggle { cursor: pointer; color: var(--color-muted); list-style: none; }
.place__shortcuts-toggle::-webkit-details-marker { display: none; }
.place__shortcuts-list {
  position: absolute;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 14rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: 0.6rem var(--space);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

@media (max-width: 600px) {
  .place { grid-template-columns: 1fr; }
  .place__actions { flex-direction: row; align-items: center; justify-content: space-between; margin-top: var(--space); }
}

/* Area and Setting pages */

.lede { font-size: 1.1rem; color: var(--color-muted); }

/* A Setting's Area, introduced above the Setting's name. */
.area-intro { margin: 0.5rem 0 var(--space); }
.area-intro__banner img { display: block; max-width: 100%; max-height: 14rem; width: 100%; object-fit: cover; border-radius: var(--radius); }
.area-intro__summary { margin: 0.5rem 0 0; color: var(--color-muted); font-style: italic; }
.area-intro__name { font-weight: bold; font-style: normal; color: inherit; }
.page-title__icon { width: 2.2rem; height: 2.2rem; object-fit: cover; border-radius: var(--radius); margin-right: 0.6rem; vertical-align: middle; }
.board__icon { width: 1.5rem; height: 1.5rem; object-fit: cover; border-radius: 3px; margin-right: 0.4rem; vertical-align: middle; }
.board__summary { flex: 1; color: var(--color-muted); }

/* Background pictures, from Admin → Look or an Area's or Setting's own.
   --page-image goes behind the whole page, --box-image behind boxes. */

body { background: var(--color-bg) var(--page-image, none) center top / cover fixed; }
.site-header, .ooc-sidebar, .board, .place, .admin-menu, .chapter-tabs, .scene-setting, .notice-box,
.conversation-message, .pose--narration, .pending-rolls, .menu__items, .mini-profile {
  background-image: var(--box-image, none);
  background-size: cover;
  background-position: center;
}

/* Admin panel menu: links grouped under headings, down the right-hand side.
   To put it on the left instead, a skin can add: .admin-menu { order: -1; } */

.layout--admin { grid-template-columns: minmax(0, 1fr) auto auto; }

.admin-menu {
  width: 14rem;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  /* Sized to the screen and stuck in place, like the OOC Chat. */
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100vh - 3.5rem - var(--tabs-height, 0px));
}

/* The button only shows on phones, where the menu folds up. */
.admin-menu__button { display: none; }

.admin-menu__body {
  height: 100%;
  overflow-y: auto;
  padding-bottom: var(--space);
}

.admin-menu__title {
  margin: 0;
  padding: 0.6rem var(--space);
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 1rem;
  letter-spacing: 0.03em;
}

.admin-menu__group { margin-top: 0.75rem; }

.admin-menu__heading {
  margin: 0;
  padding: 0.25rem var(--space);
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-menu__list { margin: 0; padding: 0; list-style: none; }

.admin-menu__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem var(--space);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.admin-menu__link:hover { background: var(--color-bg); }
.admin-menu__link.is-current {
  border-left-color: var(--color-accent);
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: bold;
}
.admin-menu__link--overview { margin-top: 0.5rem; }

.admin-menu__count {
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 800px) {
  .layout--admin { grid-template-columns: minmax(0, 1fr); }
  .admin-menu { order: -1; width: auto; position: static; height: auto; border-left: none; border-bottom: 1px solid var(--color-border); }
  .admin-menu__button {
    display: block;
    padding: 0.6rem var(--space);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: bold;
    cursor: pointer;
  }
  .admin-menu__button::after { content: " ▾"; }
  .admin-menu[open] .admin-menu__button::after { content: " ▴"; }
  .admin-menu__button-current { font-weight: normal; }
  .admin-menu__title { display: none; }
  .admin-menu__body { height: auto; overflow-y: visible; }
}

.from-afar { margin: var(--space) 0; padding: 0.6rem var(--space); border: 1px dashed var(--color-border); border-radius: var(--radius); }
.from-afar p { margin-top: 0; }

/* Small labels */

.badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--color-muted);
  vertical-align: middle;
}
.badge--private, .badge--hidden { border-color: var(--color-accent); color: var(--color-accent); }
.badge--turn { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-text); }

.button--quiet { background: transparent; color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Character icons: a picture, or the first letter of the name */

.character-icon { display: inline-block; flex: none; object-fit: cover; border-radius: var(--radius); background: var(--color-border); }
.character-icon--tiny { width: 1.5rem; height: 1.5rem; }
.character-icon--small { width: 3rem; height: 3rem; }
.character-icon--large { width: 6rem; height: 6rem; }
.character-icon--initial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-accent); color: var(--color-accent-text);
  font-family: var(--font-ui); font-weight: bold;
}
.character-icon--tiny.character-icon--initial { font-size: 0.75rem; }
.character-icon--small.character-icon--initial { font-size: 1.25rem; }
.character-icon--large.character-icon--initial { font-size: 2.5rem; }
.character-heading { display: flex; align-items: center; gap: var(--space); }

/* Chapter tabs, under the header on every page */

.chapter-tabs {
  display: flex; align-items: flex-end; gap: 0.25rem;
  padding: 0.4rem calc(var(--space) * 2) 0;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
}
.chapter-tabs__list { display: flex; gap: 0.25rem; overflow-x: auto; flex: 1; min-width: 0; }
.chapter-tabs--collapsed .chapter-tabs__list { display: none; }
.chapter-tabs--collapsed { padding-bottom: 0.25rem; padding-top: 0.25rem; align-items: center; }
.chapter-tabs__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: flex-end; flex: none;
  padding: 0.35rem 0.75rem; min-width: 8rem; min-height: 3.5rem;
  border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-bg); color: var(--color-text); font: inherit; font-weight: bold; cursor: pointer;
}
.chapter-tabs__toggle:hover { border-color: var(--color-accent); }
.chapter-tabs__toggle-open { display: inline-flex; align-items: center; gap: 0.3rem; }
.chapter-tabs__toggle-closed { display: none; }
/* Folded away: just a small "+ (3)". */
.chapter-tabs--collapsed .chapter-tabs__toggle { min-width: 0; min-height: 0; padding: 0.15rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 0.85rem; font-weight: normal; align-self: center; }
.chapter-tabs--collapsed .chapter-tabs__toggle-open { display: none; }
.chapter-tabs--collapsed .chapter-tabs__toggle-closed { display: inline; }
.chapter-tabs__arrow { transition: transform 0.15s; }
.chapter-tabs--collapsed .chapter-tabs__arrow { transform: rotate(-90deg); }
/* Only worth showing while the tabs are folded away: who's waiting is on the tabs otherwise. */
.chapter-tabs__turn-flag { display: none; align-items: center; gap: 0.2rem; color: var(--color-accent); font-weight: bold; }
.chapter-tabs--collapsed .chapter-tabs__turn-flag { display: inline-flex; animation: chapter-turn-nudge 1.4s ease-in-out infinite; }
@keyframes chapter-turn-nudge { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-12deg); } 50% { transform: translateY(0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .chapter-tabs--collapsed .chapter-tabs__turn-flag { animation: none; } }
.chapter-tab-wrap { position: relative; display: flex; flex: none; }
.chapter-tab-wrap .chapter-tab { flex: 1; }
.chapter-tab__close-form { margin: 0; position: absolute; top: 0.2rem; right: 0.2rem; }
.chapter-tab__close { display: inline-flex; padding: 0.15rem; border: none; border-radius: 50%; background: none; color: var(--color-muted); cursor: pointer; line-height: 0; }
.chapter-tab__close:hover { background: var(--color-border); color: var(--color-text); }
.chapter-tab-wrap:has(.chapter-tab__close) .chapter-tab { padding-right: 1.6rem; }
.chapter-tab {
  display: grid; grid-template-columns: auto auto; column-gap: 0.5rem; align-items: center;
  padding: 0.35rem 0.75rem; min-width: 8rem; max-width: 16rem;
  border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--color-bg); color: var(--color-text); text-decoration: none;
}
.chapter-tab:hover { border-color: var(--color-accent); }
.chapter-tab--current { background: var(--color-surface); border-color: var(--color-accent); box-shadow: inset 0 3px 0 var(--color-accent); }
.chapter-tab__title { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-tab__setting { grid-column: 1; font-size: 0.8rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-tab__turn { grid-column: 2; grid-row: 2; font-size: 0.75rem; color: var(--color-accent); font-weight: bold; }
.chapter-tab__badges { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 0.3rem; }
/* The same twitching quill as on the folded Chapters button, when it's your turn. */
.chapter-tab__quill { display: inline-flex; color: var(--color-accent); animation: chapter-turn-nudge 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chapter-tab__quill { animation: none; } }
.chapter-tab__unread {
  min-width: 1.25rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--color-accent); color: var(--color-accent-text); font-size: 0.75rem; text-align: center;
}

/* All Places, grouped by Area */
.room-index { margin-bottom: var(--space); }
.room-index__area { font-size: 1.15rem; margin: 0 0 0.25rem; }
.room-index--depth-1 { margin-left: 1.5rem; }
.room-index--depth-2, .room-index--depth-3 { margin-left: 3rem; }

/* Which character writes in a Chapter */
.writing-as { margin-bottom: 0.5rem; }
.writing-as__form { display: flex; align-items: center; gap: 0.5rem; }
.writing-as__warning { margin-top: 0.5rem; }

/* The twitching quill beside Areas and Settings where it's your turn. */
a.turn-quill { text-decoration: none; }
.turn-quill { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; color: var(--color-accent); animation: chapter-turn-nudge 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .turn-quill { animation: none; } }

/* My Characters: a section per Group */
.my-characters__group { margin-bottom: var(--space); }
.my-characters__heading { border-bottom: 2px solid var(--group-colour, var(--color-border)); padding-bottom: 0.2rem; }
.my-characters__item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Admin → Characters: sections that fold away */
.admin-characters__section { margin-bottom: var(--space); }
.admin-characters__summary { cursor: pointer; margin: 0 0 0.5rem; }

/* Chapters listed in a Setting */

.scene-list .list { list-style: none; padding: 0; }
.scene-list__item { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.scene-list__item--idle { opacity: 0.7; }
.scene-list__title { font-weight: bold; margin-right: 0.25rem; }
.scene-list__meta { font-size: 0.9rem; }
.new-scene { margin-top: var(--space); }
.new-scene > summary { list-style: none; }
.new-scene > summary::-webkit-details-marker { display: none; }
.new-scene[open] > summary { margin-bottom: var(--space); }
.new-scene fieldset { border: none; padding: 0; margin: 0; }
.new-scene legend, .form legend { padding: 0; margin-bottom: 0.25rem; }

/* A Chapter */

.scene-setting {
  display: flex; gap: var(--space); align-items: flex-start;
  padding: 0.75rem; margin-bottom: var(--space);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.scene-setting__image { width: 9rem; height: 6rem; object-fit: cover; border-radius: var(--radius); flex: none; }
.scene-setting__body { min-width: 0; }
.scene-setting__body .breadcrumbs { margin: 0; }
.scene-setting__name { margin: 0.1rem 0; font-size: 1.15rem; font-weight: bold; }
.scene-setting__description summary { cursor: pointer; color: var(--color-muted); font-family: var(--font-ui); font-size: 0.9rem; }
.scene-setting__here { margin: 0.25rem 0 0; font-size: 0.9rem; }

.scene__header h1 { margin-bottom: 0.25rem; }
.scene__meta { margin-top: 0; font-family: var(--font-ui); font-size: 0.9rem; }

.scene-people { margin-bottom: var(--space); font-family: var(--font-ui); }
.scene-people__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0; margin: 0 0 0.5rem; }
.scene-people__person { display: inline-flex; align-items: center; gap: 0.35rem; }
.scene-people__person--turn { font-weight: bold; }
.scene-people__actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space); font-size: 0.9rem; }
.scene-people__pause summary { cursor: pointer; color: var(--color-accent); }
.scene-people__pause[open] { flex-basis: 100%; }
.scene-people__pause .form { margin-top: 0.4rem; }
.scene-people__invite { margin-top: 0.5rem; }

.passages { border-top: 1px solid var(--color-border); }
.passages__empty { padding: var(--space) 0; }

.pose { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.pose--removed .pose__icon { opacity: 0.4; }
.pose__icon { flex: none; padding: 0; border: none; background: none; cursor: pointer; }
.pose__main { min-width: 0; flex: 1; }
.pose__header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.9rem; }
.pose__name { padding: 0; border: none; background: none; font: inherit; font-weight: bold; color: var(--color-accent); cursor: pointer; }
.pose__actions { display: inline-flex; gap: 0.5rem; margin-left: auto; font-size: 0.85rem; }
.pose__body { margin-top: 0.25rem; overflow-wrap: anywhere; }
.pose__tag {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--color-border);
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pose__played-by { font-size: 0.8rem; }
.pose__played-by .button-link { font-size: inherit; }
.pose__name--small { font-weight: 600; font-size: 0.85rem; }
span.pose__icon { cursor: default; }
.character-icon--npc { background: var(--color-muted); }

/* Narration: scene-setting text, set apart and without an icon. */
.pose--narration { padding: 1rem; margin: 0.5rem 0; border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); background: var(--color-surface); }
.pose--narration .pose__body { font-style: italic; }

/* OOC lines: small and quiet, so they don't break up the story. */
.pose--ooc { padding: 0.4rem 0; }
.pose--ooc .pose__header { font-size: 0.8rem; }
.pose--ooc .pose__body { margin-top: 0.1rem; font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-muted); }
.passages__ooc-toggle { font-family: var(--font-ui); font-size: 0.85rem; }
.pose__body p:first-child { margin-top: 0; }
.pose__body p:last-child { margin-bottom: 0; }
.pose--system {
  display: block; margin: 0; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border);
  color: var(--color-muted); font-family: var(--font-ui); font-size: 0.85rem; font-style: italic; text-align: center;
}

.mini-profile {
  max-width: 22rem; padding: var(--space); margin: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
}
.mini-profile:popover-open { display: flex; gap: var(--space); }
.mini-profile__name { margin: 0; font-weight: bold; font-size: 1.1rem; }
.mini-profile__body p { margin: 0.25rem 0; }

/* The turn bar and the writing box stay at the bottom of the screen. */
.scene__footer {
  position: sticky; bottom: 0;
  padding: 0.5rem 0 var(--space);
  background: var(--color-bg); border-top: 1px solid var(--color-border);
}
.turn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; font-family: var(--font-ui); font-size: 0.9rem; }
.turn-bar__warning { color: #a33; }
.turn-bar__timer { margin-left: auto; font-size: 0.8rem; }
.composer .form { gap: 0.4rem; }
.composer textarea { width: 100%; resize: vertical; font-family: var(--font-body); font-size: 1rem; }
.composer__label { font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-muted); }
.composer__kinds { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; border: none; font-family: var(--font-ui); font-size: 0.85rem; }
.composer__kind { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.composer__npc { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.85rem; }
.composer__npc[hidden] { display: none; }
.composer__npc input { flex: 1; min-width: 0; max-width: 20rem; }
.composer[data-kind="ooc"] textarea { background: var(--color-bg); font-family: var(--font-ui); font-size: 0.9rem; }
.composer__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space); }
.composer__warning {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem; border-radius: var(--radius); background: var(--color-alert); font-family: var(--font-ui);
}
.composer__warning[hidden] { display: none; }
.scene-join { padding-top: 0.25rem; }
.scene-join p { margin: 0.4rem 0 0; }

@media (max-width: 800px) {
  .chapter-tabs { padding-inline: var(--space); }
  .scene-setting__image { width: 5rem; height: 5rem; }
}

/* Latest activity on front-page boards */
.board-row__activity { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.board-row__latest { font-weight: bold; }
@media (max-width: 800px) {
  .board-row__activity { align-items: flex-start; }
}

/* The Where list */
.where-room__areas { margin: 1rem 0 0; font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-muted); }
.where-room__areas + h2 { margin-top: 0; }
.where-room__idle { font-family: var(--font-ui); font-size: 0.8rem; }
.where-room h2 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.where-room__list { margin-top: 0; }
.category__latest { margin: 0.25rem 0 0.5rem; font-family: var(--font-ui); font-size: 0.9rem; }

/* Notices inside pages (finished Chapters, report forms) */
.notice-box {
  padding: 0.6rem var(--space); margin: var(--space) 0;
  border-left: 4px solid var(--color-accent); border-radius: var(--radius);
  background: var(--color-surface); font-family: var(--font-ui);
}
.notice-box p { margin: 0.25rem 0; }
.report-quote { margin: var(--space) 0; padding: 0.5rem var(--space); border-left: 3px solid var(--color-border); background: var(--color-surface); }
.staff-warning { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; }

.pose__report { margin-left: auto; font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-muted); }
.pose__header .pose__report { margin-left: 0; }
.pose__staff-note { margin: 0.25rem 0; font-family: var(--font-ui); font-size: 0.8rem; color: #a33; }
.pose__original { font-size: 0.9rem; color: var(--color-muted); }
.pose__staff-action { font-family: var(--font-ui); font-size: 0.8rem; }

/* The Archives */
.manuscript { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.manuscript__title { margin: 0; font-size: 1.1rem; }
.manuscript__meta { margin: 0.2rem 0 0; font-family: var(--font-ui); font-size: 0.9rem; }

/* Character profiles: tabs, fields, gallery, relationships */

.profile-tabs, .directory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: var(--space) 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-ui);
}
.profile-tabs__tab, .directory-tabs__tab {
  padding: 0.4rem 0.9rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  text-decoration: none;
}
.profile-tabs__tab--current, .directory-tabs__tab--current {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  margin-bottom: -1px;
}

.details-list { margin: 0 0 var(--space); }
.profile-fields__row {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--color-border);
}
.details-list__term { color: var(--color-muted); font-family: var(--font-ui); }
.details-list__value { margin: 0; }
.details-list__value .prose p:first-child { margin-top: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space);
}
.gallery__item { margin: 0; }
.gallery__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.gallery__caption { margin-top: 0.3rem; font-size: 0.9rem; }

.relationships { list-style: none; margin: 0 0 var(--space); padding: 0; }
.relationships__item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.relationships__who { display: flex; align-items: center; gap: 0.5rem; }
.relationships__name { font-weight: bold; }
.relationships__note { margin-left: 3rem; }
.relationships__note p { margin: 0.3rem 0; }
.relationships__remove { margin-left: 3rem; font-size: 0.85rem; }

/* SOUL: the character sheet, XP and rolls */

.soul-sheet__points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.6rem var(--space);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-ui);
}
.soul-sheet__aspects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--space);
  margin: var(--space) 0;
}
.soul-aspect { margin: 0; }
.soul-aspect .soul-trait {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.3rem 0;
}
.soul-aspect .soul-trait--aspect { font-weight: bold; }
.soul-trait__input { width: 4.5rem; }
.soul-aspect__about { display: block; margin-bottom: 0.4rem; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.soul-sheet__finish { margin-top: var(--space); }
.soul-sheet__table .soul-trait--aspect { background: var(--color-surface); font-weight: bold; }
.soul-sheet__table .soul-trait--skill .soul-trait__name { padding-left: 1.5rem; }
.soul-xp__summary { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-ui); }
.soul-staff { margin-top: calc(var(--space) * 2); padding-top: var(--space); border-top: 1px dashed var(--color-border); }
.soul-staff .button_to { display: inline-block; margin-top: 0.5rem; }
.soul-admin__aspect-name { display: flex; align-items: baseline; gap: 1rem; }
.soul-admin__actions { display: inline-flex; gap: 0.75rem; font-size: 0.9rem; font-weight: normal; }
.soul-admin__actions .button_to { display: inline; }

.roll-box { margin-top: 0.75rem; font-family: var(--font-ui); }
.roll-box__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-top: 0.5rem; }
.roll-box__field { margin: 0; }
.pose--roll { border-left: 3px solid var(--color-accent); padding-left: 0.75rem; }
.roll-details { font-size: 0.85rem; color: var(--color-muted); }
.button--small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

/* Retired characters stay in logs, greyed out */
.pose--retired .pose__icon, .pose--retired .pose__name { opacity: 0.55; filter: grayscale(1); }
.character-profile--retired .character-icon { filter: grayscale(1); }
.table__row--retired { color: var(--color-muted); }

/* SOUL extras: Boons and Banes, Storyteller rolls, Culminations, history */
.soul-bnbs__list, .soul-culminations__list, .soul-history__list, .soul-reviews { list-style: none; margin: 0 0 var(--space); padding: 0; }
.soul-bnb, .soul-culmination, .soul-reviews__item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.soul-bnb__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.soul-bnb--boon .soul-bnb__kind { border-color: var(--color-accent); color: var(--color-accent); }
.soul-bnb--resolved { opacity: 0.6; }
.soul-bnb__staff, .soul-reviews__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 0.3rem; font-size: 0.9rem; }
.soul-history__item { padding: 0.25rem 0; }
.soul-audit { margin-top: var(--space); font-size: 0.9rem; }
.pending-rolls { margin-bottom: var(--space); padding: 0.75rem var(--space); border: 1px dashed var(--color-accent); border-radius: var(--radius); background: var(--color-surface); }
.pending-roll + .pending-roll { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.pending-roll__form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.soul-reviews__deny { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.soul-reviews__deny input[type=text] { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }

/* --- Roster and character directory ------------------------------------- */
.roster-status__note, .roster-apply__note { margin: 0.4rem 0; }
.roster-status__apply { margin-top: 0.4rem; }
.character-profile__roster-request { display: inline-block; }
.roster-admin__list { list-style: none; margin: 0 0 var(--space); padding: 0; }
.roster-admin__item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.roster-admin__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.3rem; font-size: 0.9rem; }
.roster-admin__deny, .roster-admin__put-on { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.roster-admin__deny input[type=text], .roster-admin__put-on input[type=text] { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.directory__filter { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--space); }
.directory__value { flex: 1 1 10rem; min-width: 0; max-width: 18rem; }
.directory__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space); }
.directory__item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
.directory__link { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-decoration: none; }
.directory__name { font-weight: 600; }
.directory__value-shown { font-size: 0.85rem; overflow-wrap: anywhere; }
.table__row--archived { opacity: 0.6; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.account-password { margin-top: 2rem; }
.account-password__link-field { width: 100%; font-family: monospace; font-size: 0.85rem; }

/* --- Jcink add-ons: groups, passage details, labels, alerts, tracker ----- */
.character-name--grouped { color: var(--group-colour); }
a.character-name--grouped, button.character-name--grouped { color: var(--group-colour); }
.character-profile__group { margin: 0; font-weight: 600; }
.pose__details, .mini-profile__details { display: block; font-size: 0.85rem; }
.directory__group { font-size: 0.85rem; }
.scene-labels { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.scene-label { display: inline-block; padding: 0.05rem 0.45rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.8rem; }
.scene-list__subtitle, .scene__subtitle { margin: 0.1rem 0 0; font-style: italic; }
.scene-form__labels { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.alert-bell { display: inline-flex; align-items: center; gap: 0.2rem; }
.alert-bell__icon { vertical-align: middle; }
.alert-bell__number { display: inline-block; min-width: 1.2rem; padding: 0 0.3rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.8rem; text-align: center; }
.alerts__list { list-style: none; margin: 0; padding: 0; }
.alerts__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.alerts__item--unread .alerts__text { font-weight: 600; }
.alerts__text { margin: 0; }
.alerts__time { font-size: 0.85rem; }
.chapter-tracker__character { margin-bottom: var(--space); overflow-x: auto; }
.chapter-tracker__subtitle { display: block; font-size: 0.85rem; }
.chapter-tracker__row--my-turn .chapter-tracker__turn { color: var(--color-accent); }

/* --- Game time ------------------------------------------------------------ */
.game-time { margin: 0 0 var(--space); }
.game-time__date { font-weight: 600; }
.game-time__weather { color: var(--color-muted); }
.chapter-tracker__when { display: block; font-size: 0.85rem; }
.scene-form__when .form--inline { flex-wrap: wrap; }
.online-now { margin-top: calc(var(--space) * 2); }

/* --- Inklings ------------------------------------------------------------- */
.inklings__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.inklings__list, .inkling__entries { list-style: none; margin: 0; padding: 0; }
.inklings__item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.inklings__heading { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.inklings__title { font-weight: 600; }
.inklings__item--unread .inklings__title { font-weight: 700; }
.inklings__new { color: var(--color-accent); font-size: 0.85rem; font-weight: 600; }
.inklings__meta { margin: 0.2rem 0 0; font-size: 0.9rem; }
.inkling__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.inkling__status { margin: var(--space) 0; }
.inkling__review { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.inkling__changes, .inkling__share-form, .inkling__edit-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.inkling__changes input[type=text], .inkling__share-form input[type=text], .inkling__edit-form input[type=text] { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.inkling-entry { padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); }
.inkling-entry__header { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; }
.inkling-entry__author { font-weight: 600; }
.inkling-entry__ref { margin-left: auto; font-size: 0.8rem; text-decoration: none; }
.inkling-entry__system { margin: 0; font-size: 0.9rem; font-style: italic; display: flex; gap: 0.5rem; }
.inkling-entry--private, .inkling-entry--gm, .inkling-entry--personal { border-left: 3px solid var(--color-border); padding-left: 0.6rem; }
.inkling-entry--gm { border-left-color: var(--color-accent); }
.inkling-entry--new .inkling-entry__author::after { content: " · new"; color: var(--color-accent); font-weight: 400; font-size: 0.85rem; }
.inkling__kinds { display: flex; flex-direction: column; gap: 0.25rem; }
.inkling__reward-details { flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.inkling__reward-details select, .inkling__reward-details input { max-width: 100%; }
.inkling__shares .button-link { margin-left: 0.5rem; }
.inkling__close { margin-top: var(--space); }
.inkling-new__types { display: flex; flex-direction: column; gap: 0.35rem; }

/* --- Grimoire -------------------------------------------------------------- */
.grimoire__spells, .grimoire-admin__proposals { list-style: none; margin: 0 0 var(--space); padding: 0; }
.grimoire-spell, .grimoire-admin__proposal { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); }
.grimoire-spell__name { margin: 0; }
.grimoire-spell__meta { display: block; font-size: 0.85rem; }
.grimoire-spell--out-of-reach .grimoire-spell__name { opacity: 0.7; }
.grimoire__branch-name { font-size: 1rem; margin: var(--space) 0 0.25rem; }
.grimoire-admin__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.grimoire-admin__reject { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.grimoire-admin__reject input[type=text] { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.grimoire-admin__edit { font-size: 0.85rem; font-weight: 400; margin-left: 0.5rem; }

/* --- Wiki ------------------------------------------------------------------ */
.wiki__header, .wiki-page__header { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.wiki__search { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: var(--space) 0; }
.wiki__search input[type=search] { flex: 1 1 12rem; min-width: 0; max-width: 24rem; }
.wiki__tags, .wiki-page__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wiki__tag { text-decoration: none; }
.wiki__tag--current { background: var(--color-accent); color: var(--color-accent-text); }
.wiki__list, .wiki-history__list { list-style: none; margin: 0; padding: 0; }
.wiki__item, .wiki-history__item { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.wiki__title { font-weight: 600; }
.wiki__updated, .wiki__locked, .wiki-history__summary { font-size: 0.85rem; }
.wiki-page__crumbs { margin: 0 0 0.25rem; font-size: 0.9rem; }
.wiki-page__title { margin: 0; }
.wiki-page__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.wiki-page__footer { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: calc(var(--space) * 2); padding-top: 0.5rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.wiki-body { line-height: 1.6; overflow-wrap: anywhere; }
.wiki-body img { max-width: 100%; height: auto; }
.wiki-body table { border-collapse: collapse; display: block; overflow-x: auto; }
.wiki-body th, .wiki-body td { border: 1px solid var(--color-border); padding: 0.3rem 0.6rem; }
.wiki-body pre { overflow-x: auto; padding: 0.6rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.wiki-body blockquote { margin-left: 0; padding-left: var(--space); border-left: 3px solid var(--color-border); }
.wiki-embed { margin: var(--space) 0; }
.wiki-characters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space); }
.wiki-characters__link, .wiki-character__link { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; text-decoration: none; }
.wiki-characters__name, .wiki-character__name { font-weight: 600; }
.wiki-character { display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.75rem; border: 1px solid var(--color-border); background: var(--color-surface); }
.wiki-manuscripts, .wiki-settings, .wiki-pages-list { padding-left: 1.2rem; }
.wiki-manuscripts__meta, .wiki-settings__area { font-size: 0.85rem; margin-left: 0.35rem; }
.wiki-form__body { font-family: ui-monospace, monospace; }
.wiki-form__tabs { display: flex; gap: 0.25rem; margin-bottom: -1px; }
.wiki-form__tab { padding: 0.3rem 0.9rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--color-bg); color: var(--color-muted); cursor: pointer; font: inherit; }
.wiki-form__tab.is-current { background: var(--color-surface); color: var(--color-text); font-weight: bold; }
.wiki-form__preview { min-height: 10rem; padding: var(--space); border: 1px solid var(--color-border); background: var(--color-surface); }
.wiki-form__help-list { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.wiki-form__help-list code { overflow-wrap: anywhere; }
.wiki-body h2 { font-size: 1.4rem; }
.wiki-body h3 { font-size: 1.15rem; }

/* --- Admin: Features and Look ---------------------------------------------- */
.features__item { display: flex; flex-direction: column; gap: 0.2rem; }
.features__hint { margin: 0 0 0 1.6rem; font-size: 0.9rem; }
.skin-presets__list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--space); }
.skin-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.6rem 0.8rem; cursor: pointer;
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
.skin-preset:hover { border-color: var(--color-accent); }
.skin-preset__swatches { display: flex; }
.skin-preset__swatch { width: 1.5rem; height: 1.5rem; background: var(--swatch); border: 1px solid var(--color-border); }
.skin-form__colours { display: flex; flex-direction: column; gap: 0.35rem; }
.skin-form__row { display: grid; grid-template-columns: minmax(0, 1fr) 4rem 4rem; gap: 0.5rem; align-items: center; max-width: 32rem; }
.skin-form__colour { width: 100%; height: 2rem; padding: 0; border: 1px solid var(--color-border); background: none; }
.skin-form__css { font-family: ui-monospace, monospace; }
.admin-setup { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: var(--space); }
.skin-preset__current { font-size: 0.75rem; }

/* --- Storyteller tools ----------------------------------------------------- */
.storyteller-tools { margin-top: var(--space); }
.storyteller-tools__section { margin: 0.75rem 0; }
.storyteller-tools__call-form, .storyteller-tools__award-who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.storyteller-tools__call-form select { max-width: 100%; }
.storyteller-tools__amount { width: 5rem; }
.storyteller-sheet { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); }
.storyteller-sheet__name { margin: 0 0 0.25rem; font-size: 1rem; }
.storyteller-sheet__ratings { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.75rem; margin: 0; font-size: 0.9rem; }
.storyteller-sheet__aspect { font-weight: 600; }
.storyteller-sheet__skills { margin: 0; }

/* The "How it looks" part of the Area and Setting forms */

.look-fields { display: flex; flex-direction: column; gap: var(--space); min-width: 0; margin: 0; padding: 0.5rem var(--space) var(--space);
  border: 1px solid var(--color-border); border-radius: var(--radius); }
.look-fields .fieldset__legend { padding: 0 0.25rem; font-weight: 600; }
.image-preview--icon { width: 4rem; height: 4rem; object-fit: cover; }

/* A Setting's way around: its Paths and who's here, side by side in one box
   right under the description. */

.room-ways {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space) calc(var(--space) * 2);
  margin: var(--space) 0;
  padding: 0 var(--space) var(--space);
  background: var(--color-surface) var(--box-image, none) center / cover;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.room-ways .section-title { margin-top: var(--space); }
.room-ways .exit-link { font-size: 1.05rem; padding: 0.45rem 0.9rem; }

@media (max-width: 600px) {
  .room-ways { grid-template-columns: 1fr; gap: 0; }
}

/* Forum boards (news, advertising, wanted ads). Their cards reuse the Area
   .place card styles; these are the extras and the board and thread pages. */

.forum-section { margin: 0 0 calc(var(--space) * 2); }
.forum-section__title a { color: inherit; text-decoration: none; }
.forum-board__title { color: inherit; text-decoration: none; }
.forum-board__title:hover, .forum-section__title a:hover { text-decoration: underline; }
.forum-board-page__rules { font-family: var(--font-ui); font-size: 0.9rem; }
.forum-topics { width: 100%; }
.forum-topic-row__title a { font-weight: bold; }
.forum-topic-row__starter { margin-left: 0.3rem; font-size: 0.85rem; }
.forum-topic-row__replies, .forum-topic-row__latest { white-space: nowrap; font-family: var(--font-ui); font-size: 0.9rem; }
.forum-topic-row--pinned { background: var(--color-surface); }
.forum-topic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.9rem; }
.forum-posts { margin: var(--space) 0; border-top: 1px solid var(--color-border); }
.forum-post { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.forum-post__header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.9rem; }
.forum-author { font-weight: bold; }
.forum-post__actions { display: flex; gap: 0.5rem; margin-left: auto; }
.forum-post__delete { display: inline; }
.forum-post__body { margin-top: 0.4rem; line-height: 1.6; overflow-wrap: anywhere; }
.forum-post__body img { max-width: 100%; height: auto; }
.forum-post__body blockquote { margin-left: 0; padding-left: var(--space); border-left: 3px solid var(--color-border); }
.forum-pages { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: var(--space) 0; font-family: var(--font-ui); }
.forum-pages__link--current { font-weight: bold; }
.forum-reply-form textarea { width: 100%; }

@media (max-width: 600px) {
  .forum-topic-row__latest, .forum-topics__latest-heading { display: none; }
}

/* Path directions, and the compass on a Setting's page (Admin, Features).
   Each point sits at its --angle around the circle. */

.exit-link__direction { font-size: 0.75em; font-weight: bold; opacity: 0.75; letter-spacing: 0.03em; }

.compass {
  --compass-size: 15rem;
  position: relative;
  width: var(--compass-size);
  height: var(--compass-size);
  margin: 0.5rem auto var(--space);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-family: var(--font-ui);
}
.compass__centre {
  position: absolute; inset: 30%;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 0.8rem; color: var(--color-muted);
  border: 1px dashed var(--color-border); border-radius: 50%;
}
.compass__form { display: contents; }
.compass__point {
  position: absolute;
  top: 50%; left: 50%;
  width: 2.6rem; height: 1.8rem; margin: -0.9rem 0 0 -1.3rem;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(var(--angle)) translateY(calc(var(--compass-size) / -2 + 1.1rem)) rotate(calc(var(--angle) * -1));
  font-size: 0.75rem; color: var(--color-muted);
  background: none; border: none; padding: 0;
}
.compass__point--main { font-weight: bold; }
.compass__point--path {
  font-weight: bold; color: var(--color-accent); background: var(--color-surface);
  border: 1px solid var(--color-accent); border-radius: var(--radius); cursor: pointer;
}
button.compass__point--path:hover { background: var(--color-accent); color: var(--color-accent-text); }
.compass__point--disabled { cursor: default; opacity: 0.6; }

/* Numbered Paths (apartments, hotel rooms...): a compact list in columns,
   "100 - Jaxon Marley", so a building can have lots of doors. */

.numbered-paths { margin-top: var(--space); }
.numbered-paths__title { margin: 0 0 0.4rem; font-family: var(--font-ui); font-size: 0.95rem; }
.numbered-paths__count { font-weight: normal; font-size: 0.85em; }
.numbered-paths__filter { width: 100%; max-width: 18rem; margin-bottom: 0.4rem; font: inherit; font-family: var(--font-ui); font-size: 0.9rem; padding: 0.25rem 0.5rem; }
.numbered-paths__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0 var(--space);
  list-style: none;
  margin: 0;
  padding: 0;
}
.numbered-paths__item { min-width: 0; }
.numbered-paths__item[hidden] { display: none; }
.numbered-path__form { display: block; margin: 0; }
.numbered-path {
  display: block;
  width: 100%;
  padding: 0.15rem 0.3rem;
  border: none;
  border-bottom: 1px dotted var(--color-border);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.numbered-path:hover { background: var(--color-accent); color: var(--color-accent-text); }
.numbered-path__number { display: inline-block; min-width: 2.5em; font-weight: bold; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.numbered-path:hover .numbered-path__number { color: inherit; }
.numbered-path__dash { opacity: 0.6; }
.numbered-path--disabled { color: var(--color-muted); cursor: default; }
.numbered-path--disabled:hover { background: none; color: var(--color-muted); }
.numbered-path--disabled .numbered-path__number { color: inherit; }
.scene-setting__numbered { flex-basis: 100%; }
.scene-setting__numbered .numbered-paths { margin-top: 0.3rem; }
.scene-setting__numbered .numbered-paths__title { display: none; }
.exit-number { font-variant-numeric: tabular-nums; }
.numbered-rooms-builder__lines { width: 100%; max-width: 30rem; font-family: var(--font-mono, monospace); }
.compass__centre--out { font: inherit; font-size: 0.9rem; font-weight: bold; color: var(--color-accent); background: var(--color-surface); cursor: pointer; }
.compass__centre--out:hover { background: var(--color-accent); color: var(--color-accent-text); }
.room-paths__heading { margin: var(--space) 0 0.4rem; font-size: 0.95rem; }

/* Previewing without logging in: the guest top bar and wider pages. */

.main--preview { flex: 1; max-width: 60rem; margin: 0 auto; }
.site-header__preview { font-size: 0.85rem; }
.page-title__icon.icon-tile { display: inline-flex; }
.page-title__icon.icon-tile .icon { width: 1.3rem; height: 1.3rem; }

/* Pencil and trashcan buttons in admin tables. */
.icon-action { color: var(--color-muted); display: inline-flex; align-items: center; padding: 0.15rem; }
.icon-action:hover { color: var(--color-accent); }
.bnb-catalogue__actions { white-space: nowrap; }
.icon-action-form, .bnb-catalogue__delete-form { display: inline-flex; vertical-align: middle; }
.icon-action + .icon-action-form, .icon-action + .icon-action, .icon-action-form + .icon-action-form { margin-left: 0.25rem; }
.bnb-catalogue__actions .icon-action { vertical-align: middle; }
.icon-action { background: none; border: 0; cursor: pointer; line-height: 1; vertical-align: middle; }
.icon-action--delete:hover { color: #c62828; }

/* Picture answers on profiles and in the character form. */
.profile-fields__picture { display: block; max-width: 100%; max-height: 32rem; border-radius: var(--radius, 6px); }
.profile-field-input__picture { display: block; max-width: 12rem; max-height: 12rem; margin-bottom: 0.4rem; border-radius: var(--radius, 6px); }
.profile-field-input__remove { margin-bottom: 0.4rem; }

/* The bell's alerts drop-down in the header. */
.alert-menu { position: relative; display: inline-flex; align-items: center; }
.alert-menu__summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; color: var(--color-accent); }
.alert-menu__summary::-webkit-details-marker { display: none; }
.alert-menu__panel {
  position: absolute;
  z-index: 20;
  right: 0;
  width: min(24rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 0.4rem;
  padding: 0.6rem var(--space);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.15);
}
.alert-menu__panel .page-title { font-size: 1.1rem; margin: 0 0 0.5rem; }
.alert-menu__panel .alerts__list { margin: 0; padding: 0; }
@media (max-width: 640px) {
  .alert-menu__panel { position: fixed; top: auto; left: 1rem; right: 1rem; width: auto; }
}

/* Playing as: a drop-down showing each character's icon and Group colour. */
.switcher__menu { position: relative; }
.switcher__current { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; padding: 0.25rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
.switcher__current::-webkit-details-marker { display: none; }
.switcher__current::after { content: "▾"; color: var(--color-muted); font-size: 0.8rem; }
.switcher__options { position: absolute; z-index: 20; right: 0; min-width: 100%; margin-top: 0.3rem; padding: 0.3rem; display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); }
.switcher__option { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border: 0; border-radius: var(--radius); background: none; color: var(--color-text); font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.switcher__option:hover { background: var(--color-bg); }
.switcher__option--current { font-weight: bold; }
.switcher .character-icon--tiny, .switcher__icon { width: 1.3rem; height: 1.3rem; flex: none; }
.switcher .character-icon--tiny.character-icon--initial { font-size: 0.7rem; }
.switcher__name--nobody { color: var(--color-muted); }

/* Section headings in the Menu: Mine, The world, Community and help, Staff. */
.menu__heading { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.75rem; font-weight: bold; letter-spacing: 0.05em; text-transform: uppercase; }
.menu__heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* A button that can't be used yet, with a note beside it saying why. */
.button--disabled { opacity: 0.45; cursor: not-allowed; }
.inklings__why-not { display: block; margin-top: 0.4rem; font-size: 0.9rem; }

/* Online now on the front page: players as small cards, no commas. */
.player-icon--small { width: 2rem; height: 2rem; margin: 0; vertical-align: middle; }
.online-now__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.online-now__count { color: var(--color-muted); font-weight: normal; }
.online-now__where { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-ui); font-size: 0.9rem; }
.online-now__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.online-now__player { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.4rem 0.7rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.online-now__link { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; font-weight: bold; }
.online-now__playing { padding-left: 2.45rem; font-size: 0.85rem; }

/* The "i" on the SOUL sheet: what the ratings mean. */
.rating-guide { margin-bottom: 0.75rem; }
.rating-guide__button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; background: none; border: 0; color: var(--color-accent); cursor: pointer; font: inherit; font-size: 0.9rem; }
.rating-guide__popover { max-width: min(28rem, calc(100vw - 2rem)); padding: 0.75rem var(--space); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); }
.rating-guide__title { margin: 0 0 0.5rem; font-weight: bold; }
.rating-guide__list { margin: 0; }
.rating-guide__item + .rating-guide__item { margin-top: 0.5rem; }
.rating-guide__range { font-weight: bold; }
.rating-guide__name { font-weight: normal; }
.rating-guide__about { margin: 0; font-size: 0.9rem; }

/* What's waiting on staff, at the top of the alerts list. */
.alerts__staff { margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); }
.alerts__staff-title { margin: 0 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.alerts__staff-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
.alerts__staff-count { display: inline-block; min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-text); font-size: 0.8rem; text-align: center; }