/* ── DFB Mode Switcher: Widget UI ───────────────────────────────────── */

.dfb-ms-wrap {
    padding: 4px 0 2px;
}

/* Selve glideren — to knapper i en track med en flydende knob bagved. */
.dfb-ms-toggle {
    position: relative;
    display: inline-flex;
    width: 100%;
    background: #f3ece6;
    border: 1px solid #d9c9b9;
    border-radius: 999px;
    padding: 3px;
    box-sizing: border-box;
    user-select: none;
}

.dfb-ms-opt {
    position: relative;
    z-index: 2;
    flex: 1 1 50%;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #8a6a52;
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.18s ease;
    line-height: 1.2;
    text-align: center;
}

.dfb-ms-opt:focus-visible {
    outline: 2px solid #b8946b;
    outline-offset: 2px;
}

.dfb-ms-opt.is-active {
    color: #fff;
}

.dfb-ms-opt[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Den flydende knob bagved — animeres mellem venstre og højre. */
.dfb-ms-knob {
    position: absolute;
    z-index: 1;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc( 50% - 3px );
    background: #a23a3a;
    border-radius: 999px;
    transition: transform 0.22s cubic-bezier( 0.4, 0.0, 0.2, 1 );
    box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.18 );
}

body.dfb-mode-strong .dfb-ms-knob {
    transform: translateX( 100% );
}

/* Hint-tekst — én linje ad gangen alt efter mode. */
.dfb-ms-hint {
    margin: 8px 2px 0;
    font-size: 0.8rem;
    color: #7a6a5e;
    line-height: 1.35;
    min-height: 1.35em; /* undgå hop når teksten skifter */
}

.dfb-ms-hint-marker,
.dfb-ms-hint-strong { display: none; }

body.dfb-mode-marker .dfb-ms-hint-marker { display: inline; }
body.dfb-mode-strong .dfb-ms-hint-strong { display: inline; }

.dfb-ms-note {
    margin: 6px 2px 0;
    font-size: 0.75rem;
    color: #a23a3a;
    font-style: italic;
}


/* ── Mode-baserede regler for de to andre plugins ───────────────────── */

/*
 * I MARKER-mode er Strong-spans visuelt usynlige (ingen cursor, ingen
 * underline) og deres hover-tooltip håndteres af mode-gate i tooltip.js.
 *
 * Vi rør IKKE ved selve <span class="dfb-st-word">'ens DOM — vi neutraliserer
 * den bare visuelt. Det er vigtigt fordi når man skifter til STRONG-mode skal
 * den fungere uden re-stitching.
 */
body.dfb-mode-marker .dfb-st-word {
    cursor: inherit;
    border-bottom: none;
    background: none;
}

body.dfb-mode-marker .dfb-st-word:hover {
    background: none;
    border-bottom: none;
}


/*
 * I STRONG-mode er højlysninger stadig synlige (det aftalte krav: "farven er
 * er men passiv"). Vi slukker bare pointer-feedback så det ikke ser klikbart ud.
 *
 * .dfb-hl beholder sin baggrundsfarve. Cursor sættes til 'help' for at matche
 * de øvrige ord — eller 'default' hvis du foretrækker det.
 */
body.dfb-mode-strong .dfb-hl {
    cursor: inherit;
}

/*
 * highlighter-toolbaren har sin egen .dfb-hl-hidden-klasse, men i tilfælde af
 * race conditions hvor en palette skulle stå åben når man skifter mode,
 * tvinger vi den ned her.
 */
body.dfb-mode-strong #dfb-hl-toolbar {
    display: none !important;
}


/* ── Når widget'en bruger sticky-widgets-collapse ───────────────────── */
/* Hvis du senere vil registrere widget'en i dfb-sticky-widgets config'en
   peger target'et på .dfb-ms-wrap — så collapser den hele indholdet. */