/* Solution Vault — styles for /solutions/ only.
   Loaded AFTER /styles.css and deliberately kept in its own file: the main
   pages keep their own ?v= cache token and nothing in styles.css is touched.
   Everything here reuses the site tokens (--paper, --ink, --plum, --line,
   --serif, --sans). The only new token is the Vault accent, which is the
   cyan-teal already used for the hero reel. */

:root {
  --vault: #176B74;          /* cyan-teal, 5.6:1 on --paper */
  --vault-soft: #e7f0f0;
  --vault-dark: #06101c;     /* same dark band as Selected Projects */
  --vault-dark-accent: #6fc9d1;
}

/* ── Shell ───────────────────────────────────────────────────────── */

.vault {
  padding-bottom: 1rem;
}

.vault-wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--space);
}

.vault-measure {
  max-width: 44rem;
}

/* Breadcrumb. Small, quiet, and the visible twin of the BreadcrumbList. */
.vault-crumbs {
  padding-top: 1.75rem;
  font-size: 0.8rem;
  color: var(--mute);
}

.vault-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none;
}

.vault-crumbs a {
  color: var(--mute);
  text-decoration: none;
}

.vault-crumbs a:hover { color: var(--plum); text-decoration: underline; }

.vault-crumbs li + li::before {
  content: "/";
  color: var(--line);
  margin-right: 0.55rem;
}

.vault-crumbs [aria-current="page"] { color: var(--ink); }

/* ── Head: kicker, H1, the direct answer, the CTA pair ───────────── */

.vault-head {
  padding: 1.5rem 0 2.25rem;
  border-bottom: 1px solid var(--line);
}

.vault-head h1 {
  max-width: 34rem;
  margin-bottom: 1.25rem;
}

/* The direct answer. First thing a reader — or an answer engine — should
   find. Weighted up from .lede and anchored by a teal rule rather than set
   as a blockquote. */
.vault-answer {
  max-width: 40rem;
  margin: 0;
  padding-left: clamp(0.9rem, 2vw, 1.25rem);
  border-left: 3px solid var(--vault);
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
}

.vault-answer b,
.vault-answer strong {
  font-weight: 600;
}

.vault-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin-top: 1.75rem;
}

.vault-actions .vault-phone {
  font-size: 0.95rem;
  color: var(--mute);
}

.vault-actions .vault-phone a {
  color: var(--plum);
  text-decoration: none;
  font-weight: 600;
}

.vault-actions .vault-phone a:hover { text-decoration: underline; }

/* ── The video slot ──────────────────────────────────────────────── */
/* NOT a player. There is no film yet, so there is deliberately no <video>,
   no source, and no play button to press. See
   /workspace/ops/solution-vault/SPEC-ai-expense-report-approval.md §4.1. */

.vault-slot {
  margin: 2.5rem 0 0;
}

.vault-slot-frame {
  position: relative;
  border: 1px solid var(--line);
  background: var(--vault-dark);
  overflow: hidden;
}

.vault-slot-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* styles.css sets `.ga-player video { aspect-ratio: 9/16 }` — that base rule is
   for the portrait players, and Selected Projects overrides it through
   `.film-frame`. A Vault frame is neither, so without this it renders a tall
   portrait box with the 16:9 film letterboxed inside it. */
.vault-slot-frame.ga-player video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}

/* A page that ships ahead of its film (README §6): there is no poster yet,
   because the poster is a still cut from the film, so the frame reserves the
   16:9 box itself. Without this the empty frame collapses to the height of the
   label and the page re-lays-out when the player lands. */
.vault-slot-frame--pending {
  aspect-ratio: 16 / 9;
}

/* A label, not a control. A <span>: nothing to click, nothing to focus.
   Used by a Vault page whose film has not been cut yet — page #1 has its film,
   so this is dormant until the next one ships ahead of its video. */
.vault-slot-label {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: clamp(0.35rem, 1.1vw, 0.5rem) clamp(0.55rem, 1.8vw, 0.9rem);
  background: color-mix(in srgb, var(--vault-dark) 86%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--vault-dark-accent) 45%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--vault-dark-accent) 45%, transparent);
  color: #f6f2ea;
  /* Scales with the frame: fixed 0.7rem reads as a banner on a 390px phone. */
  font-size: clamp(0.56rem, 1.7vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vault-slot-label::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--vault-dark-accent);
}

.vault-slot figcaption {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  font-size: 0.95rem;
  color: var(--mute);
}

/* ── Sections ────────────────────────────────────────────────────── */

.vault-section {
  padding: 3rem 0 0;
}

.vault-section > h2 {
  max-width: 30rem;
}

.vault-section > h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  margin-top: 0.75rem;
  border-top: 2px solid var(--vault);
}

.vault-section .vault-intro {
  max-width: 38rem;
  margin: 1.25rem 0 0;
  color: var(--mute);
  font-size: 1.05rem;
}

/* ── Numbered steps ──────────────────────────────────────────────── */
/* The content genuinely is a sequence, so it is numbered. */

/* Rules run the full content width and the text keeps its measure - the same
   device the About page uses for .led-list and .creds. Without it a 44rem
   column floats in a 72rem field and the page reads unanchored. */
.vault-steps {
  counter-reset: vstep;
  list-style: none;
  margin: 1.75rem 0 0;
}

.vault-steps > li {
  counter-increment: vstep;
  position: relative;
  padding: 1.1rem 0 1.1rem 3.5rem;
  border-top: 1px solid var(--line);
}

.vault-steps > li:last-child {
  border-bottom: 1px solid var(--line);
}

.vault-steps > li::before {
  content: counter(vstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1rem;
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--vault);
}

.vault-steps strong {
  font-weight: 600;
}

.vault-steps p {
  margin: 0;
  max-width: 44rem;
}

/* ── What you configure ──────────────────────────────────────────── */

.vault-config {
  margin: 1.75rem 0 0;
  display: grid;
  gap: 1.25rem 2.5rem;
}

.vault-config > div {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.vault-config dt {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.vault-config dd {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
}

/* ── Guardrails: the page's one dark band ────────────────────────── */
/* Same visual language as Selected Projects, so the page's heaviest claim
   sits on the site's heaviest surface. */

.vault-guard {
  margin-top: 3rem;
  background: var(--vault-dark);
  color: #f6f2ea;
  padding: 3rem var(--space) 3.25rem;
}

.vault-guard-inner {
  max-width: var(--page);
  margin: 0 auto;
}

.vault-guard h2 {
  color: #f6f2ea;
  max-width: 32rem;
}

.vault-guard h2::after {
  content: "";
  display: block;
  width: 2.75rem;
  margin-top: 0.85rem;
  border-top: 2px solid var(--vault-dark-accent);
}

.vault-guard .vault-intro {
  color: #cfd8dd;
  max-width: 38rem;
  margin: 1.25rem 0 0;
}

.vault-guard-list {
  list-style: none;
  margin: 1.9rem 0 0;
  display: grid;
  gap: 1.3rem 2.5rem;
}

.vault-guard-list > li {
  padding-top: 1rem;
  border-top: 1px solid #1d3245;
  color: #cfd8dd;
  font-size: 0.98rem;
}

.vault-guard-list b {
  display: block;
  color: #f6f2ea;
  font-weight: 600;
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
}

.vault-guard-list code {
  font-size: 0.92em;
  color: var(--vault-dark-accent);
}

/* ── Works with your tools ───────────────────────────────────────── */

.vault-prose {
  max-width: 40rem;
  margin: 1.5rem 0 0;
}

.vault-prose p { margin: 0 0 1em; }
.vault-prose p:last-child { margin-bottom: 0; }

/* Text-only system names. No logos: we have no rights to any of them. */
.vault-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1.5rem 0 0;
}

.vault-tags li {
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--mute);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* ── Works well for ──────────────────────────────────────────────── */

/* One line per business type, same row rhythm as .vault-honest so the two
   plain lists on the page read as the same component. The marker is an arrow
   and not an em dash because the item copy already uses an em dash to split
   the business type from the reason. */
.vault-fits {
  list-style: none;
  margin: 1.75rem 0 0;
}

.vault-fits > li {
  position: relative;
  max-width: 46rem;
  padding: 0.85rem 0 0.85rem 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.99rem;
}

.vault-fits > li:last-child { border-bottom: 1px solid var(--line); }

.vault-fits > li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--tan);
}

.vault-fits b {
  color: var(--ink);
  font-weight: 600;
}

/* ── Rollout phases ──────────────────────────────────────────────── */

.vault-rollout {
  counter-reset: vphase;
  list-style: none;
  margin: 1.75rem 0 0;
  border-left: 2px solid var(--vault-soft);
}

.vault-rollout > li {
  counter-increment: vphase;
  position: relative;
  max-width: 46rem;
  padding: 0 0 1.75rem 1.9rem;
}

.vault-rollout > li:last-child { padding-bottom: 0; }

.vault-rollout > li::before {
  content: "";
  position: absolute;
  left: -0.42rem;
  top: 0.5rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--vault);
}

.vault-rollout h3 {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.vault-rollout h3 span {
  color: var(--vault);
  font-variant-numeric: tabular-nums;
  margin-right: 0.5rem;
}

.vault-rollout p {
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
}

/* ── What we don't claim ─────────────────────────────────────────── */

.vault-honest {
  list-style: none;
  margin: 1.75rem 0 0;
}

.vault-honest > li {
  position: relative;
  max-width: 46rem;
  padding: 0.85rem 0 0.85rem 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.99rem;
}

.vault-honest > li:last-child { border-bottom: 1px solid var(--line); }

.vault-honest > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--tan);
}

.vault-honest b {
  color: var(--ink);
  font-weight: 600;
}

/* ── FAQ ─────────────────────────────────────────────────────────── */

.vault-faq {
  margin: 1.75rem 0 0;
}

.vault-faq dt,
.vault-faq dd {
  max-width: 44rem;
}

.vault-faq > div {
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.vault-faq > div:last-child { border-bottom: 1px solid var(--line); }

.vault-faq dt {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.vault-faq dd {
  margin: 0;
  color: var(--mute);
}

/* ── Related ─────────────────────────────────────────────────────── */

.vault-related {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--mute);
}

.vault-related a {
  color: var(--plum);
  font-weight: 600;
  text-decoration: none;
}

.vault-related a:hover { text-decoration: underline; }

/* ── Directory (/solutions/) ─────────────────────────────────────── */
/* Built to grow: an auto-fill grid, so pages 2..N need no CSS change. */

.vault-index-grid {
  display: grid;
  gap: 1.25rem;
  /* auto-fit, not auto-fill: with two cards they fill the row instead of
     leaving a dead third track. Still forms 3 columns at 3+ pages. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin: 2rem 0 0;
  list-style: none;
}

.vault-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--white);
}

.vault-card:hover {
  border-color: var(--vault);
}

.vault-card .vault-card-kicker {
  margin: 0;
  font-size: 0.68rem
}

.vault-card h2,
.vault-card h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.2;
}

.vault-card h2 a,
.vault-card h3 a {
  color: var(--ink);
  text-decoration: none;
}

.vault-card:hover h2 a,
.vault-card:hover h3 a { color: var(--plum); }

.vault-card p {
  margin: 0;
  color: var(--mute);
  font-size: 0.97rem;
}

.vault-card .vault-card-more {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
}

/* The "more coming" tile. Keeps the grid from looking lopsided at n=1 and
   tells a visitor the section is alive. */
.vault-card--soon {
  background: transparent;
  border-style: dashed;
  color: var(--mute);
}

.vault-card--soon:hover { border-color: var(--line); }

.vault-card--soon h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
}

/* ── Wide screens ────────────────────────────────────────────────── */

@media (min-width: 760px) {
  .vault-config { grid-template-columns: 1fr 1fr; }
  .vault-guard-list { grid-template-columns: 1fr 1fr; }
  .vault-head { padding: 2rem 0 2.75rem; }
  .vault-section { padding-top: 3.75rem; }
}

@media (min-width: 1100px) {
  .vault-guard-list { grid-template-columns: repeat(3, 1fr); }
}

/* ── The CTA line above the buttons ──────────────────────────────── */
/* Locked wording, 2026-10-10. Sits between the direct answer and the
   button pair so the ask is readable before it is clickable. */

.vault-cta-line {
  margin: 1.5rem 0 1.25rem;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

/* ── The locked claim, as a readable line ────────────────────────── */
/* "It can be configured to run in any business." has to be on every Vault
   page as text, not only as a video slide. This is that line's home. */

.vault-claim {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem;
  max-width: 68ch;
  border-left: 3px solid var(--plum);
  background: var(--paper);
  font-size: 1.02rem;
  line-height: 1.6;
}

.vault-claim strong { font-weight: 600; }

/* ── The page's own quote form ───────────────────────────────────── */
/* Extends .sdc-form rather than replacing it: the band, the field shells,
   the honeypot rule and the submit button all come from styles.css, so this
   form and the main one cannot drift apart visually. Only the controls
   styles.css has never needed — select, textarea, checkboxes, the optional
   disclosure — are defined here. */

.vault-form select,
.vault-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.7rem 0.85rem;
  min-height: 2.85rem;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.vault-form textarea {
  min-height: 5.5rem;
  line-height: 1.5;
  resize: vertical;
}

/* A native select with appearance:none loses its arrow. Draw one. */
.vault-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mute) 50%),
    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.vault-form select:focus,
.vault-form textarea:focus {
  outline: 2px solid var(--plum);
  outline-offset: 1px;
  border-color: var(--plum);
}

/* The optional block. Collapsed by default at every width — three required
   fields is the whole contract, and a nine-field form under a CTA is what
   makes people leave. Nothing is removed from the DOM, so autofill,
   validation and assistive tech still reach it. */

.vault-form-more {
  border: 1px solid var(--line);
  background: var(--white);
}

.vault-form-more > summary {
  padding: 0.85rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.85rem;
}

/* Hide the default marker in both engines, then draw our own. */
.vault-form-more > summary::-webkit-details-marker { display: none; }

.vault-form-more > summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--plum);
  border-bottom: 2px solid var(--plum);
  transform: translateY(-2px) rotate(45deg);
}

.vault-form-more[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.vault-form-more > summary:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: -2px;
}

.vault-form-more > summary span {
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
}

.vault-form-more > *:not(summary) { margin: 0 1rem 1rem; }
.vault-form-more > summary + * { margin-top: 1rem; }

.vault-field-group {
  border: 0;
  padding: 0;
  margin: 0 1rem 1rem;
  display: grid;
  gap: 0.6rem;
}

.vault-field-group legend {
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--plum);
}

.vault-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}

/* 44px rows: these are the smallest hit targets on the page and they are
   the ones a thumb has to find. */
.vault-checks label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.vault-checks input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--plum);
  flex: none;
}

.vault-other-field { margin: 0.2rem 0 0; }

/* .sdc-field is display:grid, which overrides the UA stylesheet's
   [hidden] { display: none }. Restate it. */
.vault-other-field[hidden] { display: none; }

@media (min-width: 560px) {
  .vault-checks { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
}

/* ── Phone: move the visible play affordance off the poster title ─────
   Added 2026-10-13. The poster has the film title baked into it at the
   left/center-left of the frame and the logo lockup bottom-right. The base
   .ga-play (styles.css: absolute, inset:0, display:grid, place-items:center)
   drops the ring straight onto that title, and at 390px the title is wide
   enough that there is nowhere in the middle for the ring to go.

   So: keep the button exactly as it is — full-frame, inset:0, still the tap
   target and still the scrim — and only move its *contents* (runtime badge +
   ring) into the bottom-left corner, under the title. place-content packs the
   implicit row tracks bottom-left; place-items left-aligns the badge over the
   ring. The ring is re-sized to ~0.7 (2.9rem -> 2.03rem) with its triangle
   scaled to match, rather than transform:scale(), so the box the padding is
   measured from is the box you actually see.

   Horizontal reach is ~0.7rem padding + 2.03rem ring ≈ 2.75rem from the left
   edge, so it cannot touch the bottom-right lockup at any width this query
   covers. Desktop is untouched. */
@media (max-width: 640px) {
  .vault-slot-frame .ga-play {
    place-content: end start;
    place-items: end start;
    row-gap: 0.3rem;
    padding: 0.7rem;
  }

  .vault-slot-frame .ga-play-ring {
    width: 2.03rem;
    height: 2.03rem;
  }

  .vault-slot-frame .ga-play-ring .ga-play-icon {
    margin-left: 0.12rem;
    border-width: 0.3rem 0 0.3rem 0.49rem;
  }
}