/* The site's frame around a Fun with AI piece: the credit bar and the
   explanation. Loaded last. It resets its own elements to browser
   defaults, so a piece's CSS cannot restyle it. On :root it sets only the
   colour scheme and the site's colour tokens (--site-*, the values in
   src/styles/opus.css); each piece maps its own palette onto them, so the whole
   page follows the visitor's light/dark choice that theme.js puts on <html>. */
:root {
  --site-bg: #f4f5f3; --site-bg-2: #e6ebe9; --site-card: #ffffff; --site-ink: #19262c; --site-ink-2: #3a4d54;
  --site-muted: #54666c; --site-rule: #c9d1d2; --site-accent: #1d6473; --site-accent-ink: #165260; --site-on-accent: #ffffff;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --site-bg: #07080a; --site-bg-2: #0d1015; --site-card: #101419; --site-ink: #ece6da; --site-ink-2: #c3bcab;
  --site-muted: #9d9689; --site-rule: #272d36; --site-accent: #f2643a; --site-accent-ink: #ff7c52; --site-on-accent: #07080a;
  color-scheme: dark;
}

.fwa-frame, .fwa-frame * { all: revert; }

.fwa-frame {
  --fwa-bg: var(--site-card); --fwa-ink: var(--site-ink); --fwa-ink-2: var(--site-ink-2); --fwa-muted: var(--site-muted);
  --fwa-rule: var(--site-rule); --fwa-accent: var(--site-accent-ink);
  --fwa-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fwa-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  box-sizing: border-box;
  display: block;
  width: auto;
  max-width: 72rem;
  margin: 12px max(12px, calc((100% - 72rem) / 2));
  padding: 12px 16px;
  background: var(--fwa-bg);
  color: var(--fwa-ink);
  border: 1px solid var(--fwa-rule);
  border-radius: 10px;
  font: 400 15px/1.6 var(--fwa-sans);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  overflow-wrap: break-word;
}

.fwa-frame p { margin: 0; }
.fwa-frame p + p { margin-top: 8px; }
.fwa-frame b { font-weight: 600; color: var(--fwa-ink); }
.fwa-frame a { color: var(--fwa-accent); text-decoration: underline; text-underline-offset: 3px; }
.fwa-frame a:focus-visible, .fwa-frame summary:focus-visible { outline: 2px solid var(--fwa-accent); outline-offset: 3px; border-radius: 2px; }

.fwa-frame.fwa-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.fwa-frame .fwa-back { font: 500 12px/1.4 var(--fwa-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.fwa-frame .fwa-back:hover { text-decoration: underline; }
.fwa-frame .fwa-credit { color: var(--fwa-ink-2); }
.fwa-frame .fwa-credit span { font: 400 12px/1.4 var(--fwa-mono); color: var(--fwa-muted); margin-left: 6px; }

.fwa-frame summary {
  display: list-item; cursor: pointer; color: var(--fwa-muted);
  font: 500 12px/1.4 var(--fwa-mono); letter-spacing: .06em; text-transform: uppercase;
}
.fwa-frame .fwa-cols + details { margin-top: 10px; }
.fwa-frame details[open] > summary { margin-bottom: 8px; }
.fwa-frame.fwa-explain p { max-width: 68ch; color: var(--fwa-ink-2); }
/* Two columns where there is room; a caveat kept in view spans both, at a reading measure. */
@media (min-width: 900px) {
  .fwa-frame .fwa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
  .fwa-frame .fwa-cols p + p { margin-top: 0; }
  .fwa-frame .fwa-cols .fwa-wide { grid-column: 1 / -1; max-width: 80ch; }
}

.fwa-frame.fwa-noscript { border-left: 3px solid var(--fwa-accent); }

@media print {
  .fwa-frame { break-inside: avoid; }
  /* A closed <details> would print as its summary alone; print what it holds. */
  details::details-content { content-visibility: visible; display: block; }
}