/* Gateweight response page stylesheet.
 *
 * Loaded from the layout's <link rel="stylesheet">. Same-origin only:
 * no @import, no remote fonts, no background images, no CDN. The
 * variables are scoped to a small palette so light and dark themes
 * maintain contrast without any third-party tokens.
 *
 * Design intent: pages are almost entirely text -- generous
 * whitespace and quiet typography instead of boxes, rules, or
 * illustration. The one exception is the challenge widget, which
 * borrows the familiar shape of a checkbox-style human check so the
 * automatic verification step reads as a single, recognizable action.
 *
 * Accessibility:
 *  - The skip-link is visible only when focused.
 *  - The skip-link and interactive elements have a focus ring with
 *    at least 3:1 contrast against the background.
 *  - prefers-color-scheme flips the palette.
 *  - prefers-reduced-motion disables every animation.
 *  - Body text is at least 16px; line-height keeps paragraphs scannable.
 */

:root {
  color-scheme: light dark;
  --gw-bg: #ffffff;
  --gw-fg: #14181f;
  --gw-muted: #5b6472;
  --gw-faint: #8891a0;
  --gw-border: #dde1e7;
  --gw-accent: #1d4ed8;
  --gw-accent-fg: #ffffff;
  --gw-focus: #1e3a8a;
  --gw-link: #1d4ed8;
  --gw-success: #15803d;
  --gw-danger: #b91c1c;
  --gw-widget-bg: #ffffff;
  --gw-widget-shadow: rgb(20 24 31 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --gw-bg: #0d1117;
    --gw-fg: #eef1f6;
    --gw-muted: #a2acbb;
    --gw-faint: #757f8f;
    --gw-border: #2b3240;
    --gw-accent: #7fb1ff;
    --gw-accent-fg: #0d1117;
    --gw-focus: #bfdbfe;
    --gw-link: #7fb1ff;
    --gw-success: #4ade80;
    --gw-danger: #f87171;
    --gw-widget-bg: #131924;
    --gw-widget-shadow: rgb(0 0 0 / 0.35);
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--gw-bg);
  color: var(--gw-fg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--gw-bg);
  color: var(--gw-fg);
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
}

/* Visually hidden but still in the accessibility tree: every page
 * still needs exactly one h1, it just doesn't need to take up visible
 * space -- the message text (and, on the challenge page, the widget's
 * own label) already says what the page is for. */
h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gw-skip {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--gw-accent);
  color: var(--gw-accent-fg);
  border-radius: 0.25rem;
  text-decoration: none;
  z-index: 10;
  transition: top 120ms ease-out;
}

.gw-skip:focus {
  top: 0.5rem;
  outline: 3px solid var(--gw-focus);
  outline-offset: 2px;
}

h1 {
  margin: 0 0 1.25rem;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.gw-message {
  margin: 0 0 1.75rem;
  color: var(--gw-muted);
  font-size: 1.0625rem;
}

.gw-message:last-child {
  margin-bottom: 0;
}

.gw-message code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
  font-size: 0.92em;
}

/* Challenge widget: a quiet, checkbox-shaped human-verification
 * control. It starts in the "working" phase automatically (the
 * controller script drives data-phase); a failed run switches to
 * "retry" and exposes a real button the same size and position as
 * the box, so ticking it restarts the check with a fresh page load. */
.gw-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.875rem 1.5rem 0.875rem 1rem;
  border: 1px solid var(--gw-border);
  border-radius: 0.75rem;
  background: var(--gw-widget-bg);
  box-shadow: 0 1px 2px var(--gw-widget-shadow);
  min-width: 15.5rem;
  max-width: 100%;
  transition: border-color 150ms ease-out;
}

.gw-check-error {
  display: none;
  margin: 0 0 1.75rem;
  color: var(--gw-danger);
  font-size: 0.875rem;
  font-weight: 500;
}

.gw-check[data-phase="retry"] + .gw-check-error {
  display: block;
}

.gw-check[data-phase="retry"] {
  cursor: pointer;
}

.gw-check:focus-within {
  border-color: var(--gw-accent);
}

.gw-check-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  /* Sits after this in the DOM but must stay the actual click
   * target across the whole widget, including on top of the
   * checkbox icon that follows it in tree order -- otherwise a
   * click that lands on .gw-check-box hits that decorative span
   * instead of this button and never fires the retry handler. */
  z-index: 2;
}

.gw-check-hit:focus-visible {
  outline: 3px solid var(--gw-focus);
  outline-offset: 2px;
}

.gw-check-icon {
  position: relative;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.gw-check-icon > * {
  display: none;
  position: absolute;
  inset: 0;
}

.gw-check-spinner {
  border-radius: 50%;
  border: 2.5px solid var(--gw-border);
  border-top-color: var(--gw-accent);
}

.gw-check[data-phase="working"] .gw-check-spinner {
  display: block;
  animation: gw-spin 850ms linear infinite;
}

.gw-check-mark {
  color: var(--gw-success);
  padding: 2px;
  z-index: 1;
}

.gw-check[data-phase="success"] .gw-check-mark {
  display: block;
}

.gw-check-box {
  border-radius: 0.3rem;
  border: 2px solid var(--gw-faint);
}

.gw-check[data-phase="retry"] .gw-check-box {
  display: block;
}

.gw-check[data-phase="retry"]:hover .gw-check-box,
.gw-check[data-phase="retry"]:focus-within .gw-check-box {
  border-color: var(--gw-accent);
}

/* Clicking the retry box fills it in like a checked checkbox for a
 * moment before the page reload restarts the check (see
 * wireRetryButton in entry/main.ts), so the click reads as ticking
 * the box rather than as a silent, unconfirmed page reload. */
.gw-check.is-ticked .gw-check-box {
  border-color: var(--gw-accent);
  background: var(--gw-accent);
}

.gw-check.is-ticked .gw-check-mark {
  display: block;
  color: var(--gw-accent-fg);
}

.gw-check.is-ticked .gw-check-mark path {
  animation: gw-draw 200ms ease-out;
}

.gw-check-text > span {
  display: none;
}

.gw-check[data-phase="working"] .gw-check-text-working,
.gw-check[data-phase="success"] .gw-check-text-success,
.gw-check[data-phase="retry"] .gw-check-text-retry {
  display: inline;
  font-size: 0.9375rem;
}

@keyframes gw-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes gw-draw {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.gw-check-mark path {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}

.gw-check[data-phase="success"] .gw-check-mark path {
  animation: gw-draw 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .gw-skip {
    transition: none;
  }
  .gw-check {
    transition: none;
  }
  .gw-check-spinner {
    animation: none;
  }
  .gw-check-mark path {
    animation: none;
  }
}

noscript {
  display: block;
  margin-top: 1rem;
  color: var(--gw-muted);
  font-size: 0.9375rem;
}

noscript p {
  margin: 0;
}

.gw-meta {
  margin: 3rem 0 0;
  font-size: 0.8125rem;
  color: var(--gw-faint);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;
}

a {
  color: var(--gw-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:focus-visible {
  outline: 3px solid var(--gw-focus);
  outline-offset: 2px;
}