/* ============================================================
   Tekoälyvalmiuden itsearviointi

   Loaded only on template-arviointi.php. Palette and type come from
   style.css — #f5f5f7 on #050814, #ff7a1a for accent, Inter at 400 and
   600 and nothing else. Any other weight silently resolves to one of
   those two, which reads in the source as if it did something.

   Two states share this file: the questions and the results. The
   enhanced form hides all but one question with CSS, so the no-JS
   layout is the default and the stepped one is the override.
   ============================================================ */

.sl-assessment-lede {
    max-width: 62ch;
}

.sl-assessment-summary {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.82);
    max-width: 58ch;
}

/* The letter sits above the title rather than inline: "Osio A" and the
   question it introduces are two different things to read, and running
   them together on one line makes the heading start with a label
   instead of a subject. */
.sl-assessment-section-letter {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 245, 247, 0.45);
}

.sl-assessment-error {
    margin-top: 24px;
    padding: 14px 18px;
    border-left: 2px solid #ff7a1a;
    background: rgba(255, 122, 26, 0.08);
    font-size: 15px;
}

/* ---- Sections ---- */

.sl-assessment-section {
    margin-top: 64px;
}

.sl-assessment-section-title {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 400;
    line-height: 1.25;
    color: #ff9a45;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 122, 26, 0.35);
}

/* ---- Questions ---- */

.sl-question {
    margin: 40px 0 0;
    padding: 0;
    border: 0;
}

.sl-question-text {
    display: block;
    padding: 0;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 400;
    line-height: 1.4;
    color: #f5f5f7;
    /* Questions run long and wrap often; balancing stops one breaking
       to a single orphaned word above its options. */
    text-wrap: balance;
}

.sl-question-text:focus {
    outline: none;
}

.sl-question-number {
    color: rgba(245, 245, 247, 0.4);
    margin-right: 6px;
}

.sl-question-hint {
    margin-top: 6px;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.55);
}

.sl-question-options {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* The whole row is the target, not the 16px control inside it. On a
   phone a label-sized hit area is the difference between answering
   seventeen questions and abandoning at four. */
.sl-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(245, 245, 247, 0.14);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.45;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.sl-option:hover {
    border-color: rgba(255, 122, 26, 0.5);
    background: rgba(255, 122, 26, 0.05);
}

.sl-option input {
    margin: 3px 0 0;
    flex: 0 0 auto;
    accent-color: #ff7a1a;
}

.sl-option:has(input:checked) {
    border-color: #ff7a1a;
    background: rgba(255, 122, 26, 0.1);
}

/* :has() is well supported now, but a browser without it must still
   show which option is selected — the native control does that on its
   own, so the fallback is simply the unstyled row. */
.sl-option input:focus-visible {
    outline: 2px solid #ff9a45;
    outline-offset: 3px;
}

.sl-option-text {
    flex: 1 1 auto;
}

.sl-question.is-missing .sl-question-text {
    color: #ffb86b;
}

.sl-question.is-missing .sl-question-options {
    border-left: 2px solid #ff7a1a;
    padding-left: 14px;
    margin-left: -16px;
}

/* ---- Enhanced: one question at a time ---- */

.sl-assessment-form.is-enhanced .sl-assessment-section:not(.is-current) {
    display: none;
}

.sl-assessment-form.is-enhanced .sl-question:not(.is-current) {
    display: none;
}

.sl-assessment-form.is-enhanced .sl-assessment-section {
    margin-top: 32px;
    min-height: 46vh;
}

.sl-assessment-chrome {
    position: sticky;
    top: 64px;
    z-index: 2;
    padding: 16px 0 12px;
    background: linear-gradient(#050814 76%, rgba(5, 8, 20, 0));
}

.sl-progress {
    height: 2px;
    background: rgba(245, 245, 247, 0.12);
    border-radius: 2px;
    overflow: hidden;
}

.sl-progress-bar {
    height: 100%;
    width: 0;
    background: #ff7a1a;
    /* transform/opacity only elsewhere in the theme; width is the one
       exception and it animates a 2px strip, not a layout. */
    transition: width 0.3s ease;
}

.sl-progress-text {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(245, 245, 247, 0.5);
}

/* The `hidden` attribute is only a rule in the browser's own
   stylesheet, so ANY author rule that sets `display` outranks it —
   and `.sl-button` sets `display: inline-block`. Without this,
   `button.hidden = true` sets the attribute, passes every assertion
   you could write, and changes nothing on screen. */
.sl-assessment [hidden] {
    display: none !important;
}

.sl-assessment-nav {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

/* The submit lives below the form for the no-JS path; the script moves
   it into the nav row so the last question reads as one control
   cluster — [Edellinen] [Katso tulos] — rather than a lone Edellinen
   with the real button orphaned underneath it. */
.sl-assessment-nav .sl-assessment-actions {
    margin-top: 0;
}

.sl-button-ghost {
    background: transparent;
    color: #f5f5f7;
    border-color: rgba(245, 245, 247, 0.28);
}

.sl-button-ghost:hover:not(:disabled) {
    border-color: rgba(245, 245, 247, 0.6);
}

.sl-button:disabled {
    opacity: 0.35;
    cursor: default;
}

.sl-assessment-actions {
    margin-top: 32px;
}

.sl-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Results ----
   One viewport, and deliberately small. This is a dashboard: the
   reader is comparing four numbers, not settling in to read, so the
   type runs a step or two below the site's article sizes throughout.
   Nothing here should push the email step below the fold. Four scores exist to be read against each
   other, and the bars are stacked so they share a left edge and the
   eye runs straight down them — four across meant every label had to
   survive a 150px column, and the long ones wrapped to three lines. */

/* The wrapper pads 120px to clear the fixed nav on ordinary pages.
   A results screen is a dashboard, not an article, and that much air
   above the title pushes the fourth bar off a laptop screen for
   nothing. */
.sl-page-wrap:has(.sl-results) {
    padding-top: 62px;
    padding-bottom: 48px;
}

/* Deliberately NOT .sl-page. That class carries the site's article
   typography — `.sl-page h2` is a class plus an element, so it outranks
   any single-class rule here no matter what size it names, and
   `.sl-page > * + *` adds a 1.4em gap between every section. Two
   rounds of "make it smaller" changed almost nothing because of it.
   The container styling is repeated here instead; the typography is
   not wanted. */
.sl-results {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Centred, title and subtitle together. Centring only the title would
   leave the line under it hanging off to one side; the two are one
   block. Everything below stays left-aligned — the bars are a table of
   numbers and centring those would break the shared left edge they
   are compared along. */
.sl-results-header {
    margin-bottom: 4px;
    text-align: center;
}

.sl-results-title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.sl-results-sub {
    margin-top: 3px;
    font-size: 13px;
    color: rgba(245, 245, 247, 0.55);
}

/* The headline finding. Louder than any single bar, because the
   combination is the result and the four numbers are the workings —
   but a notice, not a hero. */
.sl-results-profile {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 3px solid #ff7a1a;
    border-radius: 0 4px 4px 0;
    background: rgba(255, 122, 26, 0.07);
}

/* Same font, same row, same size as the profile name it introduces —
   the constant half of one sentence rather than a label above it. */
.sl-results-profile-prefix {
    color: rgba(245, 245, 247, 0.75);
}

.sl-results-profile-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: #ff9a45;
}

.sl-results-profile-lead {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 68ch;
}

.sl-results-axes {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Label, bar, score — three columns on one line. The bar column is a
   fixed width so all four bars start and end at the same x, which is
   the whole reason for stacking them. */
.sl-axis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px 92px;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 4px;
}

.sl-axis:nth-child(odd) {
    background: rgba(245, 245, 247, 0.03);
}

.sl-axis-bottleneck {
    background: rgba(255, 122, 26, 0.08);
    box-shadow: inset 2px 0 0 #ff7a1a;
}

.sl-axis-label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: #f5f5f7;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Replaces the separate "Tämä pysäyttää teidät ensimmäisenä" section,
   which restated a row the eye had already found — the highlight and
   the profile notice above both point at the same axis. A chip on the
   row itself says it once, in place. */
.sl-axis-flag {
    font-size: 11px;
    /* Not uppercased. "TÄRKEIN OSA-ALUEENNE" is twenty characters and
       caps add roughly a fifth to the width, which pushed the chip off
       the label's line. */
    color: #ff9a45;
    border: 1px solid rgba(255, 122, 26, 0.5);
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
}

.sl-axis-bar {
    display: flex;
    gap: 4px;
}

/* Five discrete steps rather than a continuous fill: the score is a
   band from one to five, and a smooth bar would imply a precision the
   instrument does not have. */
.sl-axis-step {
    flex: 1 1 0;
    height: 7px;
    border-radius: 2px;
    background: rgba(245, 245, 247, 0.12);
}

.sl-axis-step.is-filled {
    background: #ff7a1a;
}

.sl-axis-score {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-wrap: wrap;
}

.sl-axis-band {
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    color: #ff9a45;
}

.sl-axis-of {
    font-size: 13px;
    color: rgba(245, 245, 247, 0.45);
}

.sl-axis-name {
    flex: 1 0 100%;
    font-size: 11px;
    line-height: 1.3;
    color: rgba(245, 245, 247, 0.55);
}

/* ---- The explanations, on request ---- */

.sl-results-explain {
    margin-top: 16px;
    border: 1px solid rgba(245, 245, 247, 0.12);
    border-radius: 6px;
    padding: 4px 14px 8px;
}

.sl-results-explain h2 {
    margin: 6px 0 2px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(245, 245, 247, 0.5);
}

.sl-explain + .sl-explain {
    border-top: 1px solid rgba(245, 245, 247, 0.08);
}

.sl-explain summary {
    padding: 7px 0;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sl-explain summary::-webkit-details-marker {
    display: none;
}

/* A rotating chevron drawn in CSS rather than an icon font or an SVG
   sprite — one pseudo-element, nothing to load. */
.sl-explain summary::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #ff9a45;
    border-bottom: 1.5px solid #ff9a45;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
}

.sl-explain[open] summary::before {
    transform: rotate(45deg);
}

.sl-explain summary:focus-visible {
    outline: 2px solid #ff9a45;
    outline-offset: 2px;
}

.sl-explain p {
    padding: 0 0 10px 17px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.78);
    max-width: 66ch;
}

/* ---- Bottleneck and the next step ---- */

/* ---- The email step ----
   The same panel as the front-page signup: `rgba(10, 16, 34, 0.55)`
   behind a blue hairline, 14px corners. The form furniture inside it
   is style.css's too, since the markup carries `sl-newsletter-form`.
   Only the panel and the two notices are local.

   It was an orange-tinted box, which made the one part of the page
   that asks for something look like it came from a different site. */

/* 560px and centred, exactly like `.sl-newsletter` on the front page.
   The panel used to span the full 800px column while the form inside
   it stopped at 520 — so the card was much wider than anything in it,
   and the intro line ran well past the right edge of the fields it
   introduced. Sizing the card to the form settles all of that at once:
   the text can no longer be wider than the inputs, because the card
   is not. */
.sl-results-next {
    max-width: 560px;
    margin: 22px auto 0;
    padding: 26px 28px;
    border: 1px solid rgba(120, 180, 255, 0.18);
    border-radius: 14px;
    background: rgba(10, 16, 34, 0.55);
}

.sl-report-heading {
    margin: 0;
    font-size: clamp(21px, 2.5vw, 26px);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
}

/* No max-width of its own: the card governs it, which is what keeps it
   flush with the fields below. Left-aligned rather than centred —
   four lines of centred body text are measurably harder to read,
   because every line starts somewhere new. */
.sl-report-offer {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.75);
}

.sl-report-offer p + p {
    margin-top: 10px;
}


.sl-report-form {
    margin-top: 20px;
}

/* Hidden until the combined tick is ticked. `:has()` on the form is
   the whole mechanism — no script, so it cannot fail to open. */
.sl-report-topics {
    display: none;
}

.sl-report-form:has(#sl-report-subscribe:checked) .sl-report-topics {
    display: block;
}

.sl-report-preview-note {
    margin-top: 10px;
    font-size: 12px;
    color: #ffb86b;
}

.sl-report-status {
    margin-top: 10px;
    font-size: 14px;
    color: #ffb86b;
}

.sl-report-privacy {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.45);
}

.sl-report-privacy a {
    color: rgba(245, 245, 247, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sl-results-disclaimer {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid rgba(245, 245, 247, 0.1);
    font-size: 12px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.45);
    max-width: 70ch;
}

.sl-results-disclaimer a {
    color: rgba(245, 245, 247, 0.7);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sl-results-disclaimer a:hover {
    color: #ff9a45;
}

@media (max-width: 640px) {
    /* Label on its own line, bar and score beneath it. The bar keeps
       full width so the four still line up. */
    .sl-axis {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        padding: 10px 12px;
    }

    .sl-axis-label {
        grid-column: 1 / -1;
    }

    .sl-axis-score {
        justify-content: flex-end;
        text-align: right;
    }

    .sl-axis-name {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-option,
    .sl-progress-bar {
        transition: none;
    }
}

@media (max-width: 720px) {
    .sl-assessment-chrome {
        top: 56px;
    }

    .sl-results-profile {
        padding: 22px 20px;
    }

    .sl-axis {
        padding: 18px 18px;
    }

    .sl-assessment-nav {
        flex-direction: column-reverse;
    }

    .sl-assessment-nav .sl-button,
    .sl-assessment-actions .sl-button {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   The report — the released state of a result URL.
   ============================================================ */

.sl-report-link {
    margin-top: 40px;
    padding: 22px 24px;
    border: 1px dashed rgba(255, 122, 26, 0.5);
    border-radius: 6px;
}

.sl-report-link h2 {
    font-size: 18px;
    font-weight: 600;
    color: #ff9a45;
    border: 0;
    padding: 0;
}

.sl-report-url {
    margin-top: 12px;
    /* Tokens are 32 characters with no spaces, so a narrow viewport
       would push the page sideways without this. */
    word-break: break-all;
    font-size: 15px;
}

.sl-report-note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(245, 245, 247, 0.6);
}

.sl-report-axis {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 122, 26, 0.35);
}

.sl-report-axis h2 {
    font-size: clamp(21px, 2.6vw, 27px);
    font-weight: 400;
    line-height: 1.25;
    color: #f5f5f7;
}

.sl-report-axis-band {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: #ff9a45;
}

.sl-report-axis .sl-axis-bar {
    margin-top: 18px;
    max-width: 420px;
}

.sl-report-axis-flag {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 2px solid #ff7a1a;
    font-size: 15px;
    color: #ffb86b;
}

.sl-report-matrix,
.sl-report-limits {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 122, 26, 0.35);
}

.sl-report-matrix h2,
.sl-report-limits h2 {
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 400;
    color: #ff9a45;
}

.sl-report-matrix p,
.sl-report-limits p {
    margin-top: 14px;
    line-height: 1.6;
    max-width: 62ch;
}

/* Eighteen rows by four columns does not fit a phone. The table scrolls
   inside its own box rather than making the page scroll sideways. */
.sl-report-matrix-scroll {
    margin-top: 24px;
    overflow-x: auto;
}

.sl-report-matrix table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14px;
}

.sl-report-matrix th,
.sl-report-matrix td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(245, 245, 247, 0.1);
}

.sl-report-matrix thead th {
    font-weight: 600;
    color: rgba(245, 245, 247, 0.7);
    vertical-align: bottom;
}

.sl-report-matrix tbody th {
    font-weight: 400;
    color: rgba(245, 245, 247, 0.85);
}

.sl-report-matrix td {
    text-align: center;
    color: #ff7a1a;
}

/* ---- Print ----
   The kartoitus report is produced by printing an HTML template from a
   browser; this prints the same way, so a reader who wants a PDF uses
   Ctrl+P and gets one. Ink-on-paper rather than the dark ground: a
   full-bleed #050814 page is unreadable when printed and unkind to
   whoever owns the printer. */

@media print {
    .sl-noprint,
    .sl-site-header,
    .sl-site-footer,
    .sl-after-hero-stars {
        display: none !important;
    }

    .sl-report {
        color: #111;
    }

    .sl-report h1,
    .sl-report h2,
    .sl-report .sl-results-profile-name,
    .sl-report .sl-report-axis-band,
    .sl-report .sl-report-axis-flag {
        color: #111;
    }

    .sl-report .sl-results-profile {
        border-color: #666;
        background: none;
    }

    .sl-report .sl-axis-step {
        background: #ddd;
        border: 1px solid #999;
    }

    .sl-report .sl-axis-step.is-filled {
        background: #444;
    }

    .sl-report .sl-axis-desc,
    .sl-report .sl-results-sub {
        color: #333;
    }

    .sl-report-axis,
    .sl-report-matrix,
    .sl-report-limits {
        break-inside: avoid;
        border-top-color: #999;
    }

    .sl-report-matrix-scroll {
        overflow: visible;
    }

    .sl-report-matrix table {
        min-width: 0;
    }
}

/* The report is read rather than scanned, and it no longer inherits
   `.sl-page` either — so the sizes the article treatment used to give
   it are named here. */
.sl-report .sl-results-title {
    font-size: clamp(26px, 3.2vw, 36px);
}

.sl-report .sl-results-profile {
    margin-top: 28px;
    padding: 22px 26px;
    border: 1px solid rgba(255, 122, 26, 0.45);
    border-left-width: 3px;
    border-radius: 6px;
}

.sl-report .sl-results-profile-name {
    font-size: clamp(20px, 2.6vw, 26px);
}

.sl-report .sl-results-profile-lead {
    font-size: 16px;
    line-height: 1.55;
}

.sl-report .sl-results-observations {
    margin-top: 40px;
}

.sl-report .sl-results-observations h2,
.sl-report .sl-report-link h2 {
    font-size: 18px;
    font-weight: 600;
    color: #ff9a45;
}

.sl-report .sl-results-observations ul {
    margin-top: 16px;
    padding-left: 20px;
    display: grid;
    gap: 8px;
}

.sl-report .sl-results-observations li {
    line-height: 1.55;
}

.sl-report .sl-axis-desc {
    margin-top: 16px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(245, 245, 247, 0.78);
    max-width: 62ch;
}

/* ---- Report: the echo and the band blocks ----
   The echo is set quieter than the prose around it: it is evidence
   rather than argument, and it is the reader's own words, so it does
   not need to persuade anybody. */

.sl-report-echo {
    margin-top: 20px;
    padding: 14px 16px;
    border-left: 2px solid rgba(120, 180, 255, 0.35);
    background: rgba(10, 16, 34, 0.5);
    border-radius: 0 4px 4px 0;
}

.sl-report-echo-lead {
    font-size: 13px;
    color: rgba(245, 245, 247, 0.55);
}

.sl-report-echo ul {
    margin-top: 8px;
    padding-left: 18px;
    display: grid;
    gap: 5px;
}

.sl-report-echo li {
    font-size: 14px;
    line-height: 1.5;
}

.sl-echo-title {
    color: rgba(245, 245, 247, 0.6);
}

.sl-echo-answer {
    color: #f5f5f7;
}

.sl-report-band {
    margin-top: 24px;
}

.sl-report-band h3 {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ff9a45;
}

.sl-report-band h3:first-child {
    margin-top: 0;
}

.sl-report-band p {
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.6;
    max-width: 64ch;
}

/* The one line in each section the reader might act on today. */
.sl-report-action {
    padding-left: 14px;
    border-left: 2px solid #ff7a1a;
}

@media print {
    .sl-report-echo {
        background: none;
        border-left-color: #999;
    }

    .sl-report-echo-lead,
    .sl-echo-title {
        color: #444;
    }

    .sl-echo-answer,
    .sl-report-band h3 {
        color: #111;
    }

    .sl-report-action {
        border-left-color: #444;
    }
}