/* The status and known-issues page, /warlordacademy/status/.
   Loads after styles.css and ladder.css (header, nav and footer come from there).
   The launch site's CSP is style-src 'self', so no inline styles: everything is here. */
.status-hero { position: relative; overflow: hidden; padding-block: 64px 58px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 82% 26%, #314b4650, transparent 47%); }
.status-hero::before { position: absolute; content: ""; inset: 0; pointer-events: none; background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px); background-size: 76px 76px; }
.status-hero > .wrap { position: relative; }
.status-hero .eyebrow { color: #cbd0dc; margin-bottom: 24px; }
.status-hero h1 { font-size: clamp(64px, 8.5vw, 116px); line-height: .86; letter-spacing: -.01em; }
.status-hero h1 > span { color: var(--lime); }
.status-intro { max-width: 520px; margin-top: 24px; color: #bdc5d3; font-size: 15px; }

/* The status banner. data-state: normal (lime), issue (amber), outage (coral). */
.status-banner { --state: var(--lime); max-width: 760px; margin-top: 40px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 18px; padding: 22px 26px; border: 1px solid #ffffff26; border-left: 3px solid var(--state); background: #141b2b; }
.status-banner[data-state="issue"] { --state: #ffd27a; }
.status-banner[data-state="outage"] { --state: #fca086; }
.status-light { grid-row: 1 / span 2; width: 12px; height: 12px; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 5px #ffffff0a, 0 0 16px var(--state); }
.status-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; line-height: 1.4; color: #a1acbc; }
.status-line { font: 800 clamp(28px, 3.4vw, 40px)/1.02 var(--display); color: var(--state); }
.status-updated { grid-column: 1 / -1; margin-top: 14px; padding-top: 12px; border-top: 1px solid #ffffff12; font-size: 11px; color: #a9b2c2; }
.status-updated time { color: #cbd2dd; }

/* Sections */
.status-section { padding-block: 66px; border-bottom: 1px solid var(--line); }
.status-heading { margin-bottom: 28px; }
.status-heading .eyebrow { color: var(--lime); margin-bottom: 14px; }
.status-heading h2 { font-size: clamp(40px, 5.4vw, 64px); line-height: .9; }
.status-heading h2 > span { color: var(--lime); }

/* Known issues. data-status sets the left edge: investigating and fix-in-review amber, fixed lime. */
.issue-list { display: grid; gap: 16px; max-width: 860px; }
.issue { --issue: #ffd27a; padding: 22px 26px; border: 1px solid #ffffff26; border-left: 3px solid var(--issue); background: #141b2b; }
.issue[data-status="fixed"] { --issue: var(--lime); }
.issue h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.05; margin-bottom: 14px; }
.issue dl { margin: 0; }
.issue dl > div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.issue dt { padding-top: 3px; font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #98a2b4; }
.issue dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--paper); }
.issue dl > div:nth-child(2) dd { color: var(--issue); font-weight: 750; }
.issue-empty { max-width: 860px; padding: 40px 28px; border: 1px solid #ffffff26; background: #141b2b; text-align: center; }
.issue-empty-mark { display: block; margin-bottom: 14px; color: var(--lime); font: 44px/1 var(--body); font-weight: 800; }
.issue-empty h3 { font-size: clamp(28px, 3vw, 36px); }
.issue-empty p { margin-top: 10px; font-size: 13px; color: #a8b3c5; }
/* The empty state hides itself while any issue is listed. */
.issues:has(.issue) .issue-empty { display: none; }

/* Support */
.status-help { padding-block: 66px 84px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; }
.status-help .status-heading { margin-bottom: 0; }
.status-help-copy { max-width: 470px; justify-self: end; }
.status-help-copy p { margin-bottom: 24px; font-size: 15px; line-height: 1.65; color: #c3cad6; }
.status-help-copy p a { color: var(--lime); overflow-wrap: anywhere; }
.status-help .button { font-size: 12px; gap: 25px; padding: 18px 21px; min-height: 53px; }
.ladder-footer nav a[aria-current] { color: var(--lime); }

@media (max-width: 760px) {
  .status-hero { padding-block: 46px 42px; }
  .status-intro { font-size: 13px; margin-top: 20px; }
  .status-banner { margin-top: 32px; padding: 18px 20px; }
  .status-section { padding-block: 50px; }
  .issue { padding: 18px 20px; }
  .issue dl > div { grid-template-columns: 1fr; gap: 4px; }
  .status-help { grid-template-columns: 1fr; gap: 24px; padding-block: 50px 64px; }
  .status-help-copy { justify-self: start; }
  .status-help-copy p { font-size: 13px; }
}
@media (max-width: 540px) {
  .status-hero h1 { font-size: clamp(56px, 17vw, 88px); }
  .status-hero .eyebrow { font-size: 9px; }
  .ladder-footer nav { flex-wrap: wrap; gap: 12px 23px; }
}
/* Below 360 px the brand, The ladder, Press and Coming soon do not fit on one row. */
@media (max-width: 359px) {
  .status-nav-press { display: none !important; }
}