/* ── The framed-page notice ──────────────────────────────────────────────────
 *
 * CONTRACTS.md C15 A36. Framing cannot be prevented on GitHub Pages, so every
 * page except embed.html detects it and shows this instead of itself.
 *
 * The inline guard in the head sets `data-framed` before first paint, which is
 * why there is no flash of the real page. js/frame.js appends `.frame-notice`
 * a moment later, once modules run.
 *
 * Tokens come from the CDN base.css. The only local knob is --accent, which
 * each site sets in its own stylesheet.
 */

/* Out of view, out of the tab order and out of the accessibility tree, rather
   than merely covered up: a control nobody can see is still a control if it
   can be reached with a keyboard. */
html[data-framed="on"] body > *:not(.frame-notice) { display: none !important; }

.frame-notice {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: var(--space-6);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
  text-align: center;
}

.frame-notice-card {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 46ch;
}

.frame-notice h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
}

.frame-notice p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.frame-notice-link {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.frame-notice-link:hover { filter: brightness(1.12); }

.frame-notice-link:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
}

.frame-notice-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-xs);
  color: var(--text-muted);
  word-break: break-all;
}