/* WelcomeTo Studios - the season archives: the listing of every format's
   seasons, and the reader for one season (channels, messages, search,
   members), its dialogs, and the archives card on the Admin tab.

   Loaded after tokens.css and site.css, and built from their tokens. The
   reader is a Discord-like reading surface, kept in the site's warm
   near-blacks rather than Discord's greys. Every text colour is checked
   against the lightest surface it sits on (a highlighted message,
   --arc-hi): the faintest text is 4.8:1 there. Role colours from Discord
   are lifted in the page (ArchiveUtil.readable) until they clear 4.6:1. */

:root {
  --arc-rail: #120f11;        /* channel list and side panel */
  --arc-read: #181416;        /* the message pane */
  --arc-card: #201a1d;        /* files, polls, search results */
  /* An embed is a card of its own, lighter than the pane under it (1.24:1
     on it, 1.16:1 on a search result's card) and edged with a line that
     shows on every surface a message has, highlighted ones included. */
  --arc-embed: #2e2629;
  --arc-embed-line: rgba(255, 238, 230, .14);
  --arc-embed-bar: #7a6e73;   /* an embed with no colour of its own: 3.7:1 on the pane */
  --arc-hover: #1f1a1d;       /* a message under the pointer */
  --arc-hi: #2b2426;          /* a message linked to, or with its menu open */
  --arc-code: #0e0b0c;
  --arc-line: rgba(255, 238, 230, .07);
  --arc-app: #4f5bd5;         /* the APP tag: white text on it is 5.7:1 */
  /* A mention, as Discord draws one: a blue wash with light blue letters
     (7.1:1 on a highlighted message, the lightest it sits on), white on
     solid blue under the pointer (4.6:1). */
  --arc-mention: #c9cdfb;
  --arc-mention-bg: rgba(88, 101, 242, .3);
  --arc-mention-hover: #5865f2;
  /* The sticky header and a little air. --arc-header-h is the header's own
     height, measured by the page (_archWatchHeader); the number after it
     is what the header is when nothing has measured it yet. */
  --arc-top: calc(var(--arc-header-h, 69px) + 12px);
}

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

.arc-page:has(> .arc-viewer) { padding-top: 16px; padding-bottom: 28px; }
.arc-stats { margin: clamp(32px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); }
.arc-page .arc-ic { flex: none; }

.arc-state { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 48px 20px; color: var(--text-muted); font-size: 15px; text-align: center; }
.arc-state--inline { justify-content: flex-start; padding: 10px 0; text-align: left; }
.arc-state--error { color: var(--text); }
.arc-sealed {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
  padding: clamp(40px, 8vw, 88px) 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: radial-gradient(80% 120% at 50% 0%, rgba(181, 35, 44, .10), transparent 70%), var(--surface);
}
.arc-sealed__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--gold); }
.arc-sealed--live .arc-sealed__icon { color: var(--accent-text); }
.arc-sealed__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 560; letter-spacing: -.01em; line-height: 1.15; margin: 8px 0 0; color: var(--text); font-variation-settings: 'opsz' 48; }
.arc-sealed__text { margin: 0 0 10px; color: var(--text-muted); max-width: 46ch; }
.arc-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 14px; color: var(--text); }
.arc-note--gold { background: var(--gold-wash); border: 1px solid rgba(231, 191, 106, .35); }
.arc-note--gold .arc-ic { color: var(--gold); }
.arc-note--live { background: var(--accent-wash); border: 1px solid rgba(255, 122, 114, .3); }
.arc-note--live .arc-ic { color: var(--accent-text); }

.arc-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; line-height: 1.4; }
.arc-pill--live { color: #ff9c95; background: rgba(255, 122, 114, .12); border: 1px solid rgba(255, 122, 114, .32); }
.arc-pill--gold { color: var(--gold); background: var(--gold-wash); border: 1px solid rgba(231, 191, 106, .35); }
.arc-pill--muted { color: var(--text-muted); background: rgba(255, 238, 230, .05); border: 1px solid var(--line-strong); }
.arc-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5a51; box-shadow: 0 0 0 0 rgba(255, 90, 81, .6); animation: arc-pulse 1.8s ease-out infinite; }
@keyframes arc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 81, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 90, 81, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 81, 0); } }

.arc-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; background: var(--arc-app); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; vertical-align: 1px; flex: none; }
/* A persona's tag names what sent it ("PluralKit"): a name, so not spaced
   out like APP, and cut short if a webhook's maker has a long one. */
.arc-tag--src { display: inline-block; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; letter-spacing: .01em; }
/* In the members list and on a card the tag is shorter still and gives
   way first: the name keeps the room, the tag shrinks to a few letters
   before the name loses any. (Shrinking is shared out by weight, so the
   tag's has to dwarf the name's: even a sliver taken from a name that
   just fits would cut it off with an ellipsis.) */
.arc-tag--fit { max-width: 8em; min-width: 3.4em; flex: 0 1000000 auto; }
.arc-linkbtn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 4px 6px; border-radius: var(--r-xs); color: var(--accent-text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.arc-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.arc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.arc-iconbtn:hover { background: var(--raised); color: var(--text); }
.arc-iconbtn[aria-pressed="true"] { background: var(--selected-wash); border-color: var(--selected); box-shadow: var(--selected-glow-sm); color: var(--accent-text); }
.arc-iconbtn--danger:hover { background: var(--danger-wash); border-color: rgba(255, 122, 114, .5); color: var(--danger); }
.arc-iconbtn--sm { width: 32px; height: 32px; border-color: transparent; background: transparent; }
.arc-iconbtn--sm:hover { background: rgba(255, 238, 230, .07); }

/* ---------------------------------------------------------------- the listing */

.arc-formats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.arc-fmt {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface);
  box-shadow: var(--shadow-card);
  scroll-margin-top: var(--arc-top);
}
.arc-fmt.is-current { border-color: var(--selected); box-shadow: var(--selected-glow), var(--shadow-card); }
.arc-fmt__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.arc-fmt__icon { flex: none; width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--accent-wash); border: 1px solid rgba(255, 122, 114, .18); color: var(--accent-text); }
/* A picture the studio uploaded fills the slot, cut to its rounded corners;
   a built-in line icon sits in its middle with room round it. */
.arc-fmt__icon .site-icon-img { width: 100%; height: 100%; border-radius: 0; }
.arc-fmt__titles { flex: 1; min-width: 0; }
.arc-fmt__name { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 560; letter-spacing: -.01em; line-height: 1.15; color: var(--text); font-variation-settings: 'opsz' 48; }
.arc-fmt__tag { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.arc-fmt__count { flex: none; font-size: 12.5px; color: var(--text-faint); }
.arc-fmt__empty { margin: 0; padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-faint); font-size: 14px; text-align: center; }
.arc-seasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.arc-season {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
a.arc-season:hover { background: var(--raised); border-color: var(--line-strong); color: var(--text); }
a.arc-season:hover .arc-season__go { transform: translateX(2px); color: var(--text); }
.arc-season__no { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--arc-code); border: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-muted); }
.arc-season__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arc-season__title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-season__meta { font-size: 13px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-season__go { display: flex; color: var(--text-faint); transition: transform .15s var(--ease), color .15s var(--ease); }
.arc-season--locked { background: transparent; border-style: dashed; border-color: var(--line-strong); color: var(--text-muted); }
.arc-season__lock { display: flex; color: var(--text-faint); }

/* ---------------------------------------------------------------- the reader: head */

/* The season's header, then the reader under it. The reader has a height
   of its own (--arc-reader, below the shell) - the window under the sticky
   header, less a little air - so a tall header (a description, its wiki
   pages, a staff note) pushes it, and all that follows it, down: it never
   runs under the statistics laid out after it. */
.arc-viewer { display: flex; flex-direction: column; }
.arc-viewer > * { flex: none; }
.arc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 14px; padding: 0; font-size: 13.5px; color: var(--text-faint); }
.arc-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.arc-crumbs li + li::before { content: '/'; color: var(--text-faint); }
.arc-crumbs a { color: var(--text-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.arc-crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.arc-crumbs [aria-current] { color: var(--text); }

.arc-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 16px; }
.arc-head__text { min-width: 0; flex: 1 1 420px; }
.arc-head__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.arc-head__title { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 42px); font-weight: 540; line-height: 1.08; letter-spacing: -.015em; color: var(--text); font-variation-settings: 'opsz' 72; overflow-wrap: anywhere; }
.arc-head__kicker { color: var(--text-muted); font-style: italic; font-weight: 380; }
.arc-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: 13.5px; color: var(--text-muted); }
.arc-head__meta strong { color: var(--text); font-weight: 600; }
.arc-head__desc { margin: 10px 0 0; max-width: 72ch; font-size: 15px; color: var(--text-muted); }
.arc-sep { color: var(--text-faint); }
.arc-head__tools { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------- search */

/* The search box sits in the reader's bar, as Discord's does: words, then
   Enter. Its rim is the box's, not the field's: one rim. */
.arc-find {
  position: relative; flex: 0 1 220px; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  height: 36px; padding: 0 2px 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--arc-code);
  /* It widens as it opens; its rim is there at once, as every rim is
     (one that faded in would be no rim for its first moments). */
  transition: flex-basis .18s var(--ease);
}
.arc-find:focus-within, .arc-find.is-on { flex-basis: 280px; }
.arc-find:has(.arc-find__input:focus-visible) { border-color: var(--rim); box-shadow: var(--rim-glow); }
.arc-find__icon { display: flex; flex: none; color: var(--text-faint); }
.arc-find__input { flex: 1; min-width: 0; height: 100%; padding: 0 6px; border: 0; background: none; color: var(--text); font-size: 14px; font-weight: 500; }
.arc-find__input:focus, .arc-find__input:focus-visible { outline: none; box-shadow: none; }
.arc-find__input::placeholder { color: var(--text-faint); opacity: 1; }
.arc-find__clear, .arc-find__filters { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); cursor: pointer; }
.arc-find__filters .arc-badge { position: absolute; top: -3px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 11px; }
.arc-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }

/* The last five searches, under the box while it is empty and has focus. */
.arc-recent { position: absolute; top: 8px; right: 50px; z-index: 7; display: flex; flex-direction: column; width: min(360px, calc(100% - 58px)); max-height: calc(100% - 16px); padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-pop); animation: arc-pop .12s var(--ease); }
.arc-recent__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 6px 6px; }
.arc-recent__title { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.arc-recent__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.arc-recent__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.arc-recent__item:focus-visible { outline-offset: -2px; }
.arc-recent__q { font-weight: 600; overflow-wrap: anywhere; }
.arc-recent__tok { display: inline-flex; align-items: center; max-width: 100%; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 238, 230, .07); color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-chip__k { color: var(--accent-text); font-weight: 600; margin-right: .3em; }

.arc-chips { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--arc-line); }
.arc-chips__list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; min-width: 0; }
.arc-chip--on { display: inline-flex; align-items: center; max-width: 100%; height: 28px; padding: 0 3px 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 13px; }
.arc-chip--on > span:not(.arc-chip__k) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-chip__x { flex: none; width: 24px; height: 24px; margin-left: 4px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--text-muted); cursor: pointer; }
.arc-chip__x:hover { background: rgba(255, 238, 230, .1); color: var(--text); }

/* ---------------------------------------------------------------- menus */

.arc-menu { position: fixed; z-index: 70; min-width: 220px; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-pop); animation: arc-pop .12s var(--ease); }
.arc-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.arc-menu__item:hover, .arc-menu__item:focus-visible { background: var(--accent); color: #fff; outline: none; }
.arc-menu__item--danger { color: var(--danger); }
.arc-menu__item--danger:hover, .arc-menu__item--danger:focus-visible { background: #a51d25; color: #fff; }
.arc-menu__sep { height: 1px; margin: 4px 6px; background: var(--line); }
@keyframes arc-pop { from { opacity: 0; transform: translateY(-3px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the reader: shell */

/* --arc-room is the window under the sticky header, less a little air
   above and below. The reader takes all of it (and at least 320px): with
   the reader scrolled to, it fills the window whole. Its own scroll areas
   hold the messages and the panels beside them; nothing in it is drawn
   outside it. --arc-top, the header and the air over the reader, is where
   a scroll to the reader stops. */
:root {
  --arc-room: calc(100dvh - var(--arc-top) - 12px);
  --arc-reader: max(320px, var(--arc-room));
}
.arc-shell { height: var(--arc-reader); scroll-margin-top: var(--arc-top); }
/* On a wide screen the reader is wider than the page's column, up to
   1640px, centred on it: --arc-vw is the window's width without its
   scrollbar, which the page measures (unmeasured, it is the column). */
@media (min-width: 721px) {
  .arc-viewer > .arc-shell {
    --arc-wide: max(100%, min(1640px, calc(var(--arc-vw, 100%) - 2 * var(--gutter))));
    width: var(--arc-wide);
    margin-left: calc((100% - var(--arc-wide)) / 2);
  }
}
/* The frame: the channels, then the bar over the messages and the panels
   beside them. Full screen, it covers the window, over the site's header
   and under the reader's own menus and dialogs. */
.arc-frame {
  position: relative;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--arc-read);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9), var(--shadow-card);
}
.arc-frame.is-full { position: fixed; inset: 0; z-index: 65; height: auto; border: 0; border-radius: 0; box-shadow: none; }
html.arc-is-full { overflow: hidden; scrollbar-gutter: auto; }

.arc-chans { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--arc-rail); border-right: 1px solid var(--arc-line); }
/* Skip to the messages: out of sight until the keyboard reaches it, then
   laid over the head of the channel list. */
.arc-skip { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.arc-skip:focus { top: 8px; left: 8px; right: 8px; z-index: 2; width: auto; height: auto; margin: 0; clip: auto; white-space: normal; display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--focus); box-shadow: var(--rim-glow); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.arc-chans__head { flex: none; display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--arc-line); min-width: 0; }
.arc-chans__season { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-chans__fmt { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-chans__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 16px; }
.arc-chans__cat { padding: 14px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-chans ul { list-style: none; margin: 0; padding: 0; }
.arc-chan { display: flex; align-items: center; gap: 7px; margin: 1px 0; padding: 6px 8px; border-radius: var(--r-xs); color: var(--text-faint); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.arc-chan:hover { background: rgba(255, 238, 230, .05); color: var(--text-muted); }
.arc-chan.is-current { background: rgba(255, 238, 230, .09); color: var(--text); }
.arc-chan--thread { margin-left: 16px; font-size: 13.5px; }
.arc-chan .arc-ic { opacity: .85; }
.arc-chan__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.arc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* The bar: where the reader is on the left, the channel's tools on the
   right - each a button of its own, named, with a tooltip. */
.arc-chbar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 10px 7px 16px; border-bottom: 1px solid var(--arc-line); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); min-width: 0; background: var(--arc-read); }
.arc-chbar__where { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.arc-chbar__icon { display: flex; flex: none; color: var(--text-faint); }
.arc-chbar__parent { flex: 0 1 auto; min-width: 0; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.arc-chbar__parent:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.arc-chbar__chev { display: flex; flex: none; color: var(--text-faint); }
.arc-chbar__name { flex: 0 1 auto; margin: 0; min-width: 0; font-family: var(--font-body); font-size: 15.5px; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-chbar__topic { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--line-strong); color: var(--text-faint); font-size: 13.5px; }
.arc-chbar__tools { flex: none; display: flex; align-items: center; gap: 4px; min-width: 0; }
.arc-chansel { display: none; }
.arc-chansel__select { width: 100%; height: 38px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; }
.arc-chbtn {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
/* On, or open: the icon lit and the button filled - no rim, which is
   focus's alone. */
.arc-chbtn[aria-pressed="true"], .arc-chbtn[aria-expanded="true"] { background: rgba(255, 238, 230, .12); color: var(--text); }

/* Under the bar: the messages, and the members or the search's results
   beside them. */
.arc-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.arc-body.has-members { grid-template-columns: minmax(0, 1fr) 248px; }
.arc-body.has-search { grid-template-columns: minmax(0, 1fr) min(420px, 44%); }

.arc-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--arc-read); }
.arc-bar { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 7px 12px 7px 16px; border-bottom: 1px solid var(--arc-line); background: var(--arc-rail); color: var(--text-muted); font-size: 13.5px; }
.arc-bar--old { background: rgba(231, 191, 106, .08); color: var(--text); }

.arc-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding-bottom: 18px; }
.arc-scroll:focus-visible, .arc-results:focus-visible, .arc-side__scroll:focus-visible { outline-offset: -3px; border-radius: 0; box-shadow: var(--rim-inset); }
.arc-more { display: flex; justify-content: center; padding: 14px 12px; }
.arc-start { padding: 32px 16px 10px; }
.arc-start__icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text); }
.arc-start__icon svg { width: 30px; height: 30px; }
.arc-start__title { margin: 14px 0 4px; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.arc-start__text { margin: 0; color: var(--text-muted); }

/* To the channel's start or its newest message, over the messages' lower
   right corner while there is more of it that way. */
.arc-jumps { position: absolute; right: 18px; bottom: 14px; z-index: 3; display: flex; gap: 6px; }
.arc-jump { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop); cursor: pointer; }
/* Its own shadow would take the place of the keyboard's rim (one rule as
   specific as the site's :focus-visible, and later): the rim, then the lift. */
.arc-jump:focus-visible { box-shadow: var(--rim-glow), 0 24px 64px -16px rgba(0, 0, 0, .75); }

/* Beside the messages: the members, or the search's results. */
.arc-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--arc-rail); border-left: 1px solid var(--arc-line); }
.arc-side__head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--arc-line); }
.arc-side__title { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-side__count { color: var(--text-faint); font-weight: 600; }
.arc-side__total { flex: 1 1 auto; min-width: 0; font-size: 12.5px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-side__head .arc-iconbtn { margin-left: auto; }
.arc-side__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 12px; }
.arc-side__more, .arc-side__empty, .arc-side__note { margin: 0; padding: 8px 8px 4px; font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.arc-side__more:empty { display: none; }
.arc-side__state { padding: 10px 8px; }
.arc-mgroup__title { margin: 14px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-members { list-style: none; margin: 0; padding: 0; }
.arc-member { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 4px 8px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text); text-align: left; cursor: pointer; }
.arc-member__av { flex: none; display: flex; }
.arc-member__av .arc-av { width: 32px; height: 32px; }
.arc-member__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.arc-member__line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.arc-member__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 550; }
.arc-member__sub { font-size: 12px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A search's results: one card per message, with where it was said; a
   press on one goes to it in the messages. */
.arc-results { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

/* The bar's popovers, over the top right of what is under the bar - with
   the recent searches, lined up with the search box's right edge, so the
   close button of a panel beside the messages stays clear. */
.arc-pop { position: absolute; top: 8px; right: 50px; z-index: 6; display: flex; flex-direction: column; width: min(420px, calc(100% - 58px)); max-height: calc(100% - 16px); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-pop); animation: arc-pop .12s var(--ease); }
.arc-pop__head { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.arc-pop__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.arc-pop__title .arc-ic { align-self: center; color: var(--text-muted); }
.arc-pop__sub { min-width: 0; color: var(--text-faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-pop__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.arc-pop__empty { margin: 0; padding: 18px 10px; color: var(--text-muted); font-size: 14px; text-align: center; }
.arc-pop__group { margin: 12px 8px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.arc-pop__list { list-style: none; margin: 0; padding: 0; }
.arc-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.arc-pop__item:focus-visible { outline-offset: -2px; }
.arc-thr__icon { display: flex; flex: none; color: var(--text-faint); }
.arc-thr__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arc-thr__n { flex: none; color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.arc-thr.is-current { background: rgba(255, 238, 230, .09); }
.arc-pin { align-items: flex-start; }
.arc-pin__av { flex: none; display: flex; padding-top: 2px; }
.arc-pin__av .arc-av { width: 32px; height: 32px; }
.arc-pin__star { flex: none; display: flex; padding-top: 3px; color: var(--gold); }
.arc-pin__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.arc-pin__who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.arc-pin__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.arc-pin__when { flex: none; color: var(--text-faint); font-size: 12px; white-space: nowrap; }
.arc-pin__body { color: #ddd6d2; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hover, where there is a pointer to hover with: on a touch screen the
   last tap would leave its button lit. */
@media (hover: hover) {
  .arc-find:hover { border-color: var(--line-strong); }
  .arc-find__clear:hover, .arc-find__filters:hover { background: rgba(255, 238, 230, .08); color: var(--text); }
  .arc-recent__item:hover { background: rgba(255, 238, 230, .07); }
  .arc-chbtn:hover { background: rgba(255, 238, 230, .07); color: var(--text); }
  .arc-chbtn[aria-pressed="true"]:hover, .arc-chbtn[aria-expanded="true"]:hover { background: rgba(255, 238, 230, .15); }
  .arc-jump:hover { background: var(--raised); }
  .arc-member:hover { background: rgba(255, 238, 230, .06); }
  .arc-pop__item:hover { background: rgba(255, 238, 230, .07); }
  .arc-item--result:hover { border-color: var(--line-strong); }
}

/* ---------------------------------------------------------------- messages */

.arc-msgs { list-style: none; margin: 0; padding: 0 0 6px; }
.arc-day { display: flex; align-items: center; gap: 10px; margin: 22px 16px 8px; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.arc-day::before, .arc-day::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.arc-msg {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "reply reply" "gut main";
  column-gap: 16px;
  padding: 2px 56px 2px 16px;
  color: #ece6e2;
  transition: background-color .12s var(--ease);
}
.arc-msg--head { margin-top: 14px; }
.arc-day + .arc-msg--head { margin-top: 6px; }
/* Lit under the pointer, or with the keyboard in it - never because focus
   was only left in it (by a jump, or a menu that closed), and on a touch
   screen never by the last tap, whose hover would stick. */
@media (hover: hover) { .arc-msg:hover { background: var(--arc-hover); } }
.arc-msg:focus-visible, .arc-msg:has(:focus-visible) { background: var(--arc-hover); }
.arc-msg:focus { outline: none; }
.arc-msg:focus-visible { outline: 2px solid var(--focus); box-shadow: var(--rim-inset); outline-offset: -2px; border-radius: 0; }
.arc-msg.is-menu { background: var(--arc-hi); }
/* The message jumped to: gold for a moment, fading to nothing; the page
   then drops the class, so nothing stays lit. */
.arc-msg.is-target { animation: arc-flash 2.4s var(--ease) both; }
@keyframes arc-flash { 0%, 35% { background-color: rgba(231, 191, 106, .2); box-shadow: inset 2px 0 0 var(--gold); } 100% { background-color: transparent; box-shadow: inset 2px 0 0 transparent; } }
.arc-msg__gutter { grid-area: gut; padding-top: 2px; min-width: 0; }
.arc-msg__main { grid-area: main; min-width: 0; }
.arc-av { display: block; flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.arc-av--initials { display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .02em; user-select: none; }
.arc-msg__gutter > .arc-av { cursor: pointer; }
.arc-msg__gutter > .arc-av:hover { box-shadow: 0 0 0 2px rgba(255, 238, 230, .14); }
.arc-msg__hover { display: block; padding-top: 3px; text-align: right; font-size: 11px; color: var(--text-faint); white-space: nowrap; opacity: 0; transition: opacity .12s var(--ease); }
.arc-msg:hover .arc-msg__hover, .arc-msg:focus-visible .arc-msg__hover, .arc-msg:has(:focus-visible) .arc-msg__hover { opacity: 1; }
.arc-msg__head { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 0; line-height: 1.4; min-width: 0; }
/* The author's name is a button 24px tall, WCAG 2.5.8's floor: a message
   that starts with a mention has a second button right under it. */
.arc-msg__name { min-height: 24px; padding: 0; border: 0; background: none; color: var(--text); font-size: 15.5px; font-weight: 600; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-msg__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.arc-msg__time { font-size: 12px; color: var(--text-faint); white-space: nowrap; cursor: default; }
.arc-msg__flag { display: inline-flex; align-items: center; color: var(--text-faint); }
.arc-msg__flag--star { color: var(--gold); }
.arc-msg__edited { margin-left: 4px; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.arc-msg--system { padding-top: 4px; padding-bottom: 4px; margin-top: 4px; }
.arc-msg--system .arc-msg__gutter { display: flex; justify-content: center; padding-top: 3px; color: var(--text-faint); }
.arc-msg__system { font-size: 14px; line-height: 1.45; color: var(--text-muted); overflow-wrap: anywhere; }
.arc-msg__system > .md-p, .arc-msg__system > div { display: inline; }
.arc-msg__system strong { color: var(--text); font-weight: 600; }
.arc-msg__system .arc-msg__time { margin-left: 8px; }
.arc-msg__syslink { margin-left: 6px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.arc-reply {
  grid-area: reply;
  position: relative;
  display: flex; align-items: center; gap: 6px;
  min-width: 0; max-width: 100%;
  margin: 2px 0 2px 20px;
  padding: 0 0 0 36px;
  border: 0; background: none;
  font-size: 13.5px; line-height: 1.4;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
}
.arc-reply__spine { position: absolute; left: 0; top: 50%; width: 30px; height: 14px; border-left: 2px solid #5a5054; border-top: 2px solid #5a5054; border-top-left-radius: 7px; }
.arc-reply .arc-av { width: 16px; height: 16px; }
.arc-reply .arc-av--initials { font-size: 8px !important; }
.arc-reply__name { flex: none; font-weight: 600; color: var(--text); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-reply__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-reply__text--muted { font-style: italic; }
.arc-reply:hover .arc-reply__text { color: var(--text); }

.arc-msg__tools {
  position: absolute; right: 14px; top: -14px; z-index: 2;
  display: flex; gap: 2px; padding: 2px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s var(--ease);
}
.arc-msg:hover > .arc-msg__tools, .arc-msg:focus-visible > .arc-msg__tools, .arc-msg:has(:focus-visible) > .arc-msg__tools, .arc-msg.is-menu > .arc-msg__tools { opacity: 1; pointer-events: auto; }
.arc-msg__more, .arc-msg__jump { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 6px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.arc-msg__more:hover, .arc-msg__jump:hover, .arc-msg__more[aria-expanded="true"] { background: rgba(255, 238, 230, .08); color: var(--text); }
.arc-msg__jump { padding: 0 10px; color: var(--text); }
.arc-msg__more::before { content: ''; display: block; width: 16px; height: 4px; background: radial-gradient(circle at 2px 2px, currentColor 1.6px, transparent 2px) 0 0 / 6px 4px repeat-x; }

/* search results, in the panel beside the messages: one card per message,
   with where it was said, and its Jump and More in that line */
.arc-msgs--results { padding: 8px 8px 6px; }
.arc-item--result { margin: 0 0 8px; padding: 4px 0 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--arc-card); cursor: pointer; transition: border-color .12s var(--ease); }
.arc-item--result .arc-msg { margin-top: 0; padding: 2px 12px; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
.arc-item--result .arc-msg__gutter > .arc-av { width: 32px !important; height: 32px !important; }
.arc-item--result .arc-msg:hover, .arc-item--result .arc-msg:focus-visible, .arc-item--result .arc-msg:has(:focus-visible) { background: transparent; }
.arc-item--result .arc-msg__tools { top: -32px; right: 6px; opacity: 1; pointer-events: auto; border: 0; background: none; box-shadow: none; }
.arc-item--result .arc-reply, .arc-item--result .arc-cmd { margin-left: 14px; padding-left: 26px; }
.arc-res__where { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 96px 0 12px; font-size: 12.5px; color: var(--text-faint); }
.arc-res__chan { font-weight: 600; color: var(--text-muted); }

/* ---------------------------------------------------------------- markdown */

.md { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.arc-msg__body { color: #ece6e2; }
.md-b { font-weight: 700; }
.md-u { text-decoration: underline; text-underline-offset: 2px; }
.md-s { text-decoration: line-through; }
.md-code { padding: .1em .35em; border-radius: 4px; background: var(--arc-code); border: 1px solid var(--arc-line); font-family: var(--font-mono); font-size: .86em; }
.md-pre { margin: 6px 0; padding: 10px 12px; max-width: 100%; border-radius: var(--r-sm); background: var(--arc-code); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: #e2dcd8; }
.md-quote { margin: 4px 0; padding: 0 0 0 12px; border-left: 4px solid #4a4044; }
.md-h { margin: 8px 0 2px; font-weight: 700; line-height: 1.3; color: var(--text); }
.md-h1 { font-size: 1.5rem; }
.md-h2 { font-size: 1.25rem; }
.md-h3 { font-size: 1.05rem; }
.md-sub { font-size: 12.5px; color: var(--text-faint); }
.md-list { margin: 4px 0; padding-left: 24px; white-space: normal; }
.md-list li { white-space: pre-wrap; }
.md-link { color: var(--link); text-decoration: none; }
.md-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--link); }
.md-mention { display: inline; padding: 0 2px; border: 0; border-radius: 3px; background: var(--arc-mention-bg); color: var(--arc-mention); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .1s var(--ease), color .1s var(--ease); }
button.md-mention:hover { background: var(--arc-mention-hover); color: #fff; }
span.md-mention { cursor: default; }
.md-mention--muted { font-weight: 400; }
/* A role mention in the role's own colour (set by the page: --role, its
   "r, g, b", and --role-ink, a tint of it that reads on this page). */
.md-mention--role.has-color { background: rgba(var(--role), .1); color: var(--role-ink); }
.md-emoji { display: inline-block; width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -.3em; }
.md--jumbo { font-size: 42px; line-height: 1.2; }
.md--jumbo .md-emoji { width: 48px; height: 48px; vertical-align: -6px; }
.md-ts { padding: 0 2px; border-radius: 3px; background: rgba(255, 238, 230, .07); }
.md-spoiler { padding: 0 2px; border-radius: 4px; background: #3d3438; color: transparent; cursor: pointer; transition: background-color .12s var(--ease); }
.md-spoiler:hover { background: #4a3f44; }
.md-spoiler__in { color: transparent; user-select: none; }
.md-spoiler.is-open { background: rgba(255, 238, 230, .08); color: inherit; cursor: auto; }

/* ---------------------------------------------------------------- attachments, embeds, polls */

.arc-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.arc-att-img { position: relative; display: block; max-width: 100%; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--arc-code); cursor: zoom-in; }
.arc-att-img img { display: block; width: 100%; height: auto; }
.arc-att-img.is-spoiler { cursor: pointer; }
.arc-att-img.is-spoiler img { filter: blur(28px) brightness(.6); transform: scale(1.1); }
.arc-att-img__tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 12px; border-radius: var(--r-pill); background: rgba(8, 6, 7, .8); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.arc-att-video { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); background: #000; }
.arc-file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; max-width: 432px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--arc-card); color: var(--accent-text); }
.arc-file.is-missing { border-style: dashed; color: var(--text-faint); background: transparent; }
.arc-file__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.arc-file__name { font-size: 15px; font-weight: 600; color: var(--link); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.arc-file__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.arc-file.is-missing .arc-file__name { color: var(--text-muted); }
.arc-file__meta { font-size: 12px; color: var(--text-faint); }
.arc-att-audio { flex: 1 1 100%; width: 100%; height: 36px; }

/* An embed: a card of its own on the message, with a bar down its left in
   the embed's colour (--embed-bar, set by the page and lifted until it
   shows), as Discord draws one - but a card that stands clear of this
   darker page rather than melting into it. */
.arc-embed {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  max-width: 520px; margin-top: 6px; padding: 10px 16px 14px 12px;
  border: 1px solid var(--arc-embed-line); border-left: 4px solid var(--embed-bar, var(--arc-embed-bar));
  border-radius: 4px var(--r-sm) var(--r-sm) 4px;
  background: var(--arc-embed);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 6px 18px -12px rgba(0, 0, 0, .8);
}
.arc-embed__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.arc-embed__author { font-size: 13px; font-weight: 600; color: var(--text); }
.arc-embed__title { font-size: 15.5px; font-weight: 700; color: var(--text); }
.arc-embed__title .md-link { color: #9fb4ff; }
.arc-embed__desc { font-size: 14px; color: #e4ddd9; }
.arc-embed__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; margin-top: 2px; }
.arc-embed__field { grid-column: 1 / -1; min-width: 0; }
.arc-embed__field.is-inline { grid-column: auto; }
.arc-embed__fname { font-size: 13.5px; font-weight: 700; color: var(--text); }
.arc-embed__fvalue { font-size: 14px; color: #e4ddd9; }
.arc-embed__image { display: block; max-width: 100%; margin-top: 4px; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--arc-code); cursor: zoom-in; }
.arc-embed__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.arc-embed__thumb { width: 80px; height: 80px; border-radius: var(--r-xs); object-fit: cover; }
.arc-embed__footer { font-size: 12px; color: #a99f99; }
.arc-embed .md-code { background: rgba(0, 0, 0, .3); }

.arc-poll { max-width: 440px; margin-top: 6px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--arc-card); }
.arc-poll__head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.arc-poll__q { margin: 6px 0 10px; font-size: 16px; font-weight: 650; color: var(--text); }
.arc-poll__answers { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.arc-poll__answer { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line-strong); font-size: 14px; color: var(--text); }
.arc-poll__bar { position: absolute; inset: 0 auto 0 0; z-index: -1; background: rgba(255, 238, 230, .07); }
.arc-poll__answer.is-winner { border-color: var(--selected); }
.arc-poll__answer.is-winner .arc-poll__bar { background: rgba(181, 35, 44, .3); }
.arc-poll__answer.is-winner .arc-poll__name { font-weight: 700; }
.arc-poll__name { min-width: 0; overflow-wrap: anywhere; }
.arc-poll__votes { flex: none; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arc-poll__foot { margin-top: 10px; font-size: 13px; color: var(--text-faint); }

.arc-sticker { display: block; width: 160px; height: 160px; margin-top: 6px; object-fit: contain; }
.arc-sticker--missing { width: auto; height: auto; display: inline-block; padding: 6px 10px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); color: var(--text-faint); font-size: 13px; }
.arc-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* A reaction is a button: pointed at it says who reacted (the tooltip
   below), pressed it lists them (the Reactions dialog). */
.arc-react { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 26px; min-width: 44px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: #241e21; color: var(--text-muted); font: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: background-color .1s var(--ease), border-color .1s var(--ease); }
.arc-react:hover { background: #2e272a; border-color: rgba(255, 238, 230, .28); color: var(--text); }
.arc-react__img { width: 16px; height: 16px; object-fit: contain; }
.arc-react__n { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Who reacted, over the reaction: one for the whole page, placed by
   _archTipShow (its --tip-x is the reaction's middle, where the arrow goes). */
.arc-tip { position: fixed; z-index: 75; left: 0; top: 0; display: none; align-items: center; gap: 10px; max-width: min(300px, calc(100vw - 16px)); padding: 8px 12px 8px 8px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: #0f0c0d; color: var(--text); box-shadow: var(--shadow-pop); font-size: 13.5px; line-height: 1.35; }
.arc-tip.is-on { display: flex; }
.arc-tip::after { content: ''; position: absolute; left: var(--tip-x, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: #0f0c0d; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); transform: rotate(45deg); }
.arc-tip.is-below::after { top: -6px; bottom: auto; transform: rotate(225deg); }
.arc-tip__emoji { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 26px; line-height: 1; }
.arc-tip__emoji .arc-react__img { width: 32px; height: 32px; }
.arc-tip__emoji .arc-react__emoji { font-size: 26px; }
.arc-tip__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.arc-tip__text strong { font-weight: 700; }
.arc-tip__text span { color: var(--text-muted); }

/* A message that started a thread: the thread, under it, as Discord shows it. */
.arc-thread { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: min(100%, 432px); min-height: 40px; margin-top: 6px; padding: 8px 10px 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--arc-embed-line); background: var(--arc-embed); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.arc-thread:hover { border-color: rgba(255, 238, 230, .28); }
.arc-thread .arc-ic { flex: none; color: var(--text-muted); }
.arc-thread__name { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-thread__n { flex: none; color: #a6b4ff; font-weight: 600; font-size: 13px; }

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

/* A person's profile pop-out, drawn as Discord draws one: a banner, their
   picture over its edge in a ring of the card's colour, their names and
   tags, then a darker panel of sections. At a desk it sits beside what
   opened it, over the page without dimming it (.is-placed, .is-clear); on
   a phone it is in the middle, over a dimmed page. */
:root {
  --arc-prof: #1e181b;          /* the card */
  --arc-prof-panel: #110d0f;    /* its sections: muted text 9.4:1 on it */
}
.arc-prof-scrim { z-index: 85; }
.arc-prof-scrim.is-clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.arc-prof { position: relative; width: 340px; max-width: 100%; max-height: calc(100dvh - 40px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--arc-prof); box-shadow: var(--shadow-pop); animation: arc-pop .14s var(--ease); }
.arc-prof.is-placed { position: fixed; }
.arc-prof__banner { height: 96px; background-color: #3a2f33; background-position: center; background-size: cover; background-repeat: no-repeat; }
/* A band of colour reads as a banner, not as a slab: lit from above. */
.arc-prof__banner:not(.has-pic) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .18)); }
.arc-prof__x { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: rgba(12, 10, 11, .72); color: #fff; font-size: 14px; }
.arc-prof__x:hover { background: rgba(12, 10, 11, .92); }
.arc-prof__top { height: 44px; padding: 0 16px; }
.arc-prof__av { position: relative; top: -44px; display: inline-flex; border-radius: 50%; border: 6px solid var(--arc-prof); background: var(--arc-prof); }
.arc-prof__av .arc-av { width: 80px; height: 80px; }
.arc-prof__body { padding: 0 16px 16px; }
.arc-prof__names { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.arc-prof__name { margin: 0; min-width: 0; font-family: var(--font-body); font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.arc-prof__user { margin: 2px 0 0; color: var(--text-muted); font-size: 14px; overflow-wrap: anywhere; }
.arc-prof__user:empty { display: none; }
.arc-prof__proxy { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.arc-prof__proxy .arc-ic { flex: none; margin-top: 1px; }
.arc-prof__panel { margin-top: 12px; padding: 4px 12px; border-radius: var(--r-sm); background: var(--arc-prof-panel); }
.arc-prof__sec { padding: 10px 0; }
.arc-prof__sec + .arc-prof__sec { border-top: 1px solid var(--line); }
.arc-prof__h { margin: 0 0 8px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.arc-prof__note { margin: -4px 0 8px; color: var(--text-muted); font-size: 12.5px; }
.arc-prof__none { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.arc-prof__since { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text); font-size: 14px; }
.arc-prof__date { display: inline-flex; align-items: center; gap: 8px; }
.arc-prof__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--text-muted); }
.arc-prof__mark--server { border-radius: 4px; object-fit: cover; }
.arc-prof__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.arc-prof__roles { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.arc-prof__roles:empty { display: none; }
.arc-role { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 24px; padding: 2px 8px 2px 6px; border-radius: 4px; background: #261f22; border: 1px solid rgba(255, 238, 230, .06); color: var(--text); font-size: 12.5px; font-weight: 500; }
.arc-role__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.arc-role__name { min-width: 0; overflow-wrap: anywhere; }
.arc-prof__stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin: 0; }
.arc-prof__stat { min-width: 0; }
.arc-prof__stat dt { color: var(--text-muted); font-size: 12px; }
.arc-prof__stat dd { margin: 2px 0 0; color: var(--text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.arc-prof__stat .is-skel { display: block; height: 20px; }
.arc-prof__stat.is-wide .is-skel { width: 150px; }
/* A date and time takes the whole row, its label beside it. */
.arc-prof__stat.is-wide { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.arc-prof__stat.is-wide dd { margin: 0; font-size: 13.5px; }
.arc-prof__go { display: flex; justify-content: center; width: 100%; margin-top: 12px; }
.arc-prof__go--skel { height: 36px; border-radius: var(--r-pill); overflow: hidden; }

/* Who reacted: a tab per emoji down the left (along the top on a phone),
   the people on the right, as Discord's Reactions dialog has them. */
.arc-rdlg { position: relative; display: flex; flex-direction: column; width: 520px; height: min(480px, calc(100dvh - 40px)); overflow: hidden; }
.arc-rdlg__head { flex: none; padding: 18px 56px 12px 20px; }
.arc-rdlg__x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.arc-rdlg__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-top: 1px solid var(--line); }
.arc-rdlg__tabs { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; background: var(--arc-rail); border-right: 1px solid var(--line); }
.arc-rdlg__tab { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text-muted); font: inherit; font-size: 14px; cursor: pointer; }
.arc-rdlg__tab:hover { background: rgba(255, 238, 230, .06); color: var(--text); }
.arc-rdlg__tab[aria-selected="true"] { background: rgba(255, 238, 230, .1); color: var(--text); }
.arc-rdlg__tab .arc-react__img { width: 20px; height: 20px; }
.arc-rdlg__tab .arc-react__emoji { font-size: 18px; line-height: 1; }
.arc-rdlg__n { font-weight: 700; font-variant-numeric: tabular-nums; }
.arc-rdlg__panel { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
/* One rim, drawn inside: the tabs and the people fill boxes that scroll,
   where a rim outside them would be cut off at the sides. */
.arc-rdlg__panel:focus-visible { outline-offset: -3px; border-radius: 0; box-shadow: var(--rim-inset); }
.arc-rdlg__tab:focus-visible, .arc-rdlg__who:focus-visible { outline-offset: -2px; box-shadow: var(--rim-inset); }
.arc-rdlg__list { list-style: none; margin: 0; padding: 0; }
.arc-rdlg__who { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: var(--r-xs); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.arc-rdlg__who:hover { background: rgba(255, 238, 230, .06); }
.arc-rdlg__av .arc-av { width: 32px; height: 32px; }
.arc-rdlg__name { min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-rdlg__user { min-width: 0; color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-rdlg__none, .arc-rdlg__more { margin: 0; padding: 10px 8px; color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 560px) {
  .arc-rdlg__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .arc-rdlg__tabs { flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .arc-rdlg__tab { flex: none; }
}

.arc-filters { width: 700px; }
/* "Search <season>" over the title is grey, as every other eyebrow line. */
.arc-filters__eyebrow { color: var(--text-muted); }
.arc-filters__body { display: flex; flex-direction: column; gap: 20px; }
.arc-filters__people, .arc-filters__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.arc-fset { min-width: 0; margin: 0; padding: 0; border: 0; }
.arc-fset__legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.arc-fset__hint { margin-left: 6px; color: var(--accent-text); font-weight: 600; letter-spacing: .02em; text-transform: none; }
.arc-field { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text); font-size: 14px; }
.arc-field::placeholder { color: var(--text-faint); opacity: 1; }
.arc-field--select { padding-right: 6px; }
.arc-people { list-style: none; max-height: 200px; overflow-y: auto; margin: 8px 0 0; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.arc-person { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.arc-person:hover { background: rgba(255, 238, 230, .05); }
.arc-person input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.arc-person__av .arc-av { width: 24px; height: 24px; }
.arc-person__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 550; }
.arc-person__count { flex: none; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.arc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.arc-pillcheck { position: relative; display: inline-flex; cursor: pointer; }
.arc-pillcheck input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.arc-pillcheck span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-muted); font-size: 14px; font-weight: 550; transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); }
.arc-pillcheck:hover span { border-color: rgba(255, 238, 230, .3); color: var(--text); }
/* A chosen pill is filled, with no mark in it; a rim is focus's alone,
   and is the only one it wears. */
.arc-pillcheck input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.arc-pillcheck:hover input:checked + span { border-color: var(--accent-hover); background: var(--accent-hover); color: #fff; }
.arc-pillcheck input:focus-visible + span { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); }
@media (forced-colors: active) {
  .arc-pillcheck input:checked + span { border: 2px solid Highlight; }
  .arc-pillcheck input:focus-visible + span { outline: 2px solid CanvasText; outline-offset: 2px; }
}
.arc-date { display: grid; grid-template-columns: 124px minmax(0, 1fr) 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.arc-filters__foot { align-items: center; }
.arc-spacer { flex: 1; }

.arc-lightbox { padding: 16px; }
.arc-lightbox__panel { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.arc-lightbox__panel:focus { outline: none; }
.arc-lightbox__bar { display: flex; align-items: center; gap: 10px; width: 100%; max-width: min(1100px, 100%); }
.arc-lightbox__name { flex: 1; min-width: 0; margin: 0; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-lightbox__x { width: 36px; height: 36px; flex: none; color: var(--text); font-size: 18px; background: rgba(22, 18, 20, .8); border-radius: 50%; }
.arc-lightbox__stage { display: flex; justify-content: center; max-width: 100%; }
.arc-lightbox__img { display: block; max-width: min(1100px, 100%); max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: var(--r-md); background: var(--arc-code); box-shadow: var(--shadow-pop); }

.arc-confirm { width: 460px; }
.arc-confirm__what { margin: 0 0 8px; font-weight: 600; color: var(--text); }
.arc-confirm__body { margin: 0; }
.arc-confirm__err { margin: 12px 0 0; color: var(--danger); }
.arc-descdlg { width: 560px; }
.arc-descdlg__label { display: block; margin: 0 0 10px; color: var(--text-muted); font-size: 14px; }
.arc-descdlg__count { margin: 6px 0 0; color: var(--text-muted); font-size: 12.5px; text-align: right; }

/* ---------------------------------------------------------------- admin */

.arc-admin { padding: 22px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); }
.arc-admin__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.arc-admin__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 560; letter-spacing: -.01em; color: var(--text); }
.arc-admin__note { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.arc-switch { display: flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: none; color: var(--text); cursor: pointer; }
.arc-switch[disabled] { opacity: .6; cursor: progress; }
.arc-switch__track { position: relative; width: 44px; height: 24px; border-radius: var(--r-pill); border: 1px solid #7a7072; background: var(--raised); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.arc-switch__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #f4efed; transition: transform .2s var(--ease); }
.arc-switch[aria-checked="true"] .arc-switch__track { background: #2f9e6b; border-color: #2f9e6b; }
.arc-switch[aria-checked="true"] .arc-switch__knob { transform: translateX(20px); }
.arc-switch__label { min-width: 54px; font-size: 13px; font-weight: 600; text-align: left; }
.arc-admin__fmt + .arc-admin__fmt { margin-top: 18px; }
.arc-admin__fname { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.arc-admin__empty { margin: 0; padding: 8px 0; font-size: 13.5px; color: var(--text-faint); }
.arc-admin__list { list-style: none; margin: 0; padding: 0; }
.arc-admin__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.arc-admin__info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.arc-admin__name { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.arc-admin__name:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.arc-admin__meta { font-size: 12.5px; color: var(--text-faint); }
.arc-vis { padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid; background: none; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.arc-vis.is-on { color: var(--green); border-color: rgba(93, 211, 158, .5); }
.arc-vis.is-off { color: var(--gold); border-color: rgba(231, 191, 106, .5); }
.arc-vis[disabled], .arc-admin__row .btn[disabled] { opacity: .55; cursor: progress; }

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

@media (max-width: 1100px) {
  .arc-frame { grid-template-columns: 210px minmax(0, 1fr); }
  .arc-body.has-members { grid-template-columns: minmax(0, 1fr) 224px; }
  .arc-body.has-search { grid-template-columns: minmax(0, 1fr) min(380px, 48%); }
  .arc-find { flex-basis: 180px; }
  .arc-find:focus-within, .arc-find.is-on { flex-basis: 230px; }
}
@media (max-width: 960px) {
  .arc-chbar__topic { display: none; }
}
@media (hover: none) {
  /* No hover on touch screens: the More button stays in reach. */
  .arc-msg__tools { opacity: 1; pointer-events: auto; top: 2px; right: 6px; border-color: transparent; background: none; box-shadow: none; }
  .arc-msg--cont > .arc-msg__tools { top: -2px; }
  .arc-msg__more { color: var(--text-faint); }
}
/* A finger's worth: the bar's controls and the search box's own buttons. */
@media (pointer: coarse), (max-width: 720px) {
  .arc-chbtn { width: 44px; height: 44px; }
  .arc-find { height: 46px; padding-right: 1px; }
  .arc-find__clear, .arc-find__filters { width: 44px; height: 44px; }
  .arc-find__filters .arc-badge { top: 2px; right: 2px; }
}
@media (max-width: 720px) {
  .arc-head { align-items: flex-start; }
  .arc-head__text { flex-basis: 100%; }
  .arc-head__meta { font-size: 13px; gap: 2px 14px; }
  .arc-sep { display: none; }
  /* On a phone the reader is the whole window under the header, edge to
     edge: the channels a select in its bar, the members and the search's
     results over the messages. */
  .arc-viewer > .arc-shell { margin: 0 calc(-1 * var(--gutter)); }
  .arc-frame { grid-template-columns: minmax(0, 1fr); border-radius: 0; border-left: 0; border-right: 0; }
  .arc-chans { display: none; }
  /* The bar in two rows: the channel and its threads, pins and members;
     then the search, the channel's link and full screen. */
  .arc-chbar { flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
  .arc-chbar__tools { display: contents; }
  .arc-chbar__where { flex: 1 1 0; min-width: 120px; }
  .arc-chbar__icon, .arc-chbar__topic, .arc-chbar__parent, .arc-chbar__chev { display: none; }
  .arc-chbar__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .arc-chansel { display: flex; flex: 1; min-width: 0; }
  .arc-find, .arc-find:focus-within, .arc-find.is-on { order: 1; flex: 1 1 calc(100% - 106px); }
  .arc-chbtn--link { order: 2; }
  .arc-chbtn--full { order: 3; }
  .arc-body.has-members, .arc-body.has-search { grid-template-columns: minmax(0, 1fr); }
  .arc-side { position: absolute; inset: 0; z-index: 4; border-left: 0; }
  .arc-body.is-side-away .arc-side { display: none; }
  .arc-pop, .arc-recent { left: 8px; right: 8px; width: auto; }
  .arc-jumps { right: 10px; bottom: 10px; }
  .arc-msg { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 2px 40px 2px 12px; }
  .arc-msg__gutter > .arc-av { width: 34px !important; height: 34px !important; }
  .arc-reply { margin-left: 16px; padding-left: 28px; }
  .arc-reply__spine { width: 22px; }
  .arc-day { margin-left: 12px; margin-right: 12px; }
  .arc-item--result .arc-msg { padding-right: 12px; }
  .arc-start { padding-left: 12px; padding-right: 12px; }
  .arc-filters__people, .arc-filters__row { grid-template-columns: minmax(0, 1fr); }
  .arc-date { grid-template-columns: 104px minmax(0, 1fr) 32px; }
  .arc-filters__foot .arc-spacer { display: none; }
  .arc-filters__foot .btn { flex: 1 1 auto; }
  .arc-embed__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .arc-msg__head { column-gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-pill__dot { animation: none; }
  /* Lit without the fade, for the same moment. */
  .arc-msg.is-target { animation: none; background-color: rgba(231, 191, 106, .14); box-shadow: inset 2px 0 0 var(--gold); }
  .arc-menu, .arc-pop, .arc-recent, .arc-prof { animation: none; }
  .arc-find, .arc-chbtn, .arc-item--result { transition: none; }
}

/* ---------------------------------------------------------------- commands, voice messages, custom emoji */

/* A message that answers a slash command: "<name> used /command" above it,
   where a reply's preview would be. */
.arc-cmd { grid-area: reply; position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 24px; margin: 2px 0 4px 20px; padding: 0 0 0 36px; color: var(--text-muted); font-size: 13.5px; line-height: 1.4; }
.arc-cmd .arc-av { width: 16px; height: 16px; }
.arc-cmd .arc-av--initials { font-size: 8px !important; }
.arc-cmd__who { flex: none; max-width: 40%; min-height: 24px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.arc-cmd__who { cursor: pointer; }
button.arc-cmd__who:hover { text-decoration: underline; text-underline-offset: 3px; }
.arc-cmd__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--arc-mention); font-weight: 600; }

/* A voice message: play, the waveform Discord recorded, the length. The
   played part of the waveform is a second copy of the bars, clipped to how
   far it has got (--p, set by the page while it plays). */
.arc-voice { --p: 0%; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 6px; padding: 8px 14px 8px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--arc-card); }
.arc-voice__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.arc-voice__play:hover { background: var(--accent-hover); }
.arc-voice__play[disabled] { background: var(--raised); color: var(--text-faint); cursor: not-allowed; }
.arc-voice__play .arc-ic + .arc-ic { display: none; }
.arc-voice.is-playing .arc-voice__play .arc-ic:first-child { display: none; }
.arc-voice.is-playing .arc-voice__play .arc-ic + .arc-ic { display: block; }
.arc-voice__wave { position: relative; flex: 1 1 200px; width: 200px; min-width: 80px; height: 32px; overflow: hidden; border-radius: 4px; cursor: pointer; }
.arc-voice.is-missing .arc-voice__wave { cursor: default; }
.arc-voice__bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.arc-voice__bar { flex: 1 1 0; min-width: 1px; max-width: 4px; border-radius: 2px; background: #7a6d72; }
.arc-voice__bars--on { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.arc-voice__bars--on .arc-voice__bar { background: var(--text); }
.arc-voice__time { flex: none; min-width: 34px; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.arc-voice__note { flex: none; color: var(--text-faint); font-size: 12px; }
.arc-voice__audio { display: none; }
.md-emoji-name { color: var(--text-muted); }

/* ---------------------------------------------------------------- under the reader: statistics and reviews */

:root {
  --arc-bar: #e2564e;       /* one series, one colour: 5:1 on the chart card */
  /* The day chart's two series, on the chart card (#1f1a1d): messages in
     the red (4.6:1), contributors in a warm grey (4.6:1) - told apart by
     their marks too, a line and bars. */
  --arc-plot-line: #e2564e;
  --arc-plot-line-hi: #f0837c;
  --arc-plot-bar: #8c8185;
  --arc-plot-bar-hi: #b5aaae;
}
.arc-extra { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 40px; }
.arc-panel { min-width: 0; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)), var(--surface); box-shadow: var(--shadow-card); }
.arc-panel__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
.arc-panel__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 560; letter-spacing: -.01em; color: var(--text); scroll-margin-top: var(--arc-top); font-variation-settings: 'opsz' 48; }
.arc-panel__title:focus { outline: none; }
.arc-panel__title:focus-visible { outline: 2px solid var(--focus); box-shadow: var(--rim-glow); outline-offset: 4px; }
.arc-panel__hint { color: var(--text-faint); font-size: 13.5px; }

.arc-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.arc-num { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.arc-num__v { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 540; line-height: 1.05; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; font-variation-settings: 'opsz' 72; }
.arc-num__l { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.arc-nums--small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); margin-top: 10px; }
.arc-nums--small .arc-num { padding: 10px 12px; }
.arc-nums--small .arc-num__v { font-family: var(--font-body); font-size: 18px; font-weight: 650; letter-spacing: 0; }
.arc-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Another scope on its way: the numbers on screen stay, dimmed, until its
   answer replaces them. */
.arc-stats__body { transition: opacity .2s var(--ease); }
.arc-stats__body[data-refreshing="true"] { opacity: .55; }

/* What the numbers count: a pill like the site's others (site.css's
   .pill-select), its list a search box over the choices. The channels are
   grouped by category, each thread indented under its channel with the
   thread icon and a "Thread" tag. */
.arc-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 16px; }
.arc-scope__label { color: var(--text-muted); font-size: 13.5px; font-weight: 600; }
.arc-scope__sel { min-width: 0; max-width: 100%; }
.arc-scope__btn { width: auto; max-width: min(440px, 100%); gap: 8px; padding-left: 12px; }
.arc-scope__icon { flex: none; display: inline-flex; align-items: center; color: var(--text-muted); }
.arc-scope__icon:empty { display: none; }
.arc-scope__icon .arc-av { width: 20px; height: 20px; font-size: 9px; }
.arc-scope__tag { flex: none; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--text-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; line-height: 1.5; text-transform: uppercase; }
.arc-scope__note { color: var(--text-faint); font-size: 13px; }
.arc-scope__pop { display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); max-height: min(440px, 70vh); padding: 0; overflow: hidden; }
.arc-scope__find { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text-faint); }
.arc-scope__glass { flex: none; display: flex; }
.arc-scope__q { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; }
.arc-scope__q::placeholder { color: var(--text-faint); }
.arc-scope__q:focus { outline: none; border-color: var(--rim); box-shadow: var(--rim-glow); }
.arc-scope__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.arc-scope__group + .arc-scope__group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.arc-scope__ghead { padding: 6px 10px 4px; overflow: hidden; color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.arc-scope__opt { min-height: 40px; padding: 6px 12px 6px 8px; }
.arc-scope__opt:hover:not(.is-active) { background: rgba(255, 238, 230, .06); }
.arc-scope__opt--thread { padding-left: 30px; }
.arc-scope__name { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.arc-scope__n { flex: none; margin-left: 6px; color: var(--text-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.arc-scope__opt.is-active .arc-scope__n, .arc-scope__opt.is-active .arc-scope__icon, .arc-scope__opt.is-active .arc-scope__tag { color: #fff; border-color: rgba(255, 255, 255, .5); }
.arc-scope__more { flex: none; margin: 0; padding: 8px 14px 10px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 12.5px; }
@media (pointer: coarse) { .arc-scope__opt { min-height: 44px; } }
/* On a phone the list hangs from the row, not the pill, so all of it is on
   screen whatever the pill's width. */
@media (max-width: 600px) {
  .arc-scope { position: relative; }
  .arc-scope__sel { position: static; }
  .arc-scope__pop { right: 0; width: auto; }
}

/* The charts: a wide one of the days, and one of the hours. Messages are
   the site's red - a line over a soft wash of it - and the day's
   contributors a warm grey, as bars behind it; text stays in the text
   colours. Grid lines are hairlines a step off the card. */
.arc-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 20px; }
.arc-chart { min-width: 0; margin: 0; padding: 14px 16px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
.arc-chart__title { margin-bottom: 8px; color: var(--text); font-size: 13.5px; font-weight: 650; }
.arc-chart__unit { color: var(--text-faint); font-weight: 500; }
/* Each series' name over its own axis: messages left, contributors right. */
.arc-chart__legend { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.arc-chart__lg { display: inline-flex; align-items: center; gap: 7px; }
.arc-chart__key { flex: none; display: inline-block; }
.arc-chart__key--line { width: 16px; height: 3px; border-radius: 2px; background: var(--arc-plot-line); }
.arc-chart__key--bar { width: 9px; height: 12px; border-radius: 2px 2px 0 0; background: var(--arc-plot-bar); }
.arc-chart__none { margin: 8px 0 0; color: var(--text-faint); font-size: 13.5px; }
/* The plot keeps its height while it is measured, so nothing moves when
   it is drawn. Horizontal drags read the days; vertical ones scroll. */
.arc-plot { position: relative; min-height: 240px; border-radius: var(--r-sm); touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.arc-plot--hour { min-height: 180px; }
.arc-plot > .skel-b { display: block; height: 240px; }
.arc-plot--hour > .skel-b { height: 180px; }
.arc-plot:focus { outline: none; }
.arc-plot:focus-visible { box-shadow: var(--rim-glow); }
@media (forced-colors: active) { .arc-plot:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
.arc-plot__canvas { position: relative; }
.arc-plot__svg { display: block; width: 100%; height: auto; overflow: visible; }
.arc-plot__grid { stroke: rgba(255, 238, 230, .08); stroke-width: 1; }
.arc-plot__base, .arc-plot__mark { stroke: rgba(255, 238, 230, .22); stroke-width: 1; }
.arc-plot__tick { fill: var(--text-faint); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.arc-plot__bars path { fill: var(--arc-plot-bar); }
.arc-plot__hi { fill: var(--arc-plot-bar-hi); }
.arc-plot--hour .arc-plot__bars path { fill: var(--arc-plot-line); }
.arc-plot--hour .arc-plot__hi { fill: var(--arc-plot-line-hi); }
.arc-plot__fill-top { stop-color: var(--arc-plot-line); stop-opacity: .3; }
.arc-plot__fill-foot { stop-color: var(--arc-plot-line); stop-opacity: .02; }
.arc-plot__line { fill: none; stroke: var(--arc-plot-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.arc-plot__svg--dense .arc-plot__line { stroke-width: 1.75; }
.arc-plot__point { fill: var(--arc-plot-line); }
.arc-plot__cross { stroke: rgba(255, 238, 230, .45); stroke-width: 1; }
.arc-plot__dot { fill: var(--arc-plot-line); stroke: var(--surface-2); stroke-width: 2; }
/* The readout: the day first, then each number with its series' stroke. */
.arc-plot__tip { position: absolute; top: 2px; z-index: 2; padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--shadow-pop); color: var(--text); font-size: 13px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.arc-plot__tip[hidden] { display: none; }
.arc-plot__tipday { margin-bottom: 3px; color: var(--text-muted); font-size: 12px; font-weight: 600; }
.arc-plot__tiprow { display: flex; align-items: center; gap: 8px; font-weight: 650; font-variant-numeric: tabular-nums; }
.arc-plot__key { flex: none; display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.arc-plot__key--line { background: var(--arc-plot-line); }
.arc-plot__key--bar { background: var(--arc-plot-bar); }
.arc-plot--hour .arc-plot__key--bar { background: var(--arc-plot-line); }
@media (prefers-reduced-motion: reduce) { .arc-stats__body { transition: none; } }

.arc-tops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 22px; }
.arc-top { min-width: 0; }
.arc-top__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.arc-top__none { margin: 0; color: var(--text-faint); font-size: 13.5px; }
.arc-top__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.arc-top__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.arc-top__item--who { grid-template-columns: 28px minmax(0, 1fr) auto; }
.arc-top__item:hover { background: rgba(255, 238, 230, .05); }
.arc-top__av .arc-av { width: 28px; height: 28px; }
.arc-top__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
/* A thread: its icon, its name, and the channel it is in. */
.arc-top__item--thread .arc-top__name { display: flex; align-items: center; gap: 6px; }
.arc-top__ic { flex: none; display: inline-flex; color: var(--text-faint); }
/* Positioned, so the words for a screen reader stay inside it however
   long the name: they never widen the page. */
.arc-top__label { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.arc-top__in { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-faint); font-size: 12.5px; font-weight: 500; }
.arc-top__n { color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.arc-top__track { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(255, 238, 230, .07); }
.arc-top__item--who .arc-top__track { grid-column: 2 / -1; }
.arc-top__bar { display: block; height: 100%; border-radius: 2px; background: var(--arc-bar); }

.arc-rev__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.arc-rev__write { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.arc-rev__write .com-hint { margin: 0; }

@media (max-width: 960px) {
  .arc-tops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .arc-panel { padding: 16px; }
  .arc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-num__v { font-size: 24px; }
  .arc-tops { grid-template-columns: minmax(0, 1fr); }
  .arc-nums--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-nums--small .arc-num__l { letter-spacing: .06em; }
  .arc-chart { padding: 12px 10px 10px; }
  .arc-cmd { margin-left: 16px; padding-left: 28px; }
  .arc-voice { gap: 10px; padding-right: 12px; }
  .arc-voice__bars { gap: 1px; }
}

/* ---------------------------------------------------------------- voice calls (docs/voice.md)

   The season's calls under the reader, and one played. Who is speaking is
   shown by a soft green glow and a slight lift of their picture, and said
   to screen readers in words - never a ring or an outline: the one rim
   (site.css) stays the keyboard's. */

.arc-pill--muted { color: var(--text-muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.arc-vc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.arc-vc__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); text-decoration: none; }
a.arc-vc__item:hover { border-color: var(--line-strong); background: var(--raised); }
a.arc-vc__item:focus-visible { border-radius: var(--r-md); }
.arc-vc__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); color: var(--text-muted); }
.arc-vc__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arc-vc__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-vc__meta { color: var(--text-muted); font-size: 13px; }
.arc-vc__list.is-skel .arc-vc__main { gap: 8px; }
.arc-vc__who { flex: none; display: inline-flex; }
.arc-vc__avs { display: inline-flex; align-items: center; }
.arc-vc__avs .arc-av { width: 26px; height: 26px; margin-left: -7px; border: 2px solid var(--surface-2); box-sizing: content-box; }
.arc-vc__avs .arc-av:first-child { margin-left: 0; }
.arc-vc__more { margin-left: 6px; color: var(--text-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.arc-vcp { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.arc-vcp__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.arc-vcp__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.arc-vcp__ic { display: inline-flex; color: var(--text-muted); }
.arc-vcp__when { color: var(--text-muted); font-size: 13.5px; }
.arc-vcp__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 16px; align-items: start; }
.arc-vcp__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.arc-vcp__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.arc-vcp.is-skel .arc-vcp__stage { padding: 0; overflow: hidden; }
.arc-vcp__skelstage { display: block; width: 100%; height: 200px; }
.arc-vcp__people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.arc-vcp__person { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; min-width: 0; }
.arc-vcp__av { display: block; border-radius: 50%; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.arc-vcp__av .arc-av { width: 60px; height: 60px; }
.arc-vcp__name { max-width: 100%; color: var(--text-muted); font-size: 13px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-vcp__person.is-speaking .arc-vcp__av { transform: scale(1.08); box-shadow: 0 0 22px 5px rgba(93, 211, 158, .45); }
.arc-vcp__person.is-speaking .arc-vcp__name { color: var(--green); font-weight: 650; }
.arc-vcp__nobody { margin: 0; color: var(--text-faint); font-size: 14px; }

.arc-vcp__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.arc-vcp__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; }
.arc-vcp__play:hover { background: var(--accent-hover); }
.arc-vcp__play:focus-visible, .arc-vcp__btn:focus-visible { border-radius: 50%; }
.arc-vcp__time { flex: none; min-width: 42px; color: var(--text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.arc-vcp__time--total { text-align: right; }
.arc-vcp__track { position: relative; flex: 1 1 160px; min-width: 120px; height: 30px; }
.arc-vcp__rail { position: absolute; left: 7px; right: 7px; top: 50%; height: 6px; margin-top: -3px; border-radius: var(--r-pill); background: var(--raised); pointer-events: none; }
.arc-vcp__gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .1) 0 3px, transparent 3px 6px); }
.arc-vcp__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--accent); }
.arc-vcp__tick { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; }
.arc-vcp__tick--join { background: var(--green); }
.arc-vcp__tick--leave { background: var(--text-faint); }
.arc-vcp__seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.arc-vcp__seek::-webkit-slider-runnable-track { height: 30px; background: transparent; }
.arc-vcp__seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: 8px; border: 0; border-radius: 50%; background: var(--text); }
.arc-vcp__seek::-moz-range-track { background: transparent; }
.arc-vcp__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); }
.arc-vcp__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; }
.arc-vcp__btn[aria-pressed="false"] { color: var(--text-faint); border-style: dashed; }
.arc-vcp__vol { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.arc-vcp__volic { display: inline-flex; }
.arc-vcp__volume { width: 84px; margin: 0; accent-color: var(--accent); cursor: pointer; }

.arc-vcp__script { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.arc-vcp__script-title { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.arc-vcp__lines { list-style: none; margin: 0; padding: 6px; max-height: 420px; overflow-y: auto; }
.arc-vcp__line { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.arc-vcp__line:hover { background: rgba(255, 255, 255, .04); }
.arc-vcp__line:focus-visible { outline-offset: -2px; box-shadow: var(--rim-inset); border-radius: var(--r-sm); }
.arc-vcp__line.is-current { background: var(--green-wash); }
.arc-vcp__lav .arc-av { width: 24px; height: 24px; }
.arc-vcp__lmain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arc-vcp__lhead { display: flex; align-items: baseline; gap: 8px; }
.arc-vcp__lwho { font-size: 13.5px; font-weight: 650; }
.arc-vcp__lt { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.arc-vcp__ltext { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.arc-vcp__none { margin: 0; padding: 14px; color: var(--text-faint); font-size: 14px; }

@media (max-width: 900px) {
  .arc-vcp__body { grid-template-columns: minmax(0, 1fr); }
  .arc-vcp__lines { max-height: 50vh; }
}
@media (max-width: 560px) {
  .arc-vc__item { flex-wrap: wrap; padding: 10px 12px; }
  .arc-vc__main { flex-basis: calc(100% - 48px); }
  .arc-vc__who { flex-basis: calc(100% - 48px); margin-left: 48px; }
  .arc-vc__item .arc-pill { margin-left: 48px; }
  .arc-vcp__stage { min-height: 160px; padding: 16px 10px; }
  .arc-vcp__person { width: 84px; }
  .arc-vcp__av .arc-av { width: 48px; height: 48px; }
  .arc-vcp__track { order: 5; flex-basis: 100%; }
  .arc-vcp__vol { order: 6; }
  .arc-vcp__time--total { margin-right: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .arc-vcp__av { transition: none; } .arc-vcp__person.is-speaking .arc-vcp__av { transform: none; } }

/* ---------------------------------------------------------------- Bot Management: the Archives card */

.bm-arc__bar { margin: 0 0 14px; }
.bm-arc__form { display: flex; flex-direction: column; gap: 14px; margin: 0 0 16px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.bm-arc__formtitle { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.bm-arc__form .bm-pickbtn, .bm-arc__panel .bm-pickbtn, .bm-arc__channels .bm-pickbtn { width: 100%; max-width: 560px; }
.bm-arc__check { align-items: flex-start; }
.bm-arc__check input { flex: none; margin-top: 2px; }
.bm-arc__btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-arc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bm-arc__season { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.bm-arc__season.is-ended { background: transparent; }
.bm-arc__head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bm-arc__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-arc__label { font-family: var(--font-display); font-size: 18px; font-weight: 560; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.bm-arc__meta { font-size: 12.5px; color: var(--text-muted); }
.bm-arc__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.bm-arc__lines .is-warn { color: var(--gold); }
.bm-arc__lines .is-faint { font-size: 12.5px; color: var(--text-muted); }
.bm-arc__channels { min-width: 0; }
.bm-arc__panel { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); }
.bm-arc__panel--danger { border-color: rgba(255, 122, 114, .45); background: var(--danger-wash); }
.bm-arc__say { margin: 0; max-width: 80ch; font-size: 13.5px; line-height: 1.5; color: var(--text); }
@media (max-width: 560px) {
  .bm-arc__season, .bm-arc__form { padding: 12px; }
  .bm-arc__form .sm-grid { grid-template-columns: minmax(0, 1fr); }
}