/* TEST BRANCH ONLY. Never promote this file, or the line that links it from each page, to main.

   The test environment's look, asked for by Mat Harvey on 10 November 2026: the sidebar is orange instead of charcoal,
   it says "Test environment" at its top, the sign-in panels say it too, and a TEST watermark lies across every page,
   so nobody reviewing on test takes it for production. The test environment deploys from `test` and production from
   `main`, so production never has any of it as long as this stays off `main`.

   It lives in this one file, linked last from the <head> of every page in web/ on a line marked TEST BRANCH ONLY.
   It never changes web/platform/ (copied from emg-app-template) and never loads in Joules's frame in an application,
   which is the portal's own page (/clip/frame) and links nothing from here. AGENTS.md, "Test environment look", says how
   a promotion leaves it out, and .github/workflows/test-look-off-main.yml fails a pull request into main that carries it.
   test/test-environment.test.js checks every page links it. */

:root {
  --emg-test-orange: #C2410C; /* white on it is 5.2:1 */
  --emg-test-ink: #FFEFE5; /* the sidebar's ordinary text: 4.6:1 on the orange */
  --emg-test-watermark: rgba(194, 65, 12, .1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --emg-test-watermark: rgba(249, 115, 22, .12); }
}

:root[data-theme="dark"] { --emg-test-watermark: rgba(249, 115, 22, .12); }

/* ---------- The sidebar: orange in both themes ---------- */
/* Set on the shell, not on :root, so the platform's own dark-theme values for the sidebar never win. */
.app-shell {
  --emg-nav-bg: var(--emg-test-orange);
  --emg-nav-ink: var(--emg-test-ink);
  --emg-nav-ink-strong: #FFFFFF;
  --emg-nav-line: rgba(255, 255, 255, .3);
  --emg-nav-hover: rgba(0, 0, 0, .1);
  --emg-nav-active: rgba(0, 0, 0, .18);
}

/* The coral marks would vanish on orange, so they turn white, and a coral badge turns charcoal. */
.app-nav__label::before,
.nav-link[aria-current="page"]::before { background: #FFFFFF; }

.nav-link__badge { background: var(--emg-charcoal); }

/* "Test environment" across the top of the sidebar, and of the bar it becomes on a phone. */
.app-nav::before {
  content: "Test environment";
  display: block;
  flex: none;
  padding: 0.45rem 1.1rem;
  background: var(--emg-charcoal);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- The sign-in pages ---------- */
/* The brand panel beside the sign-in form is orange too. */
.login-hero {
  background: var(--emg-test-orange);
  color: var(--emg-test-ink);
}

.login-hero__copy p { color: var(--emg-test-ink); }

.login-hero .emg-eyebrow { color: #FFFFFF; }

.login-hero .emg-eyebrow::after { background: #FFFFFF; }

.login-hero__copy h2 .emg-hl {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

/* Every sign-in panel (sign in, forgot and reset password, change password) says it at its top. */
.login-panel::before {
  content: "Test environment";
  justify-self: center;
  padding: 0.35rem 0.85rem;
  background: var(--emg-test-orange);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------- The watermark ---------- */
/* One large TEST across the middle of the screen, over everything (even the wait screen and Joules's stage) but faint,
   and it takes no clicks. Screen readers skip it (the empty alternative text); the labels above say it in words. */
body::after {
  content: "TEST";
  content: "TEST" / ""; /* a browser that cannot read this keeps the line above */
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2147483000;
  transform: translate(-50%, -50%) rotate(-30deg);
  color: var(--emg-test-watermark);
  font-family: var(--emg-font-design);
  font-size: clamp(5rem, 20vw, 18rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Beside the sidebar it sits in the middle of the page, not of the whole window, and on the sign-in page in the middle of
   the form's side (the orange panel would hide it). */
@media (min-width: 901px) {
  body:has(> .app-shell)::after { left: calc(50% + var(--emg-sidebar-width) / 2); }

  .login-page:not(.login-page--single)::after {
    left: 77%;
    font-size: clamp(5rem, 11vw, 10rem);
  }
}