/* 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;
--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-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: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--clr-primary-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); }
/* ---------------------------------------------------------------- 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); }
.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: none; border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-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); }
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; }
/* 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: none; border-color: var(--iris); }
.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 { border-color: var(--iris); box-shadow: 0 0 0 3px var(--iris-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. */
.dcf, .dc {
--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