/* The dashboard (web/app.js draws it). The type, colours, buttons and the Discord look-alike are in site.css.

   The frame: a dark rail on the left (the server, its pages, its creators, your account) and the page beside it;
   on a phone the rail becomes a drawer behind a slim bar. The pages without a server (logging in, your servers)
   have no rail, only the bar. The only things that glow are the lamps: green when all's well, red when a
   creator is live, yellow when something needs a look. */

.app .skip { z-index: 90; }
/* (what the keyboard moves to is never left under the bar at the top or the save bar at the bottom) */
html:has(body.app) { scroll-padding-top: 76px; }
html:has(.savebar) { scroll-padding-bottom: 140px; }

/* ------------------------------------------------------------------ the frame */
.shell { flex: 1 0 auto; min-height: 100vh; min-height: 100dvh; }
.shell.has-rail { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.stage { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app main { flex: 1 0 auto; width: 100%; padding: 30px clamp(16px, 3.2vw, 44px) 56px; outline: none; container-type: inline-size; overflow-x: clip; }
.page { width: 100%; max-width: 1180px; margin: 0 auto; }

.bar { --pad: clamp(16px, 3.2vw, 44px); position: sticky; top: 0; z-index: 40; flex: none; height: 60px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 max(var(--pad), calc((100% - 1180px) / 2)); background: rgba(12, 18, 40, .8); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.bar-start, .bar-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.has-rail .bar { display: none; }
.bar-server { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px 4px 4px; border-radius: 10px; text-decoration: none;
  font-weight: 650; font-size: 15.5px; }
.bar-server > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-server:hover { background: rgba(255, 255, 255, .05); }
.avatar-btn { width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: var(--deck-3); color: var(--haze); cursor: pointer; overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
.avatar-btn img, .avatar-btn .blank { width: 100%; height: 100%; object-fit: cover; font-size: 13px; }
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px rgba(255, 181, 71, .65); }

.app-foot { --pad: clamp(16px, 3.2vw, 44px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  padding: 18px max(var(--pad), calc((100% - 1180px) / 2)) 26px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13.5px; }
.app-foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.app-foot a { color: var(--haze); text-decoration: none; }
.app-foot a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ the rail */
.rail { --ring: var(--console); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--console); border-right: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #1E2849 transparent; }
.rail-in { min-height: 100%; display: flex; flex-direction: column; padding: 16px 14px 14px; }
.rail-brand { padding: 6px 8px 18px; font-size: 16.5px; }
.rail .brand span { display: inline; }
.rail-brand img { width: 26px; height: 26px; }
.rail-server { appearance: none; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: 10px;
  padding: 7px 8px 7px 7px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--paper);
  text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.rail-server:hover, .rail-server[aria-expanded="true"] { background: rgba(255, 255, 255, .06); border-color: var(--line-2); }
.rail-server-text { min-width: 0; display: grid; line-height: 1.28; }
.rail-server-text b { font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-server-text span { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-server .chev { width: 16px; height: 16px; color: var(--dim); }
.rail .menu.wide { left: 0; right: 0; min-width: 0; max-width: none; }

.rail-nav { display: grid; gap: 2px; margin-top: 18px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 9px; color: var(--haze);
  font-weight: 580; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.nav-item > svg.i { width: 18px; height: 18px; color: var(--dim); transition: color .15s; }
.nav-item:hover { background: rgba(255, 255, 255, .045); color: var(--paper); }
.nav-item:hover > svg.i { color: var(--haze); }
.nav-item[aria-current="page"] { background: rgba(255, 255, 255, .075); color: var(--paper); }
.nav-item[aria-current="page"] > svg.i { color: var(--amber); }
.nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #FF5E4D, #FFB03B); }
.nav-item > svg.ext { margin-left: auto; width: 14px; height: 14px; }

.roster { margin-top: 26px; }
.roster-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 8px; }
.roster-head h2 { color: var(--dim); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }
.count { font-stretch: 75%; font-weight: 650; font-size: 13.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.roster-list { display: grid; gap: 1px; }
.roster-item { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px 0 8px; border-radius: 9px; color: var(--ink-2);
  font-weight: 560; font-size: 14.5px; text-decoration: none; transition: background .15s, color .15s; }
.roster-item:hover { background: rgba(255, 255, 255, .045); color: var(--paper); }
.roster-item[aria-current="page"] { background: rgba(255, 255, 255, .075); color: var(--paper); }
.roster-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-add { display: flex; align-items: center; gap: 11px; min-height: 40px; margin-top: 2px; padding: 0 10px 0 8px; border-radius: 9px; color: var(--dim);
  font-weight: 580; font-size: 14px; text-decoration: none; transition: background .15s, color .15s; }
.roster-add:hover, .roster-add[aria-current="page"] { background: rgba(255, 255, 255, .045); color: var(--paper); }
.add-ring { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed rgba(169, 179, 211, .3); }
.add-ring svg.i { width: 14px; height: 14px; }
.roster-add:hover .add-ring, .roster-add[aria-current="page"] .add-ring { border-color: rgba(255, 181, 71, .65); color: var(--amber); }

.rail-foot { margin-top: auto; padding-top: 20px; display: grid; gap: 6px; }
.account { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 0 0 8px; border-top: 1px solid var(--line); }
.account-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; font-size: 12.5px; }
.account-text { min-width: 0; display: grid; line-height: 1.28; }
.account-text b { font-size: 14px; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-text span { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ pictures: servers, creators, people */
.blank { display: grid; place-items: center; color: #fff; font-weight: 720; letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  background: linear-gradient(140deg, hsl(var(--h, 230) 62% 58%), hsl(calc(var(--h, 230) + 38) 56% 32%)); }
.sv-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; object-fit: cover; font-size: 13.5px; }
.sv-icon.tiny { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }

.cav { --s: 48px; position: relative; flex: none; display: inline-block; width: var(--s); height: var(--s); }
.cav.xs { --s: 26px; }
.cav.sm { --s: 36px; }
.cav.lg { --s: 64px; }
.cav > img, .cav > .blank { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; font-size: calc(var(--s) * .36); background-color: var(--deck-3); }
.dot { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--go); border: 3px solid var(--ring, var(--night)); }
.cav.xs .dot { right: -3px; bottom: -3px; width: 12px; height: 12px; border-width: 2.5px; }
.cav.lg .dot { width: 18px; height: 18px; border-width: 3.5px; right: -2px; bottom: -2px; }
.dot.live { background: var(--onair); }
.dot.warn { background: var(--heads); }
.dot.idle { background: var(--idle); }

.tag { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 680;
  letter-spacing: .01em; line-height: 1; }
.tag.live { background: rgba(255, 62, 108, .16); color: #FFA0B5; }
.tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--onair); }
.page-title .tag { font-stretch: 100%; }

.lamp { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.lamp.post { background: var(--amber); }
.lamp.live { background: var(--onair); }

.mention { padding: 0 3px; border-radius: 4px; background: rgba(88, 101, 242, .24); color: #CDD1FC; font-weight: 560; }
.role { display: inline-flex; align-items: center; gap: 6px; color: var(--paper); font-weight: 560; }
.role::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--role, #99AAB5); }
.role + .role { margin-left: 10px; }
.quiet-words { color: var(--dim); }

/* ------------------------------------------------------------------ headings, panels, notes */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin: 2px 0 24px; }
.page-title { font-stretch: 112%; font-weight: 740; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.12; letter-spacing: -.026em; overflow-wrap: anywhere; outline: none; }
.page-sub { margin-top: 7px; max-width: 66ch; color: var(--haze); font-size: 15px; line-height: 1.5; }
.page-actions { display: flex; gap: 8px; }
.muted { color: var(--dim); font-size: 14.5px; line-height: 1.5; }

.panel { --ring: var(--deck); min-width: 0; background: var(--deck); border: 1px solid var(--line); border-radius: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 16px; font-weight: 680; letter-spacing: -.01em; line-height: 1.3; }
.panel-sub { margin-top: 1px; color: var(--dim); font-size: 13.5px; }
.panel-empty { display: grid; justify-items: center; gap: 10px; padding: 36px 24px; text-align: center; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.panel-empty svg.i { width: 26px; height: 26px; color: var(--idle); }
.panel-empty p { max-width: 38ch; }

.label { display: inline-flex; align-items: center; gap: 8px; font-weight: 640; font-size: 15px; color: var(--paper); }
.label > svg.i { width: 17px; height: 17px; color: var(--dim); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.counter { color: var(--dim); font-size: 13px; font-stretch: 75%; font-weight: 600; font-variant-numeric: tabular-nums; }
.hint { color: var(--dim); font-size: 14px; line-height: 1.45; }
.callout { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 12px; text-align: left; font-size: 15px; line-height: 1.45;
  background: rgba(246, 196, 69, .07); border: 1px solid rgba(246, 196, 69, .24); color: #F5E6BC; }
.callout > svg.i { color: var(--heads); margin-top: 1px; }
.callout.wide { margin-bottom: 22px; max-width: 920px; }
.callout-body { display: grid; gap: 6px; flex: 1; min-width: 0; }
.callout-body b { color: var(--paper); font-weight: 650; }
.callout-body ul { display: grid; gap: 2px; color: var(--ink-2); font-size: 14.5px; }
.callout .btn { flex: none; align-self: center; }
.field-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--dim); }
.field-note svg.i { width: 16px; height: 16px; margin-top: 2px; }
.field-note.warn { color: #F5E6BC; }
.field-note.warn svg.i { color: var(--heads); }
.field-note.bad { color: #FFC4D1; }
.field-note.bad svg.i { color: var(--onair); }
.field-note a { color: var(--amber); }
.empty { max-width: 620px; padding: 26px; border-radius: 16px; border: 1px dashed var(--line-2); color: var(--haze); display: grid; gap: 6px; }
.empty-title { color: var(--paper); font-weight: 650; font-size: 17px; }

/* ------------------------------------------------------------------ loading */
.booting { min-height: 50vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--dim); font-size: 15px; }
.signal { position: relative; width: 120px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.signal::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--signal); }
.spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); border-top-color: var(--amber); }
.spinner.small { width: 15px; height: 15px; }
.spinner.dark { border-color: rgba(42, 20, 5, .25); border-top-color: #2A1405; }
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
  background-size: 200% 100%; }
.sk-switch { height: 54px; margin-bottom: 18px; border-radius: 13px; }
.sk-nav { height: 28px; margin: 5px 0; width: 78%; }
.sk-nav.short { width: 58%; margin-top: 16px; }
.sk-mast { height: 300px; border-radius: 18px; margin-bottom: 22px; }
.sk-panel { height: 380px; border-radius: 16px; }
.sk-panel.short { height: 300px; }

/* ------------------------------------------------------------------ logged out */
.gate { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px);
  align-items: center; padding: clamp(16px, 5vh, 64px) 0 16px; }
.gate-title { font-stretch: var(--wide); font-weight: 820; font-size: clamp(34px, 4.3vw, 54px); line-height: 1; letter-spacing: -.036em; text-wrap: balance; outline: none; }
.gate-text { margin-top: 20px; max-width: 44ch; color: var(--haze); font-size: 17.5px; line-height: 1.55; }
.gate-copy .callout { margin-top: 20px; max-width: 480px; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.gate-facts { margin-top: 32px; display: grid; gap: 11px; }
.gate-facts li { display: flex; align-items: flex-start; gap: 11px; color: var(--haze); font-size: 14.5px; line-height: 1.45; }
.gate-facts svg.i { width: 17px; height: 17px; margin-top: 1px; color: var(--amber); }
.gate-plain { max-width: 620px; margin: 0 auto; padding: clamp(40px, 10vh, 110px) 0 24px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.gate-plain .page-sub { margin-left: auto; margin-right: auto; }
.gate-plain .gate-actions { justify-content: center; margin-top: 22px; }

/* the dashboard in miniature, beside the login */
.demo { position: relative; isolation: isolate; }
.demo::before { content: ""; position: absolute; z-index: -1; inset: 8% -6% -8% 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 94, 77, .26), rgba(255, 176, 59, .08) 60%, transparent); filter: blur(30px); }
.demo-window { --ring: var(--deck); display: grid; grid-template-columns: 60px minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: var(--deck);
  border: 1px solid var(--line-2); box-shadow: 0 44px 96px -34px rgba(0, 0, 0, .85); }
.demo-side { --ring: var(--console); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 0; background: var(--console);
  border-right: 1px solid var(--line); }
.demo-mark { width: 24px; height: 24px; margin-bottom: 8px; }
.demo-switch { margin-bottom: 8px; }
.demo-nav { display: grid; place-items: center; width: 40px; height: 34px; border-radius: 9px; color: var(--dim); }
.demo-nav.on { background: rgba(255, 255, 255, .07); color: var(--amber); }
.demo-nav svg.i { width: 17px; height: 17px; }
.demo-nav.person { height: 34px; }
.demo-nav.person:first-of-type { margin-top: 6px; }
.demo-line { display: none; }
.demo-main { min-width: 0; padding-bottom: 12px; }
.demo-mast { height: 92px; }
.demo-id { position: relative; display: flex; align-items: flex-end; gap: 12px; margin-top: -30px; padding: 0 18px; }
.demo-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 18px; box-shadow: 0 0 0 4px var(--deck); }
.demo-id b { display: block; font-stretch: 112%; font-weight: 740; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; }
.demo-id span span { display: block; color: var(--dim); font-size: 12.5px; }
.demo-board { display: flex; align-items: center; gap: 12px; margin: 14px 18px 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.demo-board .board-lamp { width: 30px; height: 30px; }
.demo-board .board-lamp::after { width: 11px; height: 11px; }
.demo-board b { display: block; font-size: 15px; font-weight: 700; }
.demo-board span span { display: block; color: var(--haze); font-size: 13px; }
.demo-rows { margin: 6px 12px 0; border: 1px solid var(--line); border-radius: 12px; }
.demo-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 12px; }
.demo-row + .demo-row { border-top: 1px solid var(--line); }
.demo-row-main { min-width: 0; }
.demo-name { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; }
.demo-meta { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 3px; }
.demo-meta .meta { font-size: 12.5px; }
.demo-meta .meta > svg.i { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ your servers */
.picker .page-head { align-items: flex-end; }
.search { position: relative; display: block; width: min(320px, 100%); }
.search svg.i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--dim); pointer-events: none; }
.search .search-input { min-height: 42px; padding-left: 40px; }
.server-group + .server-group { margin-top: 36px; }
.group-title { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--haze); font-size: 14.5px; font-weight: 650; }
.group-title .count { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; }
.servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }
.servers > li { min-width: 0; }
.server-card { --ring: var(--deck); position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--deck);
  border: 1px solid var(--line); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
a.server-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .9); }
.sc-art { height: 84px; flex: none; }
.server-card.away .sc-art { filter: saturate(.35) brightness(.72); }
.sc-icon { position: relative; width: 60px; height: 60px; flex: none; margin: -34px 0 0 16px; border-radius: 18px; object-fit: cover; font-size: 19px;
  box-shadow: 0 0 0 4px var(--deck); }
.sc-body { flex: 1; display: grid; align-content: start; gap: 2px; padding: 10px 16px 0; min-width: 0; }
.sc-name { font-size: 16px; font-weight: 680; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-sub { color: var(--haze); font-size: 13.5px; line-height: 1.4; }
.sc-members { color: var(--dim); font-size: 12.5px; }
.sc-go { display: inline-flex; align-items: center; gap: 4px; margin: 14px 16px 16px; color: var(--amber); font-weight: 650; font-size: 14px; }
.sc-go svg.i { width: 16px; height: 16px; transition: transform .15s; }
a.server-card:hover .sc-go svg.i { transform: translateX(2px); }
.sc-go.waiting { color: var(--haze); gap: 8px; }
.sc-add { margin: 14px 16px 16px; align-self: flex-start; }

/* server art: the server's banner, or its icon blown up and blurred, or a colour of its own; the signal over it */
.art { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 140% at 88% 0%, hsl(var(--h, 230) 60% 50% / .42), transparent 64%),
              radial-gradient(70% 120% at 8% 0%, hsl(calc(var(--h, 230) + 40) 55% 45% / .22), transparent 70%),
              linear-gradient(120deg, hsl(calc(var(--h, 230) + 28) 40% 20%), hsl(var(--h, 230) 38% 13%)); }
.art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--art, none); background-size: cover; background-position: center; }
.art-icon::before { inset: -45%; filter: blur(34px) saturate(1.7); opacity: .8; }
.art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 26, 53, 0) 30%, rgba(18, 26, 53, .55) 70%, var(--deck)); }
.mast-arcs { position: absolute; right: 5%; top: -30%; width: 230px; height: 230px; fill: none; stroke: rgba(255, 255, 255, .17); stroke-width: 2.2; stroke-linecap: round; }
.mast-arcs circle { fill: rgba(255, 255, 255, .2); stroke: none; }

/* ------------------------------------------------------------------ a server's overview */
.masthead { --ring: var(--deck); position: relative; border-radius: 18px; background: var(--deck); border: 1px solid var(--line); margin-bottom: 22px; }
.mast-art { height: 132px; border-radius: 17px 17px 0 0; }
.mast-id { position: relative; display: flex; align-items: flex-end; gap: 18px; margin-top: -50px; padding: 0 24px; }
.mast-icon { width: 90px; height: 90px; flex: none; border-radius: 27px; object-fit: cover; font-size: 29px; box-shadow: 0 0 0 5px var(--deck), 0 18px 40px -16px rgba(0, 0, 0, .7); }
.mast-text { flex: 1; min-width: 0; padding-bottom: 4px; }
.mast-meta { margin-top: 3px; color: var(--haze); font-size: 14.5px; }
.mast-open { margin-bottom: 6px; }

.board { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; margin: 20px 24px 0; padding: 18px 0 22px; border-top: 1px solid var(--line); }
.board-lamp { --lamp: var(--go); position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
.board-lamp::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 20px 2px color-mix(in srgb, var(--lamp) 70%, transparent); }
.board-lamp i { position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--lamp); opacity: .38; }
.board-lamp i + i { inset: 0; opacity: .15; }
.board-lamp.live { --lamp: var(--onair); }
.board-lamp.warn { --lamp: var(--heads); }
.board-lamp.idle { --lamp: var(--idle); }
.board-body { min-width: 0; }
.board-title { padding-top: 8px; font-size: 19px; font-weight: 720; letter-spacing: -.015em; line-height: 1.3; }
.board-text { margin-top: 5px; max-width: 72ch; color: var(--haze); font-size: 15px; line-height: 1.55; }
.board-text b { color: var(--paper); font-weight: 650; }
.board-actions { margin-top: 16px; }
.issues { margin-top: 14px; display: grid; gap: 8px; max-width: 860px; }
.issues li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 11px;
  background: rgba(246, 196, 69, .06); border: 1px solid rgba(246, 196, 69, .18); color: #F2E3BC; font-size: 14.5px; line-height: 1.45; }
.issues li > svg.i { width: 17px; height: 17px; margin-top: 1px; color: var(--heads); }
.issue-text b { color: var(--paper); font-weight: 650; }
.issue-fix { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 620; font-size: 14px; text-decoration: none; white-space: nowrap; }
.issue-fix:hover { text-decoration: underline; text-underline-offset: 3px; }
.issue-fix svg.i { width: 14px; height: 14px; }
.heartbeat { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--dim); font-size: 13.5px; }
.beat { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--go); }
.beat::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--go); opacity: 0; }

.overview-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }

.rows > li + li { border-top: 1px solid var(--line); }
.row { position: relative; isolation: isolate; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 0 16px; align-items: start; padding: 18px; }
.row::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--banner, none); background-size: cover; background-position: center 35%;
  opacity: .18; filter: brightness(.5); -webkit-mask-image: linear-gradient(100deg, #000, transparent 44%); mask-image: linear-gradient(100deg, #000, transparent 44%); }
.rows > .row:last-child::before { border-radius: 0 0 15px 15px; }
.row:has([aria-expanded="true"]) { z-index: 3; }
.row-main { min-width: 0; padding-top: 1px; }
.row-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; line-height: 1.3; }
.row-name a { text-decoration: none; }
.row-name a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(237, 240, 250, .4); }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 7px; }
.meta { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.meta > svg.i { width: 15px; height: 15px; color: var(--dim); }
.meta.quiet { color: var(--dim); }
.meta-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-words.quote { max-width: 34ch; color: var(--haze); }
.row-pulse { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 8px; color: var(--soft); font-size: 13px; }
.row-problems { margin-top: 10px; display: grid; gap: 5px; }
.row-problems li { display: flex; align-items: flex-start; gap: 8px; color: #F2E3BC; font-size: 14px; line-height: 1.4; }
.row-problems svg.i { width: 16px; height: 16px; margin-top: 1px; color: var(--heads); }
.row-actions { display: flex; align-items: center; gap: 4px; }

.first { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 30px 26px; }
.first-art { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 138, 61, .14), transparent); }
.first-arcs { width: 92px; height: 92px; fill: none; stroke: var(--amber); stroke-width: 3.2; stroke-linecap: round; opacity: .85; }
.first-arcs circle { fill: var(--ember); stroke: none; }
.first-text { display: grid; gap: 8px; justify-items: start; }
.first-text h3 { font-stretch: 112%; font-size: 20px; font-weight: 760; letter-spacing: -.02em; }
.first-text p { color: var(--haze); max-width: 48ch; }
.first-text .btn { margin-top: 8px; }

/* the alerts that went out, as a wire: the time, a lamp on a line, what it was */
.wire { padding: 4px 0 10px; }
.wire-day { padding: 14px 18px 6px; color: var(--dim); font-size: 12.5px; font-weight: 650; letter-spacing: .01em; }
.wire-list > li { position: relative; }
.wire-list > li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: 95.5px; top: 18px; bottom: -18px; width: 1px; background: var(--line-2);
  pointer-events: none; }
.wire-item { position: relative; display: grid; grid-template-columns: 62px 8px minmax(0, 1fr) 16px; gap: 0 12px; align-items: start; padding: 8px 18px; text-decoration: none;
  transition: background .15s; }
a.wire-item:hover { background: rgba(255, 255, 255, .035); }
.wire-time { font-stretch: 75%; font-weight: 650; font-size: 14.5px; line-height: 20px; color: var(--haze); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.wire-item .lamp { position: relative; z-index: 2; margin-top: 6px; box-shadow: 0 0 0 3px var(--deck); }
.wire-text { min-width: 0; display: grid; line-height: 1.35; }
.wire-text b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wire-text span { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wire-open { display: inline-flex; padding-top: 2px; color: var(--idle); }
.wire-open svg.i { width: 15px; height: 15px; }
a.wire-item:hover .wire-open, a.lead:hover .wire-open { color: var(--paper); }
.wire.with-thumbs .wire-item { grid-template-columns: 62px 8px minmax(0, 1fr) auto 16px; }
.wire.with-thumbs .wire-item:not(:has(.wire-thumb)) .wire-text { grid-column: 3 / span 2; }
.wire-thumb { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--deck-2); box-shadow: 0 0 0 1px var(--line); }

.lead { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 12px; align-items: start; padding: 16px 18px; border-bottom: 1px solid var(--line);
  text-decoration: none; }
.lead-pic { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 11px; background: var(--deck-2);
  box-shadow: 0 0 0 1px var(--line); }
.lead-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.lead:hover .lead-pic img { transform: scale(1.03); }
.lead-pic .tag { position: absolute; left: 10px; top: 10px; background: rgba(10, 16, 36, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead-text { min-width: 0; display: grid; gap: 3px; }
.lead-text b { font-size: 15.5px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--dim); font-size: 13px; }

/* ------------------------------------------------------------------ extras */
.extras-groups { display: grid; gap: 20px; max-width: 920px; }
.x-rows > li + li { border-top: 1px solid var(--line); }
.x-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 18px; }
.x-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .045); color: var(--dim);
  transition: background .2s, color .2s; }
.x-tile svg.i { width: 20px; height: 20px; }
.x-row.on .x-tile { background: rgba(255, 138, 61, .12); color: var(--amber); }
.x-text { min-width: 0; }
.x-text b { display: block; font-weight: 640; font-size: 15.5px; }
.x-text span { display: block; margin-top: 2px; max-width: 62ch; color: var(--dim); font-size: 14px; line-height: 1.45; }
.x-control { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.saved-tick { display: inline-flex; align-items: center; gap: 4px; color: var(--go); font-size: 13.5px; font-weight: 600; opacity: 0; transition: opacity .3s; }
.saved-tick svg.i { width: 15px; height: 15px; stroke-width: 2.4; }
.x-row.saved .saved-tick { opacity: 1; }

/* ------------------------------------------------------------------ activity */
.activity-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.changes > li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 18px; }
.changes > li + li { border-top: 1px solid var(--line); }
.who-av { width: 30px; height: 30px; border-radius: 50%; font-size: 11px; }
.change-text { padding-top: 4px; color: var(--haze); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.change-text b { color: var(--paper); font-weight: 620; }
.changes time { padding-top: 6px; color: var(--dim); font-size: 12.5px; white-space: nowrap; }

/* ------------------------------------------------------------------ switches and choice rows */
.switch { position: relative; flex: none; width: 46px; height: 27px; padding: 0; border: 0; border-radius: 999px; background: #2A3560; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: background .2s; }
.switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #BFC7E0; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .2s cubic-bezier(.3, .7, .3, 1), background .2s; }
.switch[aria-checked="true"] { background: var(--signal); box-shadow: none; }
.switch[aria-checked="true"] .switch-knob { transform: translateX(19px); background: #fff; }
.switch[disabled] { opacity: .4; cursor: not-allowed; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); }
.seg-opt { appearance: none; min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: none; color: var(--haze); font-weight: 600; font-size: 14px;
  white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
.seg-opt:hover { background: rgba(255, 255, 255, .05); color: var(--paper); }
.seg-opt[aria-checked="true"] { background: rgba(255, 138, 61, .16); color: #FFD9BF; box-shadow: inset 0 0 0 1px rgba(255, 138, 61, .5); }
.seg-opt[disabled] { cursor: not-allowed; }
.seg[aria-disabled="true"] { opacity: .45; }
.seg.small .seg-opt { min-height: 30px; padding: 0 11px; font-size: 13.5px; }

/* ------------------------------------------------------------------ setting a creator up */
.editor-head { display: grid; justify-items: start; gap: 12px; margin: 0 0 24px; }
.back { display: inline-flex; align-items: center; gap: 4px; margin-left: -6px; padding: 4px 9px 4px 4px; border-radius: 8px; color: var(--haze); text-decoration: none;
  font-weight: 580; font-size: 14.5px; }
.back:hover { color: var(--paper); background: rgba(255, 255, 255, .05); }
.back svg.i { width: 17px; height: 17px; }
.editor-title { width: 100%; display: flex; align-items: center; gap: 18px; }
.editor-title-text { flex: 1; min-width: 0; }
.editor-title .page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.editor-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; }
.editor-meta .meta { color: var(--haze); }
.editor-meta a { color: var(--ink-2); text-decoration: none; }
.editor-meta a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.editor-actions { align-self: flex-start; display: flex; gap: 6px; }

.editor-grid { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.editor-form { display: grid; gap: 14px; min-width: 0; }
.step { --ring: var(--deck); min-width: 0; display: grid; gap: 12px; padding: 20px 22px 22px; border-radius: 16px; background: var(--deck); border: 1px solid var(--line); }
.step-title { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; }
.step-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-stretch: 75%; font-size: 15.5px; font-weight: 720;
  color: var(--amber); background: rgba(255, 181, 71, .09); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .32); }
.step-n svg.i { width: 15px; height: 15px; stroke-width: 2.6; }
.step-title.done .step-n { background: var(--signal); color: #2A1405; box-shadow: none; }
.field { display: grid; gap: 8px; min-width: 0; }
.field + .field { margin-top: 10px; }
.input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--input); color: var(--paper);
  font-size: 16px; transition: border-color .15s, box-shadow .15s; }
.input.small { min-height: 38px; font-size: 15px; border-radius: 10px; }
.input::placeholder, .chips-entry::placeholder, .picker-search::placeholder { color: var(--dim); opacity: 1; }
.input:focus, .chips-input:focus-within, .picker-btn:focus-visible, .picker-btn[aria-expanded="true"] { outline: none; border-color: rgba(255, 138, 61, .75);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .18); }
.input-row { display: flex; gap: 10px; }
.input-wrap { position: relative; flex: 1; min-width: 0; display: block; }
.input-wrap .input { padding-left: 42px; }
.input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.input-row .btn { min-height: 48px; padding: 0 18px; border-radius: 12px; }
.keep { justify-self: start; }

.found { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--input); border: 1px solid var(--line-2); }
.found::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--banner, none); background-size: cover; background-position: center 35%;
  opacity: .2; filter: brightness(.5); -webkit-mask-image: linear-gradient(100deg, #000, transparent 70%); mask-image: linear-gradient(100deg, #000, transparent 70%); }
.found-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; font-size: 19px; }
.found-text { min-width: 0; display: grid; }
.found-text b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found-text a { color: var(--haze); font-size: 14px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.found-text a:hover { color: var(--paper); text-decoration: underline; }

/* the channel picker: Discord's list of channels, with a search */
.picker { position: relative; }
.picker-btn { appearance: none; width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--input); color: var(--paper); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.picker-btn:hover { border-color: rgba(169, 179, 211, .3); }
.picker-btn .ch-icon { width: 19px; height: 19px; color: var(--dim); }
.ch-name { flex: 1; min-width: 0; font-size: 16px; font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name.placeholder { color: var(--dim); font-weight: 500; }
.ch-cat { flex: none; max-width: 40%; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-btn .chev { width: 16px; height: 16px; color: var(--dim); }
.picker-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; padding: 6px; border-radius: 14px; background: #141C3A;
  border: 1px solid var(--line-2); box-shadow: 0 26px 64px -18px rgba(0, 0, 0, .85); }
.picker-find { position: relative; display: block; }
.picker-find svg.i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--dim); pointer-events: none; }
.picker-search { width: 100%; min-height: 40px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--input); color: var(--paper);
  font-size: 15px; outline: none; }
.picker-search:focus { border-color: rgba(255, 138, 61, .6); }
.picker-list { max-height: min(310px, 46vh); overflow-y: auto; margin-top: 6px; scrollbar-width: thin; scrollbar-color: #26315A transparent; }
.picker-cat { padding: 10px 10px 4px; color: var(--soft); font-size: 12px; font-weight: 680; letter-spacing: .02em; }
.picker-opt { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.picker-opt .ch-icon { width: 17px; height: 17px; color: var(--dim); }
.picker-opt.active { background: rgba(255, 255, 255, .07); color: var(--paper); }
.picker-opt[aria-selected="true"] { color: var(--paper); font-weight: 600; }
.picker-opt[aria-disabled="true"] { color: #5B678E; cursor: not-allowed; }
.picker-opt[aria-disabled="true"] .ch-icon { color: #3F4A70; }
.opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-why, .opt-warn { flex: none; font-size: 12px; font-weight: 600; }
.opt-why { color: #C48C9E; }
.opt-warn { color: #C9A35E; }
.picker-opt .tick { width: 16px; height: 16px; color: var(--amber); }
.picker-none { padding: 14px 10px; color: var(--dim); font-size: 14px; }

.ping-row { display: grid; gap: 10px; justify-items: start; padding: 14px 0 2px; border-top: 1px solid var(--line); }
.ping-row:nth-child(2) { border-top: 0; padding-top: 0; }
.ping-row.off > .label { color: var(--dim); }
.role-find { display: grid; gap: 8px; width: 100%; }
.role-find .input { max-width: 280px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; max-height: 204px; overflow-y: auto; padding: 2px; }
.role-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px 0 11px; border-radius: 999px;
  border: 1px solid var(--line-2); background: none; color: var(--haze); font-weight: 600; font-size: 14px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.role-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--role, #99AAB5); }
.role-chip:hover { color: var(--paper); border-color: rgba(169, 179, 211, .32); }
.role-chip[aria-pressed="true"] { color: var(--paper); background: color-mix(in srgb, var(--role, #99AAB5) 18%, transparent);
  border-color: color-mix(in srgb, var(--role, #99AAB5) 65%, transparent); }
.role-chip .tick { width: 14px; height: 14px; stroke-width: 2.6; margin-right: -2px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tile { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 13px;
  border: 1px solid var(--line-2); background: var(--input); cursor: pointer; transition: border-color .15s, background .15s; }
.tile:hover { border-color: rgba(169, 179, 211, .3); }
.tile-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tile:has(.tile-input:checked) { border-color: rgba(255, 138, 61, .6); background: rgba(255, 138, 61, .07); }
.tile:has(.tile-input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }
.tile-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); color: var(--dim); transition: background .15s, color .15s; }
.tile-icon svg.i { width: 19px; height: 19px; }
.tile:has(.tile-input:checked) .tile-icon { background: rgba(255, 138, 61, .14); color: var(--amber); }
.tile-text { min-width: 0; display: grid; gap: 1px; }
.tile-text b { font-size: 15px; font-weight: 650; }
.tile-text span { color: var(--soft); font-size: 13px; line-height: 1.35; }
.tile-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--dim); display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.tile-check svg.i { width: 14px; height: 14px; stroke-width: 3; }
.tile:has(.tile-input:checked) .tile-check { border-color: transparent; background: var(--signal); color: #2A1405; }
.switch-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.switch-row .hint { margin-top: 2px; }

.chips-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--input); cursor: text; transition: border-color .15s, box-shadow .15s; }
.chips { display: contents; }
.chips-entry { flex: 1; min-width: 160px; min-height: 34px; padding: 0 6px; border: 0; background: none; color: var(--paper); font-size: 16px; outline: none; }
.chip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 4px 0 11px; border-radius: 9px; background: rgba(255, 138, 61, .13);
  color: #FFDCC4; font-size: 14.5px; font-weight: 600; }
.chip button { appearance: none; width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: inherit; opacity: .7; cursor: pointer; }
.chip button:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.chip svg.i { width: 15px; height: 15px; }

details.more { padding: 0; gap: 0; }
details.more > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; border-radius: 16px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary:hover { background: rgba(255, 255, 255, .02); }
.more-title { display: inline-flex; align-items: center; gap: 12px; font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; }
.step-n.plain { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--haze); }
.step-n.plain svg.i { width: 16px; height: 16px; stroke-width: 2; }
.more-sub { margin-left: auto; color: var(--dim); font-size: 14px; }
.more-chevron { color: var(--dim); transition: transform .2s; }
details.more[open] .more-chevron { transform: rotate(180deg); }
details.more[open] > summary { padding-bottom: 6px; }
.more-hint { padding: 0 22px; }
.x-rows.compact { margin: 8px 6px 8px; }
.x-rows.compact .x-row { padding: 13px 16px; grid-template-columns: 36px minmax(0, 1fr); }
.x-rows.compact .x-tile { width: 36px; height: 36px; }
.x-rows.compact .x-control { grid-column: 1 / -1; justify-content: flex-start; }
.x-rows.compact .x-text b { font-size: 15px; }
.x-rows.compact .x-text span { font-size: 13.5px; }

.savebar { position: sticky; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px 10px 10px 16px; border-radius: 14px;
  background: rgba(19, 27, 56, .92); border: 1px solid var(--line-2); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .2s; }
.savebar.dirty { border-color: rgba(255, 138, 61, .5); }
.save-hint { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--dim); font-size: 14px; line-height: 1.4; }
.save-hint.bad { color: #FFC4D1; }
.save-hint.todo { color: var(--haze); }
.save-hint.ready { color: var(--ink-2); }
.save-hint .beat { background: var(--amber); }
.savebar .btn { flex: none; }
.to-preview { display: inline-grid; }

/* the preview: Discord, as the channel will see it */
.preview { display: grid; gap: 12px; min-width: 0; }
.preview-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.preview-head h2 { font-size: 16px; font-weight: 680; }
.preview-where { color: var(--dim); font-size: 13.5px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line-2); }
.tab { appearance: none; min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--haze); font-weight: 620; font-size: 14px; cursor: pointer; }
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] { background: rgba(255, 255, 255, .1); color: var(--paper); }
.preview-window { height: auto; min-height: 380px; max-height: 760px; }
.preview-window .dc-feed { justify-content: flex-start; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #1A1B1E transparent; }
.preview-window .dc-feed > :first-child { margin-top: auto; }
.preview-window.loading::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 47px; height: 2px;
  background: linear-gradient(90deg, transparent, #FF5E4D 30%, #FFB03B 70%, transparent) no-repeat; background-size: 45% 100%; }
.preview-note { min-height: 20px; color: var(--dim); font-size: 13.5px; }
.preview-empty { margin: auto; padding: 32px 28px; display: grid; justify-items: center; gap: 14px; text-align: center; color: var(--dc-muted); font-size: 15px; max-width: 34ch; }
.preview-empty img { width: 44px; height: 44px; opacity: .55; filter: grayscale(.4); }
.dc-skeleton .sk { display: block; border-radius: 6px; background: #3A3C43; }
.dc-skeleton .dc-avatar.sk { border-radius: 50%; }
.sk-name { width: 120px; height: 14px; margin: 4px 0; }
.sk-line { width: 72%; height: 14px; margin: 6px 0 4px; }
.dc-skeleton .sk-card { width: 100%; max-width: 420px; height: 280px; border-radius: 8px; }

.btn-primary[aria-disabled="true"], .btn-primary[disabled] { background: #232C52; color: #8E99C0; box-shadow: none; opacity: 1; filter: none; }

/* ------------------------------------------------------------------ menus, the dialog, toasts */
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 6px); z-index: 50; min-width: 240px; max-width: min(340px, 86vw); max-height: min(420px, 70vh); overflow-y: auto;
  display: grid; gap: 1px; padding: 6px; border-radius: 14px; background: #141C3A; border: 1px solid var(--line-2); box-shadow: 0 26px 64px -18px rgba(0, 0, 0, .8); }
.menu.left { left: 0; }
.menu.right { right: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border-radius: 9px; border: 0; background: none;
  color: var(--paper); text-align: left; text-decoration: none; font-size: 14.5px; font-weight: 540; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, .065); outline: none; }
.menu-item[aria-current="page"] { background: rgba(255, 138, 61, .1); }
.menu-item > svg.i { color: var(--haze); }
.menu-item .tick { margin-left: auto; color: var(--amber); }
.menu-item.danger { color: #FFB3C3; }
.menu-item.danger > svg.i { color: #FF7D98; }
.menu-item.danger:hover, .menu-item.danger:focus-visible { background: rgba(255, 62, 108, .12); }
.menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-who { display: grid; margin-bottom: 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.menu-who b { font-weight: 650; }
.menu-who span { color: var(--dim); font-size: 13.5px; }
.menu-note { padding: 6px 10px 8px; color: var(--soft); font-size: 13px; line-height: 1.4; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }

.dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: 18px; background: #131B38; color: var(--paper);
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .9); }
.dialog::backdrop { background: rgba(5, 8, 20, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog-body { display: grid; gap: 8px; padding: 22px 22px 4px; }
.dialog-body h2 { font-size: 18px; font-weight: 720; letter-spacing: -.012em; line-height: 1.3; }
.dialog-body p { color: var(--haze); font-size: 15px; line-height: 1.5; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 18px; }

.toasts { position: fixed; z-index: 70; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(92vw, 520px); display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 16px; border-radius: 13px; background: #1B2549;
  border: 1px solid var(--line-2); box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .75); font-size: 15px; font-weight: 550; line-height: 1.4; }
.toast svg.i { color: var(--go); stroke-width: 2.4; }
.toast.warn svg.i { color: var(--heads); stroke-width: 1.9; }
.toast.error svg.i { color: var(--onair); stroke-width: 1.9; }
.app:has(.savebar) .toasts { bottom: 92px; }

/* ------------------------------------------------------------------ wider pages (the page's own width decides: the rail takes some) */
@container (min-width: 980px) {
  .to-preview { display: none; }
  .editor-grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 460px); }
  .preview { position: sticky; top: 24px; }
  .preview-window { height: min(700px, calc(100vh - 170px)); min-height: 440px; max-height: none; }
  .activity-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@container (min-width: 1040px) {
  .overview-grid { grid-template-columns: minmax(0, 1fr) 344px; }
  .wire-panel.side { position: sticky; top: 24px; }
}
@container (max-width: 700px) {
  .x-row.wide-control { grid-template-columns: 40px minmax(0, 1fr); }
  .x-row.wide-control .x-control { grid-column: 1 / -1; justify-content: flex-start; }
  .x-rows.compact .x-row.wide-control { grid-template-columns: 36px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ phones and small windows: the rail becomes a drawer */
@media (max-width: 959px) {
  .shell.has-rail { display: block; }
  .has-rail .bar { display: flex; }
  .rail { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(304px, 86vw); height: 100%; transform: translateX(-102%); visibility: hidden;
    transition: transform .26s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .26s; box-shadow: 30px 0 60px -30px rgba(0, 0, 0, .8); }
  .drawer-open .rail { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.3, .7, .2, 1); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(5, 8, 20, .6); }
  .bar-menu { margin-left: -8px; }
  .gate { grid-template-columns: minmax(0, 1fr); }
  .demo { max-width: 560px; }
}
@media (min-width: 960px) {
  .bar-menu, .scrim { display: none; }
}
@media (max-width: 640px) {
  .app main { padding: 20px 14px 40px; }
  .page-head { margin-bottom: 20px; }
  .masthead { border-radius: 16px; }
  .mast-art { height: 100px; border-radius: 15px 15px 0 0; }
  .mast-arcs { width: 170px; height: 170px; right: -4%; }
  .mast-id { gap: 14px; margin-top: -38px; padding: 0 16px; }
  .mast-icon { width: 68px; height: 68px; border-radius: 21px; font-size: 22px; box-shadow: 0 0 0 4px var(--deck), 0 14px 30px -14px rgba(0, 0, 0, .7); }
  .mast-open { display: none; }
  .board { grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; margin: 16px 16px 0; padding: 14px 0 18px; }
  .board-lamp { width: 30px; height: 30px; }
  .board-lamp::after { width: 11px; height: 11px; }
  .board-title { padding-top: 3px; font-size: 17.5px; }
  .issues li { grid-template-columns: 18px minmax(0, 1fr); }
  .issue-fix { grid-column: 2; }
  .panel-head { padding: 14px 14px 12px; }
  .row { grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; padding: 16px 14px; }
  .row .cav.md { --s: 44px; }
  .row-actions { position: relative; grid-column: 2; margin: 12px 0 0 -2px; }
  .row-actions .menu-wrap { position: static; }
  .row-actions .menu { left: 0; right: auto; }
  .meta-words.quote { max-width: 26ch; }
  .wire-item { grid-template-columns: 54px 8px minmax(0, 1fr) 16px; padding: 8px 14px; }
  .wire-list > li:not(:last-child)::after { left: 83.5px; }
  .wire-day { padding-left: 14px; }
  .x-row { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 14px; gap: 10px 14px; }
  .x-tile { width: 36px; height: 36px; }
  .x-row.wide-control { grid-template-columns: 36px minmax(0, 1fr); }
  .changes > li { padding: 12px 14px; }
  .first { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 14px; }
  .first-art { width: 84px; height: 84px; }
  .first-arcs { width: 74px; height: 74px; }
  .editor-title { gap: 14px; }
  .editor-title .cav.lg { --s: 52px; }
  .step { padding: 18px 16px 20px; }
  details.more > summary { padding: 16px; }
  .more-hint { padding: 0 16px; }
  .x-rows.compact { margin: 6px 0; }
  .input-row { flex-wrap: wrap; }
  .input-row .btn { flex: 1 1 100%; }
  .seg { width: 100%; }
  .seg-opt { flex: 1 1 auto; padding: 0 9px; font-size: 13.5px; }
  .more-sub { display: none; }
  .savebar { bottom: 10px; flex-wrap: wrap; gap: 8px; padding: 8px; }
  .save-hint { flex-basis: 100%; padding: 4px 6px 2px; }
  .save-hint.ready, .save-hint:not(.bad):not(.todo) { display: none; }
  .savebar .btn { min-height: 44px; }
  .savebar .btn-primary { flex: 1 1 auto; }
  .savebar .to-preview { width: 44px; height: 44px; }
  .app:has(.savebar) .toasts { bottom: 128px; }
  .gate-title { font-size: clamp(31px, 9vw, 40px); }
  .gate-text { font-size: 16.5px; }
  .gate-actions .btn { flex: 1 1 100%; }
  .servers { grid-template-columns: minmax(0, 1fr); }
  .app-foot { padding: 16px 14px 22px; }
}

/* ------------------------------------------------------------------ what moves: the live dots, the heartbeat, a saved creator, loading */
@media (prefers-reduced-motion: no-preference) {
  .dot.live { animation: onair 2s ease-out infinite; }
  .beat::after { animation: beat 2.6s ease-out infinite; }
  .tag.live::before { animation: blink 2s ease-in-out infinite; }
  .row.just-saved .cav > img, .row.just-saved .cav > .blank { animation: saved-ring 1.5s ease-out 1; }
  .signal::after { animation: sweep 1.1s ease-in-out infinite; }
  .spinner { animation: spin .8s linear infinite; }
  .sk { animation: shimmer 1.5s linear infinite; }
  .dc-skeleton .sk { animation: pulse 1.4s ease-in-out infinite; }
  .preview-window.loading::after { animation: signal-run 1.05s linear infinite; }
  .toast { animation: toast-in .22s ease-out; }
  .toast.leaving { animation: toast-out .24s ease-in forwards; }
  .dialog[open] { animation: pop .18s ease-out; }
  .picker-pop:not([hidden]), .menu:not([hidden]) { animation: drop .14s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .rail, .drawer-open .rail { transition: none; }
  .preview-window.loading::after { background-size: 100% 100%; opacity: .7; }
  a.server-card:hover { transform: none; }
}
@keyframes onair { 0% { box-shadow: 0 0 0 0 rgba(255, 62, 108, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 62, 108, 0); } }
@keyframes beat { from { transform: scale(1); opacity: .55; } to { transform: scale(3.4); opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes saved-ring { from { box-shadow: 0 0 0 0 rgba(255, 138, 61, .8); } to { box-shadow: 0 0 0 26px rgba(255, 138, 61, 0); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse { 50% { opacity: .55; } }
@keyframes signal-run { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }