/* Shell + layout for the per-app pages under /apps/.
 * Vocabulary is lifted from compatibility.html so the two pages read as one
 * system: same nav, same mono status tags, same footer, same rules.
 * Generated pages link tokens.css then this file. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  font-family: var(--font-body); font-size: var(--text-base);
  background: var(--color-paper); color: var(--color-ink-2);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 720px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 1.5rem); }
.mono { font-family: var(--font-mono); }

.skip {
  position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-modal);
  background: var(--color-paper); border: var(--rule); border-radius: var(--radius-btn);
  padding: var(--space-xs) var(--space-md); color: var(--color-ink); white-space: nowrap;
}
.skip:focus-visible { top: var(--space-md); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm); line-height: 1;
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); text-decoration: none; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { border-color: var(--color-rule-2); color: var(--color-ink); }
.btn--ghost:hover { border-color: var(--color-ink-2); text-decoration: none; }

.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in oklab, var(--color-paper) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-rule);
}
.nav__inner { display: flex; align-items: center; gap: var(--space-md); height: 60px; }
.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  color: var(--color-ink); letter-spacing: -0.01em; white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.nav__spacer { flex: 1; }
.nav__link { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.nav__link:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }
.nav .btn { padding: var(--space-xs) var(--space-sm); }

main { padding: var(--space-xl) 0 var(--space-3xl); }

.crumb { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: var(--space-lg); }
.crumb a { color: var(--color-muted); }
.crumb a:hover { color: var(--color-ink-2); }

h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 2.6vw + 0.6rem, 2.6rem);
  line-height: 1.08; letter-spacing: -0.02em; margin-bottom: var(--space-sm);
}
.lede { max-width: 62ch; font-size: var(--text-md); margin-bottom: var(--space-lg); }

/* status vocabulary — identical to compatibility.html; must stay honest */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--color-rule); border-radius: 4px;
  padding: var(--space-3xs) var(--space-xs); color: var(--color-muted);
}
.t-verified { color: var(--color-accent); border-color: var(--color-accent); }
.t-should { color: var(--color-ink-2); }
.t-beta { color: var(--color-muted); }

.statusbar {
  display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
.statusbar .engine { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.statusnote { font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; margin-bottom: var(--space-xl); }
.statusnote:has(+ .specifics) { margin-bottom: var(--space-sm); }

/* A couple of concrete, checkable facts about this app's clone — a tested
   version number, a real mechanism, a real caveat. Kept visually quiet
   (mono, muted) since it reads as a spec sheet, not prose. */
.specifics {
  list-style: none; max-width: 62ch; margin: 0 0 var(--space-xl);
  padding-top: var(--space-2xs); border-top: 1px dashed var(--color-rule);
}
.specifics li {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted);
  line-height: 1.7; padding: var(--space-3xs) 0;
}
.specifics li::before { content: "→ "; color: var(--color-accent); }

.cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-xs); }
.cta__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.03em; }

h2 {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  letter-spacing: -0.01em; margin: var(--space-2xl) 0 var(--space-md);
}
h2:first-of-type { margin-top: var(--space-2xl); }
p { max-width: 62ch; margin-bottom: var(--space-md); }

.gets { border-top: 1px solid var(--color-rule); list-style: none; }
.gets li {
  border-bottom: 1px solid var(--color-rule); padding: var(--space-sm) 0;
  font-size: var(--text-sm); display: flex; gap: var(--space-sm); align-items: baseline;
}
.gets li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px;
  background: var(--color-accent);
}
.gets strong { color: var(--color-ink); font-weight: 500; }

.note {
  border: 1px solid var(--color-rule); border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-card); padding: var(--space-md);
  font-size: var(--text-sm); line-height: 1.65; max-width: 68ch;
  margin-bottom: var(--space-md);
}
.note .label {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}
.note p { margin-bottom: 0; max-width: none; }

.steps { list-style: none; counter-reset: s; border-top: 1px solid var(--color-rule); }
.steps li {
  counter-increment: s; border-bottom: 1px solid var(--color-rule);
  padding: var(--space-md) 0 var(--space-md) 2.75rem; position: relative; font-size: var(--text-sm);
}
.steps li::before {
  content: counter(s) "."; position: absolute; left: 0; top: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent);
}
.steps strong { color: var(--color-ink); font-weight: 500; }

.faq { border-top: 1px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-md) 0;
  font-weight: 500; color: var(--color-ink); font-size: var(--text-sm);
  display: flex; justify-content: space-between; gap: var(--space-md); align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-muted); flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 var(--space-md); font-size: var(--text-sm); max-width: 60ch; margin: 0; }

.closer {
  margin-top: var(--space-2xl); border: 1px solid var(--color-rule-2);
  border-radius: var(--radius-card); padding: var(--space-xl) var(--space-lg);
}
.closer h2 { margin: 0 0 var(--space-xs); }
.closer p { font-size: var(--text-sm); margin-bottom: var(--space-md); }

.related { margin-top: var(--space-2xl); }
.related h2 { margin-bottom: var(--space-sm); }
.related ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.related a {
  display: inline-flex; font-size: var(--text-sm); color: var(--color-ink-2);
  border: 1px solid var(--color-rule); border-radius: var(--radius-btn);
  padding: var(--space-2xs) var(--space-sm);
}
.related a:hover { border-color: var(--color-rule-2); color: var(--color-ink); text-decoration: none; }

footer { border-top: 1px solid var(--color-rule); padding: var(--space-2xl) 0; }
.foot__brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }
.foot__brand svg { width: 20px; height: 20px; }
.foot__links { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }
.foot__links a { color: var(--color-ink-2); }
.foot__disclaimer { color: var(--color-muted); font-size: var(--text-xs); max-width: 62ch; margin-top: var(--space-md); line-height: 1.7; }

@media (pointer: coarse) {
  .btn, .nav__link { min-height: 44px; }
  .nav__link { display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  html { scroll-behavior: auto; }
}