/* Vanta Supply · the sign-in and account boxes (auth.js). The boxes wear the
   access prompt's look (dialog.ask in v2.css). The React pages (tools,
   articles) don't load v2.css, so the prompt's look is repeated here, scoped
   to dialog.au, with the sketch's values as fallbacks. Keep in step with
   v2.css "2a · the access prompt". */

dialog.au {
  --au-ink: var(--ink, #f3eee7); --au-mute: var(--mute, #a59c91); --au-bg: var(--bg, #0c0a09);
  --au-ease: var(--ease, cubic-bezier(0.165, 0.84, 0.44, 1));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; border: 0; padding: 24px; color: var(--au-ink);
  display: none; place-items: safe center; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity .18s ease-out;
  background: rgba(8, 7, 6, 0.82);
  font-family: var(--font-body, var(--font-ns-sans, system-ui, sans-serif));
}
dialog.au[open] { display: grid; }
dialog.au::backdrop { background: transparent; }
dialog.au.is-open { opacity: 1; transition: opacity .3s ease-out; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  dialog.au {
    background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(8, 7, 6, 0.64) 0%, rgba(8, 7, 6, 0.44) 100%);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  }
}
dialog.au .ovl__close {
  position: absolute; top: 20px; right: 20px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--au-ink); background: rgba(243, 238, 231, 0.08);
  border: 0; cursor: pointer; transition: background-color .2s ease-out;
}
dialog.au .ovl__close:hover { background: rgba(243, 238, 231, 0.16); }
dialog.au .ovl__close svg { width: 17px; height: 17px; }
dialog.au .ask__in {
  width: min(560px, 100%); display: grid; justify-items: center; text-align: center;
  transform: translateY(8px); transition: transform .18s ease-out;
}
dialog.au.is-open .ask__in { transform: none; transition: transform .5s var(--au-ease); }
dialog.au .ask__tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; line-height: 1; color: var(--au-mute); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.16);
}
dialog.au .ask__title {
  margin: 0; font-family: var(--font-head, var(--font-ns-head, inherit)); font-weight: var(--head-w, 500);
  font-size: calc(48px * var(--head-s, 1)); line-height: 1.06; letter-spacing: var(--head-t, -0.02em); text-wrap: balance;
}
dialog.au .ask__line { margin: 16px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: rgba(243, 238, 231, 0.72); text-wrap: balance; }
dialog.au .ask__go {
  min-width: 240px; min-height: 52px; padding: 0 28px; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(243, 238, 231, 0.1); color: var(--au-ink); font-family: inherit; font-weight: 500;
}
dialog.au .ask__go.btn--solid { background: var(--au-ink); color: var(--au-bg); }
dialog.au .ask__go.btn--solid:hover:not([disabled]) { background: #fff; }
dialog.au .ask__quiet {
  margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14.5px; color: var(--au-mute); background: none; border: 0; cursor: pointer; font-family: inherit;
  transition: color .2s ease-out;
}
dialog.au .ask__quiet:hover { color: var(--au-ink); }
@media (max-width: 640px) {
  dialog.au .ovl__close { top: 12px; right: 12px; }
  dialog.au .ask__title { font-size: calc(34px * var(--head-s, 1)); }
  dialog.au .ask__line { font-size: 16px; }
}

/* the React pages' header and phone menu: "Sign in" ↔ "Account" */
html:not([data-as="signed"]):not([data-as="member"]) .ns-site .as-in { display: none !important; }
html:is([data-as="signed"], [data-as="member"]) .ns-site .as-out { display: none !important; }

.au .ask__title { margin-top: 0; }
.au .ask__tag + .ask__title { margin-top: 20px; }

/* the email tick box */
.au__tick {
  margin-top: 28px; display: inline-flex; align-items: flex-start; gap: 12px;
  max-width: 40ch; min-height: 44px; padding: 10px 4px;
  text-align: left; font-size: 14.5px; line-height: 1.45; color: var(--mute, #a59c91);
  cursor: pointer; transition: color .2s ease-out;
}
.au__tick:hover { color: var(--ink, #f3eee7); }
.au__tick input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.au__box {
  position: relative; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.32);
  transition: background-color .15s ease-out, box-shadow .15s ease-out;
}
.au__box::after {
  content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px;
  border: solid var(--bg, #0c0a09); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0.6);
  opacity: 0; transition: opacity .15s ease-out, transform .2s var(--ease, cubic-bezier(0.165, 0.84, 0.44, 1));
}
.au__tick input:checked + .au__box { background: var(--ink, #f3eee7); box-shadow: none; }
.au__tick input:checked + .au__box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.au__tick input:focus-visible + .au__box { outline: 2px solid var(--ink, #f3eee7); outline-offset: 3px; }

/* the pricing page's checkout box: same tick, left-aligned in its column */
.pco .au__tick { margin-top: 20px; max-width: none; padding-left: 0; padding-right: 0; }

/* a short line for "didn't go through" and "saved" */
.au__say { min-height: 20px; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--mute, #a59c91); }
.au__say:empty { min-height: 0; margin: 0; }
.au .ask__go { margin-top: 20px; gap: 10px; }
.au__g { width: 18px; height: 18px; flex: none; }
.au .btn svg.au__g { width: 18px; height: 18px; }
.au__note { margin-top: 12px; font-size: 13.5px; color: var(--mute, #a59c91); }

.au .ask__go[disabled], .pco [data-step="checkout"][disabled] { opacity: 0.45; cursor: not-allowed; }
.au .ask__go.is-busy { opacity: 0.6; cursor: progress; }

/* ---- the email option ---- */
.au__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.au__or {
  margin-top: 22px; width: min(340px, 100%); display: flex; align-items: center; gap: 14px;
  font-size: 13.5px; color: var(--mute, #a59c91);
}
.au__or::before, .au__or::after { content: ""; flex: 1; height: 1px; background: rgba(243, 238, 231, 0.14); }
.au__form { width: min(340px, 100%); display: grid; justify-items: stretch; }
dialog.au .au__google { width: min(340px, 100%); min-width: 0; } /* one column width with the email form below */
.au__form .ask__go { min-width: 0; width: 100%; margin-top: 10px; }
.au__or + .au__form { margin-top: 14px; }
.au__field {
  width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 0;
  background: rgba(243, 238, 231, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.16);
  color: var(--ink, #f3eee7); font: inherit; font-size: 16px; /* 16px stops iPhones zooming in */
  text-align: center; transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.au__field::placeholder { color: rgba(243, 238, 231, 0.36); }
.au__field:focus { outline: none; background: rgba(243, 238, 231, 0.09); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.5); }
.au__code { margin-top: 28px; font-size: 26px; letter-spacing: 0.32em; padding-left: calc(20px + 0.32em); font-variant-numeric: tabular-nums; }
.au__code::placeholder { color: rgba(243, 238, 231, 0.18); }
.au__form .au__say { margin-top: 10px; text-align: center; }
.au__form .au__say:empty { margin: 0; }
/* the join / sign-in box and its "Check your email" step: everything in it sits on one card, the pricing
   checkout's raised look (pricing.css .pco__in), so the box stands off the blurred page. Was the email form
   alone in an inner card (2026-10-28); the whole content went on the card instead (Dan, 2026-10-29). */
dialog.au .au__in--card {
  width: min(480px, 100%); padding: 48px 40px 36px; border-radius: 24px;
  background: var(--raise, #141110); box-shadow: inset 0 0 0 1px var(--line, rgba(243, 238, 231, 0.08)), 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 640px) {
  dialog.au .au__in--card { padding: 36px 20px 24px; }
}
/* The sign-in box's layout after Dan's reference (2026-11-05): the logo top left, everything
   left-aligned in one column, a big title with a smaller grey line under it, full-width pill
   buttons and fields a touch shorter than the site's usual 52px, the email field with a label
   above it, and a line at the bottom that swaps between joining and signing back in. */
dialog.au .au__in--card {
  width: min(440px, 100%); padding: 40px 40px 28px;
  justify-items: stretch; text-align: left;
}
.au__logo { display: block; width: 32px; height: 32px; margin-bottom: 32px; }
.au__logo .au__mark { display: block; width: 32px; height: 32px; }
.au__head {
  margin: 0; font-family: var(--font-head, var(--font-ns-head, inherit)); font-weight: var(--head-w, 500);
  font-size: calc(30px * var(--head-s, 1)); line-height: 1.12; letter-spacing: var(--head-t, -0.02em);
  color: var(--au-ink); text-wrap: balance;
}
.au__sub { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: var(--au-mute); text-wrap: pretty; }
.au__in--card > .au__say { margin-top: 18px; }
.au__in--card > .au__say:empty { margin: 0; }
dialog.au .au__in--card .ask__go { width: 100%; min-width: 0; min-height: 46px; font-size: 15px; }
dialog.au .au__in--card .au__google { margin-top: 28px; }
.au__in--card .au__or { width: 100%; margin-top: 20px; font-size: 14px; }
.au__in--card .au__form { width: 100%; }
.au__in--card .au__or + .au__form { margin-top: 14px; }
.au__label { display: block; margin: 0 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.3; color: var(--au-mute); }
.au__in--card .au__field { min-height: 46px; padding: 0 18px; text-align: left; }
.au__in--card .au__code { min-height: 52px; text-align: center; padding-left: calc(18px + 0.32em); }
dialog.au .au__in--card .au__send {
  background: transparent; color: var(--au-ink); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.16);
  transition: background-color .2s ease-out;
}
dialog.au .au__in--card .au__send:hover:not([disabled]) { background: rgba(243, 238, 231, 0.06); }
.au__in--card .au__form .au__say { text-align: left; padding-left: 18px; }
.au__in--card .au__note { text-align: left; }
.au__in--card .au__row { justify-content: flex-start; margin-left: -12px; }
.au__swap { margin: 22px 0 0; text-align: center; font-size: 14.5px; color: var(--au-mute); }
.au__swap button {
  display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; padding: 0 4px;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; color: var(--au-ink);
  text-decoration: underline; text-decoration-color: rgba(243, 238, 231, 0.3); text-underline-offset: 3px;
  transition: text-decoration-color .2s ease-out;
}
.au__swap button:hover { text-decoration-color: currentColor; }
.au__in--card .au__dev { justify-self: center; margin-top: 4px; }
@media (max-width: 640px) {
  dialog.au .au__in--card { padding: 32px 24px 22px; }
  .au__logo { margin-bottom: 26px; }
  .au__head { font-size: calc(26px * var(--head-s, 1)); }
  .au__sub { font-size: 15px; }
  dialog.au .au__in--card .au__google { margin-top: 24px; }
}
dialog.au .au__form[data-au-form="code"] { margin-top: 28px; }
dialog.au .au__form .au__code { margin-top: 0; }
.au__addr { color: var(--ink, #f3eee7); font-weight: 500; overflow-wrap: anywhere; }
.au__row { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.au__row .ask__quiet { margin-top: 0; }

/* ---- Pro: the account line, the waiting spinner, the Pro chip ---- */
.au__plan { color: var(--ink, #f3eee7); }
.au__spin {
  margin-top: 28px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(243, 238, 231, 0.18); border-top-color: var(--ink, #f3eee7);
  animation: au-spin .8s linear infinite;
}
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au__spin { animation-duration: 2.4s; } }
dialog.au .ask__tag .au__pro { font-weight: 600; color: var(--ink, #f3eee7); }
dialog.au .ask__go + .ask__go { margin-top: 10px; }

/* the box itself takes focus when it opens (auth.js), so it never shows an outline */
dialog.au .au__in:focus { outline: none; }

/* ---- "You're Pro.": a card in the pricing card's Lifetime look ----
   Ember values copied from pricing.css (--g, --g1/2, --laser) so the card looks the
   same on any page; keep them in step. */
dialog.au .au__win {
  --au-g: linear-gradient(95deg, #ffd9a8 0%, #f6a15a 45%, #f0733a 100%);
  --au-g1: rgba(240, 115, 58, 0.34); --au-g2: rgba(255, 196, 128, 0.2);
  --au-laser: 255, 190, 130; --au-tint: #f6b88a;
  width: min(500px, 100%); display: grid; justify-items: center;
}
@property --au-orbit { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes au-orbit { to { --au-orbit: 360deg; } }

.au__card {
  position: relative; isolation: isolate; width: 100%;
  display: grid; justify-items: center; text-align: center;
  padding: 44px 40px 30px; border-radius: 24px;
  background: var(--raise, #141110);
  box-shadow: inset 0 0 0 1px rgba(var(--au-laser), 0.16), 0 40px 100px -40px rgba(0, 0, 0, 0.85);
  opacity: 0; transform: translateY(14px) scale(0.97);
  transition: opacity .25s ease-out, transform .25s ease-out;
}
dialog.au.is-open .au__card {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the light running round the edge (the pricing card's Lifetime laser) */
.au__card::before {
  content: ""; --au-orbit: 0deg;
  position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--au-orbit),
    transparent 0deg, rgba(var(--au-laser), 0.95) 16deg, transparent 36deg,
    transparent 180deg, rgba(var(--au-laser), 0.6) 196deg, transparent 216deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: au-orbit 9s linear infinite;
}
/* the glow: Ember blooming in from two corners as the card arrives */
.au__glow {
  position: absolute; z-index: -1; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 60% at 20% 0%, rgba(243, 238, 231, 0.05), transparent 60%);
}
.au__glow::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transform: scale(1.08);
  background:
    radial-gradient(70% 90% at 0% 0%, var(--au-g1), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, var(--au-g2), transparent 70%);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
dialog.au.is-open .au__glow::before {
  opacity: 1; transform: none;
  transition: opacity 1.2s ease-out .15s, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1) .15s;
}
/* the badge: the pricing headline's ringed Pro, a size up from the small chip */
.au__badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 15px; border-radius: 999px;
  background: rgba(var(--au-laser), 0.08); box-shadow: inset 0 0 0 1px rgba(var(--au-laser), 0.28);
}
.au__badge span {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
  background: var(--au-g); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.au__wtitle {
  margin: 22px 0 0; font-family: var(--font-head, var(--font-ns-head, inherit)); font-weight: var(--head-w, 500);
  font-size: calc(52px * var(--head-s, 1)); line-height: 1.04; letter-spacing: var(--head-t, -0.02em);
}
.au__g { background: var(--au-g); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.au__wline { margin: 16px 0 0; max-width: 34ch; font-size: 16.5px; line-height: 1.5; color: rgba(243, 238, 231, 0.72); text-wrap: balance; }
.au__wplan { margin: 14px 0 0; font-size: 13.5px; color: var(--au-tint); }
.au__wfoot { margin-top: 30px; display: grid; justify-items: center; gap: 4px; width: 100%; }
.au__wfoot .ask__go { margin-top: 0; width: min(300px, 100%); }
dialog.au .au__wfoot .ask__quiet { margin-top: 2px; }

@media (max-width: 640px) {
  .au__card { padding: 36px 22px 24px; }
  .au__wtitle { font-size: calc(40px * var(--head-s, 1)); }
  .au__wline { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .au__card::before { animation: none; }
  .au__card, dialog.au.is-open .au__card { transform: none; }
}

/* pricing's checkout box: the quiet "Or use your email" under its Google button */
.pco .au__alt {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--mute, #a59c91); transition: color .2s ease-out;
}
.pco .au__alt:hover { color: var(--ink, #f3eee7); }

@media (max-width: 640px) {
  .au__tick { margin-top: 22px; font-size: 14px; }
  .au__or { margin-top: 18px; }
}

/* =========================================================================
   The account menu, the phone menus' Account group, and Settings (auth.js §7,
   2026-10-24). Self-contained like the boxes above: the React pages don't load
   v2.css, so every value carries the sketch's own as a fallback.
   ========================================================================= */
.acct, .macct, dialog.acset {
  --ac-ink: var(--ink, var(--ns-ink, #f3eee7));
  --ac-mute: var(--mute, var(--ns-mute, #a59c91));
  --ac-faint: #8b8379; /* a touch lighter than the site's faint (#7d756c, ~4.3:1): these labels are 13px and must clear 4.5:1 */
  --ac-line: var(--line, var(--ns-line, rgba(243, 238, 231, 0.08)));
  --ac-fill: var(--fill, var(--ns-fill, rgba(243, 238, 231, 0.06)));
  --ac-fill-hover: var(--fill-hover, var(--ns-fill-hover, rgba(243, 238, 231, 0.11)));
  --ac-panel: var(--panel, var(--ns-panel, #161311));
  --ac-bg: var(--bg, var(--ns-bg, #0c0a09));
  --ac-raise-2: var(--raise-2, var(--ns-raise-2, #1b1816));
  --ac-accent: var(--accent, var(--ns-accent, #f0733a));
  --ac-ease: var(--ease, var(--ns-ease, cubic-bezier(0.165, 0.84, 0.44, 1)));
  --ac-spring: var(--spring, var(--ns-spring, cubic-bezier(0.3, 1.36, 0.5, 1)));
  --ac-sans: var(--sans, var(--ns-sans, "Instrument Sans", "Helvetica Neue", Arial, sans-serif));
  --ac-head: var(--font-head, var(--ns-head, "Space Grotesk", "Instrument Sans", sans-serif));
}

/* ---------- 1 · the menu under "Account" (the Vault menu's panel, smaller, words only) ---------- */
.acct {
  position: absolute; top: 0; right: 0; z-index: 60; width: 268px;
  visibility: hidden; pointer-events: none; transition: visibility 0s linear .2s;
  font-family: var(--ac-sans); color: var(--ac-ink);
}
.acct.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.acct__panel {
  border-radius: 20px; background: var(--ac-panel); padding: 8px;
  box-shadow: 0 0 0 1px var(--ac-line), 0 28px 64px -16px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3);
  transform-origin: calc(100% - 28px) 0;
  opacity: 0; transform: translateY(-6px) scale(0.94);
  transition: opacity .14s ease-out, transform .2s cubic-bezier(0.4, 0, 1, 1);
}
.acct.is-open .acct__panel { opacity: 1; transform: none; transition: opacity .12s ease-out, transform .46s var(--ac-spring); }

.acct__who, .macct__who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 0; }
.acct__av {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font: 600 15px/1 var(--ac-sans); color: var(--ac-ink);
  background: linear-gradient(140deg, rgba(240, 115, 58, 0.34), rgba(168, 85, 247, 0.22)), var(--ac-raise-2);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.12);
}
.acct__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct__id { display: grid; min-width: 0; gap: 1px; }
.acct__name { font-size: 15px; line-height: 1.3; color: var(--ac-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__mail { font-size: 13px; line-height: 1.35; color: var(--ac-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__plan { display: flex; align-items: center; gap: 8px; margin: 12px 10px 8px; font-size: 13px; line-height: 1.3; color: var(--ac-mute); }
.acct__badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; flex: none;
  font: 600 11px/1 var(--ac-sans); letter-spacing: 0.02em; color: #f3b08c;
  background: linear-gradient(rgba(240, 115, 58, 0.15), rgba(240, 115, 58, 0.15)), rgba(12, 10, 9, 0.62);
  box-shadow: inset 0 0 0 1px rgba(240, 115, 58, 0.26);
}
.acct__free { display: inline-flex; align-items: center; gap: 7px; }
.acct__free::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ac-mute); }

.acct__list { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid var(--ac-line); }
.acct__list li { margin: 0; }
.acct__it {
  display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 12px;
  font: 500 14.5px/1.2 var(--ac-sans); color: rgba(243, 238, 231, 0.86); text-align: left; text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.acct__it:hover, .acct__it:focus-visible { background: var(--ac-fill); color: var(--ac-ink); }
.acct__it:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.4); }
.acct__it--pro { color: #f3b08c; }
.acct__it--pro:hover { color: #f7c6a9; }
.acct__it--quiet { color: var(--ac-mute); }
.acct__it[disabled] { opacity: .5; cursor: progress; }
.acct__sep { height: 1px; margin: 4px 10px; background: var(--ac-line); }
@media (pointer: coarse) { .acct__it { min-height: 46px; font-size: 15.5px; } } /* fingers, e.g. an iPad: rows at least 44px */

/* "Account" wears the open state the Vault trigger has */
html:is([data-as="signed"], [data-as="member"]) .nav__right .signin[aria-expanded="true"] { color: var(--ac-ink, #f3eee7); }

/* ---------- 2 · phones: the Account group in the phone menu ---------- */
.macct { display: none; }
@media (max-width: 640px) {
  /* the group replaces the phone menu's lone "Account" link */
  html:is([data-as="signed"], [data-as="member"]) .msheet__links [data-signin] { display: none !important; }
  html:is([data-as="signed"], [data-as="member"]) .macct:not(:empty) { display: block; margin-top: 28px; }
  .macct__label { margin: 0 0 8px; font-size: 13px; color: var(--ac-faint); }
  .macct__who { padding: 0; }
  .macct .acct__plan { margin: 12px 0 4px; }
  .macct__links { display: grid; margin-top: 8px; }
  .macct__links a, .macct__links button {
    display: flex; align-items: center; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--ac-line);
    background: none; font: 500 18px/1.2 var(--ac-sans); color: var(--ac-ink); text-align: left; text-decoration: none; cursor: pointer;
  }
  .macct__links .macct__pro { color: #f3b08c; }
  .macct__links .macct__out { color: var(--ac-mute); border-bottom: 0; }
  @media (max-height: 720px) { .macct__links a, .macct__links button { min-height: 48px; font-size: 17px; } }
  /* it follows the sheet down with the other rows */
  .msheet .macct { opacity: 0; transform: translateY(-12px); transition: opacity .18s ease-in, transform .25s ease-in; }
  .msheet.is-open .macct { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .55s var(--ac-ease); transition-delay: calc(var(--i, 0) * 50ms + 160ms); }
}

/* ---------- 3 · Settings ----------
   One kind of row (a field), three steps of type, one spacing rule:
   - section headings: 11px capitals, tracked, faint
   - labels, descriptions, notes: 13px, grey
   - values and titles: 15px, white
   Every field has 18px above and below its content, editing or not, and a
   hairline between fields. A hairline between sections too, 28px either side. */
dialog.acset {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 24px; border: 0; color: var(--ac-ink); font-family: var(--ac-sans);
  background: rgba(8, 7, 6, 0.72);
  display: none; place-items: center; overflow: hidden;
  opacity: 0; transition: opacity .18s ease-out;
  -webkit-font-smoothing: antialiased;
}
dialog.acset[open] { display: grid; }
dialog.acset::backdrop { background: transparent; }
dialog.acset.is-open { opacity: 1; transition: opacity .26s ease-out; }
.acset__panel {
  position: relative; width: min(540px, 100%); max-height: min(820px, 100%);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 24px; background: var(--ac-panel); overflow: hidden;
  box-shadow: 0 0 0 1px var(--ac-line), 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  transform: translateY(10px) scale(0.985); transition: transform .18s ease-out;
}
dialog.acset.is-open .acset__panel { transform: none; transition: transform .46s var(--ac-ease); }
.acset__head { position: relative; z-index: 1; background: inherit; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 6px 32px; }
.acset__head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--ac-panel), rgba(22, 19, 17, 0)); pointer-events: none; }
.acset__title { margin: 0; font-family: var(--ac-head); font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.acset__x {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative;
  color: var(--ac-mute); background: var(--ac-fill); border: 0; cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out;
}
.acset__x::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; } /* 44px to tap */
.acset__x:hover { color: var(--ac-ink); background: var(--ac-fill-hover); }
.acset__x svg { width: 15px; height: 15px; }
.acset__panel:focus { outline: none; }
.acset__body { overflow-y: auto; overscroll-behavior: contain; padding: 8px 32px 32px; }

/* sections: a hairline between each, 28px of air either side of it */
.acset__sec { padding: 28px 0; }
.acset__sec:first-child { padding-top: 8px; }
.acset__sec:last-child { padding-bottom: 4px; }
.acset__sec + .acset__sec { border-top: 1px solid var(--ac-line); }
.acset__sec > .acf:last-child { padding-bottom: 0; }
.acset__h {
  margin: 0 0 4px; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ac-faint);
}

/* a field */
.acf { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.acf + .acf { border-top: 1px solid var(--ac-line); }
.acf__main { display: grid; gap: 4px; min-width: 0; }
.acf__label { display: block; font-size: 13px; line-height: 1.35; color: var(--ac-mute); }
.acf__label strong { color: var(--ac-ink); font-weight: 500; overflow-wrap: anywhere; }
.acf__value { font-size: 15px; line-height: 1.4; color: var(--ac-ink); overflow-wrap: anywhere; }
.acf__empty { color: var(--ac-faint); }
.acf__done { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ac-mute); }
.acf__done::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d399; flex: none; }
.acset__act {
  flex: none; min-height: 36px; padding: 0 14px; margin-right: -14px; border: 0; border-radius: 999px; background: none; position: relative;
  font: 500 14px/1 var(--ac-sans); color: var(--ac-ink); cursor: pointer; transition: background-color .2s ease-out;
}
.acset__act::after { content: ""; position: absolute; inset: -4px 0; } /* 44px to tap */
.acset__act:hover { background: var(--ac-fill); }

/* a field being edited: same padding, the input under its label */
.acf--edit { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0; align-items: stretch; }
.acf--edit .acf__label { margin-bottom: 8px; }
.acf__in {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 0;
  font: 500 15px/1 var(--ac-sans); color: var(--ac-ink); background: rgba(243, 238, 231, 0.04);
  box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.14);
  transition: box-shadow .15s ease-out, background-color .15s ease-out;
}
.acf__in:focus { outline: none; background: rgba(243, 238, 231, 0.06); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.5); }
.acf__code { font-size: 20px; letter-spacing: 0.32em; font-variant-numeric: tabular-nums; }
.acf__code::placeholder { color: rgba(243, 238, 231, 0.2); }
.acf__hint { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ac-faint); overflow-wrap: anywhere; }
.acf__say { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ac-mute); overflow-wrap: anywhere; }
.acf__say.is-bad { color: #f39a8c; }
.acf__say:empty { display: none; }
.acf__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }

/* buttons */
.acset__b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  font: 500 14px/1 var(--ac-sans); color: var(--ac-ink); background: var(--ac-fill-hover);
  transition: background-color .2s ease-out, color .2s ease-out, transform .15s ease-out;
}
.acset__b::after { content: ""; position: absolute; inset: -4px 0; } /* 44px to tap */
.acset__b:hover { background: rgba(243, 238, 231, 0.16); }
.acset__b:active { transform: scale(0.98); }
.acset__b--solid { background: var(--ac-ink); color: var(--ac-bg); }
.acset__b--solid:hover { background: #fff; }
.acset__b--text { background: none; color: var(--ac-mute); padding: 0 12px; }
.acset__b--text:hover { background: var(--ac-fill); color: var(--ac-ink); }
.acset__b[disabled], .acset__danger[disabled] { opacity: .55; cursor: progress; }
.acset__out { width: 12px; height: 12px; color: var(--ac-mute); margin-right: -2px; }

/* your plan: one card, its buttons inside it */
.acset__card { margin-top: 14px; padding: 18px 20px 20px; border-radius: 16px; background: rgba(243, 238, 231, 0.035); box-shadow: inset 0 0 0 1px var(--ac-line); }
.acset__plan { display: flex; align-items: center; gap: 10px; margin: 0; }
.acset__planname { font-family: var(--ac-head); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.acset__line { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ac-mute); text-wrap: pretty; overflow-wrap: anywhere; }
.acset__line strong { color: var(--ac-ink); font-weight: 500; }
.acset__cardbtns { margin-top: 16px; }
.acset__note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ac-faint); text-wrap: pretty; }
.acset__sec > .acset__line { margin-top: 14px; }

/* the email switch: title and small print read as one block; the whole row is the label */
.acf--sw { gap: 24px; }
.acf--sw .acf__main { cursor: pointer; gap: 3px; }
.acf__title { font-size: 15px; line-height: 1.4; color: var(--ac-ink); }
.acf__desc { font-size: 13px; line-height: 1.45; color: var(--ac-mute); }
.acf--sw + .acf__say { margin-top: 0; }
.acf--sw ~ .acset__note { margin-top: 4px; }
.acset__sw {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; margin: 0;
  width: 42px; height: 24px; border-radius: 999px; cursor: pointer;
  background: rgba(243, 238, 231, 0.18); transition: background-color .25s ease-out;
}
.acset__sw::before { content: ""; position: absolute; inset: -10px -1px; } /* 44px to tap */
.acset__sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ac-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform .3s var(--ac-spring);
}
.acset__sw:checked { background: var(--ac-accent); }
.acset__sw:checked::after { transform: translateX(18px); }
.acset__sw:focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 3px; }
.acset__sw:disabled { opacity: .6; }

/* delete, at the foot */
.acset__danger {
  height: 36px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; position: relative;
  font: 500 14px/1 var(--ac-sans); color: #f2555a; background: rgba(242, 85, 90, 0.09); transition: background-color .2s ease-out;
}
.acset__danger::after { content: ""; position: absolute; inset: -4px 0; }
.acset__danger:hover { background: rgba(242, 85, 90, 0.15); }
.acset__danger--go { color: #fff; background: #c9393e; }
.acset__danger--go:hover { background: #d94449; }

/* phones: Settings fills the screen */
@media (max-width: 640px) {
  dialog.acset { padding: 0; background: var(--ac-bg); }
  .acset__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; background: var(--ac-bg); }
  .acset__head { padding: calc(14px + env(safe-area-inset-top)) 16px 4px 24px; }
  .acset__head::after { background: linear-gradient(var(--ac-bg), rgba(12, 10, 9, 0)); }
  .acset__body { padding: 8px 24px calc(40px + env(safe-area-inset-bottom)); }
  .acset__b, .acset__danger { height: 44px; padding: 0 18px; }
  .acset__b--text { padding: 0 14px; }
  .acf__in { font-size: 16px; } /* under 16px, iPhones zoom in when the field is tapped */
  .acf__in.acf__code { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .acct__panel, .acct.is-open .acct__panel, .acset__panel, dialog.acset.is-open .acset__panel, .msheet .macct { transform: none !important; transition: opacity .12s linear !important; }
  .acset__sw::after { transition: none; }
}

/* No focus rings after a tap or click, on every page (html.tapped, set by menu.js
   and auth.js); they come back for the keyboard. Same rule as menu.css. */
html.tapped :focus-visible, html.tapped :focus-visible::after { outline: none !important; }

/* =========================================================================
   The header's buttons by who's looking (Dan, 2026-11-05): signed out, the white
   "Join for free" opens the sign-in box; signed in without Pro, "Get access · Pro"
   goes to pricing; members see neither (they get Saved). The two never show together,
   so Get access is white too, with the Pro tag as a dark chip (the viewer's own look).
   Here rather than v2.css so the React pages' header gets the same look.
   ========================================================================= */
html:not([data-as="signed"]) .ns-site .as-signed { display: none !important; }
html:is([data-as="signed"], [data-as="member"]) .ns-site .as-visitor { display: none !important; }
a.btn.btn--getpro { gap: 8px; background: var(--ink, #f3eee7); color: var(--bg, #0c0a09); }
a.btn.btn--getpro:hover { background: #fff; }
a.btn.btn--getpro .pro {
  position: static; display: inline-flex; align-items: center; flex: none;
  height: 20px; padding: 0 8px 1px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  color: #f8c3a4; background: #2a1a12; box-shadow: none;
}