/* Vanta Supply · the member homepage ("What's new") and Your vault (/vault/saved).
   Carried over from the sketch (concepts/v20/member.css, 2026-10-24) to the real site, 2026-10-25: only the
   locked option (M1 What's new, with M4's Dark Materials card under the new pieces); the other options the
   sketch compared are left behind. Everything here applies to a signed-in Pro member (html[data-as="member"],
   set by auth.js from the real sign-in); a visitor and a free account see the homepage untouched.
   member.js shows and hides the blocks marked data-show / data-hide. */

/* ---- for every member, whichever option ---- */
html[data-as="member"] .open { display: none; }            /* the sales pitch, the stars and "Welcome back." */
html[data-as="member"] .tag--free { display: none; }       /* everything is theirs: Free means nothing now */
[data-show][hidden], [data-hide][hidden] { display: none !important; }
/* The same choice made by the stylesheet, from the attributes the page's head already set (data-mh, data-wk) and
   auth.js's last-known data-as, so the first paint is already right: nothing appears and then vanishes when
   member.js runs, and nothing below moves (layout shift, 2026-11-06). member.js's hidden flags agree with these. */
html[data-mh="m1"][data-wk="busy"] [data-show]:not([data-show~="m1"]):not([data-show~="m1:busy"]),
html[data-mh="m1"][data-wk="quiet"] [data-show]:not([data-show~="m1"]):not([data-show~="m1:quiet"]),
html[data-mh="m1"][data-wk="new"] [data-show]:not([data-show~="m1"]):not([data-show~="m1:new"]) { display: none !important; }
html[data-as="member"][data-mh="m1"] [data-hide~="m1"],
html[data-as="member"][data-mh="m1"][data-wk="busy"] [data-hide~="m1:busy"],
html[data-as="member"][data-mh="m1"][data-wk="quiet"] [data-hide~="m1:quiet"],
html[data-as="member"][data-mh="m1"][data-wk="new"] [data-hide~="m1:new"] { display: none !important; }
/* A member's "new" grid is drawn by saves.js; a browser can paint once before that script has run. Until the
   grids have their tiles, what comes after them waits off the page, so it arrives in place rather than being
   pushed down by the tiles (it measured 0.44 of layout shift on a slow desktop load, 2026-11-06). */
html[data-as="member"] main:has(.mh-new [data-items]:empty) > .mh-new ~ * { display: none !important; }

/* the nav's "Get access" slot becomes a way back into the vault */
@media (max-width: 640px) {
  html[data-as="member"] .nav__right .signin { display: none; }
}

/* ---- shared bits ---- */
.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); }
.mh-eyebrow--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.mh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.mh-head__t { font-family: var(--font-head); font-weight: var(--head-w); font-size: calc(24px * var(--head-s)); line-height: 1.2; letter-spacing: calc(var(--head-t) * 0.7); }
.mh-head__t small { margin-left: 10px; font-family: var(--sans); font-size: 14px; letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.mh-head .link { flex: none; font-size: 15px; }
.tag--new { padding: 0 9px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.mh-ghost { box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.16); background: transparent; }
.mh-ghost:hover { background: var(--fill); }

.mh-hero { padding-top: 64px; padding-bottom: 56px; }
.mh-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-hero--center .mh-cta { justify-content: center; }
.mh-hero--center { text-align: center; }
.mh-hero--center .lead { max-width: 520px; margin: 18px auto 0; }
.mh-hero--center .mh-eyebrow { margin-bottom: 18px; }
.mh-hero .mh-cta { margin-top: 28px; }

/* ---- M1 · What's new ---- */
.mh-new { padding-bottom: 8px; }

/* ---- M4 · What's next ---- */
.mh-next { padding-top: 24px; padding-bottom: 96px; }
.mh-next__card {
  position: relative; overflow: hidden; isolation: isolate; min-height: 560px;
  border-radius: 28px; background: #000; box-shadow: inset 0 0 0 1px var(--line);
  display: grid; align-items: end;
}
.mh-next__media { position: absolute; inset: 0 0 0 30%; }
.mh-next__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
  mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}
.mh-next__text { position: relative; z-index: 1; padding: 56px; max-width: 640px; }
.mh-next__text .h1 { margin-top: 18px; }
.mh-next__text .lead { max-width: 460px; margin-top: 18px; }
.mh-next__text .mh-cta { justify-content: flex-start; margin-top: 28px; }
.mh-days { font-variant-numeric: tabular-nums; color: var(--faint); }

/* ---- tablet ---- */
@media (max-width: 1023px) {
  .mh-next__media { inset: 0 0 0 0; }
  .mh-next__media img { -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 75%); mask-image: linear-gradient(to top, transparent 20%, #000 75%); }
}

/* ---- phone ---- */
@media (max-width: 640px) {
  .mh-hero { padding-top: 36px; padding-bottom: 40px; }
  .mh-hero .mh-cta { margin-top: 24px; }
  .mh-hero--center .mh-cta .btn { flex: 1 1 100%; }
  .mh-head { margin-bottom: 14px; }
  .mh-head__t { font-size: calc(20px * var(--head-s)); }
  .mh-head__t small { display: none; }
  .mh-head .link { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }

  .mh-next { padding-top: 12px; padding-bottom: 72px; }
  .mh-next__card { min-height: 0; border-radius: 20px; }
  .mh-next__media { position: relative; inset: auto; height: 240px; }
  .mh-next__text { padding: 0 22px 26px; margin-top: -48px; }
  .mh-next__text .mh-cta .btn { flex: 1 1 100%; }
}

/* =====================================================================
   Round 3 (2026-10-24): the chosen member homepage, saving, and Your vault
   ===================================================================== */

/* the Dark Materials card, moved under the new pieces */
.mh-next--below { padding-top: 120px; padding-bottom: 0; }
.mh-next--below .mh-next__card { min-height: 480px; }
/* members only: a visitor's homepage keeps its own spacing (the sketch set this for everyone) */
.mh-next--below + .section, html[data-as="member"][data-mh] #shelves { padding-top: 120px; }
.mh-cta .btn svg { width: 15px; height: 15px; }

/* ---- Your vault ---- */
.sv-body { padding-bottom: 120px; }
.sv-sort { font-size: 14px; color: var(--faint); }
.chip[hidden] { display: none; }
.svtile.is-leaving { opacity: 0; transform: scale(0.96); transition: opacity .2s ease-out, transform .2s ease-out; }
.sv-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 88px 24px 40px; }
.sv-empty__i { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--mute); margin-bottom: 8px; }
.sv-empty__i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.sv-empty__t { font-family: var(--font-head); font-weight: var(--head-w); font-size: calc(26px * var(--head-s)); letter-spacing: calc(var(--head-t) * 0.8); }
.sv-empty__p { max-width: 380px; color: var(--mute); margin-bottom: 12px; }
.sv-none { padding: 40px 0; color: var(--mute); }
.sv-empty[hidden], .sv-none[hidden], .toolbar[hidden], .index[hidden] { display: none; }

@media (max-width: 640px) {
  .mh-next--below { padding-top: 72px; }
  .mh-next--below .mh-next__card { min-height: 0; }
  html[data-as="member"][data-mh] #shelves { padding-top: 88px; }
  .sv-sort { display: none; }
  .sv-body { padding-bottom: 72px; }
}

/* Your vault: everything here is saved, so the filled bookmarks would repeat on every tile.
   On a screen with a pointer they appear on hover (as the way to remove); touch screens keep them. */
@media (hover: hover) {
  html[data-saved-page] .save[aria-pressed="true"] { opacity: 0; transform: scale(0.9); }
  html[data-saved-page] .tile:hover .save, html[data-saved-page] .tile:focus-within .save { opacity: 1; transform: none; }
}