/* ==========================================================================
   VAULTRIS — MISSION bridge  (loads after style.css AND mission.css)
   ---------------------------------------------------------------------------
   The 40 interior pages still carry ~149 legacy component classes. This sheet
   re-points style.css's own tokens at the Mission palette and restyles the
   legacy-only components, so those pages adopt the new language without their
   bodies being rewritten. Load order:  style.css -> mission.css -> this.
   ========================================================================== */

/* --------------------------------------------- 1. re-point legacy tokens */
:root {
  --bg:          #ffffff;
  --bg-soft:     #f7f9fc;
  --bg-tint:     #eef3f9;

  --ink:         #0b1524;
  --body:        #4a5768;
  --muted:       #78889c;

  --brand:       #1a7fe8;
  --brand-2:     #59a6f5;
  --brand-deep:  #1266c4;
  --brand-soft:  #e8f2fe;
  --brand-glow:  rgba(26,127,232,.14);
  --gold:        #1a7fe8;          /* the old accent folds into the signal */

  --navy:        #0b1524;
  --navy-2:      #111d30;

  --line:        #dde5ef;
  --line-soft:   #eaeff6;

  --sh-1: 0 1px 2px rgba(11,21,36,.06);
  --sh-2: 0 8px 24px -10px rgba(11,21,36,.16);
  --sh-3: 0 24px 60px -22px rgba(11,21,36,.32);

  --r-sm: 5px;
  --r:    6px;
  --r-lg: 12px;
  --r-xl: 18px;

  --maxw: 1320px;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* --------------------------------------------------- 2. legacy typography */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.028em; font-weight: 680; }
h1 { font-size: clamp(2.1rem, 3.4vw, 3.05rem); line-height: 1.06; }
h2 { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }

/* the legacy eyebrow was a brass mono rule in the Ledger; here it is a blue
   tracked label with no rule, matching the comps */
.eyebrow {
  display: block; font-family: var(--text, var(--sans));
  font-size: .74rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin: 0 0 16px;
}
.eyebrow::after { content: none; display: none; }
.eyebrow.center, .center .eyebrow { text-align: center; }
.cta-band .eyebrow, .help-hero .eyebrow, .blog-hero .eyebrow { color: var(--brand-2); }

/* ------------------------------------------------------- 3. legacy blocks */
/* cards become the Mission card: white, rounded, soft shadow, hover lift */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 28px; box-shadow: var(--sh-1); text-align: left;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); border-color: #cddaea; }
.card .num, .card .n {
  display: inline-block; font-family: var(--text, var(--sans)); font-size: .68rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft); padding: 4px 9px;
  border-radius: 4px; margin-bottom: 12px;
}
.bg-alt { background: var(--bg-soft); }

/* photo panels and screenshots */
.split-media, .hero-bg, .card-media, .mcard-img, .feature-media, .blog-hero {
  border-radius: var(--r-lg) !important; border: 1px solid var(--line); box-shadow: var(--sh-2);
}
figure.shot img, .split-media.shot img, .split-media.shotfit img, .post-hero {
  border-radius: var(--r-lg) !important; border: 1px solid var(--line); box-shadow: var(--sh-2);
}
figure.shot figcaption, .split-media.shot figcaption, .split-media.shotfit figcaption {
  font-family: var(--text, var(--sans)); font-size: .82rem; letter-spacing: 0;
  text-transform: none; color: var(--muted); text-align: center;
}
.split-media figcaption {
  background: linear-gradient(transparent, rgba(11,21,36,.82));
  font-family: var(--text, var(--sans)); letter-spacing: .04em;
}

/* checklists take the Mission blue tick */
.checks li::before { background: var(--brand-soft); }
.checks li::after { border-left-color: var(--brand); border-bottom-color: var(--brand); }
.checks strong { color: var(--ink); font-weight: 640; }

/* callouts */
.callout, .note {
  border: 1px solid #cfe0f6; border-left: 3px solid var(--brand);
  background: var(--brand-soft); border-radius: 0 var(--r) var(--r) 0; color: #24405e;
}
.callout.warn, .note.warn {
  border-color: #f5d9b0; border-left-color: #d97706; background: #fdf6ec; color: #6b4a12;
}

/* numbers */
.stat-band, .trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-soft); }
.stat-band b {
  font-family: var(--display); font-weight: 680; letter-spacing: -.025em;
  color: var(--brand); background: none; -webkit-text-fill-color: currentColor;
}
.stat-band span, .trust-inner span {
  font-family: var(--text, var(--sans)); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}

/* tables */
.table-wrap { border-radius: var(--r-lg); border-color: var(--line); background: #fff;
  box-shadow: var(--sh-1); }
th { background: var(--bg-soft); font-family: var(--text, var(--sans)); font-size: .72rem;
  font-weight: 700; letter-spacing: .12em; color: var(--muted); }
td { border-bottom-color: var(--line-soft); }
tbody tr:hover { background: #fafcff; }

/* accordions */
details { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
  margin-bottom: 12px; box-shadow: var(--sh-1); }
details:hover { border-color: #cddaea; box-shadow: var(--sh-2); }
details summary {
  font-family: var(--display); font-weight: 650; letter-spacing: -.018em;
  padding: 20px 56px 20px 24px; color: var(--ink);
}
details summary::after {
  content: "+"; color: var(--brand); background: var(--brand-soft);
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.05rem; font-weight: 400; right: 20px;
}
details[open] summary::after { content: "\2212"; }
details .acc-body, details .details-body { padding: 0 24px 22px; }

/* the dark bookend */
.cta-band { background: var(--navy); }
.cta-band h2 { color: #fff; } .cta-band .lede { color: #a9b7c8; }
.cta-band .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.cta-band .btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.34); color: #fff; }

/* terminal / code */
.terminal { background: #08111d; border-color: #1b2b40; border-radius: var(--r-lg); }
.terminal-bar { background: #0d1826; border-bottom-color: #1b2b40; }
.terminal-bar i:first-child { background: var(--brand); }
.terminal .c-b { color: #7fc4ff; } .terminal .c-s { color: #9bd7ff; } .terminal .c-o { color: #86efac; }

/* forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); }
.field input, .field select, .field textarea {
  border-radius: var(--r); border-color: var(--line); background: #fff;
  font-family: var(--sans);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow); outline: none;
}
.field label { font-family: var(--text, var(--sans)); font-size: .78rem; font-weight: 650;
  letter-spacing: .04em; text-transform: none; color: var(--ink); }

/* pills return: this language uses them */
.chip, .status-pill, .cat-pill, .tag, .tier-name {
  border-radius: 999px !important; font-family: var(--text, var(--sans));
  font-size: .74rem; font-weight: 650; letter-spacing: .02em; text-transform: none;
}
.chip.on, .filter-bar .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ------------------------------------------- 4. breadcrumbs & section nav */
.crumbs, .crumbs a {
  font-family: var(--text, var(--sans)); font-size: .8rem; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.crumbs strong { color: var(--brand); font-weight: 650; }

.subnav {
  top: 74px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.subnav-label { font-family: var(--text, var(--sans)); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.subnav-inner a {
  font-family: var(--text, var(--sans)); font-size: .86rem; font-weight: 520;
  letter-spacing: 0; text-transform: none; border-radius: 999px; color: var(--body);
  border-bottom: 0; padding: 7px 14px;
}
.subnav-inner a:hover { color: var(--brand); background: var(--brand-soft) !important; }
.subnav-inner a.current {
  color: #fff !important; background: var(--brand) !important; font-weight: 600;
}
[id] { scroll-margin-top: 140px; }

/* page headers */
.page-head { background: var(--bg-soft); border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------- 5. blog */
.blog-card { border-radius: var(--r-lg); border: 1px solid var(--line); background: #fff;
  box-shadow: var(--sh-1); overflow: hidden; }
.blog-card:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.blog-card .card-media { border-radius: 0 !important; border: 0;
  border-bottom: 1px solid var(--line); box-shadow: none; }
.blog-card-body { padding: 22px 22px 26px; }
.post-meta, .blog-card .post-meta {
  font-family: var(--text, var(--sans)); font-size: .78rem; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
.cat-pill { background: var(--brand); color: #fff; border: 0; }
.post-toc a, .toc a { font-family: var(--text, var(--sans)); font-size: .86rem;
  letter-spacing: 0; text-transform: none; }
.post-toc a.current, .toc a.current { color: var(--brand); border-left-color: var(--brand); }
.read-bar { background: var(--brand); }
.related-list a, .post-nav a { border-radius: var(--r-lg); border-color: var(--line); }

/* help / product guide */
.help-hero { background: var(--navy); }
.help-rule { background: var(--brand); }
.help-main h2 .n { color: var(--brand); }
.watch { border-radius: var(--r-lg); border-color: var(--line); background: #fff;
  box-shadow: var(--sh-1); }
.watch-play { background: var(--brand); border-radius: 999px; }

/* diagram */
.dg-node { border-radius: var(--r-lg); border-color: var(--line); }
.dg-badge, .dg-chips span { border-radius: 999px; font-family: var(--text, var(--sans));
  font-size: .7rem; letter-spacing: .02em; }
.bt { border-radius: var(--r-lg); }

/* --------------------------------------------- 6. retire the old chrome */
.site-header, .site-footer { display: none !important; }

/* ------------------------------------------------------- 7. containment */
/* grid/flex children default to min-width:auto — one long code line or a wide
   table otherwise stretches the whole document on a phone */
.split > *, .grid > *, .post-layout > *, .help-layout > *, .page-head .wrap > *,
.feature > * { min-width: 0; }
pre, .post-body pre, .terminal pre { overflow-x: auto; max-width: 100%; }
.post-body code, .post-body kbd { overflow-wrap: break-word; word-break: break-word; }
.post-body table { display: block; overflow-x: auto; max-width: 100%; }
.post-body img, .post-body svg, .help-main img { max-width: 100%; height: auto; }
.subnav-inner { overflow-x: auto; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------- 8. reveal */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .55s var(--ease); }
html:not(.js) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}