/* ---- Brand ----------------------------------------------------------------------------------
   NextSteps Research: green wordmark with a red step. The two colours are sampled from the logo
   itself (wwwroot/img/nsr-logo.png), so anything drawn beside it agrees with it. The darker green
   is the link colour the 2019 application used; kept because it clears WCAG AA on white where the
   logo green (3.9:1) does not.

   Bootstrap is retinted rather than rebuilt: the survey already leans on --bs-success for its
   accents, so pointing that token at the brand green carries the whole survey page with it. */

:root {
    --nsr-green: #008f50;
    --nsr-green-dark: #1b5e20;
    --nsr-green-darker: #144a19;
    --nsr-red: #ee2b32;

    --bs-success: var(--nsr-green);
    --bs-success-rgb: 0, 143, 80;
    --bs-link-color: var(--nsr-green-dark);
    --bs-link-color-rgb: 27, 94, 32;
    --bs-link-hover-color: var(--nsr-green-darker);
    --bs-link-hover-color-rgb: 20, 74, 25;
}

.btn-primary {
    --bs-btn-bg: var(--nsr-green-dark);
    --bs-btn-border-color: var(--nsr-green-dark);
    --bs-btn-hover-bg: var(--nsr-green-darker);
    --bs-btn-hover-border-color: var(--nsr-green-darker);
    --bs-btn-active-bg: var(--nsr-green-darker);
    --bs-btn-active-border-color: var(--nsr-green-darker);
    --bs-btn-disabled-bg: var(--nsr-green-dark);
    --bs-btn-disabled-border-color: var(--nsr-green-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--nsr-green-dark);
    --bs-btn-border-color: var(--nsr-green-dark);
    --bs-btn-hover-bg: var(--nsr-green-dark);
    --bs-btn-hover-border-color: var(--nsr-green-dark);
    --bs-btn-active-bg: var(--nsr-green-dark);
    --bs-btn-active-border-color: var(--nsr-green-dark);
}

.progress-bar {
    background-color: var(--nsr-green);
}

/* Selected answer buttons. The survey renders its options as btn-outline-secondary; the checked
   state takes the brand so a completed page reads as the practice's, not as grey Bootstrap. */
.survey-options .btn-check:checked + .btn {
    background-color: var(--nsr-green-dark);
    border-color: var(--nsr-green-dark);
    color: #fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem var(--nsr-green);
}

.form-control:focus, .form-select:focus {
    border-color: var(--nsr-green);
}

/* ---- Page frame ------------------------------------------------------------------------------- */

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 64px;   /* room for the fixed footer */
}

.brand-bar {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

/* 720×200 source, shown at a fifth of that. Height is fixed so the navbar cannot jump while the
   image loads, and the width follows from the aspect ratio. */
.brand-logo {
    height: 40px;
    width: auto;
}

.brand-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    letter-spacing: .01em;
    border-left: 1px solid var(--bs-border-color);
    padding-left: 1rem;
    line-height: 1.2;
}

/* On a phone the two elements together overflow the bar; the words go, the logo stays. */
@media (max-width: 575.98px) {
    .brand-title {
        display: none;
    }
}

.navbar .nav-link {
    color: var(--bs-body-color);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--nsr-green-dark);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 1.4;
    padding: 1rem 0;
    font-size: .875rem;
}

/* ---- Front door (Pages/Index) -------------------------------------------------------------- */

.front-door-lead {
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--nsr-green-darker);
    max-width: 30rem;
}

.front-door-lead::after {
    content: "";
    display: block;
    width: 4rem;
    height: .25rem;
    background: var(--nsr-red);
    margin-top: 1.25rem;
}

.front-door-body {
    max-width: 42rem;
}

.front-door-actions .btn {
    min-width: 12rem;
}

/* ---- Candidate survey (Pages/Client/Index) ------------------------------------------------ */

.survey-header {
    padding: 1rem 0 1.5rem;
    border-bottom: 2px solid var(--bs-success);
    margin-bottom: 1rem;
}

.survey-header .progress {
    height: .5rem;
}

/* ---- Readable measure -----------------------------------------------------------------------
   Question text runs to 141 characters, and page 5 has a 90th percentile of 119. Across a full
   Bootstrap container that is a 140-character line, roughly twice the length the eye tracks
   comfortably. The prose column is capped; the option grid below is not, so the six-button scale
   still has room. */

.survey-header,
.survey-section,
.survey-question > legend,
.survey-question > p,
.survey-question .form-text {
    max-width: 42rem;
}

/* ---- The section heading follows the candidate down the page ---------------------------------
   These headings are not decoration: they are where the scale is explained — "1 being Strongly
   Disagree and 6 being Strongly Agree". There are 8 of them across 227 questions, and page 5 puts
   86 questions under one heading, so it leaves the screen within seconds and every question after
   that is answered from memory.

   Nothing new is shown. The instruction already on the page simply stays on it.

   It reads as a card rather than as page background on purpose: pinned text that shares the
   background of the questions beneath it looks like a rendering fault rather than a fixture. */

.survey-section {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-left: .25rem solid var(--bs-success);
    border-radius: .375rem;
    padding: .875rem 1.125rem;
    margin: 2.5rem 0 1.5rem;
}

.survey-section-title {
    margin-bottom: .35rem;
    letter-spacing: .01em;
}

/* Sticky on every screen size. The first rule here was "medium breakpoint up — on a phone, three
   lines of permanently occupied screen costs more than the reminder is worth". The first phone
   click-through (2026-09-07) said otherwise: the scale explanation is what the candidate needs while
   scrolling and it was the one thing that left. So it pins everywhere, and the candidate can fold it
   to a single line (it is a <details>) once they have it.

   The z-index has to clear the answer controls beneath it, which raise themselves on focus. */

.survey-section {
    position: sticky;
    top: .5rem;
    z-index: 20;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .1);
}

.survey-section-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.survey-section-summary::-webkit-details-marker {
    display: none;
}

/* A small chevron that turns, so the fold reads as a fold. */
.survey-section-summary::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-right: 2px solid var(--nsr-green-dark);
    border-bottom: 2px solid var(--nsr-green-dark);
    transform: rotate(45deg);
    transition: transform .15s;
    flex: none;
}

.survey-section:not([open]) .survey-section-summary::before {
    transform: rotate(-45deg);
}

@media (max-width: 767.98px) {
    .survey-section {
        padding: .625rem .875rem;
        font-size: .875rem;
        top: 0;
        border-radius: 0 0 .375rem .375rem;
    }
}

/* The group is what bounds the sticky heading. Without it every heading pins to the top of the
   whole form, so they pile up and none of them ever releases. */
.survey-group {
    position: relative;
}

/* ---- One question at a time -------------------------------------------------------------------
   86 questions in a single scroll is the case to design for. The separation between them matters
   more than it would on a short form: a candidate whose eye slips a row answers the wrong
   question and nothing about the result will ever look wrong. */

.survey-question {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.survey-question legend {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: .75rem;
}

/* Keyboard focus has to be visible on the label, because the input it belongs to is hidden by
   btn-check. Without this the control is reachable by keyboard and invisible while you use it.

   Positioned so the raised z-index applies at all — it is ignored on a static element — and kept
   well below the pinned heading, which the outline was otherwise drawing through. */
.survey-options .btn-check:focus-visible + .btn {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
}

/* A required question left blank, flagged after a submit attempt. */
.survey-question.is-missing {
    border-left: 4px solid var(--bs-danger);
    padding-left: .75rem;
}

.survey-footer {
    padding: 1.5rem 0 3rem;
    text-align: center;
}

/* ---- Answer options -------------------------------------------------------------------------
   The instrument asks 166 radio questions and 102 of them offer the bare numbers 1 to 6. As
   form-check circles those are roughly 16px, under the 44px WCAG 2.5.5 minimum, and page 5 puts 86
   of them in a single scroll. These rules restyle the label of a real radio input, so the control
   grows without the markup becoming anything a keyboard or screen reader handles differently. */

.survey-options {
    display: grid;
    gap: .5rem;
}

.survey-options .btn {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
}

/* Numbered scales: one row, equal columns. */
.survey-options-scale {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.survey-options-scale .btn {
    font-size: 1.05rem;
}

/* Two phrases: side by side where there is room, stacked where there is not. */
.survey-options-pair {
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .survey-options-pair {
        grid-template-columns: 1fr 1fr;
    }
}

.survey-options-pair .btn,
.survey-options-list .btn {
    justify-content: flex-start;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* The words at each end of a numbered scale. Only rendered when ShowScaleAnchors is on. */
.survey-anchors {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    margin-bottom: .35rem;
}

/*
    Environment banner. Rendered only when the environment is not production — see
    Services/EnvironmentMarker.cs for why the absence of this strip has to mean "live".

    Deliberately full width and above the header rather than inside it: the point is that it is
    seen without being looked for, by someone who came here to do something else.
*/
.environment-banner {
    padding: .35rem 1rem;
    text-align: center;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .12em;
}