/* War room shell (docs/WARROOM-SPEC.md 2.4, 3): header, rim navigation, drawer, footer, messages, desk column.
   Window modes: ROOM = (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4), written out in
   full (app.js holds the same string; wr-frames.css writes --wr-mode for the scripts). Stacking: the room still
   z 0, #main and the footer z 10, the desk table layer z 20, the rim z 30, popovers z 40; .site-shell and (in room
   mode) the header make no stacking context, so the rim and the popovers rise above the table. */
@layer wr.shell {
.site-shell { position: relative; }
#main, .page-footer { position: relative; z-index: 10; }
#main { display: block; outline: 0; }
#main:focus-visible { outline: 0; }

/* skip links: hidden until focused, then a chip at the top left */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 60; padding: 10px 14px; border-radius: 3px; background: var(--wr-surface); color: var(--wr-ink-strong); font-weight: 600; transform: translateY(-160%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 2px solid var(--wr-focus); outline-offset: 2px; }

/* brand */
.company-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--wr-ink-strong); font-weight: 600; font-stretch: 112%; text-decoration: none; white-space: nowrap; }
.company-brand:hover { color: #fff; }
.company-crest { display: block; flex: none; width: 26px; height: 26px; object-fit: contain; }
.company-wordmark, .company-wordmark strong { font-weight: 600; }

/* header status: "Arma 3 server Running · TeamSpeak 3 Online · 3 in voice" as type */
.server-status-list { display: flex; flex-wrap: nowrap; align-items: baseline; color: var(--wr-ink-3); white-space: nowrap; }
.server-status { display: inline-flex; align-items: baseline; gap: .35em; }
.server-status > strong { color: var(--wr-ink-3); font-weight: 400; }
.server-status .server-status-word { color: var(--wr-ink-strong); font-weight: 650; }
.server-status-led { display: none; }
.server-status + .server-status::before, .server-status-count:not([hidden])::before { content: "\00b7"; color: var(--wr-ink-4); font-weight: 400; }
/* each dot stands .5em from both neighbours; the pill's own .35em flex gap is already on one side of it */
.server-status + .server-status::before { margin: 0 .15em 0 .5em; }
.server-status-count:not([hidden])::before { margin: 0 .5em 0 .15em; }
.server-status[data-state="starting"] .server-status-word, .server-status[data-state="restarting"] .server-status-word, .server-status[data-state="stopping"] .server-status-word { color: var(--wr-busy); }
.server-status[data-state="unhealthy"] .server-status-word, .server-status[data-state="stopped"] .server-status-word, .server-status[data-state="offline"] .server-status-word { color: var(--wr-bad); }
.server-status[data-state="unknown"] .server-status-word { color: var(--wr-ink-3); }
.server-status-count { color: var(--wr-ink-3); }

/* community links and account */
.hangar-community, .nav-community { display: flex; align-items: center; gap: 18px; }
.hangar-community a, .nav-community a { display: inline-grid; place-items: center; min-width: 28px; min-height: 32px; opacity: .6; transition: opacity .12s; }
.hangar-community a:hover, .nav-community a:hover, .hangar-community a:focus-visible { opacity: 1; }
.hangar-community img, .nav-community img { display: block; width: 20px; height: 20px; }
.account-controls { display: flex; align-items: center; gap: 22px; }
.account-controls form { margin: 0; }
.account-identity { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--wr-ink-strong); }
.account-identity .account-avatar, .account-identity img.account-avatar { width: 24px; height: 24px; }
.account-avatar--placeholder { width: 24px; height: 24px; font-size: 12px; }
.account-session-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.account-display-name { display: block; max-width: 16ch; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.utility-button { color: var(--wr-ink-3); font-weight: 500; text-decoration: none; }
.utility-button:hover { color: var(--wr-ink-strong); }
.account-controls > a { color: var(--wr-ink); font-weight: 600; text-decoration: none; }
.account-controls > a:hover { color: #fff; }
/* the landing and the access pages carry the sign-in form themselves */
body[data-section="landing"] .utility-bar, body:has(#main form[action$="/auth/discord/login/"]) .utility-bar { display: none; }

/* ambient music: a quiet icon in the header, its panel on the surface below it */
.site-audio { position: relative; display: flex; align-items: center; }
.site-audio-button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--wr-ink-3); text-decoration: none; }
.site-audio-button:hover, .site-audio-button[aria-expanded="true"] { color: var(--wr-ink-strong); }
.site-audio-toggle { width: 32px; height: 32px; min-height: 32px; }
.site-audio svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.site-audio [data-audio-icon], .site-audio .audio-muted-slash, .site-audio.is-muted .audio-sound-waves { display: none; }
.site-audio [data-icon="play"] [data-audio-icon="play"], .site-audio [data-icon="pause"] [data-audio-icon="pause"],
.site-audio [data-icon="cancel"] [data-audio-icon="cancel"], .site-audio [data-icon="unavailable"] [data-audio-icon="unavailable"],
.site-audio [data-icon="sound"] [data-audio-icon="sound"], .site-audio [data-icon="muted"] [data-audio-icon="muted"],
.site-audio.is-muted .audio-muted-slash { display: block; }
.site-audio-panel { position: absolute; top: calc(100% + 10px); right: -8px; z-index: 40; display: grid; grid-template-columns: 44px 44px minmax(0, 1fr); align-items: center; gap: 6px; width: 288px; padding: 8px 12px 8px 8px; border: 1px solid var(--wr-rule); border-radius: 3px; background: var(--wr-surface); }
.site-audio-volume { display: grid; gap: 2px; min-width: 0; color: var(--wr-ink-3); font-size: .8125rem; }
.site-audio-volume > span { display: flex; justify-content: space-between; }
.site-audio-volume output { color: var(--wr-ink-strong); font-variant-numeric: tabular-nums; }
.site-audio-volume input { display: block; width: 100%; height: 28px; margin: 0; }
.site-audio-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* menu button and drawer (tall mode only) */
.mobile-nav-toggle { display: none; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--wr-ink-strong); text-decoration: none; }
.mobile-nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.site-drawer { display: none; }

/* flash messages: one line each at the top of the content column */
.flash { margin: 0 0 12px; padding: 10px 14px; border-left: 2px solid var(--wr-ink-2); background: var(--wr-surface); color: var(--wr-ink-strong); }
.flash:last-of-type { margin-bottom: 28px; }
[role="alert"]:is(.server-job-line, .workflow-alert, .service-form-errors, .kit-form-errors, .mods-form-errors, .server-form-errors, .result-error) { border-left-color: var(--wr-bad); }
.preview-notice { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 24px; padding: 10px 14px; border-left: 2px solid var(--wr-busy); background: var(--wr-surface); }
.preview-notice .notice-mark { display: none; }
.preview-notice .notice-label { color: var(--wr-ink-3); font-size: .875rem; }

/* footer: the one-line fan disclaimer */
.page-footer { padding: 0 var(--wr-gutter) 26px; }
.site-disclaimer { margin: 0; color: var(--wr-ink-4); font-size: .75rem; }

/* ======================================== room mode ======================================== */
@media (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  body { --wr-head-h: 74px; }
  .site-header { position: relative; display: flex; align-items: center; gap: 22px; height: 74px; padding: 30px var(--wr-gutter) 0; font-size: 15px; }
  /* the right-hand groups keep their width; the brand gives way (the wordmark ellipsizes as a last resort) */
  .identity-bar { flex: 1 1 auto; min-width: 0; }
  .company-brand { max-width: 100%; }
  .company-wordmark { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .hangar-utility { display: flex; flex: none; align-items: center; gap: 22px; }
  .utility-bar { display: flex; flex: none; align-items: center; }
  .utility-button { white-space: nowrap; }
  .skip-link--nav { display: block; }
  /* the pills: plain type in the header on signed-in desk pages; on HQ the page shows them; signed out, on the rim */
  body.space-site--hq .site-header .server-status-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* desk: the content column stands above the table; the table layer (z 20) passes in front of it */
  #main { width: min(var(--wr-col, 1120px), 100% - 2 * var(--wr-gutter)); margin: 0 auto; padding-top: 44px; }
  .site-shell { padding-bottom: calc((var(--wr-fh, 900) - var(--wr-table-top-y, 760)) * var(--wr-s) + 48px); }
  .page-footer { margin-top: 56px; }

  /* the rim: #site-nav (signed in) or the status pills (signed out) laid on the table's band by wr-rim.js */
  #site-nav, body.space-site--unauthenticated .site-header .server-status-list { position: fixed; inset: 0; z-index: 30; display: block; margin: 0; padding: 0; pointer-events: none; font-size: var(--rim-size, 15px); }
  #site-nav > .nav-community, #site-nav > .mobile-account-controls { display: none; }
  #site-nav > :is(a, details), body.space-site--unauthenticated .server-status-list > .server-status { position: absolute; top: 0; left: 0; pointer-events: auto; white-space: nowrap; }
  #site-nav > a, #site-nav > details > summary {
    display: block; min-height: 0; padding: 7px 4px; color: var(--wr-ink-2); font-size: inherit; font-weight: 500; letter-spacing: .01em; line-height: 1.2;
    text-decoration: none; text-shadow: 0 0 14px rgba(122, 77, 255, .17); transition: color .12s;
  }
  #site-nav > a:hover, #site-nav > details > summary:hover, #site-nav > details[open] > summary { color: var(--wr-ink-strong); }
  #site-nav > a.is-active, #site-nav > a[aria-current], #site-nav > details > summary.is-active { color: var(--wr-ink-strong); font-weight: 700; text-shadow: 0 0 14px var(--wr-pool); }
  #site-nav > a:focus-visible, #site-nav > details > summary:focus-visible { outline: 2px solid var(--wr-focus); outline-offset: 4px; }
  #site-nav > a[href^="/staff/"]::before, #site-nav > a:not([href^="/staff/"]) + details > summary::before { content: "\00b7"; position: absolute; right: 100%; margin-right: .5em; color: #6f63a0; font-weight: 500; text-shadow: none; }
  #site-nav > details > summary { position: relative; }
  html.wr-rim-ready #site-nav > a, html.wr-rim-ready body.space-site--unauthenticated .server-status-list > .server-status { transform: translate(calc(var(--rim-x, 0) * 1px - 50%), calc(var(--rim-y, 0) * 1px - 50%)) rotate(calc(var(--rim-r, 0) * 1deg)) scale(var(--rim-sx, 1), var(--rim-sy, 1)); }
  html.wr-rim-ready #site-nav > details { transform: translate(calc(var(--rim-x, 0) * 1px - 50%), calc(var(--rim-y, 0) * 1px - 50%)); }
  html.wr-rim-ready #site-nav > details > summary { transform: rotate(calc(var(--rim-r, 0) * 1deg)) scale(var(--rim-sx, 1), var(--rim-sy, 1)); }
  /* the Server menu stands above its label, upright, on the surface */
  #site-nav .nav-server-items { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 40; display: grid; min-width: 168px; padding: 6px 0; border: 1px solid var(--wr-rule); border-radius: 3px; background: var(--wr-surface); translate: -50% 0; }
  #site-nav .nav-server-items a { display: flex; align-items: center; min-height: 40px; padding: 0 16px; color: var(--wr-ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  #site-nav .nav-server-items a:hover { background: var(--wr-surface-2); color: var(--wr-ink-strong); }
  #site-nav .nav-server-items a:is(.is-active, [aria-current]) { color: var(--wr-ink-strong); font-weight: 650; box-shadow: inset 2px 0 var(--wr-ink-2); }
  /* signed out: the two pills on the rim, "Arma 3 server Running", "TeamSpeak 3 Online · 0 in voice" */
  body.space-site--unauthenticated .server-status-list > .server-status { padding: 7px 4px; font-size: inherit; letter-spacing: .01em; line-height: 1.2; text-shadow: 0 0 14px rgba(122, 77, 255, .17); }
  body.space-site--unauthenticated .server-status-list > .server-status > strong { color: var(--wr-ink-2); font-weight: 500; }
  body.space-site--unauthenticated .server-status-list > .server-status + .server-status::before { content: none; }
  body.space-site--unauthenticated .server-status .server-status-count { color: var(--wr-ink-2); }
  /* before wr-rim.js has run (it waits for the font, 300 ms at most), the labels wait hidden; if it never runs they
     show after 1.2 s (html.wr-rim-late, a timer in wr-boot.js, so reduced motion cannot cut the wait) as the
     straight row below */
  html.wr-js:not(.wr-rim-ready, .wr-rim-late) :is(#site-nav > a, #site-nav > details, body.space-site--unauthenticated .server-status-list > .server-status) { visibility: hidden; }
  /* without the script: the items as one centred row at the band's front */
  html:not(.wr-rim-ready) :is(#site-nav, body.space-site--unauthenticated .site-header .server-status-list) {
    inset: auto 0 auto 0; top: calc(var(--wr-oy) + var(--wr-band-front-y, 830) * var(--wr-s) - 16px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 1.1em;
  }
  html:not(.wr-rim-ready) :is(#site-nav > a, #site-nav > details, body.space-site--unauthenticated .server-status-list > .server-status) { position: relative; }
  html:not(.wr-js) .site-header:has(~ #site-nav .nav-community a) { padding-right: calc(var(--wr-gutter) + 84px); }
  html:not(.wr-js) #site-nav > .nav-community { position: fixed; top: 30px; right: var(--wr-gutter); display: flex; height: 44px; pointer-events: auto; }
}
/* a narrow room window (1024-1199 px, e.g. an iPad in landscape): signed-in desk pages carry the status line in the
   header, so the brand keeps only its crest (the link keeps its name, "313th Banshee Company home") */
@media (min-width: 1024px) and (max-width: 1199px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  body:not(.space-site--hq, .space-site--unauthenticated) .company-wordmark { display: none; }
}
/* page to page (spec 8): the room crossfades, each rim label slides from its old place on the band to its new one */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: ease-out; }
::view-transition-group(root) { animation-duration: .28s; }
@media (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  html.wr-rim-ready #site-nav > :nth-child(1 of a, details) { view-transition-name: wr-rim-1; }
  html.wr-rim-ready #site-nav > :nth-child(2 of a, details) { view-transition-name: wr-rim-2; }
  html.wr-rim-ready #site-nav > :nth-child(3 of a, details) { view-transition-name: wr-rim-3; }
  html.wr-rim-ready #site-nav > :nth-child(4 of a, details) { view-transition-name: wr-rim-4; }
  html.wr-rim-ready #site-nav > :nth-child(5 of a, details) { view-transition-name: wr-rim-5; }
  html.wr-rim-ready #site-nav > :nth-child(6 of a, details) { view-transition-name: wr-rim-6; }
  html.wr-rim-ready #site-nav > :nth-child(7 of a, details) { view-transition-name: wr-rim-7; }
  html.wr-rim-ready #site-nav > :nth-child(8 of a, details) { view-transition-name: wr-rim-8; }
}

/* ======================================== tall mode ======================================== */
@media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  body { --wr-head-h: 56px; }
  .site-header { position: relative; z-index: 12; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 16px; background: rgba(5, 4, 10, .72); }
  .identity-bar { flex: 1 1 auto; min-width: 0; }
  .company-crest { width: 28px; height: 28px; }
  .company-wordmark { overflow: hidden; text-overflow: ellipsis; }
  /* the landing's h1 is the name: the bar keeps the crest as the home link */
  body[data-section="landing"] .company-wordmark { display: none; }
  .hangar-utility { display: flex; align-items: center; }
  .site-header .server-status-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hangar-community, .utility-bar, .skip-link--nav, #site-nav { display: none; }
  .site-audio { position: static; }
  .site-audio-toggle { width: 44px; height: 44px; min-height: 44px; }
  .site-audio-panel { top: 56px; right: 0; left: 0; width: auto; padding: 12px 16px; border-width: 0 0 1px; border-radius: 0; background: rgba(14, 12, 23, .96); }
  .mobile-nav-toggle { display: inline-grid; }
  /* the open drawer covers the window below the bar, opaque, so no piece of the page shows under or through it */
  body.drawer-open .site-drawer { position: absolute; top: 56px; right: 0; left: 0; z-index: 40; display: block; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; padding: 8px 16px 20px; background: var(--wr-surface); animation: wr-drawer-in .16s ease-out; }
  .site-drawer-links { display: grid; }
  .site-drawer-links a { display: flex; align-items: center; min-height: 48px; padding-left: 14px; color: var(--wr-ink); font-size: 24px; font-weight: 600; font-stretch: 104%; text-decoration: none; }
  .site-drawer-links a:hover { color: #fff; }
  .site-drawer-links a:is(.is-active, [aria-current]) { color: var(--wr-ink-strong); box-shadow: inset 2px 0 var(--wr-ink-2); }
  .site-drawer-group { display: grid; margin-top: 8px; }
  .site-drawer-group-label { padding: 8px 0 2px 14px; color: var(--wr-ink-3); font-size: 14px; }
  .site-drawer-status, .site-drawer-community, .site-drawer-account { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; padding: 14px 0 0 14px; border-top: 1px solid var(--wr-rule); }
  .site-drawer-status:empty, .site-drawer-community:empty, .site-drawer-account:empty { display: none; }
  .site-drawer-status { display: grid; gap: 4px; color: var(--wr-ink-3); }
  .site-drawer-status .server-status::before { content: none; }
  .site-drawer-community a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--wr-ink); font-weight: 600; text-decoration: none; }
  .site-drawer-community img { width: 20px; height: 20px; opacity: .8; }
  .site-drawer-account { justify-content: space-between; }
  .site-drawer-account .utility-button { min-height: 44px; }
  body.space-site--hq .site-drawer-status, body[data-section="landing"] .site-drawer-account, body:has(#main form[action$="/auth/discord/login/"]) .site-drawer-account { display: none; }
  #main { width: min(var(--wr-col, 1120px), 100% - 32px); margin: 0 auto; padding-top: 28px; }
  .page-footer { margin-top: 48px; padding: 0 16px 24px; }
  h1 { font-size: 1.75rem; }
  .panel + .panel, .panel ~ .panel { margin-top: 32px; }
  .site-audio-panel .site-audio-button { width: 44px; height: 44px; }
}
@media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  @media (orientation: portrait) and (min-width: 600px) { #main { max-width: 720px; } }
  /* plain: desk pages show no still on a tall window, only the room colour with a wash of the wall at the top */
  body[data-composition="desk"] { background: linear-gradient(var(--wr-wall), var(--wr-bg) 60vh) no-repeat, var(--wr-bg); }
}
@keyframes wr-drawer-in { from { opacity: 0; transform: translateY(-8px); } }

/* no JavaScript in a tall window: no menu button; the nav is a plain wrapped list under the bar */
@media (scripting: none) {
  @media not all and (min-width: 1024px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
    .mobile-nav-toggle { display: none; }
    #site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 8px 16px 12px; border-bottom: 1px solid var(--wr-rule); }
    #site-nav > a, #site-nav summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--wr-ink); font-weight: 600; text-decoration: none; }
    #site-nav > a:is(.is-active, [aria-current]) { color: var(--wr-ink-strong); text-decoration: underline 2px var(--wr-ink-2); text-underline-offset: 6px; }
    #site-nav .nav-server-items { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    #site-nav .nav-server-items a { display: inline-flex; align-items: center; min-height: 44px; }
    #site-nav .mobile-account-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; width: 100%; }
    /* the pills as two plain lines under the bar; the hero then the nav list (signed in) follow the header */
    .site-header { flex-wrap: wrap; height: auto; min-height: 56px; }
    .site-header .identity-bar { height: 56px; display: flex; align-items: center; }
    .site-header .server-status-list { position: static; order: 5; display: grid; flex: 0 0 100%; width: auto; height: 48px; overflow: visible; clip-path: none; padding: 0 0 8px; align-content: center; font-size: .875rem; }
    .site-header .server-status + .server-status::before { content: none; }
  }
}

/* forced colours: no still, no table, no canvas; the rim becomes a plain list under the header */
@media (forced-colors: active) {
  .wr-room, .wr-table, .wr-holo { display: none !important; }
  #site-nav, body.space-site--unauthenticated .site-header .server-status-list { position: static !important; inset: auto !important; display: flex !important; flex-wrap: wrap; gap: 4px 20px; padding: 8px var(--wr-gutter); }
  #site-nav > :is(a, details), .server-status-list > .server-status { position: static !important; transform: none !important; visibility: visible !important; animation: none !important; }
  #site-nav > details > summary { transform: none !important; }
  #site-nav .nav-server-items { position: static; translate: none; }
  .site-shell { padding-bottom: 0 !important; }
  html { scroll-padding-bottom: 0 !important; }
  /* the room and the stage layout are off here, so the landing's h1 stands under the bar: the bar keeps the crest */
  body[data-section="landing"] .company-wordmark { display: none; }
  .flash { border-left: 2px solid CanvasText; }
}
@media print {
  .wr-room, .wr-table, #site-nav, .site-header .server-status-list, .site-audio, .mobile-nav-toggle, .site-drawer, .skip-link { display: none !important; }
  .site-shell { padding: 0 !important; }
  #main { width: auto !important; }
}
}