/* War room stage (docs/WARROOM-SPEC.md 2.3, 3.6-3.8, 5.1, 5.2, 5.16, 5.17): the room still and the table layer,
   the live crest's canvas, the tall-mode hero, and the stage layouts of the landing, HQ and the access and error
   pages. A stage page that does not fit falls back to the desk frame (wr-frames.css) and to the desk layout here;
   the stage media queries below repeat wr-frames.css's, and html.wr-stage-tight (wr-rim.js) switches them off.
   Forced colours hide the room, so they keep the desk layout (the stage queries ask for forced-colors: none). */
@layer wr.stage {
/* the room: the still under everything (z 0); on desk frames the same still again in front of the content, cut
   from the table's far rim down; over the 64 px above the rim it fades in, so text darkens into the room (whose
   pixels there are the room colour) before the rim covers it; the table itself stays opaque (z 20) */
.wr-room, .wr-table { position: fixed; inset: 0; z-index: 0; background-color: var(--wr-bg); background-repeat: no-repeat; background-size: cover; pointer-events: none;
  background-position: 50% calc((1 - var(--wr-pin, 0)) * var(--wr-oy, 0px) + var(--wr-pin, 0) * 100%); }
.wr-table { z-index: 20; display: none; background-color: transparent; }
.wr-room { overflow: hidden; }
.wr-holo { position: absolute; display: block; opacity: 0; transition: opacity .6s linear; }
html[data-holo="live"] .wr-holo, html[data-holo="idle"] .wr-holo { opacity: 1; }

@media (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .wr-table { display: var(--wr-table-display, none); --wr-table-top-v: calc(var(--wr-oy) + var(--wr-table-top-y, 760) * var(--wr-s));
    -webkit-mask-image: linear-gradient(transparent calc(var(--wr-table-top-v) - 64px), #000 var(--wr-table-top-v));
    mask-image: linear-gradient(transparent calc(var(--wr-table-top-v) - 64px), #000 var(--wr-table-top-v)); }
}

/* ---------- tall mode: stage pages open on a hero (the table and the crest), desk pages are plain ---------- */
@media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  body[data-composition="desk"] .wr-room { display: none; }
  body[data-composition^="stage"] {
    --wr-hero-h: min(38svh, (var(--wr-hero-y1, 585) - var(--wr-hero-y0, 194)) * 100vw / var(--wr-fw, 390));
    --wr-hero-k: calc(var(--wr-hero-h) / (var(--wr-hero-y1, 585) - var(--wr-hero-y0, 194)));
  }
  body[data-composition="stage-landing"] { --wr-hero-h: min(44svh, (var(--wr-hero-y1, 585) - var(--wr-hero-y0, 194)) * 100vw / var(--wr-fw, 390)); }
  body[data-composition^="stage"] .wr-room {
    position: absolute; inset: 56px 0 auto; height: var(--wr-hero-h);
    background-size: calc(var(--wr-fw, 390) * var(--wr-hero-k)) calc(var(--wr-fh, 844) * var(--wr-hero-k));
    background-position: 50% calc(var(--wr-hero-y0, 194) * var(--wr-hero-k) * -1);
  }
  /* the sides and the foot of the hero fade into the room colour */
  body[data-composition^="stage"] .wr-room::after { content: ""; position: absolute; inset: 0; z-index: 1; --half: calc(var(--wr-fw, 390) * var(--wr-hero-k) / 2);
    background: linear-gradient(transparent 80%, var(--wr-bg)),
      linear-gradient(90deg, var(--wr-bg) calc(50% - var(--half)), transparent calc(50% - var(--half) * .55),
        transparent calc(50% + var(--half) * .55), var(--wr-bg) calc(50% + var(--half))); }
  body[data-composition^="stage"] #main { padding-top: calc(var(--wr-hero-h) + 4px); }
}

/* ---------- landing and access/error pages: the text block (room-mode layout set below) ---------- */
.home-landing h1, body[data-composition="stage-landing"] .public-head h1 { font-size: clamp(2.25rem, 3.2vw, 2.875rem); font-weight: 700; font-stretch: 108%; line-height: 1.05; letter-spacing: -.01em; }
body[data-composition="stage-landing"] .public-head h1 { font-size: 2.5rem; }
.home-landing h1 > span { font-weight: inherit; }
.wr-landing-sub { margin-top: 12px; color: var(--wr-ink-2); font-size: 1.1875rem; }
.landing-access { display: flex; align-items: center; gap: 16px 28px; margin-top: 36px; }
.landing-access form { flex: none; margin: 0; }
.public-gate-download > span:first-child { white-space: nowrap; }
.public-gate-discord img, .public-discord img { width: 22px; height: 22px; }
.public-gate-download { display: inline-flex; flex: 0 1 auto; flex-wrap: wrap; align-items: baseline; gap: 0 12px; min-width: 0; min-height: 32px; font-weight: 600; text-decoration: none; }
.public-gate-download > span:first-child { text-decoration: underline 1px var(--wr-link-rule); text-underline-offset: 3px; }
.public-gate-download:hover > span:first-child { text-decoration-color: currentColor; }
.public-gate-download .holo-meta { color: var(--wr-ink-3); font-weight: 400; }
.public-gate-download .public-gate-download-only, .public-gate-download.is-windows-only .public-gate-download-size { display: none; }
.public-gate-download.is-windows-only .public-gate-download-only { display: inline; }
.public-head { display: block; margin: 0 0 16px; }
.access-code { margin: 0 0 10px; color: var(--wr-ink-2); font-size: 15px; font-weight: 500; }
.access-card { margin: 0; }
.public-line { color: var(--wr-ink); font-size: 1.1875rem; }
.public-meta { margin-top: 10px; color: var(--wr-ink-3); font-size: .875rem; }
.public-meta > div { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.public-meta dt { color: var(--wr-ink-2); }
.public-meta dd { overflow-wrap: anywhere; font-family: var(--wr-mono); font-size: .8125rem; }
.public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.public-actions form { margin: 0; }
body[data-composition^="stage"] #main { --wr-col: 720px; }

/* ---------- HQ (the desk fallback and tall mode are the defaults; the stage layout is set below) ---------- */
.wr-hq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; align-items: start; }
body[data-composition="stage-hq"] #main { --wr-col: 1120px; }
.wr-hq-notice, .wr-hq-next { grid-column: 1 / -1; }
.wr-hq-notice h2, .wr-hq-next h2 { margin: 0 0 6px; color: var(--wr-ink-2); font-size: .9375rem; font-weight: 500; font-stretch: 100%; }
.wr-hq-notice p { max-width: 60ch; color: var(--wr-ink); font-size: 1.0625rem; line-height: 1.4; overflow-wrap: anywhere; }
.wr-hq-server { display: flex; flex-direction: column; min-width: 0; }
.wr-hq-server h2 { font-size: 2.125rem; font-weight: 700; font-stretch: 110%; line-height: 1; }
.wr-hq-state { margin-top: 8px; color: var(--wr-ink-3); font-size: 1.0625rem; }
/* the state word takes its state colour from wr-base.css ([data-state] > [data-status-word]) */
.wr-hq-state strong { font-weight: 650; }
.wr-hq-state:not([data-state="running"]) .wr-hq-live { display: none; }
.wr-hq-count:not([hidden])::before { content: "\a0\b7\a0"; color: var(--wr-ink-4); }
.wr-rows { display: grid; gap: 8px; margin-top: 20px; }
.wr-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
.wr-row > .holo-label { margin: 0; color: var(--wr-ink-2); font-size: .9375rem; font-weight: 500; font-stretch: 100%; line-height: 1.5; }
.wr-row-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.wr-row-value form { margin: 0; }
.wr-row-value code { color: var(--wr-ink-strong); font-family: var(--site-font); font-size: 1rem; font-weight: 500; overflow-wrap: break-word; }
.wr-row-stack { flex-direction: column; align-items: flex-start; }
.wr-row-value .holo-note { color: var(--wr-ink-3); }
.wr-hq-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 20px; }
.wr-hq-next p:not(.wr-hq-when) { font-size: clamp(1.375rem, 3.1vh, 1.75rem); font-weight: 600; font-stretch: 104%; line-height: 1.2; }
.wr-hq-next p a { text-decoration-thickness: 1px; }
.wr-hq-when { margin-top: 2px; color: var(--wr-ink-3); }

@media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .wr-hq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wr-hq-server h2 { font-size: 1.75rem; }
  .wr-row { grid-template-columns: 6.5em minmax(0, 1fr); }
  .landing-access { display: grid; justify-items: start; gap: 18px; margin-top: 28px; }
  .landing-access form, .landing-access .button-primary { width: 100%; }
  .landing-access .button-primary { min-height: 48px; }
  /* full width on a phone; on a tablet or a phone on its side the button keeps a button's width */
  @media (min-width: 481px) { .landing-access form { max-width: 26rem; } }
  .home-landing h1 { font-size: 2rem; }
  body[data-composition="stage-landing"] .public-head h1 { font-size: 2rem; }
  .wr-landing-sub { margin-top: 8px; }
}

/* ---------- room mode, stage frames: the landing and the access and error pages ---------- */
@media (min-width: 1200px) and (min-height: 640px) and (min-aspect-ratio: 5/4) and (forced-colors: none) {
  html:not(.wr-stage-tight) body[data-composition="stage-landing"] .site-shell { min-height: 100vh; padding-bottom: 0; }
  html:not(.wr-stage-tight) body[data-section="landing"] .company-brand, html:not(.wr-stage-tight) body[data-composition="stage-landing"] .company-crest { display: none; }
  /* the text block stands 64-96 px left of the crest: at the gutter on 16:10, moved in towards the crest on wider
     windows so the name and the hologram read as one group */
  html:not(.wr-stage-tight) body[data-composition="stage-landing"] #main {
    --land-x1: calc(var(--wr-ox) + var(--wr-crest-x0, 700) * var(--wr-s));
    position: absolute; left: max(var(--wr-gutter), var(--land-x1) - 96px - 35rem); top: calc(var(--wr-oy) + (var(--wr-crest-cy, 300) + var(--wr-lens-y, 590)) / 2 * var(--wr-s));
    width: min(35rem, var(--land-x1) - var(--wr-gutter) - 64px); margin: 0; padding: 0; translate: 0 -50%;
  }
  html:not(.wr-stage-tight) body[data-composition="stage-landing"] .page-footer { position: absolute; bottom: 0; left: 0; margin: 0; }
}

/* ---------- room mode, stage frames: HQ (from 1366 px wide; 760 px tall, or 900 px with a long company notice) ----------
   The two blocks are the same layout for the two notice lengths. Columns stand 64 px from the crest box (48 px
   below 1440 px wide, so the action and copy rows stay on one line); "Next up" is centred under the band with its
   title on one line; the disclaimer is a two-line colophon at the bottom left, clear of "Next up" (wr-rim.js
   switches the page to its desk frame if they still meet). */
@media (min-width: 1366px) and (min-height: 760px) and (min-aspect-ratio: 7/5) and (forced-colors: none) {
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) {
    --hq-gap: 64px;
    --hq-lx1: calc(var(--wr-ox) + var(--wr-crest-x0, 480) * var(--wr-s) - var(--hq-gap)); --hq-lx0: max(var(--wr-gutter), var(--hq-lx1) - 25rem);
    --hq-rx0: calc(var(--wr-ox) + var(--wr-crest-x1, 960) * var(--wr-s) + var(--hq-gap)); --hq-rx1: min(100vw - var(--wr-gutter), var(--hq-rx0) + 25rem);
  }
  @media (max-width: 1439px) { html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) { --hq-gap: 48px; } }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .site-shell { min-height: 100vh; padding-bottom: 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .company-crest { display: none; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #main { position: absolute; top: var(--wr-head-h); left: 0; width: 100%; margin: 0; padding: clamp(24px, 6vh, 56px) 0 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #main > .flash { width: calc(var(--hq-lx1) - var(--hq-lx0)); margin-left: var(--hq-lx0); }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .wr-hq {
    grid-template-columns: var(--hq-lx0) calc(var(--hq-lx1) - var(--hq-lx0)) minmax(0, 1fr) calc(var(--hq-rx1) - var(--hq-rx0)) minmax(0, calc(100vw - var(--hq-rx1)));
    grid-template-rows: auto auto; gap: 0; align-items: stretch;
  }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-slate-arma { grid-column: 2; grid-row: 1 / 3; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-slate-notice { grid-column: 4; grid-row: 1; margin-bottom: 20px; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-slate-teamspeak { grid-column: 4; grid-row: 2; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .wr-hq:not(:has(> #hq-slate-notice)) > #hq-slate-teamspeak { grid-row: 1 / 3; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-next {
    position: absolute; top: calc(var(--wr-oy) + var(--wr-band-bot-y, 720) * var(--wr-s) + 32px - var(--wr-head-h)); left: 50%;
    width: min(640px, 100% - 2 * var(--wr-gutter)); translate: -50% 0; text-align: center;
  }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-next > * { width: fit-content; max-width: 100%; margin-inline: auto; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) #hq-next > p:not(.wr-hq-when) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .page-footer { position: absolute; bottom: 0; left: 0; margin: 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"]:not(.wr-notice-long) .site-disclaimer > span { display: block; }
}
@media (min-width: 1366px) and (min-height: 900px) and (min-aspect-ratio: 7/5) and (forced-colors: none) {
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long {
    --hq-gap: 64px;
    --hq-lx1: calc(var(--wr-ox) + var(--wr-crest-x0, 480) * var(--wr-s) - var(--hq-gap)); --hq-lx0: max(var(--wr-gutter), var(--hq-lx1) - 25rem);
    --hq-rx0: calc(var(--wr-ox) + var(--wr-crest-x1, 960) * var(--wr-s) + var(--hq-gap)); --hq-rx1: min(100vw - var(--wr-gutter), var(--hq-rx0) + 25rem);
  }
  @media (max-width: 1439px) { html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long { --hq-gap: 48px; } }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long .site-shell { min-height: 100vh; padding-bottom: 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long .company-crest { display: none; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #main { position: absolute; top: var(--wr-head-h); left: 0; width: 100%; margin: 0; padding: clamp(24px, 6vh, 56px) 0 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #main > .flash { width: calc(var(--hq-lx1) - var(--hq-lx0)); margin-left: var(--hq-lx0); }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long .wr-hq {
    grid-template-columns: var(--hq-lx0) calc(var(--hq-lx1) - var(--hq-lx0)) minmax(0, 1fr) calc(var(--hq-rx1) - var(--hq-rx0)) minmax(0, calc(100vw - var(--hq-rx1)));
    grid-template-rows: auto auto; gap: 0; align-items: stretch;
  }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-slate-arma { grid-column: 2; grid-row: 1 / 3; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-slate-notice { grid-column: 4; grid-row: 1; margin-bottom: 20px; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-slate-teamspeak { grid-column: 4; grid-row: 2; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-next {
    position: absolute; top: calc(var(--wr-oy) + var(--wr-band-bot-y, 720) * var(--wr-s) + 32px - var(--wr-head-h)); left: 50%;
    width: min(640px, 100% - 2 * var(--wr-gutter)); translate: -50% 0; text-align: center;
  }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-next > * { width: fit-content; max-width: 100%; margin-inline: auto; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long #hq-next > p:not(.wr-hq-when) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long .page-footer { position: absolute; bottom: 0; left: 0; margin: 0; }
  html:not(.wr-stage-tight) body[data-composition="stage-hq"].wr-notice-long .site-disclaimer > span { display: block; }
}

@media (scripting: none) {
  @media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
    body[data-composition^="stage"] .wr-room { top: 104px; }
    body[data-composition^="stage"] #site-nav { margin-top: var(--wr-hero-h); }
    body[data-composition^="stage"]:has(#site-nav) #main { padding-top: 28px; }
  }
}

/* forced colours: no room and no hero, so no space kept for them */
@media (forced-colors: active) {
  body[data-composition^="stage"] #main { padding-top: 28px; }
}

/* the 500 page has no header, no rim and no scripts: the still alone behind its text */
body.space-site--error #main { position: relative; z-index: 10; width: min(560px, 100% - 2 * var(--wr-gutter)); margin: 0 0 0 var(--wr-gutter); padding: 18vh 0 48px; }
@media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  body.space-site--error .wr-room { inset: 0 0 auto; }
  body.space-site--error #main { width: auto; margin: 0 16px; padding-top: calc(var(--wr-hero-h) + 16px); }
}
}