/* CircleTrust Editorial — Vault (Trusted Intent). Search-first: quiet arrival →
   intent → trust reveal → honest no-result. Not a saved library. Token-driven. */

.vault{max-width:900px;margin:0 auto;padding:0 24px 110px}

/* ---- Arrival: very quiet, one dominant question ---- */
.vault-arrival{min-height:calc(100vh - 40px);display:flex;align-items:center}
.vault-arrival-inner{width:100%;max-width:760px;margin:0 auto;padding:0 24px}
.vault-kick{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ct-sub);font-size:.72rem}
.vault-ask{font-family:var(--ct-font-display);font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--ct-ink);font-size:clamp(2.6rem,6vw,4.4rem);margin:14px 0 0}
.vault-ask-sub{margin:16px 0 0;max-width:52ch;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:1rem;line-height:1.55}

/* search field */
.vault-search{display:flex;align-items:center;gap:12px;background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:16px;box-shadow:0 10px 30px color-mix(in srgb,var(--ct-ink) 7%,transparent)}
.vault-search span{color:var(--ct-sub);font-size:1.2rem}
.vault-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ct-ink);font-family:var(--ct-font-ui);font-weight:600;outline:none}
.vault-search input::placeholder{color:var(--ct-sub)}
.vault-search--big{margin-top:26px;padding:4px 6px 4px 20px;min-height:64px}
.vault-search--big input{font-size:1.15rem}
.vault-search--big button,.vault-search--top button{border:0;cursor:pointer;background:var(--ct-accent);color:var(--ct-accent-contrast);font-family:var(--ct-font-ui);font-weight:800;border-radius:12px;padding:0 18px;height:52px;font-size:.9rem}
.vault-search--top{margin:0 0 22px;padding:4px 6px 4px 18px;min-height:56px;position:sticky;top:14px;z-index:5}
.vault-search--top input{font-size:1rem}
.vault-search--top button{height:46px}

.vault-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.vault-chip{border:1px solid var(--ct-line);background:var(--ct-paper);border-radius:999px;padding:10px 16px;cursor:pointer;font-family:var(--ct-font-ui);font-weight:700;font-size:.85rem;color:var(--ct-ink)}
.vault-chip:hover{border-color:color-mix(in srgb,var(--ct-ink) 28%,transparent)}
.vault-chip .h{color:var(--ct-sub);font-weight:800;margin-right:2px}

/* ---- Results: status + a few strong matches ---- */
.vault-status{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.02em;color:var(--ct-ink);font-size:.95rem;margin:2px 0 16px}
.vault-status .q{color:var(--ct-sub);font-weight:700}
.vault-list{display:flex;flex-direction:column;gap:16px}

.vault-match{display:grid;grid-template-columns:210px 1fr;background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:18px;overflow:hidden;box-shadow:0 10px 26px color-mix(in srgb,var(--ct-ink) 7%,transparent);cursor:pointer;transition:border-color .15s,transform .15s}
.vault-match:hover{border-color:color-mix(in srgb,var(--ct-ink) 24%,transparent);transform:translateY(-1px)}
.vm-media{position:relative;min-height:210px;background:var(--ct-ink)}
.vm-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vm-media .tag{position:absolute;top:12px;left:12px;z-index:2}
.vm-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ct-font-display);font-weight:600;font-size:3rem;color:color-mix(in srgb,#fff 15%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--ct-ink) 58%,var(--ct-base)),var(--ct-ink))}
.vm-body{padding:20px 22px;display:flex;flex-direction:column}
.vm-strength{font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;color:var(--ct-trust-trusted)}
.vm-name{font-family:var(--ct-font-display);font-weight:600;letter-spacing:-.02em;font-size:1.6rem;color:var(--ct-ink);margin:6px 0 0;line-height:1.05}
.vm-role{font-family:var(--ct-font-ui);color:var(--ct-sub);font-size:.85rem;margin-top:3px}
.vm-count{display:flex;align-items:center;gap:9px;margin-top:11px;font-family:var(--ct-font-ui);font-weight:800;font-size:.85rem;color:var(--ct-ink)}
.vm-count .rule{width:22px;height:3px;border-radius:2px;background:var(--ct-trust-backed)}
.vm-count.trusted .rule{background:var(--ct-trust-trusted)}
.vm-count .verified{color:var(--ct-trust-trusted-ink,var(--ct-ink));font-weight:800}
.vm-pattern{margin:12px 0 0;font-family:var(--ct-font-display);font-style:italic;font-size:1.02rem;line-height:1.4;color:var(--ct-ink)}
.vm-recos{display:flex;align-items:center;gap:6px;margin-top:12px}
.vm-reco{width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--ct-ink) 8%,var(--ct-paper));border:1px solid var(--ct-line);display:flex;align-items:center;justify-content:center;font-family:var(--ct-font-ui);font-weight:800;font-size:.72rem;color:var(--ct-ink)}
.vm-recos .more{margin-left:2px;color:var(--ct-sub);font-family:var(--ct-font-ui);font-weight:700;font-size:.78rem}
.vm-cta{margin-top:16px;align-self:flex-start;color:var(--ct-ink);font-family:var(--ct-font-ui);font-weight:800;font-size:.85rem;border-bottom:2px solid var(--ct-accent);padding-bottom:2px}

/* ---- Loading: skeletons shaped like the cards (never a spinner) ---- */
.vault-match.skeleton{cursor:default;pointer-events:none}
.sk{position:relative;overflow:hidden;background:color-mix(in srgb,var(--ct-ink) 8%,var(--ct-paper));border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ct-paper) 70%,transparent),transparent);animation:vsh 1.15s infinite}
@keyframes vsh{100%{transform:translateX(100%)}}
.vault-match.skeleton .vm-media{background:color-mix(in srgb,var(--ct-ink) 10%,var(--ct-paper))}
.sk-line{height:12px;margin-top:10px}
.sk-line.lg{height:22px;width:55%;margin-top:2px}
.sk-line.md{width:40%}
.sk-line.sm{width:70%}
.sk-line.xs{width:30%}

/* ---- No trustworthy result: a first-class state, not a failure ---- */
.vault-empty{max-width:640px;margin:0 auto;padding-top:8px}
.vault-empty h2{font-family:var(--ct-font-display);font-weight:500;letter-spacing:-.02em;line-height:1.12;color:var(--ct-ink);font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0}
.vault-empty p{margin:14px 0 0;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:1rem;line-height:1.6}
.vault-ask-box{margin-top:22px;background:var(--ct-paper);border:1px solid var(--ct-line);border-radius:18px;padding:20px;box-shadow:0 10px 26px color-mix(in srgb,var(--ct-ink) 6%,transparent)}
.vault-ask-box label{display:block;font-family:var(--ct-font-ui);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;color:var(--ct-sub)}
.vault-ask-box textarea{width:100%;margin-top:10px;border:0;background:transparent;resize:none;color:var(--ct-ink);font-family:var(--ct-font-display);font-size:1.2rem;line-height:1.4;outline:none;min-height:66px}
.vault-ask-row{margin-top:12px;padding-top:14px;border-top:1px solid var(--ct-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vault-ask-row .note{color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.8rem}
.vault-ask-row button{border:0;cursor:pointer;background:var(--ct-accent);color:var(--ct-accent-contrast);font-family:var(--ct-font-ui);font-weight:800;border-radius:999px;padding:11px 18px;font-size:.85rem}
.vault-asked{margin-top:22px;background:var(--ct-paper);border:1px dashed color-mix(in srgb,var(--ct-ink) 22%,transparent);border-radius:18px;padding:22px}
.vault-asked strong{font-family:var(--ct-font-display);font-weight:600;font-size:1.15rem;color:var(--ct-ink)}
.vault-asked p{margin:8px 0 0;color:var(--ct-sub);font-family:var(--ct-font-ui);font-size:.9rem}

@media (max-width:859px){
  .vault{padding:0 16px 84px}
  .vault-arrival{min-height:calc(100vh - 120px)}
  .vault-arrival-inner{padding:0}
  .vault-search--big{min-height:58px}
  .vault-search--big input{font-size:1.02rem}
  .vault-search--big button,.vault-search--top button{padding:0 14px}
  .vault-match{grid-template-columns:1fr}
  .vm-media{min-height:150px}
}