/* ============================================================================
   BETA NOTICE — the "this page is beta" tape over a page still in development.

   Layer: SHARED COMPONENT. Sits next to chrome.css.
   Depends on: tokens.css. Knows about no page.

   WHAT IT IS
   A fixed, full-viewport veil of cream at 95% that sinks the page to the same
   effect as 5% opacity, a diagonal dark-green/cream stripe band across the
   middle in the manner of scene tape, the message set as an h1 on a cream
   panel riding the band, and one circled X below it. Clicking the X, or
   pressing Escape, removes the whole thing. A dismissal is remembered for the
   browser tab (sessionStorage) so moving between beta pages does not re-raise
   the tape every time. Behaviour is the small inline script that ships with
   the markup — see the HTML snippet.

   Palette, per tokens.css: the pink is RESERVED and only sits on a cream or
   dark-green surface. Here it is the ring of the X on cream, and the X stroke
   on dark green when hovered. It never touches the orange.

   Z-INDEX: the site header is z 10 and its menu is in the same stack. 1000
   keeps the tape over both, and leaves room above for anything that must
   genuinely beat it.

   REMOVAL: when the page ships, delete the markup block from the page. Nothing
   else references these classes.
   ========================================================================= */

.gm-beta {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  /* One track exactly as wide as the veil, so the over-wide tape below is
     centred on it and overflows both edges equally instead of one. */
  grid-template-columns: 100%;
  place-items: center;
  align-content: center;
  row-gap: clamp(1.75rem, 4vw, 3rem);
  padding: 1rem;
  overflow: hidden;
  /* The veil. 0.95 of cream over the page reads as the page at 5%. */
  background: rgba(255, 241, 207, 0.95);
  color: var(--gm-green-deep);
  -webkit-font-smoothing: antialiased;
}

.gm-beta[hidden] { display: none; }

/* The page beneath should not scroll while the tape is up. Progressive: a
   browser without :has() simply keeps scrolling, nothing breaks. */
body:has(.gm-beta:not([hidden])) { overflow: hidden; }


/* --- 1. The tape --------------------------------------------------------- */

.gm-beta__tape {
  /* Wider than the viewport so the tilt never shows a bare corner. */
  width: 150vw;
  min-height: clamp(6.5rem, 18vw, 12rem);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 1.75rem) 0;
  transform: rotate(-3deg);
  border-top: 2px solid var(--gm-ink);
  border-bottom: 2px solid var(--gm-ink);
  background: repeating-linear-gradient(
    -45deg,
    var(--gm-green-deep) 0,
    var(--gm-green-deep) 2.25rem,
    var(--gm-cream) 2.25rem,
    var(--gm-cream) 4.5rem
  );
}


/* --- 2. The message ------------------------------------------------------ */

.gm-beta__title {
  margin: 0;
  max-width: calc(100vw - 2rem);
  padding: 0.35em 0.7em 0.45em;
  font-family: var(--serif);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.045em;
  text-align: center;
  text-wrap: balance;
  color: var(--gm-green-deep);
  background: var(--gm-cream);
  border: 2px solid var(--gm-ink);
  /* Counter the tape's tilt so the words sit level. */
  transform: rotate(3deg);
}

.gm-beta__title small {
  display: block;
  margin-top: 0.55em;
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--gm-green-soft);
}


/* --- 3. The circled X ---------------------------------------------------- */

.gm-beta__close {
  --size: clamp(3.75rem, 9vw, 5.25rem);
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border: 3px solid var(--gm-pink);
  border-radius: 50%;
  background: var(--gm-cream);
  color: var(--gm-green-deep);
  font: inherit;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.gm-beta__close svg {
  width: 46%;
  height: 46%;
  display: block;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  fill: none;
}

.gm-beta__close:hover,
.gm-beta__close:active {
  background: var(--gm-green-deep);
  border-color: var(--gm-green-deep);
  color: var(--gm-pink);
}

.gm-beta__close:focus-visible {
  outline: var(--gm-focus-ring);
  outline-offset: 4px;
}

.gm-beta__hint {
  margin: -0.75rem 0 0;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--gm-muted);
}

@media (prefers-reduced-motion: reduce) {
  .gm-beta__close { transition: none; }
}

@media print {
  .gm-beta { display: none; }
}