/* Product: Zoho Vault - page-specific design.
   Shared Zoho blue accent. The mechanic is a live security audit-log feed: rows stream in one
   at a time (who touched which credential, when), colour-coded by event kind - the exact thing
   a shared spreadsheet can never show. Distinct from every other page: a scrolling event log,
   not a diagram, slider, switch or merge animation.

   All classes scoped to .vlt-page, prefixed vlt-. */

.vlt-page { --vlt: #226eb3; --vlt-d: #17517f; --vlt-l: #eaf2f9; }

.vlt-page .ph-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px; font-weight: 700; font-size: .9rem; color: #fff;
  margin-block-end: 18px;
}
.vlt-page .ph-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }

/* ------------------------------------------------------------------------- log -- */
.vlt-log { padding: clamp(48px, 7vw, 84px) 0; }
.vlt-log h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0 0 12px; }
.vlt-log .lede { max-width: 82ch; }

.vlt-feed {
  margin-block-start: 28px;
  background: #0d1f2e; border-radius: 18px;
  padding: clamp(16px, 3vw, 26px);
  min-height: 260px;
}
.vlt-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 80ch; }
.vlt-log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: monospace, ui-monospace; }
.vlt-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
  opacity: 0; transform: translateY(-4px);
}
@media (prefers-reduced-motion: no-preference) {
  .vlt-row { animation: vlt-row-in .3s ease-out forwards; }
}
@media (prefers-reduced-motion: reduce) { .vlt-row { opacity: 1; transform: none; } }
@keyframes vlt-row-in { to { opacity: 1; transform: none; } }

.vlt-row-dot { width: 8px; height: 8px; border-radius: 50%; margin-block-start: 6px; flex: none; background: #4a90c2; }
.vlt-row-share .vlt-row-dot { background: #e8a838; }
.vlt-row-revoke .vlt-row-dot { background: #e4585a; }
.vlt-row-alert .vlt-row-dot { background: #e4585a; }

.vlt-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vlt-row-main { color: #d7e4ee; font-size: .88rem; line-height: 1.5; font-family: var(--font-body, inherit); }
.vlt-row-main b { color: #fff; }
.vlt-row-sub { color: #8fa8bd; }
.vlt-row-when { color: #6f8598; font-size: .78rem; font-family: var(--font-body, inherit); }

/* ------------------------------------------------------------------------ need -- */
.vlt-need {
  padding: clamp(40px, 6vw, 64px) 0;
  background: var(--vlt-l);
  border-block: 1px solid color-mix(in srgb, var(--vlt) 18%, var(--line));
}
.vlt-need h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin: 0 0 12px; }
.vlt-need .lede { max-width: 82ch; margin: 0; }

/* ------------------------------------------------------------------------- caps -- */
.vlt-caps { padding: clamp(48px, 7vw, 84px) 0; }
.vlt-caps h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 22px; }
.vlt-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 13px; }
.vlt-cap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; }
.vlt-cap b { display: block; margin-block-end: 6px; font-size: 1.02rem; color: var(--vlt-d); }
.vlt-cap p { margin: 0; color: var(--muted); font-size: .93rem; }

/* ----------------------------------------------------------------------- move -- */
.vlt-move { padding: clamp(48px, 7vw, 84px) 0; }
.vlt-move h2 { font-size: 1.35rem; margin: 0 0 10px; }
.vlt-move h3 { font-size: 1.08rem; }