/* ============================================================
   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}
.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 ---------- */
.nova__pill--quiet{margin-top:.5rem;background:transparent;color:inherit;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.cta-start{display:inline-flex;margin-top:2rem}

/* ---------- 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__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__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 li+li{margin-top:.5rem}
.prose code{font-size:.9em}
.prose a{text-decoration:underline;text-underline-offset:.15em}

/* account */
.store__name{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}
@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--ClosureRequested,.status--Closed,.status--PastDue,.status--None{color:#b3261e}
.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}