/* GTM baseline scan page (src/gtm-scan.html).
   Adapted from the prototype's stylesheet; scoped under .gtm so it cannot leak
   into the nav, footer or any other page. Colours are the site's own tokens
   where one exists (--primary, --secondary, --accent, --accent2, --accent3,
   --dark, --neutral); the warm ground, the rules and the pass/fail/warn
   semantics are local because style.css has no equivalents. */

.gtm {
  --g-ground: #f7f6f2;
  --g-surface: #ffffff;
  --g-surface-2: #f1efe8;
  --g-ink: var(--dark);
  --g-ink-2: #5d5a52;
  --g-ink-3: #8d887c;
  --g-rule: #ded9cd;
  --g-rule-2: #ece8dd;
  --g-pass: #0f7b5f;
  --g-pass-bg: #e6f2ed;
  --g-fail: #b3261e;
  --g-fail-bg: #fbeceb;
  --g-warn: #8a6d00;
  --g-warn-bg: #fdf4dc;
  --g-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background: var(--g-ground);
  color: var(--g-ink);
  font: 400 16px/1.55 var(--g-sans);
  -webkit-font-smoothing: antialiased;
}
.gtm * { box-sizing: border-box; }
.gtm-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; }
.gtm-hidden { display: none !important; }
.gtm-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Masthead ─────────────────────────────────────────────────── */
.gtm-masthead { padding: 52px 0 36px; border-bottom: 1px solid var(--g-rule); margin-bottom: 40px; }
.gtm-eyebrow { font: 700 12px/1 var(--g-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--secondary); margin-bottom: 18px; }
.gtm h1 { font: 700 44px/1.08 var(--g-sans); letter-spacing: -.02em; margin: 0 0 16px; text-wrap: balance; color: var(--g-ink); }
.gtm h1 em { font-style: normal; color: var(--secondary); }
.gtm-standfirst { font: 400 19px/1.5 var(--g-sans); color: var(--g-ink-2); max-width: 62ch; margin: 0; }
.gtm-standfirst strong { color: var(--g-ink); font-weight: 600; }
@media (max-width: 660px) { .gtm h1 { font-size: 34px; } .gtm-masthead { padding-top: 32px; } }

/* ── Form ─────────────────────────────────────────────────────── */
.gtm-panel { background: var(--g-surface); border: 1px solid var(--g-rule); border-radius: 4px; padding: 28px; }
.gtm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 660px) { .gtm-field-row { grid-template-columns: 1fr; } }
.gtm label { display: block; font: 700 12px/1 var(--g-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--g-ink-2); margin-bottom: 7px; }
.gtm label .gtm-opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--g-ink-3); }
.gtm input[type="text"], .gtm input[type="email"] {
  width: 100%; padding: 11px 13px; font: 400 15px/1.3 var(--g-mono); color: var(--g-ink);
  background: var(--g-ground); border: 1px solid var(--g-rule); border-radius: 3px;
}
.gtm input:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; border-color: var(--secondary); }

.gtm button { font: 700 15px/1 var(--g-sans); padding: 13px 26px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.gtm-btn-primary { background: var(--accent); color: #241d00; border-color: #e0a800; }
.gtm-btn-primary:hover { background: var(--accent2); }
.gtm-btn-primary[disabled] { opacity: .6; cursor: default; }
.gtm-btn-quiet { background: transparent; color: var(--secondary); border-color: var(--g-rule); }
.gtm-btn-quiet:hover { border-color: var(--secondary); }
.gtm button:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.gtm-link { background: none; border: 0; padding: 0; font: 600 13.5px/1 var(--g-sans); color: var(--secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gtm-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.gtm-note { font-size: 13.5px; color: var(--g-ink-3); margin: 0; }
.gtm-err { color: var(--g-fail); font-size: 13.5px; margin: 10px 0 0; }

/* ── Scanning ─────────────────────────────────────────────────── */
.gtm-ph { display: flex; flex-direction: column; gap: 2px; }
.gtm-ph-row {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: baseline;
  padding: 7px 0 7px 14px; margin-left: -16px; font-size: 15px; color: var(--g-ink-3);
  border-left: 2px solid transparent;
}
.gtm-ph-row[data-s="run"]  { color: var(--g-ink); border-left-color: var(--accent); }
.gtm-ph-row[data-s="done"] { color: var(--g-ink-2); border-left-color: var(--g-pass); }
.gtm-ph-tick { font: 700 13px/1.5 var(--g-mono); color: var(--g-ink-3); }
.gtm-ph-row[data-s="done"] .gtm-ph-tick { color: var(--g-pass); }
.gtm-ph-row[data-s="run"]  .gtm-ph-tick { color: var(--accent); }
.gtm-ph-note { font: 400 13px/1.5 var(--g-mono); color: var(--g-ink-3); font-variant-numeric: tabular-nums; }
.gtm-elapsed { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--g-rule-2); font: 400 13.5px/1 var(--g-mono); color: var(--g-ink-3); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; }

/* ── Failure and degraded states ──────────────────────────────── */
.gtm-err-panel { background: var(--g-surface); border: 1px solid var(--g-rule); border-top: 3px solid var(--g-fail); border-radius: 3px; padding: 28px 30px; }
.gtm-err-panel.gtm-warnstate { border-top-color: var(--g-warn); }
.gtm-err-k { font: 700 11px/1 var(--g-sans); letter-spacing: .11em; text-transform: uppercase; color: var(--g-fail); margin-bottom: 12px; }
.gtm-err-panel.gtm-warnstate .gtm-err-k { color: var(--g-warn); }
.gtm-err-panel h3 { font: 700 23px/1.25 var(--g-sans); margin: 0 0 12px; text-wrap: balance; }
.gtm-err-panel p { margin: 0 0 14px; font-size: 15.5px; color: var(--g-ink-2); max-width: 64ch; }
.gtm-err-panel p:last-child { margin-bottom: 0; }
.gtm-err-panel code { font: 400 13.5px var(--g-mono); background: var(--g-surface-2); padding: 2px 6px; border-radius: 2px; color: var(--g-ink); }
.gtm-err-do { background: var(--g-surface-2); border-radius: 3px; padding: 16px 18px; margin-top: 18px; }
.gtm-err-do-l { font: 700 11px/1 var(--g-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--g-ink-3); margin-bottom: 9px; }
.gtm-err-do ul { margin: 0; padding-left: 19px; font-size: 15px; color: var(--g-ink-2); }
.gtm-err-do li { margin-bottom: 5px; }
.gtm-degraded { background: var(--g-warn-bg); border-left: 3px solid var(--g-warn); border-radius: 0 3px 3px 0; padding: 16px 18px; margin-top: 22px; }
.gtm-dg-l { font: 700 11px/1 var(--g-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--g-warn); margin-bottom: 8px; }
.gtm-degraded p { margin: 0; font-size: 15px; color: var(--g-ink); }

/* ── Result ───────────────────────────────────────────────────── */
.gtm-verdict { background: var(--g-surface); border: 1px solid var(--g-rule); border-top: 3px solid var(--accent); border-radius: 3px; padding: 30px 30px 26px; margin-bottom: 14px; }
.gtm-verdict-top { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.gtm-scanned { font: 400 14px/1.3 var(--g-mono); color: var(--g-ink-3); }
.gtm-scanned b { color: var(--g-ink); font-weight: 700; }
.gtm-score-cap { font: 700 11px/1 var(--g-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--g-ink-3); }
.gtm-sub { font-size: 14px; color: var(--g-ink-3); margin: 12px 0 18px; max-width: 64ch; }
.gtm-frame-bar { display: flex; justify-content: space-between; align-items: baseline; font: 700 12px/1 var(--g-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--g-ink-3); margin-bottom: 8px; }
.gtm-frame { width: 100%; height: 70vh; min-height: 480px; border: 1px solid var(--g-rule); border-radius: 3px; background: #fff; }
.gtm-frame-tall { height: 80vh; }

/* ── Email gate ───────────────────────────────────────────────── */
.gtm-gate { margin-top: 40px; background: var(--g-surface); border: 1px solid var(--secondary); border-radius: 4px; overflow: hidden; scroll-margin-top: 116px; }
.gtm-gate-head { background: var(--accent3); padding: 22px 26px; border-bottom: 1px solid var(--g-rule); }
.gtm-gate-head h3 { font: 700 21px/1.25 var(--g-sans); margin: 0 0 8px; color: var(--g-ink); }
.gtm-gate-head p { margin: 0; font-size: 15px; color: var(--g-ink-2); }
.gtm-gate-body { padding: 24px 26px; }
.gtm-judge { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--g-ink-2); margin-bottom: 16px; }
.gtm-judge-bar { flex: 1; height: 4px; background: var(--g-rule-2); border-radius: 2px; overflow: hidden; max-width: 180px; }
.gtm-judge-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; transition: width .4s linear; }
.gtm-judge.gtm-ready { color: var(--g-pass); font-weight: 600; }
.gtm-judge.gtm-ready .gtm-judge-bar i { background: var(--g-pass); width: 100% !important; }
.gtm-judge.gtm-stalled { color: var(--g-warn); }
.gtm-gate-list { margin: 0 0 22px; padding-left: 20px; font-size: 15px; display: flex; flex-direction: column; gap: 7px; }
.gtm-gate-form { display: flex; flex-direction: column; gap: 10px; }
.gtm-gate-form .gtm-btn-primary { width: 100%; }
.gtm-fineprint { font-size: 13px; color: var(--g-ink-3); margin: 16px 0 0; }

/* ── Result layout: report + sticky gate rail (desktop) ──────────
   .gtm-wide is set on .gtm-wrap by gtm-scan.js while the result is shown. */
.gtm-wrap.gtm-wide { max-width: 1216px; }
.gtm-wide .gtm-masthead { padding: 40px 0 28px; margin-bottom: 28px; }
.gtm-wide h1 { font-size: 36px; margin-bottom: 0; }
.gtm-wide .gtm-standfirst { display: none; }
.gtm-result-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.gtm-result-grid.gtm-solo { grid-template-columns: minmax(0, 1fr); }
.gtm-result-grid .gtm-verdict { margin-bottom: 0; padding: 26px 26px 24px; }
.gtm-result-grid .gtm-gate { margin-top: 0; position: sticky; top: 116px; max-height: calc(100vh - 136px); overflow-y: auto; }
.gtm-result-grid .gtm-gate-head { padding: 20px 22px; }
.gtm-result-grid .gtm-gate-body { padding: 20px 22px; }
.gtm-result-grid .gtm-judge-bar { max-width: none; }
.gtm-result-grid .gtm-gate-list { font-size: 14.5px; gap: 6px; padding-left: 18px; margin-bottom: 20px; }
.gtm-result-grid .gtm-fineprint { font-size: 12.5px; margin-top: 14px; }

.gtm-gate-bar { display: none; }

@media (max-width: 900px) {
  .gtm-result-grid { grid-template-columns: minmax(0, 1fr); }
  .gtm-result-grid .gtm-gate { position: static; max-height: none; overflow: hidden; margin-top: 24px; }
  .gtm-wide h1 { font-size: 26px; line-height: 1.12; }
  .gtm-wide .gtm-masthead { padding: 24px 0 18px; margin-bottom: 20px; }
  .gtm-result-grid .gtm-verdict { padding: 18px 16px; }
  .gtm-result-grid .gtm-gate-head, .gtm-result-grid .gtm-gate-body { padding: 16px; }
  .gtm-result-grid .gtm-gate-head h3 { font-size: 19px; }
  .gtm .gtm-gate-form input[type="email"] { font-size: 16px; } /* no iOS zoom */
  .gtm .gtm-gate-form .gtm-btn-primary { min-height: 48px; }

  .gtm-gate-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--primary); color: #fff; border-top: 3px solid var(--accent);
    transform: translateY(100%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .gtm-gate-bar.is-on { transform: none; visibility: visible; transition: transform .25s ease; }
  .gtm-gate-bar-t { flex: 1; min-width: 0; font: 700 15px/1.25 var(--g-sans); }
  .gtm .gtm-gate-bar .gtm-btn-primary { min-height: 44px; padding: 12px 16px; white-space: nowrap; }
}

/* ── Unlocked ─────────────────────────────────────────────────── */
.gtm-unlocked { background: var(--g-pass-bg); border: 1px solid var(--g-pass); border-radius: 4px; padding: 22px 26px; margin-top: 40px; }
.gtm-unlocked h3 { font: 700 19px/1.3 var(--g-sans); margin: 0 0 8px; color: var(--g-ink); }
.gtm-unlocked p { margin: 0; font-size: 15px; color: var(--g-ink-2); }
.gtm-unlocked a { color: var(--secondary); }

/* ── Footer note ──────────────────────────────────────────────── */
.gtm-foot { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--g-rule); font-size: 13.5px; color: var(--g-ink-3); }
.gtm-foot p { margin: 0 0 8px; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  .gtm * { transition: none !important; animation: none !important; }
}