/* ════════════════════════════════════════════════════════════
   AL MILLENNIUM — vault.css
   Shared component styles for The Vault (member area). Class names
   follow VAULT_CONTEXT.md. Loaded after style.css + app.css on
   vault pages. Page-only styles stay in the page's @push.
   ════════════════════════════════════════════════════════════ */

/* ── Vault nav (.vn) ──────────────────────────────────────── */
.vn { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 60px;
  display: flex; align-items: center; gap: 28px; padding: 0 32px;
  background: rgba(4,4,6,0.86); backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border); }
.vn-logo { display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-bright); }
.vn-logo img { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(147,115,65,0.45)); }
.vn-links { display: flex; gap: 26px; list-style: none; align-items: center; }
.vn-links a, .vn-codex-btn { font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
  text-decoration: none; background: none; border: none; cursor: pointer;
  transition: color 0.2s; padding: 0; }
.vn-links a:hover, .vn-links a.active, .vn-codex-btn:hover { color: var(--gold-bright); }
.vn-links a.active { position: relative; }
.vn-links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px;
  height: 1px; background: var(--gold-light); }
.vn-codex-li { position: relative; }
.vn-codex-fly { position: absolute; top: 28px; left: -16px; min-width: 160px;
  background: var(--bg-glass); border: 1px solid var(--border);
  backdrop-filter: blur(20px); padding: 8px 0; opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.vn-codex-li:hover .vn-codex-fly { opacity: 1; visibility: visible; transform: translateY(0); }
.vn-cf-item { display: block; padding: 9px 18px; font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-sub); text-decoration: none; transition: color 0.2s, background 0.2s; }
.vn-cf-item:hover { color: var(--gold-bright); background: rgba(196,185,152,0.05); }
.vn-spacer { flex: 1; }
.vn-icons { display: flex; align-items: center; gap: 18px; }
.vn-bell { position: relative; color: var(--text-sub); background: none; border: none;
  cursor: pointer; display: flex; transition: color 0.2s; text-decoration: none; }
.vn-bell:hover { color: var(--gold-bright); }
.vn-bell-badge { position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px;
  padding: 0 4px; border-radius: 8px; background: var(--nation-frysia); color: #1a0d08;
  font-family: var(--font-mono); font-size: 9px; line-height: 15px; text-align: center; }
.vn-avatar-li { position: relative; }
.vn-avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-hover);
  background: var(--bg3); color: var(--gold-bright); font-family: var(--font-display);
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; }
.vn-menu { position: absolute; top: 40px; right: 0; min-width: 180px; background: var(--bg-glass);
  border: 1px solid var(--border); backdrop-filter: blur(20px); padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.vn-avatar-li:hover .vn-menu, .vn-menu:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.vn-menu a, .vn-menu button { display: block; width: 100%; text-align: left; padding: 10px 18px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-sub); text-decoration: none; background: none; border: none; cursor: pointer;
  transition: color 0.2s, background 0.2s; }
.vn-menu a:hover, .vn-menu button:hover { color: var(--gold-bright); background: rgba(196,185,152,0.05); }
.vn-menu .sep { height: 1px; background: var(--border); margin: 6px 0; }
@media (max-width: 900px) { .vn-links { display: none; } }

/* ── Content wrapper + zones ──────────────────────────────── */
.vc { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--page-pad); }
@media (max-width: 700px) { .vc { padding: 0 24px; } }
.vzone { display: flex; align-items: center; gap: 18px; margin: 56px 0 28px; }
.vzone-label { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.vzone-rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-dim), transparent); }

/* ── Greeting bar ─────────────────────────────────────────── */
.vg { padding: 96px 0 8px; }
.vg-hi { font-family: 'Cinzel', serif; font-size: clamp(24px, 3vw, 36px); font-weight: 700;
  letter-spacing: 0.04em; color: var(--gold-bright); }
.vg-hi em { font-style: italic; font-weight: 400; color: var(--gold-light); }
.vg-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-muted); margin-top: 10px; }
.vg-sub a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.vg-sub a:hover { color: var(--gold-bright); }

/* ── Shelves (.vs) ────────────────────────────────────────── */
.vs { margin-bottom: 16px; }
.vs-grid { display: grid; gap: 18px; }
.vs-grid.port { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vs-grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ── Vault cards ──────────────────────────────────────────── */
.vcard { position: relative; display: block; text-decoration: none; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border); aspect-ratio: 2/3; }
.vcard.wide { aspect-ratio: 16/9; }
.vcard .vcard-img { position: absolute; inset: 0; background-size: cover; background-position: center 25%;
  filter: brightness(0.6) contrast(1.08) saturate(0.85); transition: transform 0.8s var(--ease-out), filter 0.6s; }
.vcard:hover .vcard-img { transform: scale(1.05); filter: brightness(0.8) saturate(1); }
.vcard::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,4,6,0.95), rgba(4,4,6,0.2) 55%, transparent 75%); }
.vcard-body { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; }
.vcard-title { font-family: 'Cinzel', serif; font-size: 17px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-bright); line-height: 1.05; }
.vcard-title em { font-style: italic; font-weight: 400; color: var(--gold-light); }
.vcard-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em;
  color: var(--gold); margin-top: 6px; text-transform: uppercase; }
.vcard-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,0.4); z-index: 3; }
.vcard-progress > span { display: block; height: 100%; background: linear-gradient(to right, var(--gold-dim), var(--gold-light)); }

/* ── Dispatch rows (.vd-row) ──────────────────────────────── */
.vd-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.vd-row { display: block; background: var(--bg2); padding: 22px 26px; text-decoration: none;
  border-left: 2px solid transparent; transition: background 0.2s, border-color 0.2s; }
.vd-row:hover { background: var(--bg3); }
.vd-row.unread { border-left-color: var(--gold-light); }
.vd-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.vd-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); }
.vd-excl { font-family: var(--font-display); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-bright); border: 1px solid var(--gold-dim); padding: 2px 8px; }
.vd-date { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.vd-title { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--gold-bright); margin-bottom: 6px; }
.vd-body { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.7; color: var(--text-sub); }

/* ── Vault footer ─────────────────────────────────────────── */
.v-footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 36px var(--page-pad);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.v-footer-links { display: flex; gap: 24px; list-style: none; }
.v-footer-links a, .v-footer button { font-family: var(--font-display); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-sub); text-decoration: none; background: none; border: none; cursor: pointer; transition: color 0.2s; }
.v-footer-links a:hover, .v-footer button:hover { color: var(--gold-bright); }
.v-footer-brand { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); }