/*
    The owner questionnaire on the web - /start/* (specs/34 section 8).

    Loaded on top of vetnexus-tokens.css and vetnexus-public.css. The same
    components the PAWSspan app draws, in CSS: the confidence meter with its
    stage name, choice cards, the segmented scale with its ends written out,
    labelled fields, one raised card per screen. No colour is named here;
    every value is a token, which is also how clinic mode's override reaches
    the buttons and links without this file knowing it exists.

    Works without script. Every control is a native input inside a label;
    selection styling uses :has() so a checked radio lights its card, and the
    page still reads and submits where :has() is unsupported.
*/

/* == Frame ============================================================== */

.vn-onb {
    max-width: 40rem;
    margin: 0 auto;
    padding: var(--vn-space-lg) var(--vn-space-lg) var(--vn-space-3xl);
}

.vn-onb__title {
    margin: var(--vn-space-lg) 0 var(--vn-space-xs);
}

.vn-onb__payoff {
    font-size: var(--vn-text-body-lg);
    color: var(--vn-text-secondary);
    margin-bottom: var(--vn-space-xl);
}

.vn-onb section + section {
    margin-top: var(--vn-space-xl);
}

.vn-onb .vn-overline {
    margin-bottom: var(--vn-space-sm);
}

.vn-onb__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vn-space-md);
    margin-top: var(--vn-space-2xl);
}

.vn-onb__error {
    color: var(--vn-danger-ink);
    background: var(--vn-danger-tint);
    border-radius: var(--vn-radius-sm);
    padding: var(--vn-space-sm) var(--vn-space-md);
    margin: var(--vn-space-md) 0;
}

.vn-onb__error ul {
    margin: 0;
    padding-left: var(--vn-space-lg);
}

/* == The confidence meter (04 section 2; 23 section 3.1) ================ */

.vn-meter {
    display: grid;
    gap: var(--vn-space-2xs);
}

.vn-meter__labels {
    display: flex;
    justify-content: space-between;
    gap: var(--vn-space-md);
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--vn-text-secondary);
}

.vn-meter__track {
    height: 6px;
    border-radius: 3px;
    background: var(--vn-cream-300);
    overflow: hidden;
}

.vn-meter__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--vn-forest-600);
    transition: width 0.4s ease-out;
}

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

/* == Fields ============================================================= */

.vn-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--vn-space-lg);
    min-width: 0;
}

.vn-fieldset > legend {
    padding: 0;
    margin-bottom: var(--vn-space-sm);
    font-size: var(--vn-text-overline);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--vn-text-secondary);
}

.vn-field {
    display: grid;
    gap: var(--vn-space-2xs);
    margin-bottom: var(--vn-space-lg);
}

.vn-field > label,
.vn-field__label {
    font-weight: 600;
    font-size: var(--vn-text-body);
}

.vn-field__optional {
    font-weight: 400;
    color: var(--vn-text-secondary);
}

.vn-field input[type="text"],
.vn-field input[type="email"],
.vn-field input[type="tel"],
.vn-field input[type="number"],
.vn-field input[type="date"],
.vn-field input[type="search"],
.vn-field select,
.vn-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--vn-space-md);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-md);
    background: var(--vn-bg-surface-quiet);
    color: var(--vn-text-primary);
    font: inherit;
    font-size: 17px;
}

.vn-field textarea {
    padding: var(--vn-space-sm) var(--vn-space-md);
    min-height: 96px;
    resize: vertical;
}

.vn-field input:focus,
.vn-field select:focus,
.vn-field textarea:focus {
    outline: 3px solid var(--vn-action-link);
    outline-offset: 1px;
    border-color: var(--vn-action-link);
}

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

.vn-field--invalid input,
.vn-field--invalid select {
    border-color: var(--vn-danger);
    border-width: 1.5px;
}

.vn-field__error {
    font-size: var(--vn-text-caption);
    color: var(--vn-danger-ink);
}

/* A figure and its unit, side by side. */
.vn-field--unit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--vn-space-xs);
    align-items: center;
}

.vn-field--unit input[type="number"] {
    font-variant-numeric: tabular-nums;
}

.vn-field--unit .vn-unit {
    display: inline-flex;
    gap: 2px;
    border: 1px solid var(--vn-border-hairline);
    border-radius: 999px;
    padding: 3px;
    background: var(--vn-bg-surface);
}

.vn-unit label {
    position: relative;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--vn-text-caption);
    cursor: pointer;
}

.vn-unit input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.vn-unit label:has(input:checked) {
    background: var(--vn-forest-800);
    color: var(--vn-cream-050);
}

.vn-unit label:has(input:focus-visible) {
    outline: 3px solid var(--vn-action-link);
}

/* == Choice cards (specs/34 section 2.5) ================================ */

.vn-choices {
    display: grid;
    gap: var(--vn-space-xs);
}

.vn-choices--two {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.vn-choice {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--vn-space-sm);
    min-height: 52px;
    padding: var(--vn-space-sm) var(--vn-space-md);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-md);
    background: var(--vn-bg-surface);
    cursor: pointer;
}

.vn-choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.vn-choice__stripe {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background: transparent;
}

.vn-choice__text {
    display: grid;
    gap: 2px;
}

.vn-choice__label {
    font-weight: 600;
}

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

.vn-choice__check {
    width: 20px;
    color: var(--vn-forest-800);
    font-weight: 700;
    visibility: hidden;
}

.vn-choice:has(input:checked) {
    border: 2px solid var(--vn-forest-800);
    background: var(--vn-forest-050);
    padding-left: calc(var(--vn-space-md) - 1px);
}

.vn-choice:has(input:checked) .vn-choice__stripe {
    background: var(--vn-accent-clay);
}

.vn-choice:has(input:checked) .vn-choice__check {
    visibility: visible;
}

.vn-choice:has(input:focus-visible) {
    outline: 3px solid var(--vn-action-link);
    outline-offset: 2px;
}

/* The consequence of an answer, said where it is caused (04 section 4). */
.vn-choice__consequence {
    grid-column: 2 / span 2;
    font-size: var(--vn-text-caption);
    color: var(--vn-info-ink);
}

/* == Segmented scale ==================================================== */

.vn-scale {
    display: grid;
    gap: var(--vn-space-2xs);
}

.vn-scale__segments {
    display: flex;
    gap: 4px;
}

.vn-scale__segment {
    position: relative;
    flex: 1 1 0;
    display: grid;
    place-items: center;
    min-height: 44px;
    border: 1px solid var(--vn-border-hairline);
    border-radius: 10px;
    background: var(--vn-bg-surface);
    font-weight: 600;
    font-size: var(--vn-text-body);
    cursor: pointer;
}

.vn-scale__segment input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.vn-scale__segment:has(input:checked) {
    background: var(--vn-forest-800);
    color: var(--vn-cream-050);
    border-color: var(--vn-forest-800);
    box-shadow: 0 4px 12px rgba(23, 59, 51, 0.25);
}

.vn-scale__segment:has(input:focus-visible) {
    outline: 3px solid var(--vn-action-link);
    outline-offset: 2px;
}

.vn-scale__ends {
    display: flex;
    justify-content: space-between;
    font-size: var(--vn-text-caption);
    color: var(--vn-text-secondary);
}

.vn-scale__descriptor {
    font-weight: 600;
    margin-top: var(--vn-space-2xs);
}

/* == Cards, spent by role (specs/34 section 2.4) ======================== */

.vn-card-quiet {
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-md);
    background: var(--vn-bg-surface);
    padding: var(--vn-space-md);
}

.vn-card-raised {
    border-radius: var(--vn-radius-lg);
    background: var(--vn-sand-100, #F5EEDF);
    padding: var(--vn-space-lg);
    box-shadow: 0 6px 24px rgba(23, 59, 51, 0.10), 0 1px 2px rgba(23, 59, 51, 0.06);
}

/* The "Your vet" card in clinic mode. */
.vn-vet {
    display: flex;
    align-items: center;
    gap: var(--vn-space-sm);
}

.vn-vet__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--vn-bg-brand);
    color: var(--vn-text-on-brand);
    font-family: var(--vn-font-display);
    font-weight: 700;
    flex: none;
}

.vn-vet__name {
    font-weight: 600;
}

/* == Lists of things the owner added ==================================== */

.vn-added {
    display: grid;
    gap: var(--vn-space-xs);
    margin: 0 0 var(--vn-space-md);
    padding: 0;
    list-style: none;
}

.vn-added li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vn-space-sm);
    padding: var(--vn-space-sm) var(--vn-space-md);
    border: 1px solid var(--vn-border-hairline);
    border-radius: var(--vn-radius-md);
    background: var(--vn-bg-surface);
}

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

.vn-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--vn-space-xs);
    align-items: center;
}

.vn-results {
    display: grid;
    gap: var(--vn-space-xs);
    margin-top: var(--vn-space-sm);
}

.vn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vn-space-xs);
}

.vn-chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--vn-text-caption);
    font-weight: 600;
}

.vn-chip--info { background: var(--vn-info-tint); color: var(--vn-info-ink); }
.vn-chip--neutral { background: var(--vn-cream-200); color: var(--vn-ink-600); }
.vn-chip--warning { background: var(--vn-warning-tint); color: var(--vn-warning-ink); }

/* == Buttons ============================================================ */

.vn-btn,
.vn-btn-quiet,
.vn-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 20px;
    border-radius: var(--vn-radius-md);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.vn-btn {
    background: var(--vn-action-primary);
    color: var(--vn-text-on-brand);
    border: 0;
}

.vn-btn:hover { background: var(--vn-action-primary-hover); }
.vn-btn:active { transform: scale(0.98); }
.vn-btn[disabled] { opacity: 0.4; cursor: default; }

.vn-btn-quiet {
    background: transparent;
    color: var(--vn-action-primary);
    border: 1.5px solid var(--vn-action-primary);
}

.vn-btn-ghost {
    background: transparent;
    color: var(--vn-text-secondary);
    border: 0;
    min-height: 48px;
    padding: 10px 12px;
}

.vn-btn-ghost:hover,
.vn-btn-quiet:hover {
    text-decoration: underline;
}

.vn-btn-small {
    min-height: 40px;
    padding: 8px 14px;
    font-size: var(--vn-text-caption);
}

/* == The pet card and the profile (PO-P12a) ============================= */

.vn-pet {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--vn-space-md);
    align-items: start;
}

/* The pet's introduction on the health profile: label and value, one per row. */
.vn-facts-list {
    margin: var(--vn-space-md) 0 0;
    display: grid;
    gap: var(--vn-space-xs);
}

.vn-facts-list__row {
    display: grid;
    grid-template-columns: minmax(6rem, 30%) 1fr;
    gap: var(--vn-space-sm);
}

.vn-facts-list dt {
    color: var(--vn-text-secondary);
}

.vn-facts-list dd {
    margin: 0;
    font-weight: 600;
}

/* The breed's photo, from the shared reference store. A photograph of the breed, never
   presented as the owner's pet, so it sits with the breed's content, not in the pet card. */
.vn-breed-photo {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--vn-radius-md);
    margin: var(--vn-space-md) 0;
}

/* The photo and its credit travel together (specs/37 F11): the credit is a licence
   obligation, so it sits directly beneath the photo rather than in a footer. */
.vn-breed-figure {
    margin: var(--vn-space-md) 0;
    max-width: 420px;
}

.vn-breed-figure .vn-breed-photo {
    margin: 0;
}

.vn-breed-photo__credit {
    margin: 4px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--vn-text-secondary);
}

.vn-breed-photo__credit a {
    color: inherit;
    text-decoration: underline;
}

.vn-pet__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--vn-forest-800);
    color: var(--vn-cream-050);
    font-family: var(--vn-font-display);
    font-weight: 800;
    font-size: 26px;
}

.vn-pet__name {
    font-family: var(--vn-font-display);
    font-weight: 800;
    font-size: var(--vn-text-title);
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 var(--vn-space-2xs);
}

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

.vn-pet__nums {
    display: flex;
    gap: var(--vn-space-md);
    margin-top: var(--vn-space-xs);
}

.vn-num {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--vn-forest-800);
}

.vn-num small {
    font-size: 12px;
    color: var(--vn-text-secondary);
    margin-left: 2px;
    font-weight: 400;
}

.vn-ring {
    display: flex;
    align-items: center;
    gap: var(--vn-space-md);
}

.vn-ring svg {
    flex: none;
}

.vn-bars {
    display: grid;
    gap: var(--vn-space-md);
}

.vn-bar {
    display: grid;
    gap: var(--vn-space-2xs);
}

.vn-bar__head {
    display: flex;
    justify-content: space-between;
    gap: var(--vn-space-sm);
    font-weight: 600;
}

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

.vn-bar__track {
    position: relative;
    height: 10px;
    border-radius: 5px;
    background: var(--vn-cream-200);
}

.vn-bar__present {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background: var(--vn-forest-600);
}

.vn-bar__optimal {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--vn-accent-clay);
    transform: translateX(-50%);
}

.vn-bar__values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vn-space-sm);
    font-size: var(--vn-text-caption);
}

.vn-bar__values .vn-overline {
    font-size: 10px;
    margin: 0;
}

.vn-pred {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vn-pred li {
    display: grid;
    gap: var(--vn-space-2xs);
    padding: var(--vn-space-sm) 0;
    border-bottom: 1px solid var(--vn-border-hairline);
}

.vn-pred__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vn-space-sm);
    font-weight: 600;
}

.vn-hr {
    border: 0;
    border-top: 1px solid var(--vn-border-hairline);
    margin: var(--vn-space-xl) 0;
}

/* == Dark ================================================================

    Walked class by class on 2026-09-03 (specs/34 AC15). Every rule below
    exists because the light value is a fixed palette step that has no dark
    meaning: a forest fill that vanishes on a night ground, cream text on a
    pale forest, an ink-blue consequence line. The two selector forms follow
    vetnexus-tokens.css - the OS preference, and the explicit data-vn-theme
    toggle - so the switch wins in both directions.
*/

@media (prefers-color-scheme: dark) {
    :root:not([data-vn-theme="light"]) .vn-meter__track { background: var(--vn-night-600); }
    :root:not([data-vn-theme="light"]) .vn-meter__fill { background: var(--vn-forest-400); }
    :root:not([data-vn-theme="light"]) .vn-unit label:has(input:checked) { background: var(--vn-forest-400); color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-choice:has(input:checked) { background: var(--vn-forest-700); border-color: var(--vn-forest-300); }
    :root:not([data-vn-theme="light"]) .vn-choice__check { color: var(--vn-forest-300); }
    :root:not([data-vn-theme="light"]) .vn-choice__consequence { color: var(--vn-info-tint); }
    :root:not([data-vn-theme="light"]) .vn-scale__segment:has(input:checked) { background: var(--vn-forest-400); color: var(--vn-ink-900); border-color: var(--vn-forest-400); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
    :root:not([data-vn-theme="light"]) .vn-card-raised { background: var(--vn-night-700); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
    :root:not([data-vn-theme="light"]) .vn-vet__logo { background: var(--vn-forest-400); color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-btn { color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-pet__avatar { background: var(--vn-forest-400); color: var(--vn-ink-900); }
    :root:not([data-vn-theme="light"]) .vn-num { color: var(--vn-forest-200); }
    :root:not([data-vn-theme="light"]) .vn-bar__track { background: var(--vn-night-600); }
    :root:not([data-vn-theme="light"]) .vn-bar__present { background: var(--vn-forest-400); }
    :root:not([data-vn-theme="light"]) .vn-chip--neutral { background: var(--vn-night-600); color: var(--vn-ink-200); }
}

:root[data-vn-theme="dark"] .vn-meter__track { background: var(--vn-night-600); }
:root[data-vn-theme="dark"] .vn-meter__fill { background: var(--vn-forest-400); }
:root[data-vn-theme="dark"] .vn-unit label:has(input:checked) { background: var(--vn-forest-400); color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-choice:has(input:checked) { background: var(--vn-forest-700); border-color: var(--vn-forest-300); }
:root[data-vn-theme="dark"] .vn-choice__check { color: var(--vn-forest-300); }
:root[data-vn-theme="dark"] .vn-choice__consequence { color: var(--vn-info-tint); }
:root[data-vn-theme="dark"] .vn-scale__segment:has(input:checked) { background: var(--vn-forest-400); color: var(--vn-ink-900); border-color: var(--vn-forest-400); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
:root[data-vn-theme="dark"] .vn-card-raised { background: var(--vn-night-700); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
:root[data-vn-theme="dark"] .vn-vet__logo { background: var(--vn-forest-400); color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-btn { color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-pet__avatar { background: var(--vn-forest-400); color: var(--vn-ink-900); }
:root[data-vn-theme="dark"] .vn-num { color: var(--vn-forest-200); }
:root[data-vn-theme="dark"] .vn-bar__track { background: var(--vn-night-600); }
:root[data-vn-theme="dark"] .vn-bar__present { background: var(--vn-forest-400); }
:root[data-vn-theme="dark"] .vn-chip--neutral { background: var(--vn-night-600); color: var(--vn-ink-200); }

@media (prefers-reduced-motion: reduce) {
    .vn-meter__fill,
    .vn-btn {
        transition: none;
    }
}