/*! Kristensson i Skåne AB: interactive self-test (kiskane-selftest.php, kisk-selftest.js).
 *  Colours from the brand book (kisab-brandbook design-system/tokens.json). The four severity tints appear on the
 *  website ONLY here, in self-test results, always with the word beside the tint (ADR 0005 in that repository):
 *  red-100/red-800 · orange-100/orange-800 · yellow-100/yellow-800 · green-200/green-800, text 5.4:1 or better.
 *  Controls stay neutral (navy-900 when chosen): the signal colours describe a result, never a button.
 *  Boxes round the top-right corner only (14px, D10); buttons radius-md (8px); chips radius-sm (4px). */
.kisk-selftest [hidden] { display: none !important; }

/* questions */
.kisk-st-js .kisk-st-area ol > li { margin-bottom: 14px; }
.kisk-st-choices { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 8px; }
.kisk-st-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
/* margin: 0 — Blocksy gives every label a bottom margin except the last one, which then stretched "Vet inte" 7 px taller
   in the flex row (owner 2026-10-04: "Varför är Vet inte knapparna större än Ja och Nej?") */
.kisk-st-choice { display: inline-block; min-width: 72px; padding: 7px 16px; margin: 0; border: 1px solid #b9c4bd; border-radius: 8px; background: #fff;
	color: #102136; font-size: .92rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.kisk-st-choice:hover { border-color: #102136; }
.kisk-st-choices input:checked + .kisk-st-choice { background: #102136; border-color: #102136; color: #fff; }
.kisk-st-choices input:focus-visible + .kisk-st-choice { outline: 2px solid #2e7f1b; outline-offset: 2px; }
.kisk-st-js li.is-missing { scroll-margin-top: 130px; outline: 2px solid #102136; outline-offset: 6px; border-radius: 0 14px 0 0; }
.kisk-st-js li.is-missing::after { content: attr(data-missing); display: block; margin-top: 6px; font-size: .8rem; font-weight: 700; color: #102136; }
.kisk-st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 22px 0 8px; }
.kisk-st-progress { margin: 0; color: #5a6672; font-size: .95rem; font-variant-numeric: tabular-nums; }
.kisk-st-show { border: 0; cursor: pointer; font-size: 1rem; }

/* result */
.kisk-st-result { scroll-margin-top: 130px; margin: 20px 0 8px; padding: 24px 26px; background: #fff; border: 1px solid var(--theme-palette-color-5, #e7ebee); border-radius: 0 14px 0 0; }
.kisk-st-result h2.kisk-st-head { margin: 0 0 14px; font-size: clamp(1.45rem, 4.2vw, 1.9rem); font-variant-numeric: tabular-nums; }
.kisk-st-result h2.kisk-st-head:focus { outline: none; }
.kisk-st-result h3 { margin: 26px 0 10px; font-size: 1.15rem; }
.kisk-st-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px !important; padding: 0 !important; list-style: none; }
.kisk-st-step { display: flex; flex-direction: column; gap: 2px; margin: 0 !important; padding: 10px 12px 9px; background: #fff; border-top: 6px solid; font-size: .9rem; line-height: 1.3; }
.kisk-st-step__word { font-weight: 700; }
.kisk-st-step__range { font-size: .8rem; font-variant-numeric: tabular-nums; }
.kisk-st-step__here { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.kisk-st-step.is-current { box-shadow: inset 0 0 0 2px currentColor; }
.kisk-st-desc { margin: 0 0 4px; }
.kisk-st-tablewrap { overflow-x: auto; }
table.kisk-st-areas { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kisk-st-areas th { text-align: left; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: #5a6672; border-bottom: 1px solid #cbd5d0; padding: 6px 12px; }
.kisk-st-areas td { padding: 9px 12px; border-bottom: 1px solid #e7ebee; vertical-align: middle; }
.kisk-st-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kisk-st-chip { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.kisk-st-gaps { margin-top: 0; }
.kisk-st-gaps li { margin-bottom: 4px; }
.kisk-st-gap__meta { color: #5a6672; font-size: .9rem; }
.kisk-st-offers { margin-top: 4px; }
.kisk-st-offers .kisk-card h4 { margin: 0; font-size: 1.1rem; line-height: 1.3; color: #102136; }
.kisk-st-restart { margin-top: 20px; padding: 0; border: 0; background: none; color: #102136; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* the four tints: the step shows its tint as a top rule and fills when it is the reader's; chips are filled */
.kisk-st--red    { border-color: #f5c4c0; color: #8a1c10; }
.kisk-st--orange { border-color: #f9d3aa; color: #7a3e00; }
.kisk-st--yellow { border-color: #f0e07a; color: #5a5000; }
.kisk-st--green  { border-color: #cbe2c5; color: #226113; }
.kisk-st-step.is-current.kisk-st--red,    .kisk-st-chip.kisk-st--red    { background: #f5c4c0; }
.kisk-st-step.is-current.kisk-st--orange, .kisk-st-chip.kisk-st--orange { background: #f9d3aa; }
.kisk-st-step.is-current.kisk-st--yellow, .kisk-st-chip.kisk-st--yellow { background: #f0e07a; }
.kisk-st-step.is-current.kisk-st--green,  .kisk-st-chip.kisk-st--green  { background: #cbe2c5; }

/* contact */
.kisk-st-contact { margin-top: 28px; }
.kisk-st-contact .kisk-st-result-field textarea { background: #f2f7f6; color: #2f3b45; font-size: .9rem; line-height: 1.45; height: auto !important; min-height: 220px; }
.kisk-st-privacy { color: #5a6672; font-size: .92rem; }
.kisk-st-count { margin: 0 0 6px; color: #102136; font-weight: 600; font-variant-numeric: tabular-nums; }

/* "bör utredas" (2026-10-04): the critical questions answered no / don't know, in the orange tint with its word */
.kisk-st-critical { margin: 16px 0 4px; padding: 14px 18px 6px; border: 2px solid #f9d3aa; border-radius: 0 14px 0 0; background: #fff; }
.kisk-st-result .kisk-st-critical h3 { margin: 0 0 6px; color: #7a3e00; font-size: 1.05rem; }
.kisk-st-critical p { margin: 0 0 6px; font-size: .95rem; }
.kisk-st-critical ul { margin-top: 0; }
.kisk-st-critical li { margin-bottom: 4px; }

@media (max-width: 640px) {
	.kisk-st-result { padding: 18px 16px; }
	.kisk-st-step { padding: 8px 6px 7px; font-size: .8rem; }
	.kisk-st-step__range { font-size: .72rem; }
	.kisk-st-step__here { font-size: .65rem; letter-spacing: 0; }
	.kisk-st-choice { min-width: 64px; padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) { .kisk-st-choice { transition: none; } }

/* 1.2 (2026-10-04): the scope question before the test, the variant choice (ISO 27001 with or without Annex A), and
   the note in the result when the reader is not sure the regulation applies. Same box language as the result. */
.kisk-st-scope { margin: 0 0 24px; padding: 14px 18px 12px; background: #f2f7f6; border: 1px solid #cbd5d0; border-radius: 0 14px 0 0; }
.kisk-st-scope p { margin: 0; }
.kisk-st-variants { margin: 0 0 24px; }
.kisk-st-variants__h { margin: 0 0 4px; font-weight: 700; color: #102136; }
.kisk-st-variants .kisk-st-choice { min-width: 0; padding: 9px 16px; }
.kisk-st-scope-note { margin: 0 0 14px; padding: 10px 14px; border: 2px solid #f9d3aa; border-radius: 0 14px 0 0; background: #fff; }