/* ─────────────────────────────────────────────────────────────────────────
   yorha-pakko.css — NieR skin for the standalone Pakko page.
   Loaded after yorha.css and Pakko's own inline <style>, so it re-points
   Pakko's private tokens at the shared YoRHa palette and squares things off.
   ───────────────────────────────────────────────────────────────────────── */

html[data-yorha] {
  --bg2: var(--bg-elevated);
  --bg3: var(--bg-soft);
  --border2: var(--border);
  --muted: var(--text-faint);
  --accent2: var(--text);
  --green: var(--ok);
  --yellow: var(--warn);
  --red: var(--bad);
  --purple: var(--text-muted);
  --radius: 0;
}

body.yorha { font-family: var(--font-sans); letter-spacing: 0.02em; }
body.yorha::before { display: none; }                     /* Pakko's own scanlines */
body.yorha .header, body.yorha .main { position: relative; z-index: 1; }

/* header */
body.yorha .header { border-bottom: 1px solid var(--border); }
body.yorha .header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; border-bottom: 1px dashed var(--border-soft); }
body.yorha .logo-text { font-family: var(--font-sans); font-weight: 300; text-transform: uppercase; letter-spacing: 0.32em; font-size: 1.5rem; }
body.yorha .logo-text span { color: var(--text-faint); }
body.yorha .logo::before { display: none; }
body.yorha .logo-badge { border-radius: 0; text-transform: uppercase; letter-spacing: 0.16em; }
body.yorha .header-sub { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; margin-right: auto; margin-left: 1rem; }
.header-tools { display: flex; align-items: center; gap: 0.9rem; }
.header-back { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; }
.header-back:hover { color: var(--text); }
body.yorha .header .yo-theme { margin-left: 0; }

/* step labels */
body.yorha .step-label { color: var(--text-muted); letter-spacing: 0.22em; }
body.yorha .step-label::before { width: 7px; height: 7px; background: var(--text-faint); opacity: 1; }

/* monochrome icons, so emoji don't fight the palette */
body.yorha .distro-icon, body.yorha .app-icon, body.yorha .category-icon { filter: grayscale(1); opacity: 0.85; }

/* distro + package-manager buttons: inverted bone bar when chosen */
body.yorha .distro-btn, body.yorha .pm-btn, body.yorha .app-card { border-radius: 0; border-color: var(--border); background: transparent; transform: none; }
body.yorha .distro-btn::after { display: none; }
body.yorha .distro-btn:hover, body.yorha .pm-btn:hover, body.yorha .app-card:hover { border-color: var(--text); background: var(--bg-elevated); transform: none; }
body.yorha .distro-name { font-family: var(--font-sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.82rem; }
body.yorha .pm-btn { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
body.yorha .distro-btn.active, body.yorha .pm-btn.active { background: var(--yo-fill); border-color: var(--yo-fill); color: var(--yo-ink); }
body.yorha .distro-btn.active .distro-name, body.yorha .distro-btn.active .distro-pkg { color: var(--yo-ink); }

/* categories + cards */
body.yorha .category-header { border-bottom: 1px dashed var(--border); }
body.yorha .category-name { font-weight: 400; letter-spacing: 0.2em; }
body.yorha .app-name { font-weight: 400; letter-spacing: 0.06em; }
body.yorha .app-checkbox { border-radius: 0; border-color: var(--text-muted); }
body.yorha .app-card.selected { background: var(--yo-fill); border-color: var(--yo-fill); }
body.yorha .app-card.selected .app-name, body.yorha .app-card.selected .app-pkg { color: var(--yo-ink); }
body.yorha .app-card.selected .app-checkbox { background: var(--yo-ink); border-color: var(--yo-ink); color: var(--yo-fill); }

/* output bar */
body.yorha .output-section { background: var(--bg); border-top: 1px solid var(--text-muted); }
body.yorha .output-count, body.yorha .output-box { font-family: var(--font-mono); }
body.yorha .output-box { background: var(--bg-elevated); border-color: var(--border); border-radius: 0; }
body.yorha .output-box.has-content { border-color: var(--text); }
body.yorha .btn-copy, body.yorha .btn-clear { border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; font-weight: 400; }
body.yorha .btn-copy { background: var(--yo-fill); color: var(--yo-ink); border: 1px solid var(--yo-fill); }
body.yorha .btn-copy:hover, body.yorha .btn-copy:active { background: transparent; color: var(--text); border-color: var(--text); }
body.yorha .btn-clear { border-color: var(--text-muted); }
body.yorha .btn-clear:hover { color: var(--bad); border-color: var(--bad); }

::-webkit-scrollbar-thumb { border-radius: 0; }

@media (max-width: 600px) {
  body.yorha .header-sub { display: none; }
  .header-tools { margin-left: auto; }
}