/* The house style: a near-black graphite ground, off-white ink, the server's own colour (sampled
   from its icon, --accent) only for what asks for you, lilac for data. The server's pictures (its
   banner, its icon, members' faces, stream thumbnails) are content and show wherever they belong.
   Flat surfaces, no glow, air instead of lines. Motion answers the person: menus open from their
   trigger, rows press, charts draw in once. */
:root {
  /* A graphite ramp: the sidebar deepest, then the page, then raised things. */
  --ground: #0f0f10;
  --page: #141415;
  --raised: #19191b;
  --solid: #232325;
  --ink: #ededed;
  --ink-2: #a1a1a6;
  --ink-3: #85858b;
  --well: rgba(237, 237, 237, 0.03);
  --veil: rgba(237, 237, 237, 0.04);
  --control: rgba(237, 237, 237, 0.06);
  --hover: rgba(237, 237, 237, 0.05);
  --selected: rgba(237, 237, 237, 0.08);
  --edge-1: rgba(237, 237, 237, 0.07);
  --edge-2: rgba(237, 237, 237, 0.12);
  --edge-3: rgba(237, 237, 237, 0.2);
  /* The server's colour. app.js samples the server icon and replaces it. */
  --accent: #9d7bff;
  --accent-hi: color-mix(in oklab, var(--accent), white 24%);
  --accent-lo: color-mix(in oklab, var(--accent), black 18%);
  --accent-wash: color-mix(in oklab, var(--accent) 15%, transparent);
  --accent-ink: #fff;
  /* What asks for you takes the server's colour too: one accent. */
  --signal: var(--accent);
  --signal-ink: #141415;
  --live: #4cc38a;
  --held: #e5484d;
  --waiting: #ffb547;
  --data: #c3a6ff;
  --data-2: #7c5cff;
  --data-dim: rgba(195, 166, 255, 0.38);
  --data-wash: rgba(195, 166, 255, 0.16);
  /* One hue per sidebar group: icon tiles, page headers, palette rows. */
  --h-core: var(--accent);
  --h-streams: #b388ff;
  --h-community: #ffb547;
  --h-members: #3ddcb0;
  --h-safety: #ff6b81;
  --h-pets: #62c3ff;
  --h-tools: #8fa3ff;
  --hue: var(--accent);
  --focus: color-mix(in oklab, var(--accent-hi) 80%, transparent);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r-key: 10px;
  --r-icon: 8px;
  --r-card: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --shadow-pop: 0 24px 60px -16px rgba(0, 0, 0, 0.75), 0 4px 14px -4px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  /* Page gutter: grows with the window so wide screens don't hug the sidebar. */
  --gutter: clamp(24px, 2.2vw, 44px);
  /* The zoom below; heights in vh divide by it, since zoom scales vh too. */
  --z: 1;
  color-scheme: dark;
  accent-color: var(--accent);
}
/* Big screens: the whole dashboard steps up in size, so a 1440p or 4K screen doesn't show it
   tiny in a sea of black. Each step still leaves more room than the step below it. */
@media (min-width: 2200px) { :root { --z: 1.125; zoom: 1.125; } }
@media (min-width: 2800px) { :root { --z: 1.25; zoom: 1.25; } }
@media (min-width: 3300px) { :root { --z: 1.5; zoom: 1.5; } }

[data-hue="core"] { --hue: var(--h-core); }
[data-hue="streams"] { --hue: var(--h-streams); }
[data-hue="community"] { --hue: var(--h-community); }
[data-hue="members"] { --hue: var(--h-members); }
[data-hue="safety"] { --hue: var(--h-safety); }
[data-hue="pets"] { --hue: var(--h-pets); }
[data-hue="tools"] { --hue: var(--h-tools); }

@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-color: rgba(243, 242, 248, 0.16) transparent; scrollbar-width: thin; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: #fff; }
input, textarea { caret-color: var(--accent-hi); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(243, 242, 248, 0.12); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(243, 242, 248, 0.22); }
::-webkit-scrollbar-track { background: transparent; }
a { color: inherit; text-decoration: none; }
a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge-3); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: 22px; letter-spacing: -0.025em; }
h2 { font-size: 14.5px; letter-spacing: -0.01em; }
.mono, code { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.grow { flex: 1; min-width: 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon { flex: none; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================================================================ shell */
.shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: calc(100vh / var(--z)); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 60; padding: 8px 14px; border-radius: var(--r-key); background: var(--ink); color: var(--ground); font-weight: 500; }
.skip:focus { top: 12px; }
main.page:focus { outline: none; }

/* The sidebar: the server's card (the switcher), search, the pages, then you, the bell and the
   server's settings. Icons take the text colour; counts that wait on you take the accent. */
.side { position: sticky; top: 0; height: calc(100vh / var(--z)); display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--ground); view-transition-name: side; z-index: 20; }
.srv-pick { flex: none; }
.side-head { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 88px; padding: 10px; border-radius: 12px; overflow: hidden; isolation: isolate; background: var(--raised); cursor: pointer; }
.side-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 15, 16, 0.15) 25%, rgba(15, 15, 16, 0.88) 100%); }
.side-head .art, .side-head > img.cover { position: absolute; inset: 0; z-index: -2; }
.side-head > img.cover { width: 100%; height: 100%; object-fit: cover; object-position: var(--bx, 50%) var(--by, 50%); transform: scale(var(--bz, 1)); transform-origin: var(--bx, 50%) var(--by, 50%); }
.side-head-name { display: flex; align-items: center; gap: 10px; }
.side-head-name strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.side-head-name .gicon { width: 28px; height: 28px; border-radius: 8px; }
.side-head-name > .icon { color: rgba(237, 237, 237, 0.72); }
.side-head-meta { font-size: 12px; color: rgba(237, 237, 237, 0.72); display: flex; align-items: center; gap: 6px; }
.side-head-meta .dot { width: 6px; height: 6px; }
.side-head-meta .dot.live::after { display: none; }
.srv-menu.pop-body { left: 0; right: 0; width: auto; top: calc(100% + 6px); padding: 6px; gap: 2px; transform-origin: top center; }
.srv-menu .menu-item .icon { margin-left: auto; color: var(--ink); }
.side-search { display: flex; align-items: center; gap: 10px; height: 32px; margin: 8px 0 4px; padding: 0 6px 0 8px; border: 0; border-radius: 8px; background: var(--raised); color: var(--ink-3); font: inherit; font-size: 13px; cursor: pointer; flex: none; transition: color 0.12s; }
.side-search:hover { color: var(--ink-2); }
.side-search span.grow { text-align: left; }
kbd { font: 500 11px/1 var(--mono); color: var(--ink-2); background: var(--solid); border-radius: 4px; padding: 3px 5px; }
.side-links { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 2px 4px 12px; scrollbar-width: none; mask-image: linear-gradient(180deg, transparent 0, #000 8px, #000 calc(100% - 20px), transparent); }
.side-links::-webkit-scrollbar { display: none; }
.nav-fold > summary { list-style: none; display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 8px 6px; font-size: 12px; color: var(--ink-3); cursor: pointer; user-select: none; border-radius: 6px; }
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold > summary:hover { color: var(--ink-2); }
.nav-fold > summary .icon { width: 12px; height: 12px; opacity: 0; transition: transform 0.2s var(--ease), opacity 0.12s; }
.nav-fold > summary:hover .icon, .nav-fold:not([open]) > summary .icon { opacity: 1; }
.nav-fold:not([open]) > summary .icon { transform: rotate(-90deg); }
.nav-fold.opening > .nav { animation: rise 0.24s var(--ease) both; }
.nav-fold.opening > .nav:nth-of-type(2) { animation-delay: 30ms; }
.nav-fold.opening > .nav:nth-of-type(3) { animation-delay: 60ms; }
.nav-fold.opening > .nav:nth-of-type(4) { animation-delay: 90ms; }
.nav-count, .bell .count { transition: opacity 0.25s, transform 0.25s var(--ease); }
.nav-count.leaving, .bell .count.leaving { opacity: 0; transform: scale(0.6); }
.nav-count { font: 500 12px/18px var(--mono); color: var(--signal); }
.nav-fold[open] > summary .nav-count.folded { display: none; }
.nav { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 8px; height: 32px; flex: none; border-radius: 8px; color: var(--ink-2); font-size: 14px; transition: background-color 0.12s, color 0.12s; }
.nav-ic { display: grid; place-items: center; width: 16px; height: 16px; flex: none; color: inherit; }
.nav-ic .icon { width: 16px; height: 16px; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.on { color: var(--ink); background: var(--solid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* app.js still moves a pill between links; the lit row is enough now. */
.nav-pill { display: none; }
.side-foot { position: relative; flex: none; display: flex; align-items: center; gap: 2px; padding-top: 8px; }
.side-foot .pop { position: static; }
.side-foot .account { flex: 1; min-width: 0; }
.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px; border-radius: 8px; transition: background-color 0.12s; }
.account > summary::-webkit-details-marker { display: none; }
.account > summary:hover, .account[open] > summary { background: var(--hover); }
.account > summary img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.account > summary strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; }
.account > summary .small { display: block; line-height: 1.25; }
.side-foot .pop-body { left: 0; right: auto; top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; }
.account-menu.pop-body { width: 230px; padding: 6px; gap: 2px; }
.account-menu .menu-item { width: 100%; color: var(--ink-2); font: inherit; font-size: 13px; background: none; border: 0; cursor: pointer; text-align: left; }
.account-menu .menu-item:hover, .account-menu .menu-item.on { color: var(--ink); }
/* The bell and the settings gear: one size, one weight. */
.side-foot .icon-btn { width: 32px; height: 32px; color: var(--ink-3); }
.side-foot .icon-btn .icon { width: 18px; height: 18px; }
/* The gear's glyph fills more of its grid than the bell's, so it draws smaller to match. */
.side-foot .gear .icon { width: 16px; height: 16px; }
.side-foot .icon-btn:hover, .side-foot .icon-btn.on, .bell-pop[open] > summary { color: var(--ink); background: var(--hover); }
.bell-pop > summary { list-style: none; cursor: pointer; }
.bell-pop > summary::-webkit-details-marker { display: none; }
.bell .count { position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--signal); color: var(--signal-ink); font: 600 10px/16px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--ground); }

/* Phone top bar and drawer. */
.topbar { display: none; }

/* ================================================================ palette */
.palette { position: fixed; inset: 0; z-index: 80; display: none; padding: 12vh 16px 16px; background: rgba(4, 4, 8, 0.6); backdrop-filter: blur(6px); }
.palette.open { display: block; animation: fade-in 0.18s ease both; }
.pal-box { width: min(640px, 100%); margin: 0 auto; border-radius: 18px; background: color-mix(in oklab, var(--solid) 92%, transparent); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2), 0 0 0 1px rgba(0, 0, 0, 0.4); overflow: hidden; animation: pal-in 0.32s var(--ease) both; }
.pal-field { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 58px; border-bottom: 1px solid var(--edge-1); color: var(--ink-3); }
.pal-field .icon { width: 18px; height: 18px; }
.pal-field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 400 16px var(--sans); }
.pal-field input::placeholder { color: var(--ink-3); }
.pal-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.pal-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; color: var(--ink-2); cursor: pointer; animation: rise 0.28s var(--ease) both; }
.pal-item .nav-ic { width: 32px; height: 32px; border-radius: 10px; }
.pal-item .nav-ic .icon { width: 17px; height: 17px; }
.pal-item img.gicon { width: 32px; height: 32px; border-radius: 10px; }
.pal-item strong { display: block; color: var(--ink); font-weight: 500; font-size: 13.5px; }
.pal-item small { display: block; color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item mark { background: none; color: var(--accent-hi); font-weight: 600; }
.pal-item .go { opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.2s var(--ease); color: var(--ink-3); }
.pal-item.on { background: var(--selected); color: var(--ink); }
.pal-item.on .go { opacity: 1; transform: none; }
.pal-none { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }
.pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--edge-1); color: var(--ink-3); font-size: 11.5px; }
.pal-foot span { display: inline-flex; align-items: center; gap: 6px; }

/* ================================================================ page */
.page { position: relative; background: var(--page); min-height: calc(100vh / var(--z)); min-width: 0; isolation: isolate; view-transition-name: page; }
.page-head { display: flex; align-items: center; gap: 16px; padding: 28px var(--gutter) 0; }
.peek-pop.pop-body { width: 360px; right: auto; padding: 6px; gap: 0; }
.peek-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 10px; border-bottom: 1px solid var(--edge-1); margin-bottom: 4px; }
.peek-head strong { font-size: 14px; font-weight: 600; }
.peek-head a { font-size: 12.5px; color: var(--ink-2); }
.peek-head a:hover { color: var(--ink); }
.peek-list { display: flex; flex-direction: column; gap: 2px; max-height: min(calc(64vh / var(--z)), 460px); overflow-y: auto; }
.peek .note { margin: 0; padding: 8px 10px; }
.peek-none { padding: 18px 10px; color: var(--ink-3); font-size: 13px; text-align: center; }
.head-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--ink-2); background: var(--raised); }
.head-icon .icon { width: 22px; height: 22px; }
.head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; animation: rise 0.5s var(--ease) both 0.05s; }
.head-text h1 { font-size: 24px; letter-spacing: -0.03em; }
.head-text p { color: var(--ink-3); font-size: 13px; }
.head-actions { display: flex; align-items: center; gap: 8px; animation: rise 0.5s var(--ease) both 0.1s; }
/* The body fills the window. Columns inside it are query containers named `col`, so a block can
   lay itself out for the width it really has (`@container col (min-width: ...)`). */
.page-body { padding: 26px var(--gutter) 56px; display: flex; flex-direction: column; gap: 30px; }
.page-body, .with-rail > :not(.rail) { container: col / inline-size; }
/* Blocks arrive in order, a short step apart. */
.page-body > * { animation: rise 0.55s var(--ease) both; }
.page-body > :nth-child(2) { animation-delay: 60ms; }
.page-body > :nth-child(3) { animation-delay: 120ms; }
.page-body > :nth-child(4) { animation-delay: 170ms; }
.page-body > :nth-child(n + 5) { animation-delay: 210ms; }

/* ================================================================ keys */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 15px; border-radius: var(--r-key); border: 0; background: var(--control); color: var(--ink); font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px var(--edge-1); transition: background 0.2s, box-shadow 0.25s, transform 0.25s var(--ease), color 0.2s; user-select: none; }
.btn .icon { width: 15px; height: 15px; }
.btn:hover { background: var(--hover); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--edge-2), var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; }
.btn.primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: none; }
.btn.primary:hover { background: var(--accent-hi); box-shadow: none; }
.btn.danger { color: var(--held); }
.btn.danger:hover { background: color-mix(in oklab, var(--held) 14%, transparent); }
.btn.armed, .btn.danger.armed { background: var(--held); color: #1a0507; font-weight: 600; animation: shake 0.4s var(--ease); box-shadow: none; }
.btn.small { height: 29px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--edge-3); }
.btn.outline:hover { background: var(--accent-wash); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), var(--shadow-lift); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.btn:disabled, fieldset:disabled .btn { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.btn.busy { color: transparent !important; pointer-events: none; }
.btn.busy::before { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.18s, color 0.18s, transform 0.2s var(--ease); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(0.92); }
form.inline { display: inline; margin: 0; }

/* ================================================================ blocks and cards */
.block { display: flex; flex-direction: column; gap: 14px; }
.block-head { display: flex; flex-direction: column; gap: 3px; }
.block-head p { font-size: 13px; max-width: 70ch; }
.card { position: relative; background: var(--raised); border: 1px solid var(--edge-1); border-radius: var(--r-card); padding: 4px 20px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, min(42%, 460px)); gap: 8px 28px; align-items: center; padding: 14px 0; }
.row + .row { border-top: 1px solid var(--edge-1); }
.row.wide { grid-template-columns: 1fr; }
.row-text label { font-weight: 500; font-size: 13.5px; }
.help { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; max-width: 62ch; }
.row-control { min-width: 0; }
.settings { display: flex; flex-direction: column; gap: 18px; }
.settings fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.save-bar { display: flex; justify-content: flex-end; }
.save-bar .btn { height: 38px; padding: 0 22px; }

/* ================================================================ inputs */
.input { width: 100%; height: 36px; padding: 0 12px; border-radius: var(--r-key); border: 1px solid var(--edge-1); background: var(--well); color: var(--ink); font: 13.5px var(--sans); transition: border-color 0.18s, background 0.18s, box-shadow 0.25s var(--ease); }
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--edge-2); }
.input:focus { outline: none; border-color: color-mix(in oklab, var(--accent) 70%, transparent); background: var(--veil); box-shadow: 0 0 0 4px var(--accent-wash); }
textarea.input { height: auto; min-height: 92px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.input.num { font-family: var(--mono); font-size: 12.5px; }
.input:disabled { opacity: 0.6; }
.with-unit { display: flex; align-items: center; gap: 8px; }
.with-unit .input { max-width: 120px; }
.unit { color: var(--ink-3); font-size: 12px; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 32px; cursor: pointer; }
.select-wrap .icon { position: absolute; right: 10px; top: 10px; color: var(--ink-3); pointer-events: none; }
select option { background: var(--solid); }

.switch { display: inline-flex; cursor: pointer; justify-self: end; }
.row-control:has(> .switch), .row-control:has(> .seg) { display: flex; justify-content: flex-end; }
.narrow { max-width: 780px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 40px; height: 24px; border-radius: 12px; background: var(--edge-2); position: relative; transition: background 0.3s var(--ease), box-shadow 0.3s; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
.switch .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #d9d8e0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); transition: transform 0.4s var(--spring), width 0.2s var(--ease); }
.switch:active .thumb { width: 22px; }
.switch input:checked + .track { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; }
.switch input:checked + .track .thumb { transform: translateX(16px); background: #fff; }
.switch:active input:checked + .track .thumb { transform: translateX(12px); }
.switch input:focus-visible + .track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .track { opacity: 0.5; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 29px; padding: 0 12px; border-radius: 15px; background: var(--control); color: var(--ink-2); font-size: 12.5px; cursor: pointer; user-select: none; transition: background 0.18s, color 0.18s, transform 0.25s var(--spring), box-shadow 0.2s; }
.chip:hover { background: var(--hover); color: var(--ink); }
.chip:active { transform: scale(0.95); }
.chip input, .seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:focus-visible), .seg > :has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip:has(input:checked) { background: var(--accent-wash); color: #fff; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ================================================================ data */
.readings { display: flex; flex-wrap: wrap; gap: 14px; }
/* Readings share their row rather than sitting as small tiles in the corner. */
.readings > .reading { flex: 1 1 160px; }
/* Figures stand on the page, no tile around them. */
.reading { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.reading b { font: 600 26px/1.15 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.reading span { color: var(--ink-3); font-size: 12px; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 600; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px; white-space: nowrap; }
.table td { padding: 11px 12px; border-top: 1px solid var(--edge-1); vertical-align: middle; transition: background 0.15s; }
.table th:first-child, .table td:first-child { padding-left: 10px; }
.table th:last-child, .table td:last-child { padding-right: 10px; }
.table td.num, .table th.num { text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.table th.num { font-family: var(--sans); font-size: 11px; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions > * + * { margin-left: 6px; }
.table tr:hover td { background: var(--well); }
.table tr:hover td:first-child { border-radius: 10px 0 0 10px; }
.table tr:hover td:last-child { border-radius: 0 10px 10px 0; }
.person { display: inline-flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 9px; border-radius: 11px; font-size: 11px; font-weight: 600; background: var(--control); color: var(--ink-2); white-space: nowrap; }
.badge.ok { color: var(--live); background: color-mix(in oklab, var(--live) 14%, transparent); }
.badge.warn { color: var(--waiting); background: color-mix(in oklab, var(--waiting) 14%, transparent); }
.badge.bad { color: var(--held); background: color-mix(in oklab, var(--held) 14%, transparent); }
.badge.accent { color: var(--signal); background: color-mix(in oklab, var(--signal) 15%, transparent); }

.empty { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.empty-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--solid); color: var(--ink-2); flex: none; }
.empty-icon .icon { width: 20px; height: 20px; }
.empty strong { font-weight: 600; font-size: 13.5px; }
.empty p { font-size: 12.5px; max-width: 60ch; margin-top: 2px; }

/* Sub-pages: tabs on a hairline; the underline glides to the next tab between pages. */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--edge-1); flex-wrap: wrap; }
.tab { position: relative; padding: 0 10px 12px; margin-bottom: -1px; font-size: 13.5px; color: var(--ink-3); transition: color 0.18s; }
.tab-line { position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--hue); }
.page-body > .tabs .tab-line, .page-body > nav.tabs .tab-line { view-transition-name: tab-line; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); font-weight: 500; }
.tab-count { margin-left: 7px; display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font: 600 11px var(--mono); color: var(--ink-2); background: var(--control); }
.tab.on .tab-count { color: var(--ink); background: color-mix(in oklab, var(--hue) 22%, transparent); }
/* A small segmented choice; the lit part slides. */
.seg { position: relative; flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--well); box-shadow: inset 0 0 0 1px var(--edge-1); }
.seg > * { position: relative; z-index: 1; white-space: nowrap; padding: 4px 11px; border-radius: 7px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; transition: color 0.2s; }
.seg > *:hover { color: var(--ink); }
.seg > .on, .seg > :has(input:checked) { background: var(--selected); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px -2px rgba(0, 0, 0, 0.5); }
.seg-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; border-radius: 7px; background: var(--selected); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 8px -2px rgba(0, 0, 0, 0.5); transition: left 0.35s var(--ease), width 0.35s var(--ease); }
.seg.glide > .on, .seg.glide > :has(input:checked) { background: none; box-shadow: none; }

/* ---- charts ---- */
.chart { position: relative; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.chart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.chart .axis, .area .axis { display: flex; justify-content: space-between; color: var(--ink-3); font: 11px var(--mono); }
.chart rect.bar, .mini-bars rect.bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 0.8s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms + 120ms); transition: filter 0.15s, opacity 0.15s; cursor: crosshair; }
.chart svg:hover rect.bar, .mini-bars svg:hover rect.bar { opacity: 0.55; }
.chart svg rect.bar:hover, .mini-bars svg rect.bar:hover { opacity: 1; filter: brightness(1.2); }
.mini-bars svg { display: block; width: 100%; height: 56px; overflow: visible; }
.area { position: relative; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.area-plot { position: relative; }
.area svg { width: 100%; height: 190px; display: block; overflow: visible; }
.area .line { animation: line-in 1.7s var(--ease) both 0.1s; }
.area .fill { animation: area-in 1.4s var(--ease) both 0.35s; }
.area .grid { stroke: var(--edge-1); stroke-dasharray: 2 4; }
.area-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--edge-3) 20%, var(--edge-3)); pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.area-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in oklab, var(--data) 45%, transparent); pointer-events: none; opacity: 0; transition: opacity 0.15s, left 0.12s var(--ease), top 0.12s var(--ease); }
.area-end { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--data); box-shadow: 0 0 0 0 var(--data); pointer-events: none; animation: pop-in 0.5s var(--spring) both 1.5s; }
.area-plot.hovering .area-cursor, .area-plot.hovering .area-dot { opacity: 1; }
.area-plot.hovering .area-end { opacity: 0; }
.tip { position: fixed; z-index: 90; pointer-events: none; padding: 7px 10px; border-radius: 10px; background: rgba(22, 22, 31, 0.96); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); font-size: 12px; color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 10px)) scale(0.96); transition: opacity 0.12s, transform 0.18s var(--ease); }
.tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 12px)) scale(1); }
.tip b { display: block; color: var(--ink); font: 600 14px var(--sans); font-variant-numeric: tabular-nums; }

.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.list-item + .list-item { border-top: 1px solid var(--edge-1); }
.list-item .meta { color: var(--ink-3); font-size: 12px; white-space: nowrap; }

.embed-preview { border-left: 4px solid var(--embed, var(--edge-3)); background: #2b2d31; border-radius: 4px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; color: #dbdee1; font-size: 13.5px; max-width: 520px; white-space: pre-wrap; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.8); }
.embed-preview strong { color: #f2f3f5; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form .input { width: auto; flex: 1; min-width: 160px; max-width: 360px; }

/* Faces. */
.avatar { border-radius: 50%; flex: none; background: var(--control); object-fit: cover; }
.avatars { display: inline-flex; flex: none; }
.avatars .avatar { box-shadow: 0 0 0 2px var(--page); transition: transform 0.3s var(--spring), margin 0.3s var(--ease); }
.avatars .avatar + .avatar { margin-left: -9px; }
.avatars:hover .avatar + .avatar { margin-left: -3px; }
.avatars .avatar:hover { transform: translateY(-3px) scale(1.08); position: relative; z-index: 1; }
.gicon { width: 22px; height: 22px; border-radius: 7px; flex: none; object-fit: cover; }
.gicon.letter { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); color: #fff; font-size: 11px; font-weight: 700; }

/* ---- status ---- */
.status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 14px; background: rgba(7, 7, 11, 0.55); box-shadow: inset 0 0 0 1px var(--edge-1); font-size: 12px; font-weight: 500; color: var(--ink-2); backdrop-filter: blur(10px); }
.dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.live { background: var(--live); box-shadow: none; }
.dot.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: ping 2s ease-out infinite; }
.dot.waiting { background: var(--waiting); box-shadow: none; }

/* ================================================================ generated server art
   A server with no banner still gets a picture: its icon, enormous and blurred, under slow
   drifting light in the server's colours. The drift plays for a couple of minutes and then
   rests, so an open tab stops compositing. */
.art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 30% 10%, color-mix(in oklab, var(--accent) 35%, #0c0c12), #0c0c12 70%); }
.art-icon { position: absolute; inset: -30%; background: center / cover no-repeat; filter: blur(44px) saturate(2.2) brightness(1.1); opacity: 0.85; transform: scale(1.2); }
.art-blob { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; mix-blend-mode: screen; filter: blur(40px); opacity: 0.7; }
.art-blob.a { left: -10%; top: -40%; background: radial-gradient(closest-side, var(--accent), transparent); animation: drift-a 22s ease-in-out 4 alternate; }
.art-blob.b { right: -15%; top: -20%; background: radial-gradient(closest-side, var(--data-2), transparent); animation: drift-b 28s ease-in-out 4 alternate; }
.art-blob.c { left: 30%; bottom: -60%; background: radial-gradient(closest-side, var(--signal), transparent); opacity: 0.35; animation: drift-c 25s ease-in-out 4 alternate; }
.art.still .art-blob { animation: none; }

/* ================================================================ overview
   The server's banner fades into the page behind its square icon and name. Then the answer: four
   readings over one chart, the range set against the one before it. Under it, the feed beside
   what needs you; on the right, what is live, the week's XP and what is running. No boxes:
   air separates, lines are data. Opened every day, so nothing enters or counts up; only the
   chart draws in once. */
.ov-head { position: relative; display: flex; flex-direction: column; padding: 0 var(--gutter); isolation: isolate; }
/* The banner never takes a click: it lies behind the name and, past the header, behind the
   tabs and the side panel. Its frame (--bx, --by, --bz) is the point of the picture that stays
   put and the zoom around it, set by the editor below. */
.ov-bg { position: absolute; inset: 0 0 auto 0; height: 300px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent); mask-image: linear-gradient(180deg, #000 35%, transparent); }
.ov-bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bx, 50%) var(--by, 40%); transform: scale(var(--bz, 1)); transform-origin: var(--bx, 50%) var(--by, 40%); opacity: 0.7; display: block; user-select: none; -webkit-user-drag: none; }
.ov-bg .art { opacity: 0.7; }
/* "Edit banner" shows while the pointer is on the header (always on touch screens). */
.ov-tools, .ov-edit { position: absolute; top: 16px; right: var(--gutter); z-index: 2; display: flex; align-items: center; gap: 8px; }
.ov-tools { pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.ov-head:hover .ov-tools, .ov-tools:focus-within { opacity: 1; pointer-events: auto; }
@media (hover: none) { .ov-tools { opacity: 1; pointer-events: auto; } }
.ov-hint { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(20, 20, 21, 0.6); backdrop-filter: blur(16px); color: var(--ink); font: 500 12px var(--sans); border: 0; }
.ov-hint .icon { width: 14px; height: 14px; }
.ov-hint.btnlike { cursor: pointer; }
.ov-hint.btnlike:hover { background: rgba(20, 20, 21, 0.85); }
/* Editing: the picture is the handle, the name lets the drag through, one toolbar. */
.ov-edit { flex-wrap: wrap; justify-content: flex-end; left: var(--gutter); padding: 0; }
.ov-edit[hidden] { display: none; }
.ov-edit .btn.small { height: 28px; border-radius: 8px; }
.ov-edit-tip { margin-right: auto; padding: 0 10px; height: 28px; display: inline-flex; align-items: center; border-radius: 8px; background: rgba(20, 20, 21, 0.6); backdrop-filter: blur(16px); color: var(--ink-2); font-size: 12px; }
.ov-zoom { display: inline-flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px 0 10px; border-radius: 8px; background: rgba(20, 20, 21, 0.6); backdrop-filter: blur(16px); color: var(--ink-2); font: 500 12px var(--sans); }
.ov-zoom input { width: 120px; }
.ov-head.editing .ov-tools { display: none; }
.ov-head.editing .ov-bg { pointer-events: auto; cursor: grab; touch-action: none; }
.ov-head.editing .ov-bg.dragging { cursor: grabbing; }
.ov-head.editing .ov-bg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ov-head.editing .ov-hello { pointer-events: none; }
.ov-head.editing.no-pic .ov-edit-tip, .ov-head.editing.no-pic .ov-zoom { display: none; }
.ov-head.busy .ov-edit { pointer-events: none; opacity: 0.6; }
/* A slim slider: a 2px track, the accent up to the thumb. */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 16px; background: transparent; cursor: pointer; accent-color: var(--accent); }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: rgba(237, 237, 237, 0.2); }
input[type="range"]::-moz-range-track { height: 2px; border-radius: 1px; background: rgba(237, 237, 237, 0.2); }
input[type="range"]::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); border: 0; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ov-hello { display: flex; align-items: center; gap: 20px; padding-top: 148px; }
.ov-icon { width: 80px; height: 80px; border-radius: 24px; flex: none; object-fit: cover; box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--accent); }
.ov-icon.letter { display: grid; place-items: center; background: var(--solid); font-size: 32px; font-weight: 600; color: var(--ink); }
.ov-hello h1 { font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.ov-hello p { margin-top: 6px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ov-hello p span { display: inline-flex; align-items: center; gap: 6px; }
.ov-body { padding-top: 32px; }
.ov-body > * { animation: none; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 48px 56px; align-items: start; }
.ov-left { min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.ov-right { min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.ov-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ov-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-block > h2 { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.ov-block > h2 .more, .ov-block > h2 .status { margin-left: auto; }
.ov-block > h2 .more { font-weight: 400; font-size: 13px; color: var(--ink-3); }
.ov-block > h2 .more:hover { color: var(--ink-2); }
.ov-count { font: 500 13px var(--mono); color: var(--accent); }
/* The answer */
.ov-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.ov-metric { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; color: var(--ink-3); transition: background-color 0.12s, color 0.12s; }
.ov-metric .mono { color: var(--ink-3); }
.ov-metric:hover { color: var(--ink); }
.ov-metric.on { background: var(--solid); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
/* The chosen reading's number is the figure under it. */
.ov-metric.on .mono { display: none; }
.ov-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ov-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ov-fig b { font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ov-unit { color: var(--ink-2); font-size: 15px; }
.ov-change { color: var(--ink-3); font-size: 13px; }
.ov-change .up { color: var(--live); }
.ov-change .down { color: var(--held); }
#ov-plot { margin-top: 20px; }
.ov-answer .area svg { height: 260px; }
.area .prev { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.8; }
.area .base { stroke: var(--edge-2); }
.ov-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--ink-3); font-size: 12px; }
.ov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ov-legend i { width: 12px; height: 2px; border-radius: 1px; background: var(--data); }
.ov-legend i.prev { height: 0; background: none; border-top: 2px dashed var(--ink-3); }
/* Rows: the whole row is the tap; its button is drawn. Faces and icons share one size. */
.ov-rows { display: flex; flex-direction: column; gap: 2px; }
.need, .ov-run { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 10px; color: var(--ink); transition: background-color 0.12s, transform 0.12s var(--ease); }
.need:hover, .ov-run:hover { background: var(--hover); }
.need:active, .ov-run:active { transform: scale(0.99); }
.need > .avatar, .need-icon, .need-two { width: 28px; height: 28px; flex: none; }
.need-icon { display: grid; place-items: center; border-radius: 8px; background: var(--solid); color: var(--ink-2); }
.need-icon .icon { width: 15px; height: 15px; }
.need-icon.alert { color: var(--held); background: color-mix(in oklab, var(--held) 14%, transparent); }
.need-two { position: relative; }
.need-two .avatar { position: absolute; width: 20px; height: 20px; }
.need-two .avatar:first-child { top: 0; left: 0; }
.need-two .avatar + .avatar { bottom: 0; right: 0; box-shadow: 0 0 0 2px var(--page); }
.need .grow, .ov-run .grow { display: flex; flex-direction: column; min-width: 0; }
.need strong, .ov-run strong { font-size: 14px; font-weight: 500; }
.need .grow > span, .ov-run .grow > span { color: var(--ink-3); font-size: 13px; }
.need-btn { flex: none; min-width: 76px; height: 28px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--edge-2); color: var(--ink-2); font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.12s, color 0.12s; }
.need:hover .need-btn { border-color: var(--ink-3); color: var(--ink); }
.need-btn.primary, .need:hover .need-btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.ov-more > summary { list-style: none; cursor: pointer; padding: 8px 0 4px; color: var(--ink-3); font-size: 13px; }
.ov-more > summary::-webkit-details-marker { display: none; }
.ov-more > summary:hover { color: var(--ink-2); }
.ov-more[open] > summary { display: none; }
.ov-feed { display: flex; flex-direction: column; gap: 14px; }
.happen { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; color: var(--ink-2); }
.happen .avatar { width: 28px; height: 28px; }
.happen .grow { padding-top: 4px; line-height: 1.35; }
.happen strong { color: var(--ink); font-weight: 500; }
.happen .mono { padding-top: 5px; }
/* The right column */
.ov-live { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 10px; transition: background-color 0.12s; }
.ov-live:hover { background: var(--hover); }
.ov-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--raised); }
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-thumb .stream-ph { padding: 0; }
.ov-thumb .live-tag { top: 6px; left: 6px; height: 16px; padding: 0 5px; border-radius: 4px; font-size: 10px; }
.ov-thumb .live-tag::before { display: none; }
.ov-live .grow { display: flex; flex-direction: column; min-width: 0; }
.ov-live strong { font-weight: 500; }
.ov-live .grow > span { color: var(--ink-3); font-size: 13px; }
.ov-right .next-stream { flex-direction: row; justify-content: space-between; gap: 12px; color: var(--ink-3); }
.ov-right .next-stream strong { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.ov-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ov-rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.ov-rank .avatar { width: 28px; height: 28px; grid-row: span 2; }
.ov-rank .clip { font-weight: 500; }
.ov-rank .mono { color: var(--ink-2); text-align: right; }
.ov-track { grid-column: 2 / 4; height: 4px; border-radius: 2px; background: var(--solid); overflow: hidden; }
.ov-track i { display: block; height: 100%; border-radius: 2px; background: color-mix(in oklab, var(--data) 32%, transparent); }
.ov-track i.lead { background: var(--data); }
@media (max-width: 1180px) {
  /* One column: the chart, what is live, the feed and what needs you, then the rest. */
  .ov-grid { display: flex; flex-direction: column; align-items: stretch; gap: 48px; }
  .ov-left, .ov-right { display: contents; }
  .ov-answer { order: 1; }
  .ov-right > * { order: 4; }
  .ov-right > :first-child { order: 2; }
  .ov-sub { order: 3; }
}
@media (max-width: 920px) {
  .ov-head { padding: 0 18px; }
  .ov-bg { height: 210px; }
  .ov-hello { padding-top: 104px; gap: 16px; }
  .ov-hello h1 { font-size: 24px; }
  .ov-tools, .ov-edit { right: 18px; }
  .ov-edit { left: 18px; }
  .ov-edit-tip { display: none; }
  .ov-zoom input { width: 88px; }
  .ov-fig b { font-size: 34px; }
  .ov-answer .area svg { height: 200px; }
  .ov-metrics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 16px; padding: 0 18px; }
  .ov-metric { flex: none; height: 36px; }
  .ov-sub { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ov-sub > :last-child { order: -1; }
  .need, .ov-run { min-height: 52px; }
  .need-btn { height: 32px; }
}
.rail-block { display: flex; flex-direction: column; gap: 12px; }
.rail-block + .rail-block { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--edge-1); }
.rail-block h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* A compact line in a rail block: avatar or icon, a name with an optional detail, a figure. */
.mini { display: flex; align-items: center; gap: 11px; font-size: 13px; min-width: 0; padding: 3px 0; }
.mini > .icon { color: var(--hue); width: 18px; height: 18px; }
.mini > .avatar { width: 30px !important; height: 30px !important; transition: transform 0.3s var(--spring); }
.mini:hover > .avatar { transform: scale(1.1); }
.mini .grow { display: flex; flex-direction: column; min-width: 0; }
.mini .grow > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .grow .muted { font-size: 12px; }
.mini > .mono { color: var(--ink-2); }
.stream-card { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--control); box-shadow: inset 0 0 0 1px var(--edge-1), 0 18px 40px -20px rgba(0, 0, 0, 0.9); }
.stream-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease), filter 0.4s; }
.stream-card:hover img { transform: scale(1.06); filter: saturate(1.15); }
.stream-ph { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 28px; color: var(--ink-3); background: var(--well); }
.stream-ph .icon { width: 30px; height: 30px; color: var(--h-streams); }
.stream-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; display: flex; flex-direction: column; gap: 1px; background: linear-gradient(180deg, transparent, rgba(7, 7, 11, 0.9)); font-size: 12.5px; }
.stream-cap span { color: var(--ink-2); font-size: 11px; }
.stream-cap strong { font-weight: 600; }
.live-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 6px; background: #eb0400; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; box-shadow: none; }
.live-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.4s ease-in-out infinite; }
.next-stream { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.next-stream strong { color: var(--ink); font-size: 18px; font-weight: 650; letter-spacing: -0.02em; }
.rail-block .status { background: var(--control); backdrop-filter: none; height: 23px; padding: 0 9px; font-size: 11px; font-weight: 500; }

/* ================================================================ levels */
.lb { gap: 22px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 210px)); justify-content: center; align-items: end; gap: 16px; padding-top: 12px; position: relative; }
.step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; animation: rise 0.7s var(--ease) both; }
.step.p1 { animation-delay: 0.25s; }
.step.p2 { animation-delay: 0.1s; }
.step.p3 { animation-delay: 0.4s; }
.step .avatar { width: 58px; height: 58px; margin-bottom: 8px; box-shadow: 0 0 0 3px var(--page), 0 0 0 5px #c9d2e3; }
.step.p1 .avatar { width: 76px; height: 76px; box-shadow: 0 0 0 3px var(--page), 0 0 0 5px #ffd36a; }
.step.p3 .avatar { width: 54px; height: 54px; box-shadow: 0 0 0 3px var(--page), 0 0 0 5px #e09a6c; }
.step strong { font-size: 14.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .block { align-self: stretch; margin-top: 12px; display: grid; place-items: center; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--data) 30%, transparent), color-mix(in oklab, var(--data) 4%, transparent)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--data) 60%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--data) 20%, transparent); color: var(--ink); font-size: 26px; font-weight: 700; transform-origin: bottom; animation: grow 0.9s var(--ease) both 0.3s; }
.step.p1 .block { height: 104px; font-size: 34px; background: linear-gradient(180deg, color-mix(in oklab, var(--data) 45%, transparent), color-mix(in oklab, var(--data-2) 8%, transparent)); }
.step.p2 .block { height: 70px; }
.step.p3 .block { height: 50px; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.input.search { width: 260px; }
.ranks { display: flex; flex-direction: column; }
.rank { display: grid; grid-template-columns: 28px 32px minmax(100px, 190px) minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 10px; border-radius: 12px; transition: background 0.18s; }
.rank + .rank { border-top: 1px solid var(--edge-1); }
.rank:hover { background: var(--well); }
.rank .avatar { width: 32px !important; height: 32px !important; }
.rank .who { display: flex; flex-direction: column; min-width: 0; }
.rank .who strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .progress { display: flex; flex-direction: column; gap: 5px; max-width: 260px; }
.rank .xp { font-size: 12px; text-align: right; }
.rank .set-xp .pop-body { width: 260px; }
.rank .set-xp:not([open]) summary { opacity: 0; }
.rank:hover .set-xp summary, .rank .set-xp summary:focus-visible { opacity: 1; }
.lvl { display: inline-grid; place-items: center; min-width: 32px; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--data-wash); font: 600 11px var(--mono); color: var(--data); }
.mini > .dot { width: 8px; height: 8px; }
.big-num { font-size: 30px; font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ================================================================ page plus a right column */
.with-rail { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 420px); gap: 28px; align-items: start; }

/* Settings beside what members will see: the form on the left, the preview on the right and
   staying in view, once the column is wide enough for both. Stacked below that. */
.compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; align-items: start; }
.compose > * { min-width: 0; }
@container col (min-width: 1000px) {
  .compose:has(> .compose-preview) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The preview takes the right column whichever comes first in the markup. */
  /* The preview spans the left side's rows; with no row gap an unused row takes no space, so the
     left blocks are spaced by margin instead. */
  .compose:has(> .compose-preview) { row-gap: 0; }
  .compose > :not(.compose-preview) { grid-column: 1; }
  .compose > :not(.compose-preview) + :not(.compose-preview) { margin-top: 24px; }
  .compose > .compose-preview { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 16px; }
}
/* Cards that should multiply on a wider screen rather than stretch. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile, 300px)), 1fr)); gap: 12px; }
@container col (min-width: 1100px) { .area svg { height: 240px; } }
@container col (min-width: 1500px) { .area svg { height: 280px; } }
/* The right column: a plain column of bordered panels, one per block, all one width. */
.rail { min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.rail > .rail-block { background: var(--raised); border: 1px solid var(--edge-1); border-radius: 14px; padding: 18px 20px; }
.rail > .rail-block + .rail-block { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--edge-1); }
.rail h2 { font-size: 14.5px; }
.rail-person { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.rail-person .grow { display: flex; flex-direction: column; gap: 5px; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.switch-row + .switch-row { border-top: 1px solid var(--edge-1); }
.switch-row label { font-size: 13.5px; font-weight: 500; }
.switch-row .help { margin-top: 2px; }
.switch-row .switch { flex: none; }
.rail-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rail-nums > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rail-nums b { font: 650 26px/1.15 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.rail-nums span { font-size: 12px; color: var(--ink-3); }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--edge-1); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 3px; background: var(--data); transform-origin: left; animation: fill 1.1s var(--ease) both 0.25s; }

/* ================================================================ features, people, activity, notifications
   The core admin pages in the house style (2026-11-02): two columns, the work on the left and a
   fixed 400 px side column, every section in one bordered panel, neutral 28 px icons and faces,
   lilac only for bars and meters, the accent only for Save and what's new. Classes are `cp-`. */
.cp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@container col (min-width: 1000px) { .cp-cols { grid-template-columns: minmax(0, 1fr) 400px; } }
.cp-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; container: col / inline-size; }
.cp-side { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Long logs: the side column stays in view while the list scrolls. */
@container col (min-width: 1000px) { .cp-side.cp-stick { position: sticky; top: 16px; } }
.cp-panel { min-width: 0; display: flex; flex-direction: column; gap: 14px; background: var(--raised); border: 1px solid var(--edge-1); border-radius: 14px; padding: 18px 20px; }
.cp-panel h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.cp-panel h2 .muted { font-size: 13px; font-weight: 400; }
.cp-note, .cp-none { font-size: 13px; color: var(--ink-3); }
.cp-none { padding: 6px 0; }
/* Rows: a 28 px face or icon, a 14 px title, a 13 px muted line. */
.cp-list { display: flex; flex-direction: column; gap: 2px; }
.cp-row { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 6px 0; font-size: 14px; }
.cp-row > .avatar, .cp-face .avatar { width: 28px !important; height: 28px !important; flex: none; }
.cp-row > .gicon { width: 28px; height: 28px; border-radius: 8px; }
.cp-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--control); color: var(--ink-2); }
.cp-ic .icon { width: 16px; height: 16px; }
.cp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-txt > strong { font-size: 14px; font-weight: 500; color: var(--ink); }
.cp-txt > span { font-size: 13px; color: var(--ink-3); }
.cp-line, .cp-txt > .cp-line { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.cp-line strong { color: var(--ink); font-weight: 500; }
.cp-n { font: 500 13px var(--mono); color: var(--ink-2); min-width: 24px; text-align: right; }
/* A link row: the whole row is the tap, lit on hover. */
a.cp-link, a.cp-pick { margin: 0 -10px; padding: 6px 10px; border-radius: 10px; transition: background 0.15s; }
a.cp-link:hover, a.cp-pick:hover { background: var(--hover); }
a.cp-pick.on { background: var(--selected); }
/* Day headings inside a log or a list's group labels. */
.cp-glabel { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 14px 0 4px; letter-spacing: 0; }
.cp-glabel:first-child { padding-top: 0; }
/* Bars and meters in the data colour, drawn as they are, without filling in. */
.cp-bar-row { min-height: 40px; padding: 4px 0; }
.cp-bar-row .cp-txt { flex-direction: row; align-items: center; gap: 14px; }
.cp-bar-row .cp-txt > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-bar-row .meter { flex: none; width: 90px; height: 5px; }
.cp-bar-row .meter > span { animation: none; }
.cp-panel .chart svg { height: 104px; border-bottom: 1px solid var(--edge-2); }
.cp-panel .chart .axis { font-size: 12px; }
.cp-face { position: relative; flex: none; display: grid; }
.cp-face .dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; box-shadow: 0 0 0 2px var(--raised); }
.cp-face .dot.live::after { display: none; }

/* Features: one list, in two balanced columns when there's room. */
.cp-feats { display: block; }
@container col (min-width: 900px) { .cp-feats { columns: 2; column-gap: 36px; } }
.cp-fgroup { break-inside: avoid; padding-bottom: 12px; }
.cp-fgroup:last-child { padding-bottom: 0; }
.cp-cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-cmds code { font: 12.5px var(--mono); color: var(--ink-2); background: var(--control); border-radius: 6px; padding: 3px 7px; }
.cp-frow { display: flex; align-items: center; gap: 12px; padding: 9px 0; break-inside: avoid; }
.cp-frow label.cp-txt { cursor: pointer; }
.cp-frow .cp-txt > span { line-height: 1.4; }
.cp-frow .switch { flex: none; }
.cp-frow.off .cp-ic { background: transparent; box-shadow: inset 0 0 0 1px var(--edge-2); color: var(--ink-3); }
.cp-frow.off .cp-txt > strong { color: var(--ink-2); }

/* People: what each person can open, as the pages' own icons (a tile when they can edit). */
.cp-person { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 104px; }
.cp-person .cp-btn { width: 104px; justify-content: center; }
.cp-access { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cp-page { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: var(--ink-3); }
.cp-page .icon { width: 15px; height: 15px; }
.cp-page.edit { background: var(--control); color: var(--ink); }
.cp-more { font: 500 12px var(--mono); color: var(--ink-3); padding-left: 4px; }
.cp-side .rail-nums b { font-size: 24px; }

/* One person's access: pages per server on the left, who they are, their role and Save on the right. */
.cp-server { display: flex; align-items: center; gap: 10px; }
.cp-server .gicon { width: 24px; height: 24px; }
.cp-server h2 { flex: 1; }
.cp-grants { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 36px; }
@container col (min-width: 820px) { .cp-grants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-grant { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 14px; }
.cp-grant .seg { flex: none; }
.cp-who { flex-direction: row; align-items: center; gap: 14px; }
.cp-who .avatar { width: 44px !important; height: 44px !important; flex: none; }
.cp-who .cp-txt > strong { font-size: 15px; }
.cp-fields .row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; }
.cp-fields .row:first-child { padding-top: 0; }
.cp-panel .save-bar { padding-top: 2px; }

/* Activity: time, face, what changed, where. */
.cp-change { gap: 12px; }
.cp-time { width: 40px; flex: none; font: 13px var(--mono); color: var(--ink-3); }
.cp-where { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--ink-3); }

/* Notifications: the bell's rows, at the list's size, no tint; new ones are bright with a dot. */
.cp-notes .note { margin: 0 -10px; padding: 8px 10px; gap: 12px; border-radius: 10px; min-height: 44px; }
.cp-notes .note.new { background: none; }
.cp-notes a.note:hover { background: var(--hover); transform: none; }
.cp-notes .note-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--control); color: var(--ink-2); }
.cp-notes .note-icon .icon { width: 16px; height: 16px; }
.cp-notes .note-text { font-size: 14px; }
.cp-notes .note .muted.small { font-size: 13px; }
.cp-notes .note .unread { background: var(--accent); }
.cp-new { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--accent); }

@media (max-width: 720px) {
  .cp-person { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .cp-person .cp-access { display: none; }
  .cp-where { display: none; }
  .cp-grant .clip { white-space: normal; }
}

/* Shared by the access popovers and menus. */
.pop { position: relative; }
.pop summary { list-style: none; }
.pop summary::-webkit-details-marker { display: none; }
.pop-body { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 380px; max-width: calc(100vw - 32px); background: var(--solid); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); transform-origin: top right; }
.pop[open] > .pop-body, .switcher[open] > .menu { animation: pop-open 0.24s var(--ease) both; }
.pop-body .inline-form .input { max-width: none; }
.pop > summary .pop-label { white-space: nowrap; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 9px; transition: background 0.15s; }
.menu-item .icon { width: 16px; height: 16px; color: var(--ink-3); }
.menu-item:hover { background: var(--hover); }
.menu-item.on { background: var(--selected); }

/* The bell's dropdown rows (the notifications page restyles them above). */
.note { display: flex; align-items: center; gap: 13px; padding: 10px 12px; margin: 0 -12px; border-radius: 13px; font-size: 13.5px; transition: background 0.18s, transform 0.3s var(--ease); }
a.note:hover { background: var(--hover); transform: translateX(3px); }
.note-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--solid); color: var(--ink-2); flex: none; }
.note .grow { display: flex; flex-direction: column; gap: 1px; }
.note-text { color: var(--ink-2); overflow-wrap: anywhere; }
.note.new { background: none; }
.note.new .note-text { color: var(--ink); font-weight: 500; }
.note .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; box-shadow: none; }
.note .go { color: var(--ink-3); transform: rotate(-90deg); flex: none; }

/* ================================================================ sign-in, errors, public pages */
body.bare { display: grid; place-items: center; padding: 16px; min-height: 100vh; overflow: hidden; position: relative; isolation: isolate; }
body.bare::before, body.bare::after { content: ""; position: fixed; z-index: -1; width: 70vmax; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: 0.4; pointer-events: none; }
body.bare::before { left: -25vmax; top: -35vmax; background: radial-gradient(closest-side, var(--accent), transparent); animation: drift-a 24s ease-in-out 4 alternate; }
body.bare::after { right: -30vmax; bottom: -40vmax; background: radial-gradient(closest-side, var(--signal), transparent); opacity: 0.25; animation: drift-b 30s ease-in-out 4 alternate; }
.notice { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; padding: 32px; border-radius: 22px; background: color-mix(in oklab, var(--raised) 85%, transparent); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); backdrop-filter: blur(20px); animation: pal-in 0.6s var(--ease) both; }
.notice h1 { font-size: 26px; letter-spacing: -0.035em; }
.notice .mark { width: 52px; height: 52px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); box-shadow: none; }
.notice .mark .icon { width: 30px; height: 30px; color: #fff; }
.btn.discord { height: 40px; padding: 0 20px; background: linear-gradient(180deg, #6d79f6, #5865f2 60%, #4752c4); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.btn.discord:hover { background: linear-gradient(180deg, #7b86f7, #5865f2 50%, #4752c4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.notice p { color: var(--ink-2); }
.notice .btn { margin-top: 6px; }
.copyable { user-select: all; background: var(--control); padding: 6px 10px; border-radius: var(--r-icon); font-size: 13px; }
body.public { background: var(--page); }
.public-page { max-width: 960px; margin: 0 auto; padding: 48px 20px 72px; display: flex; flex-direction: column; gap: 32px; }
.public-head { display: flex; flex-direction: column; gap: 6px; animation: rise 0.6s var(--ease) both; }
.public-head h1 { font-size: 30px; letter-spacing: -0.035em; }

/* ================================================================ toast */
/* Unsaved changes, like Discord's own bar: only while a settings form has changes and its
   Save is out of view. */
.unsaved { position: fixed; left: 50%; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 14px; background: var(--solid); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); font-size: 13.5px; transform: translate(-50%, 150%); opacity: 0; pointer-events: none; transition: transform 0.4s var(--ease), opacity 0.2s; }
.unsaved.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.unsaved > span { margin-right: 12px; color: var(--ink-2); white-space: nowrap; }
@media (min-width: 921px) { .unsaved { left: calc(50% + 162px); } }
/* A page on its way: a thin line along the top. */
html.loading::before { content: ""; position: fixed; z-index: 99; top: 0; left: 0; height: 2px; width: 100%; background: var(--accent); transform-origin: left; animation: loading 1.2s var(--ease) infinite; }
@keyframes loading { 0% { transform: scaleX(0); opacity: 1; } 80% { transform: scaleX(0.9); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Why an action was turned down, by the button that asked (app.js `refuse`). */
.refusal { position: fixed; z-index: 96; display: flex; align-items: flex-start; gap: 12px; width: max-content; max-width: min(380px, calc(100vw - 24px)); padding: 14px; border-radius: 14px; background: var(--solid); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); opacity: 0; pointer-events: none; transform: translate(-50%, 6px) scale(0.97); transform-origin: top center; transition: opacity 0.16s, transform 0.28s var(--ease); }
.refusal.above { transform: translate(-50%, calc(-100% - 6px)) scale(0.97); transform-origin: bottom center; }
.refusal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.refusal.above.show { transform: translate(-50%, -100%); }
.refusal-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in oklab, var(--waiting) 16%, transparent); color: var(--waiting); }
.refusal-ic .icon { width: 16px; height: 16px; }
.refusal-text { flex: 1; min-width: 0; padding-top: 1px; }
.refusal-text strong { display: block; font-size: 13.5px; font-weight: 600; }
.refusal-text p { margin-top: 3px; font-size: 13px; color: var(--ink-2); max-width: 36ch; }
.refusal .btn { align-self: center; flex: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 14px; background: rgba(22, 22, 31, 0.96); box-shadow: var(--shadow-pop), inset 0 0 0 1px var(--edge-2); color: var(--ink); font-size: 13.5px; font-weight: 500; overflow: hidden; transform: translate(-50%, 24px) scale(0.94); opacity: 0; transition: opacity 0.25s, transform 0.45s var(--spring); }
.toast .toast-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--live); color: #062014; }
.toast.bad .toast-ic { background: var(--held); color: #1a0507; }
.toast .toast-ic .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--live); transform-origin: left; animation: fill-out 2.2s linear forwards; }
.toast.bad::after { background: var(--held); }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ================================================================ motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes pop-open { from { opacity: 0; transform: translateY(-4px) scale(0.96); filter: blur(2px); } }
@keyframes pal-in { from { opacity: 0; transform: translateY(-12px) scale(0.97); filter: blur(6px); } }
@keyframes hero-in { from { transform: scale(1.12); filter: saturate(0.6) brightness(0.7); } to { transform: scale(1.02); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fill-out { to { transform: scaleX(0); } }
@keyframes line-in { from { clip-path: inset(-20px 100% -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes area-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3); opacity: 0; } }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes float { 50% { transform: translateY(-3px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
@keyframes drift-a { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-22%, 14%) scale(0.9); } }
@keyframes drift-c { to { transform: translate(-16%, -20%) scale(1.2); } }
/* Between pages: the sidebar and rail hold still, the page lifts away and the next one rises. */
::view-transition-old(page) { animation: vt-out 0.18s ease both; }
::view-transition-new(page) { animation: vt-in 0.42s var(--ease) both; }
::view-transition-group(nav-pill), ::view-transition-group(tab-line), ::view-transition-group(stat-line) { animation-duration: 0.42s; animation-timing-function: var(--ease); }
/* Another server: its sidebar and rail cross-fade instead of cutting over. */
::view-transition-old(side), ::view-transition-new(side) { animation-duration: 0.35s; animation-timing-function: ease; }
@keyframes vt-out { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
/* With a view transition running, the page's own entrance would play twice. */
html.vt .page-body > *, html.vt .head-icon, html.vt .head-text, html.vt .head-actions { animation: none; }
/* Another tab or filter of the same page (html.vt-soft): no rise and no scale, only a short
   cross-fade of what changed; the header, tabs and sidebar are the same on both sides, so they
   hold still. Charts don't draw in again either. */
html.vt-soft::view-transition-group(page) { animation-duration: 0s; }
html.vt-soft::view-transition-old(page) { animation: vt-fade-out 0.14s ease both; }
html.vt-soft::view-transition-new(page) { animation: vt-fade-in 0.2s ease both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
html.vt-soft .area .line, html.vt-soft .area .fill, html.vt-soft .area-end, html.vt-soft .chart rect.bar, html.vt-soft .mini-bars rect.bar, html.vt-soft .meter > span,
html.same .area .line, html.same .area .fill, html.same .area-end, html.same .chart rect.bar, html.same .mini-bars rect.bar, html.same .meter > span { animation: none; }
/* The same page again (another filter, after a save): nothing re-enters. */
html.same .page-body > *, html.same .head-icon, html.same .head-text, html.same .head-actions,
html.same .ov-bg img, html.same .ov-bg .art, html.same .ov-icon, html.same .ov-hello h1, html.same .ov-hello p { animation: none; }
/* A block with an open popover sits above the blocks after it, so its form isn't painted under
   the next block's entrance or isolation. */
.page-body > :has(.pop[open]), .with-rail > * > :has(.pop[open]) { position: relative; z-index: 5; }
/* A part being replaced in place (data-swap) dims if the answer takes a moment. */
.swapping { opacity: 0.5; pointer-events: none; transition: opacity 0.2s 0.12s; }

/* ================================================================ narrow */
@media (max-width: 1180px) {
  .with-rail { grid-template-columns: minmax(0, 1fr) 280px; }
}
@media (max-width: 920px) {
  .shell { grid-template-columns: 1fr; }
  .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(7, 7, 11, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--edge-1); }
  .topbar .gicon { width: 28px; height: 28px; border-radius: 9px; }
  .topbar strong { font-size: 14px; font-weight: 600; }
  .side { position: fixed; top: 0; bottom: 0; z-index: 70; height: 100%; transform: translateX(-120vw); visibility: hidden; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.36s; background: var(--ground); }
  .side { left: 0; width: min(288px, calc(100vw - 48px)); box-shadow: 20px 0 50px -20px rgba(0, 0, 0, 0.8); }
  body.drawer .side { transform: none; visibility: visible; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1); }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(4, 4, 8, 0.6); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  body.drawer .scrim { opacity: 1; pointer-events: auto; }
  .page { min-height: auto; }
  .page-head { padding: 20px 18px 0; flex-wrap: wrap; row-gap: 12px; }
  .head-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--ink-2); background: var(--raised); }
  .head-text { flex: 1 1 150px; }
  .head-text h1 { font-size: 21px; }
  .head-actions { margin-left: auto; }
  .head-text p { display: none; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }
  .tabs.more { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .page-body { padding: 18px 18px 44px; gap: 24px; }
  .row { grid-template-columns: 1fr; }
  .row-control:has(> .switch) { justify-content: flex-start; }
  .row-control:has(> .seg) { justify-content: flex-start; }
  .wide-only { display: none; }
  .page-head { position: relative; }
  .page-head .head-actions .pop { position: static; }
  .page-head .head-actions .pop-body { left: 16px; right: 16px; top: calc(100% + 6px); width: auto; max-width: none; }
  .pop > summary:has(.icon) .pop-label { display: none; }
  .pop > summary:has(.icon) { padding: 0 10px; }
  .split { grid-template-columns: 1fr; }
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .change > .clip { display: none; }
  .ov-icon { width: 64px; height: 64px; border-radius: 20px; }
  .rank { grid-template-columns: 24px 32px minmax(0, 1fr) auto; }
  .rank .progress, .rank .set-xp { display: none; }
  .input.search { width: 160px; }
}
@media (min-width: 921px) { .scrim { display: none; } }
/* ---- Discord, drawn (web/dc.rs): previews of what the bot posts ---- */
.compose-preview .dp { max-width: none; }
.dp { max-width: 620px; border-radius: 14px; overflow: hidden; background: #313338; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 26px 50px -26px rgba(0, 0, 0, 0.95); }
.dp-bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; color: #f2f3f5; font: 600 15px/1 var(--sans); box-shadow: 0 1px 0 rgba(4, 4, 5, 0.25), 0 2px 0 rgba(6, 6, 7, 0.06); }
.dp-bar .icon { width: 20px; height: 20px; color: #80848e; }
.dp-bar .none { color: #949ba4; font-weight: 500; }
.dp-bar .dp-tag { margin-left: auto; color: #949ba4; font-size: 12px; font-weight: 500; }
.dp-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px 20px; }
.dp-msg { transition: opacity 0.3s var(--ease); }
.dp-msg.off { opacity: 0.4; }
.dp .dp-msg { animation: dp-arrive 0.75s var(--ease) both 0.3s; }
.dp-post { display: flex; align-items: flex-start; gap: 16px; min-width: 0; color: #dbdee1; font: 15px/1.375 var(--sans); }
.dp-av { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dp-av.mark { display: grid; place-items: center; background: linear-gradient(145deg, var(--accent-hi), var(--accent-lo)); }
.dp-av.mark img { width: 22px; height: 22px; }
.dp-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; flex: 1; }
.dp-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 22px; }
.dp-name { color: #f2f3f5; font-weight: 500; }
.dp-app { display: inline-flex; align-items: center; height: 15px; background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 0 4px; }
.dp-time { color: #949ba4; font-size: 12px; margin-left: 2px; }
.dp-line { overflow-wrap: anywhere; max-width: 100%; white-space: pre-wrap; }
.dp-line a, a.dp-title { color: #00a8fc; }
.dp-line a:hover, a.dp-title:hover { text-decoration: underline; }
.dp-ts { background: rgba(255, 255, 255, 0.06); border-radius: 3px; padding: 0 2px; }
.dp-ping { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dp-used { position: relative; display: flex; align-items: center; gap: 5px; margin: 0 0 4px 56px; font-size: 13px; color: #949ba4; line-height: 18px; }
.dp-used::before { content: ""; position: absolute; left: -38px; top: 8px; width: 32px; height: 13px; border: 2px solid #4e5058; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.dp-used img { width: 16px; height: 16px; border-radius: 50%; }
.dp-used b { color: #dbdee1; font-weight: 500; }
.dp-used .cmd { color: #00a8fc; }
.dp-embed { align-self: stretch; max-width: 460px; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px 16px 16px 12px; background: #2b2d31; border-left: 4px solid var(--embed, #1e1f22); border-radius: 4px; font-size: 14px; }
.dp-provider { font-size: 12px; color: #b5bac1; }
.dp-author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #f2f3f5; margin-top: 2px; }
.dp-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.dp-title { font-size: 15.5px; font-weight: 600; color: #f2f3f5; overflow-wrap: anywhere; line-height: 1.3; }
.dp-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.dp-fields { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; }
.dp-fields div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-fields b { color: #f2f3f5; font-weight: 600; }
.dp-fields span { overflow-wrap: anywhere; }
.dp-media { position: relative; margin-top: 8px; border-radius: 6px; overflow: hidden; background: #1e1f22; }
.dp-media > img, .dp-media > .dp-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.dp .dp-media > img, .dp .dp-media > .dp-thumb { animation: dp-reveal 1.1s var(--ease) both 0.75s; }
.dp-media.sheet > img { aspect-ratio: auto; max-height: 520px; object-fit: contain; }
.dp-thumb { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(80% 90% at 50% 30%, rgba(145, 70, 255, 0.28), transparent), #232428; color: #949ba4; font-size: 12px; }
.dp-thumb .icon { width: 26px; height: 26px; color: #b9a3ff; }
.dp-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #b5bac1; margin-top: 4px; }
.dp-foot img { width: 20px; height: 20px; border-radius: 50%; }
.dp-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dp-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 8px; background: #4e5058; color: #fff; font: 500 14px/1 var(--sans); transition: background 0.15s; }
.dp-btn .icon { width: 14px; height: 14px; }
a.dp-btn:hover { background: #6d6f78; }
.dp-btn.primary { background: #5865f2; }
.dp-btn.green { background: #248046; }
.dp-btn.red { background: #da373c; }
@keyframes dp-arrive { from { opacity: 0; transform: translateY(18px) scale(0.985); filter: blur(4px); } }
@keyframes dp-reveal { from { opacity: 0; transform: scale(1.07); filter: blur(10px) saturate(0.5); } }
@media (max-width: 920px) {
  .dp-body { padding: 14px 12px 16px; }
  .dp-post { gap: 12px; font-size: 14.5px; }
  .dp-used { margin-left: 52px; }
  .dp-used::before { left: -36px; width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  @view-transition { navigation: none; }
}

/* ================================================================ the bell's dropdown
   Opens upward from the sidebar's foot: a head, then up to eight notices as compact rows (a
   neutral icon, two lines of text at most, the feature and time underneath, a dot for new). */
.peek-pop.pop-body { width: 400px; padding: 0; gap: 0; overflow: hidden; }
.peek-pop .peek-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px 12px; border-bottom: 1px solid var(--edge-1); }
.peek-pop .peek-head strong { font-size: 14px; font-weight: 500; }
.peek-pop .peek-head .muted { font-size: 12px; margin-left: 6px; font-weight: 400; }
.peek-pop .peek-head a { font-size: 13px; color: var(--ink-2); }
.peek-pop .peek-head a:hover { color: var(--ink); }
.peek-pop .peek-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; max-height: min(calc(70vh / var(--z)), 520px); overflow-y: auto; }
.pk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 8px; gap: 12px; align-items: start; padding: 10px; border-radius: 10px; color: var(--ink-2); transition: background-color 0.12s; }
a.pk-row:hover { background: var(--hover); }
.pk-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--solid); color: var(--ink-2); }
.pk-ic .icon { width: 15px; height: 15px; }
.pk-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.pk-row.new .pk-text { color: var(--ink); }
.pk-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.pk-dot { width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; }
.pk-row.new .pk-dot { background: var(--accent); }
.peek-pop .peek-none { padding: 28px 16px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ================================================================ motion policy (2026-11-02)
   One place decides what moves, after the owner found the motion "weird". It comes last and wins
   over the features' own styles on purpose.
   - Nothing enters or idles by itself on a working page: no rising blocks, arriving previews,
     pulsing dots, blinking tags, drifting art, spinning or floating tiles.
   - Kept, because each says something: charts drawing once (faster), the levels podium rising,
     the app-connection countdown draining, spinners on busy buttons, a refused delete shaking,
     popovers opening from their trigger, the phone drawer, toasts.
   - Moving between pages is a short cross-fade; between tabs of one page only what changed fades
     (html.vt-soft, above). Feedback is quick: hover changes colour, press scales a little. */
main.page *, main.page *::before, main.page *::after, .side *, .side *::before, .side *::after { animation: none !important; }
main.page .area .line { animation: line-in 0.9s var(--ease) both 0.05s !important; }
main.page .area .fill { animation: area-in 0.7s var(--ease) both 0.2s !important; }
main.page .area-end { animation: fade-in 0.2s ease both 0.8s !important; }
main.page .chart rect.bar, main.page .mini-bars rect.bar { animation: grow 0.5s var(--ease) both !important; animation-delay: calc(var(--i, 0) * 12ms) !important; }
main.page .meter > span { animation: fill 0.6s var(--ease) both 0.1s !important; }
main.page .lv-step { animation: lv-raise 0.6s var(--ease) both !important; }
main.page .cn-ttl-bar > span { animation: cn-drain var(--secs) linear forwards !important; }
main.page .btn.busy::before, .btn.busy::before { animation: spin 0.6s linear infinite !important; }
main.page .btn.armed { animation: shake 0.3s var(--ease) !important; }
main.page .pop[open] > .pop-body, .side .pop[open] > .pop-body { animation: pop-open 0.16s var(--ease) both !important; }
/* Same page again or another tab of it: charts stay drawn. */
html.same main.page .area .line, html.same main.page .area .fill, html.same main.page .area-end, html.same main.page .chart rect.bar, html.same main.page .mini-bars rect.bar, html.same main.page .meter > span,
html.vt-soft main.page .area .line, html.vt-soft main.page .area .fill, html.vt-soft main.page .area-end, html.vt-soft main.page .chart rect.bar, html.vt-soft main.page .mini-bars rect.bar, html.vt-soft main.page .meter > span,
html.vt-soft main.page .lv-step, html.same main.page .lv-step { animation: none !important; }
/* Popovers grow from their trigger (no blur, no drop). */
@keyframes pop-open { from { opacity: 0; transform: scale(0.97); } }
/* Between pages: a short cross-fade, no rise and no scale; the sidebar is the same on both sides. */
::view-transition-old(page) { animation: vt-fade-out 0.12s ease both; }
::view-transition-new(page) { animation: vt-fade-in 0.18s ease both; }
::view-transition-old(side), ::view-transition-new(side) { animation: none; }
::view-transition-group(tab-line), ::view-transition-group(nav-pill) { animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
/* The search palette opens from the keyboard many times a day: no animation. */
.palette.open, .pal-box, .pal-item { animation: none !important; }
/* Buttons press, they don't lift. */
.btn { transition: background-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s var(--ease); }
.btn:hover { transform: none; }
.btn:active { transform: scale(0.97); transition-duration: 0.06s; }
.icon-btn:active, .chip:active { transform: scale(0.97); }
/* Toggles slide, no bounce. */
.switch .thumb { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), width 0.15s ease; }
/* Hover never zooms pictures or springs faces. */
.stream-card:hover img, .sa-row:hover .sa-vt img { transform: none; }
.avatars .avatar { transition: transform 0.15s ease, margin 0.15s ease; }
.avatars .avatar:hover { transform: none; }