/* The arrow-lab.de pages (home.html, 404.html): the few pieces the gallery's markup does
   not already have. Tokens only, no raw colours (docs/README.md §2.2), so every theme
   draws them in its own palette. Loaded after the theme files. */

/* ---------- home: the app list ---------- */
/* Four entries: where a theme keeps the base grid, two columns instead of three and an orphan. */
:is([data-theme="pop"], [data-theme="horizon"], [data-theme="cyberpunk"]) body[data-site="home"] .game-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
/* A status that failed is the one thing on the page that has to stand out. */
.game-status.down { color: var(--danger); }
[data-theme="horizon"] .game-status.down { background: var(--danger-soft); }
.offline-badge.down i { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent); }

/* The way to the theme gallery: there for whoever looks, not competing with the apps. */
.quiet-link {
  color: var(--faint); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  text-decoration: none; opacity: .8;
  transition: var(--fade), opacity var(--t-fast) var(--ease);
}
.quiet-link:hover, .quiet-link:focus-visible { color: var(--muted); opacity: 1; text-decoration: underline; }

/* ---------- theme-generated strings, with this site's noun (docs/README.md §2.8) ---------- */
[data-theme="arcade"] body[data-site="home"] .home-hero::after { content: "\25B8  Select an app"; }
[data-theme="arcade"]:lang(de) body[data-site="home"] .home-hero::after { content: "\25B8  App wählen"; }
[data-theme="arcade"] body[data-site="notfound"] .home-hero::after { content: "\25B8  Game over"; }
[data-theme="arcade"]:lang(de) body[data-site="notfound"] .home-hero::after { content: "\25B8  Game over"; }
/* Cyberpunk's vertical sign names the site in katakana. */
[data-theme="cyberpunk"] body[data-site="home"] .home-hero::after { content: "\30A2\30ED\30FC\30FB\30E9\30DC"; }
[data-theme="cyberpunk"] body[data-site="notfound"] .home-hero::after { content: "\30A8\30E9\30FC\30FB\56DB\3007\56DB"; }

/* ---------- 404 ---------- */
.intro code, .nf-advice code {
  font-family: var(--font-mono); font-size: .85em;
  padding: .1em .35em; border-radius: min(var(--r-ctl), 4px);
  background: var(--surface-2); color: var(--text);
}
.nf-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 16px; margin-top: 8px; }
.nf-grid .nf-host { grid-column: 1 / -1; }
.nf-hostname {
  margin: 0; overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: clamp(1.5rem, 4.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.01em;
  color: var(--accent);
}
.nf-hostname.is-long { font-size: clamp(1.1rem, 2.8vw, 1.6rem); line-height: 1.35; }

.nf-log dl { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 0; margin: 0; font-family: var(--font-mono); font-size: .82rem; line-height: 1.5; }
.nf-row { display: contents; }
.nf-log dt { padding-right: 14px; color: var(--faint); letter-spacing: .06em; }
.nf-log dd { margin: 0; padding-right: 14px; color: var(--muted); overflow-wrap: anywhere; }
.nf-log .nf-found { padding-right: 0; color: var(--text); text-align: right; }
.nf-verdict dt { color: var(--accent); font-weight: 600; }
.nf-verdict dd { color: var(--text); }
.nf-verdict > * { padding-top: 10px; border-top: 1px solid var(--border); }
/* Still, not blinking: the system moves in five places and this is not one of them (§2.7). */
.nf-caret { display: inline-block; width: .55em; height: 1.05em; margin-left: .35em; vertical-align: -.2em; background: var(--accent); }

.nf-advice p { margin: 0; max-width: 40rem; color: var(--muted); line-height: 1.5; }
.nf-advice p + p { margin-top: 10px; }
.nf-advice b { color: var(--text); }

.nf-diag { margin-top: 16px; }
.nf-diag .stat { min-width: 0; max-width: 100%; }
.nf-diag .stat-value { overflow-wrap: anywhere; font-size: .95rem; }

@media (max-width: 760px) { .nf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  /* each lookup becomes two lines rather than something to scroll sideways */
  .nf-log dl { grid-template-columns: auto 1fr; }
  .nf-log .nf-found { grid-column: 2; text-align: left; margin-top: -4px; }
  .nf-verdict .nf-found { padding-top: 0; border-top: 0; }
}