/* Shared Forløb components; no quiz-specific selectors. */
@keyframes spf-workspace-fade{from{opacity:0}to{opacity:1}}
.spfs .spfs-slide:not([hidden]),.spfs .spfs-panel:not([hidden]),.spfs .spfs-end:not([hidden]),.spfs .spfs-panel-view:not([hidden]),.spfs .spfs-tools-menu:not([hidden]),.spfs .spfs-timerbar:not([hidden]),.sp-forloeb-builder .spfb-start:not([hidden]),.sp-forloeb-builder .spfb-dialog:not([hidden]),.spfs .spfs-bs-qr:not([hidden]),.spfs .spfs-bs-qr-focus:not([hidden]){animation:spf-workspace-fade 160ms ease-out}
.spfs .spfs-tool-layer{position:absolute;inset:0;z-index:6;display:flex;background:#F1F2F4}
.spfs .spfs-tool-layer[hidden],.spfs .spfs-tool-frame[hidden]{display:none!important}
.spfs .spfs-tool-frame{width:100%;height:100%;border:0;background:#F1F2F4}
.spfs .spfs-quick-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:14px}
.spfs .spfs-quick-actions .spfs-small-btn{background:#3D484D;color:#fff;border-color:#293236}
.spfs .spfs-quick-actions .spfs-small-btn:hover{background:#293236}
.spfs .spfs-tools-menu{max-height:calc(100vh - 90px);overflow-y:auto}
.sp-forloeb-builder .spfb-mark-local{width:auto;min-width:22px;padding:0 6px;font-size:11px;font-weight:700;color:#3D484D}
.sp-forloeb-builder .spfb-quick-swap[hidden]{display:none!important}
.spfs .spfs-prompt-text{font-size:clamp(24px,3vw,40px);line-height:1.5;white-space:pre-wrap;margin:24px 0}
.spfs .spfs-prompt-image{max-width:100%;max-height:50vh;object-fit:contain;align-self:center;border-radius:8px;margin-top:20px}
/* Shared activity dialog. */
.spf-workflow {
  position: fixed; inset: 0; z-index: 1000001; display: grid; place-items: center; padding: 24px;
  background: #152e3b66; color: #25343b; font: 400 14px/1.5 "Geist",system-ui,sans-serif; letter-spacing: .012em;
}
.spf-workflow *, .spf-workflow *::before, .spf-workflow *::after { box-sizing: border-box; }
.spf-workflow [hidden] { display: none !important; }
.spf-workflow :where(input, textarea, select, button) { font-family: inherit; letter-spacing: inherit; }
.spf-workflow button { text-transform: none; box-shadow: none; cursor: pointer; margin: 0; }
.spf-workflow button:disabled { cursor: default; opacity: .5; }
.spf-workflow :where(button,input,textarea):focus-visible { outline: 3px solid #4a5d70; outline-offset: 2px; }
.spf-workflow .spf-workflow-dialog { display: flex; flex-direction: column; width: min(720px,100%); max-height: calc(100dvh - 48px); padding: 26px; border: 1px solid #c6cacd; border-radius: 14px; background: #f9fbfa; box-shadow: 0 24px 80px #122d3e33; }
.spf-workflow .spf-workflow-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; }
.spf-workflow .spf-workflow-kicker { display: block; font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #606870; margin-bottom: 5px; }
.spf-workflow h2 { font-family: inherit; font-size: 25px; font-weight: 650; line-height: 1.25; letter-spacing: .025em; color: #25343b; margin: 0; }
.spf-workflow .spf-workflow-close { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid #ced2d6; border-radius: 7px; background: #ebedef; color: #404851; }
.spf-workflow .spf-workflow-close:hover { background: #dee1e4; color: #323c46; }
.spf-workflow .spf-workflow-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.spf-workflow .spf-workflow-description { margin: 14px 0 20px; max-width: 550px; font-size: 13px; color: #595f65; line-height: 1.55; flex: 0 0 auto; }
.spf-workflow .spf-workflow-tabs { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 22px; border: 1px solid #ced2d5; border-radius: 9px; background: #e7eaec; }
.spf-workflow .spf-workflow-tabs button { display: block; min-height: 40px; border: 1px solid transparent; border-radius: 6px; padding: 9px 14px; background: transparent; color: #5a6168; font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .025em; }
.spf-workflow .spf-workflow-tabs button:hover { color: #2f3944; background: #dee2e5; }
.spf-workflow .spf-workflow-tabs button[aria-selected="true"] { color: #2e3740; background: #fff; border-color: #bac0c7; box-shadow: 0 1px 3px #2c353f14; }
.spf-workflow .spf-workflow-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 3px; margin: -3px; }
.spf-workflow label { display: block; margin: 0 0 17px; color: #383f47; font-size: 12px; font-weight: 600; }
.spf-workflow label > span { display: block; margin-bottom: 6px; }
.spf-workflow :where(input,textarea) { display: block; width: 100%; min-width: 0; min-height: 44px; margin: 0; border: 1px solid #bdc1c5; border-radius: 7px; padding: 10px 12px; background: #fff; color: #25343b; font-size: 14px; line-height: 1.5; }
.spf-workflow input::placeholder, .spf-workflow textarea::placeholder { color: #74787d; opacity: 1; }
.spf-workflow textarea { resize: vertical; }
.spf-workflow .spf-workflow-filters, .spf-workflow .spf-workflow-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.spf-workflow .spf-workflow-hint { margin: 0 0 12px; font-size: 12px; color: #676c72; }
.spf-workflow [data-results] { display: grid; gap: 8px; }
.spf-workflow .spf-workflow-specific { padding: 16px; margin: 0 0 18px; border: 1px solid #d7dbde; border-radius: 8px; background: #eff1f3; }
.spf-workflow .spf-workflow-specific label { margin: 0; }
.spf-workflow small { display: block; margin-top: 7px; font-size: 11px; color: #646a71; font-weight: 400; }
.spf-workflow [data-error] { margin: 8px 0; color: #943a2b; font-size: 13px; }
.spf-workflow .spf-workflow-empty { padding: 24px; border: 1px dashed #bdc3c9; border-radius: 8px; color: #595f65; font-size: 13px; }
.spf-workflow .spf-workflow-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 18px; margin-top: 18px; border-top: 1px solid #d8dbde; }
.spf-workflow .spf-workflow-actions button { min-height: 42px; padding: 10px 15px; border: 1px solid #bfc4ca; border-radius: 7px; color: #48525c; background: #edeef0; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .025em; }
.spf-workflow .spf-workflow-actions button:hover { background: #e0e3e7; }
.spf-workflow .spf-workflow-actions .spf-workflow-primary { background: #253b42; border-color: #253b42; color: #fff; }
.spf-workflow .spf-workflow-actions .spf-workflow-primary:hover { background: #162c33; border-color: #162c33; color: #fff; }

/* One continuous field, with the options expanding inside its border. */
:is(.spf-workflow,.sp-forloeb-builder) .spf-select { position: relative; width: 100%; border: 1px solid #bdc1c5; border-radius: 7px; background: #fff; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select.is-open { border-color: #707e8d; box-shadow: 0 0 0 2px #5e6e7e18; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-control { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 42px; margin: 0; padding: 10px 12px; border: 0; border-radius: 6px; background: #fff; color: #343b43; font-family: inherit; font-size: 13px; font-weight: 550; line-height: 1.5; letter-spacing: .012em; text-align: left; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-control:hover { background: #f3f4f6; color: #343b43; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-control svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 140ms ease; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select.is-open .spf-select-control svg { transform: rotate(180deg); }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-list { padding: 4px; border-top: 1px solid #dfe2e4; overflow-y: auto; overscroll-behavior: contain; max-height: 270px; scrollbar-width: thin; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option { position: relative; display: block; padding: 9px 33px 9px 8px; margin: 0; border-radius: 4px; font-size: 13px; font-weight: 450; color: #414a53; cursor: pointer; line-height: 1.5; overflow-wrap: normal; white-space: normal; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option:hover, :is(.spf-workflow,.sp-forloeb-builder) .spf-select-option.is-highlighted { background: #eff1f3; color: #2c3743; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option[aria-selected="true"] { background: #e4e8ec; color: #2e3944; font-weight: 600; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option[aria-selected="true"]::after { content: "✓"; position: absolute; right: 10px; top: 9px; }
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option[aria-disabled="true"] { opacity: .5; cursor: default; }
@media(max-width:540px) { .spf-workflow { padding: 12px; } .spf-workflow .spf-workflow-dialog { padding: 20px; max-height: calc(100dvh - 24px); } .spf-workflow .spf-workflow-filters, .spf-workflow .spf-workflow-fields { grid-template-columns: 1fr; gap: 0; } .spf-workflow .spf-workflow-actions { flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { .spf-workflow *, :is(.spf-workflow,.sp-forloeb-builder) .spf-select-control svg { transition: none !important; } }
@media(prefers-reduced-motion:reduce){.spfs .spfs-slide,.spfs .spfs-panel,.spfs .spfs-panel-view,.spfs .spfs-end,.spfs .spfs-tools-menu,.spfs .spfs-timerbar,.sp-forloeb-builder .spfb-start,.sp-forloeb-builder .spfb-dialog,.spfs .spfs-bs-qr,.spfs .spfs-bs-qr-focus{animation:none!important}}


/* ===============================================================
   BRIKKERNE I "NY AKTIVITET"

   Fast gitter med tre kolonner: titel, metadata, handling. Alle tre
   er lodret centreret paa samme akse, kolonnerne har faste roller,
   og den indvendige afstand er den samme i hver brik. Derfor staar
   ens elementer samme sted fra brik til brik, uanset hvor lang en
   titel eller et fasenavn er.

   Tidligere laa metadata inde i titelblokken og blev skubbet af
   titlens laengde - derfor stod oplysningerne paa forskellige
   niveauer fra brik til brik.
   =============================================================== */

.spf-workflow .spf-workflow-choice {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto 28px;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    min-height: 58px;
    padding: 11px 14px;
    border: 1px solid var(--spf-hairline, #E4E7EA);
    border-radius: var(--spf-radius, 8px);
    background: #fff;
    color: #20242B;
    text-align: left;
    transition: background-color var(--spf-t,110ms) var(--spf-ease,ease),
                border-color var(--spf-t,110ms) var(--spf-ease,ease);
}
.spf-workflow .spf-workflow-choice:hover,
.spf-workflow .spf-workflow-choice:focus-visible {
    background: var(--spf-accent-soft, #E7ECF1);
    border-color: var(--spf-accent, #4A6A85);
    color: #20242B;
}

/* 1. Titel — den primaere plads. Én linje, klippet. */
.spf-workflow .spf-workflow-choice-copy { grid-column: 1; min-width: 0; display: block; }
.spf-workflow .spf-workflow-choice strong {
    display: block;
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .014em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. Metadata — fast omraade, hoejrestillet, samme grundlinje. */
.spf-workflow .spf-workflow-choice-meta {
    grid-column: 2;
    margin: 0;
    max-width: 45%;
    color: var(--spf-quiet, #8B9299);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Handling — fast bredde, centreret i forhold til teksten. */
.spf-workflow .spf-workflow-choice-plus {
    grid-column: 3;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--spf-hairline, #E4E7EA);
    border-radius: var(--spf-radius-sm, 6px);
    background: transparent;
    color: #848b92;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
}
.spf-workflow .spf-workflow-choice:hover .spf-workflow-choice-plus,
.spf-workflow .spf-workflow-choice:focus-visible .spf-workflow-choice-plus {
    border-color: var(--spf-accent, #4A6A85);
    color: var(--spf-accent-strong, #3A566D);
    background: #fff;
}

/* Smal bredde: metadata under titlen, men stadig i faste omraader. */
@media (max-width: 560px) {
    .spf-workflow .spf-workflow-choice {
        grid-template-columns: minmax(0,1fr) 28px;
        grid-template-rows: auto auto;
        row-gap: 3px;
    }
    .spf-workflow .spf-workflow-choice-copy { grid-column: 1; grid-row: 1; }
    .spf-workflow .spf-workflow-choice-meta { grid-column: 1; grid-row: 2; max-width: 100%; text-align: left; }
    .spf-workflow .spf-workflow-choice-plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}


/* Selection transfer is an explicit action beside teaching content. */
/* Knappen placeres ved markeringen af text-transfer.js. Hjoernet bruges
   kun, hvis markeringens position ikke kan bestemmes. */
.spfs .spfs-transfer-selection{position:absolute;left:0;top:0;z-index:12;display:inline-flex;align-items:center;min-height:44px;padding:11px 17px;border:1px solid #20242B;border-radius:8px;background:#20242B;color:#fff!important;font:600 14px/1.35 "Geist",system-ui,sans-serif;letter-spacing:.02em;box-shadow:0 4px 18px #18283A2B;cursor:pointer}
.spfs .spfs-transfer-selection.is-corner{left:auto;top:auto;right:24px;bottom:48px}
.spfs .spfs-transfer-selection:hover{background:#374151}
.spfs .spfs-transfer-selection:disabled{background:#616B78;cursor:default}