/* ==========================================================================================
   WellnessApp.Web — the host stylesheet.

   THE FIRST LINE IS THE IMPORTANT ONE. Every colour token, every type scale, every control
   style in this product lives in WellnessApp.UI's wellness.css, and it is imported here rather
   than copied. Two copies of a design system drift within a week, and the white-label tenants
   make that drift visible to customers.

   What is left in this file is what genuinely belongs to this host and to nowhere else: the
   four public pages. The marketing page, privacy, terms and the error page are not screens in
   the shared UI library and never will be, because the phone and the widget do not have them.

   THE TOKEN NAMES BELOW ARE THE REAL ONES, AND THEY HAVE NO FALLBACKS.

   This file was written before wellness.css existed and guessed at names - --wa-brand-on-dark,
   --wa-focus, --wa-selected - each with a hard-coded hex fallback behind it. The guesses were
   wrong, so every one of those rules was silently painting its fallback. Worse, the fallback is
   what made it silent: var(--wa-focus, <some hex>) renders perfectly whether or not --wa-focus
   exists, so a renamed or misspelled token looks exactly like a working one.

   So: real names, taken from the token block in WellnessApp.UI/wwwroot/css/wellness.css, and no
   fallbacks. A token that goes missing now shows up as an unstyled element on the first page
   load, which is the failure this file would rather have.

   The three that were wrong, for anyone reading an old diff:
       --wa-brand-on-dark  ->  --wa-brand-text    (resolves to the lighter blue in dark and to
                                                   the brand blue in light, by itself, so the
                                                   html[data-theme="light"] overrides this file
                                                   used to carry are gone)
       --wa-focus          ->  --wa-focus-ring
       --wa-selected       ->  --wa-selected-fill

   NO HEX BELOW THIS COMMENT. Every colour in this product is declared once, in the token block
   in wellness.css. That rule holds here too.
   ========================================================================================== */

@import url('_content/WellnessApp.UI/css/wellness.css');

/* ------------------------------------------------------------------------------------------
   A pre-paint background for the instant before wellness.css has arrived.

   theme.js has already written data-theme on <html> by the time anything paints, so this rule
   only ever covers the gap between the attribute being set and the imported stylesheet being
   applied. One rule, not two: --wa-bg is redefined under :root[data-theme="light"] in
   wellness.css, so the token flips itself and there is nothing for a second selector to do.
   ------------------------------------------------------------------------------------------ */

html {
    background-color: var(--wa-bg);
}

/* ------------------------------------------------------------------------------------------
   The public shell
   ------------------------------------------------------------------------------------------ */

.wa-public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--wa-text);
}

.wa-public__header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    border-bottom: 1px solid var(--wa-border);
}

.wa-public__brand {
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: inherit;
}

.wa-public__brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .4rem;
    background: var(--wa-brand);
}

.wa-public__nav {
    display: flex;
    gap: clamp(.75rem, 2vw, 1.75rem);
    align-items: center;
}

.wa-public__nav a {
    color: inherit;
    text-decoration: none;
}

.wa-public__nav a:hover,
.wa-public__nav a:focus-visible {
    text-decoration: underline;
}

.wa-public__main {
    flex: 1 1 auto;
    width: min(72rem, 100%);
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3rem);
}

.wa-public__footer {
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    border-top: 1px solid var(--wa-border);
    font-size: .9rem;
    opacity: .85;
}

.wa-public__footer nav {
    display: flex;
    gap: 1rem;
}

.wa-public__disclaimer {
    margin-top: .75rem;
    max-width: 46rem;
}

/* ------------------------------------------------------------------------------------------
   Buttons. The pressed state is --wa-brand-pressed, which is a product-wide rule and not a
   marketing one.
   ------------------------------------------------------------------------------------------ */

.wa-btn {
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: .5rem;
    border: 1px solid var(--wa-brand);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.wa-btn--primary {
    background: var(--wa-brand);
    color: var(--wa-text-on-brand);
}

/* --wa-brand-text, not --wa-brand: the brand blue on a dark ground is under 2:1 and unreadable,
   which is the whole reason that token exists separately. It resolves to the lighter blue in
   dark and to the brand blue in light, so there is no per-theme override to write here. */
.wa-btn--ghost {
    background: transparent;
    color: var(--wa-brand-text);
}

.wa-btn:active,
.wa-btn[aria-pressed="true"] {
    background: var(--wa-brand-pressed);
    border-color: var(--wa-brand-pressed);
    color: var(--wa-text-on-brand);
}

.wa-btn:focus-visible {
    outline: 3px solid var(--wa-focus-ring);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------------------------------
   Marketing sections
   ------------------------------------------------------------------------------------------ */

.wa-hero {
    padding-block: clamp(2rem, 6vw, 4.5rem);
    max-width: 48rem;
}

.wa-hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    line-height: 1.1;
    margin: 0 0 1rem;
}

.wa-hero__lead {
    font-size: 1.15rem;
    line-height: 1.6;
}

.wa-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block: 1.75rem .75rem;
}

.wa-hero__note {
    font-size: .9rem;
    opacity: .75;
}

.wa-three__grid,
.wa-pricing__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-top: 1.5rem;
}

.wa-card,
.wa-price {
    padding: 1.25rem;
    border: 1px solid var(--wa-border);
    border-radius: .75rem;
    background: var(--wa-surface-raised);
}

.wa-card h3,
.wa-price h3 {
    margin-top: 0;
    color: var(--wa-brand-text);
}

/* The selected-panel fill. One token, used wherever a panel is the chosen one. */
.wa-price--featured {
    background: var(--wa-selected-fill);
    border-color: var(--wa-brand);
}

.wa-price__amount {
    font-size: 2rem;
    font-weight: 700;
    margin: .25rem 0 1rem;
}

.wa-price__amount span {
    font-size: 1rem;
    font-weight: 400;
    opacity: .7;
}

.wa-price ul {
    margin: 0 0 1.25rem;
    padding-left: 1.1rem;
    line-height: 1.7;
}

.wa-five__list {
    margin-top: 1.5rem;
    padding-left: 1.2rem;
    line-height: 1.6;
}

.wa-five__list h3 {
    margin-bottom: .25rem;
}

.wa-trust {
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding: 1.5rem;
    border-left: 4px solid var(--wa-brand);
    background: var(--wa-surface-raised);
    max-width: 52rem;
    line-height: 1.65;
}

.wa-pricing {
    margin-top: clamp(2rem, 5vw, 3.5rem);
}

.wa-pricing__note {
    margin-top: 1rem;
    font-size: .9rem;
    opacity: .75;
}

/* ------------------------------------------------------------------------------------------
   Legal and error pages
   ------------------------------------------------------------------------------------------ */

.wa-legal {
    max-width: 44rem;
    line-height: 1.65;
}

.wa-legal h1 {
    margin-top: 0;
}

.wa-legal__status {
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--wa-selected-fill);
    border: 1px solid var(--wa-brand);
}

/* ------------------------------------------------------------------------------------------
   Respect a reduced-motion preference for anything this stylesheet animates. It animates
   nothing today; the rule is here so that the next person who adds a transition inherits it.
   ------------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .wa-public *,
    .wa-public *::before,
    .wa-public *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ------------------------------------------------------------------------------------------
   Sign in, create account, accept the terms, sign out. One narrow card, full width on a phone.
   ------------------------------------------------------------------------------------------ */

.wa-auth {
    width: 100%;
    max-width: 26rem;
    margin: clamp(1.5rem, 6vw, 3.5rem) auto;
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 1px solid var(--wa-border);
    border-radius: .75rem;
    background: var(--wa-surface-raised);
    box-sizing: border-box;
}

.wa-auth--wide {
    max-width: 38rem;
}

.wa-auth h1 {
    margin-top: 0;
    font-size: 1.6rem;
}

.wa-auth__lead {
    margin-top: 0;
    color: var(--wa-text-muted);
}

.wa-auth__form {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wa-auth__row {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.wa-auth .wa-input {
    font-size: 1rem; /* 16px: iOS does not zoom into the field */
    box-sizing: border-box;
}

.wa-auth .wa-check {
    margin: .5rem 0;
}

.wa-auth .wa-check a,
.wa-auth__alt a,
.wa-auth__points a {
    color: var(--wa-brand-text);
}

.wa-auth__submit {
    margin-top: .75rem;
    width: 100%;
}

.wa-auth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .75rem;
}

.wa-auth__error {
    padding: .625rem .75rem;
    border: 1px solid var(--wa-danger);
    border-radius: var(--wa-radius);
    background: var(--wa-danger-fill);
    color: var(--wa-text);
}

.wa-auth__invalid,
.wa-auth .validation-message {
    color: var(--wa-danger);
    font-size: .8125rem;
}

.wa-auth__hint,
.wa-auth__optional {
    color: var(--wa-text-muted);
    font-size: .8125rem;
    font-weight: 400;
}

.wa-auth__hint {
    margin: 0 0 .5rem;
}

.wa-auth__points {
    padding-left: 1.1rem;
    line-height: 1.5;
}

.wa-auth__points li {
    margin-bottom: .5rem;
}

.wa-auth__alt {
    margin: 1.25rem 0 0;
    text-align: center;
    color: var(--wa-text-muted);
}