/* WelcomeTo Studios - the main page's components. Tokens and faces live in
   tokens.css; this file is loaded after it.

   The page renders with a small template engine, and much of its layout is
   still written inline next to the markup it shapes. What lives here is
   what is shared: the page shell, type, buttons, cards, dialogs, notices,
   the footer, the cookie notice, and the wiki's reading typography. */

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
img, svg { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }
::selection { background: rgba(181, 35, 44, .45); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 238, 230, .14); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 238, 230, .24); }

/* One focus ring for everything reached by keyboard; pointer clicks do not
   draw it (that is what :focus-visible is for). The ring is ONE rim: the
   glow (--rim-glow) hugging the control's own edge. The outline beside it
   is transparent (--focus, tokens.css) - it only shows in high contrast
   mode, where the glow cannot. A control that also turns its own border
   the rim colour (the header's Discord pill, Sort by) still shows one rim,
   its border and the ring touching. What must never be drawn is a second
   ring apart from the first: a visible outline off the edge, a field and
   the text box inside it both rimmed, a selection rim inside a focus rim.
   test/site-browser.test.js tabs through the pages and holds every control
   to this. */
:focus-visible { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 2px; border-radius: 4px; }
/* What fills a scrolling list edge to edge wears the rim inside its edge,
   where the list cannot cut it off. */
.wts-tab:focus-visible, [role="menuitemradio"]:focus-visible { outline-offset: -3px; box-shadow: var(--rim-inset); }
/* A field drawn round a text box (the compendium's search, with its Clear
   button inside): the field wears the rim while the box has focus, its own
   border turning the rim colour, and the box draws none of its own. */
.wts-field { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; }
.wts-field:has(> input:focus) { border-color: var(--rim); box-shadow: var(--rim-glow); outline: 2px solid var(--focus); outline-offset: 2px; }
.wts-field input:focus, .wts-field input:focus-visible,
.arc-search__box .arc-search__input:focus, .arc-search__box .arc-search__input:focus-visible { outline: none; box-shadow: none; }
#main:focus, [role="dialog"]:focus, [role="alertdialog"]:focus { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wts-skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--surface); color: var(--text); border: 1px solid var(--rim); border-radius: var(--r-sm); padding: 10px 16px; font-weight: 600; font-size: 14px; text-decoration: none; }
.wts-skip:focus { top: 12px; }
.wts-x { background: none; border: none; padding: 4px 6px; margin: 0; line-height: 1; cursor: pointer; font: inherit; color: inherit; border-radius: var(--r-xs); }
.wts-x:hover { background: rgba(255, 255, 255, .06); }
x-dc { display: none; }

/* ---------------------------------------------------------------- shell */

.app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  isolation: isolate;
}
/* Behind everything: old blood splatter, dried dark, as a repeating
   texture over the whole page, with fine grain on top. The headline area at
   the top of the tile is kept clear, and the texture stays dim enough that
   every text colour still passes its contrast check over it. The ?v= is
   the start of the file's SHA-256 (scripts/splatter.py writes it), so a new
   splatter is a new address no browser can answer from its cache. */
.app::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url(../img/splatter.svg?v=0ce36f41) 0 0 / 1600px 1600px repeat;
  opacity: .36;
}
.app::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  background-image: url(../img/grain.svg?v=eeae9a69);
  background-size: 220px 220px;
  mix-blend-mode: overlay;
}
.app > [inert], .app > div:first-child { flex: 1; display: flex; flex-direction: column; }

.container { width: 100%; max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12, 10, 11, .72);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__row { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 36px; height: 36px; border-radius: 9px; display: block; box-shadow: 0 0 0 1px var(--line-strong); }
.brand__name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1; font-variation-settings: 'opsz' 48; }
.brand__tag { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-top: 5px; }

.nav-tabs { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
/* Links to each part of the site (the main navigation). */
.wts-tab {
  position: relative;
  display: inline-block;
  flex: none;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.wts-tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.wts-tab[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .08); }
.wts-tab--admin { color: var(--accent-text); }

/* Join our Discord, after the account control (index.html): an outlined
   pill like the account chip, Discord's mark in a blurple light enough to
   read on the dark (5.6:1), filled blurple under the pointer. Its words
   show where the header has room for them beside the tabs, at 1200px and
   up; narrower it is the mark alone, a circle as tall as the controls
   beside it, and the header gives back what the mark takes - its gaps and
   the tabs' sides close up a little and "Log in with Discord" says "Log
   in" (its name still says the rest) - so the tabs fit at every width they
   fitted before. On a phone the name and the logo are a size smaller, and
   where the first row has no room for the mark as well as the name and
   the sign-in, the mark moves to the end of the tabs' row ("The header on
   a phone", below). A screen reader always hears the words. */
.hdr-discord {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: none;
  height: 38px;
  padding: 0 15px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.hdr-discord svg { flex: none; display: block; fill: #7984f5; transition: fill .15s var(--ease); }
.hdr-discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; }
.hdr-discord:hover svg { fill: #fff; }
/* One rim: the pill's own edge turns #750000 and glows; no ring outside it. */
.hdr-discord:focus-visible { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); border-radius: var(--r-pill); }
@media (forced-colors: active) { .hdr-discord:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
@media (max-width: 1199px) {
  .hdr-discord { width: 38px; padding: 0; gap: 0; }
  .hdr-discord__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (pointer: coarse), (max-width: 720px) {
  .hdr-discord { height: 44px; }
}
@media (pointer: coarse) and (max-width: 1199px), (max-width: 720px) {
  .hdr-discord { width: 44px; }
}
/* (Named through .site-header, so these win over the shell's own rules,
   wherever those sit in this file.) */
@media (min-width: 721px) and (max-width: 1199px) {
  .site-header .site-header__row { column-gap: 10px; }
  .site-header .brand { gap: 10px; }
  .site-header .wts-tab { padding-left: 10px; padding-right: 10px; }
  .site-header .account { gap: 8px; }
  .site-header .hide-md { display: none; }
}
@media (max-width: 480px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand__mark { width: 30px; height: 30px; border-radius: 8px; }
  .site-header .brand__name { font-size: 16px; }
  .site-header .site-header__row { column-gap: 10px; }
  .site-header .account { gap: 6px; }
  .site-header .account .btn { padding-left: 14px; padding-right: 14px; }
}

.account { flex: none; display: flex; align-items: center; gap: 10px; }
/* The signed-in person's button and its menu: the menu is exactly as wide
   as the button (the wrapper is as wide as the button, and the menu spans
   the wrapper), and the button is wide enough for the menu's items. A long
   name is cut short with an ellipsis. */
.account__wrap { position: relative; min-width: 0; }
.account__chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
}
.account__chip:hover { border-color: var(--line-strong); }
.account__avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #120c0d; flex: none; }
/* (The signed-in button only: the placeholder that holds its place while
   sign-in is checked keeps its own size, as the Log in button does.) */
.account__wrap .account__chip { width: 100%; min-width: 172px; max-width: 280px; }
.account__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.account__chip > [aria-hidden="true"]:last-child { flex: none; }
.account__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 60;
}
.menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 9px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, .06); }
.menu-item--danger { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--secondary { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.btn--secondary:hover { background: var(--raised); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: rgba(255, 255, 255, .05); }
.btn--discord { background: #5865f2; color: #fff; }
.btn--discord:hover { background: #4752c4; color: #fff; }
.btn--danger { background: transparent; border-color: rgba(255, 122, 114, .45); color: var(--danger); }
.btn--danger:hover { background: var(--danger-wash); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- pill select */

/* The site's own <select> (PillSelect in index.html): a pill that shows the
   choice and a white chevron, and a list that grows down out of it in the
   pill's own colours - the account menu's and the season options menu's
   box, as wide as the pill or wider. The option under the keyboard or the
   pointer is lit in the accent, as those menus light theirs; the chosen
   one wears a tick, white whether it is lit or not, as the chevron is.
   Focus on the pill is one rim: its own edge turns
   #750000 and glows, with no ring outside it. */
.pill-select { position: relative; display: inline-flex; min-width: 0; }
/* A touch screen's own tap flash (a blue box) is not drawn over it. */
.pill-select__btn, .pill-select__opt { -webkit-tap-highlight-color: transparent; }
.pill-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s var(--ease);
}
.pill-select__btn:hover, .pill-select__btn[aria-expanded="true"] { background: var(--raised); }
.pill-select__btn:focus-visible { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); border-radius: var(--r-pill); }
@media (forced-colors: active) { .pill-select__btn:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
.pill-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-select__chev { flex: none; display: flex; color: #fff; transition: transform .18s var(--ease); }
.pill-select__btn[aria-expanded="true"] .pill-select__chev { transform: rotate(180deg); }
.pill-select__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 32px);
  max-height: min(320px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  transform-origin: top center;
}
.pill-select--end .pill-select__list { left: auto; right: 0; transform-origin: top right; }
.pill-select__list[hidden] { display: none; }
/* The keyboard is in the list while it is open; the lit option shows
   where, so the list draws no ring of its own. */
.pill-select__list:focus, .pill-select__list:focus-visible { outline: none; box-shadow: var(--shadow-pop); }
.pill-select__list.is-open { animation: pill-drop-in .18s var(--ease) both; }
.pill-select__list.is-closing { animation: pill-drop-out .16s var(--ease) both; pointer-events: none; }
@keyframes pill-drop-in { from { opacity: 0; transform: translateY(-6px) scaleY(.86); } to { opacity: 1; transform: none; } }
@keyframes pill-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px) scaleY(.86); } }
.pill-select__opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.pill-select__opt.is-active { background: var(--accent); color: #fff; }
.pill-select__opt[aria-selected="true"] { font-weight: 600; }
.pill-select__tick { flex: none; color: #fff; visibility: hidden; }
.pill-select__opt[aria-selected="true"] .pill-select__tick { visibility: visible; }

/* ---------------------------------------------------------------- type */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.display {
  font-family: var(--font-display);
  font-weight: 520;
  letter-spacing: -.012em;
  line-height: 1.04;
  font-variation-settings: 'opsz' 72;
  color: var(--text);
  margin: 0;
}
.display--hero { font-size: clamp(42px, 7vw, 84px); color: var(--text); }
/* A page's own eyebrow, over its headline, is quiet: About Us, Meet The
   Staff and the Archives all wear it the same. */
.hero__copy .eyebrow { color: var(--text-muted); }
.display--page { font-size: clamp(36px, 5vw, 60px); }
.lede { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; color: var(--text-muted); max-width: 64ch; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 560; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.015em; line-height: 1.15; margin: 0; color: var(--text); font-variation-settings: 'opsz' 72; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }

/* ---------------------------------------------------------------- page sections */

.page { padding-top: clamp(40px, 7vw, 88px); padding-bottom: 96px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.hero__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* The counters' grid lines: a warm, faintly red rule - plainly there, and
   still quieter than anything it frames. */
.stat-row {
  --stat-line: rgba(224, 136, 128, .3);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(40px, 6vw, 72px) 0;
  border-top: 1px solid var(--stat-line);
  border-bottom: 1px solid var(--stat-line);
}
.stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--stat-line); }
.stat__value { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); font-weight: 520; letter-spacing: -.02em; line-height: 1.05; color: var(--text); font-variation-settings: 'opsz' 96; white-space: pre-line; }
.stat__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); white-space: pre-line; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
.section-head + .section-head { margin-top: 0; }
.section-head__hint { font-size: 13px; color: var(--text-faint); }
.section-gap { height: clamp(48px, 7vw, 80px); }

/* ---------------------------------------------------------------- cards */

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) , var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
/* About Us's format and bot cards: the cards side by side in a row are
   one height, the tallest's, as Meet the Staff's are, each with what it
   holds at the top. */
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.card-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.show-card {
  position: relative;
  padding: 22px;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.show-card:hover, .show-card:focus-visible { transform: translateY(-2px); border-color: var(--line-strong); }
/* Its own drop shadow would otherwise win over the focus glow. */
.show-card:focus-visible { box-shadow: var(--rim-glow); }
.show-card__row { display: flex; align-items: flex-start; gap: 16px; }
.show-card__icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-wash);
  border: 1px solid rgba(255, 122, 114, .18);
}
.show-card__body { flex: 1; min-width: 0; }
.show-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.show-card__name { font-family: var(--font-display); font-size: 21px; font-weight: 560; letter-spacing: -.01em; color: var(--text); font-variation-settings: 'opsz' 48; }
.show-card__blurb { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin: 10px 0 0; white-space: pre-line; }

.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  white-space: nowrap;
}
.badge-studio { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--on-accent); background: var(--accent); padding: 2px 7px; border-radius: var(--r-pill); }
.lock { color: var(--gold); font-size: 13px; }

/* ---------------------------------------------------------------- notices */

.notice-bar { display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter); background: var(--accent-wash); border-bottom: 1px solid rgba(255, 122, 114, .25); color: var(--text); font-size: 14px; }
.notice-bar__text { flex: 1; }

/* ---------------------------------------------------------------- dialogs */

.dialog {
  width: 480px;
  max-width: 100%;
  max-height: 88vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  color: var(--text);
}
.dialog--wide { width: 640px; }
/* A dialog taller than the window scrolls inside itself (the archives'
   profile pop-out does too: archive.css, .arc-prof), and a scroll that
   reaches its end goes no further: the page behind stays put (the page
   also stops scrolling while a dialog is open: A11y in index.html). */
.dialog { overscroll-behavior: contain; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.dialog__title { font-family: var(--font-display); font-size: 24px; font-weight: 560; letter-spacing: -.01em; margin: 0; line-height: 1.2; font-variation-settings: 'opsz' 48; }
.dialog__body { padding: 16px 24px 24px; }
.dialog__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); margin-top: auto; padding: 36px 0 44px; color: var(--text-faint); font-size: 14px; }
.site-footer__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; max-width: 40ch; }
.site-footer__agree { font-size: 13px; color: var(--text-faint); line-height: 1.5; }
.site-footer__agree a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.site-footer__agree a:hover { color: var(--text); }
.site-footer__brand strong { font-family: var(--font-display); font-weight: 560; font-size: 18px; color: var(--text); letter-spacing: -.01em; }
.site-footer__links { display: flex; gap: 6px 22px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-footer__links a, .site-footer__links button { color: var(--text-muted); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; font-size: 14px; }
.site-footer__links a:hover, .site-footer__links button:hover { color: var(--text); text-decoration: underline; }
/* The links, then Join our Discord under them in the same column: the
   blurple button the legal pages end with (and the sign-in wears), lined
   up with the row's end, under "Cookie settings" - or with its start on a
   narrow screen, where the column sits under the brand. */
.site-footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
@media (max-width: 720px) { .site-footer__end { align-items: flex-start; } }
.site-footer__discord { margin: 0; }
.site-footer__discord svg { flex: none; display: block; }

/* ---------------------------------------------------------------- cookie notice */

/* While the notice is up nothing may hide under it: focus scrolls clear of
   it, and the page can scroll its footer above it. */
html:has(.cookie-notice) { scroll-padding-bottom: 140px; }
.app:has(.cookie-notice) { padding-bottom: 120px; }
.cookie-notice {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  margin: 0 auto;
  max-width: 720px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(22, 18, 20, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 16px 18px;
}
.cookie-notice__text { flex: 1 1 320px; font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.cookie-notice__text strong { color: var(--text); font-weight: 600; }
.cookie-notice__actions { display: flex; gap: 8px; flex: none; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.cookie-table th, .cookie-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie-table th { color: var(--text-faint); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.cookie-table code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }

/* ---------------------------------------------------------------- wiki reading type */

.wiki-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* Clipped to the rounded corners without being a scroll box (clip, where
     it is known), so the sidebar's bulk bar can stick to the window. */
  overflow: hidden;
  overflow: clip;
  min-height: 620px;
  box-shadow: var(--shadow-card);
  /* What a page's text is set with, wherever it shows - read, or in the
     editor: list markers (bullets and numbers), a quote's bar and a section
     break are white; a table's rules and the line under a heading a light
     grey of the same white; code in a sentence is white on a faint white. */
  --wiki-mark: #ffffff;
  --wiki-hr: rgba(255, 255, 255, .82);
  --wiki-rule: rgba(255, 255, 255, .28);
  --wiki-head-bg: rgba(255, 255, 255, .06);
  --wiki-code: #ffffff;
  --wiki-code-bg: rgba(255, 255, 255, .07);
  --wiki-code-line: rgba(255, 255, 255, .16);
}
.wiki-li__mark { flex: none; min-width: 16px; color: var(--wiki-mark); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.wiki-li__mark--edit { min-width: 14px; font-size: 12px; }
.wiki-side { background: rgba(0, 0, 0, .18); border-right: 1px solid var(--line); padding: 20px 0 16px; min-width: 0; }

/* The sidebar's sections and pages. A section's name folds it; a page with
   sub-pages has a caret of its own. Every caret is a white chevron drawn
   here (pointing right when folded, down when open), in a box big enough
   to hit with a mouse - and with a finger on a touch screen (fit.css). */
.wiki-side__sec { display: flex; align-items: center; gap: 4px; padding: 8px 14px 2px 6px; cursor: pointer; font-family: var(--font-body); color: var(--text-muted); font-size: 11px; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.wiki-side__sectitle { flex: 1; min-width: 0; }
.wiki-side__item { display: flex; align-items: center; }
/* A section's name and a page's run to the sidebar's edges: focused, they
   wear the rim inside their edge, not over the sidebar's border. */
.wiki-side__item > a:focus-visible, .wiki-side__sec:focus-visible { box-shadow: var(--rim-inset); border-radius: var(--r-xs); }
/* So does what fills a scrolling list: a search result, a page in the
   link picker. */
.wiki-results a:focus-visible, .wiki-linkpick__opt:focus-visible { box-shadow: var(--rim-inset); }
.wiki-caret { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-xs); color: #fff; }
.wiki-caret::before { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateX(-2px) rotate(-45deg); transition: transform .15s var(--ease); }
.wiki-side__sec[aria-expanded="true"] > .wiki-caret::before, .wiki-caret[aria-expanded="true"]::before { transform: translateY(-2px) rotate(45deg); }
.wiki-caret--btn { width: 32px; height: 32px; cursor: pointer; }
.wiki-caret--btn::before { width: 9px; height: 9px; }
.wiki-caret--btn:hover, .wiki-side__sec:hover > .wiki-caret { background: rgba(255, 255, 255, .08); }
.wiki-caret-gap { flex: none; width: 32px; }
.wiki-main { padding: clamp(22px, 3vw, 40px) clamp(18px, 3.5vw, 48px); min-width: 0; }
.wiki-title { font-family: var(--font-display); font-weight: 540; font-size: clamp(32px, 4vw, 46px); letter-spacing: -.01em; line-height: 1.08; margin: 0; color: var(--text); font-variation-settings: 'opsz' 60; }

/* Share links (ShareLinks in index.html): the page's Copy link, and a link
   on every heading that shows on hover or keyboard focus - and always,
   faintly, where nothing can hover. What a share link pointed into is lit
   up for a moment when the page arrives there. */
.wiki-share { display: inline-flex; align-items: center; gap: 5px; margin: -3px 0; padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); background: none; color: var(--text-muted); font: inherit; font-size: 12.5px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.wiki-share:hover, .wiki-share:focus-visible { color: var(--text); border-color: var(--line-strong); }
.wiki-h { border-radius: var(--r-xs); }
.wiki-h__link { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px; vertical-align: middle; border-radius: var(--r-xs); color: var(--text-faint); opacity: 0; transition: opacity .15s var(--ease), color .15s var(--ease); }
.wiki-h:hover .wiki-h__link, .wiki-h__link:focus-visible { opacity: 1; }
.wiki-h__link:hover, .wiki-h__link:focus-visible { color: var(--accent-text); }
@media (hover: none) { .wiki-h__link { opacity: .6; } }
.wiki-h.is-share-hit { animation: share-hit 2.4s var(--ease); }
@keyframes share-hit { 0%, 40% { background: rgba(231, 191, 106, .16); } 100% { background: rgba(231, 191, 106, 0); } }
@media (prefers-reduced-motion: reduce) {
  .wiki-h.is-share-hit { outline: 2px solid var(--gold); outline-offset: 3px; }
}

/* ---------------------------------------------------------------- overlays */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dialog__foot--stack { flex-direction: column; align-items: stretch; }
/* Delete my data: the warning first and unmissable, then what happens. */
.del-data { width: 500px; }
.del-data__warn { padding: 12px 14px; border: 1px solid rgba(255, 122, 114, .45); border-radius: var(--r-sm); background: var(--danger-wash); }
.del-data__warn p { margin: 0; line-height: 1.5; }
.del-data__warn p + p { margin-top: 8px; }
.del-data__warn strong { color: var(--danger); }
.del-data__list { margin: 14px 0 0; padding-left: 20px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.del-data__list li + li { margin-top: 6px; }
.del-data__check { align-items: flex-start; line-height: 1.45; }
.del-data__check input { flex: none; margin-top: 2px; }
.btn--danger-solid { background: #a51d25; color: #fff; }
.btn--danger-solid:hover { background: #bb2530; color: #fff; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 120;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  padding: 10px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
  text-align: center;
}
.consent-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 12px; }
.table-scroll { overflow-x: auto; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.hero__cta .btn { padding: 12px 20px; font-size: 15px; }
/* While sign-in is checked, the placeholder on a phone is its picture
   alone, as it always was. */
@media (max-width: 720px) {
  .account__chip.is-skel > span:not(.account__avatar) { display: none; }
}
/* On a phone the button keeps the name - the menu under it no longer
   says who is signed in - without the STUDIO badge, and is as wide as the
   name needs: never under 132px (the menu, exactly as wide, stays
   readable; its items are a little tighter to fit), never over 240px, and
   never wider than the room the first row leaves it - only there is a name
   cut short. */
@media (max-width: 600px) {
  .account__wrap .account__chip { width: 100%; min-width: 132px; max-width: 240px; gap: 8px; padding-right: 10px; }
  .account__chip .badge-studio { display: none; }
  .account__menu { padding: 4px; }
  .account__menu .menu-item { padding: 9px 8px; font-size: 13.5px; white-space: nowrap; }
}
/* The header on a phone: two rows on a grid - the logo and the site's
   name, then whoever is signed in (the sign-in button, or the placeholder
   while that is checked), then the Discord mark; under them the tabs.
   The account control's own box steps aside (display: contents) so the
   Discord link is a cell of its own, and it moves by width alone, the
   same whoever turns out to be signed in, so it never moves once the
   sign-in is known:
     - a row (the header's own width, less its sides: a scrollbar counts as
       it should) of 407px and up fits the logo, the name, a button of
       160px - most names whole - and the mark: all four on the first row;
     - narrower, the mark goes to the end of the tabs' row, its own cell -
       it does not scroll away with them - and the button has the first
       row's room beside the name; the tabs' sides close up a little to
       give back the room the mark takes, so the four tabs still fit from
       414px, as they did;
     - under 353px of row the name would leave the button less than those
       160px, so it stands on two lines beside the logo ("WelcomeTo" over
       "Studios"), at the same size: the button keeps at least 140px down
       to a 300px screen.
   The first row is 44px tall whatever stands in it, so the tabs' row
   never moves either. */
.site-header__row { container: site-header / inline-size; }
@media (max-width: 720px) {
  .site-header .site-header__row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(44px, auto) auto;
    align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 6px;
  }
  .site-header .brand { grid-area: 1 / 1; }
  .site-header .account { display: contents; }
  .site-header .account > :not(.hdr-discord, .sr-only) { grid-area: 1 / 2; justify-self: end; min-width: 0; max-width: 100%; }
  .site-header .hdr-discord { grid-area: 1 / 3; }
  .site-header .nav-tabs { grid-area: 2 / 1 / 3 / 4; margin: 0 -6px; }
}
@container site-header (max-width: 406.98px) {
  .site-header .account > :not(.hdr-discord, .sr-only) { grid-column: 2 / 4; }
  .site-header .hdr-discord { grid-area: 2 / 3; }
  .site-header .nav-tabs { grid-column: 1 / 3; margin-right: 0; }
  .site-header .wts-tab { padding-left: 9px; padding-right: 9px; }
}
@container site-header (max-width: 352.98px) {
  .site-header .brand__name { display: block; width: min-content; line-height: 1.05; }
}

/* Grids that fold on narrow screens. Their columns live here, not inline,
   so the media queries below can change them. */
.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.arch-viewer { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.wiki-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; align-items: start; }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 960px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: none; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--stat-line); }
  .stat-row--3 .stat:nth-child(3) { border-left: 1px solid var(--stat-line); }
  .stat-row--3 .stat:nth-child(n + 3) { border-top: none; }
  .wiki-shell { grid-template-columns: minmax(0, 1fr); }
  .wiki-side { border-right: none; border-bottom: 1px solid var(--line); }
  .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiki-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .brand__tag { display: none; }
  .hide-sm { display: none; }
  .stat-row--3 { grid-template-columns: minmax(0, 1fr); }
  .stat-row--3 .stat + .stat { border-left: none; border-top: 1px solid var(--stat-line); }
  .stat { padding: 20px 16px; }
  .hero { flex-direction: column; }
  .cookie-notice { bottom: 10px; left: 10px; right: 10px; }
  html:has(.cookie-notice) { scroll-padding-bottom: 210px; }
  .app:has(.cookie-notice) { padding-bottom: 200px; }
  .picker-grid, .form-2 { grid-template-columns: minmax(0, 1fr); }
  .arch-viewer { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- wiki links */

/* Links in wiki text are coloured whole, as they first were, in deep hues
   rather than the old pale pink and lilac: crimson for a wiki page, violet
   for an archive. Each keeps an underline in its own colour (dotted for an
   archive), so a link never rests on colour alone. Both pass 4.5:1 on the
   reading surface and inside a callout's tint. */
.wlink {
  color: var(--wiki-link);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(242, 85, 94, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s var(--ease), color .15s var(--ease);
}
.wlink:hover, .wlink:focus-visible { color: #ff7a72; text-decoration-color: currentColor; }
.wlink--archive { color: var(--wiki-link-archive); text-decoration-style: dotted; text-decoration-color: rgba(167, 123, 242, .6); }
.wlink--archive:hover, .wlink--archive:focus-visible { color: #b996ff; text-decoration-color: currentColor; }
.wlink--dead { color: var(--text-faint); font-weight: 400; text-decoration: line-through; text-decoration-color: currentColor; cursor: help; }
.chip-link {
  display: inline-flex; align-items: center;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .04);
  font-size: 14px; font-weight: 500;
  color: var(--text);
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.chip-link:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 122, 114, .45); }

/* ---------------------------------------------------------------- wiki callouts, rules and paragraphs */

/* A callout is a colour and its words: no icon, no label. The editor picks
   one of these eight deep colours; each sets --co (the edge and the swatch),
   --co-line (the border) and --co-wash (the tint behind the words). The
   words stay the text colour, so every one reads the same. Callouts saved
   when they had a kind (note, warning, lore, danger) are drawn in the
   colour nearest what they were (the page maps them). */
.co-crimson { --co: #c4202c; --co-line: rgba(196, 32, 44, .55); --co-wash: rgba(196, 32, 44, .1); }
.co-ember { --co: #d0561c; --co-line: rgba(208, 86, 28, .55); --co-wash: rgba(208, 86, 28, .1); }
.co-gold { --co: #c99a2e; --co-line: rgba(201, 154, 46, .55); --co-wash: rgba(201, 154, 46, .09); }
.co-moss { --co: #5c8c3c; --co-line: rgba(92, 140, 60, .6); --co-wash: rgba(92, 140, 60, .1); }
.co-teal { --co: #1f8a82; --co-line: rgba(31, 138, 130, .6); --co-wash: rgba(31, 138, 130, .1); }
.co-slate { --co: #4d70a8; --co-line: rgba(77, 112, 168, .6); --co-wash: rgba(77, 112, 168, .11); }
.co-violet { --co: #7c50c4; --co-line: rgba(124, 80, 196, .6); --co-wash: rgba(124, 80, 196, .11); }
.co-grey { --co: #7d7473; --co-line: rgba(125, 116, 115, .6); --co-wash: rgba(125, 116, 115, .1); }
.wiki-callout { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--co-line); border-left: 4px solid var(--co); border-radius: var(--r-sm); background: var(--co-wash); color: var(--text); font-size: 15px; line-height: 1.6; }
.wiki-callout__p { margin: 0; }
.wiki-callout__p + .wiki-callout__p { margin-top: 10px; }

/* The colour picker: a swatch per colour, a radio underneath each, and the
   chosen colour's name beside them. The chosen swatch wears a light ring
   (red would vanish on the crimson one); focus keeps the usual ring. */
.wiki-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.wiki-colors__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.wiki-colors__list { display: flex; flex-wrap: wrap; gap: 6px; }
.wiki-swatch { position: relative; display: inline-flex; cursor: pointer; }
.wiki-swatch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wiki-swatch__dot { width: 26px; height: 26px; border-radius: 50%; background: var(--co); border: 2px solid rgba(12, 10, 11, .65); box-shadow: 0 0 0 1px var(--line-strong); }
.wiki-swatch:hover .wiki-swatch__dot { box-shadow: 0 0 0 1px rgba(255, 238, 230, .4); }
.wiki-swatch__input:checked + .wiki-swatch__dot { box-shadow: 0 0 0 2px var(--text), 0 0 12px var(--co); }
.wiki-swatch__input:focus-visible + .wiki-swatch__dot { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 3px; }
.wiki-colors__name { font-size: 13px; font-weight: 600; color: var(--text); }
/* The callout's text field in the editor wears its colour, as readers will see it. */
.wiki-callout-edit { border: 1px solid var(--co-line); border-left: 4px solid var(--co); background: var(--co-wash); }

/* A section break: a plain white rule with a small white diamond at its
   middle, so it reads as a break from across the page. Its gap is the
   surface colour round the diamond. */
.wiki-hr { position: relative; clear: both; height: 0; margin: 36px 0; border: 0; border-top: 1px solid var(--wiki-hr); overflow: visible; }
.wiki-hr::after { content: ''; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; background: var(--wiki-mark); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 5px var(--surface); }
.wiki-hr--edit { margin: 14px 4px 10px; }

/* ---------------------------------------------------------------- wiki page ids and the link picker */

/* Editors see each page's id (what a [text](w:id) link names), with a copy
   button and a change button, in the page's Page settings - part of
   editing the page, never shown to someone reading it. */
.wiki-set__id { margin: 0 0 18px; }
.wiki-set__label { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.wiki-set__note { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.wiki-set__id .wiki-pageid, .wiki-set__id .wiki-idedit { margin-top: 0; }
.wiki-set__id .wiki-idedit { max-width: none; }
.wiki-pageid { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.wiki-pageid__code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); padding: 2px 7px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--surface-2); user-select: all; overflow-wrap: anywhere; }
.wiki-pageid__copy { padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: none; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.wiki-pageid__copy:hover { background: rgba(255, 255, 255, .06); }
/* Changing a page's id: the line opens into a small form in place. */
.wiki-idedit { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); max-width: 560px; }
.wiki-idedit__label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.wiki-idedit__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wiki-idedit__input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 13.5px; }
.wiki-idedit__input[aria-invalid="true"] { border-color: var(--accent-text); }
.wiki-idedit__hint { margin: 7px 0 0; font-size: 12px; color: var(--text-muted); }
.wiki-idedit__error { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--accent-text); }


/* A page's header: title, what it is and its id on the left, an editor's
   Edit / History / Settings on the right. On a phone there is no room
   beside the title, so the buttons go under it and the title takes the
   whole width. */
@media (max-width: 720px) {
  .wiki-head { flex-wrap: wrap; }
  .wiki-head__main { flex: 1 1 100%; }
  .wiki-head__acts { flex-wrap: wrap; }
}

/* "Link a page": a search over every page, each with its id; picking one
   puts [title](w:id) where the cursor was in the text. */
.wiki-linkbtn { margin-top: 6px; padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: none; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.wiki-linkbtn:hover { background: rgba(255, 255, 255, .06); }
.wiki-linkpick { margin-top: 8px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--shadow-pop); }
.wiki-linkpick__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wiki-linkpick__search { flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); color: var(--text); font-size: 13.5px; }
.wiki-linkpick__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.wiki-linkpick__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text); text-align: left; cursor: pointer; font-size: 14px; }
.wiki-linkpick__opt:hover, .wiki-linkpick__opt:focus-visible { background: rgba(255, 255, 255, .07); }
.wiki-linkpick__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-linkpick__id { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
/* A private page says so in words, not only with the dot: readers see a
   link to one as a dead link. */
.wiki-linkpick__priv { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--accent-text); }
.wiki-linkpick__hint--priv { color: var(--accent-text); }
/* On a phone the id has a line of its own under the title, whole. */
@media (max-width: 720px) {
  .wiki-linkpick__opt { flex-wrap: wrap; row-gap: 2px; }
  .wiki-linkpick__title { flex: 1 1 0; }
  .wiki-linkpick__id { flex: 1 1 100%; max-width: none; white-space: normal; overflow-wrap: anywhere; }
}
.wiki-linkpick__none { margin: 4px 2px; font-size: 13px; color: var(--text-muted); }
.wiki-linkpick__hint { margin: 8px 2px 0; font-size: 12px; color: var(--text-muted); }.wiki-pageid__copy:disabled, .wiki-linkbtn:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------- the wiki pages of a format or a season */

/* The editor (a format's in Site Management, a season's on the Archives
   card): the pages in order, each with its id and what a reader should
   know - private, in the trash - and buttons to move it or take it off;
   under them, "Add a page" opens the link picker's search. */
.wl { display: flex; flex-direction: column; gap: 6px; }
.wl__empty { margin: 2px 0; font-size: 13px; color: var(--text-muted); }
.wl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wl__item { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); min-width: 0; }
.wl__item.is-gone .wl__title { color: var(--text-muted); }
.wl__n { flex: none; min-width: 18px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: right; }
.wl__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl__title { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.wl__id { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.wl__badges { flex: none; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wl__badges:empty { display: none; }
.wl__tools { flex: none; display: flex; gap: 4px; }
.wl .wiki-linkbtn { align-self: flex-start; margin-top: 2px; }
.wl .wiki-linkpick { margin-top: 2px; }
/* On a phone the badges go on a line of their own under the title, so the
   title keeps the width beside the buttons. */
@media (max-width: 560px) {
  .wl__item { flex-wrap: wrap; row-gap: 4px; gap: 8px; }
  .wl__text { flex: 1 1 0; }
  .wl__tools { gap: 0; }
  .wl__badges { order: 1; flex: 1 1 100%; justify-content: flex-start; padding-left: 26px; }
}

/* What readers see: the pages as links, under a format panel's Wiki tab
   and under a season's title in its archive. */
.wl-read__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wl-read__link { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--wiki-link); font-size: 14px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.wl-read__link:hover, .wl-read__link:focus-visible { color: #ff7a72; background: rgba(255, 255, 255, .05); }
.wl-read__link .arc-ic { flex: none; }
.wl-read__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.arc-head__wiki { margin: 10px 0 2px; }


/* ---------------------------------------------------------------- the wiki's sidebar editor */

/* Each section a card, each page a row with its handle; nothing folds. A
   page under another sits further in. The handle (.wiki-grip, two columns
   of white dots) is what a mouse or a finger drags, and what the arrow
   keys move while it has focus; it never lets the page scroll under a
   finger that is dragging (touch-action). */
.wiki-sed__help { margin: -4px 2px 10px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.wiki-sed__sec { margin-bottom: 10px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.wiki-sed__sechead { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-bottom: 7px; }
.wiki-sed__items { min-height: 8px; margin-bottom: 6px; }
.wiki-sed__row { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); }
.wiki-sed__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-body); font-size: 14px; color: var(--text); cursor: pointer; }
.wiki-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: #fff; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.wiki-grip::before { content: ''; width: 10px; height: 16px; background: radial-gradient(circle, currentColor 1.6px, transparent 1.9px) 0 0 / 5px 5.5px; }
.wiki-grip:hover { background: rgba(255, 255, 255, .08); }
@media (forced-colors: active) { .wiki-grip::before { background: none; border-left: 3px dotted CanvasText; border-right: 3px dotted CanvasText; } }
/* What is being dragged stays where it was, dimmed; a copy of its row
   rides under the pointer, and a white line, its label saying where,
   shows where it will land. */
.wiki-sed__row.is-moving, .wiki-sed__sec.is-moving { opacity: .38; }
.wiki-ghost { position: fixed !important; left: 0; top: 0; z-index: 400; margin: 0 !important; pointer-events: none; opacity: .88; box-shadow: var(--shadow-pop); background: var(--surface-2) !important; }
.wiki-drop { position: fixed; left: 0; top: 0; z-index: 401; height: 3px; border-radius: 2px; background: #fff; pointer-events: none; }
.wiki-drop[hidden] { display: none; }
.wiki-drop::before { content: ''; position: absolute; left: -4px; top: -3.5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.wiki-drop__label { position: absolute; right: 0; top: -8px; max-width: 75%; padding: 2px 7px; border-radius: var(--r-pill); background: #fff; color: #120d0e; font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.wiki-dragging, html.wiki-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ---------------------------------------------------------------- wiki bulk edits */

/* The sidebar editor: a box on every page and section to tick them, and
   while any are ticked, one bar of actions for all of them, above the
   sections. */
.wiki-bulk-check { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.wiki-bulk-check:disabled { cursor: default; opacity: .4; }
.wiki-bulk__hint { margin: 2px 2px 10px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
/* The bar for what is ticked stays in sight, under the site's header, while
   boxes far down the sidebar are ticked; it stops where the sidebar ends. */
.wiki-bulk { position: sticky; top: 76px; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--shadow-pop); }
.wiki-bulk__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.wiki-bulk__clear { padding: 2px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: none; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.wiki-bulk__row { display: flex; flex-wrap: wrap; gap: 6px; }
.wiki-bulk__btn { flex: 1 1 auto; padding: 6px 10px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: none; color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.wiki-bulk__btn:hover, .wiki-bulk__clear:hover { background: rgba(255, 255, 255, .06); }
.wiki-bulk__btn:disabled { opacity: .5; cursor: default; }
.wiki-bulk__btn--danger { color: var(--accent-text); border-color: rgba(255, 122, 114, .5); }
.wiki-bulk__select { flex: 1 1 120px; min-width: 0; padding: 6px; border-radius: var(--r-xs); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 12px; }

/* ---------------------------------------------------------------- wiki image layout editor */

/* The picture as readers will see it: real width, real float, and the text
   after it wrapping round. The stage spans the whole block card, so its
   width is the reading column's. */
.img-stage { margin: 0 -11px; padding: 12px 11px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .22); }
.img-stage__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.img-stage__readout { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.img-stage__flow { position: relative; color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.img-stage__flow::after { content: ''; display: block; clear: both; }
.img-stage__fig { position: relative; cursor: grab; touch-action: none; border-radius: var(--r-sm); z-index: 1; }
.img-stage__fig:active { cursor: grabbing; }
/* The picture always wears the rim (it is the one being placed); focused,
   that same rim glows brighter rather than a second ring round the
   picture and its caption. */
.img-stage__fig:focus-visible { outline: 2px solid var(--focus); box-shadow: none; outline-offset: 4px; }
.img-stage__fig:focus-visible .img-stage__box { box-shadow: var(--selected-glow); }
.img-stage__box { position: relative; width: 100%; aspect-ratio: 25 / 16; border-radius: var(--r-xs); box-shadow: 0 0 0 1px var(--selected), var(--selected-glow-sm); }
.img-stage__size {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(12, 10, 11, .85); color: #fff;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.img-stage__handle {
  position: absolute; right: -9px; bottom: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  cursor: nwse-resize; touch-action: none;
}
.img-stage__fig--right .img-stage__handle { right: auto; left: -9px; cursor: nesw-resize; }
.img-stage__caption { font-size: 13px; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
.img-stage__text { margin: 0 0 10px; }
.img-stage__zones { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; pointer-events: none; z-index: 0; }
.img-stage__zones span {
  display: flex; justify-content: center; padding-top: 6px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint); background: rgba(255, 255, 255, .02);
}
.img-stage__zones span.is-on { border-color: var(--selected); color: var(--text); background: var(--selected-wash); box-shadow: var(--selected-glow-sm); }

/* ================================================================
   Site content, the format and bot panels, and Site Management
   (docs/site-api.md). About Us, the formats and the bots come from the
   server now; these are their loading states, cards, panels, the review
   carousel, and the editors that save them.
   ================================================================ */

/* ---------------------------------------------------------------- the private marker */

/* A red circle with a red ring: the one sign, everywhere, that only admins
   can see a thing. It always comes with the word, or with "Private" as its
   accessible name. */
.priv-dot {
  display: inline-block;
  flex: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--blood);
  border: 2px solid #ff5a62;
  box-shadow: 0 0 6px rgba(255, 90, 98, .45);
  vertical-align: 1px;
}
.show-card--private { border-color: rgba(255, 90, 98, .5); }
/* The template drops the space before it, so the gap is here. */
.show-card__name .priv-dot, .site-panel__name .priv-dot { margin-left: 8px; }

/* ---------------------------------------------------------------- loading and quiet states */

/* Skeletons: while something loads, its shape stands where it will be - a
   staff card's banner, picture, name and roles; a season's row; a few
   messages - never a spinner. Each one is built from the real thing's own
   containers (a loading staff card is a .com-card, a loading season an
   .arc-season), so it takes the same space and nothing jumps when the
   content arrives. Inside them:
     .skel-t   a line of text: an inline bone sitting in the real text's own
               element, so its line is exactly as tall as the text will be;
               .skel-t--<n> is n% of the line (lines wider than half wrap
               one under another), --name / --word / --chip fixed widths
     .skel-b   a box (a picture, an icon, a chart): fills the real box
     .skel     the real box itself drawn as a bone (a banner, a field)
   Every bone sits in an .is-skel wrapper, which is hidden from screen
   readers: the region loading says so with aria-busy, and one plain line
   (sr-only) names what is coming. The bones shimmer slowly, and hold still
   for anyone who asks for less motion. */
@keyframes site-shimmer { from { background-position: -320px 0; } to { background-position: 320px 0; } }
.site-skel { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.site-skel__line, .site-skel-card, .is-skel .skel, .is-skel .skel-t, .is-skel .skel-b {
  background: linear-gradient(90deg, rgba(255, 238, 230, .055) 0, rgba(255, 238, 230, .11) 160px, rgba(255, 238, 230, .055) 320px) 0 0 / 640px 100% repeat-x, var(--surface);
  animation: site-shimmer 1.6s linear infinite;
}
.site-skel__line, .site-skel-card { display: block; border-radius: var(--r-sm); }
.site-skel__line { height: 18px; width: 92%; }
.site-skel__line--eyebrow { height: 12px; width: 44%; }
.site-skel__line--title { height: clamp(40px, 6vw, 72px); width: 86%; }
.site-skel__line--short { width: 52%; }
.site-skel__line--mid { width: 68%; }
.site-skel-card { height: 148px; border-radius: var(--r-lg); border: 1px solid var(--line); }
.is-skel { pointer-events: none; user-select: none; -webkit-user-select: none; }
.is-skel .skel-t { display: inline-block; vertical-align: middle; width: 60%; max-width: 100%; height: .72em; border-radius: 5px; }
.is-skel .skel-b { display: block; width: 100%; height: 100%; border-radius: inherit; }
.is-skel .skel-b--round { border-radius: 50%; }
.is-skel .skel-t--10 { width: 10%; } .is-skel .skel-t--20 { width: 20%; } .is-skel .skel-t--30 { width: 30%; }
.is-skel .skel-t--40 { width: 40%; } .is-skel .skel-t--50 { width: 50%; } .is-skel .skel-t--60 { width: 60%; }
.is-skel .skel-t--70 { width: 70%; } .is-skel .skel-t--80 { width: 80%; } .is-skel .skel-t--90 { width: 90%; }
.is-skel .skel-t--100 { width: 100%; }
.is-skel .skel-t--word { width: 4.5em; }
.is-skel .skel-t--name { width: 8em; }
.is-skel .skel-t--chip { width: 6.5em; height: 26px; border-radius: var(--r-pill); }
/* A line of a paragraph: one bone a line, each its own line box. */
.is-skel .skel-line { display: block; }
/* A list whose rows have not arrived, for the lists drawn as plain rows
   (keys, seasons, the trash, revisions, Bot Management): a picture, a
   name with a line under it, and the button at the end. */
.skel-rows { list-style: none; margin: 0; padding: 0; }
.skel-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.skel-rows--flush .skel-row:last-child { border-bottom: 0; }
.skel-row__pic { flex: none; width: 34px; height: 34px; border-radius: 50%; }
.skel-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.4; }
.skel-row__sub { font-size: 12.5px; line-height: 1.5; }
.skel-row__end { flex: none; width: 84px; height: 30px; border-radius: var(--r-pill); }
/* The wiki before its pages arrive: the sidebar (its title, the search
   box, sections of links) and a page (title, a line of facts, paragraphs
   and the infobox), in the wiki's own shell. */
.wiki-skel__brand { padding: 0 18px 14px; font-family: var(--font-display); font-size: 19px; line-height: 1.3; }
.wiki-skel__search { padding: 0 14px 10px; }
.wiki-skel__search .skel { display: block; height: 34px; border-radius: var(--r-sm); }
.wiki-skel__sec { padding: 13px 14px 7px 38px; font-size: 11px; line-height: 1.6; }
.wiki-skel__item { padding: 8px 14px 8px 37px; font-size: 14.5px; line-height: 1.45; }
.wiki-skel__head { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.wiki-skel__meta { margin-top: 5px; font-size: 13px; line-height: 1.55; }
.wiki-skel__text p { margin: 0 0 18px; font-size: 16px; line-height: 1.7; }
.wiki-skel__box { height: 260px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
@media (max-width: 960px) { .wiki-skel__box { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-skel__line, .site-skel-card, .is-skel .skel, .is-skel .skel-t, .is-skel .skel-b { animation: none; background: rgba(255, 238, 230, .08); }
}
@media (forced-colors: active) {
  .site-skel__line, .site-skel-card, .is-skel .skel, .is-skel .skel-t, .is-skel .skel-b { forced-color-adjust: none; background: GrayText; opacity: .35; }
}
.site-quiet { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; color: var(--text-muted); font-size: 14.5px; }
.arc-state--empty { flex-direction: column; }

/* ---------------------------------------------------------------- pressing */

/* A press is answered the moment it lands, however long the work behind
   it takes: every button darkens under the pointer (a .btn also sinks a
   pixel), a switch or a list moves at once where that is safe, and a
   button whose work is under way says so in its label ("Saving…") and
   waits, disabled against a second press - never a spinner. */
button:not(:disabled):not([aria-disabled="true"]):active,
[role="button"]:not([aria-disabled="true"]):active { filter: brightness(.86); }

/* ---------------------------------------------------------------- not found */

/* The page's "not found" view (the router's _notFound): what was not
   there in a line, and the ways on as buttons - the first the main one. */
.nf { max-width: 640px; padding: clamp(24px, 6vw, 72px) 0 clamp(48px, 8vw, 96px); }
.nf__title { margin: 10px 0 0; }
.nf__text { margin: 16px 0 0; }
.nf__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.nf__addr { margin: 28px 0 0; font-size: 13px; color: var(--text-faint); overflow-wrap: anywhere; }
.nf__addr code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }

/* ---------------------------------------------------------------- About Us */

/* Eight counters: two rows of four, then two columns of four on a narrow
   screen - the owner's order either way. */
.stat-row--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-row--8 .stat:nth-child(4n + 1) { border-left: none; }
.stat-row--8 .stat:nth-child(n + 5) { border-top: 1px solid var(--stat-line); }
.stat__value { overflow-wrap: anywhere; }
.stat__value--long { font-size: clamp(20px, 2.2vw, 26px); }
@media (max-width: 960px) {
  .stat-row--8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row--8 .stat:nth-child(odd) { border-left: none; }
  .stat-row--8 .stat:nth-child(even) { border-left: 1px solid var(--stat-line); }
  .stat-row--8 .stat:nth-child(n + 3) { border-top: 1px solid var(--stat-line); }
}

.show-card__icon--avatar { position: relative; background: var(--surface-2); border-color: var(--line-strong); overflow: visible; }
.show-card__icon--avatar .site-av { width: 46px; height: 46px; border-radius: var(--r-md); }
.show-card__icon .site-icon-img { width: 100%; height: 100%; border-radius: inherit; }
.site-icon-img { display: block; object-fit: cover; border-radius: var(--r-sm); }
.site-av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; font-weight: 700; line-height: 1; background: var(--surface-2); }
.site-online { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--surface); background: #7a7072; }
.site-online.is-online { background: var(--green); }
.sm-item__sub .site-online { position: static; display: inline-block; width: 9px; height: 9px; border: 0; margin-right: 6px; vertical-align: 0; }

/* ---------------------------------------------------------------- the review carousel */

/* "What players say": a small label over a row of reviews - three side by
   side on a wide screen, two, then one (Component._revK picks how many
   from the same widths) - with the buttons that turn them at the row's two
   ends. Every card is the same height whatever it holds (its words are
   clamped to the room kept for them), so a turn never moves the page. */
.rev-car { margin-top: clamp(40px, 6vw, 64px); }
.rev-car__title { margin: 0 0 16px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.rev-car__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rev-car__row--still { grid-template-columns: minmax(0, 1fr); }
.rev-car__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
}
.rev-car__btn:hover { background: var(--surface-2); }
/* The cards: as many as the row shows, centred when there are fewer. */
.rev-car__track { display: flex; justify-content: center; gap: 16px; min-width: 0; }
.rev-car__track > .rev-card { flex: 0 0 100%; }
.rev-car__track--2 > .rev-card { flex-basis: calc((100% - 16px) / 2); }
.rev-car__track--3 > .rev-card { flex-basis: calc((100% - 32px) / 3); }
.rev-card {
  min-width: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/* The format and season, on one line, leading to the season: a format's
   name too long for it ends in an ellipsis, the season never does. */
.rev-card__where {
  align-self: flex-start; display: flex; align-items: center; max-width: 100%; min-width: 0;
  font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); text-decoration: none; border-radius: var(--r-xs);
}
.rev-card__fmt { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-card__season { flex: none; white-space: nowrap; }
.rev-card__sep { flex: none; white-space: pre; }
/* One card to a row (a narrow screen): the season under the name, always
   two lines, so a long name has the card's width. */
.rev-car__track--1 .rev-card__where { flex-direction: column; align-items: flex-start; }
.rev-car__track--1 .rev-card__sep { display: none; }
a.rev-card__where:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.rev-card__stars { color: var(--gold); font-size: 15px; line-height: 1.3; letter-spacing: 2px; }
/* Four lines kept for the words, and no more shown. */
.rev-card__body {
  margin: 0; flex: 1 0 auto;
  min-height: calc(4 * 1.55em);
  font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.rev-card__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rev-card__person { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; padding: 3px 12px 3px 3px; border-radius: var(--r-pill); border: 1px solid transparent; background: none; color: var(--text); font-weight: 600; font-size: 13.5px; }
.rev-card__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.rev-card__person { cursor: pointer; border-color: var(--line); }
button.rev-card__person:hover { background: var(--surface-2); border-color: var(--line-strong); }
button.rev-card__person:hover .rev-card__name { text-decoration: underline; text-underline-offset: 3px; }
.rev-card__person--plain { padding-left: 0; }
.rev-card__av { flex: none; display: inline-flex; }
.rev-card__av .site-av { width: 28px; height: 28px; }
.rev-card .skel-b--round { width: 28px; height: 28px; }
/* A turn: the cards on show slide out the way the row is going, one after
   another, and the next ones slide in behind them (Component._revGo times
   the two). For anyone who asks for less motion nothing moves: the cards
   are swapped at once, and the site turns every animation off for them. */
@keyframes rev-out-next { to { opacity: 0; transform: translateX(-28px); } }
@keyframes rev-out-prev { to { opacity: 0; transform: translateX(28px); } }
@keyframes rev-in-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes rev-in-prev { from { opacity: 0; transform: translateX(-28px); } }
.rev-car__track.is-out-next > .rev-card { animation: rev-out-next .24s cubic-bezier(.4, 0, 1, 1) var(--rev-delay, 0ms) both; }
.rev-car__track.is-out-prev > .rev-card { animation: rev-out-prev .24s cubic-bezier(.4, 0, 1, 1) var(--rev-delay, 0ms) both; }
.rev-car__track.is-in-next > .rev-card { animation: rev-in-next .34s var(--ease) var(--rev-delay, 0ms) both; }
.rev-car__track.is-in-prev > .rev-card { animation: rev-in-prev .34s var(--ease) var(--rev-delay, 0ms) both; }
/* One after another, in the order they go (Component._revVals numbers them). */
.rev-card--d1 { --rev-delay: 60ms; }
.rev-card--d2 { --rev-delay: 120ms; }
/* Where a link is a finger's height (fit.css), the season's line takes no
   more room for it: the taller box reaches into the space around it. */
@media (pointer: coarse), (max-width: 720px) {
  .rev-card__where { margin: -11px 0; }
  .rev-car__track--1 .rev-card__where { margin: -4px 0; }
}
@media (max-width: 520px) {
  .rev-car__row { gap: 6px; }
  .rev-card { padding: 16px; }
}

/* ---------------------------------------------------------------- the panels */

.site-panel { width: 760px; padding: 0; }
.site-panel__banner {
  position: relative;
  height: 196px;
  background: radial-gradient(120% 160% at 0% 0%, rgba(181, 35, 44, .38), transparent 58%), radial-gradient(90% 120% at 100% 100%, rgba(204, 31, 42, .16), transparent 60%), var(--surface-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* A format's banner holds its name: at least this tall, taller for a long
   name or line under it, which then starts below the close button. */
.site-panel:not(.site-panel--bot) .site-panel__banner { display: flex; flex-direction: column; justify-content: flex-end; height: auto; min-height: 196px; }
.site-panel--bot .site-panel__banner { height: 168px; }
.site-panel__bannerimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Text over a picture sits on a dark fade, so it reads whatever the picture is. */
.site-panel__banner.has-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 10, 11, .25) 0, rgba(12, 10, 11, 0) 35%, rgba(12, 10, 11, .88) 100%); pointer-events: none; }
.site-panel--bot .site-panel__banner.has-image::after { background: linear-gradient(180deg, rgba(12, 10, 11, .3) 0, rgba(12, 10, 11, 0) 40%, rgba(12, 10, 11, .55) 100%); }
/* The copy-link button and Close, side by side in the banner's top right
   corner, on a bar of no height that stays at the top of the panel as it
   scrolls: both are always in reach, over a dark backing that reads on
   the banner and on the words under it alike. Focus is one rim: the
   button's own edge and its glow. */
.site-panel__bar { position: sticky; top: 0; z-index: 3; height: 0; }
.site-panel__tools { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.site-panel__tool { height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; background: rgba(12, 10, 11, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; text-decoration: none; }
.site-panel__tool:hover { background: rgba(12, 10, 11, .85); color: #fff; }
.site-panel__tool:focus-visible { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); border-radius: 999px; }
@media (forced-colors: active) { .site-panel__tool:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
.site-panel__x { padding: 0 14px; font-size: 13px; font-weight: 600; }
.site-panel__link { width: 36px; padding: 0; }
.site-panel__link .arc-ic { flex: none; }
.site-panel__ident { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 14px; padding: 60px 24px 18px; min-width: 0; }
.site-panel__icon { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: rgba(22, 18, 20, .9); border: 1px solid var(--line-strong); overflow: hidden; }
.site-panel__icon .site-icon-img { width: 100%; height: 100%; }
.site-panel__names { min-width: 0; }
.site-panel__name { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); font-weight: 560; letter-spacing: -.02em; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
/* Under the name, one line: the tag, then the players to its right (a
   format's), both the same light grey - lighter over a picture, on its dark
   fade. A long one wraps as words do; the dot between stays with the tag. */
.site-panel__meta { margin: 6px 0 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--text-muted); overflow-wrap: anywhere; }
.site-panel__banner.has-image .site-panel__meta { color: #e6dcd7; }
.site-panel__sep { opacity: .7; }
/* The invite sits in the banner's bottom right corner. */
.site-panel__invite { position: absolute; z-index: 2; right: 16px; bottom: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
/* Its shadow would take the keyboard's rim's place: the rim, then the shadow. */
.site-panel__invite:focus-visible { box-shadow: var(--rim-glow), 0 6px 18px rgba(0, 0, 0, .45); }
.site-panel__head { display: flex; align-items: flex-end; gap: 16px; padding: 0 24px; position: relative; z-index: 1; min-width: 0; }
/* Only the picture rises into the banner, so nothing else meets the invite button. */
.site-panel__avatar { flex: none; display: flex; margin-top: -46px; border-radius: 50%; border: 5px solid var(--surface); background: var(--surface); }
.site-panel__avatar .site-av { width: 84px; height: 84px; }
.site-panel__head .site-panel__names { padding-top: 12px; padding-bottom: 2px; }
.site-panel__head .site-panel__meta { margin-top: 4px; }
.site-panel__statusrow { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 8px; }
.site-status { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 9px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--text-muted); background: rgba(255, 238, 230, .04); }
.site-status__dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8082; }
.site-status.is-online { color: var(--green); border-color: rgba(93, 211, 158, .45); background: var(--green-wash); }
.site-status.is-online .site-status__dot { background: var(--green); box-shadow: 0 0 0 3px rgba(93, 211, 158, .18); }
.site-panel__version { font-size: 12.5px; font-family: var(--font-mono); color: var(--text-muted); }
.site-panel__body { padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 22px; }
.site-panel__blurb { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text); white-space: pre-line; }

.site-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.site-stat__value { font-family: var(--font-display); font-size: 28px; font-weight: 560; letter-spacing: -.01em; line-height: 1.1; color: var(--text); }
.site-stat__label { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.site-stat__go { margin-top: 8px; white-space: normal; text-align: center; }

/* Markdown, read at panel size. */
.site-md { font-size: 15.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.site-md .md-p { margin: 0 0 10px; white-space: pre-wrap; }
.site-md .md-p:last-child, .site-md .site-md__in > :last-child { margin-bottom: 0; }
.site-md .md-h { margin: 14px 0 6px; font-family: var(--font-display); font-weight: 600; }
.site-md .md-list { margin: 0 0 10px; padding-left: 22px; }
.site-md .md-link { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.site-md .md-quote { margin: 0 0 10px; }

.site-sec { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 238, 230, .015); }
.site-sec--rules, .site-panel--bot .site-sec { border: 0; background: none; }
.site-sec__head { margin: 0; font-size: inherit; }
.site-sec__toggle, .site-item__toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; border: 0; border-radius: var(--r-md);
  background: none; color: var(--text); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em;
}
.site-sec__toggle:hover, .site-item__toggle:hover { background: rgba(255, 238, 230, .04); }
/* The arrow that opens and closes one (a rule, a question, a changelog
   entry) is white, as the words beside it are. */
.site-sec__toggle .arc-ic, .site-item__toggle .arc-ic { color: var(--text); }
.site-sec__body { padding: 0 16px 16px 42px; }
.site-sec__title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.site-sec__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.site-sec__bar .site-sec__title { margin: 0; }
.site-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.site-items__intro { margin-bottom: 12px; }
.site-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.site-item__toggle { font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 12px 14px; }
.site-item__toggle > span:first-of-type { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.site-item__body { padding: 0 16px 14px 40px; font-size: 14.5px; }
.site-item__plain { margin: 0; padding: 12px 14px 12px 40px; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
/* A format panel's small tabs under its rundown - the rules, Questions &
   Answers, Tips & Tricks, its wiki pages and its reviews, each its name in
   plain words - and the part the open one shows under them. The open tab
   wears the studio's rim, #750000 with its glow, as every chosen thing does. */
.fp-tabs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fp-tabs__strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-tabs__item { display: flex; min-width: 0; max-width: 100%; }
.fp-tab {
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%;
  padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-muted); cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.fp-tab > span { overflow-wrap: anywhere; }
.fp-tab:hover { color: var(--text); background: var(--raised); }
.fp-tab.is-open { color: var(--text); border-color: var(--rim); background: var(--selected-wash); box-shadow: var(--selected-glow-sm); }
.fp-tabs__panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 238, 230, .015); }
.fp-tabs__panel[hidden] { display: none; }
/* The Reviews tab: how they rate it, with the way to all of them across
   from it, then the newest. */
.fp-revs__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.fp-revs__top .com-avg__num { font-size: 30px; }
/* Its words line up with the edge it sits at, either side. */
.fp-revs__all { margin: 0 -6px; text-align: left; }
.fp-revs .arc-state--inline { padding-top: 0; }
.site-log__ver { flex: none !important; font-family: var(--font-mono); font-size: 13px; color: var(--accent-text); }
.site-log__date { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 500; color: var(--text-muted); }

.site-cmds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.site-cmd { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 4px 16px; padding: 12px 14px; background: var(--surface-2); }
.site-cmd + .site-cmd { border-top: 1px solid var(--line); }
.site-cmd__name { font-family: var(--font-mono); font-size: 13.5px; color: var(--arc-mention, #ffd0cb); overflow-wrap: anywhere; }
.site-cmd__desc { font-size: 14.5px; color: var(--text); }
.site-cmd__opts { grid-column: 2; list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site-cmd__opt { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text-muted); max-width: 100%; }
.site-cmd__optname { font-family: var(--font-mono); color: var(--text); }
.site-cmd__req { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.site-cmds__search { width: 220px; max-width: 100%; height: 34px; }
/* A bot panel's tabs (the format panel's, .fp-tabs): how many commands,
   beside the search; a policy as its page draws it, with its date, and the
   way to the page itself or the bot's own. */
.bp-cmds__count { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.bp-doc__updated { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.bp-doc__text { overflow-wrap: anywhere; }
.bp-doc__own { margin: 0 0 6px; font-size: 14.5px; color: var(--text); }
.bp-doc__more { margin: 12px 0 0; }
.bp-doc__more .arc-linkbtn { margin: 0 -6px; text-align: left; }
.bp-doc__skel p { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.bp-doc__skel .skel-t { display: block; }

@media (max-width: 720px) {
  .site-stats { grid-template-columns: minmax(0, 1fr); }
  .site-cmd { grid-template-columns: minmax(0, 1fr); }
  .site-cmd__opts { grid-column: 1; }
  .site-panel__ident { padding: 56px 16px 14px; gap: 10px; }
  .site-panel__icon { width: 48px; height: 48px; }
  .site-panel__head { padding: 0 16px; gap: 12px; }
  .site-panel__avatar { margin-top: -36px; }
  .site-panel__avatar .site-av { width: 64px; height: 64px; }
  .site-panel__body { padding: 18px 16px 24px; }
  .site-panel__invite { right: 10px; bottom: 10px; }
  .site-sec__body { padding-left: 16px; }
  .site-item__body, .site-item__plain { padding-left: 14px; }
  .fp-tabs__panel { padding: 12px; }
}
/* Too narrow for all of them in a row: they wrap, and the tabs of each row
   share its width, so every row runs edge to edge - tiles, not a ragged
   line of pills. */
@media (max-width: 520px) {
  .fp-tabs__strip { gap: 6px; }
  .fp-tabs__item { flex: 1 1 auto; }
  .fp-tab { flex: 1; padding: 9px 10px; border-radius: var(--r-md); text-align: center; font-size: 13px; }
}

/* ---------------------------------------------------------------- Site Management */

.sm-page { max-width: 1240px; margin: 0 auto; padding: 44px var(--gutter) 80px; }
.sm-page__head { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
/* The Admin page's three parts, in the header's place of a title: pills like
   the site's own tabs (.wts-tab), set in the display face at heading size,
   so the selected one reads as the page's heading and the other as the
   way to it. */
.sm-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.sm-tab {
  display: inline-block;
  flex: none;
  text-decoration: none;
  padding: 6px 16px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 560;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-muted);
  font-variation-settings: 'opsz' 48;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.sm-tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.sm-tab[aria-current="page"] { color: var(--text); background: rgba(117, 0, 0, .22); box-shadow: inset 0 -2px 0 var(--rim), 0 0 14px 1px rgba(140, 0, 0, .45); }
.sm-tab:focus-visible { outline-offset: -2px; }
/* Focused, the tab on screen wears the focus rim in place of its bar. */
.sm-tab[aria-current="page"]:focus-visible { box-shadow: var(--rim-glow); }
.sm-unsaved { position: sticky; top: 76px; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid rgba(231, 191, 106, .4); background: rgba(38, 31, 22, .96); color: var(--text); font-size: 14px; }
.sm-unsaved__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.sm-card { padding: 22px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.sm-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sm-card__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 560; letter-spacing: -.01em; color: var(--text); }
.sm-card__note { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); max-width: 80ch; }
.sm-sub { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.sm-sub__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.sm-empty { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); }
.sm-code { font-family: var(--font-mono); font-size: .92em; color: var(--text); white-space: nowrap; }

.sm-label { display: block; margin-bottom: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sm-input {
  width: 100%; min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text);
  font-size: 14.5px; line-height: 1.45;
}
.sm-input:focus-visible { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 1px; }
.sm-textarea { resize: vertical; display: block; }
/* hidden means hidden, whatever display a class gives (a Markdown field while
   its preview shows, a section while it is closed). */
.sm-textarea[hidden], .site-sec__body[hidden], .site-item__body[hidden] { display: none; }
.sm-textarea--md { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; }
.sm-textarea--tall { min-height: 360px; }
.sm-select { height: 38px; }
.sm-hint { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
/* A hint the field breaks (an empty headline): said in the warning red. */
.sm-hint.is-error, .sm-hint .is-error { color: var(--accent-text); font-weight: 600; }
.sm-error { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid rgba(255, 122, 114, .4); background: var(--danger-wash); color: var(--text); font-size: 13.5px; }
.sm-new { margin: 0 0 16px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.sm-new__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-new__row .sm-input { flex: 1 1 220px; width: auto; }

.sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sm-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sm-item.is-open { border-color: var(--line-strong); }
.sm-item--private, .sm-item--private.is-open { border-color: rgba(255, 90, 98, .55); }
.sm-item__row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; padding: 11px 14px; }
.sm-item__icon { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.sm-item__icon .site-icon-img { width: 100%; height: 100%; }
.sm-item__icon--avatar { border-radius: 50%; }
.sm-item__icon--avatar .site-av { width: 38px; height: 38px; }
.sm-item__text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.sm-item__name { font-family: var(--font-display); font-size: 18px; font-weight: 560; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.sm-item__sub { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.sm-item__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.sm-badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sm-badge .priv-dot { width: 11px; height: 11px; vertical-align: 0; }
.sm-badge--private { color: #ff9a93; border-color: rgba(255, 90, 98, .6); background: rgba(204, 31, 42, .1); }
.sm-badge--public { color: var(--green); border-color: rgba(93, 211, 158, .4); }
.sm-badge--dirty { color: var(--gold); border-color: rgba(231, 191, 106, .45); background: var(--gold-wash); }
.sm-badge--muted { color: var(--text-muted); }
.sm-item__tools { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.sm-move { color: var(--text-muted); }
.sm-move[disabled] { opacity: .35; cursor: default; }
.sm-move[disabled]:hover { background: transparent; }

.sm-editor { display: flex; flex-direction: column; gap: 16px; padding: 16px 14px 18px; border-top: 1px solid var(--line); }
.sm-editor--flat { padding: 0; border-top: 0; }
.sm-conflict { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid rgba(231, 191, 106, .45); background: var(--gold-wash); }
.sm-conflict__text { margin: 0; font-weight: 600; color: var(--text); }
.sm-conflict__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sm-field { min-width: 0; }
.sm-field--wide { grid-column: 1 / -1; }
.sm-fieldset { margin: 0; padding: 12px 14px 14px; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); }
.sm-fieldset legend { padding: 0 6px; margin-left: -6px; }
.sm-radios { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.sm-radio, .sm-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.sm-radio input, .sm-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.sm-check--dialog { margin-top: 14px; }
.sm-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-iconpick { position: relative; display: inline-flex; cursor: pointer; }
.sm-iconpick__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sm-iconpick__box { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); }
.sm-iconpick:hover .sm-iconpick__box { border-color: rgba(255, 238, 230, .32); }
.sm-iconpick__input:checked + .sm-iconpick__box { border-color: var(--selected); background: var(--selected-wash); box-shadow: 0 0 0 1px var(--selected) inset, var(--selected-glow-sm); }
.sm-iconpick__input:focus-visible + .sm-iconpick__box { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 2px; }
.sm-upload, .sm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sm-row { margin-top: 10px; }
.sm-upload__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); overflow: hidden; }
.sm-upload__icon .site-icon-img { width: 100%; height: 100%; }
/* A file input inside a button-shaped label: hidden from sight, never from
   the keyboard, and the label shows its focus. */
.sm-file { position: relative; }
.sm-file__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.sm-file:focus-within { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 2px; }
.sm-banner { position: relative; height: 120px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 10px; text-align: center; background: radial-gradient(120% 160% at 0% 0%, rgba(181, 35, 44, .3), transparent 58%), var(--surface-2); }
.sm-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sm-banner__none { font-size: 13px; color: var(--text-muted); }
.sm-md { position: relative; min-width: 0; }
.sm-md__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sm-md__head .sm-label { margin: 0; }
.sm-md__toggle { padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: none; color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.sm-md__toggle[aria-pressed="true"] { color: var(--text); background: var(--selected-wash); border-color: var(--selected); box-shadow: var(--selected-glow-sm); }
.sm-md .sm-hint { margin: 2px 0 8px; }
.sm-preview { min-height: 120px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: rgba(0, 0, 0, .18); }
.sm-preview__item { padding: 10px 0; border-top: 1px solid var(--line); }
.sm-preview__item:first-child { border-top: 0; padding-top: 0; }
.sm-preview__title { font-weight: 700; margin-bottom: 4px; }
.sm-count { display: block; margin-top: 4px; text-align: right; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sm-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sm-switchrow__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.sm-switchrow__text .sm-label { margin: 0; font-size: 13px; }
.sm-switchrow__text .sm-hint { margin: 2px 0 0; }
/* On means private: red, like the marker (archive.css, loaded later, makes
   its switches green, hence the extra class). */
.arc-switch.sm-switch[aria-checked="true"] .arc-switch__track { background: var(--blood); border-color: var(--rim); box-shadow: var(--rim-glow); }
.sm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sm-foot__save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sm-foot__note { margin: 0; max-width: 46ch; }
.sm-status { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.sm-status.is-saved { color: var(--green); }
.sm-status.is-dirty { color: var(--gold); }
.sm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.sm-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sm-facts dd { margin: 2px 0 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.sm-keys { list-style: none; margin: 10px 0 0; padding: 0; }
.sm-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sm-key__text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.sm-key__label { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sm-key.is-revoked .sm-key__label { color: var(--text-muted); text-decoration: line-through; }
.sm-key__meta { font-size: 12.5px; color: var(--text-muted); }
.sm-minted { margin: 0 0 16px; padding: 16px; border-radius: var(--r-md); border: 1px solid rgba(93, 211, 158, .45); background: var(--green-wash); }
.sm-minted__title { margin: 0 0 8px; font-weight: 700; color: var(--text); }
.sm-minted__row { display: flex; gap: 8px; flex-wrap: wrap; }
.sm-minted__key { flex: 1 1 260px; width: auto; font-family: var(--font-mono); font-size: 13px; }
.sm-minted__note { margin: 10px 0 12px; font-size: 13.5px; color: var(--text); }
.sm-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); }
.sm-seg__btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sm-seg__btn[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.sm-seg__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.sm-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; margin: 0; font-size: 13.5px; color: var(--text-muted); }
.sm-meta a { color: var(--accent-text); }

/* A bot's Terms of Service and Privacy Policy, in its editor: a section
   that opens on demand, which link the site shows (the page here, or the
   bot's own), and the document's own editor and Save. */
.sm-botlegal { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.sm-botlegal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.sm-botlegal__text { flex: 1 1 260px; min-width: 0; }
.sm-botlegal__text .sm-hint { margin-top: 3px; }
.sm-botlegal__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sm-botlegal__body > .sm-hint { margin: 0; max-width: 80ch; }
.sm-botlegal__body .sm-seg { align-self: flex-start; margin-bottom: 0; }
.sm-notice { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid rgba(255, 90, 98, .5); background: rgba(204, 31, 42, .08); font-size: 13.5px; color: var(--text); }
.sm-notice .priv-dot { flex: none; width: 11px; height: 11px; margin-top: 4px; }
.sm-where { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.sm-where__row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 10px 14px; }
.sm-where__row + .sm-where__row { border-top: 1px solid var(--line); }
.sm-where__label { flex: 0 0 150px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sm-where__value { flex: 1 1 220px; min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.sm-where__value a { color: var(--accent-text); }
.sm-where__row.is-off .sm-where__value { color: var(--text-muted); }
.sm-where .sm-badge { white-space: normal; }
.sm-md__tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sm-md__toggle[disabled] { opacity: .5; cursor: default; }

.legal-preview { font-size: 15px; line-height: 1.65; }
.legal-preview h3 { margin: 18px 0 8px; font-family: var(--font-display); font-size: 24px; font-weight: 560; }
.legal-preview h4 { margin: 16px 0 6px; font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.legal-preview h5 { margin: 12px 0 4px; font-size: 15px; font-weight: 700; }
.legal-preview p { margin: 0 0 10px; }
.legal-preview ul, .legal-preview ol { margin: 0 0 10px; padding-left: 22px; }
.legal-preview a { color: var(--accent-text); }
.legal-preview__in > :first-child { margin-top: 0; }
.legal-preview__invite { margin: 4px 0 12px; cursor: default; }
/* A bot's policy in its panel: there the button is a link to the studio's Discord. */
a.legal-preview__invite, a.legal-preview__invite:hover { color: #fff; text-decoration: none; cursor: pointer; }

/* ---------------------------------------------------------------- Bot Management */

.sm-badge--bot { color: #ffb1a8; border-color: rgba(255, 122, 114, .45); }
.sm-badge--site { color: #a9c7ff; border-color: rgba(140, 175, 255, .45); }
.bm-logs { list-style: none; margin: 0; padding: 0; }
.bm-log { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.bm-log:first-child { border-top: 1px solid var(--line); }
.bm-log__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bm-log__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-log__label { font-weight: 600; color: var(--text); }
.bm-log__desc { font-size: 13px; color: var(--text-muted); }
.bm-log__pick { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bm-log__pick .bm-pickbtn { width: 300px; }
/* "Default", or the button back to it, in a column of its own so the
   pickers line up. */
.bm-log__def { flex: none; min-width: 104px; display: flex; align-items: center; }
.bm-log__default { padding-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.bm-log.is-dirty .bm-pickbtn { border-color: rgba(231, 191, 106, .55); }

/* Message log tracking: the channels left out, each with "Track again",
   and the button that chooses several at once. */
.bm-track__title { margin: 0 0 6px; }
.bm-track__empty { margin: 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-muted); }
.bm-track { list-style: none; margin: 0; padding: 0; }
.bm-track__row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bm-track__row:first-child { border-top: 1px solid var(--line); }
.bm-track__text { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.bm-track__name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bm-track__sub { font-size: 13px; color: var(--text-muted); }
.bm-track__add { margin: 14px 0 18px; }

/* A picker's button: what is chosen, opening the picker dialog. */
.bm-pickbtn {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 220px; max-width: 100%; min-height: 38px;
  padding: 6px 10px 6px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text);
  font-size: 14px; text-align: left; cursor: pointer;
}
.bm-pickbtn:hover { border-color: rgba(255, 238, 230, .32); }
.bm-pickbtn[disabled] { opacity: .6; cursor: not-allowed; }
.bm-pickbtn__in { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.bm-pickbtn__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.bm-pickbtn__sub { font-size: 12px; color: var(--text-muted); }
.bm-pickbtn__none { color: var(--text-muted); }
.bm-pickbtn__unknown { color: var(--gold); }
.bm-pickbtn .arc-ic { flex: none; color: var(--text-muted); }
.bm-dot { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #99aab5; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }

/* The picker dialog: a search box over the list it filters. */
.bm-pick { width: 520px; display: flex; flex-direction: column; }
.bm-pick__body { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1 1 auto; padding-bottom: 16px; }
.bm-pick__body .sm-hint { margin: 0; }
.bm-pick__list { flex: 1 1 auto; min-height: 120px; max-height: min(52vh, 440px); overflow-y: auto; margin-top: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: rgba(0, 0, 0, .18); }
.bm-pick__group + .bm-pick__group { margin-top: 6px; }
.bm-pick__head { padding: 8px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: anywhere; }
.bm-opt { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 8px; border-radius: var(--r-xs); color: var(--text); font-size: 14px; cursor: pointer; }
.bm-opt.is-active { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.bm-opt[aria-selected="true"] { color: #fff; }
.bm-opt[aria-selected="true"] .bm-opt__tick::before { content: '\2713'; color: var(--green); font-weight: 700; }
.bm-opt[aria-disabled="true"] { cursor: default; color: var(--text-muted); }
.bm-opt--thread { padding-left: 26px; }
.bm-opt--none .bm-opt__name { font-weight: 600; }
.bm-opt__tick { flex: none; width: 14px; text-align: center; }
.bm-opt__name { min-width: 0; overflow-wrap: anywhere; }
.bm-opt__note { margin-left: auto; padding-left: 8px; flex: none; font-size: 12px; color: var(--text-muted); }
.bm-pick__count { margin-right: auto; align-self: center; font-size: 13px; color: var(--text-muted); }

/* The Players, Reviews and Staff roles cards: a format and a season to
   work on, then the people (or reviews) of it, one row each. */
.bm-pick-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; }
.bm-pick-row__field { flex: 0 1 260px; min-width: 0; }
.bm-pick-row__field .sm-select { width: 100%; }
.bm-players { margin-bottom: 18px; }
.bm-players__title { margin: 18px 0 8px; font-size: 15px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.bm-players__title:focus { outline: none; }
.bm-players__count { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.bm-plist, .bm-found, .bm-windows, .bm-reviews { list-style: none; margin: 0; padding: 0; }
.bm-player, .bm-found__item { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.bm-plist .bm-player:first-child, .bm-found__item:first-child { border-top: 1px solid var(--line); }
.bm-player.is-dirty .sm-input { border-color: rgba(231, 191, 106, .55); }
.bm-player__av { flex: none; display: inline-flex; }
.bm-player__who { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.bm-player__name { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.bm-player.is-winner .bm-player__name { color: var(--gold); }
.bm-player__user { font-size: 12.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.bm-player__fields { flex: 1 1 320px; min-width: 0; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.bm-player__fields .sm-label { margin-bottom: 3px; font-size: 10.5px; }
.bm-player__place { flex: 0 0 72px; min-width: 0; }
.bm-player__result { flex: 1 1 160px; min-width: 0; }
.bm-player__off { flex: none; }
.bm-player__fixed { font-size: 13px; color: var(--text-muted); }
.bm-players__foot { margin-top: 10px; }
.bm-add { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.bm-add__find .sm-input { max-width: 420px; }
.bm-found { margin-top: 8px; }
.bm-found__status:empty { display: none; }
.bm-found__status.is-error { color: var(--accent-text); }
.bm-add__rolepick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-add__rolepick .bm-pickbtn { flex: 1 1 200px; min-width: 0; }
.bm-msg { margin-top: 12px; font-size: 13.5px; color: var(--text); }
.bm-windows__hint { margin: 0 0 6px; }
.bm-window { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bm-window:first-child { border-top: 1px solid var(--line); }
.bm-window__text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.bm-window__name { font-weight: 600; color: var(--text); }
.bm-window__meta { font-size: 12.5px; color: var(--text-muted); }
.bm-review { padding: 12px 0; border-bottom: 1px solid var(--line); }
.bm-review:first-child { border-top: 1px solid var(--line); }
.bm-review.is-hidden .bm-review__body { color: var(--text-muted); }
.bm-review__head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.bm-review__stars { flex: none; }
.bm-review__body { margin: 8px 0 0; font-size: 14px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.bm-review__tools, .bm-review__ask { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bm-review__asktext { flex: 1 1 100%; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.bm-reviews__more { margin-top: 12px; }
.bm-staffroles { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.bm-staffroles .sm-label { margin: 0; }
.bm-staffroles .sm-hint { margin: 0; }
.bm-staffroles.is-dirty .bm-pickbtn { border-color: rgba(231, 191, 106, .55); }
/* The Season roles card: the roles chosen, in the order profiles show them,
   each with its arrows and Remove. */
.bm-sroles { list-style: none; margin: 12px 0 0; padding: 0; max-width: 560px; }
.bm-sroles:empty { display: none; }
.bm-sroles__empty { margin-top: 10px; }
.bm-srole { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bm-srole:first-child { border-top: 1px solid var(--line); }
.bm-srole__n { flex: none; width: 22px; text-align: right; font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bm-srole__what { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.bm-srole__tools { flex: none; display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* The Players card's awards: the season's, then the form that gives one. */
.bm-awards { margin-top: 8px; }
.bm-awards__list { list-style: none; margin: 0; padding: 0; }
.bm-awards__list .bm-player:first-child { border-top: 1px solid var(--line); }
.bm-award__title { display: inline-flex; align-items: center; gap: 6px; }
.bm-award__title .arc-ic { flex: none; color: var(--gold); }
.bm-award__note { margin-top: 2px; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.bm-award__tools { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bm-award.is-editing { background: rgba(231, 191, 106, .06); }
.bm-awform { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.bm-awform__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.bm-awform__row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.bm-awform__field { min-width: 0; display: flex; flex-direction: column; }
.bm-awform__field .sm-label { margin-bottom: 3px; }
.bm-awform__field--who { flex: 1 1 180px; }
.bm-awform__field--who .sm-select { width: 100%; }
.bm-awform__field--title { flex: 2 1 220px; }
.bm-awform__field--order { flex: 0 0 84px; }
.bm-awform .sm-hint { margin: 0; }
.bm-awform .is-near { color: var(--gold); }

/* The Sample content card (Site Management): what the sample is, a row per
   part of it with the ways to it, and the one button. */
.sm-sample { margin-top: 20px; }
.sm-sample__meta { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); }
.sm-sample__meta.is-warn { color: var(--gold); font-weight: 600; }
.sm-sample__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sm-sample__item { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sm-sample__what { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.sm-sample__name { font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sm-sample__sub { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.sm-sample__links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sm-sample__link { display: inline-flex; align-items: center; min-height: 32px; font-size: 13.5px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.sm-sample__link:hover { text-decoration: underline; }
.sm-sample__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* The Admin page's sub-tabs (index.html, ADMIN_SUBS), under the two parts'
   names: the format panel's small tabs (.fp-tab), as links in a tablist.
   The open one wears the studio's rim, as every chosen thing does; the one
   the keyboard is on wears the rim alone, in place of the outline - one
   ring, so a tab both open and focused still shows a single rim, and keeps
   its shape. Too many for a row, they wrap, each row's tabs sharing its
   width. A gold dot marks one holding a draft. */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 24px; min-width: 0; }
.adm-tab { gap: 8px; text-decoration: none; }
.adm-tab:hover { text-decoration: none; }
.adm-tab:focus-visible { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); border-radius: var(--r-pill); }
@media (forced-colors: active) {
  .adm-tab:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
  .adm-tab[aria-selected="true"] { border: 2px solid Highlight; }
}
/* The Archives sub-tab: each format's name over its seasons, and each
   season's visibility switch across from its name. */
.bm-arc__state { min-height: 1.55em; margin-bottom: 6px; color: var(--text); }
.bm-arc__fmt + .bm-arc__fmt { margin-top: 24px; }
.bm-arc__fmt:has(> .bm-arc__fname:only-child) + .bm-arc__fmt { margin-top: 14px; }
.bm-arc__fname { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.bm-arc__fnametext { overflow-wrap: anywhere; }
.bm-arc__fname .sm-badge { letter-spacing: normal; text-transform: none; }
.bm-arc__fcount { font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--text-faint); }
.bm-arc__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; min-width: 0; }
.bm-arc__top .bm-arc__head { flex: 1 1 260px; }
.bm-arc__vis { flex: none; padding: 0; }
.arc-switch[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* A season's delete dialog: the box DELETE is typed into. Its title and
   description dialog: a field each, the description's box a skeleton of
   its own size while it is read. */
.arc-confirm__typelabel { display: block; margin: 16px 0 6px; font-size: 14px; color: var(--text-muted); }
.arc-confirm__typelabel strong { color: var(--text); letter-spacing: .04em; }
.arc-descdlg__title { margin-bottom: 0; }
.arc-descdlg__hint { margin: 6px 0 16px; }
.arc-descdlg__hint--top { margin: -2px 0 8px; }
.arc-descdlg__skel { display: flex; flex-direction: column; gap: 10px; height: calc(10.5em + 22px); }
/* On a phone the sub-tabs are tiles, as the format panel's are: each as
   wide as its name, then each row's shared out, so no name is squeezed. */
@media (max-width: 520px) {
  .adm-tabs { gap: 6px; margin-top: -4px; }
  .adm-tab { flex: 1 1 auto; }
  .adm-tab:focus-visible { border-radius: var(--r-md); }
}

@media (max-width: 960px) {
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sm-page { padding-top: 28px; }
  .sm-tab { font-size: 21px; padding: 5px 12px 7px; }
  .bm-pickbtn, .bm-log__pick .bm-pickbtn { width: auto; min-width: 0; flex: 1 1 160px; }
  /* In the Staff and Season roles cards' column, that basis would be a
     height: there the button is as tall as what it shows. */
  .bm-staffroles .bm-pickbtn { flex: none; }
  .bm-log__def { min-width: 0; }
  .sm-card { padding: 16px 14px; }
  .sm-grid, .sm-facts { grid-template-columns: minmax(0, 1fr); }
  .sm-item__row { padding: 10px; }
  .sm-item__tools { margin-left: 0; }
  .sm-editor { padding: 14px 10px 16px; }
  .sm-unsaved, .wiki-bulk { top: 112px; }
  .bm-add { grid-template-columns: minmax(0, 1fr); }
  .bm-pick-row__field { flex: 1 1 100%; }
  .bm-player__fields { flex-basis: 100%; }
  /* A log row on a phone: its name with "Default" (or the wider "Use
     default") at the top right, and the picker the row's whole width, so
     every row's picker is the same width. */
  .bm-log__pick { display: contents; }
  .bm-log__text { flex: 1 1 0; }
  .bm-log__def { align-self: flex-start; min-height: 25px; }
  .bm-log .bm-pickbtn { order: 1; flex: 1 1 100%; }
}
@media (max-width: 480px) {
  /* The Admin page's three parts side by side, a third each, as one control. */
  .sm-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  /* 11px at 320 wide, where "Site Management" fills its third. */
  .sm-tab { font-size: clamp(11px, 3.4vw, 21px); padding: 6px 2px 8px; text-align: center; white-space: nowrap; }
  /* The picker's foot: how many are chosen on a line of its own, then its
     three buttons side by side, Done last. */
  .bm-pick .dialog__foot { gap: 8px; }
  .bm-pick__count { flex: 1 1 100%; }
  .bm-pick__count ~ .btn { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-skel__line, .site-skel-card { background: var(--surface); }
}

/* ---- Analytics (the Admin page's third part) ----
   The usage statistics: the period, tables as grids (a <table> cannot hold
   the template's loops), the funnel's bars and the device box with its
   taps (AnCharts), a visit's timeline. Marks: a click is the bars' grey, a
   rage click a red ring, a dead click a gold square. */
.an-bar { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.an-bar .sm-seg { margin-bottom: 0; }
.an-bar__note { margin: 0; flex: 1 1 260px; font-size: 13px; color: var(--text-faint); }
.an-h { margin: 22px 0 8px; font-size: 14px; font-weight: 650; color: var(--text); }
.arc-chart.an-chart { margin-top: 14px; }
.arc-plot--anday { min-height: 200px; }
.an-table { position: relative; display: grid; min-width: 520px; font-size: 13.5px; }
.an-table--3 { grid-template-columns: minmax(180px, 3fr) repeat(2, minmax(70px, 1fr)); min-width: 0; }
.an-table--6 { grid-template-columns: minmax(180px, 3fr) repeat(5, minmax(62px, 1fr)); }
.an-table--7 { grid-template-columns: minmax(150px, 2fr) minmax(150px, 2fr) repeat(4, minmax(56px, 1fr)) auto; min-width: 640px; }
.an-table__row { display: contents; }
.an-table__row > span { padding: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.an-table__head > span { white-space: nowrap; color: var(--text-faint); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.an-table code, .an-picks code, .an-steps code, .an-funnel code, .an-tl code, .an-visit code { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.an-link { color: var(--accent-text); font-weight: 600; }
.an-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.an-pick[aria-pressed="true"] { border-color: var(--rim); box-shadow: var(--rim-glow); }
.an-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; counter-reset: an-step; }
.an-steps > li::before { counter-increment: an-step; content: counter(an-step) "."; margin-right: 6px; color: var(--text-faint); font-size: 12px; }
.an-fig { margin: 14px 0 0; }
.an-funnel { display: flex; flex-direction: column; gap: 14px; }
.an-funnel__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13.5px; }
.an-funnel__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.an-funnel__bar { display: block; width: 100%; height: 14px; }
.an-funnel__track { fill: rgba(255, 238, 230, .06); }
.an-funnel__fill { fill: var(--arc-plot-bar); }
.an-funnel__drop { margin-top: 4px; font-size: 12.5px; color: var(--text-faint); }
.arc-chart__legend.an-legend { justify-content: flex-start; gap: 16px; margin-top: 4px; }
.an-key { display: inline-block; width: 10px; height: 10px; }
.an-key--click { border-radius: 50%; background: var(--arc-plot-bar); }
.an-key--rage { border-radius: 50%; border: 2px solid var(--arc-plot-line); }
.an-key--dead { border-radius: 2px; background: var(--gold); }
.an-device { display: block; width: 100%; height: auto; margin: 0 auto; }
.an-device--phone { max-width: 220px; }
.an-device--tablet { max-width: 340px; }
.an-device--desktop { max-width: 560px; }
.an-device__frame { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.an-dot--click { fill: var(--arc-plot-bar); fill-opacity: .7; }
.an-dot--rage { fill: none; stroke: var(--arc-plot-line); stroke-width: 2.5; }
.an-dot--dead { fill: var(--gold); }
.an-dot__ring { fill: none; stroke: var(--text); stroke-width: 2; animation: an-ring .7s var(--ease) both; transform-box: fill-box; transform-origin: center; }
@keyframes an-ring { from { opacity: 1; transform: scale(.4); } to { opacity: .35; transform: scale(1); } }
.an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.an-filters .sm-seg { margin-bottom: 0; }
.an-visits { list-style: none; margin: 0 0 12px; padding: 0; }
.an-visit { border-bottom: 1px solid var(--line); }
.an-visit__open { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.an-visit__open:hover { background: var(--surface-2); }
.an-visit__open:focus-visible { outline: none; box-shadow: var(--rim-inset); }
.an-visit__when { font-weight: 600; }
.an-visit__what { color: var(--text-muted); }
.an-visit__entry { min-width: 0; overflow-wrap: anywhere; }
.an-one__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.an-one__meta { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.an-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.an-replay { position: sticky; top: 120px; margin: 0; }
.an-replay__screen { margin-bottom: 8px; text-align: center; }
.an-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.an-tl__screen { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.an-tl__screen.is-now { border-color: var(--rim); box-shadow: var(--rim-glow); }
.an-tl__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.an-tl__time { color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.an-tl__events { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--text-muted); }
.an-tl__events:empty { display: none; }
.an-tl__ev { display: flex; gap: 10px; padding: 2px 0; overflow-wrap: anywhere; }
.an-tl__ev.is-struggle { color: var(--gold); }
.an-tl__at { flex: none; width: 40px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .an-one { grid-template-columns: minmax(0, 1fr); }
  .an-replay { position: static; }
  .an-visit__open { grid-template-columns: minmax(0, 1fr) auto; }
  .an-visit__entry { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .an-dot__ring { animation: none; }
}