/* Shared interaction rules. Values are defined in tokens.css. */

/* Rullepaneler faelles for begge visninger. */
.sp-forloeb-builder *,
.spfs *,
.spf-workflow *{
    scrollbar-color:var(--spf-scroll-thumb) var(--spf-scroll-track);
}
.sp-forloeb-builder ::-webkit-scrollbar,
.spfs ::-webkit-scrollbar,
.spf-workflow ::-webkit-scrollbar{width:10px;height:10px}
.sp-forloeb-builder ::-webkit-scrollbar-track,
.spfs ::-webkit-scrollbar-track,
.spf-workflow ::-webkit-scrollbar-track{background:var(--spf-scroll-track)}
.sp-forloeb-builder ::-webkit-scrollbar-thumb,
.spfs ::-webkit-scrollbar-thumb,
.spf-workflow ::-webkit-scrollbar-thumb{background:var(--spf-scroll-thumb);border-radius:999px}
.sp-forloeb-builder ::-webkit-scrollbar-thumb:hover,
.spfs ::-webkit-scrollbar-thumb:hover,
.spf-workflow ::-webkit-scrollbar-thumb:hover{background:var(--spf-accent)}

/* Fokus: samme ring overalt. */
.sp-forloeb-builder :where(button,input,textarea,select,a,[tabindex]):focus-visible,
.spfs :where(button,input,textarea,select,a,[tabindex]):focus-visible,
.spf-workflow :where(button,input,textarea,select,a,[tabindex]):focus-visible{
    outline:3px solid var(--spf-accent);
    outline-offset:2px
}

/* Tekstmarkering. */
.sp-forloeb-builder ::selection,
.spfs ::selection,
.spf-workflow ::selection{background:var(--spf-accent-soft);color:#20242B}

/* Aabne og valgte felter i de faelles dropdowns. */
:is(.spf-workflow,.sp-forloeb-builder) .spf-select.is-open{
    border-color:var(--spf-accent)!important;
    box-shadow:0 0 0 2px var(--spf-accent-ring)!important
}
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option:hover,
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option.is-highlighted{
    background:var(--spf-accent-soft)!important;
    color:#20242B!important
}
:is(.spf-workflow,.sp-forloeb-builder) .spf-select-option[aria-selected="true"]{
    background:var(--spf-accent-soft)!important;
    color:var(--spf-accent-strong)!important
}


/* Samme udtryk i alle soegefelter: normal vaegt, dempet graa, ingen kursiv. */
.sp-forloeb-builder ::placeholder,
.spfs ::placeholder,
.spf-workflow ::placeholder,
.spf-bs-submit ::placeholder{
    color:#7c8b92;
    font-weight:400;
    font-style:normal;
    opacity:1
}

/* ===============================================================
   FAELLES KNAPSTIL

   Byggeren og undervisningsvisningen var vokset fra hinanden:
   firkantede knapper det ene sted, runde piller det andet. Her
   defineres én form, og begge visninger henter den herfra.

   Valget faldt paa afrundet rektangel frem for pille. Piller
   fungerer til korte etiketter, men undervisningsvisningens
   knapper baerer hele saetninger ("Vis QR til lyd"), og de bliver
   til lange oválforme, der ikke ligner noget andet i systemet.
   =============================================================== */

.sp-forloeb-builder,
.spfs,
.spf-workflow,
.spf-bs-submit{
    --spf-radius:8px;
    --spf-radius-sm:6px;
    --spf-btn-font:13.5px;
    --spf-btn-weight:620;
}

/* Samme form, vaegt og overgang paa tvaers af visningerne. */
.sp-forloeb-builder .spfb-btn,
.sp-forloeb-builder .spfb-context-action,
.spfs .spfs-action,
.spfs .spfs-small-btn,
.spfs .spfs-share-copy,
.spfs .spfs-timer-btn,
.spfs .spfs-overlay-dismiss,
.spf-workflow .spf-workflow-actions button{
    border-radius:var(--spf-radius);
    font-size:var(--spf-btn-font);
    font-weight:var(--spf-btn-weight);
    letter-spacing:.02em;
    transition:background-color 140ms ease,border-color 140ms ease,color 140ms ease;
}

/* Undervisningsvisningens knapper var baade rundere og markant
   stoerre end byggerens. De moedes paa midten. */
.spfs .spfs-action{min-height:42px;padding:10px 16px}
.spfs .spfs-small-btn{min-height:36px;padding:8px 13px;border-radius:var(--spf-radius-sm)}
.spfs .spfs-share-copy{min-height:42px;padding:10px 16px}
.spfs .spfs-timer-btn{min-height:36px;border-radius:var(--spf-radius-sm)}
.spfs .spfs-overlay-dismiss{min-height:46px;padding:13px 26px;font-size:15px}

/* Aktiv tilstand: samme lille nedtryk begge steder. */
.sp-forloeb-builder .spfb-btn:active,
.spfs .spfs-action:active,
.spfs .spfs-small-btn:active{transform:translateY(1px)}

/* Runde former beholdes kun, hvor formen betyder noget:
   lukkekryds, pileknapper, taellere og prikker. */
.spfs .spfs-gallery-nav,
.spfs .spfs-audio-play,
.spfs .spfs-extra-count,
.spfs .spfs-timeup-close,
.spfs .spfs-timeup-dot{border-radius:999px}

@media(prefers-reduced-motion:reduce){
    .sp-forloeb-builder .spfb-btn,
    .spfs .spfs-action,
    .spfs .spfs-small-btn{transition:none}
    .sp-forloeb-builder .spfb-btn:active,
    .spfs .spfs-action:active,
    .spfs .spfs-small-btn:active{transform:none}
}

/* ===============================================================
   FAELLES DETALJER

   De vaerdier, der skal vaere ens overalt, staar ét sted. Det var
   her det skred: haarfine linjer i fem nuancer, cirkler i tre
   stoerrelser og overgange i fire varigheder.
   =============================================================== */

.sp-forloeb-builder,
.spfs,
.spf-workflow,
.spf-bs-submit{
    --spf-hairline:#E4E7EA;      /* ÉN farve til alle tynde linjer */
    --spf-hairline-soft:#EDEFF1; /* linjer inde i en liste */
    --spf-quiet:#8B9299;         /* dempet tekst og ikoner */

    --spf-node-size:30px;        /* nummercirklen — samme overalt */
    --spf-node-border:1.5px;
    --spf-node-font:12.5px;

    --spf-t:110ms;               /* ÉN overgangsvarighed */
    --spf-ease:cubic-bezier(.32,.72,.36,1);
}

/* ---------------------------------------------------------------
   NUMMERCIRKLEN

   Samme stoerrelse, stregvaegt, skrift og farvelogik i byggerens
   tidslinje og i oversigten. Fasen er ringen; tallet er roligt.
   --------------------------------------------------------------- */

.spfs .spfs-ov-node{
    display:grid;
    place-items:center;
    width:var(--spf-node-size);
    height:var(--spf-node-size);
    box-sizing:border-box;
    border:var(--spf-node-border) solid var(--phase,#CFD4D8);
    border-radius:999px;
    background:#fff;
    color:#4A5259;
    font-size:var(--spf-node-font);
    font-weight:650;
    
    line-height:1;
    letter-spacing:.01em;
    transition:border-color var(--spf-t) var(--spf-ease),
               background-color var(--spf-t) var(--spf-ease),
               color var(--spf-t) var(--spf-ease);
}