/* WARDOGS NOW community hub.
   Tiles rather than a list, because a community is a face and a name you either recognise or do
   not, where a server is a set of numbers you compare. Different job, different shape.
   Built on the shared tokens and components in tokens.css and components.css. */

.com-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; margin-top: 22px; }

.com-card {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 12px; transition: .15s;
}
.com-card:hover { border-color: var(--line2); transform: translateY(-2px); }
.com-card.pinned { border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
                   background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 7%, var(--bg-1)), var(--bg-1)); }

.com-head { display: flex; align-items: center; gap: 13px; min-width: 0; }
.com-logo, .com-logo-ph {
  width: 52px; height: 52px; border-radius: 11px; flex: none; object-fit: cover;
  border: 1px solid var(--line2); background: var(--bg-2);
}
.com-logo-ph { display: grid; place-items: center; font-family: var(--display);
               font-size: 21px; color: var(--text-mid); }
.com-head .nm { font-family: var(--display); font-size: 1.18rem; color: var(--text-hi);
                display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.com-head .sub { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--text-mid); margin-top: 3px; display: block; }

.com-card .tl { color: var(--text-mid); font-size: .87rem; line-height: 1.55; flex: 1; margin: 0; }

/* The activity line. Reads "4 servers listed" while nothing is probed, and only becomes a player
   count once there is one to report. See Communities::activityLine. */
.com-activity { display: flex; align-items: center; gap: 8px;
                font-family: var(--mono); font-size: .74rem; color: var(--text-mid); }
.com-activity .live-n { color: var(--text-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.com-pulse-summary { display:flex; gap:12px; flex-wrap:wrap; color:var(--text-mid); font-size:.72rem; line-height:1.35; }
.com-pulse-summary span { min-width:0; flex:1 1 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.com-pulse-summary small { display:block; margin-bottom:3px; color:var(--text-dim); font:700 .58rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.com-trust-cues{display:flex;gap:7px;flex-wrap:wrap}.com-trust-cues span{padding:6px 8px;border:1px solid var(--line);border-radius:5px;color:var(--text-mid);font:600 .54rem/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase}

.com-foot { display: grid; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.com-foot-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.com-foot .n { font-family: var(--mono); font-size: .72rem; color: var(--text-mid);
               font-variant-numeric: tabular-nums; }
.com-open { width:min(100%,220px); margin-inline:auto; justify-content:center; text-align:center; }

/* Recruiting is stated in words rather than as a chip, since this site has no badges. */
.recruiting { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--ok); }
.recruiting.is-closed { color:var(--text-mid); }

/* ---------- one community's page ---------- */
.com-banner {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-2); margin-bottom: 22px;
}
.com-banner img { width: 100%; height: auto; display: block; max-height: 260px; object-fit: cover; }

.com-hero { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.com-hero .big, .com-hero .big-ph {
  width: 88px; height: 88px; border-radius: 16px; flex: none; object-fit: cover;
  border: 1px solid var(--line2); background: var(--bg-2);
}
.com-hero .big-ph { display: grid; place-items: center; font-family: var(--display);
                    font-size: 36px; color: var(--text-mid); }
.com-hero h1 { margin: 4px 0 0; font-size: clamp(28px, 4vw, 44px); }

.follow {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line2); border-radius: var(--radius-sm);
  color: var(--text-hi); padding: 10px 16px; font: inherit;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; transition: .13s;
}
.follow:hover { border-color: var(--accent); color: var(--accent); }
.follow.on { background: var(--accent); border-color: var(--accent); color: #0F1113; }
.follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.staff-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.staff-row { display: flex; align-items: center; gap: 11px; }
.staff-row img, .staff-row .ph {
  width: 30px; height: 30px; border-radius: 8px; flex: none; object-fit: cover;
  border: 1px solid var(--line2); background: var(--bg-2);
}
.staff-row .ph { display: grid; place-items: center; font-size: .8rem; color: var(--text-mid); }
.staff-row .role { margin-left: auto; font-family: var(--mono); font-size: .64rem;
                   letter-spacing: .12em; text-transform: uppercase; color: var(--text-mid); }
.staff-row .role.owner { color: var(--accent); }
.staff-row .role.admin { color: #7db6e8; }
.staff-row .role.moderator { color: #d5b36b; }

.req { border: 1px solid var(--warn); border-radius: var(--radius); padding: 16px; margin-top: 14px;
       background: color-mix(in srgb, var(--warn) 7%, var(--bg-1)); }
.req + .req { margin-top: 10px; }

@media (max-width: 720px) {
  .com-grid { grid-template-columns: 1fr; }
  .com-hero .big, .com-hero .big-ph { width: 64px; height: 64px; font-size: 26px; }
}

/* ---------- factions ----------
   The mark stands in for a logo when a community has not uploaded one, so it has to sit in the
   same box and read at the same weight, not float inside it. */
.com-logo-fac { display: grid; place-items: center; }
.com-logo-fac svg { width: 32px; height: 32px; }

.fac-row { display: flex; gap: 8px; flex-wrap: wrap; }
.fac-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mid);
}
.fac-chip svg { width: 15px; height: 15px; flex: none; }

/* On a community's own page the factions are stated properly rather than abbreviated. */
.fac-list { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.fac-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fac-item svg { width: 30px; height: 30px; flex: none; }
.fac-item .fn { font-family: var(--display); font-size: 1rem; color: var(--text-hi); display: block; }
.fac-item .fb { color: var(--text-mid); font-size: .78rem; line-height: 1.4; display: block; }

/* The picker on the community form. */
.fac-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
@media (max-width: 620px) { .fac-pick { grid-template-columns: 1fr; } }
.fac-opt {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 13px; border: 1px solid var(--line2); border-radius: var(--radius-sm);
  background: var(--bg-2); transition: .13s; margin: 0;
  font-family: var(--sans); font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--text-hi);
}
.fac-opt:hover { border-color: var(--accent); }
.fac-opt input { width: auto; margin: 0; flex: none; }
.fac-opt svg { width: 26px; height: 26px; flex: none; }
.fac-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.com-hero .big-fac { display: grid; place-items: center; }

/* ---------- member areas ----------
   These reuse the same surfaces and type system as the public community page. States stay as
   words, not chips, so the member tools do not introduce a second visual language. */
.feature-title { margin: 6px 0 18px; font-size: clamp(30px, 4vw, 44px); }
.community-subnav {
  position: relative; z-index: 34; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 58px; margin: 24px 0 30px; padding: 10px 12px 10px 18px;
  border: 1px solid var(--line); background: var(--bg-1);
}
.community-breadcrumb { display: flex; align-items: center; gap: 10px; min-width: 0; }
.community-breadcrumb a,
.community-breadcrumb span,
.community-breadcrumb strong {
  overflow: hidden; color: var(--text-dim); font: 700 .64rem var(--mono); letter-spacing: .09em;
  text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap;
}
.community-breadcrumb a:hover,
.community-breadcrumb a:focus-visible { color: var(--text-hi); }
.community-breadcrumb span { flex: none; color: var(--line2); }
.community-breadcrumb strong { color: var(--text-hi); }
.community-subnav-menu { position: relative; flex: none; }
.community-subnav-menu > summary {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 5px 18px; min-width: 190px;
  padding: 9px 38px 9px 13px; border: 1px solid var(--line2); background: var(--bg-2);
  color: var(--text-hi); cursor: pointer; list-style: none;
}
.community-subnav-menu > summary::-webkit-details-marker { display: none; }
.community-subnav-menu > summary::after {
  content: ''; position: absolute; right: 15px; width: 7px; height: 7px;
  border-right: 1px solid var(--text-mid); border-bottom: 1px solid var(--text-mid);
  transform: rotate(45deg) translateY(-2px); transition: transform .16s ease;
}
.community-subnav-menu[open] > summary { border-color: var(--accent); }
.community-subnav-menu[open] > summary::after { transform: rotate(225deg) translate(-2px,-2px); }
.community-subnav-menu > summary span {
  grid-column: 1 / -1; color: var(--text-dim); font: 700 .57rem var(--mono);
  letter-spacing: .13em; line-height: 1; text-transform: uppercase;
}
.community-subnav-menu > summary strong {
  font: 700 .72rem var(--mono); letter-spacing: .08em; line-height: 1.15; text-transform: uppercase;
}
.community-subnav-popover {
  position: absolute; top: calc(100% + 8px); right: 0; display: grid;
  grid-template-columns: repeat(2, minmax(180px,1fr)); gap: 22px 26px;
  width: min(540px, calc(100vw - 48px)); padding: 24px;
  border: 1px solid var(--line2); background: var(--bg-1); box-shadow: 0 20px 48px rgba(0,0,0,.38);
}
.community-subnav-popover section { min-width: 0; }
.community-subnav-popover h2 {
  margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--text-dim); font: 700 .58rem var(--mono); letter-spacing: .15em; text-transform: uppercase;
}
.community-subnav-popover nav { display: grid; gap: 2px; }
.community-subnav-popover a {
  display: flex; min-height: 36px; align-items: center; padding: 7px 10px;
  border-left: 2px solid transparent; color: var(--text-mid);
  font: 700 .68rem var(--mono); letter-spacing: .07em; text-transform: uppercase;
}
.community-subnav-popover a:hover,
.community-subnav-popover a:focus-visible { background: var(--bg-2); color: var(--text-hi); }
.community-subnav-popover a.on { border-left-color: var(--accent); background: var(--bg-2); color: var(--accent); }
@media (max-width: 720px) {
  .community-subnav { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px; }
  .community-breadcrumb { padding: 0 2px; }
  .community-breadcrumb a:nth-of-type(2),
  .community-breadcrumb a:nth-of-type(2) + span { display: none; }
  .community-subnav-menu { width: 100%; }
  .community-subnav-menu > summary { width: 100%; min-width: 0; }
  .community-subnav-popover {
    position: static; grid-template-columns: 1fr; gap: 20px; width: 100%; margin-top: 8px;
    padding: 20px; box-shadow: none;
  }
}
.feature-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 28px 0 16px; }
.feature-head h2 { margin: 4px 0 0; font-size: 1.5rem; }
.moderation-note { margin-bottom: 18px; color: var(--text-mid); }
.moderation-note .state { margin-right: 10px; }
.empty-feature { color: var(--text-mid); text-align: center; }

/* A private community area explains the boundary instead of dropping a signed-in visitor onto a
   generic 404 page. The underlying route remains member-only. */
.community-access-modal { position:fixed; inset:0; z-index:285; display:grid; place-items:center; padding:20px; }
.community-access-modal[hidden] { display:none; }
.community-access-backdrop { position:absolute; inset:0; border:0; background:rgba(3,5,6,.9); backdrop-filter:blur(8px); }
.community-access-dialog { position:relative; width:min(560px,100%); padding:38px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 46%,var(--line2)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 36%),#101418; box-shadow:0 32px 90px rgba(0,0,0,.72); animation:community-access-in .26s cubic-bezier(.18,.76,.24,1) both; }
.community-access-dialog::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 20%,transparent),transparent 80%); }
.community-access-close { position:absolute; top:18px; right:18px; display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line2); background:var(--bg-2); color:var(--text-hi); cursor:pointer; }
.community-access-close:hover,.community-access-close:focus-visible { border-color:var(--accent); color:var(--accent); outline:0; }
.community-access-mark { display:grid; width:58px; height:58px; place-items:center; margin-bottom:24px; border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 10%,var(--bg-2)); color:var(--accent); }
.community-access-mark svg { width:29px; height:29px; }
.community-access-dialog h2 { max-width:470px; margin:10px 0 13px; color:var(--text-hi); font-size:clamp(1.75rem,5vw,2.45rem); line-height:1.02; text-transform:uppercase; }
.community-access-dialog p { max-width:490px; margin:0; color:var(--text-mid); font-size:.92rem; line-height:1.7; }
.community-access-dialog small { display:block; margin-top:20px; color:var(--text-dim); font-size:.75rem; line-height:1.55; }
.community-access-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:25px; }
body.community-access-open { overflow:hidden; }
@keyframes community-access-in { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }

@media (max-width:600px) {
  .community-access-modal { padding:10px; align-items:end; }
  .community-access-dialog { padding:32px 22px 24px; }
  .community-access-actions { display:grid; }
  .community-access-actions .b { width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce) { .community-access-dialog { animation:none; } }

/* Recruitment builder and application form. */
.recruit-form { display: grid; gap: 12px; margin-top: 18px; }
.recruit-question { padding: 20px 22px; }
.recruit-question .field > span:first-child { color: var(--text-hi); }
.application-state { margin: 18px 0; }
.answer-options { display: grid; gap: 8px; margin-top: 7px; }
.answer-options label { display: flex; gap: 9px; align-items: center; margin: 0; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2);
  color: var(--text-hi); font-family: var(--sans); font-size: .9rem; letter-spacing: 0; text-transform: none; }
.answer-options input { flex: none; }
.builder-list { display: grid; gap: 10px; margin-top: 14px; }
.builder-question { display: block; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); }
.builder-question .builder-copy { cursor: pointer; min-width: 0; }
.builder-question strong { display: block; color: var(--text-hi); }
.builder-question small { display: block; margin-top: 3px; }
.builder-order { display: flex; gap: 7px; margin-top: 10px; }
.builder-order form { margin: 0; }
.builder-edit { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.builder-delete { margin-top: 10px; }
.application-list { display: grid; gap: 12px; margin-top: 14px; }
.application-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px;
  background: var(--bg-2); }
.application-card .application-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.application-card .answers { display: grid; gap: 10px; margin-top: 14px; }
.application-card .answer { padding-top: 10px; border-top: 1px solid var(--line); }
.application-card .answer strong { display: block; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mid); }
.application-card .answer p { margin: 4px 0 0; color: var(--text-hi); white-space: pre-wrap; }

/* Squads. */
.squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.squad-card { display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.squad-card::after { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--accent), transparent 72%); opacity: .8; }
.squad-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.squad-top h2 { margin: 0; font-size: 1.35rem; }
.squad-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.squad-mark { width: 54px; height: 54px; flex: none; display: block; }
.squad-kicker { color: var(--accent); font: 600 .61rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.member-count, .squad-lead { font-family: var(--mono); font-size: .68rem; color: var(--text-mid); }
.squad-lead span { letter-spacing: .1em; text-transform: uppercase; margin-right: 6px; }
.squad-status { display: flex; align-items: center; gap: 8px; min-height: 24px; font: 600 .63rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mid); }
.squad-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); box-shadow: 0 0 0 3px rgba(255,255,255,.03); }
.squad-status-dot.is-ready { background: #67a67f; box-shadow: 0 0 0 3px rgba(103,166,127,.12), 0 0 12px rgba(103,166,127,.4); }
.squad-role { margin-left: auto; color: var(--text-dim); font-weight: 400; letter-spacing: .04em; text-transform: none; white-space: nowrap; }
.squad-description { margin: 0; }
.squad-members { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.squad-members span { font-size: .82rem; color: var(--text-mid); }
.squad-card > form:last-child { margin-top: auto; }
.squad-feature-head { align-items: flex-end; }
.squad-intro { max-width: 680px; margin: 9px 0 0; line-height: 1.6; }
.squad-deploy-form { flex: none; margin: 0; }
.site section.squad-roster-guide { margin-top: 24px; display: block; padding: 28px; }
.squad-roster-guide > div:first-child { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.squad-roster-guide h3 { margin: 6px 0 7px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.squad-roster-guide p { max-width: 640px; margin: 0; line-height: 1.55; }
.squad-preset-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.squad-preset-list span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 11px; align-items: center; min-width: 0; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.squad-preset-list span:hover { border-color: rgba(228,87,46,.55); background: linear-gradient(135deg,rgba(228,87,46,.09),rgba(255,255,255,.015)); transform: translateY(-2px); }
.squad-preset-list img { width: 38px; height: 38px; grid-row: 1 / span 2; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.squad-preset-list strong { color: var(--text-hi); font: 600 .78rem/1.1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.squad-preset-list small { margin-top: 4px; color: var(--text-dim); font-size: .65rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squad-builder { margin-top: 16px; }
.squad-builder-title { margin: 7px 0 4px; font-size: 1.2rem; }
.squad-builder > p { margin: 0; }
.squad-edit { padding-top: 12px; border-top: 1px solid var(--line); }
.squad-edit > summary { cursor: pointer; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-mid); }
.squad-edit > form { display: grid; gap: 10px; margin-top: 14px; }
.discord-channel-picker select { width: 100%; }
.discord-channel-picker [data-discord-load-channels] { margin-top: 8px; }
.discord-channel-picker [data-discord-channel-status] { display: block; margin-top: 7px; }
.discord-channel-picker [data-discord-channel-status][data-state="ok"] { color: var(--ok); }
.discord-channel-picker [data-discord-channel-status][data-state="error"] { color: var(--danger); }
.discord-connected { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.discord-connected-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 50%, transparent); }
.discord-guild-id { color: var(--text-dim); font-family: var(--mono); font-size: .66rem; }
.discord-select-shell { max-width: 860px; }
.discord-select-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin:18px 0 22px; }
.discord-select-intro h2 { margin:0 0 8px; font-size:1.8rem; }
.discord-select-intro p { max-width:650px; margin:0; line-height:1.6; }
.discord-guild-list { display:grid; gap:10px; }
.discord-guild-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 16px; }
.discord-guild-icon { display:grid; width:46px; height:46px; place-items:center; border:1px solid color-mix(in srgb,#5865F2 60%,var(--line)); border-radius:12px; background:rgba(88,101,242,.15); color:#cbd0ff; font:700 1.4rem var(--display); }
.discord-guild-copy { min-width:0; }
.discord-guild-copy strong,.discord-guild-copy small { display:block; }
.discord-guild-copy strong { color:var(--text-hi); font-size:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.discord-guild-copy small { margin-top:4px; color:var(--text-mid); font:600 .62rem var(--mono); letter-spacing:.05em; text-transform:uppercase; }
@media (max-width:600px) {
  .discord-select-intro { align-items:stretch; flex-direction:column; }
  .discord-select-intro > .b { align-self:flex-start; }
  .discord-guild-card { grid-template-columns:auto minmax(0,1fr); }
  .discord-guild-card > .b { grid-column:1/-1; width:100%; }
}

@media (max-width: 760px) {
  .squad-feature-head { align-items: stretch; gap: 15px; }
  .squad-deploy-form .b { width: 100%; }
  .squad-roster-guide { grid-template-columns: 1fr; gap: 16px; }
  .squad-preset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .squad-role { display: none; }
}

/* Threads. */
.thread-list { display: grid; gap: 9px; }
.thread-row { display: flex; align-items: center; gap: 18px; padding: 17px 19px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius); }
.thread-row:hover { border-color: var(--line2); }
.thread-main { flex: 1; min-width: 0; }
.thread-main h2 { color: var(--text-hi); font-size: 1rem; margin: 0 0 5px; }
.thread-meta, .thread-count { font-family: var(--mono); font-size: .66rem; color: var(--text-mid); }
.thread-count { text-align: right; flex: none; }
.thread-count span { display: block; color: var(--warn); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }
.thread-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.post-list { display: grid; gap: 12px; }
.community-post { padding: 20px; }
.post-author { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.post-author > img, .post-author > span { width: 34px; height: 34px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line2); background: var(--bg-2); flex: none; }
.post-author > span { display: grid; place-items: center; color: var(--text-mid); }
.post-author > div { flex: 1; min-width: 0; }
.post-author strong, .post-author small { display: block; }
.post-author small { font-family: var(--mono); font-size: .62rem; }
.post-anchor { font-family: var(--mono); font-size: .62rem; color: var(--text-mid); text-decoration: none; flex: none; }
.post-anchor:hover { color: var(--accent); }
.post-body { padding-top: 15px; color: var(--text-hi); }

/* Rendered post markup.
   .prose carries white-space: pre-wrap, which is right for plain text and wrong here: the newlines
   between the block tags this markup is built from would each become a visible blank line. Posts
   marked 'html' lay out from their own tags, so they take normal whitespace. Legacy rows are still
   plain text and keep pre-wrap, which is why the two branches carry different classes. */
.post-body { white-space: normal; }
.post-body-plain { white-space: pre-wrap; }

.post-body > :first-child { margin-top: 0; }
.post-body > :last-child { margin-bottom: 0; }
.post-body p { margin: 0 0 .85em; }
.post-body h2, .post-body h3, .post-body h4 { color: var(--text-hi); line-height: 1.3; margin: 1.4em 0 .5em; }
.post-body h2 { font-size: 1.15rem; }
.post-body h3 { font-size: 1.02rem; }
.post-body h4 { font-size: .93rem; }
.post-body ul, .post-body ol { margin: 0 0 .85em; padding-left: 1.35em; }
.post-body li { margin: .28em 0; }
.post-body a { color: var(--accent); }
.post-body blockquote { margin: .9em 0; padding: .1em 0 .1em 1em; border-left: 3px solid var(--line2);
  color: var(--text-mid); font-style: italic; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.post-body code { font-family: var(--mono); font-size: .85em; background: var(--bg-0);
  border: 1px solid var(--line); border-radius: 5px; padding: .1em .35em; }
/* Code blocks keep their own whitespace and scroll rather than widening the post. */
.post-body pre { background: var(--bg-0); border: 1px solid var(--line); border-radius: 9px;
  padding: .8rem 1rem; margin: .9em 0; overflow-x: auto; white-space: pre; }
.post-body pre code { background: none; border: 0; padding: 0; }
.post-body img { display: block; width: auto; max-width: 100%; max-height: min(70vh, 720px); height: auto; object-fit: contain; border-radius: 10px; border: 1px solid var(--line2);
  margin: .5em 0; cursor: zoom-in; }
.post-body table { border-collapse: collapse; width: 100%; margin: .9em 0; font-size: .88rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; }
.post-body th { color: var(--text-hi); background: var(--bg-2); }

.removed-copy { color: var(--text-mid); font-style: italic; }
.thread-reply { margin-top: 18px; }
.category-filter { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
/* ---------- calendar ---------- */
.calendar-feature-head { align-items:flex-end; }
.calendar-feature-head p { margin:.6rem 0 0; max-width:620px; }
.calendar-board { margin-top:22px; padding:20px; }
.calendar-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.calendar-heading { margin:0; text-align:center; font-size:1.6rem; }
.calendar-toolbar-actions { display:flex; gap:8px; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays { margin-top:20px; border:1px solid var(--line); border-bottom:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; background:var(--bg-2); }
.calendar-weekdays span { padding:10px 8px; color:var(--text-mid); font:600 .62rem var(--mono); letter-spacing:.1em; text-align:center; text-transform:uppercase; }
.calendar-grid { border:1px solid var(--line); border-radius:0 0 var(--radius-sm) var(--radius-sm); overflow:hidden; background:var(--bg-1); }
.calendar-day { min-height:112px; padding:9px 0 9px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day:nth-last-child(-n+7) { border-bottom:0; }
.calendar-day.is-outside { background:var(--bg-0); }
.calendar-day.is-outside time { color:var(--text-dim); }
.calendar-day time { display:block; margin:0 9px; color:var(--text-mid); font:600 .7rem var(--mono); }
.calendar-day.is-today time { display:inline-grid; width:25px; height:25px; margin-left:6px; place-items:center; border-radius:50%; background:var(--accent); color:#101417; font-weight:700; }
.calendar-day-events { display:grid; gap:3px; margin-top:7px; }
.calendar-event { display:flex; align-items:center; gap:5px; min-width:0; min-height:24px; margin:0 6px; padding:3px 6px; border-left:2px solid var(--accent); border-radius:3px; background:color-mix(in srgb,var(--accent) 12%,var(--bg-2)); color:var(--text-hi); font-size:.72rem; line-height:1.25; text-decoration:none; }
.calendar-event:hover,.calendar-event:focus-visible { background:color-mix(in srgb,var(--accent) 22%,var(--bg-2)); color:var(--text-hi); }
.calendar-event-time { flex:none; color:var(--accent); font:600 .6rem var(--mono); }
.calendar-event-title { overflow:hidden; min-width:0; text-overflow:ellipsis; white-space:nowrap; }
/* A run over several days: the bar carries on through the cell edges and only the first day names the time. */
.calendar-event.is-start { margin-right:0; border-radius:3px 0 0 3px; }
.calendar-event.is-middle { margin:0; border-left:0; border-radius:0; }
.calendar-event.is-end { margin-left:0; border-left:0; border-radius:0 3px 3px 0; }
.calendar-event.is-middle .calendar-event-title,.calendar-event.is-end .calendar-event-title { color:var(--text-mid); }
.calendar-day:nth-child(7n+1) .calendar-event.is-middle,.calendar-day:nth-child(7n+1) .calendar-event.is-end { border-left:2px solid var(--accent); }
.calendar-event.is-cancelled { opacity:.55; text-decoration:line-through; }
.calendar-list-head { display:flex; justify-content:space-between; align-items:end; gap:14px; margin:30px 0 14px; }
.calendar-list-head h2 { margin:5px 0 0; }
.calendar-list-actions { display:flex; align-items:center; gap:12px; }

/* ---------- upcoming rows ---------- */
html body.site .panel.event-list { padding:0; overflow:hidden; }
body.site .event-row-copy time,body.site .event-page-when time,body.site .manage-event-summary time { font-family:var(--sans); }
.event-list-empty { padding:30px 24px; color:var(--text-mid); }
.event-row { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:18px; align-items:center; padding:18px 24px; border-top:1px solid var(--line); color:var(--text-hi); text-decoration:none; }
.event-row:first-child { border-top:0; }
.event-row:hover,.event-row:focus-visible { background:var(--bg-hover); }
.event-row.is-cancelled .event-row-copy strong { text-decoration:line-through; color:var(--text-mid); }
.event-row-date { display:grid; align-content:center; justify-items:center; width:52px; height:52px; border:1px solid var(--line2); border-radius:var(--radius-sm); background:var(--bg-2); }
.event-row-date strong { font:700 1.15rem/1 var(--display); color:var(--text-hi); }
.event-row-date small { margin-top:2px; font:600 .55rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); }
.event-row-copy { display:grid; gap:4px; min-width:0; }
.event-row-copy strong { overflow:hidden; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.event-row-copy > span { overflow:hidden; color:var(--text-mid); font-size:.85rem; text-overflow:ellipsis; white-space:nowrap; }
.event-row-state { flex:none; color:var(--text-dim); font:600 .64rem var(--mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.event-row-state.ok { color:var(--ok); }
.event-row-state.danger { color:var(--danger); }

/* ---------- one event ---------- */
.event-page { margin-top:22px; padding:clamp(22px,3vw,34px); }
.event-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.event-page-head h2 { margin:8px 0 10px; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05; }
.event-page-state { color:var(--text-dim); font:600 .64rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.event-page-state.ok { color:var(--ok); }
.event-page-state.danger { color:var(--danger); }
.event-page-when { margin:0; }
.event-page-when time { display:block; color:var(--accent); font:600 1rem/1.4 var(--sans); }
.event-page-when small { display:block; margin-top:4px; color:var(--text-mid); font-size:.8rem !important; }
.event-page-head-actions { display:flex; gap:10px; flex:none; }
.event-page-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); gap:36px; padding-top:28px; }
.event-page-body { min-width:0; padding-top:4px; color:var(--text-mid); font-size:1rem; line-height:1.75; }
.event-page-side { display:grid; gap:0; align-content:start; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-2); }
.event-page-block { display:grid; gap:12px; padding:20px 22px; }
.event-page-block + .event-page-block { border-top:1px solid var(--line); }
.event-page-block .eyebrow { margin:0; }
.event-page-facts { display:grid; gap:14px; margin:0; }
.event-page-facts div { display:grid; gap:4px; }
.event-page-facts dt { color:var(--text-dim); font:600 .62rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.event-page-facts dd { margin:0; color:var(--text-hi); font-size:.95rem; }
.event-rsvp,.event-page-buttons,.event-page .share-controls { display:grid; grid-template-columns:1fr; gap:10px; margin:0; }
.event-rsvp { grid-template-columns:repeat(2,minmax(0,1fr)); }
.event-page-buttons .b,.event-page .share-controls .b,.event-rsvp .b { width:100%; white-space:nowrap; }
.event-page .share-controls [data-share-status] { grid-column:1 / -1; }
.event-page .share-controls [data-share-status]:empty { display:none; }
.event-page-block > .b { width:100%; }
.event-page-note { margin:0; color:var(--text-mid); font-size:.85rem !important; line-height:1.5; }
.event-page-locked { display:grid; gap:12px; justify-items:start; }
.event-page-locked h2 { margin:0; }
.event-page.is-cancelled .event-page-head h2 { text-decoration:line-through; color:var(--text-mid); }

/* Public (non-member) community nav, shared with the pulse pages */
.community-public-nav { display:flex; gap:4px; margin:0 0 28px; overflow-x:auto; border-bottom:1px solid var(--line); }
.community-public-nav a { padding:12px 15px; border-bottom:2px solid transparent; color:var(--text-mid); font:700 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; text-decoration:none; }
.community-public-nav a:hover,.community-public-nav a.on { color:var(--text-hi); border-bottom-color:var(--accent); }

/* ---------- community tab strip ---------- */
.community-tabs { display:flex; flex:1 1 auto; min-width:0; gap:2px; overflow-x:auto; scrollbar-width:none; }
.community-tabs::-webkit-scrollbar { display:none; }
.community-tabs a { flex:none; padding:10px 12px; border-bottom:2px solid transparent; color:var(--text-mid); font:700 .66rem var(--mono); letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; text-decoration:none; }
.community-tabs a:hover,.community-tabs a:focus-visible { color:var(--text-hi); }
.community-tabs a.on { color:var(--text-hi); border-bottom-color:var(--accent); }
.community-tabs a[data-staff] { color:var(--accent); }
.community-subnav:has(.community-tabs) .community-breadcrumb { display:none; }
@media (min-width:901px) { .community-subnav:has(.community-tabs) .community-subnav-menu { display:none; } }
@media (max-width:900px) { .community-tabs { display:none; } .community-subnav:has(.community-tabs) .community-breadcrumb { display:flex; } }

/* ---------- manage: event rows ---------- */
.manage-event-list article { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; align-items:center; }
.manage-event-list article .manage-event-edit { grid-column:1 / -1; margin-top:6px; padding-top:18px; }
.manage-event-summary a { color:inherit; text-decoration:none; }
.manage-event-summary a:hover strong { color:var(--accent); }
.manage-event-state { color:var(--text-dim); }
.manage-event-state.is-published { color:var(--ok); }
.manage-event-state.is-cancelled { color:var(--danger); }
.manage-event-builder .field.wide { grid-column:1 / -1; }
.manage-event-builder-head { grid-column:1 / -1; }
.manage-event-edit-actions { grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.manage-event-edit-actions small { color:var(--text-dim); font-size:.72rem; }
.manage-confirm { max-width:420px; padding:22px; border:1px solid var(--line2); border-radius:var(--radius); background:var(--bg-1); color:var(--text-hi); }
.manage-confirm::backdrop { background:rgba(3,5,6,.72); }
.manage-confirm p { margin:0 0 16px; color:var(--text-mid); line-height:1.5; }
.manage-confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:620px) { .event-rsvp .b { flex:1; min-width:145px; } .category-filter .b { flex:1 1 auto; } }

/* Community forum. */
.forum-page { padding-top: clamp(34px,5vw,68px); }
.forum-page .feature-title { margin: 7px 0 10px; }
.forum-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:24px; }
.forum-hero > div:first-child { max-width:760px; }
.forum-hero p,.forum-compose-head p,.forum-thread-heading p { margin:0; color:var(--text-mid); line-height:1.7; }
.forum-hero-actions,.forum-thread-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.forum-hero-actions form,.forum-thread-tools form { margin:0; }
.forum-notice { display:flex; align-items:flex-start; gap:18px; padding:18px 20px; margin:18px 0; border:1px solid var(--line2); border-left:3px solid var(--accent); border-radius:var(--radius); background:var(--bg-1); }
.forum-notice strong { color:var(--text-hi); white-space:nowrap; }
.forum-notice span { color:var(--text-mid); line-height:1.55; }
.forum-notice.warning { border-left-color:var(--warn); }
.forum-toolbar { display:flex; align-items:center; gap:12px; padding:14px; margin:24px 0 18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-search { display:flex; flex:1; gap:8px; min-width:260px; }
.forum-search label { flex:1; }
.forum-search input { min-height:40px; }
.forum-sort { display:flex; align-items:center; gap:9px; color:var(--text-mid); font:600 .64rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.forum-sort select { width:auto; min-width:170px; min-height:40px; }
.forum-layout { display:grid; grid-template-columns:230px minmax(0,1fr); align-items:start; gap:18px; }
.forum-category-nav { position:sticky; top:90px; display:grid; padding:8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-category-link { display:grid; gap:5px; padding:13px 12px; border-left:2px solid transparent; border-radius:7px; text-decoration:none; }
.forum-category-link:hover { background:var(--bg-2); }
.forum-category-link.active { border-left-color:var(--accent); background:var(--bg-2); }
.forum-category-link span { display:flex; justify-content:space-between; gap:8px; color:var(--text-hi); font-weight:750; }
.forum-category-link i { color:var(--accent); font:700 .55rem var(--mono); letter-spacing:.08em; text-transform:uppercase; font-style:normal; }
.forum-category-link small { color:var(--text-mid); font-size:.72rem; }
.forum-main { min-width:0; display:grid; gap:18px; }
.forum-board,.forum-topics { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:20px 22px; border-bottom:1px solid var(--line); }
.forum-section-heading h2 { margin:5px 0 0; color:var(--text-hi); font-size:1.25rem; }
.forum-section-heading > span { color:var(--text-mid); font:600 .62rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.forum-board-row { display:grid; grid-template-columns:42px minmax(220px,1fr) 120px minmax(170px,.65fr); align-items:center; gap:16px; min-height:88px; padding:16px 22px; border-bottom:1px solid var(--line); text-decoration:none; }
.forum-board-row:last-child { border-bottom:0; }
.forum-board-row:hover { background:rgba(255,255,255,.02); }
.forum-board-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line2); border-radius:8px; color:var(--accent); background:var(--bg-2); font:800 .9rem var(--mono); }
.forum-board-copy,.forum-board-latest { min-width:0; display:grid; gap:5px; }
.forum-board-copy strong,.forum-board-latest strong { overflow:hidden; color:var(--text-hi); text-overflow:ellipsis; white-space:nowrap; }
.forum-board-copy small,.forum-board-latest small { overflow:hidden; color:var(--text-mid); font-size:.75rem; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.forum-board-counts { display:grid; grid-template-columns:auto 1fr; gap:3px 8px; align-items:baseline; }
.forum-board-counts strong { color:var(--text-hi); font:700 .85rem var(--mono); text-align:right; }
.forum-board-counts small { color:var(--text-mid); font:.58rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.forum-topic { display:grid; grid-template-columns:8px minmax(250px,1fr) 64px 64px minmax(145px,.42fr); align-items:center; gap:16px; min-height:92px; padding:16px 22px 16px 16px; border-bottom:1px solid var(--line); }
.forum-topic:last-child { border-bottom:0; }
.forum-topic:hover { background:rgba(255,255,255,.018); }
.forum-topic.pinned { background:rgba(228,87,46,.035); }
.forum-topic-state { width:7px; height:7px; border-radius:50%; background:var(--line2); }
.forum-topic.unread .forum-topic-state { background:var(--accent); box-shadow:0 0 10px rgba(228,87,46,.5); }
.forum-topic-copy { min-width:0; }
.forum-topic-copy h3 { margin:4px 0 6px; font-size:1rem; line-height:1.3; }
.forum-topic-copy h3 a { color:var(--text-hi); text-decoration:none; }
.forum-topic-copy h3 a:hover { color:var(--accent); }
.forum-topic-copy p { margin:0; overflow:hidden; color:var(--text-mid); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.forum-topic-flags { display:flex; gap:6px; flex-wrap:wrap; }
.forum-topic-flags span { color:var(--accent); font:700 .53rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.forum-topic-stat,.forum-topic-latest { display:grid; gap:4px; }
.forum-topic-stat { text-align:center; }
.forum-topic-stat strong { color:var(--text-hi); font:700 .86rem var(--mono); }
.forum-topic-stat span,.forum-topic-latest span { color:var(--text-mid); font:.57rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.forum-topic-latest { min-width:0; }
.forum-topic-latest strong { overflow:hidden; color:var(--text-hi); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.forum-empty { padding:48px 24px; text-align:center; }
.forum-empty strong { display:block; color:var(--text-hi); font-size:1.05rem; }
.forum-empty p { margin:8px auto 18px; max-width:500px; color:var(--text-mid); }
.forum-pages { display:flex; justify-content:center; gap:6px; }
.forum-pages a { display:grid; place-items:center; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--line); border-radius:7px; color:var(--text-mid); background:var(--bg-1); text-decoration:none; font:700 .68rem var(--mono); }
.forum-pages a:hover,.forum-pages a.current { border-color:var(--accent); color:var(--text-hi); }
.forum-pages a.current { background:var(--accent); color:#0b0e10; }

.forum-back { display:inline-flex; margin-bottom:22px; color:var(--text-mid); font:700 .65rem var(--mono); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
.forum-back::before { content:'\2190'; margin-right:8px; color:var(--accent); }
.forum-back:hover { color:var(--text-hi); }
.forum-compose-shell,.forum-thread-shell { max-width:1080px; }
.forum-compose-head { max-width:760px; margin-bottom:24px; }
.forum-compose { padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-compose-fields { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,.7fr); gap:18px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.forum-compose .field small { margin-top:7px; color:var(--text-mid); font-size:.72rem; }
.forum-editor-field { margin-top:22px; }
.forum-compose-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

.forum-thread-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.forum-thread-heading { min-width:0; max-width:790px; }
.forum-thread-summary { display:flex; gap:18px; flex:none; }
.forum-thread-summary span { display:grid; gap:3px; color:var(--text-mid); font:.58rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.forum-thread-summary strong { color:var(--text-hi); font-size:1.25rem; }
.forum-thread-tools { margin:16px 0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-admin-menu { position:relative; margin-left:auto; }
.forum-admin-menu summary { list-style:none; cursor:pointer; }
.forum-admin-menu summary::-webkit-details-marker { display:none; }
.forum-admin-popover { position:absolute; z-index:10; top:calc(100% + 8px); right:0; width:220px; padding:7px; border:1px solid var(--line2); border-radius:9px; background:var(--bg-1); box-shadow:0 18px 48px rgba(0,0,0,.42); }
.forum-admin-popover button { width:100%; padding:10px 11px; border:0; border-radius:6px; color:var(--text-mid); background:transparent; text-align:left; cursor:pointer; }
.forum-admin-popover button:hover { color:var(--text-hi); background:var(--bg-2); }
.forum-management { margin:0 0 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-management summary { padding:15px 18px; color:var(--text-hi); cursor:pointer; font-weight:700; }
.forum-management form { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.45fr) auto; align-items:end; gap:14px; padding:0 18px 18px; }
.forum-post-list { display:grid; gap:14px; margin:18px 0; }
.forum-post { display:grid; grid-template-columns:170px minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-post-member { display:flex; flex-direction:column; align-items:center; gap:7px; padding:22px 16px; border-right:1px solid var(--line); background:rgba(255,255,255,.012); text-align:center; }
.forum-post-member img,.forum-avatar-fallback { width:58px; height:58px; border:1px solid var(--line2); border-radius:12px; object-fit:cover; }
.forum-avatar-fallback { display:grid; place-items:center; color:var(--accent); background:var(--bg-2); font:800 1rem var(--mono); }
.forum-post-member a { color:var(--text-hi); font-weight:750; text-decoration:none; }
.forum-post-member small { color:var(--text-mid); font:.57rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.forum-post-content { min-width:0; padding:0 22px 20px; }
.forum-post-content > header { display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.forum-post-content > header div { display:flex; gap:10px; }
.forum-post-content > header time,.forum-post-content > header span,.forum-post-content > header a { color:var(--text-mid); font:.6rem var(--mono); letter-spacing:.04em; text-decoration:none; text-transform:uppercase; }
.forum-post-content > header a:hover { color:var(--accent); }
.forum-post-content > footer { display:flex; justify-content:flex-end; padding-top:14px; border-top:1px solid var(--line); }
.forum-text-action { padding:0; border:0; color:var(--text-mid); background:transparent; cursor:pointer; font:700 .59rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.forum-text-action:hover { color:var(--accent); }
.forum-removed-post { padding:28px 0; color:var(--text-mid); }
.forum-removed-post strong { color:var(--text-hi); }
.forum-removed-post p { margin:6px 0 14px; }
.forum-reply { margin-top:22px; padding:clamp(20px,3vw,30px); border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-1); }
.forum-reply header { margin-bottom:18px; }
.forum-reply h2 { margin:5px 0; color:var(--text-hi); }
.forum-reply header p { margin:0; color:var(--text-mid); }

.forum-category-manager { margin-top:18px; padding:clamp(20px,3vw,30px); scroll-margin-top:90px; }
.forum-category-manager > header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.forum-category-manager h3,.forum-category-manager h4 { margin:5px 0; color:var(--text-hi); }
.forum-category-manager p { margin:0; max-width:700px; color:var(--text-mid); line-height:1.6; }
.forum-category-manager-list { display:grid; gap:12px; margin-top:18px; }
.forum-category-editor { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-0); }
.forum-category-editor.archived { opacity:.62; }
.forum-category-editor > form:first-child { display:grid; gap:14px; }
.forum-category-editor-fields { display:grid; grid-template-columns:minmax(150px,.45fr) minmax(240px,1fr); gap:14px; }
.forum-category-editor-fields .wide { min-width:0; }
.forum-lock-option { grid-column:1/-1; display:flex; align-items:flex-start; gap:10px; color:var(--text-hi); cursor:pointer; }
.forum-lock-option input { width:17px; height:17px; margin-top:2px; accent-color:var(--accent); }
.forum-lock-option span { display:grid; gap:3px; }
.forum-lock-option small { color:var(--text-mid); font-size:.72rem; }
.forum-category-editor > form:first-child > .b { justify-self:start; }
.forum-category-editor-actions { display:flex; flex-direction:column; gap:8px; padding-left:14px; border-left:1px solid var(--line); }
.forum-category-editor-actions form { display:flex; gap:6px; }
.forum-category-create { display:grid; grid-template-columns:minmax(160px,.5fr) minmax(180px,.7fr) minmax(240px,1fr); align-items:end; gap:14px; margin-top:20px; padding:20px; border:1px solid var(--line2); border-radius:var(--radius); background:var(--bg-2); }
.forum-category-create .forum-lock-option { grid-column:auto; }

@media(max-width:980px){
  .forum-layout { grid-template-columns:1fr; }
  .forum-category-nav { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .forum-board-row { grid-template-columns:42px minmax(0,1fr) 100px; }
  .forum-board-latest { display:none; }
  .forum-topic { grid-template-columns:8px minmax(0,1fr) 60px minmax(130px,.4fr); }
  .forum-topic-stat + .forum-topic-stat { display:none; }
  .forum-category-create { grid-template-columns:1fr 1fr; }
  .forum-category-create > div,.forum-category-create .forum-lock-option,.forum-category-create > .b { grid-column:1/-1; }
}
@media(max-width:720px){
  .forum-page { padding-top:28px; }
  .forum-hero,.forum-thread-head { align-items:flex-start; flex-direction:column; }
  .forum-hero-actions,.forum-hero-actions .b,.forum-hero-actions form,.forum-hero-actions button { width:100%; }
  .forum-toolbar { align-items:stretch; flex-direction:column; }
  .forum-search { min-width:0; }
  .forum-sort { justify-content:space-between; }
  .forum-sort select { flex:1; }
  .forum-category-nav { grid-template-columns:1fr; }
  .forum-board-row { grid-template-columns:38px minmax(0,1fr); padding:15px; }
  .forum-board-counts { display:none; }
  .forum-topic { grid-template-columns:7px minmax(0,1fr); gap:10px; padding:15px; }
  .forum-topic-stat,.forum-topic-latest { display:none; }
  .forum-section-heading { padding:17px; }
  .forum-compose-fields { grid-template-columns:1fr; }
  .forum-compose-actions { flex-direction:column-reverse; }
  .forum-compose-actions .b { width:100%; }
  .forum-thread-tools .b,.forum-thread-tools form { flex:1; }
  .forum-thread-tools button { width:100%; }
  .forum-admin-menu { width:100%; margin-left:0; }
  .forum-admin-popover { position:static; width:100%; margin-top:8px; box-shadow:none; }
  .forum-management form { grid-template-columns:1fr; }
  .forum-post { grid-template-columns:1fr; }
  .forum-post-member { flex-direction:row; padding:14px 16px; border-right:0; border-bottom:1px solid var(--line); text-align:left; }
  .forum-post-member img,.forum-avatar-fallback { width:38px; height:38px; border-radius:8px; }
  .forum-post-member small { margin-left:auto; }
  .forum-post-content { padding:0 16px 16px; }
  .forum-category-manager > header { flex-direction:column; }
  .forum-category-editor { grid-template-columns:1fr; }
  .forum-category-editor-fields,.forum-category-create { grid-template-columns:1fr; }
  .forum-category-editor-actions { padding:12px 0 0; border-left:0; border-top:1px solid var(--line); }
  .forum-category-create > div,.forum-category-create .forum-lock-option,.forum-category-create > .b { grid-column:auto; }
}
@media (max-width:700px) {
  .calendar-board { padding:12px; }
  .calendar-toolbar { align-items:stretch; }
  .calendar-toolbar > .b { align-self:center; }
  .calendar-heading { font-size:1.3rem; }
  .calendar-day { min-height:82px; padding:6px 0; }
  .calendar-day time { margin:0 6px; }
  .calendar-day-events { margin-top:5px; }
  .calendar-event { min-height:10px; margin:0 3px; padding:2px 3px; }
  .calendar-event-time,.calendar-event-title { font-size:0; }
  .calendar-weekdays span { padding:8px 2px; font-size:.54rem; letter-spacing:.04em; }
  .event-page-grid { grid-template-columns:1fr; }
  .event-page-head { flex-direction:column; }
  .event-row { grid-template-columns:44px minmax(0,1fr); }
  .event-row-date { width:44px; height:44px; }
  .event-row-state { grid-column:2; }
}
@media (max-width:480px) {
  .calendar-toolbar-actions { gap:4px; }
  .calendar-toolbar .b { padding-inline:8px; font-size:.58rem; }
  .calendar-heading { font-size:1.1rem; }
  .calendar-day { min-height:66px; }
  .calendar-list-head { align-items:start; flex-direction:column; }
}

/* Live chat. */
.chat-shell { padding: 0; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 17px 19px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.chat-head p { margin: 4px 0 0; color: var(--text-mid); font-size: .82rem; }
.chat-status { font-family: var(--mono); font-size: .64rem; color: var(--ok); text-transform: uppercase; letter-spacing: .1em; }
.chat-log { height: min(58vh, 560px); min-height: 320px; overflow-y: auto; padding: 10px 18px; }
.chat-message { padding: 11px 0; border-bottom: 1px solid var(--line); }
.chat-message:last-child { border-bottom: 0; }
.chat-meta { display: flex; align-items: baseline; gap: 10px; }
.chat-meta strong { font-size: .83rem; color: var(--text-hi); }
.chat-meta time { font-family: var(--mono); font-size: .6rem; color: var(--text-mid); }
.chat-meta button { margin-left: auto; border: 0; background: none; color: var(--text-mid); cursor: pointer;
  font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.chat-meta button:hover { color: var(--danger); }
.chat-body { margin-top: 4px; color: var(--text-hi); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A posted GIF. Capped rather than shown at full size: some are enormous, and one of those in a
   scrolling log pushes every other message off the screen. */
.chat-gif { display: block; margin-top: 7px; max-width: min(320px, 100%); height: auto;
  border-radius: 10px; border: 1px solid var(--line2); background: var(--bg-0); }

/* Compose. A column now, because the emoji and GIF panels anchor to it. position: relative is what
   the panels below position against. */
.chat-compose { position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat-compose input { margin: 0; }
.chat-input-row { display: flex; gap: 10px; align-items: center; }
.chat-input-row input[type="text"] { flex: 1; min-width: 0; }

.chat-tool { flex: none; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--line2); border-radius: 9px; background: var(--bg-1);
  color: var(--text-mid); cursor: pointer; }
.chat-tool:hover { border-color: var(--accent); color: var(--accent); }
.chat-tool[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.chat-tool-text { font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .06em; }

/* The GIF waiting to be sent, shown so nobody sends one they cannot see. */
.chat-attached { display: flex; align-items: center; gap: 11px; padding: 9px;
  border: 1px solid var(--line2); border-radius: 10px; background: var(--bg-1); }
.chat-attached img { width: 62px; height: 62px; object-fit: cover; border-radius: 7px; flex: none; }
.chat-attached-clear { border: 0; background: none; color: var(--text-mid); cursor: pointer;
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.chat-attached-clear:hover { color: var(--danger); }

/* Both pickers. Anchored above the compose row so opening one does not shove the page around. */
.chat-panel { position: absolute; bottom: 100%; left: 12px; right: 12px; z-index: 5;
  max-height: min(46vh, 340px); overflow-y: auto; padding: 13px;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--bg-1);
  box-shadow: 0 -12px 32px rgb(0 0 0 / .45); }
.chat-panel[hidden] { display: none; }

.emoji-group { font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-mid); margin: 10px 0 7px; }
.emoji-group:first-child { margin-top: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 3px; }
.emoji-btn { border: 0; background: none; border-radius: 7px; cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: 6px 0; }
.emoji-btn:hover { background: var(--bg-hover); }

.gif-search { margin-bottom: 10px; }
.gif-search input { width: 100%; }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gif-tile { padding: 0; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden;
  background: var(--bg-0); cursor: pointer; aspect-ratio: 1; }
.gif-tile:hover { border-color: var(--accent); }
.gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-note { margin: 10px 0 0; color: var(--text-mid); font-size: .82rem; }
/* Klipy asks to be credited where their GIFs appear. */
.gif-credit { margin: 9px 0 0; font-family: var(--mono); font-size: .58rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-mid); text-align: right; }

@media (max-width: 620px) {
  .feature-head, .thread-title-row { align-items: flex-start; flex-direction: column; }
  .thread-row { align-items: flex-start; }
  .thread-count { text-align: left; }
  .chat-compose { padding: 11px; }
  /* Match the reduced compose padding, so the panel does not sit inset from the row it belongs to. */
  .chat-panel { left: 8px; right: 8px; max-height: 52vh; }
  .gif-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .chat-gif { max-width: 100%; }
}

/* Discord Operations Center */
.botops-shell { padding-block: clamp(34px, 6vw, 76px); }
.botops-head { display:flex; justify-content:space-between; gap:28px; align-items:flex-end; margin-bottom:22px; }
.botops-head h1 { margin:.2rem 0 .35rem; }
.botops-head p { margin:0; color:var(--text-mid); max-width:720px; }
.botops-head-actions,.botops-action-row { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.botops-status { display:flex; gap:13px; align-items:center; padding:14px 17px; border:1px solid var(--line); background:linear-gradient(90deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); margin-bottom:22px; }
.botops-status-light { width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:#7f8994; box-shadow:0 0 0 5px rgba(127,137,148,.09); }
.botops-status.is-online .botops-status-light { background:#70d6a0; box-shadow:0 0 0 5px rgba(112,214,160,.1),0 0 18px rgba(112,214,160,.35); }
.botops-status.is-paused .botops-status-light { background:var(--accent); box-shadow:0 0 0 5px rgba(232,75,44,.1),0 0 18px rgba(232,75,44,.22); }
.botops-status div { min-width:0; display:flex; flex-direction:column; }
.botops-status span { color:var(--text-mid); font-size:.78rem; }
.botops-latency { margin-left:auto; font-family:var(--mono); letter-spacing:.1em; }
.site .botops-beta-notice { display:flex; align-items:flex-start; gap:18px; margin-bottom:22px; padding:20px 22px; border-color:rgba(90,169,230,.34); background:linear-gradient(115deg,rgba(90,169,230,.08),rgba(255,255,255,.014)); }
.botops-beta-mark { display:grid; align-content:center; justify-items:center; width:58px; min-height:58px; flex:0 0 auto; border:1px solid rgba(90,169,230,.55); background:rgba(90,169,230,.1); color:var(--accent-cool); }
.botops-beta-mark span { font:700 .56rem/1 var(--mono); letter-spacing:.14em; }
.botops-beta-mark strong { margin-top:5px; font:700 1.1rem/1 var(--display); color:var(--text-hi); }
.botops-beta-copy { min-width:0; }
.botops-beta-copy h2 { margin:.28rem 0 .4rem; font-size:1.22rem; }
.botops-beta-copy p { max-width:760px; margin:0 0 14px; color:var(--text-mid); line-height:1.55; }
.botops-beta-copy .b { display:inline-flex; }
.botops-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:22px; align-items:start; }
.botops-nav { position:sticky; top:92px; border:1px solid var(--line); background:var(--panel); padding:8px; display:grid; gap:3px; }
.botops-nav a { color:var(--text-mid); padding:11px 12px; text-decoration:none; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; border-left:2px solid transparent; transition:color .2s,border-color .2s,background .2s; }
.botops-nav a:hover,.botops-nav a.active { color:var(--text); border-left-color:var(--accent); background:rgba(232,75,44,.07); }
.botops-content { min-width:0; display:grid; gap:18px; }
/* The public shell gives every section a full-width rhythm. Operations panels are cards, so they
   need their own inset content space with enough specificity to win that shell rule. */
.site .botops-panel { scroll-margin-top:95px; padding:clamp(30px,3.5vw,42px) !important; background:linear-gradient(145deg,rgba(255,255,255,.022),rgba(255,255,255,.008)),var(--panel); }
.botops-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.botops-section-head h2 { margin:.25rem 0 .35rem; }
.botops-section-head p { margin:0; color:var(--text-mid); max-width:720px; }
.botops-state { font:700 .62rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--line); padding:8px 10px; white-space:nowrap; color:var(--text-mid); }
.botops-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.botops-metrics article { border:1px solid var(--line); background:rgba(255,255,255,.018); padding:16px; display:grid; gap:6px; }
.botops-metrics span { color:var(--text-mid); font:600 .61rem/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.botops-metrics strong { font-size:1.18rem; }
.botops-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; margin-top:18px; }
.botops-checklist p { margin:0; display:flex; gap:9px; align-items:center; color:var(--text-mid); }
.botops-checklist p span { width:8px; height:8px; border-radius:50%; border:1px solid #77818b; }
.botops-checklist p.done { color:var(--text); }
.botops-checklist p.done span { border-color:#70d6a0; background:#70d6a0; box-shadow:0 0 10px rgba(112,214,160,.25); }
.botops-code-box { border:1px solid rgba(232,75,44,.5); background:linear-gradient(135deg,rgba(232,75,44,.09),rgba(255,255,255,.015)); padding:20px; margin-bottom:16px; }
.botops-code-box>span { font:600 .62rem/1 var(--mono); letter-spacing:.13em; color:var(--text-mid); }
.botops-code-box>strong { display:block; margin:10px 0 5px; font:700 clamp(1.8rem,5vw,3rem)/1 var(--mono); letter-spacing:.16em; color:#fff; }
.botops-code-box p { color:var(--text-mid); }
.botops-code-box .b { margin:8px 6px 0 0; }
.botops-permission-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 18px; padding:18px 20px; border:1px solid rgba(232,75,44,.45); background:linear-gradient(135deg,rgba(232,75,44,.08),rgba(255,255,255,.018)); }
.botops-permission-callout strong { color:var(--text-hi); }
.botops-permission-callout p { margin:5px 0 0; max-width:680px; color:var(--text-mid); line-height:1.55; }
.botops-permission-callout .b { flex:0 0 auto; text-align:center; }
.botops-steps { list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.botops-steps li { display:flex; align-items:flex-start; gap:10px; border-top:1px solid var(--line); padding-top:13px; color:var(--text-mid); }
.botops-steps b { color:var(--accent); font-family:var(--mono); }
.botops-form { display:grid; gap:16px; }
.botops-toggle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.botops-toggle { min-height:47px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(255,255,255,.015); padding:11px 13px; cursor:pointer; }
.botops-toggle:has(input:checked) { border-color:rgba(232,75,44,.55); background:rgba(232,75,44,.055); }
.botops-toggle input { accent-color:var(--accent); }
.botops-toggle span { font-size:.84rem; }
.botops-channel-grid { margin-top:4px; }
.botops-table { border:1px solid var(--line); overflow:hidden; background:rgba(4,7,9,.2); }
.botops-table-row { display:grid; grid-template-columns:1.2fr 1.5fr .8fr; gap:16px; align-items:center; min-height:52px; padding:15px 18px; border-top:1px solid var(--line); }
.botops-table-row:first-child { border-top:0; }
.botops-table-row.head { background:rgba(255,255,255,.025); color:var(--text-mid); font:600 .59rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.botops-table-row small { display:block; color:var(--text-mid); margin-top:4px; }
.botops-table-row form { margin:6px 0 0; }
.botops-empty { display:grid; gap:5px; margin:0; padding:22px 20px; border-top:1px solid var(--line); background:rgba(255,255,255,.012); }
.botops-empty strong { color:var(--text-hi); font-size:.86rem; }
.botops-empty span { color:var(--text-mid); font-size:.75rem; line-height:1.5; }
.botops-two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.botops-subpanel { border:1px solid var(--line); padding:17px; display:grid; gap:12px; }
.botops-subpanel h3 { margin:0 0 2px; }
.botops-staff-list { display:grid; gap:9px; }
.botops-staff-list>article { border:1px solid var(--line); padding:14px; display:flex; gap:16px; align-items:center; justify-content:space-between; }
.botops-staff-name { display:grid; gap:4px; min-width:150px; }
.botops-staff-name span { color:var(--text-mid); font-size:.76rem; }
.botops-cap-form { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 13px; }
.botops-cap-form label { font-size:.72rem; color:var(--text-mid); }
.botops-cap-form input { accent-color:var(--accent); }
.botops-delivery-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.botops-delivery-paths article { display:flex; gap:14px; align-items:flex-start; min-height:118px; padding:20px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.botops-delivery-paths strong { color:var(--text-hi); font-size:.9rem; }
.botops-delivery-paths p { margin:6px 0 0; color:var(--text-mid); font-size:.78rem; line-height:1.55; }
.botops-path-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; border:1px solid rgba(232,75,44,.55); background:rgba(232,75,44,.1); color:var(--accent); font:700 1rem/1 var(--display); }
.botops-path-icon.is-webhook { border-color:rgba(241,201,106,.45); background:rgba(241,201,106,.08); color:#f1c96a; }
.botops-webhook-center { margin-bottom:24px; padding:22px; border:1px solid var(--line); background:rgba(4,7,9,.24); }
.botops-webhook-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:18px; }
.botops-webhook-heading h3 { margin:.25rem 0 .3rem; }
.botops-webhook-heading p { margin:0; color:var(--text-mid); font-size:.78rem; }
.botops-webhook-heading>strong { padding:8px 10px; border:1px solid var(--line); color:var(--text-mid); font:600 .58rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.botops-webhook-form { display:grid; grid-template-columns:minmax(160px,.55fr) minmax(260px,1.45fr) auto; gap:10px; align-items:end; margin-bottom:16px; padding:16px; border:1px solid var(--line); background:rgba(255,255,255,.018); }
.botops-webhook-form .b { min-height:47px; }
.botops-webhook-list { display:grid; gap:8px; }
.botops-webhook-list>article { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; border:1px solid var(--line); background:rgba(255,255,255,.012); }
.botops-webhook-identity { display:flex; align-items:center; gap:12px; min-width:0; }
.botops-webhook-identity>div { display:grid; gap:4px; min-width:0; }
.botops-webhook-identity small { color:var(--text-mid); line-height:1.4; overflow-wrap:anywhere; }
.botops-webhook-light { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#7f8994; box-shadow:0 0 0 5px rgba(127,137,148,.08); }
.botops-webhook-light.is-ready { background:#70d6a0; box-shadow:0 0 0 5px rgba(112,214,160,.09),0 0 14px rgba(112,214,160,.24); }
.botops-webhook-actions { display:flex; gap:8px; align-items:center; flex:0 0 auto; }
.botops-webhook-actions form { margin:0; }
.botops-webhook-empty { display:grid; gap:5px; padding:18px 16px; border:1px dashed var(--line); color:var(--text-mid); }
.botops-webhook-empty strong { color:var(--text-hi); font-size:.84rem; }
.botops-webhook-empty span { font-size:.75rem; }
.botops-broadcast-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:18px; align-items:start; }
.botops-broadcast-layout + .botops-table { margin-top:26px; }
.botops-preview { position:sticky; top:92px; border:1px solid var(--line); background:#15191f; padding:15px; min-width:0; }
.botops-preview-label { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.09); color:var(--text-mid); font:600 .58rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.botops-preview-label small { color:#f1c96a; }
.botops-preview-message { color:#d9dde3; font-size:.88rem; margin-bottom:10px; white-space:pre-wrap; }
.botops-preview-embed { border-left:4px solid var(--accent); background:#1d2229; padding:14px; overflow:hidden; }
.botops-preview-embed h3 { margin:8px 0; }
.botops-preview-embed p { color:#c4cad2; white-space:pre-wrap; }
.botops-preview-embed img { display:block; width:100%; max-height:260px; object-fit:cover; margin-top:12px; }
.botops-preview-embed footer { color:#aeb6c0; font-size:.7rem; margin-top:13px; }
.botops-rule-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:17px; }
.botops-rule-list article { border:1px solid var(--line); padding:12px; display:flex; justify-content:space-between; gap:12px; }
.botops-rule-list span { color:var(--text-mid); font-size:.76rem; }
.botops-audit-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.botops-log { border-top:1px solid var(--line); padding:14px 0; display:grid; gap:6px; }
.botops-log small { color:var(--text-mid); line-height:1.45; }
.botops-log-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.botops-log-head strong { color:var(--text-hi); font-size:.82rem; }
.botops-log-head span { color:var(--text-mid); font:600 .58rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.botops-delivery-log[data-state="failed"],.botops-delivery-log[data-state="dead"] { margin-top:4px; padding:14px 14px 14px 16px; border:1px solid rgba(232,75,44,.34); background:rgba(232,75,44,.045); }
.botops-delivery-log[data-state="failed"] .botops-log-head span,.botops-delivery-log[data-state="dead"] .botops-log-head span { color:#f28a72; }
.botops-inline-action { margin:10px 0 0 !important; }
.botops-action-button { min-height:34px; padding:8px 12px; font-size:.62rem; letter-spacing:.09em; }
.botops-action-retry { border-color:rgba(232,75,44,.55) !important; color:var(--text-hi) !important; }
.botops-action-retry:hover { background:rgba(232,75,44,.12) !important; border-color:var(--accent) !important; }
.botops-action-cancel { border-color:rgba(255,255,255,.18) !important; color:var(--text-mid) !important; }
.botops-action-cancel:hover { color:var(--text-hi) !important; border-color:rgba(232,75,44,.55) !important; }
.botops-safety { border-color:rgba(232,75,44,.35); }
.botops-danger { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.botops-danger p { margin:.35rem 0 0; color:var(--text-mid); }
.site .botops-coming-soon { display:flex; align-items:flex-start; gap:20px; padding:clamp(24px,4vw,42px); border-color:rgba(232,75,44,.35); background:linear-gradient(135deg,rgba(232,75,44,.08),rgba(255,255,255,.018)); }
.botops-coming-soon h2 { margin:.35rem 0 .55rem; }
.botops-coming-soon p { max-width:680px; margin:0 0 18px; color:var(--text-mid); line-height:1.65; }
.botops-coming-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border:1px solid rgba(232,75,44,.6); background:rgba(232,75,44,.12); color:var(--accent); font:700 1.35rem var(--display); }

@media (max-width: 980px) {
  .botops-layout { grid-template-columns:1fr; }
  .botops-nav { position:sticky; top:65px; z-index:8; display:flex; overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
  .botops-nav a { border-left:0; border-bottom:2px solid transparent; }
  .botops-nav a:hover,.botops-nav a.active { border-bottom-color:var(--accent); }
  .botops-preview { position:static; }
}
@media (max-width: 760px) {
  .botops-head { align-items:flex-start; flex-direction:column; }
  .botops-head-actions { width:100%; }
  .botops-head-actions .b { flex:1; text-align:center; }
  .botops-metrics,.botops-checklist,.botops-steps,.botops-toggle-grid,.botops-two-col,.botops-broadcast-layout,.botops-rule-list,.botops-audit-grid,.botops-delivery-paths { grid-template-columns:1fr; }
  .botops-webhook-form { grid-template-columns:1fr; }
  .botops-webhook-form .b { width:100%; }
  .botops-webhook-list>article { align-items:flex-start; flex-direction:column; }
  .botops-webhook-actions { width:100%; }
  .botops-webhook-actions form,.botops-webhook-actions .b { flex:1; }
  .botops-webhook-actions .b { width:100%; text-align:center; }
  .botops-table { border:0; display:grid; gap:8px; }
  .botops-table-row { grid-template-columns:1fr; border:1px solid var(--line); }
  .botops-table-row.head { display:none; }
  .botops-empty { border:1px solid var(--line); }
  .botops-staff-list>article,.botops-danger { align-items:flex-start; flex-direction:column; }
  .botops-permission-callout { align-items:flex-start; flex-direction:column; }
  .botops-permission-callout .b { width:100%; }
  .botops-cap-form { justify-content:flex-start; }
}
@media (max-width: 520px) {
  .botops-status { align-items:flex-start; }
  .botops-latency { display:none; }
  .site .botops-beta-notice { flex-direction:column; padding:18px; }
  .botops-beta-copy .b { width:100%; justify-content:center; }
  .site .botops-panel { padding:22px 18px !important; }
  .botops-section-head { gap:16px; margin-bottom:20px; padding-bottom:18px; }
  .botops-table-row,.botops-empty { padding:16px; }
  .botops-action-row,.botops-action-row form,.botops-action-row .b { width:100%; }
  .botops-action-row .b { text-align:center; }
  .botops-webhook-center { padding:18px 15px; }
  .botops-webhook-heading { flex-direction:column; }
  .botops-code-box>strong { font-size:1.6rem; letter-spacing:.1em; overflow-wrap:anywhere; }
  .site .botops-coming-soon { flex-direction:column; }
}

/* Standard squad selector */
.squad-template-field { grid-column: 1 / -1; }
.squad-template-control { display: grid; gap: 10px; }
.squad-template-control select { width: 100%; min-height: 48px; border-color: var(--line2); background-color: #171e23; }
.squad-template-preview { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-width: 180px; padding: 9px 12px; border: 1px solid rgba(228,87,46,.35); background: linear-gradient(135deg,rgba(228,87,46,.08),rgba(255,255,255,.018)); }
.squad-template-preview img { width: 32px; height: 32px; object-fit: contain; }
.squad-template-preview strong,.squad-template-preview small { display: block; }
.squad-template-preview strong { color: var(--text-hi); font: 600 .74rem/1.1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.squad-template-preview small { margin-top: 4px; color: var(--text-mid); font-size: .67rem; }
.squad-template-field .field-hint { display: block; margin-top: 6px; color: var(--text-dim); font-size: .72rem; }
.squad-custom-name[hidden] { display: none; }
.squad-builder [data-squad-submit]:disabled { cursor: not-allowed; opacity: .45; }
@media (max-width: 720px) {
  .squad-template-preview { width: 100%; }
  .squad-template-field .field-hint { line-height: 1.45; }
}
@media (max-width: 760px) {
  .site section.squad-roster-guide { padding: 21px 18px; }
  .squad-roster-guide > div:first-child { display: block; padding-bottom: 17px; }
  .squad-preset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
  .squad-preset-list span { min-height: 58px; padding: 9px 10px; }
  .squad-preset-list img { width: 32px; height: 32px; }
}
@media (max-width: 420px) {
  .squad-preset-list { grid-template-columns: 1fr; }
}

/* Community moderation center */
.community-edit-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.moderation-shell { max-width: 980px; }
.moderation-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-top:7px; }
.moderation-page-head h1 { margin:0; }
.moderation-page-head p { max-width:650px; margin:10px 0 0; line-height:1.55; }
.moderation-callout { display:flex; align-items:flex-start; gap:13px; margin:22px 0 16px; padding:16px 18px; border:1px solid rgba(228,87,46,.35); background:linear-gradient(135deg,rgba(228,87,46,.09),rgba(255,255,255,.015)); }
.moderation-callout-mark { display:grid; place-items:center; width:26px; height:26px; flex:none; border:1px solid rgba(228,87,46,.65); color:var(--accent); font:700 .9rem var(--mono); }
.moderation-callout strong { color:var(--text-hi); font-size:.88rem; }
.moderation-callout p { margin:4px 0 0; color:var(--text-mid); font-size:.78rem; line-height:1.5; }
.site section.moderation-members-panel,.site section.moderation-history-panel { margin-top:16px; padding:24px; }
.moderation-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-bottom:15px; border-bottom:1px solid var(--line); }
.moderation-section-head h2 { margin:6px 0 0; font-size:1.55rem; }
.moderation-count { color:var(--text-mid); font:600 .6rem var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.moderation-member-list { display:grid; gap:9px; margin-top:16px; }
.moderation-member-row { display:grid; grid-template-columns:minmax(210px,1.25fr) minmax(160px,.75fr) auto; align-items:center; gap:14px; padding:13px 14px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008)); }
.moderation-member-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.moderation-member-identity img,.moderation-member-identity>span { display:grid; place-items:center; width:39px; height:39px; flex:none; border-radius:9px; background:var(--bg-2); object-fit:cover; color:var(--accent); font:700 1rem var(--display); }
.moderation-member-identity strong,.moderation-member-identity small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.moderation-member-identity strong { color:var(--text-hi); font-size:.88rem; }
.moderation-member-identity small { margin-top:4px; color:var(--text-mid); font:.59rem var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.moderation-member-state { color:var(--text-mid); font:.6rem var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.moderation-member-state.is-muted { color:#f1bd73; }
.moderation-member-actions { display:flex; justify-content:flex-end; align-items:flex-start; gap:7px; flex-wrap:wrap; }
.moderation-member-actions details { position:relative; }
.moderation-member-actions summary { list-style:none; cursor:pointer; }
.moderation-member-actions summary::-webkit-details-marker { display:none; }
.moderation-inline-form { display:grid; gap:9px; min-width:260px; margin-top:8px; padding:13px; border:1px solid var(--line2); background:#11171b; box-shadow:0 15px 30px rgba(0,0,0,.35); }
.moderation-inline-form label { display:grid; gap:5px; color:var(--text-mid); font:.56rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.moderation-inline-form input,.moderation-inline-form select { min-height:38px; font: .78rem var(--sans); letter-spacing:0; text-transform:none; }
.moderation-empty { padding:20px 0 3px; color:var(--text-mid); font-size:.82rem; }
.moderation-history-list { display:grid; gap:0; margin-top:8px; }
.moderation-history-row { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.moderation-history-row:last-child { border-bottom:0; }
.moderation-history-row strong,.moderation-history-row span,.moderation-history-row small { display:block; }
.moderation-history-row strong { color:var(--text-hi); font:.7rem var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.moderation-history-row span { margin-top:4px; color:var(--text-mid); font-size:.78rem; }
.moderation-history-row small { margin-top:4px; color:var(--text-dim); font-size:.72rem; }
.moderation-history-row time { flex:none; color:var(--text-dim); font:.58rem var(--mono); white-space:nowrap; }
.moderation-mute-notice { margin-top:16px; border-color:rgba(241,189,115,.35); background:linear-gradient(135deg,rgba(241,189,115,.08),rgba(255,255,255,.01)); }
.moderation-mute-notice strong { display:block; margin-top:6px; color:var(--text-hi); }
.moderation-mute-notice p { margin:7px 0 0; color:var(--text-mid); }
@media (max-width: 760px) {
  .community-edit-actions .b { flex:1; text-align:center; }
  .moderation-page-head { align-items:flex-start; flex-direction:column; }
  .moderation-page-head .b { width:100%; text-align:center; }
  .moderation-member-row { grid-template-columns:1fr; align-items:flex-start; gap:10px; }
  .moderation-member-state { padding-top:8px; border-top:1px solid var(--line); }
  .moderation-member-actions { justify-content:flex-start; width:100%; }
  .moderation-member-actions details,.moderation-member-actions details>summary,.moderation-member-actions>form,.moderation-member-actions>form .b { width:100%; }
  .moderation-member-actions>details .b { width:100%; text-align:center; }
  .moderation-inline-form { min-width:0; }
  .site section.moderation-members-panel,.site section.moderation-history-panel { padding:18px 16px; }
}
.community-owner-limit{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);color:var(--text-mid);font:700 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.com-logo-media{display:block;width:72px;height:72px;flex:none}.com-logo-media img{display:block;width:100%;height:100%;object-fit:cover}.com-banner-media{display:block;width:100%;height:100%}.com-banner-media img{display:block;width:100%;height:100%;object-fit:cover}.com-hero-logo{display:block;flex:none;width:112px;height:112px}.com-hero-logo img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:650px){.com-hero-logo{width:86px;height:86px}}

/* ---------- the browser list: one row per community ---------- */
.com-list { margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.com-list-head, .com-row {
  display:grid; grid-template-columns:44px minmax(0,1fr) 150px 88px 150px 128px 92px 84px;
  gap:14px; align-items:center; padding:12px 16px;
}
.com-list-head { background:var(--bg-2); border-bottom:1px solid var(--line); color:var(--text-mid); font:600 .62rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.com-row { background:var(--bg-1); border-bottom:1px solid var(--line); transition:background .12s; }
.com-row:last-child { border-bottom:0; }
.com-row:hover { background:var(--bg-hover); }
.com-row.is-featured { box-shadow:inset 3px 0 0 var(--accent); }
.com-row-logo { display:block; width:44px; height:44px; border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-2); border:1px solid var(--line); }
.com-row-logo-media, .com-row-logo-media img { display:block; width:44px; height:44px; object-fit:cover; }
.com-row-fac, .com-row-ph { display:grid; place-items:center; width:100%; height:100%; color:var(--text-hi); }
.com-row-ph { font:700 1rem/1 var(--display); color:var(--text-mid); }
.com-row-name { min-width:0; }
.com-row-name .nm { color:var(--text-hi); font-weight:600; text-decoration:none; }
.com-row-name .nm:hover, .com-row-name .nm:focus-visible { color:var(--accent); }
.com-row-featured { margin-left:10px; color:var(--accent); font:600 .58rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; vertical-align:2px; }
.com-row-name .tl { display:block; margin-top:3px; color:var(--text-mid); font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.com-row-info { display:contents; }
.com-row-cell { min-width:0; }
.com-row .meta { display:block; color:var(--text-mid); font:500 .78rem/1.4 var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.com-row .meta.num { color:var(--text-hi); font-variant-numeric:tabular-nums; }
.com-row .meta.live { color:var(--text-hi); }
.com-row .meta.sub { color:var(--text-dim); font-size:.7rem; }
.com-row .meta.on { color:var(--live); }
.com-row .meta.off { color:var(--text-dim); }
.com-row-open { justify-self:end; }
@media (max-width:880px) {
  .com-list-head { display:none; }
  .com-row {
    grid-template-columns:44px minmax(0,1fr);
    grid-template-areas:"logo name" ". info" ". supporter" ". open";
    gap:12px 14px; padding:16px;
  }
  .com-row-logo { grid-area:logo; }
  .com-row-name { grid-area:name; }
  .com-row-name .tl { white-space:normal; }
  .com-row-info { grid-area:info; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; padding-top:10px; border-top:1px solid var(--line); }
  .com-row-cell::before { display:block; margin-bottom:4px; color:var(--text-dim); font:600 .55rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
  .com-row .c-region::before { content:"Region"; }
  .com-row .c-followers::before { content:"Followers"; }
  .com-row .c-activity::before { content:"Activity"; }
  .com-row .c-recruiting::before { content:"Recruiting"; }
  .com-row .c-supporter::before { content:"NOW"; }
  .com-row-cell.c-supporter { grid-area:supporter; }
  .com-row-cell.c-supporter:empty { display:none; }
  .com-row .meta { white-space:normal; }
  .com-row-open { grid-area:open; justify-self:stretch; }
  .com-row-open .b { width:100%; }
}
@media (max-width:480px) {
  .com-row { grid-template-columns:36px minmax(0,1fr); padding:14px; }
  .com-row-logo, .com-row-logo-media, .com-row-logo-media img { width:36px; height:36px; }
  .com-row-info { grid-template-columns:1fr; }
}

.com-row .server-state.live { color: var(--live, #3dba7e); }
.com-row .server-state.unknown { color: var(--text-mid); }
.com-row .server-state.dead { color: #c45b4a; }

/* community-tabs overflow fix */
.community-subnav:has(.community-more) .community-tabs { overflow: visible; }
.community-more { position: relative; display: flex; align-items: stretch; flex: none; }
.community-more > summary {
  list-style: none; cursor: pointer;
  padding: 10px 12px; border-bottom: 2px solid transparent;
  color: var(--text-mid); font: 700 .66rem var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
}
.community-more > summary::-webkit-details-marker { display: none; }
.community-more > summary.on,
.community-more > summary:hover { color: var(--text-hi); }
.community-more > summary.on { border-bottom-color: var(--accent); }
.community-more-panel {
  position: absolute; top: calc(100% - 2px); left: 0; min-width: 180px; z-index: 40;
  padding: 6px 0; border: 1px solid var(--line); background: #0B0E10;
}
.community-more-panel a { display: block; width: 100%; border-bottom: 0; }

.community-tabs {
  display: flex;
  align-items: stretch;
  height: 38px;
  gap: 0;
}
.community-tabs a,
.community-tabs .community-more,
.community-tabs .community-more > summary {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  color: var(--text-mid);
  font: 700 .66rem/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: transparent;
}
.community-tabs a.on,
.community-tabs .community-more > summary.on {
  color: var(--text-hi);
  border-bottom-color: var(--accent);
}





/* hq-supporter-size */
.hq-supporter {
  display: block !important;
  width: 125px !important;
  height: 125px !important;
  max-width: 125px !important;
  max-height: 125px !important;
  margin: 10px 0 4px !important;
  object-fit: contain;
}
.com-row .hq-supporter,
.com-card .hq-supporter,
.com-server-copy .hq-supporter,
.com-server-name .hq-supporter,
.user-facts .hq-supporter,
.user-identity .hq-supporter {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  margin: 0 0 0 8px !important;
}
@media (max-width: 760px) {
  .hq-supporter {
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
}

.com-row-cell.c-supporter { display:grid; place-items:center; justify-items:center; text-align:center; }
.com-row-cell.c-supporter .hq-supporter {
  width: 32px !important; height: 32px !important; max-width: 32px !important; max-height: 32px !important; margin: 0 !important;
}

.hq-supporter-label {
  color: var(--accent, #E4572E);
  font: 700 .62rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.community-profile-page .com-server-supporter { justify-items: start; min-width: 0; }

.com-list-head .h-hq { text-align:center; }