/* ════════════════════════════════════════════════════════════════════
   ZIION — "CIVIC LEDGER" aesthetic layer
   Product shell for a gated nation: quiet field, ledger lines, numbered
   passes, and charged alignment signals. Loaded AFTER components.css.
   ════════════════════════════════════════════════════════════════════ */

/* ── The ledger field ──────────────────────────────────────────────── */
body {
  background: var(--landscape);
  background-attachment: fixed;
  background-size: auto, 72px 72px, 72px 72px, auto;
  background-position: center;
  color: var(--ink);
}
.app   { background: transparent; }
.main  { background: transparent; }

/* Fine system grain: visible enough to avoid flatness, never decorative. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .026; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app { position: relative; z-index: 1; }

/* ── Diffused ledger surfaces ─────────────────────────────────────── */
.header {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), 0 1px 0 rgba(24,32,26,0.04);
}
.nav {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-right: 1px solid var(--glass-border);
}

.surface,
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft), var(--glass-edge);
}
.surface-quiet {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge);
}
.surface-tint {
  background: linear-gradient(180deg, var(--glass-tint), var(--glass-bg-2));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  box-shadow: var(--shadow-soft), var(--glass-edge);
}
.card-link:hover, .card-hover:hover { border-color: rgba(var(--accent-rgb),0.40); box-shadow: var(--shadow-2), var(--glass-edge); }

.modal {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur-strong); backdrop-filter: var(--blur-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2), var(--glass-edge);
}
.modal-scrim { background: rgba(16,22,18,0.34); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toast {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-2), var(--glass-edge);
}

/* ── Product typography ───────────────────────────────────────────── */
.page-title-block h1,
.t-h1, .t-h2,
.lib-hero h2,
.empty h3,
.t-h3, .section-head h2, .lib-row-head h3 {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.t-display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* ── Civic mono labels ────────────────────────────────────────────── */
.t-mono, .nav-section-label, .stat-label, .crumb, .badge,
.post__ago, .hero-mono, .feed-filter .ff-scope, .composer .composer-send {
  font-family: var(--font-label);
  font-weight: 700;
}
.nav-section-label { letter-spacing: .14em; }

/* ── Numeric readouts ─────────────────────────────────────────────── */
.stat .stat-num,
.pixel, .metric, .counter, .num-pixel {
  font-family: var(--font-pixel);
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.pixel-lg { font-family: var(--font-pixel); font-weight: 800; letter-spacing: .005em; line-height: .96; }

/* ── Tactile controls ─────────────────────────────────────────────── */
.btn-secondary {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge);
}
.btn-secondary:hover { background: var(--bg-2); }
.btn-primary { box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.30); }
.search-wrap, .input, .textarea, .select {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-color: var(--glass-border);
}
.pill { background: var(--glass-bg-2); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.pill.is-active { background: var(--ink); color: var(--bg-2); border-color: var(--ink); }
.tab.is-active { border-bottom-color: var(--accent); }

/* ── Avatars — aligned nodes, not stock portraits ─────────────────── */
.avatar, .post__avatar {
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,0.72), transparent 22%),
    linear-gradient(135deg, rgba(var(--accent-rgb),0.34), rgba(24,32,26,0.18));
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

/* ── Mobile nav glass ─────────────────────────────────────────────── */
.mobnav {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border-top: 1px solid var(--glass-border);
}

/* ── Patch legacy night-isms so civic theme reads right ───────────── */
.post:hover { background: rgba(var(--accent-rgb),0.04); }
.lib-hero { background:
  linear-gradient(135deg, var(--accent-tint-2), rgba(255,251,243,0.30)),
  var(--glass-bg);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--shadow-soft), var(--glass-edge);
}
.lib-hero .hero-progress { background: rgba(58,42,26,0.12); }
.lib-card { background: var(--glass-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-soft), var(--glass-edge); }
.lib-card .thumb { background: linear-gradient(135deg, var(--bg-3), var(--bg-0)); color: var(--ink-3); }
.lib-card .thumb .play { background: rgba(24,32,26,0.58); }
.lib-top10 .rank { color: rgba(24,32,26,0.14); }
.lib-top10 li:hover { background: var(--glass-bg-2); }

/* ── Accent swatches ─────────────────────────────────────────────── */
.accent-swatch[data-accent="green"]  { background: #1F8A5B; }
.accent-swatch[data-accent="yellow"] { background: #A97824; }
.accent-swatch[data-accent="blue"]   { background: #247C84; }
.accent-swatch.is-active::after { border-color: var(--ink); }

/* ── Brand dot: charged alignment point ───────────────────────────── */
.brand .dot { box-shadow: 0 0 10px rgba(var(--accent-rgb),0.48); }

/* ── Selection ────────────────────────────────────────────────────── */
::selection { background: var(--accent); color: var(--accent-on); }

/* Reduced-transparency / older browsers fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .surface, .card, .header, .nav, .modal, .toast, .lib-card { background: var(--bg-2); }
  .surface-quiet { background: var(--bg-3); }
}