@charset "UTF-8";
/* ==========================================================================
   The Cybersecurity Scorecard. Loads after site.css and only adds to it:
   every color, face, size, space and easing is a site token, and every
   component that already exists on the site (.mast, .label, .display-2,
   .leadgap, .stages, .field, .btn) is used as it is.

   ONE DEVICE. The Heights mark is two strokes climbing to a point, and the
   site cuts its ink chapters with that diagonal. Here it is the whole idea:

     THE ASCENT   a hard-edged ink plane with a diagonal top. On the brief it
                  is composition. In the stage it is the climb: the plane
                  rises one question at a time. On the reveal it stops at
                  the score's height. There is no scale, no bar, no ticks.

   Everything is prefixed sv- so nothing here can reach the chrome.

     1. The brief
     2. The stage frame
     3. Questions
     4. Details, scoring, errors
     5. The reveal
     6. Motion
     7. Responsive
   ========================================================================== */

/* 1. The brief ============================================================ */

/* The ascent: the diagonal plane, a polygon so the edge is an edge. */
.sv-ascent {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sv-ascent--mast {
    background: rgba(255, 255, 255, 0.03);
    clip-path: polygon(48% 100%, 100% 6%, 100% 100%);
}

.sv-ascent--chapter {
    background: rgba(255, 255, 255, 0.03);
    clip-path: polygon(58% 100%, 100% 0, 100% 100%);
}

/* The page's two voices: a small accent eyebrow, and a display line set
   a weight lighter than the rest of the site, two lines, a full stop. */
.sv-eyebrow {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--accent);
}

.sv-h2 {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--t-d1);
    font-weight: var(--w-medium);
    letter-spacing: var(--track-display);
    line-height: 1.04;
}

/* --- Masthead ----------------------------------------------------------- */

.sv-mast__inner {
    padding-block: clamp(2rem, 6vw, 5rem) var(--s-4);
}

.sv-mast__title {
    margin-top: var(--s-6);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7.6cqw, 6.75rem);
    font-weight: var(--w-medium);
    letter-spacing: var(--track-mega);
    line-height: 0.98;
}

.sv-mast__lede {
    margin-top: var(--s-8);
    max-width: 56ch;
    font-size: var(--t-lede-lg);
    line-height: 1.55;
    color: var(--fg-2);
}

.sv-mast__actions {
    margin-top: var(--s-10);
}

.sv-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-8);
    list-style: none;
    margin: var(--s-8) 0 0;
    padding: 0;
    font-size: var(--t-small);
    color: var(--fg-3);
}

.sv-assurances li {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.sv-assurances li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background: var(--accent);
    flex: none;
}

/* --- Figures ------------------------------------------------------------ */

.sv-figures {
    background: var(--paper);
    color: var(--fg);
    padding-block: var(--chapter-tight);
}

.sv-figures__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-8) var(--gutter);
}

.sv-figure dt {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5.2vw, 5rem);
    font-weight: var(--w-medium);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-mega);
    line-height: 0.95;
    color: var(--accent);
}

.sv-figure dt small {
    margin-inline: 0.12em;
    font-size: 0.34em;
    font-weight: var(--w-medium);
    letter-spacing: 0;
    vertical-align: 0.15em;
}

.sv-figure dd {
    margin: var(--s-4) 0 0;
    font-size: var(--t-small);
    font-weight: var(--w-semibold);
    color: var(--fg);
}

.sv-figure dd span {
    display: block;
    margin-top: var(--s-1);
    font-weight: var(--w-regular);
    color: var(--fg-3);
}

/* --- What you receive --------------------------------------------------- */

.sv-receive {
    background: var(--paper-pure);
}

.sv-head {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--s-6) var(--gutter);
    align-items: end;
}

.sv-head__side {
    max-width: 30ch;
    font-size: var(--t-body);
    line-height: var(--lead-body);
    color: var(--fg-2);
    justify-self: end;
}

.sv-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-8) var(--gutter);
    list-style: none;
    margin: var(--s-16) 0 0;
    padding: 0;
}

/* The short bar: the section's one mark, in the accent, the lift and the
   haze, so the three read as one deliverable in three parts. */
.sv-outcome::before {
    content: "";
    display: block;
    width: 2rem;
    height: 3px;
    background: var(--accent);
    margin-bottom: var(--s-6);
}

.sv-outcome:nth-child(2)::before { background: var(--signal-lift); }
.sv-outcome:nth-child(3)::before { background: var(--mist); }

.sv-outcome__title {
    font-family: var(--font-display);
    font-size: var(--t-d3);
    font-weight: var(--w-medium);
    letter-spacing: var(--track-tight);
    line-height: 1.2;
}

.sv-outcome__body {
    margin-top: var(--s-3);
    font-size: var(--t-small);
    line-height: var(--lead-loose);
    color: var(--fg-2);
}

/* --- Coverage ----------------------------------------------------------- */

.sv-coverage {
    background: var(--paper);
}

/* One soft field, no border: a change of field is the site's depth. */
.sv-panel {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-10) var(--gutter);
    align-items: start;
    padding: clamp(1.5rem, 4vw, 4rem);
    background: var(--limestone);
    color: var(--fg);
}

.sv-panel__lede {
    margin-top: var(--s-6);
    max-width: 44ch;
    font-size: var(--t-body);
    line-height: var(--lead-body);
    color: var(--fg-2);
}

.sv-panel__actions {
    margin-top: var(--s-8);
}

.sv-domains {
    list-style: none;
    margin: 0;
    padding: var(--s-3) clamp(1.25rem, 2.5vw, 2.5rem);
    background: var(--paper-pure);
}

.sv-domain {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-2) var(--s-8);
    align-items: baseline;
    padding-block: var(--s-5);
}

.sv-domain + .sv-domain {
    border-top: var(--hair) solid var(--rule);
}

.sv-domain__title {
    font-family: var(--font-sans);
    font-size: var(--t-body);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-tight);
}

.sv-domain__body {
    font-size: var(--t-small);
    line-height: var(--lead-body);
    color: var(--fg-2);
}

/* --- Closing ------------------------------------------------------------ */

.sv-closing {
    position: relative;
    overflow: clip;
    background: var(--bg);
    color: var(--fg);
    padding-block: var(--chapter);
}

.sv-closing__inner {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-8) var(--gutter);
    align-items: end;
}

.sv-closing__note {
    margin-top: var(--s-6);
    max-width: 52ch;
    font-size: var(--t-small);
    line-height: var(--lead-loose);
    color: var(--fg-2);
}

.sv-closing__actions {
    justify-content: flex-end;
}

/* 2. The stage frame ====================================================== */

.sv-stage {
    display: none;
    background: var(--paper);
    color: var(--fg);
}

.sv-stage.is-open {
    display: block;
}

body.sv-open .sv-brief {
    display: none;
}

.sv-stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gutter);
    align-items: start;
    padding-block: calc(var(--chrome-header) + var(--s-10)) var(--chapter);
}

.sv-stage[data-step="results"] .sv-stage__inner {
    display: none;
}

/* --- The side: state, the climb, the exit ------------------------------ */

.sv-side {
    position: sticky;
    top: calc(var(--chrome-header) + var(--s-10));
    display: flex;
    flex-direction: column;
    height: min(calc(100vh - var(--chrome-header) - var(--s-10) - var(--chapter)), 38rem);
    min-height: 26rem;
}

.sv-side__state {
    margin-top: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.sv-side__n {
    font-family: var(--font-display);
    font-size: var(--t-d2);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-display);
    line-height: 1.02;
    font-variant-numeric: tabular-nums;
}

.sv-side__of {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--fg-3);
}

/* The climb. A vertical hairline is the elevation; the plane rises against
   it. Its top is cut at a fixed cap so the diagonal keeps one angle at any
   height, which is what makes it the mark's stroke and not a bar. */
/* The track: one bar per question, stacked from the bottom, so the
   column fills as the visitor climbs through the twenty. An answered bar
   is ink and as long as the answer was strong (a quarter to the full
   width), so the column becomes a silhouette of the program as it is
   built; the current question is the accent; the rest wait. */
.sv-track {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
    width: 100%;
    max-width: 18rem;
    min-height: 10rem;
    margin: var(--s-8) 0;
    padding: 0;
    list-style: none;
}

.sv-track__seg {
    --v: 0;
    flex: 1 1 0;
    width: 100%;
    background: var(--limestone-deep);
    transition: background-color var(--dur) var(--ease), width var(--dur-slow) var(--ease-out);
}

.sv-track__seg.is-answered {
    width: calc(var(--v) * 25%);
    background: var(--ink-100);
}

.sv-track__seg.is-current {
    width: 100%;
    background: var(--signal);
}

.sv-side__exit {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* --- The pane ----------------------------------------------------------- */

.sv-pane {
    max-width: 46rem;
    padding-top: var(--s-2);
}

.sv-step {
    display: none;
}

.sv-step.is-active {
    display: block;
}

.sv-kicker {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--fg-3);
}

.sv-title,
.sv-question {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--t-d1);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-display);
    line-height: 1.06;
    text-wrap: balance;
}

.sv-title:focus,
.sv-title:focus-visible,
.sv-question:focus,
.sv-question:focus-visible {
    outline: none;
    box-shadow: none;
}

.sv-help {
    margin-top: var(--s-5);
    max-width: 52ch;
    font-size: var(--t-lede);
    line-height: 1.6;
    color: var(--fg-2);
}

.sv-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-10);
}

/* 3. Questions ============================================================ */

.sv-options {
    margin-top: var(--s-10);
    border-top: var(--hair) solid var(--rule-2);
}

.sv-option {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    width: 100%;
    padding: var(--s-5) var(--s-3) var(--s-5) 0;
    background: none;
    border: 0;
    border-bottom: var(--hair) solid var(--rule);
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--t-lede);
    line-height: 1.45;
    color: var(--fg-2);
    cursor: pointer;
    transition: color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.sv-option:hover {
    color: var(--fg);
    transform: translateX(var(--s-2));
}

.sv-option:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
}

.sv-option__key {
    position: relative;
    padding-top: 0.42em;
    font-size: var(--t-micro);
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--fg-3);
    transition: color var(--dur) var(--ease);
}

.sv-option:hover .sv-option__key {
    color: var(--accent);
}

.sv-option.is-selected {
    color: var(--fg);
    font-weight: var(--w-semibold);
    transform: translateX(var(--s-2));
}

.sv-option.is-selected .sv-option__key {
    color: transparent;
}

.sv-option.is-selected .sv-option__key::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.8em;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
}

.sv-keyhint {
    margin-top: var(--s-5);
    font-size: var(--t-micro);
    color: var(--fg-3);
}

.sv-keyhint kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: 0.05em 0.35em;
    border: var(--hair) solid var(--rule-2);
    font-family: var(--font-sans);
    font-size: 0.85em;
    text-align: center;
    color: var(--fg-2);
}

/* 4. Details, scoring, errors ============================================ */

.sv-form {
    margin-top: var(--s-8);
}

.sv-form .field__error:empty {
    display: none;
}

.sv-form .field--consent .field__error {
    grid-column: 1 / -1;
}

.sv-form__error {
    margin-top: var(--s-6);
}

.sv-stage[data-step="loading"] .sv-track__seg {
    animation: sv-breathe 2.2s var(--ease) infinite alternate;
}

/* 5. The reveal =========================================================== */

.sv-result {
    display: none;
}

.sv-result.is-active {
    display: block;
}

.sv-cover {
    position: relative;
    overflow: clip;
    background: var(--bg);
    color: var(--fg);
    padding-block: calc(var(--chrome-header) + var(--chapter)) var(--chapter);
}



.sv-cover__inner {
    position: relative;
    z-index: var(--z-content);
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--s-12) var(--gutter);
    align-items: end;
}

.sv-cover__title {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--t-d1);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-display);
    line-height: 1.06;
    text-wrap: balance;
}

.sv-cover__title:focus,
.sv-cover__title:focus-visible {
    outline: none;
    box-shadow: none;
}

.sv-cover__facts {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-6) var(--s-8);
    margin-top: var(--s-10);
    padding-top: var(--s-6);
    border-top: var(--hair) solid var(--rule);
}

.sv-cover__facts dt {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--fg-3);
}

.sv-cover__facts dd {
    margin: var(--s-2) 0 0;
    font-size: var(--t-small);
    font-variant-numeric: tabular-nums;
    color: var(--fg-2);
}

.sv-reading {
    justify-self: end;
    text-align: right;
}

.sv-reading__label {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--fg-3);
}

.sv-reading__figure {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--s-4);
    margin-top: var(--s-2);
}

.sv-reading__n {
    font-family: var(--font-display);
    font-size: clamp(7rem, 20vw, 17rem);
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.06em;
    line-height: 0.86;
}

.sv-reading__of {
    font-size: var(--t-micro);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--fg-3);
}

/* The band decides the color of the reading: the site's error red, a
   caution amber, the site's success green. Nothing else uses them. */
.sv-cover {
    --band: var(--signal-lift);
}

.sv-cover[data-tone="elevated"] { --band: #d2473b; }
.sv-cover[data-tone="moderate"] { --band: #d99a2b; }
.sv-cover[data-tone="lower"]    { --band: #4fae7a; }

.sv-cover .sv-reading__n {
    color: var(--band);
}

.sv-reading__band {
    display: inline-block;
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-4);
    background: var(--band);
    color: var(--ink-000);
    font-size: var(--t-small);
    font-weight: var(--w-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sv-reading__headline {
    margin-top: var(--s-5);
    font-family: var(--font-display);
    font-size: var(--t-d2);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-display);
    line-height: 1.08;
    color: var(--band);
}

.sv-reading__meaning {
    margin: var(--s-3) 0 0 auto;
    max-width: 38ch;
    font-size: var(--t-body);
    line-height: var(--lead-body);
    color: var(--fg-2);
}

/* The scale. The three bands at their true widths, in their colors, dimmed
   except the one the score falls in; the marker carries the number. */
.sv-scale {
    position: relative;
    margin-top: var(--s-12);
    padding-top: var(--s-8);
}

.sv-scale__bands {
    display: flex;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sv-scale__band {
    --zone: var(--haze);
    flex: 1 1 0;
    padding-top: var(--s-3);
    border-top: 10px solid var(--zone);
    opacity: 0.45;
    transition: opacity var(--dur) var(--ease);
}

.sv-scale__band[data-span="40"] { flex-grow: 40; }
.sv-scale__band[data-span="30"] { flex-grow: 30; }
.sv-scale__band[data-span="31"] { flex-grow: 31; }

.sv-scale__band[data-tone="elevated"] { --zone: #d2473b; }
.sv-scale__band[data-tone="moderate"] { --zone: #d99a2b; }
.sv-scale__band[data-tone="lower"]    { --zone: #4fae7a; }

.sv-cover[data-tone="elevated"] .sv-scale__band[data-tone="elevated"],
.sv-cover[data-tone="moderate"] .sv-scale__band[data-tone="moderate"],
.sv-cover[data-tone="lower"] .sv-scale__band[data-tone="lower"] {
    opacity: 1;
}

.sv-scale__name {
    display: block;
    font-size: var(--t-small);
    font-weight: var(--w-semibold);
    color: var(--fg);
}

.sv-scale__range {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--t-micro);
    font-variant-numeric: tabular-nums;
    color: var(--fg-3);
}

.sv-scale__marker {
    position: absolute;
    top: 0;
    left: var(--sv-score, 0%);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: left 900ms var(--ease-out);
}

.sv-scale__marker span {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
    color: var(--fg);
}

.sv-scale__marker::after {
    content: "";
    width: 2px;
    height: calc(var(--s-8) - 0.75rem + 10px);
    margin-top: 0.25rem;
    background: #ffffff;
}

/* --- The written assessment -------------------------------------------- */

.sv-report__index ol {
    list-style: none;
    margin: var(--s-6) 0 0;
    padding: 0;
    border-top: var(--hair) solid var(--rule-2);
}

.sv-report__index li {
    border-bottom: var(--hair) solid var(--rule);
}

.sv-report__index li {
    padding-block: var(--s-3);
    font-size: var(--t-small);
    font-weight: var(--w-semibold);
    color: var(--fg);
}

.sv-report__emailed {
    margin-top: var(--s-8);
    font-size: var(--t-micro);
    line-height: var(--lead-body);
    color: var(--fg-3);
}

.sv-analysis {
    max-width: var(--w-text);
}

.sv-analysis h3 {
    margin-top: var(--s-12);
    padding-top: var(--s-5);
    border-top: var(--hair) solid var(--rule-2);
    font-family: var(--font-sans);
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    letter-spacing: var(--track-nano);
    text-transform: uppercase;
    color: var(--fg-3);
    scroll-margin-top: calc(var(--chrome-header) + var(--s-6));
}

.sv-analysis h3:first-child {
    margin-top: 0;
}

.sv-analysis p {
    margin-top: var(--s-4);
    font-size: var(--t-body);
    line-height: var(--lead-body);
    color: var(--fg-2);
}

.sv-analysis ul,
.sv-analysis ol {
    list-style: none;
    margin: var(--s-4) 0 0;
    padding: 0;
    counter-reset: sv-rank;
}

.sv-analysis li {
    position: relative;
    padding: var(--s-3) 0 var(--s-3) 2.75rem;
    border-top: var(--hair) solid var(--rule);
    font-size: var(--t-body);
    line-height: var(--lead-body);
    color: var(--fg-2);
}

.sv-analysis li:last-child {
    border-bottom: var(--hair) solid var(--rule);
}

.sv-analysis ul li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.25rem;
    inset-block-start: calc(var(--s-3) + 0.55em);
    width: 0.55rem;
    height: 0.55rem;
    background: var(--ink-100);
}

.sv-analysis ol li::before {
    counter-increment: sv-rank;
    content: counter(sv-rank, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: calc(var(--s-3) + 0.35em);
    font-size: var(--t-nano);
    font-weight: var(--w-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--track-label);
    color: var(--accent);
}

/* 6. Motion =============================================================== */

.sv-step.is-active .sv-question,
.sv-step.is-active .sv-options {
    animation: sv-arrive var(--dur-reveal) var(--ease-out) both;
}

.sv-step.is-active .sv-options {
    animation-delay: 60ms;
}

@keyframes sv-arrive {
    from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes sv-breathe {
    from { opacity: 1; }
    to   { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .sv-track__seg,

    .sv-option {
        transition: none;
    }
    .sv-step.is-active .sv-question,
    .sv-step.is-active .sv-options,
    .sv-stage[data-step="loading"] .sv-track__seg {
        animation: none;
    }
}

/* 7. Responsive =========================================================== */

@media (max-width: 64rem) {
    .sv-figures__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .sv-head__side {
        justify-self: start;
    }

    .sv-outcomes {
        grid-template-columns: minmax(0, 1fr);
        margin-top: var(--s-10);
    }

    .sv-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .sv-domain {
        grid-template-columns: minmax(0, 1fr);
    }

    .sv-closing__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .sv-closing__actions {
        justify-content: flex-start;
    }

    .sv-stage__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-8);
        min-height: 0;
        padding-block: calc(var(--chrome-header) + var(--s-8)) var(--chapter-tight);
    }

    .sv-side {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "head exit" "climb climb";
        align-items: end;
        gap: var(--s-5) var(--s-6);
        height: auto;
        min-height: 0;
    }

    .sv-side__head { grid-area: head; }
    .sv-side__exit { grid-area: exit; align-self: end; }

    .sv-side__state {
        flex-direction: row;
        align-items: baseline;
        gap: var(--s-3);
        margin-top: var(--s-3);
    }

    .sv-side__n {
        font-size: var(--t-d3);
    }

    /* On one column the track lies flat: the same twenty segments left
       to right. */
    .sv-track {
        grid-area: climb;
        flex-direction: row;
        width: 100%;
        min-height: 0;
        height: 6px;
        margin: 0;
    }

    .sv-pane {
        max-width: none;
        padding-top: 0;
    }

    .sv-keyhint {
        display: none;
    }

    .sv-cover__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s-10);
    }

    .sv-reading {
        justify-self: start;
        text-align: left;
    }

    .sv-reading__figure {
        justify-content: flex-start;
    }

    .sv-reading__meaning {
        margin-left: 0;
    }

    .sv-scale__name {
        font-size: var(--t-micro);
    }

    .sv-scale__range {
        display: none;
    }

    .sv-reading__n {
        font-size: clamp(6rem, 26vw, 11rem);
    }

    }

@media (max-width: 40rem) {
    .sv-mast__title {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    .sv-figures__row {
        gap: var(--s-8) var(--s-6);
    }

    .sv-grading__row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .sv-option {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        font-size: var(--t-body);
    }

    .sv-option:hover,
    .sv-option.is-selected {
        transform: none;
    }

    .sv-actions {
        margin-top: var(--s-8);
    }

    .sv-actions .btn {
        flex: 1 1 auto;
    }

    .sv-cover__facts {
        grid-auto-flow: row;
        grid-auto-columns: auto;
    }

    .sv-analysis li {
        padding-left: 2rem;
    }
}