/* Voinly design system ---------------------------------------------------
Master design spec §4 (tokens) and §5 (motion). Canvas #212831, primary blue #0084ff for actions,
green #22c55e only for "on". UI font: Onest. Discord previews: gg sans / Noto Sans. */
:root {
/* §4.1 surfaces */
--clr-canvas: #212831;
--clr-surface-dark: #1b2028;
--clr-surface-darker: #181f25;
--clr-dirtybar: #141a1f;
--clr-card-bg: rgba(189, 189, 189, 0.05);
--clr-card-hover: rgba(255, 255, 255, 0.04);
--clr-input-bg: #333e4c;
--clr-input-inset: rgba(0, 0, 0, 0.25);
--clr-backdrop: rgba(0, 0, 0, 0.8);
/* §4.2 borders */
--border-subtle: rgba(255, 255, 255, 0.07);
--border-default: rgba(255, 255, 255, 0.10);
--border-strong: #2d3743;
--border-focus: #0084ff;
/* The focus indicator of a native field (§4.2). --border-focus on the input background measures 2.97:1, under the
3:1 a focus indicator owes, so a focused field draws the lighter blue --sky already carries: 2px, offset 2px from
the control so it sits on the surface the field stands on, and the same colour on its border. 5.06:1 on
--clr-input-bg #333e4c, 6.93:1 on --clr-canvas #212831, 7.62:1 on --clr-surface-dark #1b2028. --focus-ring-invalid
is the ring of a focused invalid field, so it still reads invalid while it reads focused (5.46:1 and 7.48:1). */
--focus-ring: #5fb8ff;
--focus-ring-soft: rgba(95, 184, 255, 0.18);
--focus-ring-invalid: #ff9d9d;
--border-dashed: 1px dashed rgba(255, 255, 255, 0.18);
/* §4.3 actions and status */
--clr-primary: #0084ff;
--clr-primary-hover: #1785cf;
--clr-primary-active: #0074c2;
--clr-primary-soft: rgba(0, 132, 255, 0.15);
--clr-success: #22c55e;
--clr-success-btn: #30b530;
--clr-success-btn-hover: #39cb39;
--clr-warning: #fa972e;
--clr-danger: #ce3636;
--clr-danger-hover: #e65b5b;
--clr-danger-text: #ff8a8a; /* error text on dark surfaces (MAR-667 ui §1.2): 4.79:1 on the card */
--clr-discord: #5865f2;
--clr-secondary-btn: #2d3743;
/* §4.4 type */
--font-ui: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--dc-font: "gg sans", "Noto Sans", "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
--dc-font-code: "gg mono", "Source Code Pro", Consolas, "Andale Mono WT", monospace;
--font-discord: var(--dc-font);
--font-code: ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
--text-primary: #ffffff;
--text-secondary: #c2cbd6;
--text-tertiary: #9caabc; /* 4.6:1 on inputs #333e4c, 5.7:1 on cards #292f38 (WCAG AA body text) */
--text-disabled: rgba(255, 255, 255, 0.28);
/* §4.5 geometry. --radius-lg is only for cards, path bars and the dirty bar; modal chrome is a literal 12px. */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-xl: 15px;
--radius-full: 9999px;
--topbar-height: 50px;
--sidebar-width: 300px;
--content-max-width: 1000px;
/* §5.1 motion */
--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-enter: 250ms;
/* Older names used across module templates, mapped onto the tokens above so every page picks them up. */
--ink-0: var(--clr-surface-dark);
--ink-1: #262d37;
--ink-2: var(--clr-secondary-btn);
--ink-3: var(--clr-input-bg);
--ink-4: #3d4a5c;
--line: var(--border-default);
--line-soft: var(--border-subtle);
--text: var(--text-primary);
--text-2: var(--text-secondary);
--muted: var(--text-tertiary);
--iris: var(--clr-primary);
--iris-btn: var(--clr-primary);
--iris-btn-hover: var(--clr-primary-hover);
--iris-soft: var(--clr-primary-soft);
--mint: var(--clr-success);
--mint-soft: rgba(34, 197, 94, 0.13);
--amber: var(--clr-warning);
--amber-soft: rgba(250, 151, 46, 0.12);
--rose: var(--clr-danger-hover);
--rose-btn: var(--clr-danger);
--rose-soft: rgba(206, 54, 54, 0.14);
--sky: #5fb8ff;
--font-display: var(--font-ui);
--r-sm: var(--radius-sm);
--r-md: var(--radius-md);
--r-lg: var(--radius-lg);
--r-xl: var(--radius-xl);
--sidebar-w: var(--sidebar-width);
--content-w: var(--content-max-width);
--ease: var(--ease-smooth);
--shadow-pop: 0 18px 50px -12px rgba(0, 0, 0, .7), 0 0 0 1px var(--border-default);
color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--clr-canvas);
color: var(--text-primary);
font: 400 15px/1.5 var(--font-ui);
font-feature-settings: "lnum" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--clr-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; font-feature-settings: "lnum" 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--clr-primary); }
[x-cloak] { display: none !important; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(0, 132, 255, .35); }
.icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* §4.4 type scale: H1 35/700, H2 22/600, card and path titles 20/500, body 15/400, caption 13 */
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; margin: 0; }
h1 { font-size: 2.2rem; line-height: 1.2; letter-spacing: -0.015em; }
h2 { font-size: 1.4rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
.muted { color: var(--text-tertiary); }
.text-2 { color: var(--text-secondary); }
.small { font-size: 13px; }
code, kbd { font-family: var(--font-code); font-size: .88em; background: var(--clr-surface-dark); border: 1px solid var(--border-default); padding: 1px 6px; border-radius: 5px; }
/* ---------------------------------------------------------------- buttons (radius 6px) */
.btn {
--btn-bg: var(--clr-secondary-btn); --btn-fg: var(--text-primary); --btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 38px; padding: 0 16px; border-radius: var(--radius-sm);
background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
font-weight: 500; font-size: 15px; cursor: pointer; white-space: nowrap;
transition: background-color 150ms ease, border-color 150ms ease, transform 80ms ease;
text-decoration: none !important;
}
.btn:hover { --btn-bg: #3a4655; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; }
.btn-secondary { --btn-bg: var(--clr-secondary-btn); --btn-fg: var(--text-primary); }
.btn-secondary:hover { --btn-bg: #3a4655; }
.btn-primary { --btn-bg: var(--clr-primary); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: var(--clr-primary-hover); }
.btn-primary:active { --btn-bg: var(--clr-primary-active); }
.btn-success { --btn-bg: var(--clr-success-btn); --btn-fg: #fff; }
.btn-success:hover { --btn-bg: var(--clr-success-btn-hover); }
.btn-danger { --btn-bg: var(--clr-danger); --btn-fg: #fff; }
.btn-danger:hover { --btn-bg: var(--clr-danger-hover); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--text-secondary); }
.btn-ghost:hover { --btn-bg: var(--clr-card-hover); --btn-fg: var(--text-primary); }
.btn-outline { --btn-bg: transparent; --btn-bd: var(--border-default); --btn-fg: var(--text-primary); }
.btn-outline:hover { --btn-bg: var(--clr-card-hover); --btn-bd: rgba(255, 255, 255, .18); }
.btn-sm { height: 31px; padding: 0 11px; font-size: 13px; gap: 6px; }
.btn-lg { height: 48px; padding: 0 22px; font-size: 15.5px; }
.btn-icon { width: 34px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn .spinner { width: 14px; height: 14px; }
.spinner { border: 2px solid rgba(255,255,255,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------------------------------------------------------------- app shell (§3.1) */
/* Topbar fixed 50px across the top; sidebar fixed 300px under it; main column max 1000px, 24px gutters. */
.shell { min-height: 100vh; }
.sidebar {
position: fixed; z-index: 40; left: 0; top: var(--topbar-height); bottom: 0; width: var(--sidebar-width);
background: var(--clr-canvas); box-shadow: inset -50px 0 50px 1px #1f252e;
display: flex; flex-direction: column; overflow: hidden;
}
.sidebar-top { display: flex; gap: 6px; align-items: center; padding: 14px 12px 6px 14px; }
.sidebar-util {
flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 8px;
border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--clr-card-bg);
color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none !important;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.sidebar-util span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-util:hover { background: var(--clr-card-hover); color: var(--text-primary); border-color: rgba(255, 255, 255, .14); }
.sidebar-util.active { color: #fff; background: rgba(255, 255, 255, .07); }
.sidebar-util.compact { flex: 0 0 auto; padding: 0 12px; }
.sidebar-util .icon { color: var(--text-tertiary); }
.sidebar-util.spinning .icon { animation: spin 600ms var(--ease-smooth) infinite; color: var(--clr-primary); }
.drawer-close { display: none; flex-shrink: 0; }
.server-switch {
min-width: 0; max-width: 260px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 3px;
background: rgba(255, 255, 255, .05); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); cursor: pointer; text-align: left;
transition: background-color 150ms ease, border-color 150ms ease;
}
.server-switch:hover, .server-switch[aria-expanded="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.server-switch .name { font-weight: 600; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-switch .sub { display: none; }
.server-switch .grow { min-width: 0; flex: 1; }
.guild-avatar {
width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
display: grid; place-items: center; background: var(--clr-input-bg); color: var(--text-secondary);
font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: -.02em;
}
.guild-avatar img { width: 100%; height: 100%; object-fit: cover; }
.server-switch .guild-avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 11.5px; }
.guild-avatar.lg { width: 64px; height: 64px; border-radius: 18px; font-size: 20px; }
.guild-avatar.xs { width: 24px; height: 24px; border-radius: 7px; font-size: 9.5px; }
.topbar-guild { position: relative; min-width: 0; display: flex; }
.topbar-guild .server-menu { left: 0; right: auto; width: 300px; top: calc(100% + 8px); max-height: min(420px, calc(100vh - 70px)); }
.server-menu .grow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-sep { height: 1px; background: var(--border-default); margin: 6px 4px; }
.guild-avatar.xl { width: 84px; height: 84px; border-radius: 24px; font-size: 26px; }
.nav { flex: 1; overflow-y: auto; padding: 6px 14px 24px; scrollbar-width: thin; scrollbar-color: #3d4a5c transparent; }
.nav-search { position: relative; margin: 4px 0 12px; }
.nav-search input { width: 100%; height: 38px; border-radius: var(--radius-md); background: var(--clr-surface-dark); border: 1px solid var(--border-subtle); padding: 0 34px 0 34px; font-size: 14px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.nav-search input::placeholder { color: var(--text-tertiary); }
.nav-search input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-ring-soft); }
.nav-search input::-webkit-search-cancel-button {
-webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .7;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238596ad' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/14px no-repeat;
}
.nav-search input::-webkit-search-cancel-button:hover { opacity: 1; }
.nav-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }
.nav-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 20px; min-width: 20px; display: grid; place-items: center; padding: 0 5px; font-size: 11.5px; color: var(--text-tertiary); background: var(--clr-canvas); border: 1px solid var(--border-default); border-radius: 5px; pointer-events: none; }
.nav-empty { padding: 18px 12px; color: var(--text-tertiary); font-size: 13.5px; text-align: center; line-height: 1.5; }
.nav-empty strong { color: var(--text-secondary); font-weight: 600; word-break: break-word; }
.nav-group { margin-top: 16px; }
.nav-group:first-child { margin-top: 0; }
/* Section headers (§4.4 sidebar section): uppercase .77rem / 600 at 50% opacity */
.nav-heading { font-size: 0.77rem; font-weight: 600; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); padding: 0 12px 6px; }
.nav-row { position: relative; }
.nav-link {
display: flex; align-items: center; gap: 11px; height: 43px; padding: 0 12px; border-radius: var(--radius-md);
color: var(--text-secondary); font-size: 15px; font-weight: 500; text-decoration: none !important; position: relative;
transition: background-color 150ms ease, color 150ms ease;
}
.nav-link .icon { color: var(--text-tertiary); transition: color 150ms ease; }
.nav-link:hover { background: var(--clr-card-hover); color: var(--text-primary); }
.nav-link.active { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--clr-primary); }
.nav-link.active .icon { color: var(--clr-primary); }
.nav-link .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-row.has-switch .nav-link { padding-right: 62px; }
.nav-row > .switch-sapphire { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.nav-sub .nav-link { padding-left: 40px; height: 38px; font-size: 14px; }
.nav-sub .nav-link.active::before { left: 28px; }
.nav-fold { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font: inherit; }
.nav-fold .chevron-icon { transition: transform 200ms ease, color 150ms ease; }
.nav-fold[aria-expanded="true"] .chevron-icon { transform: rotate(90deg); }
/* status light kept for older markup; the sidebar now shows inline switches */
.led { width: 7px; height: 7px; border-radius: 50%; background: #3d4a5c; flex-shrink: 0; transition: background .2s, box-shadow .2s; }
.led.on { background: var(--clr-success); box-shadow: 0 0 0 3px var(--mint-soft); }
.sidebar-foot { border-top: 1px solid var(--border-subtle); padding: 8px 14px; position: relative; }
.sidebar-foot .nav-link { height: 38px; font-size: 14px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--clr-input-bg); flex-shrink: 0; }
.avatar-initial { display: inline-grid; place-items: center; color: var(--text-secondary); font-weight: 700; font-size: 12.5px; }
.user-btn { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 10px 0 3px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: rgba(255, 255, 255, .05); cursor: pointer; text-align: left; max-width: 220px; transition: background-color 150ms ease, border-color 150ms ease; }
.user-btn:hover, .user-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
.user-btn .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.user-btn .who .name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn .who .sub { display: none; }
.topbar-user { position: relative; }
.topbar-user .user-menu { left: auto; right: 0; width: 240px; top: calc(100% + 8px); }
.picker-opt.danger { color: var(--clr-danger-hover); }
.picker-opt.danger .icon { color: var(--clr-danger-hover); }
.picker-opt.danger:hover { background: var(--rose-soft); color: var(--clr-danger-hover); }
.picker-list form { margin: 0; }
.main { min-width: 0; margin-left: var(--sidebar-width); padding-top: var(--topbar-height); display: flex; flex-direction: column; }
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--topbar-height);
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
padding: 0 14px; background: var(--clr-surface-dark); border-bottom: 1px solid var(--border-subtle);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-right { justify-content: flex-end; }
/* Breadcrumb: Guild › Module › Sub-page, chevrons at .65em, non-final crumbs are links */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-tertiary); min-width: 0; max-width: min(56vw, 640px); }
.crumbs a { color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; transition: color 150ms ease; }
.crumbs a:hover { color: var(--text-primary); text-decoration: none; }
.crumbs .icon { color: var(--text-tertiary); width: .65em; height: .65em; min-width: 9px; min-height: 9px; opacity: .8; }
.crumbs .current { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 0; max-width: 100%; }
.help-btn {
width: 45px; height: 45px; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0;
border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); color: var(--text-secondary); cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.help-btn:hover { background: rgba(255, 255, 255, .09); color: #fff; border-color: rgba(255, 255, 255, .14); }
.topbar .spacer { flex: 1; }
.menu-btn { display: none; }
.content { width: 100%; max-width: calc(var(--content-max-width) + 48px); margin: 0 auto; padding: 32px 24px 140px; animation: page-fade 200ms var(--ease-out), page-rise 200ms var(--ease-spring); }
/* ---------------------------------------------------------------- page header */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.page-head .glyph {
width: 48px; height: 48px; border-radius: var(--radius-lg); display: grid; place-items: center; flex-shrink: 0;
background: var(--clr-primary-soft); color: var(--clr-primary);
}
.page-head.is-on .glyph { color: var(--clr-success); background: rgba(34, 197, 94, .12); }
.page-head .titles { flex: 1; min-width: 0; }
.page-head .title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.page-head .head-crumb { color: var(--text-tertiary); text-decoration: none !important; transition: color 150ms ease; }
.page-head .head-crumb:hover { color: var(--text-primary); }
.page-head .head-sep { color: var(--text-tertiary); width: .65em; height: .65em; }
.hub-tools { display: flex; justify-content: flex-end; margin: -8px 0 10px; }
.page-head h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head p { color: var(--text-secondary); margin-top: 4px; max-width: 64ch; }
.page-head .actions { display: flex; align-items: center; gap: 10px; }
.page-head .power { display: inline-flex; align-items: center; gap: 10px; }
.state-label { font-size: 13px; font-weight: 600; color: var(--text-tertiary); min-width: 22px; text-align: right; }
.state-label.on { color: var(--clr-success); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; background: var(--clr-input-bg); color: var(--text-secondary); font-family: var(--font-ui); letter-spacing: 0; }
.badge.mint { background: var(--mint-soft); color: var(--clr-success); }
.badge.iris { background: var(--clr-primary-soft); color: #6cb6ff; }
.badge.amber { background: var(--amber-soft); color: var(--clr-warning); }
.badge.rose { background: var(--rose-soft); color: var(--clr-danger-hover); }
.nav-link .nav-count { flex-shrink: 0; height: 19px; padding: 0 7px; background: var(--clr-danger); color: #fff; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin: -8px 0 26px; overflow-x: auto; }
.tab { padding: 10px 14px; color: var(--text-tertiary); font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none !important; transition: color 150ms ease, border-color 150ms ease; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--text-primary); border-color: var(--clr-primary); }
.tab .tab-count { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 4px; border-radius: 9px; background: #333e4c; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: 1px; }
/* ---------------------------------------------------------------- settings document */
.doc { background: var(--clr-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.doc + .doc { margin-top: 18px; }
.sec { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding: 26px 28px; }
.sec + .sec { border-top: 1px solid var(--line-soft); }
.sec-rail h3 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 500; line-height: 1.3; }
.sec-rail h3 .icon { color: var(--muted); }
.sec-rail p { color: var(--text-secondary); font-size: 13.5px; margin-top: 6px; line-height: 1.5; }
.sec-body { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; align-content: start; }
.sec.stack { grid-template-columns: 1fr; gap: 16px; }
.fld { grid-column: span 6; min-width: 0; }
.fld.half { grid-column: span 3; }
.fld.third { grid-column: span 2; }
.fld > label, .fld-label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 7px; color: var(--text); }
.fld-help { color: var(--text-tertiary); font-size: 13px; margin-top: 6px; line-height: 1.45; }
.fld-error { color: var(--rose); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
.fld-note { color: var(--amber); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }
/* n/max under short capped text fields (VQ-BUG-004): quiet until the cap, then danger red. */
.fld-count { color: var(--text-tertiary); font-size: 12.5px; margin-top: 5px; line-height: 1.4; text-align: right; font-variant-numeric: tabular-nums; }
.fld-count.full { color: var(--clr-danger); }
/* show_if reveals (UX-BUG-10): 150 ms fade + 4px slide; reduced motion shows them at once (see the media query). */
.fld-enter { transition: opacity 150ms var(--ease-smooth), transform 150ms var(--ease-smooth); }
.fld-enter-from { opacity: 0; transform: translateY(-4px); }
.fld-enter-to { opacity: 1; transform: none; }
.input.invalid, .input.invalid:focus { border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft); }
/* MAR-4235: a focused invalid field used to draw exactly what an unfocused one drew. The rose border stays (the field
still reads invalid) and the ring in the lighter rose says focused, at >=3:1 against both adjacent colours. */
.input.invalid:focus { outline: 2px solid var(--focus-ring-invalid); outline-offset: 2px; }
.fld-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.fld-row .fld-text { min-width: 0; }
.fld-row .fld-label { margin-bottom: 2px; }
.fld-row .fld-help { margin-top: 0; }
.info-note {
display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px;
background: var(--clr-card-bg); border: 1px solid var(--border-subtle); color: var(--text-2); font-size: 14px;
}
.info-note .icon { color: var(--sky); margin-top: 1px; }
.info-note .info-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.info-note .info-links .icon { color: currentColor; margin: 0; }
.info-note.warn { background: var(--amber-soft); border-color: rgba(255, 192, 97, .25); }
.info-note.warn .icon { color: var(--amber); }
.info-note.danger { background: var(--rose-soft); border-color: rgba(255, 107, 127, .25); }
.info-note.danger .icon { color: var(--rose); }
/* inputs */
.input, .select, .textarea {
width: 100%; min-height: 40px; padding: 9px 12px; border-radius: var(--radius-md);
background: var(--clr-input-bg); border: 1px solid var(--border-strong); color: var(--text); font-size: 15px;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: #46546a; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-ring-soft); }
.textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238596ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; cursor: pointer; }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .addon { display: flex; align-items: center; padding: 0 12px; background: var(--ink-2); border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.duration-input { max-width: 340px; }
.input-group .select.addon-select { width: auto; border-radius: 0 var(--r-md) var(--r-md) 0; border-left: 0; background-color: var(--ink-2); }
/* MAR-4616 (MAR-3773 r3, QA item 1): the controls of a group share one border -- `.addon` and `.addon-select` have
`border-left: 0` and `.input-group` has no gap -- so the 2px ring at a 2px offset reaches 4px past the focused
control into its neighbour's box, and the neighbour, painted after it, covers that part of the ring (QA measured 18
covered ring sides over Verification, Welcome, Tickets and Logging, and the Welcome "Delete after" select touching
the number input with no gap at all). Every control of a group therefore draws the same 2px ring *inside* its own
box, 4px in, so 2px of the control's own background separates it from the neighbour's box: the ring stays inside
the group, it never touches the neighbour and nothing is left to cover it. The soft glow of §4.2 is dropped here
because a 3px spread would cross the same seam the ring used to cross. The colour is the one §4.2 already names, so
the >=3:1 against the field and the surface stands (5.06:1 / 6.26:1). */
.input-group .input:focus, .input-group .select:focus, .input-group .textarea:focus,
.input-group .addon:focus-visible { outline-offset: -4px; box-shadow: none; }
input[type=number].input { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { opacity: .35; }
/* switch (older markup): same geometry and physics as .switch-sapphire (§5.2.4) */
.switch { position: relative; width: 45px; height: 24px; flex-shrink: 0; display: inline-block; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.10); transition: background-color 200ms var(--ease-smooth); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: transform 200ms var(--ease-spring), width 150ms ease; }
.switch input:checked + .track { background: var(--clr-success); }
.switch input:checked + .track::after { transform: translateX(21px); }
.switch input:active + .track::after { width: 21px; }
.switch input:checked:active + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.switch input:disabled { cursor: default; }
.switch input:disabled + .track { opacity: .55; }
/* segmented control (small option sets) */
.segmented { display: inline-flex; background: var(--clr-surface-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3px; gap: 2px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; color: var(--text-2); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.segmented button:hover { color: var(--text); }
.segmented button.on { background: #394556; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
/* D8: on a phone every option of a segmented group takes the full width of the group (one row each), so a group of
long labels never wraps into a ragged two-line pill. .am-seg-inline is left in its row: it sits inside an automod
sentence ("Trigger at [1] [spam] [in one message | over time]") and a full-width block there breaks the sentence. */
@media (max-width: 640px) {
.segmented:not(.am-seg-inline) { display: flex; flex-direction: column; }
.segmented button { min-height: 44px; }
}
/* multiple choice (multiselect fields): each option is a chip that toggles */
.choice-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-chips button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-0); color: var(--text-2); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.choice-chips button:hover { border-color: var(--ink-4); color: var(--text); }
.choice-chips button .icon { color: var(--muted); }
.choice-chips button.on { background: var(--clr-primary-soft); border-color: rgba(0, 132, 255, .55); color: #fff; }
.choice-chips button.on .icon { color: var(--iris); }
/* chips + pickers */
.picker { position: relative; }
.picker-control {
min-height: 40px; width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
padding: 6px 34px 6px 8px; border-radius: var(--radius-md); background: var(--clr-input-bg); border: 1px solid var(--border-strong);
cursor: pointer; text-align: left; position: relative; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.picker-control:hover { border-color: #46546a; }
.picker.open .picker-control { border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-soft); }
.picker-control .caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.picker-control .placeholder { color: var(--text-tertiary); padding-left: 4px; font-size: 14px; }
.picker-single { display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 14px; min-width: 0; }
.picker-single span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip {
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 9px; border-radius: 7px;
background: var(--ink-2); border: 1px solid var(--line); font-size: 13px; font-weight: 500; max-width: 100%;
}
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { border: 0; background: transparent; color: var(--muted); width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.chip button:hover { background: var(--ink-4); color: var(--text); }
.role-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; background: #99aab5; }
.ch-ic { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0; color: var(--muted); }
.ch-ic .icon { width: 14px; height: 14px; }
.chip .ch-ic { width: 14px; margin-right: -2px; }
.picker-menu {
position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; display: flex; flex-direction: column;
background: var(--clr-surface-darker); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden;
animation: pop-fade 150ms var(--ease-out);
}
.picker-menu.up { top: auto; bottom: calc(100% + 6px); }
.picker-search { padding: 8px; border-bottom: 1px solid var(--line); }
.picker-search input { width: 100%; height: 34px; border-radius: var(--radius-sm); background: var(--clr-input-bg); border: 1px solid var(--border-strong); padding: 0 10px; font-size: 14px; }
.picker-search input:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); }
.picker-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.picker-group { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 8px 4px; }
.picker-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font-size: 14px; text-align: left; color: var(--text-2); text-decoration: none !important; }
.picker-opt:hover, .picker-opt.hl { background: rgba(255, 255, 255, .06); color: var(--text); }
.picker-opt.sel { color: #fff; }
.picker-opt .check { margin-left: auto; color: var(--iris); }
.picker-opt .icon { color: var(--muted); }
.picker-opt .warn { margin-left: auto; font-size: 11.5px; color: var(--amber); }
.picker-empty { padding: 14px; color: var(--muted); font-size: 13.5px; text-align: center; }
/* emoji picker */
.emoji-picker { max-width: 320px; }
.emoji-picker.fill { max-width: none; }
.emoji-picker .emoji-now { display: inline-flex; align-items: center; min-width: 0; max-width: 64px; overflow: hidden; }
.emoji-picker .emoji-now img { width: 20px; height: 20px; }
.picker-menu.emoji-menu { padding: 10px; max-height: 280px; overflow-y: auto; display: block; min-width: 264px; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 2px; }
/* A custom emoji whose image can't load (VQ-BUG-001): its :name: as a neutral chip on the same tile. */
.emoji-chip { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border: 1px solid var(--border-default); border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--text-tertiary); }
.emoji-grid .btn.has-emoji-chip { width: auto; padding: 0 4px; }
.emoji-picker .emoji-now .emoji-chip { max-width: 64px; padding: 2px 5px; }
/* tags input */
.tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; min-height: 40px; border-radius: var(--radius-md); background: var(--clr-input-bg); border: 1px solid var(--border-strong); cursor: text; }
.tags:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--focus-ring-soft); }
.tags input { flex: 1; min-width: 120px; border: 0; background: transparent; outline: none; font-size: 14px; padding: 3px 4px; }
/* color input */
.color-input { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; container-type: inline-size; }
.color-swatch { width: 40px; height: 40px; border-radius: var(--r-md); border: 1px solid var(--line); position: relative; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.color-swatch input { position: absolute; inset: -8px; width: 60px; height: 60px; opacity: 0; cursor: pointer; }
.swatches { display: flex; gap: 5px; flex-wrap: wrap; }
/* Narrow colour fields (half width, phones): the swatches get their own row instead of wrapping unevenly. */
@container (max-width: 480px) { .color-input .swatches { flex-basis: 100%; } }
.swatches button { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); cursor: pointer; padding: 0; }
/* list editor (repeating items) */
.list { display: flex; flex-direction: column; gap: 10px; }
.list-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--clr-card-bg); }
.list-item-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; cursor: pointer; user-select: none; }
.list-item-head .title { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-head .title .muted { font-weight: 500; }
.list-item-head .chev { color: var(--muted); transition: transform 200ms ease; }
.list-item-head .li-actions { display: flex; gap: 2px; flex-shrink: 0; }
.list-item-head .li-off { flex-shrink: 0; }
.list-item.is-off > .list-item-head .title { color: var(--text-2); }
.li-more { display: none; position: relative; }
.li-menu { left: auto; right: 0; top: calc(100% + 4px); width: 180px; max-height: none; cursor: default; }
.picker-opt[disabled] { opacity: .45; pointer-events: none; }
.list-item.open .list-item-head .chev { transform: rotate(90deg); }
.list-item-body { padding: 4px 16px 18px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.list-empty { border: var(--border-dashed); border-radius: var(--radius-lg); padding: 22px; text-align: center; color: var(--muted); font-size: 14px; }
.list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* ---------------------------------------------------------------- message editor + Discord preview */
/* The editor is a size container so the preview can stack when the editor itself is narrow (a nested custom-command
row), not only when the window is. The grid lives on .msg-layout because a container can't query its own size.
No overflow:hidden anywhere here, so emoji/variable menus can open past the edges. */
.msg-editor { container-type: inline-size; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-0); }
.msg-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(0, 604px); gap: 0; align-items: start; }
.msg-edit-pane { padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Side variant: the frame is the right-hand cell and stays in view under the topbar while the controls scroll. */
.msg-layout > .dcf { position: sticky; top: calc(var(--topbar-height) + 16px); align-self: start; max-height: calc(100vh - 162px); display: flex; flex-direction: column; }
.msg-layout > .dcf > .dcf-body { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 162px - 40px - 48px); }
.msg-editor.is-stacked .msg-layout { grid-template-columns: minmax(0, 1fr); }
.msg-editor.is-stacked .msg-layout > .dcf { position: static; max-height: none; align-self: stretch; }
.msg-editor.is-stacked .msg-layout > .dcf > .dcf-body { max-height: none; overflow-y: visible; }
@container (max-width: 899px) {
.msg-layout { grid-template-columns: minmax(0, 1fr); }
.msg-layout > .dcf { position: static; max-height: none; align-self: stretch; }
.msg-layout > .dcf > .dcf-body { max-height: none; overflow-y: visible; }
}
.msg-limit { font-size: 12.5px; line-height: 1.45; color: var(--rose); }
.msg-limit.muted { color: var(--muted); }
.msg-vars-unknown { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; color: var(--amber); }
.msg-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.msg-toolbar .grow { flex: 1; }
.embed-card { border: 1px solid var(--line); border-radius: 10px; background: var(--ink-1); position: relative; }
.embed-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 10px 0 0 10px; background: var(--embed-color, var(--iris)); }
.embed-card-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 16px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.embed-card-head .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.embed-card-body { padding: 4px 12px 14px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.embed-card-body .full { grid-column: 1 / -1; }
.embed-card-body label { font-size: 12px; font-weight: 600; color: var(--muted); display: block; margin-bottom: 4px; }
.embed-card-body .input, .embed-card-body .textarea { min-height: 34px; padding: 7px 10px; font-size: 13.5px; }
.embed-card-body .textarea { min-height: 70px; }
.embed-fields { display: flex; flex-direction: column; gap: 8px; }
.embed-field { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--ink-0); }
.embed-field-top { display: flex; align-items: center; gap: 2px; }
.embed-field-top .input { flex: 1; min-width: 0; margin-right: 6px; }
.embed-inline { display: flex; align-items: center; gap: 6px; margin: 0 6px 0 0 !important; white-space: nowrap; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.embed-card-body .textarea.embed-field-value { min-height: 34px; resize: none; }
.link-btn-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px auto; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--ink-0); }
.link-btn-row .lb-url { grid-column: 1 / -1; grid-row: 2; }
.emoji-picker.align-end .emoji-menu { left: auto; right: 0; }
.msg-tabs { display: none; }
.var-menu { position: relative; }
.var-pop { position: absolute; z-index: 70; top: calc(100% + 6px); right: 0; width: 320px; max-height: 340px; overflow-y: auto; background: var(--ink-2); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.var-pop .grp { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 8px 8px 4px; text-transform: capitalize; }
.var-pop button { display: flex; width: 100%; gap: 10px; justify-content: space-between; align-items: baseline; padding: 6px 8px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; color: var(--text-2); font-size: 13px; }
.var-pop button:hover { background: var(--ink-3); color: var(--text); }
.var-pop button code { background: transparent; border: 0; padding: 0; color: #b7adff; }
.var-pop button span { color: var(--muted); font-size: 12px; text-align: right; }
.char-count { font-size: 11.5px; color: var(--muted); text-align: right; }
.char-count.over { color: var(--rose); }
/* ---------------------------------------------------------------- Discord frame (.dcf) and message (.dc) */
/* Discord client, dark, build 622805 (MAR-395 §B.1). Scoped to the frame and the message mock, so none of these
colours can leak into the dashboard; dashboard tokens (--clr-primary, --clr-success) aren't used in here.
.cb-preview-col (MAR-667 ui §2.3, WP6) holds the Custom bot page's profile card and the 390 preview, outside any
.dcf, so the scope selector includes it: the card reads exactly the tokens the frame does. */
.dcf, .dc, .cb-preview-col {
--dc-chat-background: #313338;
--dc-embed-background: #393a41;
--dc-surface-higher: #3c3d45;
--dc-text-default: #f3f3f4;
--dc-text-strong: #ffffff;
--dc-text-subtle: #c5c6ca;
--dc-text-muted: #abacb2;
--dc-chat-text-muted: #9d9ea5;
--dc-text-link: #76aff6;
--dc-text-code: #ffffff;
--dc-background-code: rgba(88, 101, 242, .08);
--dc-border-subtle: rgba(151, 151, 159, .12);
--dc-border-normal: rgba(151, 151, 159, .20);
--dc-mention-fg: #cdd7ff;
--dc-mention-bg: rgba(88, 101, 242, .24);
--dc-spine: #595a63;
--dc-spoiler: #7d7e87;
--dc-spoiler-hover: #9d9ea5;
--dc-spoiler-revealed: rgba(151, 151, 159, .12);
--dc-brand: #5865f2;
--dc-btn-primary: #5865f2; --dc-btn-primary-hover: #4452bb; --dc-btn-primary-active: #3a48a3;
--dc-btn-secondary: rgba(151, 151, 159, .12); --dc-btn-secondary-hover: rgba(151, 151, 159, .16); --dc-btn-secondary-active: rgba(151, 151, 159, .20);
--dc-btn-success: #008545; --dc-btn-success-hover: #006c37;
--dc-btn-danger: #d22d39; --dc-btn-danger-hover: #a9232e;
--dc-btn-border: rgba(255, 255, 255, .08);
--dc-input-bg: rgba(0, 0, 0, .08);
--dc-input-border: rgba(151, 151, 159, .20);
--dc-input-border-active: #5865f2;
--dc-input-placeholder: #a4a5ab;
--dc-reaction-bg: rgba(151, 151, 159, .12); --dc-reaction-bg-hover: rgba(151, 151, 159, .16);
--dc-reaction-me-bg: rgba(88, 101, 242, .24); --dc-reaction-me-border: #5865f2;
--dc-reaction-text: #c5c6ca; --dc-reaction-me-text: #dfe4ff;
--dc-ephemeral-bg: rgba(88, 101, 242, .05);
--dc-embed-default: rgba(151, 151, 159, .20);
/* frame chrome (ours, visual-spec §2) */
--dcf-bar: #1e1f22;
--dcf-border: #1e1f22;
}
/* Frame: dashboard bar, Discord channel header, message area. Variants: side | stacked | feature | modal | compact. */
.dcf { min-width: 0; background: var(--dc-chat-background); border: 1px solid var(--dcf-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); overflow: visible; }
.dcf-feature { width: 100%; max-width: 720px; }
/* A feature preview whose first step is a pop-up (forms) keeps the feature width on every step. */
.cf-preview .dcf-modal { width: 100%; max-width: 720px; }
.dcf-bar { min-height: 40px; padding: 0 8px 0 14px; display: flex; align-items: center; gap: 8px; background: var(--dcf-bar); border-radius: 7px 7px 0 0; font-family: var(--font-ui); }
.dcf-label { font-size: 12px; font-weight: 600; line-height: 16px; color: var(--dc-text-strong); flex-shrink: 0; }
.dcf-note { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--dc-text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcf-controls { margin-left: auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.dcf-seg { display: inline-flex; height: 28px; padding: 2px; border-radius: 6px; background: rgba(0, 0, 0, .25); flex-shrink: 0; }
.dcf-seg button { height: 24px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: var(--dc-text-muted); font: 600 12px/24px var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color 120ms var(--ease-smooth), color 120ms var(--ease-smooth); }
.dcf-seg button:hover { background: rgba(151, 151, 159, .12); color: var(--dc-text-default); }
.dcf-seg button[aria-checked="true"], .dcf-seg button[aria-selected="true"] { background: rgba(151, 151, 159, .24); color: var(--dc-text-strong); }
.dcf-seg button:active { background: rgba(151, 151, 159, .32); }
.dcf-seg button:focus-visible, .dcf-link:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 1px; }
.dcf-link { padding: 0; border: 0; background: none; color: var(--dc-text-link); font: 600 12px/16px var(--font-ui); cursor: pointer; white-space: nowrap; }
.dcf-link:hover { text-decoration: underline; }
.dcf-channel { height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 8px; background: var(--dc-chat-background); border-bottom: 1px solid var(--dc-border-subtle); font-family: var(--dc-font); min-width: 0; }
.dcf-channel svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--dc-chat-text-muted); }
.dcf-channel-name { font-size: 16px; font-weight: 600; line-height: 20px; color: var(--dc-text-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcf-channel-name.is-none { color: var(--dc-chat-text-muted); font-weight: 400; }
.dcf-body { position: relative; min-height: 120px; padding: 16px 16px 20px 0; background: var(--dc-chat-background); border-radius: 0 0 7px 7px; font-family: var(--dc-font); }
.dcf-body::-webkit-scrollbar { width: 8px; }
.dcf-body::-webkit-scrollbar-thumb { background: rgba(151, 151, 159, .24); border-radius: 4px; }
.dcf-body::-webkit-scrollbar-track { background: transparent; }
.dcf-body > .dc { padding: 0; background: transparent; }
.dcf-caption { padding: 0 0 8px 16px; font: 400 12px/16px var(--font-ui); color: var(--dc-text-muted); }
/* Caption + state switch (MAR-616 F1): one row with the caption's 16px inset; the children carry the 8px bottom space so a
row whose children are all hidden takes no height, and a seg that doesn't fit drops under the caption at the same inset. */
.dcf-capline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding-left: 16px; min-width: 0; }
.dcf-capline > .dcf-caption { padding: 0; margin-bottom: 8px; min-width: 0; }
.dcf-capline > .dcf-seg { margin-bottom: 8px; }
/* A second message in the same frame (dc_follow); with its own channel header when the bot posts it elsewhere. */
.dcf-follow { margin-top: 17px; }
.dcf-follow > .dc { padding: 0; background: transparent; }
.dcf-follow.has-channel { margin-top: 20px; }
.dcf-follow > .dcf-channel { margin: 0 -16px 16px 0; border-top: 1px solid var(--dc-border-subtle); }
.dcf-foot { padding: 8px 0 0 16px; font: 400 12px/16px var(--font-ui); color: var(--dc-text-muted); }
.dcf-compact { box-shadow: none; }
.dcf-compact > .dcf-body { border-radius: 7px; min-height: 0; }
.dcf-modal > .dcf-body { display: grid; place-items: center; padding: 24px 16px; background: rgba(0, 0, 0, .7); }
.dcf-modal > .dcf-body > .dcf-caption { justify-self: stretch; padding-left: 0; }
/* Discord modal (visual-spec §3.9): verification math question, ticket questions, forms. */
.dc-modal { width: min(440px, calc(100% - 32px)); background: var(--dc-embed-background); border: 1px solid var(--dc-border-subtle); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-family: var(--dc-font); color: var(--dc-text-default); }
.dc-modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 16px 4px; font-size: 20px; font-weight: 700; line-height: 24px; color: var(--dc-text-strong); min-width: 0; }
.dc-modal-h img { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; }
.dc-modal-h span { min-width: 0; overflow-wrap: anywhere; }
.dc-modal-q { padding: 12px 16px 0; }
.dc-modal-q label { display: block; font-size: 16px; font-weight: 500; color: var(--dc-text-default); margin-bottom: 8px; }
.dc-modal-q .req { color: var(--dc-btn-danger); margin-left: 4px; }
.dc-modal-in { min-height: 40px; border-radius: 8px; background: var(--dc-input-bg); border: 1px solid var(--dc-input-border); color: var(--dc-input-placeholder); display: flex; align-items: center; padding: 0 12px; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dc-modal-in.long { min-height: 72px; align-items: flex-start; padding-top: 9px; white-space: normal; }
.dc-modal-f { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 16px; }
.dc-modal-cancel { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--dc-text-strong); }
/* Message row (visual-spec §3.2) */
.dc {
font-family: var(--dc-font); background: var(--dc-chat-background); color: var(--dc-text-default); font-size: 16px; line-height: 1.375; padding: 16px 16px 20px 0; }
.dc-msg { display: flex; gap: 16px; padding-left: 16px; position: relative; }
.dc-msg + .dc-msg { margin-top: 17px; }
.dc-msg.is-ephemeral { background: var(--dc-ephemeral-bg); box-shadow: inset 2px 0 0 var(--dc-brand); padding-top: 2px; padding-bottom: 2px; }
.dc-avatar { width: 40px; height: 40px; margin-top: 2px; border-radius: 50%; flex-shrink: 0; background: var(--dc-brand); overflow: hidden; display: grid; place-items: center; }
.dc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dc-body { min-width: 0; flex: 1; }
.dc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0; line-height: 22px; }
.dc-name { font-weight: 500; color: var(--dc-text-strong); font-size: 16px; margin-right: 4px; }
.dc-app { display: inline-flex; align-items: center; gap: 2px; height: 15px; padding: 0 4.4px; margin-top: .2em; margin-right: 4px; border-radius: 4px; background: var(--dc-brand); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-transform: uppercase; }
.dc-app svg { width: 11px; height: 11px; }
.dc-time { color: var(--dc-chat-text-muted); font-size: 12px; line-height: 22px; }
.dc-content { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 22px; }
.dc-content.empty { color: var(--dc-text-muted); font-style: normal; font-size: 16px; }
.dc-content strong, .dc-embed strong { font-weight: 700; }
.dc-content em, .dc-embed em { font-style: italic; }
.dc-content u, .dc-embed u { text-decoration: underline; }
.dc-content s, .dc-embed s { text-decoration: line-through; }
/* Markdown (visual-spec §3.3) */
.dc code { background: var(--dc-background-code); border: 1px solid var(--dc-border-normal); border-radius: 4px; padding: 0 .2em; font-size: 85%; color: var(--dc-text-code); font-family: var(--dc-font-code); }
.dc pre { background: var(--dc-background-code); border: 1px solid var(--dc-border-normal); border-radius: 4px; padding: 7px; margin: 6px 0 0; max-width: 90%; white-space: pre-wrap; font-size: 12px; line-height: 16px; font-family: var(--dc-font-code); color: var(--dc-text-default); }
.dc pre code { border: 0; padding: 0; background: transparent; font-size: inherit; }
.dc a { color: var(--dc-text-link); text-decoration: none; }
.dc a:hover { text-decoration: underline; }
.dc-mention { background: var(--dc-mention-bg); color: var(--dc-mention-fg); border-radius: 3px; padding: 0 2px; font-weight: 500; }
.dc-quote { display: flex; margin: 4px 0; max-width: 90%; color: var(--dc-text-subtle); }
.dc-quote::before { content: ""; width: 4px; border-radius: 4px; background: var(--dc-spine); flex-shrink: 0; }
.dc-quote > div { padding: 0 8px 0 12px; min-width: 0; }
.dc-h1, .dc-h2, .dc-h3 { font-weight: 700; line-height: 1.375em; color: var(--dc-text-strong); margin: 16px 0 8px; }
.dc-h1 { font-size: 24px; } .dc-h2 { font-size: 20px; } .dc-h3 { font-size: 16px; }
.dc-content > .dc-h1:first-child, .dc-content > .dc-h2:first-child, .dc-content > .dc-h3:first-child,
.e-desc > .dc-h1:first-child, .e-desc > .dc-h2:first-child, .e-desc > .dc-h3:first-child { margin-top: 8px; }
.dc-small { font-size: 14px; line-height: 19.25px; color: var(--dc-text-subtle); }
.dc ul, .dc ol { margin: 4px 0 0 16px; padding: 0; white-space: normal; }
.dc ul { list-style: disc outside; } .dc ul ul { list-style: circle outside; } .dc ul ul ul { list-style: square outside; }
.dc ol { list-style: decimal outside; }
.dc li { margin-bottom: 4px; }
.dc-ts { background: rgba(151, 151, 159, .12); border-radius: 3px; padding: 0 2px; }
.dc-spoiler { background: var(--dc-spoiler); color: transparent; border-radius: 4px; cursor: pointer; }
.dc-spoiler:hover { background: var(--dc-spoiler-hover); }
.dc-spoiler.revealed { background: var(--dc-spoiler-revealed); color: inherit; cursor: auto; }
.dc-spoiler:not(.revealed) * { visibility: hidden; }
.dc-var-unknown { text-decoration: underline dotted var(--amber); text-underline-offset: 3px; }
/* Emoji: 22px in content, 48px when a message is only emoji, 18px in embeds, 16px in buttons. */
.dc-emo, .dc img.dc-emoji { display: inline-block; width: 1.375em; height: 1.375em; line-height: 1.375em; text-align: center; vertical-align: -.3em; object-fit: contain; }
.dc-content.dc-jumbo .dc-emo, .dc-content.dc-jumbo img.dc-emoji { width: 48px; height: 48px; line-height: 48px; font-size: 40px; vertical-align: middle; }
.dc-embed .dc-emo, .dc-embed img.dc-emoji { width: 18px; height: 18px; line-height: 18px; font-size: 15px; vertical-align: -.2em; }
.dc-button .dc-emo, .dc-button img.dc-emoji { width: 16px; height: 16px; line-height: 16px; font-size: 14px; vertical-align: middle; }
/* Embed (visual-spec §3.4). The left bar colour is set inline; --dc-embed-default is only the fallback. */
.dc-embed {
margin-top: 8px; max-width: 516px; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--dc-embed-background);
border: 1px solid var(--dc-border-subtle); border-left: 4px solid var(--dc-embed-default); border-radius: 4px;
padding: 2px 16px 16px 12px; font-size: 14px; line-height: 18px; position: relative;
}
.dc-embed.has-thumb { grid-template-columns: minmax(0, 1fr) 80px; column-gap: 16px; }
.dc-embed .e-main { min-width: 0; grid-column: 1; }
.dc-embed .e-author { display: flex; align-items: center; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--dc-text-strong); }
.dc-embed .e-author img { width: 24px; height: 24px; border-radius: 50%; margin-right: 8px; }
.dc-embed .e-author a { color: var(--dc-text-strong); }
.dc-embed .e-author > span, .dc-embed .e-author > a { min-width: 0; overflow-wrap: break-word; }
.dc-embed .e-title { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 22px; color: var(--dc-text-strong); overflow-wrap: break-word; }
.dc-embed .e-title a { color: var(--dc-text-link); }
.dc-embed .e-desc { margin-top: 8px; font-size: 14px; line-height: 18px; white-space: pre-line; color: var(--dc-text-default); overflow-wrap: break-word; }
.dc-embed .e-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 8px; }
.dc-embed .e-field { grid-column: 1 / 13; min-width: 0; }
.dc-embed .e-field.inline { grid-column: span 4; }
.dc-embed .e-field-name { font-weight: 600; color: var(--dc-text-strong); margin-bottom: 2px; font-size: 14px; line-height: 18px; }
.dc-embed .e-field-value { white-space: pre-line; font-size: 14px; line-height: 18px; color: var(--dc-text-default); overflow-wrap: break-word; }
.dc-embed .e-thumb { grid-column: 2; grid-row: 1 / 8; margin-top: 8px; margin-left: 0; max-width: 80px; max-height: 80px; border-radius: 4px; object-fit: contain; justify-self: end; }
.dc-embed .e-image { grid-column: 1 / -1; margin-top: 16px; border-radius: 4px; max-width: min(100%, 400px); max-height: 300px; object-fit: contain; justify-self: start; }
.dc-embed .e-footer { grid-column: 1 / -1; display: flex; align-items: center; margin-top: 8px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dc-text-default); }
.dc-embed .e-footer img { width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; }
/* Buttons, selects and reactions (visual-spec §3.5, §3.7) */
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-width: 60px; max-width: 100%; padding: 2px 16px; border-radius: 8px; border: 1px solid var(--dc-btn-border);
font-size: 14px; font-weight: 500; line-height: 16px; color: #fff; background: var(--dc-btn-secondary); white-space: nowrap; flex-shrink: 0; transition: background-color 120ms var(--ease-smooth); }
.dc-button > * { flex-shrink: 0; }
/* An overlong label ends in "…" inside the button, and the button never grows past its action row (Discord). */
.dc-button > .dc-label { flex-shrink: 1; min-width: 0; overflow: clip; overflow-clip-margin: 2px; text-overflow: ellipsis; }
.dc-button:hover { background: var(--dc-btn-secondary-hover); }
.dc-button:active { background: var(--dc-btn-secondary-active); }
.dc-button.primary { background: var(--dc-btn-primary); }
.dc-button.primary:hover { background: var(--dc-btn-primary-hover); }
.dc-button.primary:active { background: var(--dc-btn-primary-active); }
.dc-button.success { background: var(--dc-btn-success); }
.dc-button.success:hover { background: var(--dc-btn-success-hover); }
.dc-button.danger { background: var(--dc-btn-danger); }
.dc-button.danger:hover { background: var(--dc-btn-danger-hover); }
.dc-button svg { width: 16px; height: 16px; }
.dc-button.is-disabled, .dc-select.is-disabled { opacity: .5; cursor: not-allowed; }
.dc-select { margin-top: 8px; max-width: 400px; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border-radius: 8px;
background: var(--dc-input-bg); color: var(--dc-input-placeholder); font-size: 16px; border: 1px solid var(--dc-input-border); }
.dc-select.open { border-color: var(--dc-input-border-active); }
/* A string select's popout (visual-spec §3.5): 5 options of 40px + 8px before it scrolls. */
.dc-select-wrap { position: relative; max-width: 400px; margin-top: 8px; }
.dc-select-wrap .dc-select { margin-top: 0; cursor: pointer; }
.dc-caret { display: inline-flex; color: var(--dc-text-subtle); transition: transform .15s; }
.dc-caret.is-open { transform: rotate(180deg); }
.dc-menu { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--dc-embed-background); border: 1px solid var(--dc-border-normal); border-radius: 8px; max-height: 208px; overflow-y: auto; padding: 4px 0; }
.dc-menu-opt { display: flex; gap: 8px; align-items: center; min-height: 40px; padding: 8px 12px; cursor: pointer; }
.dc-menu-opt:hover, .dc-menu-opt.picked { background: var(--dc-surface-higher); }
.dc-menu-opt .l { color: var(--dc-text-default); font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-menu-opt .d { color: var(--dc-text-subtle); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-menu-emoji { width: 22px; flex-shrink: 0; text-align: center; }
.dc-menu-emoji .dc-emo, .dc-menu-emoji img { width: 22px; height: 22px; }
.dc-menu-text { min-width: 0; }
.dc-reactions { display: flex; flex-wrap: wrap; margin-top: 4px; }
.dc-reaction { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 2px 6px; margin: 0 4px 4px 0; border-radius: 8px; background: var(--dc-reaction-bg); border: 1px solid transparent; font-size: 14px; font-weight: 600; color: var(--dc-reaction-text); }
.dc-reaction:hover { background: var(--dc-reaction-bg-hover); }
.dc-reaction.me { background: var(--dc-reaction-me-bg); border-color: var(--dc-reaction-me-border); color: var(--dc-reaction-me-text); }
/* Ephemeral footer (visual-spec §3.8) */
.dc-eph { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--dc-chat-text-muted); }
.dc-eph svg { width: 16px; height: 16px; }
.dc-eph a { color: var(--dc-text-link); cursor: pointer; }
.dc-eph a:hover { text-decoration: underline; }
/* Interaction header (visual-spec §3.8): "Mika used /userinfo" above the reply, with the L-shaped spine. */
.dc-msg.has-used { flex-wrap: wrap; row-gap: 0; }
.dc-used { flex: 0 0 100%; position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; margin-bottom: 2px; padding-left: 56px;
font-size: 14px; line-height: 18px; color: var(--dc-text-subtle); white-space: nowrap; overflow: hidden; }
.dc-used img { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.dc-used-name { color: var(--dc-text-strong); font-weight: 500; }
.dc-used-cmd { color: var(--dc-text-link); }
.dc-used-spine { position: absolute; left: 20px; top: 9px; width: 32px; height: 9px; border-left: 2px solid var(--dc-spine); border-top: 2px solid var(--dc-spine); border-top-left-radius: 6px; }
.dc-link-icon { display: inline-flex; }
/* A server-drawn image attached to the message (welcome card, visual-spec P17/P18) with its loading and error states. */
.dc-card { position: relative; aspect-ratio: 1100 / 500; overflow: hidden; background: rgba(151, 151, 159, .12); }
.dc-embed .e-image.dc-card { width: min(100%, 400px); }
.dc-attach.dc-card { width: min(100%, 550px); }
.dc-card img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s var(--ease); }
.dc-card.is-loading img { opacity: .55; }
.dc-card-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font-size: 14px; line-height: 18px; color: var(--dc-text-muted); background: rgba(0, 0, 0, .35); }
/* Components V2 (visual-spec §3.6, UNVERIFIED values) */
.dc-container { margin-top: 8px; max-width: 516px; background: var(--dc-embed-background); border: 1px solid var(--dc-border-subtle); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dc-container.has-accent { border-left-width: 4px; }
.dc-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.dc-section .dc-thumb { width: 85px; height: 85px; border-radius: 8px; object-fit: cover; }
.dc-sep { height: 8px; } .dc-sep.large { height: 16px; }
.dc-sep.divider { height: auto; margin: 4px 0; border-top: 1px solid var(--dc-border-normal); } .dc-sep.divider.large { margin: 8px 0; }
.dc-v2 > .dc-v2-part { margin-top: 8px; }
.dc-section-text { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-section > .dc-button { align-self: start; }
/* Media gallery: 1 item contained, 2 side by side, 3 = 1 large left + 2 stacked right, 4 = 2x2, 5-10 rows of 3 with
the last rows of 2 where the count needs it (spans set per item on a 6-column grid). */
.dc-gallery { display: grid; gap: 4px; border-radius: 8px; overflow: hidden; width: 100%; max-width: 516px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-gallery-item { position: relative; aspect-ratio: 1; min-width: 0; background: rgba(151, 151, 159, .12); }
.dc-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-gallery.n1 { grid-template-columns: minmax(0, 1fr); } .dc-gallery.n1 .dc-gallery-item { aspect-ratio: auto; max-height: 350px; } .dc-gallery.n1 img { max-height: 350px; object-fit: contain; }
.dc-gallery.n3 { grid-template-columns: 2fr 1fr; } .dc-gallery.n3 .dc-gallery-item:first-of-type { grid-row: 1 / 3; aspect-ratio: auto; }
.dc-gallery.many { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dc-gallery.many .dc-gallery-item { grid-column: span 2; } .dc-gallery.many .dc-gallery-item.wide { grid-column: span 3; aspect-ratio: 3 / 2; }
/* Components V2 spoilers and alt text (MAR-424 spec §6.5, visual-r2 F5 / F10 / F11). UNVERIFIED until measured in a
logged-in Discord client (G4). A spoiler blurs what it hides behind a centred pill that reveals it; the ALT badge sits
on gallery images that have alt text. */
.dc-container.is-spoiler, .dc-thumb-wrap.is-spoiler, .dc-gallery-item.is-spoiler { position: relative; overflow: hidden; }
.dc-container.is-spoiler > .dc-v2-part, .dc-thumb-wrap.is-spoiler > img, .dc-gallery-item.is-spoiler > img { filter: blur(44px); pointer-events: none; }
.dc-thumb-wrap { position: relative; width: 85px; height: 85px; border-radius: 8px; overflow: hidden; }
.dc-thumb-wrap > .dc-thumb { display: block; }
.dc-spoiler-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 24px; padding: 0 10px; border: 0; border-radius: 20px; background: rgba(0, 0, 0, .60); color: #fff; font: 600 12px/24px var(--font-ui); white-space: nowrap; cursor: pointer; z-index: 1; }
.dc-spoiler-pill:focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; }
.dc-gallery-alt { position: absolute; left: 6px; bottom: 6px; height: 20px; padding: 0 6px; border-radius: 4px; background: rgba(0, 0, 0, .70); color: #fff; font: 700 11px/20px var(--font-ui); pointer-events: none; }
.dc-file { display: flex; align-items: center; gap: 8px; height: 64px; max-width: 432px; margin-top: 8px; padding: 10px 12px; background: var(--dc-embed-background); border: 1px solid var(--dc-border-subtle); border-radius: 8px; }
.dc-file .n { color: var(--dc-text-link); font-size: 16px; } .dc-file .s { color: var(--dc-chat-text-muted); font-size: 12px; }
.dc-file svg { width: 24px; height: 30px; flex-shrink: 0; color: var(--dc-text-subtle); }
.dc-file-text { min-width: 0; line-height: 20px; }
.dc-file-text .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-attach { display: block; margin-top: 8px; border-radius: 8px; max-width: min(100%, 550px); max-height: 350px; object-fit: contain; background: rgba(151, 151, 159, .12); }
/* ---------------------------------------------------------------- dirty bar (§5.2.2, §7.2) */
/* Centred over the main column, bottom 24px, min(740px, 100vw - 340px) wide, 56px high, radius 10px.
.savebar is the older name; both get the same look. */
.savebar, .dirty-bar {
position: fixed; z-index: 80; bottom: 24px; left: calc(50% + var(--sidebar-width) / 2);
width: min(740px, calc(100vw - 340px)); height: 56px;
display: flex; align-items: center; gap: 10px; padding: 0 10px 0 20px; border-radius: var(--radius-lg);
background: var(--clr-dirtybar); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none; visibility: hidden;
transition: transform 250ms var(--ease-spring), opacity 200ms ease, background-color 150ms ease, visibility 0s linear 250ms;
}
.savebar.show, .dirty-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; visibility: visible; transition: transform 250ms var(--ease-spring), opacity 200ms ease, background-color 150ms ease, visibility 0s; }
@keyframes dirty-wiggle {
0%, 100% { transform: translate(-50%, 0); }
15%, 45%, 75% { transform: translate(calc(-50% - 8px), 0); }
30%, 60%, 90% { transform: translate(calc(-50% + 8px), 0); }
}
.dirty-bar.shake, .savebar.shake {
animation: dirty-wiggle 380ms var(--ease-spring);
background-color: var(--clr-danger) !important; /* #ce3636 */
transition: background-color 150ms ease;
}
.savebar .msg, .dirty-bar .msg { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.savebar .headline, .dirty-bar .headline { font-weight: 600; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savebar .msg small, .dirty-bar .msg small { display: block; font-weight: 500; color: var(--text-tertiary); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.savebar .msg small.err, .dirty-bar .msg small.err { color: #ff8a8a; }
.dirty-bar.shake .msg small.err { color: #fff; }
.savebar .btn, .dirty-bar .btn { height: 38px; }
@keyframes shake { 0%,100% { transform: translate(-50%,0); } 20%,60% { transform: translate(calc(-50% - 7px),0); } 40%,80% { transform: translate(calc(-50% + 7px),0); } }
/* ---------------------------------------------------------------- toasts */
.toasts { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--clr-surface-darker); box-shadow: var(--shadow-pop); font-size: 14px; }
.toast .icon { margin-top: 1px; }
.toast.ok .icon { color: var(--mint); }
.toast.err .icon { color: var(--rose); }
.toast.info .icon { color: var(--sky); }
.toast .t-body { flex: 1; min-width: 0; }
.toast .t-title { font-weight: 700; }
.toast-enter { transition: transform 200ms var(--ease-spring), opacity 200ms var(--ease-out); }
.toast-enter-start { transform: translateY(-8px); opacity: 0; }
/* ---------------------------------------------------------------- modal (§5.2.3) */
/* Backdrop rgba(0,0,0,.8) + blur 4px, fades in 150ms ease-out / out 120ms ease-in; the dialog pops from
scale(.95) translateY(12px) over 200ms spring. Dialog chrome radius is a literal 12px. */
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(0.95) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes modal-shake {
0%, 100% { transform: scale(1) translateX(0); }
20%, 60% { transform: scale(1) translateX(-6px); }
40%, 80% { transform: scale(1) translateX(6px); }
}
.modal-wrap, .modal-backdrop {
position: fixed; inset: 0; z-index: 150; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px;
background: var(--clr-backdrop); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
animation: backdrop-in 150ms ease-out;
}
.modal, .modal-dialog {
width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; justify-self: center;
background: var(--clr-canvas); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
animation: modal-pop 200ms var(--ease-spring);
}
.modal-invalid { animation: modal-shake 280ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
/* Leaving (x-transition:leave="modal-leave" x-transition:leave-end="modal-leave-to" on the backdrop) */
.modal-leave { transition: opacity 120ms ease-in; }
.modal-leave-to { opacity: 0; }
.modal-leave .modal-dialog, .modal-leave .modal { transition: transform 150ms ease-in, opacity 150ms ease-in; }
.modal-leave-to .modal-dialog, .modal-leave-to .modal { transform: scale(0.97); opacity: 0; }
.modal.wide { width: min(880px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; }
.modal-head h2 { flex: 1; font-size: 1.4rem; }
.modal-body { padding: 16px 24px 22px; }
.modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border-subtle); background: var(--clr-surface-dark); border-radius: 0 0 12px 12px; }
/* Module intro dialog (§6.9): max 500px, padding 24px, 40px tinted icon, title = module name */
.intro-dialog { width: min(500px, 100%); padding: 24px; position: relative; overflow: visible; }
.intro-dialog .intro-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 16px; line-height: 1; transition: background-color 150ms ease, color 150ms ease; }
.intro-dialog .intro-close:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.intro-dialog .intro-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.intro-dialog .intro-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0; background: var(--clr-primary-soft); color: var(--clr-primary); }
.intro-dialog h2 { font-size: 1.4rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.intro-dialog .intro-body { margin-top: 16px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.intro-dialog .intro-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
/* ---------------------------------------------------------------- tables & data */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--clr-card-bg); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text-tertiary); padding: 11px 14px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: rgba(255,255,255,.015); }
/* Command tables stack on phones: command + who on one line, the description under it. */
table.data .cmd-name code { white-space: nowrap; }
@media (max-width: 640px) {
table.data.cmd-table thead { display: none; }
table.data.cmd-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
table.data.cmd-table tr:last-child { border-bottom: 0; }
table.data.cmd-table td { display: block; padding: 0; border: 0; min-width: 0; }
table.data.cmd-table td.cmd-name code { white-space: normal; overflow-wrap: anywhere; }
table.data.cmd-table td.cmd-desc { grid-column: 1 / -1; grid-row: 2; }
table.data.cmd-table td.cmd-who { text-align: right; }
}
/* Empty states (§7.3): the spec title is the bold line, the helper sits under it. */
.empty-state { text-align: center; padding: 48px 20px; color: var(--text-tertiary); font-size: 15px; }
.empty-state .icon:not(.btn .icon) { color: #3d4a5c; margin-bottom: 10px; }
.empty-state h3, .empty-state strong, .empty-state .empty-state__title { display: block; color: var(--text-primary); font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.empty-state p { max-width: 46ch; margin: 0 auto; }
.empty-state .btn { margin-top: 16px; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.pagination { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
/* ---------------------------------------------------------------- overview */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--clr-card-bg); margin-bottom: 26px; }
.stat { padding: 18px 20px; }
.stat + .stat { border-left: 1px solid var(--line-soft); }
.stat .v { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat .l { color: var(--muted); font-size: 13px; }
.module-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); background: var(--clr-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.mod-tile { background: transparent; transition: background-color 150ms ease; padding: 16px 16px 16px 18px; display: flex; gap: 14px; align-items: flex-start; color: var(--text); text-decoration: none !important; box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.mod-tile:hover { background: var(--clr-card-hover); }
.mod-tile .glyph { width: 38px; height: 38px; border-radius: 11px; background: var(--ink-2); display: grid; place-items: center; color: var(--muted); flex-shrink: 0; }
.mod-tile.on .glyph { color: var(--mint); background: var(--mint-soft); }
.mod-tile.always .glyph { color: var(--iris); background: var(--iris-soft); }
.mod-tile .go { align-self: center; transition: transform 180ms var(--ease-spring), color 150ms ease; }
.mod-tile:hover .go { color: #fff; transform: translateX(3px); }
.mod-tile .t { flex: 1; min-width: 0; }
.mod-tile .name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.mod-tile .desc { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.board-head { display: flex; align-items: center; gap: 12px; margin: 28px 0 12px; }
.board-head h2 { flex: 1; font-size: 18px; }
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 12px; align-items: center; padding: 11px 16px; font-size: 14px; }
.activity li + li { border-top: 1px solid var(--line-soft); }
.activity .avatar { width: 26px; height: 26px; }
.activity .when { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
/* ---------------------------------------------------------------- public pages */
.site-nav { position: sticky; top: 0; z-index: 40; background: rgba(27, 32, 40, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; }
.site-nav.scrolled { border-color: var(--line-soft); }
.site-nav .inner { max-width: 1180px; margin: 0 auto; height: 66px; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.03em; color: var(--text); text-decoration: none !important; }
.brand-mark { width: 30px; height: 30px; }
.site-nav .links { display: flex; gap: 22px; flex: 1; }
.site-nav .links a { color: var(--text-2); font-weight: 500; font-size: 14.5px; }
.site-nav .links a:hover { color: var(--text); text-decoration: none; }
.nav-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.nav-user { position: relative; }
.nav-user-btn { width: auto; padding: 4px 6px 4px 4px; gap: 6px; border-radius: 999px; }
.nav-user-menu { left: auto; right: 0; width: 240px; top: calc(100% + 8px); }
.nav-user-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.nav-user-head .name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-only-phone, .nav-burger { display: none; }
.nav-sheet { display: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* Public pages: the footer sits at the bottom even when the page is short. */
body.public { min-height: 100vh; display: flex; flex-direction: column; }
.public-main { flex: 1 0 auto; }
.site-foot { border-top: 1px solid var(--line-soft); margin-top: 40px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 28px; padding-bottom: 36px; }
.site-foot .grow { flex: 1; }
.servers-page { max-width: 1100px; margin: 0 auto; padding: 40px 24px 80px; }
.servers-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.servers-head .grow { flex: 1; min-width: 240px; }
.servers-head p { color: var(--text-2); margin-top: 8px; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.server-card { background: var(--clr-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 18px; display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none !important; transition: border-color .15s, background .15s; position: relative; }
.server-card:hover { border-color: rgba(255, 255, 255, .14); background: var(--clr-card-hover); }
.server-card .top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.server-card .top > div { min-width: 0; }
.server-card .name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-card .meta { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; margin-top: 2px; }
.server-card .meta .badge { height: 20px; padding: 0 7px; font-size: 11.5px; }
.server-card .foot { display: flex; align-items: center; justify-content: space-between; }
.server-card .status { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.server-card.has-bot .status { color: var(--mint); }
.server-card:not(.has-bot) { background: transparent; border-style: dashed; }
.error-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.error-page .code { font-family: var(--font-display); font-size: 88px; font-weight: 800; letter-spacing: -.05em; color: var(--ink-4); line-height: 1; }
.error-page h1 { margin: 10px 0 8px; }
.error-page p { color: var(--text-2); max-width: 46ch; margin: 0 auto 22px; }
/* ---------------------------------------------------------------- shared v3 components (spec §4–§6) */
/* Page and tab enter: opacity 200ms ease-out + 6px rise on the spring; exit 150ms ease-in (§5.2.1). */
@keyframes page-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-rise { from { transform: translateY(6px); } to { transform: translateY(0); } }
@keyframes pop-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.page-enter { animation: page-fade 200ms var(--ease-out), page-rise 200ms var(--ease-spring); }
/* For x-show panels: x-transition:enter="tab-enter" x-transition:enter-start="tab-enter-start"
x-transition:leave="tab-leave" x-transition:leave-end="tab-leave-end" */
.tab-enter { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-spring); }
.tab-enter-start { opacity: 0; transform: translateY(6px); }
.tab-leave { transition: opacity 150ms var(--ease-in); }
.tab-leave-end { opacity: 0; }
/* Cross-fading panes: the leaving pane leaves flow, so the container's height is
driven by the entering pane only - no transient jump and no transient scrollbar. */
.tab-panes { position: relative; }
.tab-panes > .tab-leave { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
/* The utility names used in the spec's Alpine example (§5.2.1), so that snippet works as written. */
.transition { transition-property: opacity, transform; }
.transition.ease-out { transition-timing-function: var(--ease-out), var(--ease-spring); }
.transition.ease-in { transition-timing-function: var(--ease-in); }
.transition.duration-200 { transition-duration: 200ms; }
.transition.duration-150 { transition-duration: 150ms; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-1\.5 { transform: translateY(6px); }
.translate-y-0 { transform: translateY(0); }
/* Path bars (§6.1 lists, §5.2.6 hover). Markup:
…Title
Lede.controls{{ icon('chevron-right', 18, 'chevron-icon') }}
Title and lede may also sit together in a .path-bar__body wrapper. */
.path-bar {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon title aside chev" "icon lede aside chev";
align-items: center; column-gap: 0; width: 100%; min-height: 76px; padding: 16px 20px; text-align: left;
background: var(--clr-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
color: var(--text-primary); font: inherit; text-decoration: none !important; position: relative;
transition: background-color 150ms ease, border-color 150ms ease;
}
a.path-bar, button.path-bar, .path-bar.is-link { cursor: pointer; }
.path-bar:hover { background: var(--clr-card-hover); border-color: rgba(255, 255, 255, 0.14); }
.path-bar + .path-bar { margin-top: 12px; }
.path-bar__icon { grid-area: icon; width: 40px; height: 40px; margin-right: 16px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--text-secondary); flex-shrink: 0; }
.path-bar__body, .path-bar__text { grid-column: 2; grid-row: 1 / span 2; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.path-bar__title { grid-area: title; align-self: end; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.3rem; font-weight: 500; line-height: 1.3; color: var(--text-primary); min-width: 0; }
.path-bar__lede { grid-area: lede; align-self: start; font-size: 15px; line-height: 1.5; color: var(--text-secondary); min-width: 0; }
.path-bar__body .path-bar__title, .path-bar__body .path-bar__lede, .path-bar__text .path-bar__title, .path-bar__text .path-bar__lede { align-self: auto; }
.path-bar:not(:has(.path-bar__lede)) > .path-bar__title { grid-row: 1 / span 2; align-self: center; }
.path-bar__aside { grid-area: aside; margin-left: 16px; display: flex; align-items: center; gap: 10px; }
.path-bar > .chevron-icon { grid-area: chev; margin-left: 14px; }
.chevron-icon { color: var(--text-tertiary); flex-shrink: 0; transition: transform 180ms var(--ease-spring), color 150ms ease; }
.path-bar:hover .chevron-icon, .path-bar:focus-visible .chevron-icon { transform: translateX(3px); color: #ffffff; }
.path-bar-list { display: flex; flex-direction: column; gap: 12px; }
.path-bar-list > .path-bar + .path-bar { margin-top: 0; }
/* Accordions (§5.2.5): the drawer uses x-collapse.duration.200ms; its chevron turns 90° over 200ms. */
.accordion-trigger { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 500; cursor: pointer; padding: 6px 0; }
.accordion-trigger:hover { color: #fff; }
.accordion-trigger .chevron-icon { transition: transform 200ms ease, color 150ms ease; }
.accordion-trigger[aria-expanded="true"] .chevron-icon, .chevron-icon.rotate-90, .is-open > .chevron-icon { transform: rotate(90deg); color: var(--clr-primary); }
/* Featured cards (§6.1 top grid): 2 columns, min-height 168px, radius 15px */
.featured-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.featured-card {
min-height: 168px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px;
background: var(--clr-card-bg); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
color: var(--text-primary); transition: background-color 150ms ease, border-color 150ms ease;
}
.featured-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.featured-card__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--text-secondary); margin-bottom: 4px; }
.featured-card h2, .featured-card h3, .featured-card__title { font-size: 1.3rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--text-primary); }
.featured-card p, .featured-card__lede { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.featured-card > .btn:last-child, .featured-card__actions { margin-top: auto; }
.featured-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* Toggle switch (§5.2.4): 45×24 track, 18px knob sliding 21px, squashes to 21px while pressed; on = #22c55e */
.switch-sapphire { position: relative; display: inline-block; width: 45px; height: 24px; flex-shrink: 0; cursor: pointer; vertical-align: middle; }
.switch-sapphire input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch-sapphire .track { position: absolute; inset: 0; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.10); transition: background-color 200ms var(--ease-smooth); }
.switch-sapphire .track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transform: translateX(0);
transition: transform 200ms var(--ease-spring), width 150ms ease;
}
.switch-sapphire input:checked + .track { background: var(--clr-success); }
.switch-sapphire input:checked + .track::after { transform: translateX(21px); }
.switch-sapphire input:active + .track::after { width: 21px; }
.switch-sapphire input:checked:active + .track::after { transform: translateX(18px); }
.switch-sapphire input:focus-visible + .track { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.switch-sapphire input:disabled { cursor: default; }
.switch-sapphire input:disabled + .track { opacity: .55; }
/* Segmented tabs (§6.5, §6.7): rail radius 8px, selected tab filled */
.seg-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--clr-surface-dark); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); max-width: 100%; }
.seg-tab { height: 36px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease, color 150ms ease; }
.seg-tab:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.seg-tab.active, .seg-tab[aria-selected="true"] { background: #394556; color: #fff; }
/* BETA badge (§4.4 micro): red #ce3636, #e65b5b on hover */
.beta-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--clr-danger); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; transition: background-color 150ms ease; }
.beta-pill:hover { background: var(--clr-danger-hover); }
/* Module header parts shared by hubs */
.module-help { width: 45px; height: 45px; display: inline-grid; place-items: center; padding: 0; flex-shrink: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); color: var(--text-secondary); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.module-help:hover { background: rgba(255, 255, 255, .09); color: #fff; }
/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
.sec { grid-template-columns: 1fr; gap: 14px; }
/* Stacked variant: the frame goes full width under the controls, not sticky, and the page scrolls. */
.msg-layout { grid-template-columns: minmax(0, 1fr); }
.msg-layout > .dcf { position: static; max-height: none; align-self: stretch; }
.msg-layout > .dcf > .dcf-body { max-height: none; overflow-y: visible; }
}
@media (max-width: 900px) {
/* Sidebar becomes a drawer opened from the hamburger in the topbar. */
.sidebar { z-index: 100; top: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform 250ms var(--ease-spring); box-shadow: inset -50px 0 50px 1px #1f252e, 20px 0 60px rgba(0,0,0,.5); }
.sidebar.open { transform: none; }
.drawer-close { display: inline-flex; margin-left: auto; }
/* With the close button in the row, Fetch roles/channels drops to its own full-width line so the label never clips. */
.sidebar-top { flex-wrap: wrap; row-gap: 6px; }
.sidebar-top .sidebar-util:not(.compact) { order: 3; flex: 1 0 100%; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 90; }
.menu-btn { display: inline-flex; }
.main { margin-left: 0; }
.topbar { padding: 0 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
.crumbs { max-width: none; justify-content: center; }
.topbar-guild .server-switch .name { max-width: 22vw; }
.content { padding: 22px 16px 140px; }
.savebar, .dirty-bar { left: 50%; width: calc(100vw - 24px); }
.stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat:nth-child(3) { border-left: 0; }
.stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
.site-nav .links { display: none; }
.nav-only-phone { display: flex; }
.nav-burger { display: inline-flex; }
.nav-sheet { display: flex; flex-direction: column; padding: 6px 16px 14px; border-top: 1px solid var(--line-soft); background: var(--ink-0); }
.nav-sheet a { padding: 11px 8px; color: var(--text-2); font-weight: 600; border-radius: 8px; }
.nav-sheet a:hover { background: var(--ink-2); color: var(--text); text-decoration: none; }
}
@media (max-width: 640px) {
.site-nav .inner { padding: 0 16px; gap: 12px; }
.nav-login { display: none; }
.wrap { padding: 0 16px; }
.site-foot .grow { flex-basis: 100%; height: 0; }
}
/* Dirty bar below 830px: full width, headline hidden, buttons share the row (§7.2). */
@media (max-width: 830px) {
.savebar, .dirty-bar { left: 50%; width: calc(100vw - 24px); bottom: 12px; padding: 0 9px; }
/* Only the headline hides; a save error stays visible on its own line and the bar grows to fit it. */
.savebar .headline, .dirty-bar .headline { display: none; }
.savebar:not(.has-err) .msg, .dirty-bar:not(.has-err) .msg { display: none; }
.savebar.has-err, .dirty-bar.has-err { height: auto; min-height: 56px; flex-wrap: wrap; padding: 9px; row-gap: 8px; }
.savebar.has-err .msg, .dirty-bar.has-err .msg { flex: 1 0 100%; padding: 0 4px; }
.savebar.has-err .msg small, .dirty-bar.has-err .msg small { white-space: normal; overflow: visible; }
.savebar .btn, .dirty-bar .btn { flex: 1 1 0; }
.featured-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.sec { padding: 20px 16px; }
.fld.half, .fld.third { grid-column: span 6; }
/* Phone top bar: the drawer already names the server, so the breadcrumb keeps only the page (and tab). */
.topbar { gap: 6px; padding: 0 8px; }
.crumbs .crumb-guild, .crumbs .crumb-guild + .icon { display: none; }
.crumbs { font-size: 14.5px; justify-content: flex-start; }
.topbar-guild .server-switch { padding-right: 3px; gap: 0; }
.topbar-guild .server-switch .grow, .topbar-guild .server-switch > .icon { display: none; }
.user-btn { padding-right: 3px; }
.user-btn .who, .user-btn > .icon { display: none; }
.topbar-guild .server-menu { position: fixed; left: 8px; right: 8px; width: auto; top: 54px; }
h1 { font-size: 1.75rem; }
.path-bar { padding: 14px 14px; grid-template-areas: "icon title chev" "icon lede chev" "aside aside aside"; grid-template-columns: auto minmax(0, 1fr) auto; }
.path-bar__aside { margin: 10px 0 0; justify-content: flex-start; }
.path-bar__icon { width: 36px; height: 36px; margin-right: 12px; }
.path-bar__title { font-size: 1.15rem; }
.seg-tabs { display: flex; flex-wrap: wrap; overflow: visible; max-width: 100%; }
.page-head { flex-wrap: wrap; gap: 14px 16px; margin-bottom: 22px; }
.page-head .glyph { width: 44px; height: 44px; }
.page-head .actions { width: 100%; padding-top: 0; }
.page-head .actions .btn-ghost:first-child { margin-left: -11px; }
.page-head .power { margin-left: auto; }
.board-head { flex-wrap: wrap; row-gap: 4px; }
.board-head h2 { flex: 1 1 auto; }
.color-input { flex-wrap: wrap; }
.color-input > .input { flex: 1 1 0; min-width: 0; }
.color-input .swatches { flex-basis: 100%; }
.swatches button { width: 24px; height: 24px; }
.embed-card-body { grid-template-columns: 1fr; }
.msg-toolbar > .small { display: none; }
.msg-edit-pane { padding: 12px; }
/* Discord frame on phones (visual-spec §2.6): same message metrics as desktop, no shadow (the card frames it),
a 44px channel header, and bar controls that move to a second row and scroll instead of wrapping again. */
.dcf { box-shadow: none; }
.dcf-bar { flex-wrap: wrap; row-gap: 0; }
/* Row 1 keeps the 40px bar height when the controls wrap to a 36px second row (visual-spec §2.6). */
.dcf-label, .dcf-note { line-height: 40px; }
.dcf-controls { flex-shrink: 0; max-width: 100%; min-height: 36px; overflow-x: auto; scrollbar-width: none; }
.dcf-controls::-webkit-scrollbar { display: none; }
.dcf-channel { height: 44px; }
.dcf-channel svg { width: 18px; height: 18px; }
.dcf-channel-name { font-size: 15px; }
.link-btn-row { grid-template-columns: minmax(0, 1fr) 104px auto; }
/* Phones: switch between the editor and the preview instead of scrolling past a long editor. */
.msg-tabs { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--line); background: var(--ink-1); border-radius: 11px 11px 0 0; }
.msg-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.msg-tabs button.on { color: var(--text); border-bottom-color: var(--iris); }
.msg-editor:not(.show-preview) .msg-layout > .dcf { display: none; }
.msg-editor.show-preview .msg-layout > .msg-edit-pane { display: none; }
.list-item-body { padding: 14px 12px 16px; }
/* Phones: the four item buttons move into one menu so the item's name has room. */
.list-item-head { padding: 8px 6px 8px 12px; gap: 8px; }
.li-actions .li-wide { display: none; }
.li-more { display: inline-flex; }
}
/* Horizontal scrollers that overflow (UX-BUG-4/5): a 24px fade on the right edge until scrolled to the end.
.fade-end is set by app.js; the mask only changes opacity, so no new colour. */
.fade-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
/* ---------------------------------------------------------------- AI moderation (MAR-672 WP4)
Sizes, states and colours follow the ui document of the MAR-671 spec. No colour below is new: every value is a token
above or a literal already used in this file (#ff8a8a on .dirty-bar .err, #394556 on .segmented, #46546a on .input).
Scoped to .ai-page (the root of the AI page) and .modal.ai-dialog, so the other module pages look as released. */
/* Setup progress. Moved unchanged from guild_home.html, where the server home "Get started" card still uses it. */
.steps-card { overflow: hidden; }
.steps-bar { height: 4px; background: var(--ink-3); }
.steps-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--iris-btn), var(--iris)); border-radius: 0 4px 4px 0; }
/* Readable error red and sentence links (spec D15). .ai-link is the opt-in for the AI rows of Activity. */
.ai-page .fld-error, .modal.ai-dialog .fld-error { color: #ff8a8a; }
.ai-page a:not(.btn), .modal.ai-dialog a:not(.btn), .ai-link { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.ai-page .badge.rose { color: #ff8a8a; }
.ai-page .badge .icon { width: 14px; height: 14px; }
.ai-badge-ic { display: inline-flex; }
/* The released .spinner is a border and takes its size from the button it sits in; on the page it needs its own (a 4px speck otherwise). */
.ai-page .spinner { width: 14px; height: 14px; vertical-align: -2px; flex: none; }
.ai-page .badge.amber .icon { color: currentColor; }
/* Segmented control, stack variant: one option per line on a phone. */
.segmented.stack button { min-height: 40px; }
@media (max-width: 900px) {
.segmented.stack { flex-direction: column; width: 100%; }
.segmented.stack button { width: 100%; text-align: left; }
}
/* Radio card (guided setup). One