/* PenguBot website. The direction, tokens, contrast pairs, type and breakpoints are spec §5
   (docs/superpowers/specs/2026-09-27-web-dashboard-design.md): polar night, dark only. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The display face: page titles, the wordmark and big numbers. Body text stays Atkinson, which keeps
   channel names and ids legible. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --night: #070C14;
  --bg: #0A1019;
  --surface: #111A26;
  --raised: #192535;
  --line: #223149;
  --edge: #5A7392;
  --text: #EAF1F8;
  --muted: #9DB0C4;
  --ice: #7CC4E8;
  --beak: #F29A3A;
  --danger: #F28B82;
  --ok: #6FCF97;
  --on-accent: #0A1019;
  /* Tints of the named colours, for fills behind their own text. */
  --ice-wash: rgb(124 196 232 / 0.12);
  --ice-glass: rgb(124 196 232 / 0.35);
  --ok-wash: rgb(111 207 151 / 0.12);
  --danger-wash: rgb(242 139 130 / 0.1);
  --beak-wash: rgb(242 154 58 / 0.14);
  --radius-control: 10px;
  --radius-panel: 16px;
  --font: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;
  --sidebar: 17rem;
  --content: 68rem;
  --content-wide: 84rem;
  --gutter: var(--s7);
  /* How far the first card rides up over the masthead's slanted edge. */
  --overlap: 3.5rem;
  --shelf: 2.75rem;
  --lift: 0 1px 0 rgb(255 255 255 / 0.035) inset, 0 18px 40px -22px rgb(0 0 0 / 0.85);
  --tap: 44px;
  /* A nav row on a mouse: a thumb gets the full --tap (see the pointer query below). */
  --row: var(--tap);
  --quick: 140ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (pointer: fine) {
  :root { --row: 38px; }
}

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

*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute always wins: a component's own display must never make a hidden thing show. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0 0 var(--s3); line-height: 1.2; font-weight: 700; }
h1 { font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--s3); }
a { color: var(--ice); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code { font-family: var(--mono); font-size: 0.9em; background: var(--raised); padding: 0.05em 0.35em; border-radius: 6px; }
img { max-width: 100%; }
svg { flex: none; }
:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }
::selection { background: var(--ice-glass); color: var(--text); }
.meta { font-size: 0.875rem; color: var(--muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A radio group's fieldset carries no browser chrome of its own: the visible label lives beside it, as it
   does for every other field, and the legend (for assistive tech) is visually hidden. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.skip-link { position: absolute; left: var(--s4); top: -4rem; z-index: 40; padding: var(--s2) var(--s3); background: var(--raised); color: var(--text); border-radius: var(--radius-control); }
.skip-link:focus { top: var(--s4); }

/* --- scrollbars ----------------------------------------------------------- */
/* Thin, rounded, on a clear track. The thumb is --edge (3.91:1 on --bg, 3.59:1 on --surface), brighter on
   hover and ice while dragged. Chrome, Edge and Safari take the ::-webkit rules; Chrome drops them as soon
   as an element sets scrollbar-color, so the standard properties are only for browsers without
   ::-webkit-scrollbar (Firefox). */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--edge); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
::-webkit-scrollbar-thumb:active { background-color: var(--ice); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.sidebar-nav::-webkit-scrollbar, .checklist::-webkit-scrollbar { width: 10px; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
}

/* --- motion ---------------------------------------------------------------- */
/* State changes ease; nothing moves on load and nothing loops. Off entirely for anyone who asks. */

a, button, .button, summary, input, select, textarea, .tile, .server-card, .nav-list a, .switch input, .switch input::before {
  transition: background-color var(--quick), border-color var(--quick), color var(--quick), box-shadow var(--quick), transform var(--quick), left var(--quick);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- the brand ------------------------------------------------------------- */

.wordmark { display: flex; align-items: center; gap: var(--s3); margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.wordmark img { width: 34px; height: 34px; border-radius: 11px; }
/* The mark when the bot's avatar is unknown: its initial on the ice, the beak's orange as the dot. */
.mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--ice); color: var(--on-accent); font-family: var(--display); font-size: 1.125rem; font-weight: 800; }
.mark::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--beak); box-shadow: 0 0 0 3px var(--night); }

/* --- stand-alone pages: login, errors, offline, the server picker ----------- */

.stage { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--bg); }
.stage-brand { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--s7); padding: var(--s8) calc(var(--s8) + 3rem) var(--s8) var(--s7); background: linear-gradient(160deg, rgb(124 196 232 / 0.14), transparent 55%), var(--surface); clip-path: polygon(0 0, 100% 0, calc(100% - 5rem) 100%, 0 100%); }
.stage-brand > .wordmark { position: absolute; top: var(--s6); left: var(--s7); }
.stage-brand h1 { max-width: 14ch; margin: 0 0 var(--s4); font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; }
.stage-brand h1 em { font-style: normal; color: var(--ice); }
.stage-brand .lede { max-width: 34rem; font-size: 1.125rem; color: var(--muted); }
.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); max-width: 34rem; }
.areas li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s1) var(--s4); align-items: start; }
.areas .area-icon { grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--ice-wash); color: var(--ice); }
.areas strong { font-family: var(--display); font-size: 1.0625rem; }
.areas span:not(.area-icon) { font-size: 0.9375rem; color: var(--muted); }
.stage-panel { display: grid; place-items: center; padding: var(--s7) var(--s6); }
.stage-card { width: 100%; max-width: 27rem; padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--lift); }
.stage-card h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
.stage-card p { color: var(--muted); }
.stage-card .button { width: 100%; margin-top: var(--s4); }
.fineprint { margin: var(--s4) 0 0; font-size: 0.875rem; color: var(--muted); }

.center { position: relative; min-height: 100dvh; display: grid; place-items: center; padding: var(--s4); background: radial-gradient(60rem 30rem at 50% -10%, rgb(124 196 232 / 0.1), transparent 70%), var(--bg); }
.card { width: 100%; max-width: 30rem; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: var(--s6); box-shadow: var(--lift); }
.card-wide { max-width: 44rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s6); }
.card h1 { margin-bottom: var(--s3); font-size: 2rem; }
.card > p:last-child, .card > form:last-child { margin-bottom: 0; }
.status-medallion { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: var(--s5); border-radius: 18px; background: var(--ice-wash); color: var(--ice); }
.status-medallion.is-danger { background: var(--danger-wash); color: var(--danger); }
.servers { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--s3); }
.server-card { display: flex; align-items: center; gap: var(--s3); min-height: 72px; padding: var(--s3) var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; font-weight: 700; }
.server-card .icon { width: 44px; height: 44px; border-radius: 14px; }
.server-card span:not(.icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-card .go { margin-left: auto; color: var(--muted); }
.server-card:hover { border-color: var(--ice-glass); background: var(--raised); transform: translateY(-2px); }
.server-card:hover .go { color: var(--ice); }

/* --- the app frame ------------------------------------------------------- */

.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; }
.topbar { display: none; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--night); border-right: 1px solid var(--line); }
.sidebar-top { display: grid; gap: var(--s4); padding: var(--s5) var(--s4) var(--s4); }
.sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--s3) var(--s5) var(--s4); }
.icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--raised); color: var(--text); font-family: var(--display); font-size: 0.8125rem; font-weight: 700; object-fit: cover; }
.switcher summary { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.switcher summary .icon { width: 38px; height: 38px; border-radius: 12px; }
.switcher summary:hover { border-color: var(--edge); background: var(--raised); }
.switcher summary::-webkit-details-marker { display: none; }
.switcher-name { min-width: 0; display: grid; line-height: 1.25; }
.switcher-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-name span { font-size: 0.8125rem; color: var(--muted); }
.switcher .chevron { margin-left: auto; color: var(--muted); }
.switcher[open] summary { border-color: var(--ice-glass); }
.switcher[open] .chevron { transform: rotate(180deg); }
.switcher ul { list-style: none; margin: var(--s2) 0 0; padding: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--lift); }
.switcher a { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); padding: 0 var(--s2); border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
.switcher a:hover, .switcher a[aria-current="page"] { background: var(--raised); }
.switcher .icon { width: 28px; height: 28px; border-radius: 9px; }
.nav-heading { margin: var(--s5) var(--s3) var(--s2); font-family: var(--font); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-list a { position: relative; display: flex; align-items: center; gap: var(--s3); min-height: var(--row); padding: 0 var(--s3); border-radius: var(--radius-control); color: #C9D6E3; font-size: 0.9375rem; text-decoration: none; }
.nav-list a:hover { background: var(--surface); color: var(--text); }
.nav-list a[aria-current="page"] { background: var(--ice-wash); color: var(--ice); font-weight: 700; }
/* A feature's real on/off state beside its name: filled green for on, an empty ring for off. The words
   are there for screen readers; the overview and the page itself say it in text too. */
.dot { flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; }
.dot-on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.dot-off { border: 1.5px solid var(--edge); }
.sidebar-foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--raised); color: var(--text); font-size: 0.8125rem; font-weight: 700; object-fit: cover; }
.who { min-width: 0; flex: 1; display: grid; line-height: 1.25; }
.who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9375rem; }
.who span { font-size: 0.75rem; color: var(--muted); }
.sidebar-foot form { margin: 0; }
.main { min-width: 0; padding: 0 0 var(--s8); }
.content { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); container-type: inline-size; }
.content-wide { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* --- the masthead ------------------------------------------------------------ */
/* Every page opens on a lit band that says where you are. Its lower edge is cut on a slant, the ice
   shelf, and the page's first card rides up over it. */

.masthead { position: relative; padding: var(--s7) 0 calc(var(--overlap) + var(--shelf) + var(--s4)); background: linear-gradient(180deg, rgb(124 196 232 / 0.09), rgb(124 196 232 / 0) 75%), var(--surface); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--shelf)), 0 100%); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s5) var(--s6); }
.masthead-title { min-width: 0; flex: 1 1 26rem; }
.masthead h1 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.masthead p { max-width: 44rem; margin: 0; font-size: 1.0625rem; color: var(--muted); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.crumb a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ice); }
.crumb .sep { color: var(--edge); }
.lifted { position: relative; z-index: 1; margin-top: calc(-1 * var(--overlap)); }
.figures { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.figures div { min-width: 7.5rem; padding: var(--s3) var(--s4); background: rgb(10 16 25 / 0.55); border: 1px solid var(--line); border-radius: 14px; }
.figures dt { font-size: 0.8125rem; color: var(--muted); }
.figures dd { margin: 0; font-family: var(--display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.figures small { font-family: var(--font); font-size: 0.875rem; font-weight: 400; color: var(--muted); }

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

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s5); border: 1px solid var(--edge); border-radius: var(--radius-control); background: var(--raised); color: var(--text); font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; }
.button:hover { background: #22324A; border-color: var(--muted); }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--beak); border-color: var(--beak); color: var(--on-accent); box-shadow: 0 1px 0 rgb(255 255 255 / 0.25) inset, 0 8px 22px -10px rgb(242 154 58 / 0.7); }
.button-primary:hover { background: #F6A955; border-color: #F6A955; }
.button-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.button-danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.button-quiet { background: transparent; border-color: transparent; }
.button-quiet:hover { background: var(--raised); border-color: transparent; }
.button-small { min-height: var(--row); padding: 0 var(--s4); font-size: 0.875rem; }
.button-discord { background: #5865F2; border-color: #5865F2; color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset, 0 10px 26px -12px rgb(88 101 242 / 0.9); }
.button-discord:hover { background: #4752C4; border-color: #4752C4; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.setup-save { padding-block: var(--s5); }

/* --- notices, badges, states --------------------------------------------- */

.notice { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s5); padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; box-shadow: var(--lift); }
.notice p { margin: 0; }
.notice svg { margin-top: 0.2em; }
.notice-ok { background: linear-gradient(var(--ok-wash), var(--ok-wash)), var(--surface); border-color: rgb(111 207 151 / 0.5); }
.notice-ok svg { color: var(--ok); }
.notice-error { background: linear-gradient(var(--danger-wash), var(--danger-wash)), var(--surface); border-color: rgb(242 139 130 / 0.55); }
.notice-error svg { color: var(--danger); }
.badge { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.05rem var(--s2); border: 1px solid var(--edge); border-radius: 999px; font-family: var(--font); font-size: 0.8125rem; font-weight: 700; line-height: 1.5; letter-spacing: 0; color: var(--text); }
.badge-changed { border-color: rgb(242 154 58 / 0.6); background: var(--beak-wash); color: var(--beak); }
.chip { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.2rem 0.75rem; border-radius: 999px; font-family: var(--font); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-on { background: var(--ok-wash); color: var(--ok); }
.chip-off { background: var(--raised); color: var(--muted); }
.chip-off::before { background: none; border: 1.5px solid currentColor; }
.chip-open { background: var(--ice-wash); color: var(--ice); }
.chip-closed { background: var(--raised); color: var(--muted); }
.masthead .chip { font-size: 0.9375rem; padding: 0.3rem 0.9rem; }
.state { flex: none; font-size: 0.875rem; color: var(--muted); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* --- panels, tabs, fields ------------------------------------------------ */

.panel { margin-bottom: var(--s5); padding: var(--s2) var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); }
.panel-pad { padding: var(--s5) var(--s6); }
.panel > h2:first-child { margin-top: var(--s4); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); font-size: 1.0625rem; }
/* Tabs are a segmented control: a recessed track, the chosen section raised out of it. */
.tabs { display: flex; gap: var(--s1); width: fit-content; max-width: 100%; margin: var(--s5) 0 0; padding: var(--s1); overflow-x: auto; overflow-y: hidden; background: rgb(7 12 20 / 0.7); border: 1px solid var(--line); border-radius: 14px; }
.tabs::-webkit-scrollbar { height: 6px; }
.tabs [role="tab"], .tabs a { flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); background: none; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font: inherit; font-size: 0.9375rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.tabs [role="tab"]:hover, .tabs a:hover { color: var(--text); background: var(--surface); }
.tabs [aria-selected="true"], .tabs a[aria-current="page"] { background: var(--raised); border-color: var(--line); color: var(--ice); box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.8); }
.tabs-lifted { margin: 0 0 var(--s4); }
.tab-flag { font-size: 0.8125rem; color: var(--danger); }
html:not(.js) [role="tablist"] { display: none; }
.js .has-tabs .panel-heading, .single-tab .panel-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* A field: its name and help, then its control. Stacked in a narrow column; side by side once the column
   has room, so a wide screen reads as a two-column form. */
.field { display: grid; gap: var(--s2); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.panel .field:first-of-type, .panel-heading + .field { border-top: 0; }
.field-info { min-width: 0; }
.field-control { min-width: 0; }
.field-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.field .label, .field-head label { font-size: 1.0625rem; font-weight: 700; }
.help { margin: var(--s1) 0 0; font-size: 0.9375rem; color: var(--muted); }
.error-text { margin: var(--s2) 0 0; font-size: 0.875rem; font-weight: 700; color: var(--danger); }
.readonly-value { margin: 0; padding: var(--s2) var(--s3); background: var(--bg); border-radius: var(--radius-control); overflow-wrap: anywhere; }
@container (min-width: 46rem) {
  .field { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
  .field-info { padding-top: 0.55rem; }
}

input[type="text"], input[type="number"], input[type="search"], input[type="time"], select, textarea { display: block; width: 100%; min-height: var(--tap); padding: var(--s2) var(--s3); background: var(--bg); color: var(--text); border: 1px solid var(--edge); border-radius: var(--radius-control); font: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ice); outline-offset: 1px; box-shadow: 0 0 0 4px var(--ice-wash); }
select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239DB0C4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; cursor: pointer; }
select option, select optgroup { background: var(--surface); color: var(--text); }
textarea { min-height: 7rem; resize: vertical; }
/* A text setting's box is as tall as what is in it: one line for a channel name, more for a message. */
textarea.grow { field-sizing: content; min-height: var(--tap); max-height: 24rem; }
textarea.code { font-family: var(--mono); font-size: 0.9375rem; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
[aria-invalid="true"], [aria-invalid="true"] .checklist { border-color: var(--danger); }
.switch { display: inline-flex; align-items: center; gap: var(--s3); min-height: var(--tap); cursor: pointer; }
.switch input { appearance: none; position: relative; flex: none; width: 3.25rem; height: 1.75rem; margin: 0; background: var(--bg); border: 1px solid var(--edge); border-radius: 999px; cursor: pointer; }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.75rem - 8px); height: calc(1.75rem - 8px); border-radius: 50%; background: var(--muted); box-shadow: 0 2px 6px rgb(0 0 0 / 0.5); }
.switch input:checked { background: var(--ice); border-color: var(--ice); }
.switch input:checked::before { left: calc(100% - 1.75rem + 5px); background: var(--on-accent); }
.switch .state { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.switch input:checked + .state { color: var(--ice); }

/* A picker of many channels or roles: a scrolling list with a filter box above it once it is long. */
.picker { background: var(--bg); border: 1px solid var(--edge); border-radius: var(--radius-control); overflow: hidden; }
.picker-filter { padding: var(--s2); border-bottom: 1px solid var(--line); }
.picker-filter input { min-height: 38px; padding: var(--s1) var(--s3) var(--s1) 2.25rem; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239DB0C4' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E") no-repeat 0.75rem center; border-color: var(--line); }
.picker-summary { display: flex; justify-content: space-between; gap: var(--s3); margin: 0; padding: var(--s2) var(--s3); border-top: 1px solid var(--line); background: var(--night); font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.checklist { max-height: 17rem; overflow-y: auto; padding: var(--s1); }
.checklist label { display: flex; align-items: center; gap: var(--s3); min-height: var(--row); padding: 0 var(--s2); border-radius: 8px; font-weight: 400; cursor: pointer; }
.checklist label:hover { background: var(--surface); }
.checklist label:has(input:checked) { background: var(--ice-wash); }
.checklist input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ice); }
.checklist .group { margin: var(--s3) var(--s2) var(--s1); font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.checklist .group:first-child { margin-top: var(--s1); }
.checklist .meta { margin: var(--s2); }
.picker .empty-filter { margin: var(--s2); }
/* A role's own Discord colour, the way Discord marks a role. */
.swatch { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--swatch, var(--edge)); }

/* --- the save bar and dialogs --------------------------------------------- */

.savebar { position: sticky; bottom: var(--s5); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s5); padding: var(--s3) var(--s3) var(--s3) var(--s5); background: rgb(25 37 53 / 0.94); border: 1px solid var(--beak); border-radius: 18px; box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.9), 0 0 0 6px rgb(242 154 58 / 0.08); backdrop-filter: blur(10px); }
.savebar p { display: flex; align-items: center; gap: var(--s3); margin: 0; font-weight: 700; }
.savebar p::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--beak); box-shadow: 0 0 0 4px var(--beak-wash); }
@starting-style {
  .savebar { opacity: 0; transform: translateY(12px); }
}
.savebar { transition: opacity 180ms ease, transform 180ms ease; }
.danger-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s7); padding: var(--s5) var(--s6); background: linear-gradient(90deg, var(--danger-wash), transparent 60%); border: 1px solid rgb(242 139 130 / 0.3); border-radius: var(--radius-panel); }
.danger-zone h2 { margin-bottom: var(--s1); font-size: 1.0625rem; }
.danger-zone p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
dialog { max-width: min(30rem, calc(100vw - 2rem)); padding: var(--s6); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.9); }
dialog::backdrop { background: rgb(4 8 14 / 0.72); backdrop-filter: blur(3px); }
dialog h2 { font-size: 1.375rem; }
dialog p { color: var(--muted); }
dialog .actions { justify-content: flex-end; margin-top: var(--s5); }

/* --- the overview --------------------------------------------------------- */

.server-id { display: flex; align-items: center; gap: var(--s5); min-width: 0; }
.server-id .icon { width: 84px; height: 84px; border-radius: 26px; font-size: 1.75rem; box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ice-glass); }
.server-id h1 { margin-bottom: var(--s1); }
.health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s5); align-items: center; margin-bottom: var(--s7); padding: var(--s5) var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); }
.health-mark { grid-row: span 2; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 18px; background: var(--ok-wash); color: var(--ok); }
.health h2 { margin: 0; font-size: 1.375rem; }
.health > p { margin: 0; color: var(--muted); }
.health-bad { border-color: rgb(242 139 130 / 0.45); background: linear-gradient(135deg, var(--danger-wash), transparent 50%), var(--surface); }
.health-bad .health-mark { background: var(--danger-wash); color: var(--danger); }
.problems { grid-column: 1 / -1; list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.problems li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.problems p { margin: 0; }
.problems .where { font-weight: 700; }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); }
.group-head h2 { margin: 0; font-size: 1.5rem; }
.page-group + .page-group { margin-top: var(--s7); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: var(--s3); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--s2); height: 100%; min-height: 9rem; padding: var(--s4) var(--s5) var(--s4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); color: var(--text); text-decoration: none; }
.tile strong { font-family: var(--display); font-size: 1.1875rem; letter-spacing: -0.01em; }
.tile p { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.875rem; color: var(--muted); }
.tile .tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--s2); }
.tile .go { color: var(--edge); }
.tile:hover { border-color: var(--ice-glass); background: var(--raised); transform: translateY(-3px); box-shadow: var(--lift); }
.tile:hover .go { color: var(--ice); transform: translateX(2px); }
.tile .chip { font-size: 0.8125rem; padding: 0.1rem 0.6rem; }
.always { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }

/* --- list editors ----------------------------------------------------------- */

.entries { list-style: none; margin: 0 0 var(--s3); padding: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); }
.entries li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); padding: 0 var(--s1) 0 var(--s4); border-top: 1px solid var(--line); }
.entries li:first-child { border-top: 0; }
.entries form { margin: 0; }
.entries .button-quiet { color: var(--muted); font-weight: 400; }
.entries .button-quiet:hover { color: var(--danger); background: var(--danger-wash); }
.add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; gap: var(--s3); padding: var(--s4); background: var(--night); border: 1px dashed var(--edge); border-radius: var(--radius-control); }
.add-row label { display: grid; gap: var(--s1); font-weight: 700; font-size: 0.875rem; color: var(--muted); }
.add-row .wide { grid-column: 1 / -1; }
.add-row .help { margin: 0; font-weight: 400; }
.list-editor .notice { margin-bottom: var(--s3); box-shadow: none; }

/* --- permissions ------------------------------------------------------------ */

.capabilities { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.capability { padding: var(--s5) var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); }
.capability:has(details[open]) { border-color: var(--ice-glass); }
.capability-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.capability-name { flex: 1 1 18rem; min-width: 0; }
.capability-name h2 { margin: 0 0 var(--s1); font-size: 1.125rem; }
.capability-name code { background: var(--ice-wash); color: var(--ice); padding: 0.1em 0.5em; font-size: 0.9375rem; }
.capability-name p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.held { flex: 1 1 16rem; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.role { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.2rem 0.7rem 0.2rem 0.55rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.held-none { font-size: 0.9375rem; color: var(--muted); }
.capability details { flex: none; }
.capability details[open] { flex-basis: 100%; }
.capability summary { list-style: none; }
.capability summary::-webkit-details-marker { display: none; }
.capability details[open] summary { background: var(--ice-wash); border-color: var(--ice-glass); color: var(--ice); }
.capability form { margin-top: var(--s4); display: grid; gap: var(--s3); }
.capability form .actions { justify-content: flex-end; }

/* --- tickets ---------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s6); }
.stats div { padding: var(--s4) var(--s5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); }
.stats dt { font-size: 0.875rem; color: var(--muted); }
.stats dd { margin: var(--s1) 0 0; font-family: var(--display); font-size: 1.875rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* A figure that is words ("no ratings yet") reads as text, not a headline number. */
.stats dd small { font-family: var(--font); font-size: 0.875rem; font-weight: 400; letter-spacing: 0; }
.stats dd.words { font-family: var(--font); font-size: 1.0625rem; letter-spacing: 0; color: var(--muted); padding-top: 0.45rem; }
.board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--lift); }
.board-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.board-head .tabs { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin: 0; }
.filters label { display: grid; gap: var(--s1); min-width: 11rem; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.filters .narrow { min-width: 8rem; width: 8rem; }
.board #ticket-results > .notice { margin: var(--s4) var(--s5) 0; box-shadow: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { padding: var(--s3) var(--s5); text-align: left; font-size: 0.8125rem; font-weight: 700; color: var(--muted); background: var(--night); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: var(--s3) var(--s5); vertical-align: middle; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--quick); }
tbody tr:hover { background: var(--raised); }
td.dim { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-link { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.who-cell { display: flex; align-items: center; gap: var(--s2); font-weight: 700; }
.who-cell .avatar { width: 26px; height: 26px; font-size: 0.6875rem; background: var(--ice-wash); color: var(--ice); }
.kind { display: inline-block; padding: 0.05rem 0.6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.pager .actions { gap: var(--s2); }
.empty { display: grid; justify-items: center; gap: var(--s2); padding: var(--s7) var(--s5); text-align: center; color: var(--muted); }
.empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: var(--s2); border-radius: 16px; background: var(--raised); color: var(--muted); }
.empty p { max-width: 36rem; margin: 0; }
.empty-card { background: var(--surface); border: 1px dashed var(--edge); border-radius: var(--radius-panel); }
.ticket-layout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 80rem) {
  .ticket-layout { grid-template-columns: 23rem minmax(0, 1fr); }
  .ticket-side { position: sticky; top: var(--s5); }
}
.details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s3) var(--s5); margin: 0; }
.details dt { color: var(--muted); font-size: 0.9375rem; }
.details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.answers { display: grid; gap: var(--s4); margin: 0; }
.answers dt { font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.answers dd { margin: var(--s1) 0 0; padding: var(--s3) var(--s4); background: var(--bg); border-radius: 12px; overflow-wrap: anywhere; }
.transcript-card { padding: var(--s3); }
.transcript-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3) var(--s4); }
.transcript-head h2 { margin: 0; }
.transcript { display: block; width: 100%; height: 75dvh; background: #fff; border: 0; border-radius: 12px; }

/* ---------- record pages ---------- */
.page-tabs + .tabs { margin-top: 0; }
.records { list-style: none; margin: 0; padding: 0; }
.record { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.record:first-child { border-top: 0; }
.record-main { min-width: 0; }
.record-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: 0; font-weight: 700; }
.record-text { margin: var(--s1) 0 0; color: var(--text); overflow-wrap: anywhere; }
.record-meta { margin: var(--s1) 0 0; color: var(--muted); font-size: 0.875rem; }
.record-meta.warning { color: var(--beak); }
.record-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.record-actions .button, .record-actions form { min-width: 0; }
.records-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.records-head h2 { margin: 0; font-size: 1.125rem; }
.record-form .actions { display: flex; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
.checklist.radios label { cursor: pointer; }
/* A choice of a few short options sits in a row; a chip that names a setting marks no state, so no dot. */
.checklist.radios.inline { display: flex; flex-wrap: wrap; gap: var(--s1); max-height: none; }
.chip-plain { background: var(--raised); color: var(--text); }
.chip-plain::before { display: none; }
.record-form textarea.grow { min-height: 7rem; }
.panel > form > h3 { margin: var(--s5) 0 0; }
.record-form > .panel-heading { margin: var(--s4) 0 0; font-size: 1.125rem; }
.count { margin: var(--s1) 0 0; }
.record-group + .record-group { margin-top: var(--s5); }
.records-group + .records-group { border-top: 1px solid var(--line); }
.records-subhead { margin: 0; padding: var(--s4) var(--s5) 0; font-size: 0.8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.records-more, .empty-line { margin: 0; padding: var(--s4) var(--s5); color: var(--muted); }
/* A search row: the field grows to fill the row beside its button; narrow viewports let it wrap and stack. */
.tag-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin: 0 0 var(--s4); }
.tag-search label { flex: 1; display: grid; gap: var(--s1); min-width: 12rem; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.tag-search input { width: 100%; }

/* ---------- members ---------- */
.member-search { padding: var(--s4) var(--s5) 0; margin: 0; }
.member-status { margin: 0; padding: var(--s2) var(--s5) var(--s4); }
.member-hit { display: flex; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s1) 0; color: var(--text); text-decoration: none; }
.member-hit:hover .hit-names strong, .member-hit:focus-visible .hit-names strong { text-decoration: underline; }
.member-results .record { grid-template-columns: minmax(0, 1fr); padding-block: var(--s2); }
.member-pick { width: 100%; padding: var(--s2) var(--s3); background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; text-align: left; cursor: pointer; }
.member-pick:hover, .member-pick:focus-visible { background: var(--raised); }
.member-picker-results { margin: var(--s1) 0 0; padding: 0; list-style: none; }
.hit-names { display: grid; min-width: 0; line-height: 1.3; }
.hit-names strong, .hit-names span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hit-names span { font-size: 0.8125rem; color: var(--muted); }
.member-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.member-head .statuses { margin: 0; }
.avatar-large { width: 64px; height: 64px; font-size: 1.5rem; }
.statuses, .role-dots { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.role-dots .role { display: inline-flex; align-items: center; gap: var(--s2); padding: 0.15rem 0.7rem; background: var(--raised); border-radius: 999px; font-size: 0.875rem; }
.facts { display: grid; gap: var(--s2); margin: var(--s4) 0 0; }
.facts div { display: flex; flex-wrap: wrap; gap: var(--s2); }
.facts dt { min-width: 9rem; color: var(--muted); }
.facts dd { margin: 0; }
.facts .facts-block { display: grid; gap: var(--s2); }
.facts .facts-block .role-dots { margin: 0; }
.role-name { display: inline-flex; align-items: center; gap: var(--s2); }
.income-list { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.income-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.income-text { display: inline-flex; align-items: center; gap: var(--s2); min-width: 0; overflow-wrap: anywhere; }
.income-remove { margin: 0; margin-left: auto; }
.more-roles { margin: var(--s3) 0 var(--s4); }
.more-roles[open] summary, .shared-catalog[open] summary { margin-bottom: var(--s3); }
.channel-group { margin: var(--s4) 0 var(--s2); font-size: 1rem; }
.channel-list { display: grid; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; overflow-wrap: anywhere; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s3); margin: var(--s3) 0 var(--s4); padding: 0; list-style: none; }
.emoji-grid li { display: grid; justify-items: center; gap: var(--s2); padding: var(--s3); background: var(--raised); border-radius: 12px; text-align: center; overflow-wrap: anywhere; font-size: 0.875rem; }
.emoji-grid img { width: 48px; height: 48px; object-fit: contain; }
.act-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.act-form { display: grid; align-content: start; gap: var(--s3); min-width: 0; }
.act-form h3 { margin: 0; font-size: 1rem; }
.act-field { display: grid; gap: var(--s1); }
.act-field label { font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.act-field .help { margin: 0; font-size: 0.8125rem; }
.act-form .button { justify-self: start; }

/* --- the message designer ---------------------------------------------------- */
/* The form on the left, the preview on the right and sticky while the form scrolls; one column below 64rem.
   The form is its own container, so its fields stack in the narrower column. */

.notice-warning { background: linear-gradient(var(--beak-wash), var(--beak-wash)), var(--surface); border-color: rgb(242 154 58 / 0.55); }
.notice-warning svg { color: var(--beak); }
.designer { display: grid; gap: var(--s5); align-items: start; }
.designer-main { min-width: 0; }
.designer-form { container-type: inline-size; }
.designer-form .actions { flex-wrap: wrap; }
.designer-note { flex: 1 1 100%; margin: 0; }
.designer-main .danger-zone { margin-top: var(--s5); }
.designer-preview { min-width: 0; }
.designer-preview h2 { margin: 0 0 var(--s3); font-size: 1.125rem; }
.designer-preview > .meta { margin: var(--s3) 0 0; }
@media (min-width: 64rem) {
  .designer { grid-template-columns: minmax(0, 1fr) minmax(19rem, 27rem); }
  .designer-preview { position: sticky; top: var(--s5); }
}
.swatches { display: flex; flex-wrap: wrap; gap: var(--s2); }
.swatches label { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--row); padding: 0 var(--s3) 0 var(--s2); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; font-weight: 400; cursor: pointer; }
.swatches label:hover { border-color: var(--edge); }
.swatches label:has(input:checked) { background: var(--ice-wash); border-color: var(--ice); font-weight: 700; }
.swatches input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ice); }
.swatches[aria-invalid="true"] label { border-color: var(--danger); }
.tint-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15) inset; }
.colour-picker { display: flex; align-items: center; gap: var(--s3); }
.colour-picker input[type="color"] { width: 2.5rem; height: 2.25rem; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer; }
.picture-control { display: grid; gap: var(--s2); }
.uploaded { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s2) var(--s3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-control); }
.uploaded-name { margin: 0; overflow-wrap: anywhere; }
.check { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--row); cursor: pointer; }
.check input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--ice); }
.file-label { margin-top: var(--s2); font-size: 0.9375rem; font-weight: 700; }
.file-input { display: block; width: 100%; padding: var(--s2); background: var(--bg); color: var(--muted); border: 1px dashed var(--edge); border-radius: var(--radius-control); font: inherit; font-size: 0.9375rem; }
.file-input::file-selector-button { margin-right: var(--s3); min-height: 36px; padding: 0 var(--s4); background: var(--raised); color: var(--text); border: 1px solid var(--edge); border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.file-input:hover { border-color: var(--muted); }

/* The preview card: Discord's components-v2 container, drawn in the site's tokens. The accent bar is the design's
   colour; the colour values are discord.py's, which the bot posts with. */
.tint-blurple { --tint: #5865F2; }
.tint-green { --tint: #2ECC71; }
.tint-red { --tint: #E74C3C; }
.tint-yellow { --tint: #F1C40F; }
.tint-orange { --tint: #E67E22; }
.tint-purple { --tint: #9B59B6; }
.tint-grey { --tint: #99AAB5; }
.dcard { display: flex; overflow: hidden; background: var(--raised); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--lift); }
.dcard::before { content: ""; flex: none; width: 4px; background: var(--tint, var(--edge)); }
.dcard-body { flex: 1; min-width: 0; display: grid; gap: var(--s3); padding: var(--s4); }
.dcard-head { display: flex; align-items: flex-start; gap: var(--s4); }
.dcard-words { flex: 1; min-width: 0; }
.dcard-title { margin: 0 0 var(--s1); font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dcard-text { font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.dcard-text code { background: var(--bg); }
.dcard-thumb { flex: none; display: grid; place-items: center; width: 80px; height: 80px; }
.dcard-thumb img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
.dcard-initials { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--surface); color: var(--text); font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.dcard-image { display: block; width: 100%; max-height: 24rem; object-fit: contain; object-position: left; border-radius: 8px; background: var(--bg); }
.dcard-footer { margin: 0; font-size: 0.8125rem; color: var(--muted); overflow-wrap: anywhere; }
.dcard-ping { margin: 0 0 var(--s1); font-weight: 700; overflow-wrap: anywhere; }
.dcard-image-fallback { margin: 0; }
@media (max-width: 40rem) {
  /* The long button labels wrap rather than push the page sideways on a phone. */
  .designer-actions .button, .designer-main .danger-zone .button { width: 100%; white-space: normal; text-align: center; }
  .dcard-thumb, .dcard-thumb img, .dcard-initials { width: 56px; height: 56px; }
  .dcard-initials { font-size: 1.125rem; }
}

/* --- middle widths: the sidebar becomes a drawer --------------------------- */

@media (max-width: 64rem) {
  :root { --gutter: var(--s5); --overlap: 2.5rem; --shelf: 1.75rem; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-nav { overflow: visible; }
  .js .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 60px; padding: var(--s2) var(--s4); background: rgb(7 12 20 / 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
  .topbar-title { display: flex; align-items: center; gap: var(--s3); min-width: 0; font-weight: 700; }
  .topbar-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .js .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(20rem, 86vw); height: 100dvh; border-right: 1px solid var(--line); border-bottom: 0; box-shadow: 0 0 60px rgb(0 0 0 / 0.6); visibility: hidden; transform: translateX(-100%); transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), visibility 220ms; }
  .js .sidebar .sidebar-nav { overflow-y: auto; }
  .js .sidebar.open { visibility: visible; transform: none; }
  .scrim { position: fixed; inset: 0; z-index: 25; background: rgb(4 8 14 / 0.65); backdrop-filter: blur(2px); }
  .masthead { padding-top: var(--s6); }
  .col-topic, .col-claimer { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage-brand { padding: var(--s6) var(--s5) var(--s8); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%); }
  .stage-panel { padding: 0 var(--s5) var(--s7); }
  .stage-brand > .wordmark { position: static; }
}

/* --- narrow: one column, stacked ticket rows -------------------------------- */

@media (max-width: 40rem) {
  :root { --gutter: var(--s4); --overlap: 2rem; --shelf: 1.25rem; }
  h1 { font-size: 1.75rem; }
  .masthead { padding-top: var(--s5); }
  .masthead p { font-size: 1rem; }
  .server-id { gap: var(--s4); }
  .server-id .icon { width: 60px; height: 60px; border-radius: 18px; font-size: 1.25rem; }
  .figures { width: 100%; }
  .figures div { flex: 1 1 0; min-width: 0; padding: var(--s2) var(--s3); }
  .figures dd { font-size: 1.25rem; }
  .card { padding: var(--s5); border-radius: 18px; }
  .panel { padding: var(--s1) var(--s4); }
  .panel-pad, .health, .capability { padding: var(--s4); }
  .health { grid-template-columns: minmax(0, 1fr); }
  .health-mark { grid-row: auto; width: 2.75rem; height: 2.75rem; }
  .tabs { width: 100%; }
  .savebar { bottom: 0; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-width: 1px 0 0; }
  .danger-zone { padding: var(--s4); }
  .board-head { padding: var(--s3); }
  .filters label, .filters .narrow { min-width: 0; width: 100%; }
  .filters, .toolbar { width: 100%; }
  .tag-search label { min-width: 0; width: 100%; }
  .details { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .details dd { margin-bottom: var(--s3); }
  .ticket-table thead { display: none; }
  .ticket-table, .ticket-table tbody, .ticket-table tr, .ticket-table td { display: block; }
  .ticket-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); }
  .ticket-table tr + tr { border-top: 1px solid var(--line); }
  .ticket-table td { padding: 0; border: 0; }
  .ticket-table td:not(:first-child):not(:nth-child(2)) { grid-column: 1 / -1; font-size: 0.875rem; }
  .ticket-table td[data-label]:not(:nth-child(2))::before { content: attr(data-label) ": "; color: var(--muted); }
  .ticket-table .col-topic, .ticket-table .col-claimer { display: none; }
  .stage-brand h1 { font-size: 2.5rem; }
  .areas { gap: var(--s3); }
  .record { grid-template-columns: 1fr; padding: var(--s4); }
  .record-actions .button { flex: 1; }
}