/* Einführung (tour.js) + leere Seiten (empty-model.js). Nur Tokens aus tokens.css: mono,
   Haarlinien, EIN Hauptknopf (die invertierte Fläche). */

/* ---- Einführung: Vollbild über der App ------------------------------------------------- */
.tour { position:fixed; inset:0; z-index:90; background:var(--bg); color:var(--text);
  display:flex; justify-content:center; overflow-y:auto; overscroll-behavior:contain; }
body.tour-on { overflow:hidden; }
.tour-box { width:100%; max-width:26rem; min-height:100dvh; box-sizing:border-box; display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + .5rem) 1.25rem calc(env(safe-area-inset-bottom) + 1.25rem); }
.tour-top { display:flex; justify-content:flex-end; }
.tour-skip { align-self:auto; color:var(--text-2); font-weight:600; }
.tour-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:.75rem; padding:1rem 0 2rem; touch-action:pan-y; }
.tour-art { display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-bottom:1.25rem; }
.tour-icon { width:6rem; height:6rem; border-radius:50%; border:1px solid var(--hairline-strong);
  display:flex; align-items:center; justify-content:center; color:var(--text-strong); }
.tour-icon svg { width:2.6rem; height:2.6rem; overflow:visible; }
/* the dialog container takes focus on open (tabindex -1, not a control) — the buttons keep their ring */
.tour-box:focus { outline:none; }
.tour-sample { min-height:3.6rem; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tour-chip { pointer-events:none; display:inline-flex; align-items:center; border-radius:var(--radius-sm); }
.tour-line { border:1px solid var(--hairline-strong); border-radius:var(--radius-pill); padding:.45rem .95rem;
  font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.tour-code { font-family:var(--mono); font-size:1.25rem; letter-spacing:.12em; font-weight:650; color:var(--text-strong);
  border:1px dashed var(--hairline-strong); border-radius:var(--radius-sm); padding:.45rem .9rem; }
.tour-big { font-family:var(--font-display); font-size:2.6rem; font-weight:760; line-height:1; color:var(--text-strong);
  font-variant-numeric:tabular-nums; }
.tour-big-sub { font-size:.85rem; margin-top:.3rem; }
.tour-title { margin:0; font-family:var(--font-display); font-size:1.6rem; font-weight:720; color:var(--text-strong);
  text-wrap:balance; }
.tour-text { margin:0; max-width:22rem; color:var(--text-2); font-size:1.02rem; line-height:1.5; text-wrap:pretty; }
.tour-foot { display:flex; flex-direction:column; gap:1rem; }
.tour-nav { display:grid; grid-template-columns:5.5rem 1fr 5.5rem; align-items:center; min-height:44px; }
.tour-back { justify-self:start; color:var(--text-2); font-weight:600; }
.tour-dots { display:flex; justify-content:center; gap:.5rem; grid-column:2; }
.tour-dot { width:.5rem; height:.5rem; border-radius:50%; background:var(--hairline-strong); }
.tour button { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tour-dot.on { background:var(--text-strong); transform:scale(1.2); }
.tour-next { width:100%; min-height:3.1rem; font-size:1.02rem; }
.tour .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion: no-preference) {
  .tour-in { animation:tourIn .22s ease-out; }
  .tour-dot { transition:background-color var(--t-normal), transform var(--t-normal); }
  @keyframes tourIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
}

/* ---- leere Seiten: Satz + der eine Knopf ----------------------------------------------- */
.empty-card > .btn-primary, .empty-card > .btn-row { margin-top:.35rem; }
.empty-card > .btn-primary { width:100%; }
.empty-text { margin:.1rem 0 .4rem; color:var(--text-2); line-height:1.5; }
.feed-empty h2 { margin:0 0 .35rem; }