/*
    POW-01 / POW-01a / POW-03 - the public surface.

    Loaded on top of vetnexus-tokens.css and on its own: the public pages do not
    load Bootstrap, jQuery, an icon font or a web font. specs/25 section 12 sets
    first contentful paint under 1.5 s on 4G, and the largest saving available
    was simply not shipping the operator portal's chrome to a visitor who came
    for a calculator.

    No colour is named here. Every value is a token from vetnexus-tokens.css,
    which has a counterpart key in the MAUI Colors.xaml - the same rule the app
    styling doc sets for XAML, for the same reason.
*/

/* == Reset, kept to what these pages actually need ====================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.vn-public {
    margin: 0;
    background: var(--vn-bg-page);
    color: var(--vn-text-primary);
    font-family: var(--vn-font-body);
    font-size: var(--vn-text-body);
    line-height: var(--vn-leading-normal);
}

body.vn-public img {
    max-width: 100%;
    height: auto;
}

/*
    Every interactive element keeps a visible focus ring. specs/25 section 12
    requires the calculator to be fully keyboard-operable, and a demo in front
    of an audience is exactly where a missing focus ring shows up.
*/
body.vn-public :focus-visible {
    outline: 3px solid var(--vn-action-link);
    outline-offset: 2px;
    border-radius: var(--vn-radius-sm);
}

.vn-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: var(--vn-space-sm) var(--vn-space-md);
    background: var(--vn-bg-surface);
    color: var(--vn-text-primary);
    z-index: 10;
}

.vn-skip:focus {
    left: var(--vn-space-md);
}

.vn-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* == Bands ============================================================== */

.vn-band {
    padding: var(--vn-space-3xl) var(--vn-space-lg);
    border-bottom: 1px solid var(--vn-border-hairline);
}

.vn-band__inner {
    max-width: var(--vn-band-max-width);
    margin: 0 auto;
}

.vn-band--brand {
    background: var(--vn-bg-brand);
    color: var(--vn-text-on-brand);
    border-bottom-color: transparent;
}

.vn-band--brand a {
    color: var(--vn-forest-200);
}

.vn-band--quiet {
    background: var(--vn-bg-surface-quiet);
}

.vn-prose {
    max-width: 62ch;
}

/* == Typography ========================================================= */

.vn-public h1,
.vn-public h2,
.vn-public h3 {
    font-family: var(--vn-font-display);
    line-height: var(--vn-leading-tight);
    margin: 0 0 var(--vn-space-md);
    text-wrap: balance;
}

.vn-public h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.02em;
}

.vn-public h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.125rem);
    letter-spacing: -0.01em;
}

.vn-public h3 {
    font-size: var(--vn-text-headline);
}

.vn-public p {
    margin: 0 0 var(--vn-space-md);
}

.vn-lede {
    font-size: var(--vn-text-body-lg);
    color: var(--vn-text-secondary);
}

.vn-band--brand .vn-lede {
    color: var(--vn-forest-100);
}

.vn-meta {
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
}

.vn-band--brand .vn-meta {
    color: var(--vn-forest-200);
}

.vn-overline {
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vn-text-secondary);
    margin: 0 0 var(--vn-space-xs);
}

/* == Actions ============================================================ */

.vn-cta,
.vn-cta-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--vn-touch-target-min);
    padding: 0 var(--vn-space-xl);
    border-radius: var(--vn-radius-pill);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--vn-duration-fast) ease-in-out;
}

.vn-cta {
    background: var(--vn-action-primary);
    color: var(--vn-cream-050);
}

.vn-band--brand .vn-cta {
    background: var(--vn-cream-050);
    color: var(--vn-forest-900);
}

.vn-cta:hover {
    background: var(--vn-action-primary-hover);
}

.vn-band--brand .vn-cta:hover {
    background: var(--vn-cream-200);
}

.vn-cta-quiet {
    background: transparent;
    border-color: var(--vn-border-hairline);
    color: var(--vn-text-primary);
}

.vn-cta-quiet:hover {
    background: var(--vn-bg-surface-quiet);
}

.vn-link {
    color: var(--vn-action-link);
    font-weight: 600;
}

/* == Navigation ========================================================= */

.vn-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vn-space-md);
    flex-wrap: wrap;
    max-width: var(--vn-band-max-width);
    margin: 0 auto;
    padding: var(--vn-space-md) var(--vn-space-lg);
}

.vn-nav__brand {
    font-weight: 700;
    font-size: var(--vn-text-headline);
    letter-spacing: -0.01em;
    text-decoration: none;
    color: inherit;
}

.vn-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vn-space-sm) var(--vn-space-lg);
}

/* A signed-in owner has six items; on a phone they wrap to a second row rather than
   splitting "My plan" over two lines and pushing "Sign out" off the screen. */
.vn-nav__links a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--vn-text-subhead);
    white-space: nowrap;
}

.vn-nav__links a:hover {
    text-decoration: underline;
}

/* Sign out is a form button (it is a POST); set it like the links beside it. */
.vn-nav__links .vn-nav__signout {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--vn-text-subhead);
    white-space: nowrap;
}

.vn-nav__links .vn-nav__signout:hover,
.vn-nav__links .vn-nav__signout:focus-visible {
    text-decoration: underline;
}

.vn-nav--brand {
    color: var(--vn-text-on-brand);
}

/* == The opening: hero + calculator ===================================== */

.vn-opening {
    display: flex;
    flex-direction: column;
    gap: var(--vn-space-xl);
}

/*
    specs/25 section 2: on mobile the calculator moves above the hero subhead.
    A phone visitor should be interacting within one thumb-scroll, and the
    headline alone carries the framing - so the order is swapped here rather
    than the calculator being duplicated.
*/
.vn-opening__headline { order: 1; }
.vn-opening__calc     { order: 2; }
.vn-opening__body     { order: 3; }

@media (min-width: 860px) {
    .vn-opening__body { order: 2; }
    .vn-opening__calc { order: 3; }
}

.vn-opening__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vn-space-md);
    margin-bottom: var(--vn-space-sm);
}

/* == The calculator ===================================================== */

.vn-calc {
    background: var(--vn-bg-surface);
    color: var(--vn-text-primary);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-lg);
    padding: var(--vn-space-xl);
}

.vn-calc__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--vn-space-md);
    margin-bottom: var(--vn-space-lg);
}

.vn-field {
    display: flex;
    flex-direction: column;
    gap: var(--vn-space-2xs);
    min-width: 0;
}

.vn-field label {
    font-size: var(--vn-text-caption);
    font-weight: 600;
    color: var(--vn-text-secondary);
}

.vn-field input,
.vn-field select {
    min-height: var(--vn-control-height);
    padding: 0 var(--vn-space-sm);
    font: inherit;
    color: var(--vn-text-primary);
    background: var(--vn-bg-surface-quiet);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-sm);
    width: 100%;
}

.vn-field__pair {
    display: flex;
    gap: var(--vn-space-2xs);
}

.vn-field__pair input {
    flex: 1 1 auto;
    min-width: 0;
}

.vn-field__pair select {
    flex: 0 0 5.5rem;
    width: auto;
}

/*
    specs/25 section 12: with no JavaScript the page must still read and
    convert, and the calculator degrades to a link to the app. The submit
    control is therefore absent until a script has run, rather than present and
    inert - a button that does nothing is a worse answer than a link that works.
*/
.vn-calc__submit {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vn-space-md);
}

.vn-js .vn-calc__submit {
    display: flex;
}

.vn-js .vn-calc__nojs {
    display: none;
}

/* == The result ========================================================= */

.vn-result {
    margin-top: var(--vn-space-xl);
    padding-top: var(--vn-space-lg);
    border-top: 1px solid var(--vn-border-hairline);
}

.vn-result[hidden] {
    display: none;
}

.vn-result__headline {
    font-size: var(--vn-text-title);
    font-weight: 700;
    line-height: var(--vn-leading-snug);
    margin: 0 0 var(--vn-space-md);
}

.vn-breakdown {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--vn-space-md);
}

.vn-breakdown th,
.vn-breakdown td {
    text-align: left;
    padding: var(--vn-space-sm) var(--vn-space-xs);
    border-bottom: 1px solid var(--vn-border-hairline);
    vertical-align: top;
}

.vn-breakdown td:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.vn-breakdown__working {
    display: block;
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
    font-variant-numeric: tabular-nums;
}

.vn-breakdown__note {
    display: block;
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
    margin-top: var(--vn-space-2xs);
    max-width: 52ch;
}

.vn-breakdown tr.is-total td {
    border-bottom: none;
    border-top: 2px solid var(--vn-text-primary);
    font-size: var(--vn-text-headline);
    font-weight: 700;
    padding-top: var(--vn-space-sm);
}

/*
    specs/25 section 4.4. Small, directly beneath the result, always present -
    not a footnote and not a modal. Quiet, but never hidden and never collapsed.
*/
.vn-disclosure {
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
    max-width: 62ch;
    margin: var(--vn-space-md) 0 0;
}

.vn-refusal {
    font-size: var(--vn-text-body);
    color: var(--vn-warning-ink);
    background: var(--vn-warning-tint);
    border-radius: var(--vn-radius-sm);
    padding: var(--vn-space-sm) var(--vn-space-md);
    margin: 0;
}

/* == Lists and step columns ============================================= */

.vn-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--vn-space-xl);
    margin-top: var(--vn-space-xl);
}

.vn-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--vn-radius-pill);
    background: var(--vn-forest-100);
    color: var(--vn-forest-800);
    font-weight: 700;
    margin-bottom: var(--vn-space-xs);
}

.vn-points {
    list-style: none;
    margin: var(--vn-space-lg) 0 0;
    padding: 0;
    display: grid;
    gap: var(--vn-space-md);
    max-width: 68ch;
}

.vn-points li {
    padding-left: var(--vn-space-lg);
    position: relative;
}

.vn-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: var(--vn-radius-pill);
    background: var(--vn-forest-500);
}

.vn-points--soon li::before {
    background: var(--vn-warning);
}

.vn-tag {
    display: inline-block;
    font-size: var(--vn-text-overline);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px var(--vn-space-xs);
    border-radius: var(--vn-radius-pill);
    background: var(--vn-warning-tint);
    color: var(--vn-warning-ink);
    margin-left: var(--vn-space-xs);
    vertical-align: middle;
}

.vn-notdoing {
    display: grid;
    gap: var(--vn-space-xl);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: var(--vn-space-lg);
}

/* == Sign in ============================================================ */

.vn-signin {
    max-width: 26rem;
    margin: 0 auto;
    background: var(--vn-bg-surface);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-lg);
    padding: var(--vn-space-xl);
}

.vn-signin__options {
    display: grid;
    gap: var(--vn-space-sm);
    margin-bottom: var(--vn-space-lg);
}

.vn-signin__options .vn-cta,
.vn-signin__options .vn-cta-quiet {
    width: 100%;
}

/* == Footer ============================================================= */

.vn-footer {
    padding: var(--vn-space-2xl) var(--vn-space-lg);
    background: var(--vn-bg-brand);
    color: var(--vn-text-on-brand);
}

.vn-footer__inner {
    max-width: var(--vn-band-max-width);
    margin: 0 auto;
}

.vn-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vn-space-lg);
    margin: var(--vn-space-lg) 0 var(--vn-space-md);
    padding: 0;
    list-style: none;
}

.vn-footer a {
    color: var(--vn-forest-100);
}

/* == Motion ============================================================= */

@media (prefers-reduced-motion: reduce) {
    body.vn-public *,
    body.vn-public *::before,
    body.vn-public *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* == Wordmark and clinic mode (specs/34 sections 1, 3) ================== */

/*
    The VetNexus wordmark is two weights of the display face and nothing
    else: "Vet" heavy, "Nexus" regular. No icon - the platform is the quiet
    brand; the consumer app carries the mark.
*/
.vn-wordmark {
    font-family: var(--vn-font-display);
    font-weight: 400;
    font-size: var(--vn-text-headline);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.vn-wordmark b {
    font-weight: 700;
}

.vn-wordmark--sm {
    font-size: var(--vn-text-body);
}

/* The practice forward. The logo and the name-as-logo share one height so a
   practice without artwork is not visibly a lesser tier. */
.vn-nav__clinic {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: inherit;
    text-decoration: none;
}

.vn-nav__clinic-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.vn-nav__clinic-name {
    font-family: var(--vn-font-display);
    font-weight: 700;
    font-size: var(--vn-text-headline);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/*
    The attribution lockup (06 AC25). Navigation-sized, on-band colour from
    the contrast computation. It is NOT restyled by the clinic override: it
    reads --vn-text-on-brand, which the palette sets to whichever of cream or
    ink passes on the band - so the lockup is always legible on whatever the
    band became.
*/
.vn-lockup {
    display: inline-flex;
    align-items: baseline;
    gap: var(--vn-space-xs);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.vn-nav__links .vn-lockup {
    font-weight: 400;
}

.vn-lockup__by {
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    opacity: 0.85;
}

.vn-lockup--quiet {
    color: inherit;
}

/* The guard's fallback: a practice colour that cannot carry text sits under
   the forest header as a stripe. */
.vn-clinic-stripe {
    height: 6px;
}

/* "Not your vet?" - a state change dressed as a link, because it is one. */
.vn-inline-form {
    display: inline;
    margin: 0;
}

.vn-linkbutton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--vn-forest-100);
    text-decoration: underline;
    cursor: pointer;
}

.vn-footer__attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vn-space-2xs);
    color: var(--vn-text-on-brand);
}

/* In clinic mode the band's secondary text follows the on-band colour rather
   than the forest tints, which assume a forest band. A call to action keeps its
   own cream-and-ink colours: it sits on a cream pill, so the on-band colour
   (cream, on most practices' bands) made the button blank. */
.vn-clinic .vn-band--brand a:not(.vn-cta),
.vn-clinic .vn-band--brand .vn-lede,
.vn-clinic .vn-band--brand .vn-meta,
.vn-clinic .vn-footer a,
.vn-clinic .vn-linkbutton {
    color: var(--vn-text-on-brand);
}

.vn-clinic .vn-band--brand .vn-lede,
.vn-clinic .vn-band--brand .vn-meta {
    opacity: 0.88;
}

.vn-clinic .vn-overline {
    color: var(--vn-accent-clay);
}

/* == Dark (walked 2026-09-03, specs/34 AC15) ============================

    The tokens carry the dark ground, surfaces, text and the action fill; the
    rules here are the few places a class pairs a fixed palette step with an
    action token that changes. The action fill is forest-400 in dark, and
    cream text no longer reads on it - ink does, as in the app.
*/

@media (prefers-color-scheme: dark) {
    :root:not([data-vn-theme="light"]) .vn-cta { color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-cta:hover { color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-nav__brand,
    :root:not([data-vn-theme="light"]) .vn-nav__clinic { color: var(--vn-text-on-brand); }
}

:root[data-vn-theme="dark"] .vn-cta { color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-cta:hover { color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-nav__brand,
:root[data-vn-theme="dark"] .vn-nav__clinic { color: var(--vn-text-on-brand); }

/* ------------------------------------------------------------------------- *
   The VetNutriLab logo (graphics/VetNutriLabLogo.png, adopted 2026-09-05).
   White "Vet" and "Lab" with a leaf-green "Nutri": drawn for the brand band,
   where the white reads on forest. It never appears on a light ground.
 * ------------------------------------------------------------------------- */
.vn-nav__logo {
    display: block;
    height: 36px;
    width: auto;
    object-fit: contain;
}