/* ============================================================
   KashPage - styles for everything that is NOT the ported home page:
   nav additions, the intake wizard, account pages.
   Mobile-first. Uses the tokens declared in kashpage.css (--c-*, --f-*, --ease).
   ============================================================ */

/* ---------- nav additions ---------- */
.nav__actions{display:flex;align-items:center;gap:.4rem}
.nav__link{pointer-events:auto;padding:.7rem .8rem;font-family:var(--f-utility);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.nav__link:hover{color:var(--c-accent)}
.nav__cta{white-space:nowrap}
/* The trial on the nav's pill: the badge's dot, and the plan's length after a hairline. The label stays;
   on a phone only the dot does, where the nav has a few pixels to spare. */
.nav__cta--trial{display:inline-flex;align-items:center;gap:.55rem}
.nav__cta--trial .kp-dot{width:6px;height:6px}
.nav__trial{padding-left:.6rem;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.nav__cta--trial:hover .kp-dot{background:currentColor;box-shadow:none} /* the pill turns accent: the dot would vanish */
@media (max-width:639px){.nav__trial{display:none}}
.nav form{display:contents}
.nav button.nav__link{background:none;border:0;color:inherit;cursor:pointer}
@media (max-width:480px){
  .nav__name{display:none}
  .nav__cta{padding:.6rem 1rem}
}

/* ---------- home page additions ---------- */
.cta-start{display:inline-flex;margin-top:2rem}
.cta-block--trial{row-gap:1.25rem}
.cta-block--trial .cta-start{margin-top:1rem}
a.nova__service:hover,a.nova__service:focus-visible{color:var(--c-accent)} /* the hero's list links to the service cards */
/* The hero's sign-up card, in the free-trial package's light frosted glass: ink reads on it, where the
   smoky glass before left its button's label at 1.45:1. The trial's badge sits on its top edge. */
.nova__card{position:relative;padding:18px;border-radius:16px;
  background:color-mix(in srgb,var(--c-dominant) 72%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.nova__card-title{font-size:15px}
.nova__card-role{color:var(--c-ink)}
.nova__card .kp-btn{align-self:flex-start;margin-top:8px}
.nova__card--trial{padding-top:26px}
.nova__card-badge{position:absolute;top:0;left:18px;transform:translateY(-50%)}
@media (max-width:899px){.nova__shell{gap:32px}}

/* ---------- free trial: pieces adopted from the KashPage.FreeTrial package, on the site's tokens ----------
   Pills start or add a store; the square blue .opt__btn operates the app (forms, checkout, console).
   The glow is still - nothing pulses - and the button itself is never transformed here: the motion
   engine writes an inline transform on [data-magnetic]. */
:root{--c-accent-glow:color-mix(in srgb,var(--c-accent) 34%,transparent)}
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:0 1.25rem;
  border:0;border-radius:999px;background:var(--c-ink);color:var(--c-dominant);
  font-family:var(--f-utility);font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;
  text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:0 0 26px var(--c-accent-glow);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.kp-btn:hover{background:var(--c-on-light);color:var(--c-dominant);box-shadow:0 0 34px color-mix(in srgb,var(--c-accent) 48%,transparent)}
.kp-btn:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}
.kp-btn .nova__chev{transition:transform .3s var(--ease)}
.kp-btn:hover .nova__chev{transform:translateX(2px)}
.kp-btn--lg{min-height:3.25rem;padding:0 1.75rem;gap:.625rem;font-size:.9375rem}
.kp-btn--lg .nova__chev{width:16px;height:16px}
/* The engine fades [data-rise] in; the shorthand above, loaded after it, would cancel that fade. */
.kp-btn[data-rise]{transition:opacity calc(var(--dur) * .8) var(--ease) var(--d,0ms),transform 420ms var(--ease),
  background-color .3s var(--ease),box-shadow .3s var(--ease)}
.app .kp-btn{min-height:3rem}
.kp-dot{display:block;flex:none;width:7px;height:7px;border-radius:999px;background:var(--c-accent);
  box-shadow:0 0 18px var(--c-accent-glow)}
.kp-badge{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 14px;border-radius:999px;
  background:var(--c-ink);color:var(--c-dominant);font-family:var(--f-utility);font-size:11px;font-weight:500;
  line-height:1.25;letter-spacing:.16em;text-transform:uppercase}
.plan .kp-badge{margin:0 0 .75rem}
@media (prefers-reduced-motion:reduce){.kp-btn:hover .nova__chev{transform:none}}
@media (forced-colors:active){.kp-btn,.kp-badge{border:1px solid CanvasText}.kp-dot{background:CanvasText}}

/* ---------- app pages (wizard, account) ---------- */
.app{min-height:70vh;width:min(100% - 2rem,46rem);margin-inline:auto;
  padding-block:calc(5.5rem + env(safe-area-inset-top)) 4rem}
.app--wide{width:min(100% - 2rem,64rem)}
.app__card{background:var(--c-field);border:1px solid color-mix(in srgb,var(--c-ink) 12%,transparent);
  padding:clamp(1.25rem,4vw,2.5rem)}
.app__card + .app__card{margin-top:1.25rem}
.app__card .display{margin-bottom:.9rem;line-height:1.02}
.app__card .lede{margin-bottom:1.75rem}
.app__form{display:grid;gap:1.1rem}
.app__actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:flex-end;align-items:center;margin-top:.75rem}
.app__sending{margin:0;padding:.9rem 0;font-weight:500}
.app__back{padding:.9rem 1.2rem;background:none;border:0;color:inherit;font:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:.25em}
.app__error{margin:0;padding:.85rem 1rem;border-left:3px solid #b3261e;
  background:color-mix(in srgb,#b3261e 9%,transparent)}
.app__reference{margin:1.5rem 0;font-size:.85rem;opacity:.85}
.app__reference code{display:inline-block;margin-top:.35rem;font-size:1rem;word-break:break-all;opacity:1}
.app .opt__btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;cursor:pointer}
.app .opt__btn[disabled]{opacity:.55;cursor:progress}

/* progress */
/* as many equal columns as there are steps: the two wizards differ in length */
.steps{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem;margin:0 0 1.25rem;padding:0}
.steps__button{width:100%;padding:.55rem 0 0;border:0;border-top:2px solid color-mix(in srgb,var(--c-ink) 20%,transparent);
  background:none;color:inherit;font:inherit;text-align:left;opacity:.6}
.steps__button:not([disabled]){cursor:pointer}
.steps__item.is-current .steps__button,.steps__item.is-done .steps__button{border-top-color:var(--c-accent);opacity:1}
.steps__n{display:block;font-family:var(--f-utility);font-size:.68rem;letter-spacing:.14em}
.steps__t{display:none;font-size:.82rem}
@media (min-width:640px){.steps__t{display:block}}

/* fields - 16px minimum so iOS does not zoom the page on focus */
.field{display:grid;gap:.35rem}
.field label,.field-group legend,.review__title{font-family:var(--f-utility);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.field input:not([type=checkbox]),.field select,.field textarea{width:100%;min-height:3rem;padding:.7rem .85rem;
  font:inherit;font-size:1rem;color:inherit;background:color-mix(in srgb,var(--c-dominant) 60%,#fff);
  border:1px solid color-mix(in srgb,var(--c-ink) 28%,transparent);border-radius:0}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--c-accent);outline-offset:1px}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:#b3261e}
.field--check{grid-template-columns:auto 1fr;align-items:start;column-gap:.75rem}
.field--check input{width:1.4rem;height:1.4rem;margin:.15rem 0 0;accent-color:var(--c-accent)}
.field--check label{font-family:inherit;font-size:1rem;letter-spacing:0;text-transform:none;opacity:1}
.field--check .field__hint,.field--check .field__error{grid-column:2}
.field__hint{margin:0;font-size:.85rem;opacity:.72}
.field__hint a{text-decoration:underline;text-underline-offset:.15em}
.field__error{margin:0;font-size:.88rem;color:#b3261e}
.field-group{display:grid;gap:1.1rem;margin:.5rem 0 0;padding:1.1rem 0 0;border:0;
  border-top:1px solid color-mix(in srgb,var(--c-ink) 14%,transparent)}
.field-group legend{padding:0 .6rem 0 0}
@media (min-width:640px){
  .field-group{grid-template-columns:1fr 1fr}
  .field-group > .field:nth-of-type(-n+2){grid-column:1 / -1}
}

/* plan + review */
.plan{padding:1.1rem 1.25rem;border-left:3px solid var(--c-accent);background:color-mix(in srgb,var(--c-accent) 8%,transparent)}
.plan__price{margin:0;font-family:var(--f-display);font-size:clamp(1.7rem,5vw,2.4rem);letter-spacing:var(--tr-display);line-height:1.1}
.plan__promo{margin:.4rem 0 0;font-size:.95rem}
.plan__facts{margin:.9rem 0 0;padding-left:1.1rem;font-size:.95rem;display:grid;gap:.35rem}
.plan__status{margin:.9rem 0 0;font-size:.95rem;font-weight:500}
.plan__link{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
.checkout{display:grid;gap:1rem;margin:1rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--c-ink) 14%,transparent)}
.checkout .dev-banner{margin:0}
.review{padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--c-ink) 14%,transparent)}
.review__title{margin:0 0 .6rem;font-weight:400}
.review__list{display:grid;grid-template-columns:1fr;gap:.1rem .9rem;margin:0}
.review__list dt{font-size:.82rem;opacity:.7}
.review__list dd{margin:0 0 .55rem;overflow-wrap:anywhere}
.review__total{margin:.25rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--c-ink) 14%,transparent)}
@media (min-width:640px){
  .review__list{grid-template-columns:minmax(10rem,14rem) 1fr}
  .review__list dd{margin-bottom:.35rem}
}

/* long-form pages (privacy policy) */
.prose h2{margin:1.9rem 0 .55rem;font-family:var(--f-display);font-weight:var(--fw-display);font-size:1.2rem;letter-spacing:var(--tr-display)}
.prose p,.prose li{line-height:1.6}
.prose ul{margin:.4rem 0 1rem;padding-left:1.2rem}
.prose [id]{scroll-margin-top:calc(5.5rem + env(safe-area-inset-top))} /* a linked heading lands below the fixed nav */
.prose li+li{margin-top:.5rem}
.prose code{font-size:.9em}
.prose a{text-decoration:underline;text-underline-offset:.15em}

/* account */
.store__name,.card__title{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1.1rem;font-family:var(--f-display);
  font-weight:var(--fw-display);font-size:clamp(1.3rem,3.5vw,1.8rem);letter-spacing:var(--tr-display);line-height:1.1}
.app__actions button.app__back[disabled]{opacity:.55;cursor:progress}
.facts{display:grid;gap:.9rem;margin:0 0 1.5rem}
.facts dt{font-family:var(--f-utility);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.facts dd{margin:.15rem 0 0;font-size:1.05rem;overflow-wrap:anywhere}
/* A link among the facts (a store's storefront) reads as one: underlined, as the card's other text links are. */
.facts dd a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
@media (min-width:640px){.facts{grid-template-columns:1fr 1fr}}
/* Sits inside the store's display heading, so it restates its own type rather than inheriting the heading's. */
.status{display:inline-block;padding:.2rem .6rem;font-family:var(--f-body);font-size:.8rem;font-weight:400;letter-spacing:normal;
  line-height:1.2;border:1px solid currentColor;border-radius:999px}
.status--Active{color:#1a7f4b}
.status--Error,.status--PendingDelete,.status--Deleted,.status--PastDue,.status--Canceled,.status--None{color:#b3261e}
.store__note{margin:-.4rem 0 1.1rem}
/* Unavailable rather than busy: the console until the store is active, deletion once asked for.
   Specific enough to outrank the busy cursor of .app .opt__btn[disabled] and .app__actions button.app__back[disabled]. */
.store .store__actions button[disabled]{cursor:not-allowed}
.app__danger{padding-top:1rem;border-top:1px solid color-mix(in srgb,#b3261e 45%,transparent)}
.app__danger .opt__btn{background:#b3261e;border-color:#b3261e;color:#fff}
.dev-banner{margin:0 0 1rem;padding:.6rem .9rem;font-size:.85rem;background:#fff4ce;color:#3b2f00;border:1px dashed #8a6d00}
.outbox pre{margin:.5rem 0 0;padding:.9rem;overflow:auto;font-size:.8rem;background:#1e1e1e;color:#e6e6e6}


#blazor-error-ui{display:none;position:fixed;inset:auto 0 0 0;z-index:100000;padding:.7rem 1rem;background:#fff4ce;color:#3b2f00}
#blazor-error-ui .dismiss{float:right;cursor:pointer}

/* ---------- account: light cards on a dark grey ground ----------
   The nav and footer sit outside <main>, so they follow the page through body:has(). Anything placed
   straight on the ground, outside a card, needs light text - never the accent, 2.77:1 on it.
   Browsers without :has() keep the light page whole. */
:root{--c-ground-dark:#383838;--c-on-dark-muted:#b8b8b8}
body:has(main.app--dark){background:var(--c-ground-dark);color:var(--c-dominant)}
.app--dark .app__card{color:var(--c-ink)}
.app--dark > .app__error{background:color-mix(in srgb,#b3261e 9%,var(--c-field));color:var(--c-ink)}
body:has(main.app--dark) .nav{background:color-mix(in srgb,var(--c-ground-dark) 94%,transparent);color:var(--c-dominant);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--c-dominant) 12%,transparent)}
body:has(main.app--dark) .nav__name{text-shadow:none}
body:has(main.app--dark) .nav__cta{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:color-mix(in srgb,var(--c-dominant) 50%,transparent)}
body:has(main.app--dark) .nav__cta:hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
body:has(main.app--dark) :is(.nav__link:hover,.foot a:hover){color:var(--c-glow3)}
body:has(main.app--dark) :is(.nav,.foot) :is(a,button):focus-visible{outline:2px solid var(--c-glow3);outline-offset:3px}
body:has(main.app--dark) .foot{border-top-color:color-mix(in srgb,var(--c-dominant) 16%,transparent)}
body:has(main.app--dark) .foot__legal{border-top-color:color-mix(in srgb,var(--c-dominant) 12%,transparent);opacity:1;color:var(--c-on-dark-muted)}
body:has(main.app--dark) .foot h4{opacity:1;color:var(--c-on-dark-muted)}