/*
 * Connected Municipality check-up.
 *
 * Restyling: change the settings in the first :root block. Everything below
 * uses them. All rules are scoped to .cm-checkup so the theme's styles and
 * these don't leak into each other.
 */

/* Inter, served from the plugin so visitors' browsers don't contact Google.
 * One static file per weight used here (400, 500, 600, 700), Latin characters
 * (including French accents). Static rather than variable files so printed
 * and saved PDFs keep real, copyable text. A new weight needs its own file
 * and @font-face. Licence: assets/fonts/inter/LICENSE.txt (SIL OFL 1.1). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2");
}

/* ------------------------------------------------------------------
 * Settings (design tokens)
 * ------------------------------------------------------------------ */
:root {
    /* Brand, from the Connected Municipality logo. */
    --cm-navy: #083a63;
    --cm-blue: #0b72b8;
    --cm-green: #0b7a66;

    /* Surfaces and text. */
    --cm-page: #f3f8fc;
    --cm-surface: #ffffff;
    --cm-surface-tint: #e3f0fa;
    --cm-text: #0b2f4f;
    --cm-text-soft: #33475b;
    --cm-text-muted: #4a5f73;
    --cm-border: #d5e2ee;
    --cm-border-strong: #c9d8e6;
    --cm-focus: #0b72b8;

    /* Lanes. */
    --cm-lane-understand: #0b72b8;
    --cm-lane-find: #0b7a66;
    --cm-lane-do: #b8860b;
    --cm-lane-take-part: #6b4fa0;
    --cm-lane-behind: #4e5d6c;

    /* Darker lane shades for lane-coloured text (4.5:1 on white). */
    --cm-lane-understand-ink: #0a5f99;
    --cm-lane-find-ink: #0b6b5a;
    --cm-lane-do-ink: #855f00;
    --cm-lane-take-part-ink: #5b4290;
    --cm-lane-behind-ink: #4e5d6c;

    /* Priority levels. Each always appears with its word. */
    --cm-prio-notreq: #6b7885;
    --cm-prio-optional: #2f8a4f;
    --cm-prio-preferred: #e2a626;
    --cm-prio-preferred-text: #3b2a00;
    --cm-prio-critical: #c0392b;

    /* Widest the check-up content gets on large screens. */
    --cm-content-max: 1320px;

    /* Answer tones. Each always appears with a word, never colour alone. */
    --cm-good-bg: #0b7a66;
    --cm-good-text: #ffffff;
    --cm-mixed-bg: #f5d27a;
    --cm-mixed-text: #3b2a00;
    --cm-gap-bg: #b5472b;
    --cm-gap-text: #ffffff;
    --cm-unsure-bg: #e6ecf2;
    --cm-unsure-text: #33475b;
    --cm-empty-border: #b9c9d9;

    /* Type. */
    --cm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --cm-size-display: clamp(2.25rem, 5vw, 3.375rem);
    --cm-size-h1: clamp(1.75rem, 3.4vw, 2.5rem);
    --cm-size-question: clamp(1.5rem, 2.8vw, 2.125rem);
    --cm-size-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
    --cm-size-body: 1rem;
    --cm-size-small: 0.875rem;

    /* Shape and space. */
    --cm-radius: 10px;
    --cm-radius-lg: 16px;
    --cm-gutter: clamp(16px, 4vw, 48px);
    --cm-shadow: 0 12px 32px rgba(8, 58, 99, 0.08);
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
body.cm-checkup-body {
    margin: 0;
    background: var(--cm-page);
}

.cm-checkup {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cm-page);
    color: var(--cm-text);
    font-family: var(--cm-font);
    font-size: var(--cm-size-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

.cm-checkup a {
    color: var(--cm-navy);
}

.cm-checkup a:hover {
    color: var(--cm-blue);
}

.cm-checkup :focus-visible {
    outline: 3px solid var(--cm-focus);
    outline-offset: 2px;
}

.cm-checkup h1,
.cm-checkup h2,
.cm-checkup h3,
.cm-checkup p,
.cm-checkup ul,
.cm-checkup ol,
.cm-checkup fieldset {
    margin: 0;
}

.cm-checkup h1:focus {
    outline: none;
}

.cm-checkup ul,
.cm-checkup ol {
    padding: 0;
    list-style: none;
}

.cm-checkup fieldset {
    border: 0;
    padding: 0;
    min-width: 0;
}

.cm-visually-hidden,
.cm-checkup .cm-answer__input,
.cm-checkup .cm-chip__input {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.cm-checkup .cm-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cm-skip {
    position: absolute;
    left: -10000px;
    top: 8px;
    z-index: 10;
    padding: 12px 16px;
    background: var(--cm-surface);
    border-radius: var(--cm-radius);
}

.cm-skip:focus {
    left: 8px;
}

.cm-checkup-noscript {
    padding: var(--cm-gutter);
}

/* ------------------------------------------------------------------
 * Header and progress
 * ------------------------------------------------------------------ */
.cm-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 16px var(--cm-gutter);
    background: var(--cm-surface);
    border-bottom: 1px solid var(--cm-border);
}

.cm-checkup .cm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--cm-navy);
    font-weight: 700;
    font-size: 1.125rem;
}

.cm-brand__mark {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cm-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.cm-checkup .cm-header__link {
    text-decoration: none;
}

.cm-checkup .cm-header__link:hover {
    text-decoration: underline;
}

.cm-header__status {
    color: var(--cm-text-muted);
}

.cm-header__status.is-error {
    color: #a23022;
    font-weight: 600;
}

.cm-checkup .cm-progress {
    display: flex;
    gap: 8px;
    padding: 24px var(--cm-gutter) 0;
}

.cm-progress__lane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cm-progress__track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--cm-border);
    overflow: hidden;
}

.cm-progress__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--cm-lane-color, var(--cm-navy));
}

.cm-progress__label {
    position: relative;
    font-size: 0.8125rem;
    color: var(--cm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-progress__lane.is-current .cm-progress__label {
    color: var(--cm-text);
    font-weight: 700;
}

/* Lane colours feed --cm-lane-color for bars, swatches and eyebrows. */
.cm-lane--lane-understand { --cm-lane-color: var(--cm-lane-understand); --cm-lane-ink: var(--cm-lane-understand-ink); }
.cm-lane--lane-find { --cm-lane-color: var(--cm-lane-find); --cm-lane-ink: var(--cm-lane-find-ink); }
.cm-lane--lane-do { --cm-lane-color: var(--cm-lane-do); --cm-lane-ink: var(--cm-lane-do-ink); }
.cm-lane--lane-take-part { --cm-lane-color: var(--cm-lane-take-part); --cm-lane-ink: var(--cm-lane-take-part-ink); }
.cm-lane--lane-behind-the-scenes { --cm-lane-color: var(--cm-lane-behind); --cm-lane-ink: var(--cm-lane-behind-ink); }
.cm-lane--final { --cm-lane-color: var(--cm-navy); }

/* ------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------ */
.cm-main {
    flex-grow: 1;
    width: 100%;
    padding: 40px var(--cm-gutter) 64px;
}

.cm-main:focus {
    outline: none;
}

.cm-narrow {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cm-split {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

.cm-split__main {
    flex: 1 1 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cm-split__aside,
.cm-panel {
    flex: 0 1 420px;
    min-width: min(100%, 300px);
}

.cm-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
}

.cm-hero__copy {
    flex: 1 1 480px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cm-stack-sm {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-stack-lg {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ------------------------------------------------------------------
 * Type
 * ------------------------------------------------------------------ */
.cm-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cm-blue);
}

.cm-eyebrow--muted {
    color: var(--cm-text-muted);
}

.cm-eyebrow--lane {
    color: var(--cm-lane-ink, var(--cm-blue));
}

.cm-checkup .cm-display,
.cm-checkup .cm-h1 {
    font-weight: 700;
    color: var(--cm-navy);
    letter-spacing: -0.01em;
}

.cm-checkup .cm-display {
    font-size: var(--cm-size-display);
    line-height: 1.08;
}

.cm-checkup .cm-h1 {
    font-size: var(--cm-size-h1);
    line-height: 1.15;
}

.cm-checkup .cm-h1--question {
    font-size: var(--cm-size-question);
    line-height: 1.2;
}

.cm-checkup .cm-h3 {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cm-text);
}

.cm-lead {
    font-size: var(--cm-size-lead);
    color: var(--cm-text-soft);
}

.cm-lead--accent {
    font-weight: 600;
    color: var(--cm-green);
}

.cm-meta,
.cm-fineprint,
.cm-field__hint,
.cm-legend__hint,
.cm-panel__hint {
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-optional {
    font-weight: 500;
    color: var(--cm-text-muted);
}

/* ------------------------------------------------------------------
 * Buttons and links
 * ------------------------------------------------------------------ */
.cm-checkup .cm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: var(--cm-radius);
    border: 2px solid transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}

.cm-checkup .cm-btn--primary {
    background: var(--cm-navy);
    border-color: var(--cm-navy);
    color: #ffffff;
}

.cm-checkup .cm-btn--primary:hover {
    background: var(--cm-blue);
    border-color: var(--cm-blue);
    color: #ffffff;
}

.cm-checkup .cm-btn--secondary {
    background: var(--cm-surface);
    border-color: var(--cm-border-strong);
    color: var(--cm-navy);
}

.cm-checkup .cm-btn--secondary:hover {
    border-color: var(--cm-navy);
    color: var(--cm-navy);
}

.cm-checkup .cm-btn--link {
    min-height: 44px;
    padding: 8px 0;
    background: none;
    color: var(--cm-navy);
    text-decoration: underline;
}

.cm-checkup .cm-btn--icon {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--cm-surface);
    border-color: var(--cm-border-strong);
    color: var(--cm-navy);
    font-size: 1.125rem;
}

.cm-checkup .cm-btn--large {
    padding: 18px 32px;
    font-size: 1.125rem;
}

.cm-checkup .cm-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.cm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.cm-checkup .cm-tryit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: var(--cm-radius);
    background: var(--cm-surface-tint);
    color: var(--cm-navy);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.cm-checkup .cm-tryit:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Cards, alerts, pills
 * ------------------------------------------------------------------ */
.cm-card,
.cm-panel {
    background: var(--cm-surface);
    border: 1px solid var(--cm-border);
    border-radius: var(--cm-radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cm-panel {
    box-shadow: var(--cm-shadow);
}

.cm-alert {
    padding: 14px 16px;
    border-radius: var(--cm-radius);
    border-left: 4px solid currentColor;
    font-weight: 500;
}

.cm-alert--error {
    background: #fbe6df;
    color: #7a2a16;
}

.cm-alert--info {
    background: var(--cm-surface-tint);
    color: var(--cm-navy);
}

/* "You're updating your answers", above every in-progress screen */
.cm-update-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: var(--cm-content-max);
    margin: 0 auto 28px;
}

.cm-update-note__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.cm-checkup .cm-update-note__links a {
    color: inherit;
    font-weight: 600;
}

.cm-pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cm-navy);
    background: var(--cm-surface-tint);
    padding: 4px 10px;
    border-radius: 999px;
}

.cm-rule {
    border: 0;
    border-top: 1px solid var(--cm-border);
    margin: 4px 0;
}

.cm-ticks {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--cm-text-soft);
}

.cm-ticks li {
    display: flex;
    gap: 12px;
}

.cm-ticks li::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--cm-green);
}

/* Sample snapshot on the arrival screen. */
.cm-sample {
    flex: 0 1 440px;
    box-shadow: var(--cm-shadow);
}

.cm-sample__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cm-sample__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-sample__lane {
    width: 96px;
    font-size: var(--cm-size-small);
    font-weight: 600;
}

.cm-sample__bars {
    display: flex;
    flex-grow: 1;
    gap: 6px;
}

.cm-sample__bar {
    flex: 1;
    height: 28px;
    border-radius: 6px;
}

.cm-sample__title {
    font-weight: 600;
}

.cm-sample__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: cm-sample;
}

.cm-sample__list li {
    display: flex;
    gap: 12px;
    counter-increment: cm-sample;
}

.cm-sample__list li::before {
    content: counter(cm-sample);
    font-weight: 700;
    color: var(--cm-blue);
}

/* ------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */
.cm-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cm-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cm-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-field__label {
    font-size: 0.9375rem;
    font-weight: 600;
}

.cm-field__label--muted {
    color: var(--cm-text-muted);
}

.cm-checkup input[type="text"],
.cm-checkup input[type="email"],
.cm-checkup textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: var(--cm-radius);
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
    color: var(--cm-text);
    font-family: inherit;
    font-size: 1rem;
    box-shadow: none;
}

.cm-checkup textarea {
    resize: vertical;
}

.cm-checkup input[type="text"]:focus,
.cm-checkup input[type="email"]:focus,
.cm-checkup textarea:focus {
    border-color: var(--cm-navy);
    outline: 3px solid var(--cm-focus);
    outline-offset: 1px;
}

.cm-checkup ::placeholder {
    color: #6b7f92;
}

.cm-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    padding: 0;
}

/* Tailor: service cards and role chips. */
.cm-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-choice {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
    cursor: pointer;
}

.cm-choice:has(input:checked) {
    border-color: var(--cm-navy);
}

.cm-choice input {
    width: 22px;
    height: 22px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--cm-navy);
}

.cm-choice__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cm-choice__title {
    font-weight: 600;
}

.cm-choice__hint {
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cm-chip {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
    font-weight: 500;
    cursor: pointer;
}

.cm-chip:has(input:checked) {
    background: var(--cm-navy);
    border-color: var(--cm-navy);
    color: #ffffff;
    font-weight: 600;
}

.cm-chip:has(input:focus-visible) {
    outline: 3px solid var(--cm-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Situation screen
 * ------------------------------------------------------------------ */
.cm-answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.cm-answer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
    cursor: pointer;
}

.cm-answer:hover {
    border-color: var(--cm-navy);
}

.cm-answer__title {
    font-size: 1.0625rem;
    font-weight: 700;
}

.cm-answer__hint {
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-answer:has(input:checked) {
    background: var(--cm-navy);
    border-color: var(--cm-navy);
    color: #ffffff;
}

.cm-answer:has(input:checked) .cm-answer__hint {
    color: #d7e6f3;
}

.cm-answer:has(input:focus-visible) {
    outline: 3px solid var(--cm-focus);
    outline-offset: 2px;
}

.cm-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px 10px 12px;
    border-radius: var(--cm-radius);
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
    font-weight: 500;
    cursor: pointer;
}

.cm-toggle__input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--cm-navy);
}

.cm-toggle:has(input:checked) {
    border-color: var(--cm-navy);
}

.cm-good p {
    color: var(--cm-text);
}

/* "Your site, so far" panel. */
.cm-panel__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-panel__lane {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-panel__lane-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--cm-size-small);
    font-weight: 700;
}

.cm-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--cm-lane-color);
}

.cm-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cm-checkup .cm-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    padding: 9px 12px;
    border-radius: var(--cm-radius);
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1.25;
}

.cm-tile__name {
    font-size: 0.8125rem;
    font-weight: 700;
}

.cm-tile__status {
    font-size: 0.75rem;
}

.cm-checkup .cm-tile.is-current {
    box-shadow: 0 0 0 3px var(--cm-navy);
}

.cm-panel__footnote {
    padding-top: 14px;
    border-top: 1px solid var(--cm-border);
    font-size: 0.8125rem;
    color: var(--cm-text-muted);
}

/* Answer tones, shared by tiles, tags and the sample snapshot. */
.cm-checkup .cm-tile--good { background: var(--cm-good-bg); color: var(--cm-good-text); border-color: var(--cm-good-bg); }
.cm-checkup .cm-tile--mixed { background: var(--cm-mixed-bg); color: var(--cm-mixed-text); border-color: #e0b445; }
.cm-checkup .cm-tile--gap { background: var(--cm-gap-bg); color: var(--cm-gap-text); border-color: var(--cm-gap-bg); }
.cm-checkup .cm-tile--unsure { background: var(--cm-unsure-bg); color: var(--cm-unsure-text); border: 2px dashed #8ea3b8; }
.cm-checkup .cm-tile--empty { background: var(--cm-surface); color: var(--cm-text-muted); border: 2px dashed var(--cm-empty-border); }

/* ------------------------------------------------------------------
 * Top three
 * ------------------------------------------------------------------ */
.cm-candidates {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-candidate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 2px solid var(--cm-border-strong);
    background: var(--cm-surface);
}

.cm-candidate.is-chosen {
    border-color: var(--cm-navy);
}

.cm-candidate__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1 1 260px;
}

.cm-candidate__title {
    font-weight: 700;
}

.cm-candidate__badge {
    font-size: var(--cm-size-small);
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cm-checkup .cm-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border-width: 0;
}

.cm-tag--flag {
    background: var(--cm-surface-tint);
    color: var(--cm-navy);
}

.cm-checkup .cm-tag--lane {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cm-page);
    color: var(--cm-text-soft);
}

.cm-tag--lane::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--cm-lane-color);
}

.cm-chosen {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-chosen__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 14px;
    align-items: start;
    padding: 14px;
    border-radius: 12px;
    background: var(--cm-page);
}

.cm-chosen__num {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--cm-navy);
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cm-chosen__title {
    font-weight: 700;
    padding-top: 4px;
}

.cm-chosen__tools {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ------------------------------------------------------------------
 * Question screen (22 Oct redesign): picture beside the question,
 * "Try it" tasks, icon answer tiles, Low / Medium / High, lighter panel.
 * The lane colour is the one accent on each screen.
 * ------------------------------------------------------------------ */
.cm-main > .cm-split,
.cm-checkup .cm-progress {
    width: 100%;
    max-width: var(--cm-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* An empty error slot shouldn't add a gap. */
.cm-split__main > div:empty {
    display: none;
}

.cm-split--question .cm-split__main {
    flex-basis: 600px;
    max-width: 880px;
    gap: 28px;
}

/* Question screen columns: the question on the left; "Try it on your
 * website" above the progress panel on the right. On narrower screens the
 * site box comes first, above the question, and the panel last. */
.cm-split--question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    grid-template-areas:
        "main site"
        "main panel";
    grid-template-rows: auto 1fr;
    gap: 16px 48px;
    align-items: start;
}

.cm-split--question > .cm-split__main { grid-area: main; }
.cm-split--question > .cm-site-box { grid-area: site; }
.cm-split--question > .cm-panel { grid-area: panel; }

/* Without a website there is no site box, so the panel takes the top. */
.cm-split--question:not(:has(> .cm-site-box)) {
    grid-template-areas: "main panel";
    grid-template-rows: auto;
}

@media (max-width: 999px) {
    .cm-split--question,
    .cm-split--question:not(:has(> .cm-site-box)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "site"
            "main"
            "panel";
        grid-template-rows: auto;
    }

    .cm-split--question > .cm-site-box {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
}

/* "Section: Engage · Question 14 of 22" */
.cm-checkup .cm-q__position {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cm-lane-ink, var(--cm-blue));
}

.cm-q__position .cm-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cm-q__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.cm-q__intro.has-art {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
}

.cm-q__art {
    margin: 0;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: color-mix(in srgb, var(--cm-lane-color, var(--cm-blue)) 12%, #ffffff);
}

.cm-q__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cm-eyebrow--lane {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cm-eyebrow--lane .cm-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* "For example": the try-it tasks under the question */
.cm-examples {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-left: 4px solid var(--cm-lane-color, var(--cm-blue));
    border-radius: 0 var(--cm-radius) var(--cm-radius) 0;
    background: color-mix(in srgb, var(--cm-lane-color, var(--cm-blue)) 6%, #ffffff);
}

.cm-checkup .cm-examples__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cm-text);
}

.cm-checkup .cm-examples__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-left: 1.25em;
    list-style: disc;
}

/* "Try it on your website": one box, same place on every question */
.cm-site-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid color-mix(in srgb, var(--cm-lane-color, var(--cm-blue)) 25%, #ffffff);
    border-radius: var(--cm-radius-lg);
    background: color-mix(in srgb, var(--cm-lane-color, var(--cm-blue)) 6%, #ffffff);
}

.cm-site-box__text {
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-checkup .cm-btn--outline {
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 999px;
    border-color: var(--cm-lane-color, var(--cm-navy));
    background: var(--cm-surface);
    color: var(--cm-lane-ink, var(--cm-navy));
}

.cm-checkup .cm-btn--outline:hover {
    background: var(--cm-lane-ink, var(--cm-navy));
    color: #ffffff;
}

/* Answer tiles with icons */
.cm-split--question .cm-answers {
    gap: 12px;
}

.cm-split--question .cm-answer {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 14px 18px;
    border-width: 1px;
    border-color: var(--cm-border);
}

.cm-split--question .cm-answer:hover {
    border-color: var(--cm-lane-color, var(--cm-navy));
}

.cm-answer__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eef2f5;
    color: var(--cm-text-muted);
}

.cm-answer__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cm-split--question .cm-answer:has(input:checked) {
    background: color-mix(in srgb, var(--cm-lane-color, var(--cm-navy)) 8%, #ffffff);
    border: 2px solid var(--cm-lane-color, var(--cm-navy));
    padding: 13px 17px;
    color: var(--cm-text);
}

.cm-split--question .cm-answer:has(input:checked) .cm-answer__hint {
    color: var(--cm-text-muted);
}

.cm-split--question .cm-answer:has(input:checked) .cm-answer__icon {
    background: var(--cm-lane-color, var(--cm-navy));
    color: #ffffff;
}

.cm-lane--lane-do .cm-answer:has(input:checked) .cm-answer__icon {
    color: #2b1f00;
}

/* Low / Medium / High */
.cm-priority-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.cm-priority-ask[hidden] {
    display: none;
}

.cm-priority-ask__legend {
    float: left;
    margin-right: 20px;
    padding: 0;
    font-weight: 600;
}

.cm-prio-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #eef2f5;
}

.cm-prio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 600;
    color: var(--cm-text-soft);
    cursor: pointer;
}

.cm-checkup .cm-prio__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cm-prio__dot,
.cm-prio-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cm-prio--notreq .cm-prio__dot,
.cm-prio-dot--notreq { background: var(--cm-prio-notreq); }
.cm-prio--optional .cm-prio__dot,
.cm-prio-dot--optional { background: var(--cm-prio-optional); }
.cm-prio--preferred .cm-prio__dot,
.cm-prio-dot--preferred { background: var(--cm-prio-preferred); }
.cm-prio--critical .cm-prio__dot,
.cm-prio-dot--critical { background: var(--cm-prio-critical); }

.cm-prio:has(input:checked) { color: #ffffff; }
.cm-prio:has(input:checked) .cm-prio__dot { background: #ffffff; }
.cm-prio--notreq:has(input:checked) { background: var(--cm-prio-notreq); }
.cm-prio--optional:has(input:checked) { background: var(--cm-prio-optional); }
.cm-prio--preferred:has(input:checked) { background: var(--cm-prio-preferred); color: var(--cm-prio-preferred-text); }
.cm-prio--preferred:has(input:checked) .cm-prio__dot { background: var(--cm-prio-preferred-text); }
.cm-prio--critical:has(input:checked) { background: var(--cm-prio-critical); }

.cm-priority-ask__hint {
    flex-basis: 100%;
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-prio:has(input:focus-visible) {
    outline: 3px solid var(--cm-focus);
    outline-offset: 2px;
}

.cm-checkup .cm-prio__clear {
    min-height: 40px;
    padding: 0 12px;
    font-size: var(--cm-size-small);
}

.cm-checkup .cm-prio__clear[hidden] {
    display: none;
}

/* Priority words in tags and lists */
.cm-checkup .cm-tag--prio { color: #ffffff; border-color: transparent; }
.cm-checkup .cm-prio-tag--notreq { background: var(--cm-prio-notreq); }
.cm-checkup .cm-prio-tag--optional { background: var(--cm-prio-optional); }
.cm-checkup .cm-prio-tag--preferred { background: var(--cm-prio-preferred); color: var(--cm-prio-preferred-text); }
.cm-checkup .cm-prio-tag--critical { background: var(--cm-prio-critical); }

/* Note and "when it's working well" */
.cm-split--question .cm-checkup textarea,
.cm-split--question textarea {
    border-radius: 14px;
}

.cm-good {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    border-radius: var(--cm-radius-lg);
    background: #f4f6f8;
}

.cm-good__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--cm-prio-optional);
}

.cm-checkup .cm-good__link {
    font-weight: 600;
}

.cm-actions--split {
    justify-content: space-between;
}

/* Progress panel */
.cm-panel--progress {
    gap: 16px;
    padding: 22px;
    background: #f4f6f8;
    border: 0;
    box-shadow: none;
}

.cm-split--question .cm-panel--progress {
    position: sticky;
    top: 16px;
}

.cm-panel__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.cm-panel__count {
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-meter {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #dde3e8;
    overflow: hidden;
}

.cm-meter__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--cm-navy);
}

.cm-planes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cm-plane__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.cm-plane .cm-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.cm-plane.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 6px;
    padding: 12px;
    border-radius: 14px;
    background: var(--cm-surface);
}

.cm-checkup .cm-plane__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 6px;
    font-size: 0.9375rem;
}

.cm-plane__count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--cm-text-muted);
}

.cm-checkup .cm-plane__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--cm-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.cm-checkup .cm-plane__item:hover {
    background: #f4f6f8;
}

.cm-checkup .cm-plane__item.is-current {
    background: color-mix(in srgb, var(--cm-lane-color, var(--cm-navy)) 10%, #ffffff);
    font-weight: 600;
}

.cm-plane__status {
    flex: none;
    font-size: 0.75rem;
    color: #6b7885;
}

.cm-plane__item.is-answered .cm-plane__status {
    color: var(--cm-text-soft);
    font-weight: 600;
}

.cm-plane__status.cm-prio-text--critical { color: #a23022; }
.cm-plane__status.cm-prio-text--preferred { color: #7a5600; }
.cm-plane__status.cm-prio-text--optional { color: #24713f; }
.cm-plane__status.cm-prio-text--notreq { color: #55616d; }

.cm-checkup .cm-plane--closed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--cm-text);
    font: inherit;
    font-size: 0.9375rem;
    text-align: left;
    cursor: pointer;
}

.cm-checkup .cm-plane--closed:hover {
    background: #e9edf1;
}

.cm-dots {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.cm-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid #aab5c0;
}

.cm-dot.is-done {
    border-color: var(--cm-lane-color, var(--cm-navy));
    background: var(--cm-lane-color, var(--cm-navy));
}

/* Desktop shows progress in the panel, so the top bar only appears on narrow screens. */
@media (min-width: 1000px) {
    .cm-checkup:has(.cm-split--question) .cm-progress {
        display: none;
    }
}

/* Finish screen */
.cm-review-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cm-checkup .cm-review-group__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.0625rem;
    font-weight: 700;
}

.cm-review-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-review-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    padding: 14px 18px;
    border: 1px solid var(--cm-border);
    border-radius: 14px;
    background: var(--cm-surface);
}

.cm-review-item__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cm-review-item__title {
    font-weight: 600;
}

.cm-checkup .cm-review-item__change {
    font-weight: 600;
}

@media (max-width: 760px) {
    .cm-q__intro.has-art {
        grid-template-columns: minmax(0, 1fr);
    }

    .cm-q__art {
        order: -1;
        max-width: 220px;
        aspect-ratio: 4 / 3;
    }

    .cm-priority-ask__legend {
        float: none;
        width: 100%;
    }
}

/* ------------------------------------------------------------------
 * Small screens and motion
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
    .cm-answers {
        grid-template-columns: minmax(0, 1fr);
    }

    .cm-progress__label {
        font-size: 0.6875rem;
    }

    .cm-hero {
        gap: 40px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cm-checkup .cm-btn,
    .cm-answer,
    .cm-choice,
    .cm-chip,
    .cm-progress__fill {
        transition: background-color 0.15s ease, border-color 0.15s ease, width 0.3s ease;
    }
}

/* ------------------------------------------------------------------
 * Question images (optional, set per situation or per lane)
 * ------------------------------------------------------------------ */
.cm-question-image {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: var(--cm-radius-lg);
    background: var(--cm-surface-tint);
}

.cm-checkup .cm-toggle--block {
    align-self: stretch;
    align-items: flex-start;
}

/* ------------------------------------------------------------------
 * Snapshot
 * ------------------------------------------------------------------ */
.cm-report {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cm-report__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-report__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cm-checkup .cm-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cm-navy);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--cm-border);
}

.cm-report__intro {
    color: var(--cm-text-muted);
}

.cm-summary {
    font-size: var(--cm-size-lead);
    color: var(--cm-text);
}

.cm-sitems {
    display: flex;
    flex-direction: column;
    gap: 12px;
    --cm-tier-color: var(--cm-border-strong);
}

.cm-sitems--critical { --cm-tier-color: var(--cm-prio-critical); }
.cm-sitems--preferred { --cm-tier-color: var(--cm-prio-preferred); }
.cm-sitems--optional { --cm-tier-color: var(--cm-prio-optional); }

.cm-sitem {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid var(--cm-border);
    border-left: 5px solid var(--cm-tier-color);
    border-radius: var(--cm-radius);
    background: var(--cm-surface);
}

.cm-sitem--full {
    padding: 18px 22px;
}

.cm-sitem--line {
    display: block;
    padding: 10px 18px;
}

.cm-checkup .cm-sitem__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--cm-navy);
}

.cm-sitem__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: var(--cm-size-small);
    color: var(--cm-text-muted);
}

.cm-checkup .cm-sitem__label {
    margin-right: 4px;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cm-navy);
}

.cm-sitem__line strong {
    color: var(--cm-navy);
}

.cm-checkup .cm-more {
    font-weight: 600;
    white-space: nowrap;
}

.cm-checkup .cm-quote {
    margin: 0;
    padding: 2px 0 2px 12px;
    border-left: 3px solid var(--cm-border-strong);
    color: var(--cm-text-soft);
    font-style: italic;
}

/* "You also asked": the finish screen's open question, in Next step */
.cm-asked {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.cm-checkup .cm-asked__label {
    font-weight: 600;
}

.cm-checkup .cm-asked .cm-quote {
    white-space: pre-line;
}

.cm-checkup .cm-report__credit {
    margin-top: 8px;
    text-align: center;
}

.cm-namelist {
    color: var(--cm-text-soft);
}

.cm-checkup .cm-talk {
    list-style: decimal;
    padding-left: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cm-print-only {
    display: none;
}

@media print {
    @page {
        margin: 14mm 14mm 16mm;
    }

    html:has(body.cm-checkup-body) {
        font-size: 12.5px;
    }

    body.cm-checkup-body,
    .cm-checkup {
        background: #ffffff;
    }

    .cm-header__nav,
    .cm-progress,
    .cm-skip,
    .cm-no-print {
        display: none !important;
    }

    .cm-print-only {
        display: block;
        color: var(--cm-text-soft);
    }

    .cm-main {
        padding: 0;
    }

    .cm-report {
        max-width: none;
        gap: 24px;
    }

    .cm-report__section {
        gap: 8px;
    }

    .cm-checkup .cm-h2 {
        font-size: 1.35rem;
        padding-bottom: 4px;
        break-after: avoid;
    }

    /* Print: an open list instead of boxes. A coloured dot marks each
       item's priority, thin grey lines separate items, and the section
       heading is underlined in the tier's colour. */
    .cm-report__section:has(.cm-sitems--critical) { --cm-section-color: var(--cm-prio-critical); }
    .cm-report__section:has(.cm-sitems--preferred) { --cm-section-color: var(--cm-prio-preferred); }
    .cm-report__section:has(.cm-sitems--optional) { --cm-section-color: var(--cm-prio-optional); }

    .cm-checkup .cm-report__section .cm-h2 {
        border-bottom-color: var(--cm-section-color, var(--cm-border));
    }

    .cm-sitems {
        gap: 0;
    }

    .cm-sitem,
    .cm-sitem--full,
    .cm-sitem--line {
        position: relative;
        padding: 10px 0 10px 18px;
        gap: 6px;
        border: 0;
        border-bottom: 1px solid var(--cm-border);
        border-radius: 0;
        background: none;
        break-inside: avoid;
    }

    .cm-sitem:last-child {
        border-bottom: 0;
    }

    .cm-sitem::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 15px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cm-tier-color);
    }

    .cm-checkup .cm-h2,
    .cm-sitem::before,
    .cm-tag--lane::before {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}