/* ==========================================================================
   K549 »Lav speak – farver og tomt felt« (Kim 2/11, mockups K549 v1 C + v2 A2/A3/B2, designmanual K547)
   - Afspil-knapper overalt: lys salvie-cirkel med mørkt ikon – mørk (fyldt) KUN mens der spilles.
   - Mappe-ikoner: mørkt symbol i lys cirkel; valgt = ring (inset 0 0 0 1.5px), aldrig mørk fyld. Tællere lyse.
   - Eksempel-chips: lys orange; valgt = kraftigere orange kant (ikke fyldt).
   - Fuld grøn kun på penge: øvrige bekræftelser er outline mørkegrøn (hvid flade, 1 px grøn kant, grøn tekst).
   - Lav speak: fast plads til afspilleren, lys afspiller, »Gem i«-pillen bredere med ✕ inde i pillen, gæstebanner salvie.
   Kun manualens tokens (v247-manual.css / v247-emphasis.css). Forsiden røres ikke (egen mockup).
   :not(#k549) giver id-vægt over de stærke regler i palette-k24e.css, v247-speaks-list.css og v247-manual.css.
   Står sidst i _Host. Rollback: fjern <link> til denne fil.
   ========================================================================== */

:root {
    --k549-play-bg: var(--v247-m-tint-strong, #E3ECE6);
    --k549-play-ink: var(--v247-m-ink, #16201C);
    --k549-play-hover: var(--v247-m-line-tint, #D3DED6);
    --k549-play-on: var(--v247-m-green, #1F3D34);
}

/* ---------------------------------------------------------------------------
   1) Afspil-knapper: lyse, mørke kun mens de spiller
   --------------------------------------------------------------------------- */
html body .speaks-card .speaks-card-play:not(#k549),
html body .speaks-card .speaks-compact-play:not(#k549),
html body .v247-mini-player .v247-mini-player-toggle:not(#k549),
html body .mobile-custom-audio-player .mobile-custom-audio-button:not(.v247-player-step):not(#k549),
html body .intro-play:not(#k549),
html body .help-video-play:not(#k549),
html body .igc-play:not(#k549),
html body .v247-examples-play:not(#k549),
html body .v247-mb-play:not(#k549),
html body .approval-play:not(#k549),
html body .local-panel-play:not(#k549),
html body .k529-play:not(.is-off):not(#k549),
html body .org-folder-play:not(.is-deleted):not(#k549),
html body .spk-play:not(#k549),
html body .v247-ws-play:not(#k549),
html body .speak-voice-picker-preview:not(#k549),
html body .speaker-profile-dialog .fvp .fvp-btn:not(#k549),
html body .va-voice-listen .fvp .fvp-btn:not(#k549) {
    border-color: transparent !important;
    background: var(--k549-play-bg) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--k549-play-ink) !important;
}
html body .speaks-card .speaks-card-play:not(#k549):hover,
html body .v247-mini-player .v247-mini-player-toggle:not(#k549):hover,
html body .intro-play:not(#k549):hover,
html body .help-video-play:not(#k549):hover,
html body .igc-play:not(#k549):hover,
html body .v247-examples-play:not(#k549):hover,
html body .approval-play:not(#k549):hover,
html body .local-panel-play:not(#k549):hover,
html body .k529-play:not(.is-off):not(#k549):hover,
html body .org-folder-play:not(.is-deleted):not(#k549):hover,
html body .spk-play:not(#k549):hover,
html body .v247-ws-play:not(#k549):hover,
html body .speak-voice-picker-preview:not(#k549):hover {
    background: var(--k549-play-hover) !important;
    color: var(--k549-play-ink) !important;
}
html body .speaks-card .speaks-card-play svg:not(#k549),
html body .v247-mini-player .v247-mini-player-toggle svg:not(#k549),
html body .intro-play svg:not(#k549),
html body .help-video-play svg:not(#k549) { color: inherit !important; fill: currentColor; }
/* Spiller nu: mørk (fyldt) med lyst ikon */
html body .speaks-card .speaks-card-play.is-playing:not(#k549),
html body .speaks-card .speaks-compact-play.is-playing:not(#k549),
html body .v247-mini-player.is-playing .v247-mini-player-toggle:not(#k549),
html body .mobile-custom-audio-player.is-playing .mobile-custom-audio-button:not(.v247-player-step):not(#k549),
html body .v247-examples-row.is-playing .v247-examples-play:not(#k549),
html body .v247-mb-play.is-playing:not(#k549),
html body .org-folder-play.is-playing:not(#k549),
html body .speak-voice-picker-preview.is-playing:not(#k549),
html body .speaker-profile-dialog .fvp.is-playing .fvp-btn:not(#k549),
html body .va-voice-listen .fvp.is-playing .fvp-btn:not(#k549) {
    background: var(--k549-play-on) !important;
    color: #fff !important;
}
html body .help-video-play:not(#k549) { box-shadow: 0 6px 22px rgba(22, 32, 28, .16) !important; }
html body .speaker-profile-dialog .fvp .fvp-btn:not(#k549) svg,
html body .va-voice-listen .fvp .fvp-btn:not(#k549) svg { color: var(--k549-play-ink); fill: currentColor; }

/* ---------------------------------------------------------------------------
   2) Mappe-ikoner og tællere
   --------------------------------------------------------------------------- */
html body .speak-folder-picker-trigger-icon:not(#k549),
html body .speak-folder-picker-icon:not(#k549),
html body .folder-explorer-icon:not(#k549),
html body .k549-folder-ico:not(#k549) {
    display: inline-grid;
    place-items: center;
    border-radius: 50% !important;
    background: var(--v247-m-tint-strong) !important;
    box-shadow: none !important;
    color: var(--v247-m-ink) !important;
}
html body .speak-folder-picker-trigger-icon:not(#k549) { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
html body .k549-folder-ico:not(#k549) { width: 26px; height: 26px; flex: 0 0 26px; }
html body .speak-folder-picker-trigger-icon svg:not(#k549),
html body .speak-folder-picker-icon svg:not(#k549),
html body .folder-explorer-icon svg:not(#k549) { color: var(--v247-m-ink) !important; stroke: currentColor !important; }
/* Valgt mappe: ring – aldrig mørk fyld */
html body .speak-folder-picker-card.is-selected .speak-folder-picker-icon:not(#k549),
html body .folder-explorer-item.is-current .folder-explorer-icon:not(#k549) {
    background: var(--v247-m-tint-strong) !important;
    box-shadow: inset 0 0 0 1.5px var(--v247-m-green) !important;
    color: var(--v247-m-ink) !important;
}
html body .speak-folder-picker-card.is-selected .speak-folder-picker-icon svg:not(#k549) { stroke: var(--v247-m-ink) !important; }

/* Tællere (fx »Mapper 4«): lys salvie, mørkt tal, tynd kant */
html body .v247-tab-count:not(#k549),
html body .folder-workspace-tab-count:not(#k549),
html body .v247-page-tabs .v247-page-tab:is(.is-active, .active, [aria-selected="true"], [aria-current="page"]) .v247-tab-count:not(#k549),
html body .k414-tabs a.on .v247-tab-count:not(#k549) {
    background: var(--v247-m-tint-strong) !important;
    color: var(--v247-m-ink) !important;
    border: 1px solid var(--v247-m-line-tint) !important;
}

/* ---------------------------------------------------------------------------
   3) Eksempel-chips: lys orange; valgt = kraftigere orange kant (ikke fyldt)
   --------------------------------------------------------------------------- */
html body button.v247-example-mark[aria-pressed="true"]:not(#k497-ex):not(#k549),
html body button.v247-example-mark[aria-pressed="true"]:not(#k497-ex):not(#k549):hover {
    background: var(--v247-signal-bg) !important;
    border-color: #D9773F !important;
    box-shadow: inset 0 0 0 .5px #D9773F;
    color: var(--v247-signal-ink) !important;
}

/* ---------------------------------------------------------------------------
   4) Fuld grøn kun om penge – øvrige bekræftelser er outline mørkegrøn
   --------------------------------------------------------------------------- */
html body a.v3-buy[href="/prices"]:not(#k549),
html body .account-guest-option-btn:not(#k549),
html body .voices-casting-go:not(#k549),
html body .selection-btn-primary:not(#k549),
html body .casting-btn-primary.casting-btn-send:not(#k549),
html body .v247-mb-primary:not(#k549),
html body .rn-primary:not(#k549),
html body .v247-treq-primary:not(#k549),
html body .va-own-cta:not(#k549),
html body .ad-button.k549-outline:not(#k549),
html body .v247-pg-use:not(#k549),
html body .k549-outline:not(#k549) {
    border: 1px solid var(--v247-m-green) !important;
    background: var(--v247-m-card, #fff) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--v247-m-green) !important;
}
html body a.v3-buy[href="/prices"]:not(#k549):hover,
html body .account-guest-option-btn:not(#k549):hover,
html body .voices-casting-go:not(#k549):hover:not(:disabled),
html body .selection-btn-primary:not(#k549):hover,
html body .casting-btn-primary.casting-btn-send:not(#k549):hover:not(:disabled),
html body .v247-mb-primary:not(#k549):hover:not(:disabled),
html body .rn-primary:not(#k549):hover,
html body .v247-treq-primary:not(#k549):hover:not(:disabled),
html body .va-own-cta:not(#k549):hover,
html body .ad-button.k549-outline:not(#k549):hover:not(:disabled),
html body .v247-pg-use:not(#k549):hover,
html body .k549-outline:not(#k549):hover:not(:disabled) {
    background: var(--v247-m-tint) !important;
    color: var(--v247-m-green) !important;
}
/* Musik-panelet: rolig kant i stedet for den orange ring */
html body .v247-mb-panel:not(#k549) { box-shadow: 0 0 0 1px var(--v247-m-line), var(--v247-m-shadow-card) !important; }
/* Mange filer: det aktive trin er grønt (ring), ikke orange */
html body .k541-step.is-on .k541-step-btn i:not(#k549) {
    border-color: var(--v247-m-green) !important;
    background: var(--v247-m-card, #fff) !important;
    color: var(--v247-m-green) !important;
}

/* ---------------------------------------------------------------------------
   5) »Kom godt i gang« på Lav speak: lys salvie i stedet for havblå
   --------------------------------------------------------------------------- */
html body .igc:not(#k549) {
    --v247-ocean: var(--v247-m-tint);
    --v247-ocean-ink: var(--v247-m-ink);
    --v247-ocean-button-ink: var(--v247-m-ink);
    --v247-ocean-line: var(--v247-m-line-tint);
    --v247-event: var(--v247-m-green-2);
    --v247-event-tint: var(--v247-m-tint-strong);
    border: 0 !important;
    background: var(--v247-m-tint) !important;
    color: var(--v247-m-ink) !important;
    box-shadow: inset 0 0 0 1px var(--v247-m-line-tint), var(--v247-m-shadow-card) !important;
}
html body .igc:not(#k549) :is(.igc-close, .igc-title, .igc-item-title, .igc-more, .igc-toggle, .igc-toggle-icon) { color: var(--v247-m-ink) !important; }
html body .igc:not(#k549) :is(.igc-lead, .igc-item-meta) { color: var(--v247-m-text) !important; }
html body .igc:not(#k549) .igc-tag { background: var(--v247-m-tint-strong) !important; color: var(--v247-m-green-2) !important; }
html body .igc:not(#k549) .igc-dot { background: var(--v247-m-green-2) !important; }
html body .igc:not(#k549) .igc-frame { background: var(--v247-m-tint-strong) !important; box-shadow: 0 0 0 1px var(--v247-m-line-tint) !important; }
html body .igc:not(#k549) .igc-toggle-icon { background: var(--v247-m-tint-strong) !important; }
html body .igc:not(#k549) :is(.igc-item, .igc-more, .igc-list) { border-color: var(--v247-m-line-tint) !important; }
html body .igc:not(#k549) .igc-close:hover { background: var(--v247-m-tint-strong) !important; }
html body .igc:not(#k549) :is(.igc-play, .igc-toggle, .igc-close):focus-visible { outline: 3px solid var(--v247-design-focus-ring, rgba(44, 74, 66, .25)) !important; box-shadow: none !important; }

/* ---------------------------------------------------------------------------
   6) Lav speak: værktøjslinjen nederst, fast plads til afspilleren, lys afspiller
   --------------------------------------------------------------------------- */
/* Kortet er en lodret stak – tekst øverst, værktøjslinjen altid nederst (også for gæster). */
html body .v247-speak-page .v247-speak-stage:not(#k549) { display: flex !important; flex-direction: column !important; }
html body .v247-speak-page .v247-speak-stage > .v247-stage-text:not(#k549) { order: 0; flex: 1 1 auto; }
html body .v247-speak-page .v247-speak-stage > .v247-stage-bot:not(#k549) { order: 2; margin-top: auto !important; position: static !important; }
/* Gæster og nye brugere: plads til trinene og eksemplerne midt i feltet, også når teksten kommer (intet hop) */
html body .v247-speak-page .v247-speak-stage.k549-room:not(#k549) textarea { min-height: 330px !important; }
@media (max-width: 600px) {
    html body .v247-speak-page .v247-speak-stage.k549-room:not(#k549) textarea { min-height: 350px !important; }
}

/* K549 v3: »Hør et eksempel:« på egen linje over kortet, venstrestillet – samme sted i tomt felt og mens gæsten lytter */
html body .v247-speak-page .k549-examples:not(#k549) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 0 2px;
}
html body .v247-speak-page .k549-examples:not(#k549) .k549-examples-lead { margin-right: 6px; color: var(--v247-m-text); font-size: 14px; }
html body .v247-speak-page .k549-examples:not(#k549) .k549-chip { padding: 6px 13px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
html body .v247-speak-page .k549-examples.is-nudge:not(#k549) .k549-chip { animation: v247-example-nudge 900ms ease-out 1; }
@media (prefers-reduced-motion: reduce) { html body .v247-speak-page .k549-examples.is-nudge:not(#k549) .k549-chip { animation: none; } }
/* Mobil: de fire eksempler i et 2 × 2-gitter under »Hør et eksempel:« */
@media (max-width: 600px) {
    html body .v247-speak-page .k549-examples:not(#k549) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    html body .v247-speak-page .k549-examples:not(#k549) .k549-examples-lead { grid-column: 1 / -1; margin: 0 0 2px; }
    html body .v247-speak-page .k549-examples:not(#k549) .k549-chip { width: 100%; padding: 8px 12px; text-align: center; }
}

/* Den faste plads: samme højde, om der er en afspiller eller ej – listen herunder rykker sig ikke */
html body .v247-speak-page .k549-player-slot:not(#k549) { min-height: 72px; margin-top: 16px; }
html body .v247-speak-page .k549-player-slot:not(#k549) .v247-speak-actions { width: 100%; margin-top: 0 !important; }
html body .v247-speak-page .k549-player-slot:not(#k549) .v247-speak-audio-actions { flex: 1 1 100% !important; max-width: none !important; }
/* Lys afspiller: hvidt kort med tynd kant */
html body .v247-speak-page .k549-player-slot:not(#k549) .v247-mini-player {
    box-sizing: border-box;
    min-height: 72px;
    padding: 12px 20px;
    border: 1px solid var(--v247-m-line);
    border-radius: 16px;
    background: var(--v247-m-card, #fff);
    box-shadow: var(--v247-m-shadow-card);
}
html body .v247-speak-page .k549-player-slot:not(#k549) .v247-mini-player-toggle { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
html body .v247-speak-page .k549-player-slot:not(#k549) .v247-mini-player-timeline { flex: 1 1 auto; min-width: 0; }
html body .k549-player-meta:not(#k549) { display: grid; flex: 0 1 auto; min-width: 0; max-width: 46%; line-height: 1.25; }
html body .k549-player-meta:not(#k549) b { overflow: hidden; color: var(--v247-m-ink); font-size: 14.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
html body .k549-player-meta:not(#k549) small { color: var(--v247-m-text-soft); font-size: 12.5px; }
@media (max-width: 600px) {
    html body .k549-player-meta:not(#k549) { max-width: 52%; }
    html body .v247-speak-page .k549-player-slot:not(#k549) .v247-mini-player { flex-wrap: wrap; padding: 12px 14px; }
}

/* ---------------------------------------------------------------------------
   7) »Gem i«-pillen: bredere (ca. 35 tegn), mappe-ikon i lys cirkel, ✕ inde i pillen til højre
   --------------------------------------------------------------------------- */
html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-control:not(#k549) {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--v247-m-line);
    border-radius: 999px;
    background: var(--v247-m-card, #fff);
}
html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-trigger:not(#k549) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-trigger-name:not(#k549) {
    max-width: 35ch !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-clear:not(#k549) {
    position: static !important;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin: 0 8px 0 -4px;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: var(--v247-m-text) !important;
}
html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-clear:not(#k549):hover { background: var(--v247-m-tint) !important; }
@media (max-width: 600px) {
    html body .v247-speak-page .v247-speak-folder-save-location .speak-folder-picker-trigger-name:not(#k549) { max-width: 22ch !important; }
}

/* Gæstens »Gem i« (B2) – samme pille, et klik inviterer til en gratis konto */
html body .k549-gemi:not(#k549) {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 0 14px 0 6px;
    border: 1px solid var(--v247-m-line); border-radius: 999px;
    background: var(--v247-m-card, #fff); color: var(--v247-m-ink);
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
html body .k549-gemi:not(#k549):hover { border-color: var(--v247-m-line-tint); background: var(--v247-m-tint); }
html body .k549-gemi:not(#k549):focus-visible { outline: 3px solid var(--v247-design-focus-ring, rgba(44, 74, 66, .25)); outline-offset: 2px; }
html body .k549-gemi-name:not(#k549) { max-width: 35ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .k549-gemi-caret:not(#k549) { color: var(--v247-m-text-soft); }
html body .k549-guest-folder:not(#k549) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
html body .k549-gemi-hint:not(#k549) { display: inline-flex; align-items: center; gap: 6px; color: var(--v247-m-text-soft); font-size: 13px; cursor: default; }
html body .k549-gemi-hint:not(#k549) a { color: var(--v247-m-green); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
    html body .k549-gemi-name:not(#k549) { max-width: 22ch; }
    html body .k549-gemi-hint:not(#k549) { flex-basis: 100%; }
}
