/* ============================================================================
   Monitor Test — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool: the swatch grid and the fullscreen test stage.

   Accent — cool gray, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #9ca3af  7.45:1 on --bg   6.87:1 on --surface   7.71:1 on --bg-sunk
     light #4b5563  7.24:1 on --bg   7.56:1 on --surface   6.64:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #9ca3af; --accent-dim: rgba(156, 163, 175, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #4b5563; --accent-dim: rgba(75, 85, 99, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: none; stroke: var(--on-accent); }

/* ============================================================================
   Swatch grid — the pattern picker
   ========================================================================= */

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.swatch-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s ease;
}
.swatch-btn:hover,
.swatch-btn:focus-visible { border-color: var(--accent); }

.swatch-fill {
  display: block;
  width: 100%;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
}

.swatch-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}

.swatch-group-label {
  margin: 1.4rem 0 0.6rem;
}
.swatch-group-label:first-child { margin-top: 0; }

/* ============================================================================
   The stuck-pixel exerciser panel
   ========================================================================= */

.flasher-ack {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
  color: var(--text);
  margin: 1rem 0;
  cursor: pointer;
}
.flasher-ack input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex: 0 0 auto;
  cursor: pointer;
}

/* ============================================================================
   Fullscreen test stage
   Fixed to the viewport regardless of whether the real Fullscreen API is
   available — that is the fallback the guard in app.js relies on, so this
   already reads as "fullscreen" even on a browser that refuses the request.
   ========================================================================= */

.fs-stage {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background-color: #000000;
  cursor: none;
}
.fs-stage[hidden] { display: none; }
.fs-stage.cursor-visible { cursor: default; }

.fs-hint {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.fs-hint.hidden { opacity: 0; }

.fs-exit {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.fs-exit.hidden { opacity: 0; pointer-events: none; }

/* Belt-and-braces: even if JS fails to add the class, the page behind the
   stage cannot scroll while it is meant to be covering the viewport. */
body.monitor-test-lock-scroll { overflow: hidden; }

/* ============================================================================
   Article furniture shared with the content sections below the tool
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}