/* Resistance website layout (rc-web). Page structure only: colours, fonts, spacing, corners and
   strokes come from the UI kit tokens (kit/tokens.css, docs/design/ui-kit.md); components are the
   kit's rc-* classes (kit/components.css). No inline styles anywhere (CSP style-src 'self').
   Works from 360 px width up; the content column is capped at --rc-web-max (1200 px). */

html { background: var(--rc-bg-0); -webkit-text-size-adjust: 100%; }
body.rc-app { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.rc-app a { color: inherit; }
.rc-app p { margin: 0; }
.rc-app img { max-width: 100%; }
/* Titles come from the backend (news, server names): long unbroken words must not widen the page. */
.rc-app h1, .rc-app h2, .rc-app h3 { overflow-wrap: break-word; }
.site-main { flex: 1; }
.site-page { padding-block: var(--rc-space-2xl) var(--rc-space-3xl); display: flex; flex-direction: column; gap: var(--rc-space-2xl); }
.site-page.rc-stack { gap: var(--rc-space-xl); }

/* ---------- Header and navigation ---------- */
.site-header { background: var(--rc-bg-1); border-bottom: var(--rc-stroke-hair) solid var(--rc-line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rc-space-s) var(--rc-space-l); padding-block: var(--rc-space-s); }
.site-brand { display: inline-flex; align-items: center; gap: var(--rc-space-s); text-decoration: none; margin-right: auto; }
.site-brand__mark { width: var(--rc-icon-xl); height: var(--rc-icon-xl); flex: none; }
.site-brand__name { font: 800 var(--rc-fs-xl)/1 var(--rc-font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.site-brand__sub { font: 600 var(--rc-fs-s)/1 var(--rc-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rc-accent); }
.site-nav { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.site-header .site-nav { order: 3; flex-basis: 100%; }
.site-header__cta { flex: none; }
.site-user { justify-content: flex-end; }
@media (min-width: 48rem) {
  .site-header .site-nav { order: 0; flex-basis: auto; }
}
/* Phones (360 px and up): brand and call to action share the first row, the four tabs fit the
   second row without scrolling. */
@media (max-width: 30rem) {
  .site-brand__sub { display: none; }
  .site-nav .rc-tab { padding-inline: var(--rc-space-m); }
}

/* ---------- Notices (MOTD on the site, previews in the admin UI) ---------- */
.site-notices { display: flex; flex-direction: column; gap: var(--rc-space-xs); }
.site-notices:not(:empty) { padding-block: var(--rc-space-s); background: var(--rc-bg-0); }
.site-notice {
  --_bar: var(--rc-accent);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--rc-space-s) var(--rc-space-m);
  padding: var(--rc-space-s) var(--rc-space-m);
  background: var(--rc-bg-2);
  border-left: var(--rc-stroke-accent) solid var(--_bar);
}
.site-notice--warning { --_bar: var(--rc-warn); }
.site-notice--maintenance { --_bar: var(--rc-danger); }
.site-notice__icon { color: var(--_bar); }
.site-notice__text { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.site-notice__window { font-size: var(--rc-fs-s); }
/* Phones: chip and text share one row (the chip carries level and colour), so two banners do not
   push the page content below the first screen. */
@media (max-width: 30rem) {
  .site-notice { gap: var(--rc-space-xs) var(--rc-space-s); padding: var(--rc-space-s); font-size: var(--rc-fs-s); }
  .site-notice__icon { display: none; }
  .site-notice__text { flex-basis: 10rem; }
}

/* ---------- Hero ---------- */
.site-hero { padding-inline: 0; }
.site-hero__inner { display: flex; flex-direction: column; gap: var(--rc-space-m); }
.site-hero__line { display: block; }
.site-hero__cta { margin-top: var(--rc-space-s); }
.site-overline { color: var(--rc-accent); font: 600 var(--rc-fs-s)/1.2 var(--rc-font-display); letter-spacing: 0.12em; text-transform: uppercase; }
/* Phones: the two calls to action stack as full-width buttons. */
@media (max-width: 30rem) {
  .site-hero__cta > .rc-btn { flex: 1 1 100%; }
}

/* ---------- Sections, tiles, cards ---------- */
/* For short fixed lists (three news cards, three channels): the cards stretch over the row instead
   of leaving the empty column that the kit's auto-fill .rc-grid keeps on wide screens. */
.rc-grid.site-grid-fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.site-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rc-space-s) var(--rc-space-l); }
/* 11rem tiles (auto-fit): the five classes and five modes share one row from about 1000 px up. */
.site-tiles { display: grid; gap: var(--rc-space-l); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.site-tile { display: flex; flex-direction: column; gap: var(--rc-space-s); }
.site-tile__icon { color: var(--rc-accent); }
/* Phones: one tile per row with the icon beside the text instead of above it. */
@media (max-width: 30rem) {
  .site-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--rc-space-xs) var(--rc-space-m); }
  .site-tile > .site-tile__icon { grid-row: span 2; }
}
.site-tile__title { font-size: var(--rc-fs-l); }
.site-channel { display: flex; flex-direction: column; gap: var(--rc-space-m); }
.site-news-list { display: flex; flex-direction: column; gap: var(--rc-space-m); }
.site-news-card { display: flex; flex-direction: column; gap: var(--rc-space-s); }
.site-news-card__title { font-size: var(--rc-fs-l); }
.site-news-card__link { text-decoration: none; }
.site-news-card__link:hover { color: var(--rc-accent-hi); text-decoration: underline; text-underline-offset: 0.15em; }
.site-records { display: flex; flex-direction: column; gap: var(--rc-space-m); margin: 0; padding: 0; list-style: none; }

/* ---------- Server summary ---------- */
.site-servers-summary { display: flex; flex-wrap: wrap; gap: var(--rc-space-l) var(--rc-space-2xl); }
.site-stat { display: flex; align-items: baseline; gap: var(--rc-space-s); }
.site-stat__value { font-size: var(--rc-fs-2xl); color: var(--rc-accent); }
.site-stat__label { color: var(--rc-text-mid); font: 600 var(--rc-fs-s)/1.2 var(--rc-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.site-server-mini .rc-row { cursor: default; }
.site-server-name { flex-wrap: nowrap; }
.site-lock { display: inline-flex; color: var(--rc-warn); }
@media (max-width: 36rem) {
  .site-hide-s { display: none; }
  /* Server names wrap instead of being cut to a few characters. */
  .site-server-mini .rc-row { padding-block: var(--rc-space-xs); }
  .site-server-mini .rc-row__grow { white-space: normal; overflow-wrap: anywhere; }
  /* The server table becomes one card per server; each cell shows its column name (data-label). */
  .site-server-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-server-table, .site-server-table tbody { display: block; }
  .site-server-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rc-space-s) var(--rc-space-m); padding: var(--rc-space-m); background: var(--rc-c-row-normal-bg); border-bottom: var(--rc-stroke-hair) solid var(--rc-line); }
  .site-server-table tbody tr:nth-child(even) { background: var(--rc-c-row-alt-bg); }
  .site-server-table td,
  .site-server-table td.rc-num,
  .site-server-table td.rc-wrap,
  .site-server-table tbody tr:nth-child(even) td,
  .site-server-table tbody tr:hover td { display: flex; flex-direction: column; align-items: flex-start; gap: var(--rc-space-2xs); height: auto; min-width: 0; padding: 0; background: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .site-server-table td:first-child { grid-column: 1 / -1; }
  .site-server-table .site-server-name { flex-wrap: wrap; }
  .site-server-table td[data-label]::before { content: attr(data-label); color: var(--rc-text-lo); font: 600 var(--rc-fs-xs)/1.2 var(--rc-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
}

/* ---------- Text ---------- */
.site-lead { font-size: var(--rc-fs-l); color: var(--rc-text-mid); max-width: 48rem; }
.site-back { display: inline-flex; align-items: center; gap: var(--rc-space-xs); width: fit-content; }
/* Reading columns stay left-aligned with the header; only their width is capped. */
.site-article > article { max-width: 52rem; }
.site-prose { display: flex; flex-direction: column; gap: var(--rc-space-m); max-width: 48rem; overflow-wrap: anywhere; }
.site-prose ul, .site-steps { margin: 0; padding-left: var(--rc-space-xl); display: flex; flex-direction: column; gap: var(--rc-space-xs); }
.site-prose h2 { margin-top: var(--rc-space-l); }
.site-legal section { display: flex; flex-direction: column; gap: var(--rc-space-s); }
.site-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--rc-space-xs) var(--rc-space-m); margin: 0; }
.site-facts dt { color: var(--rc-text-mid); font: 600 var(--rc-fs-s)/1.45 var(--rc-font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.site-facts dd { margin: 0; }
.site-kbd { display: inline-block; min-width: 1.75rem; padding: 0 var(--rc-space-s); background: var(--rc-bg-3); border: var(--rc-stroke-hair) solid var(--rc-line-strong); border-radius: var(--rc-radius-s); font: 500 var(--rc-fs-s)/1.6 var(--rc-font-mono); text-align: center; }
.site-ranks { display: flex; flex-wrap: wrap; gap: var(--rc-space-m); margin: 0; padding: 0; list-style: none; }
.site-rank { display: flex; flex-direction: column; align-items: center; gap: var(--rc-space-xs); min-width: 8.5rem; text-align: center; }

/* ---------- States ---------- */
.site-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rc-space-s) var(--rc-space-m); }
.site-state--error, .site-state--warn { padding: var(--rc-space-m); background: var(--rc-bg-2); border-left: var(--rc-stroke-accent) solid var(--rc-danger); }
.site-state--warn { border-left-color: var(--rc-warn); }
.site-state--error p { flex: 1 1 16rem; }

/* ---------- Forms (admin) ---------- */
.site-filters { align-items: flex-end; gap: var(--rc-space-m); }
.site-filter { min-width: 12rem; }
.site-filter-check { min-height: var(--rc-control-m); }
.site-filters__submit { display: flex; align-items: flex-end; }
.site-form-grid { display: grid; gap: var(--rc-space-m); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); align-items: start; }
.site-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--rc-space-m); }
.site-form-row > .rc-field { flex: 1 1 14rem; }
.site-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--rc-space-s); min-width: 0; }
.site-input-mono { font-family: var(--rc-font-mono); }
.site-inline-form { padding: var(--rc-space-m) 0; white-space: normal; }
.site-flash { width: 100%; max-width: 48rem; }
.site-flash__text { flex: 1; color: var(--rc-text-hi); }
.site-secret { --_bd: var(--rc-warn); }
.site-editor { display: grid; gap: var(--rc-space-xl); grid-template-columns: minmax(0, 1fr); }
.site-preview { display: flex; flex-direction: column; gap: var(--rc-space-m); align-self: start; }
.site-preview__label { color: var(--rc-text-mid); font-size: var(--rc-fs-s); letter-spacing: 0.06em; }
@media (min-width: 64rem) { .site-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site-signin { display: grid; place-items: start center; }
.site-signin__panel { width: min(36rem, 100%); }

/* ---------- Footer ---------- */
.site-footer { margin-top: auto; background: var(--rc-bg-1); border-top: var(--rc-stroke-hair) solid var(--rc-line); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--rc-space-s); padding-block: var(--rc-space-xl); }
.site-footer__links { gap: var(--rc-space-s) var(--rc-space-l); }
.site-footer__build { font-size: var(--rc-fs-xs); }