/* Exact /skrivebord/ toolbar and format tray parity.
   Source: live combined-ui.css captured 2026-10-04. Values unchanged;
   component IDs are adapted to translator to preserve existing handlers.
   Load after legacy translator CSS. */
#sourceCopyBtn,
#st-source-toolbar,
#main-content .st-floating-actions,
#st-calm-heading-popover {
  --ed-paper: #fffdf9; --ed-hover: #eeeae3; --ed-pressed: #e3ddd3;
  --ed-border: #e6ddd2; --ed-ink: #454a40; --ed-muted: #79766c;
  --ed-active: #e5eee4; --ed-active-ink: #416751;
}
[data-theme="dark"] #sourceCopyBtn,
[data-theme="dark"] #st-source-toolbar,
[data-theme="dark"] #main-content .st-floating-actions,
[data-theme="dark"] #st-calm-heading-popover,
body[data-theme="dark"] #st-source-toolbar .format-toolbar,
body[data-theme="dark"] #st-calm-heading-popover {
  --ed-paper: #292620; --ed-hover: #3a362e; --ed-pressed: #454036;
  --ed-border: #50493e; --ed-ink: #eee8df; --ed-muted: #b6afa4;
  --ed-active: #394d3e; --ed-active-ink: #d2e6d3;
}
#st-source-toolbar {
  background: var(--ed-paper) !important; border: 1px solid var(--ed-border) !important;
  border-radius: 16px !important; padding: 6px 10px !important; gap: 0 !important;
  box-shadow: 0 5px 16px #443c3512 !important;
}
#st-source-toolbar .format-toolbar {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important;
}
#st-source-toolbar #micBtn {
  background: transparent !important; border: 1px solid transparent !important;
  color: var(--ed-ink) !important; border-radius: 8px !important; box-shadow: none !important;
  transform: none !important; min-height: 40px !important;
}
#st-source-toolbar #micBtn:hover:not(:disabled),
#st-source-toolbar #micBtn:focus-visible {
  background: var(--ed-hover) !important; color: var(--ed-ink) !important;
  outline: none !important; box-shadow: none !important; border-color: transparent !important;
}
#st-source-toolbar #micBtn.ss-mic--listening {
  background: var(--ed-active) !important; color: var(--ed-active-ink) !important;
}
#st-source-toolbar .format-toolbar .format-group { gap: 0 !important; }
#st-source-toolbar .format-toolbar :is(.format-btn,.ed-voice-chevron),
#st-source-toolbar .format-toolbar #micBtn {
  border-radius: 8px !important; background: transparent !important; color: var(--ed-ink) !important;
  border-color: transparent !important; box-shadow: none !important; transform: none !important;
  transition: background-color .12s ease, color .12s ease !important;
}
#st-source-toolbar .format-toolbar .format-btn {
  width: 38px !important; min-width: 38px !important; height: 40px !important; min-height: 40px !important;
}
#st-source-toolbar .format-toolbar :is(.format-btn,.ed-voice-chevron):hover:not(:disabled),
#st-source-toolbar .format-toolbar #micBtn:hover:not(:disabled),
#st-source-toolbar .format-toolbar .ed-overflow-item:hover:not(:disabled) {
  background: var(--ed-hover) !important; color: var(--ed-ink) !important; transform: none !important;
}
#st-source-toolbar .format-toolbar :is(.format-btn,.ed-voice-chevron):active:not(:disabled),
#st-source-toolbar .format-toolbar .ed-overflow-item:active:not(:disabled) {
  background: var(--ed-pressed) !important; color: var(--ed-ink) !important;
}
#st-source-toolbar .format-toolbar :is(.format-btn.active,.format-btn[aria-pressed="true"],.format-btn[aria-expanded="true"],#micBtn[aria-pressed="true"]) {
  background: var(--ed-active) !important; color: var(--ed-active-ink) !important;
}
#st-source-toolbar .format-toolbar :is(.format-btn,.ed-voice-chevron):disabled {
  opacity: .4 !important; background: transparent !important; color: var(--ed-muted) !important;
}
#st-source-toolbar .format-toolbar :is(button,.format-btn):focus-visible,
#st-calm-heading-popover button:focus-visible {
  outline: none !important; box-shadow: none !important; background: var(--ed-hover) !important;
  text-decoration: underline !important; text-underline-offset: 4px;
  border-color: var(--ed-muted) !important;
}
#st-source-toolbar .format-toolbar .calm-heading-trigger {
  width: auto !important; min-width: 82px !important; max-width: none !important;
  padding: 0 10px !important; gap: 8px !important;
}
#st-source-toolbar .format-toolbar .calm-heading-trigger .calm-trigger-label {
  font-family: var(--font-family,Arial,sans-serif) !important; font-size: 13px !important; font-weight: 600 !important;
}
#st-source-toolbar .format-toolbar .calm-trigger-caret { display: inline-block !important; }
#st-source-toolbar .format-toolbar .calm-heading-separator { display: none !important; }
#st-source-toolbar .format-toolbar :is(.format-separator,.format-divider) {
  width: 1px !important; height: 18px !important; margin: 0 8px !important;
  background: var(--ed-border) !important; border: 0 !important; flex-shrink: 0;
}
#st-source-toolbar .format-toolbar .ed-injected-right { gap: 0 !important; padding: 0 !important; margin: 0 !important; }
#st-source-toolbar .format-toolbar .ed-overflow-menu {
  background: var(--ed-paper) !important; border-color: var(--ed-border) !important;
  min-width: 180px !important; border-radius: 13px !important; padding: 6px !important;
}
#st-source-toolbar .format-toolbar .ed-overflow-menu:not(.active) { visibility: hidden !important; }
#st-source-toolbar .format-toolbar .ed-overflow-item {
  display: flex !important; align-items: center; gap: 10px; width: 100% !important;
  color: var(--ed-ink) !important; border-radius: 8px !important; padding: 10px 12px !important;
  background: transparent !important; min-height: 40px !important; font-size: 13px !important;
}
#st-calm-heading-popover {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px;
  width: min(360px,calc(100vw - 16px)) !important; min-width: 0 !important; max-width: 360px !important;
  padding: 16px !important; border-radius: 16px !important; overflow-y: auto;
  background: var(--ed-paper) !important; border-color: var(--ed-border) !important;
  transform: none !important; transition: opacity .12s ease !important;
}
#st-calm-heading-popover[hidden] { display: none !important; }
#st-calm-heading-popover .calm-popover-section {
  margin: 0 !important; padding: 0 !important; border: 0 !important; min-width: 0;
}
#st-calm-heading-popover .calm-popover-section:last-child {
  grid-column: 1 / -1; border-top: 1px solid var(--ed-border) !important; padding-top: 10px !important;
}
#st-calm-heading-popover .calm-pop-grid { grid-template-columns: minmax(0,1fr) !important; gap: 2px !important; }
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
#st-calm-heading-popover .calm-popover-label { padding-left: 8px; color: var(--ed-muted) !important; font-family: var(--font-family) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; }
#st-calm-heading-popover .calm-popover-btn {
  justify-content: flex-start !important; gap: 9px !important; padding: 6px 8px !important;
  color: var(--ed-ink) !important; font-size: 12px !important; min-height: 40px !important;
  height: auto !important; background: transparent !important; transform: none !important;
}
#st-calm-heading-popover :is(.calm-pop-glyph,svg) { width: 18px !important; min-width: 18px; flex-shrink: 0; text-align: center; }
#st-calm-heading-popover .calm-format-name { line-height: 1.3; text-align: left; }
#st-calm-heading-popover .calm-popover-btn:hover { background: var(--ed-hover) !important; color: var(--ed-ink) !important; }
#st-calm-heading-popover .calm-popover-btn[aria-pressed="true"] {
  background: var(--ed-active) !important; color: var(--ed-active-ink) !important; border-color: transparent !important;
}
@media(max-width:1100px) {
  #st-source-toolbar .format-toolbar .format-btn { width: 32px !important; min-width: 32px !important; }
  #st-source-toolbar .format-toolbar .calm-heading-trigger { width: auto !important; min-width: 74px !important; padding: 0 8px !important; }
  #st-source-toolbar .format-toolbar :is(.format-separator,.format-divider) { margin: 0 5px !important; }
}
@media(max-width:380px) {
  #st-calm-heading-popover { padding: 12px !important; gap: 8px; }
  #st-calm-heading-popover .calm-popover-btn { padding: 6px !important; gap: 6px !important; font-size: 11px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #st-source-toolbar .format-toolbar :is(button,.format-btn,.ed-voice-chevron),
  #st-source-toolbar #micBtn,
  #st-calm-heading-popover, #st-calm-heading-popover .calm-popover-btn { transition: none !important; }
}

/* Compact closed bar; the expanded format tray shares the wider footprint. */
#st-source-toolbar { width:max-content!important;max-width:calc(100% - 32px)!important;justify-content:center!important;box-sizing:border-box!important; }
#st-source-toolbar.format-tray-open {width:min(560px,calc(100% - 12px))!important;border-radius:0 0 16px 16px!important}
#st-source-toolbar .format-toolbar {gap:4px!important}
#st-source-toolbar .format-toolbar :is(#formatBold,#formatItalic,.group-1 > .format-separator) {display:none!important}
/* Aa is an inline icon, not the old absolutely positioned button decoration. */
#st-source-toolbar .format-toolbar .calm-heading-trigger {display:inline-flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;line-height:1!important}
#st-source-toolbar .format-toolbar .calm-heading-trigger::before {content:'Aa';position:static!important;inset:auto!important;width:auto!important;height:auto!important;flex:0 0 auto!important;transform:none!important;line-height:1!important;font-size:16px;font-weight:500}
#st-source-toolbar .format-toolbar .calm-heading-trigger .calm-trigger-label {flex:0 0 auto!important;line-height:1!important}
#st-source-toolbar .format-toolbar .ed-clear-toolbar-btn {display:inline-flex!important;margin-left:0!important}
#st-source-toolbar .format-toolbar .ed-overflow-wrap.ed-overflow-idle {display:none!important}
#st-calm-heading-popover {width:var(--tray-width,560px)!important;max-width:calc(100vw - 16px)!important;grid-template-columns:repeat(2,minmax(0,1fr));padding:18px!important;border-radius:16px 16px 0 0!important;box-sizing:border-box!important;border-bottom:1px solid var(--ed-border)!important;box-shadow:0 -6px 24px #443c3510!important}
#st-calm-heading-popover.open {animation:ed-tray-reveal 140ms ease-out}
#st-calm-heading-popover .calm-pop-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important}
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
#st-calm-heading-popover .calm-popover-btn {min-height:40px!important;font-size:12px!important}
@keyframes ed-tray-reveal {from{opacity:0}to{opacity:1}}
/* Split reading control: playback and current voice have separate targets. */
#st-source-toolbar .format-toolbar .group-2 {position:relative!important}
#st-source-toolbar .format-toolbar #sourceTtsBtn {width:40px!important;min-width:40px!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-wrap {width:auto!important;margin:0!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron {width:80px!important;min-width:80px!important;margin-left:0!important;flex-shrink:0!important;padding:0 8px!important;gap:7px!important;font-size:12px!important;justify-content:space-between!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron > svg {width:10px!important;height:10px!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron[aria-expanded="true"] > svg {transform:rotate(180deg)}
#st-source-toolbar .format-toolbar #sourceTtsBtn:is([data-tts-state="loading"],[data-tts-state="playing"],[data-tts-state="paused"]) {background:var(--ed-active)!important;color:var(--ed-active-ink)!important}
/* Playback stays in the toolbar: one pause/resume action and one stop. */
@keyframes ed-reading-breathe {0%,100%{opacity:.25}50%{opacity:.65}}
#st-source-toolbar .format-toolbar #st-source-audio-controls,
#st-source-toolbar .format-toolbar #st-source-audio-controls[style] {
  display:flex!important;position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  width:36px!important;min-width:36px!important;height:40px!important;flex:0 0 36px!important;
  margin:0!important;padding:0!important;gap:0!important;opacity:1!important;pointer-events:auto!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  transform:none!important;animation:none!important;transition:none!important;backdrop-filter:none!important;
}
#st-source-toolbar .format-toolbar #st-source-audio-controls::after {content:none!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn {
  width:36px!important;min-width:36px!important;height:40px!important;min-height:40px!important;padding:0!important;display:flex!important;align-items:center;justify-content:center;
  background:transparent!important;color:var(--ed-ink)!important;border:1px solid transparent!important;border-radius:8px!important;transform:none!important;
  transition:background-color .12s ease,color .12s ease!important;
}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn:hover:not(:disabled) {background:var(--ed-hover)!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn:active:not(:disabled) {background:var(--ed-pressed)!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn:disabled {opacity:.35!important;cursor:default!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn:focus-visible {outline:none!important;background:var(--ed-hover)!important;border-color:var(--ed-muted)!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn svg {width:16px!important;height:16px!important;color:inherit!important}
#st-source-toolbar .format-toolbar #sourceTtsBtn {position:relative!important}
#st-source-toolbar .format-toolbar #sourceTtsBtn > svg {width:18px!important;height:18px!important;flex-shrink:0}
#st-source-toolbar .format-toolbar #sourceTtsBtn::after {content:none!important;animation:none!important}
.ed-tts-loading-ring {position:absolute;inset:5px;border:1.5px solid var(--ed-border);border-top-color:var(--ed-active-ink);border-radius:50%;animation:ed-tts-spin .9s linear infinite;pointer-events:none}
@keyframes ed-tts-spin {to{transform:rotate(360deg)}}
@media(max-width:1100px){
#st-source-toolbar .format-toolbar {gap:2px!important}
#st-source-toolbar .format-toolbar .calm-heading-trigger {width:90px!important;min-width:90px!important;padding:0 6px!important}
#st-source-toolbar {width:max-content!important;max-width:calc(100% - 12px)!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls,#st-source-toolbar .format-toolbar #st-source-audio-controls[style] {width:32px!important;min-width:32px!important;flex-basis:32px!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn {width:32px!important;min-width:32px!important}
}
@media(max-width:380px){
#st-source-toolbar {width:max-content!important;max-width:calc(100% - 12px)!important}
#st-source-toolbar .format-toolbar {gap:0!important}
#st-source-toolbar .format-toolbar :is(.format-separator,.format-divider) {margin:0 3px!important}
}
@media(prefers-reduced-motion:reduce){
#st-source-toolbar .format-toolbar .ed-tts-loading-ring {animation:none!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn {transition:none!important}
}
/* Soft voice menu: left-hand sample circles and one quiet selected row. */
#st-source-toolbar .format-toolbar #ed-voice-popover.active {animation:ed-tray-reveal 140ms ease-out}
@media(max-width:600px){
#st-source-toolbar {padding:6px!important}
#st-calm-heading-popover {padding:12px!important}
#st-calm-heading-popover .calm-pop-grid {grid-template-columns:minmax(0,1fr)!important}
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron {width:68px!important;min-width:68px!important}
#st-source-toolbar .format-toolbar .ed-clear-toolbar-btn {margin-left:0!important}
}
@media(prefers-reduced-motion:reduce){
#st-calm-heading-popover.open,#st-source-toolbar .format-toolbar #ed-voice-popover.active,#st-source-toolbar .format-toolbar #ed-voice-popover .sk-voice-preview.playing svg,#st-source-toolbar .format-toolbar #sourceTtsBtn[data-tts-state="playing"]::after,#st-source-toolbar .format-toolbar #sourceTtsBtn .loading-spinner,#st-source-toolbar .format-toolbar #st-source-audio-controls[style*="display: flex"] {animation:none!important}
}


/* Compact columns follow the editor's narrower tablet layout. */
@media(max-width:1100px){
#st-calm-heading-popover .calm-pop-grid {grid-template-columns:minmax(0,1fr)!important}
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
#st-source-toolbar .format-toolbar #clearBtn {padding:0!important;box-sizing:border-box!important}
@media(max-width:380px){
#st-source-toolbar .format-toolbar .calm-heading-trigger {width:38px!important;min-width:38px!important;padding:0!important}
#st-source-toolbar .calm-heading-trigger .calm-trigger-label {display:none!important}
}

/* Reading follows text glyphs only; no block wash, dimming or layout changes. */
::highlight(read-aloud){background-color:#dce9dc;color:#243d30}
[data-theme="dark"] ::highlight(read-aloud){background-color:#455d4a;color:#f5f5ee}

/* The split tablet editor is narrower than the phone's full-width editor. */
@media(min-width:768px) and (max-width:850px){
#st-source-toolbar .format-toolbar .calm-heading-trigger {width:38px!important;min-width:38px!important;padding:0!important}
#st-source-toolbar .calm-heading-trigger .calm-trigger-label {display:none!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron {width:68px!important;min-width:68px!important}
#st-source-toolbar .format-toolbar > .format-divider {display:none!important}
}
/* Base layout from Skriv's shared editor stylesheet. */
#st-source-toolbar {gap:10px!important;align-items:center!important}
#st-source-toolbar .format-toolbar {display:flex!important;align-items:center!important;gap:4px!important;height:42px!important;flex-wrap:nowrap!important}
#st-source-toolbar .format-group {display:flex!important;align-items:center!important;height:42px!important;flex-wrap:nowrap!important}
#st-source-toolbar .ed-injected-right {display:flex!important;align-items:center!important;flex:0 0 auto!important}
#st-source-toolbar .ed-voice-wrap {display:flex!important;align-items:center!important;height:38px!important}
#st-source-toolbar .ctl-sub {display:flex!important;align-items:center!important;flex:0 0 auto!important}
#st-source-toolbar #micBtn {width:36px!important;min-width:36px!important;padding:0!important}
#st-source-toolbar .format-btn {display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;box-sizing:border-box!important}
#st-source-toolbar .format-toolbar .calm-heading-trigger {padding:0 10px!important}
#st-source-toolbar .format-toolbar .ed-voice-chevron {padding:0 8px!important}
@media(max-width:1100px){#st-source-toolbar{gap:4px!important}#st-source-toolbar .format-toolbar{gap:2px!important}}
@media(max-width:380px){#st-source-toolbar{gap:0!important}#st-source-toolbar .format-toolbar{gap:0!important}#st-source-toolbar .format-toolbar .calm-heading-trigger{padding:0!important}}
#st-source-toolbar #calmTriggerBtn {width:auto!important;min-width:82px!important;gap:8px!important;font:600 15px/15px var(--font-family,Inter,Arial,sans-serif)!important}
#st-source-toolbar #calmTriggerBtn::before {font-family:var(--font-family,Inter,Arial,sans-serif)!important}
@media(max-width:1100px){#st-source-toolbar #calmTriggerBtn{width:90px!important;min-width:90px!important;padding:0 6px!important}}
@media(max-width:380px),(min-width:768px) and (max-width:850px){#st-source-toolbar #calmTriggerBtn{width:38px!important;min-width:38px!important;padding:0!important}}
#st-source-toolbar .ctl-sub::after {margin:0 0 0 10px!important}
/* Match the current shared dark-mode toolbar override as well as component tokens. */
[data-theme="dark"] #st-source-toolbar .format-toolbar .format-btn {color:rgba(232,221,212,.66)!important}
[data-theme="dark"] #st-source-toolbar .format-toolbar .format-btn:disabled {color:rgba(232,221,212,.24)!important}
[data-theme="dark"] #st-source-toolbar .format-toolbar .format-btn:is(.active,[aria-pressed="true"],[aria-expanded="true"]) {color:var(--ed-active-ink)!important}
#st-calm-heading-popover .calm-popover-btn {line-height:18px!important}
#st-calm-heading-popover .calm-popover-btn .st-calm-popover-label {font-weight:inherit!important}
/* Keep the complete toolbar on one line inside the translator's narrow pane. */
@media(max-width:600px){
#st-source-toolbar{flex-wrap:nowrap!important;gap:0!important;height:56px!important}
#st-source-toolbar .format-toolbar{gap:0!important;flex-shrink:0!important}
#st-source-toolbar #calmTriggerBtn{width:38px!important;min-width:38px!important;padding:0!important}
#st-source-toolbar #calmTriggerBtn .calm-trigger-label{display:none!important}
#st-source-toolbar .format-toolbar .format-btn,#st-source-toolbar #micBtn{width:32px!important;min-width:32px!important}
#st-source-toolbar .format-toolbar #sourceTtsBtn{width:32px!important;min-width:32px!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron{width:60px!important;min-width:60px!important}
#st-source-toolbar .format-toolbar :is(.format-divider,.format-separator){margin:0 3px!important}
#st-source-toolbar .ctl-sub::after{margin:0 6px 0 0!important}
#st-source-toolbar .format-toolbar #st-source-audio-controls,#st-source-toolbar .format-toolbar #sourceStopBtn{width:28px!important;min-width:28px!important;flex-basis:28px!important}
}
@media(max-width:350px){
#st-source-toolbar .format-toolbar .format-btn,#st-source-toolbar #micBtn,#st-source-toolbar .format-toolbar #sourceTtsBtn{width:28px!important;min-width:28px!important}
#st-source-toolbar .format-toolbar .format-group .ed-voice-chevron{width:52px!important;min-width:52px!important;padding:0 3px!important}
#st-source-toolbar .format-toolbar :is(.format-divider,.format-separator),#st-source-toolbar .ctl-sub::after{display:none!important}
}
@media(max-width:600px){#st-source-toolbar .format-toolbar #st-source-audio-controls #sourceStopBtn{width:28px!important;min-width:28px!important}}
[data-theme="dark"] #st-source-toolbar .format-toolbar :is(#calmTriggerBtn,#ed-voice-chevron,#sourceUndoBtn,#sourceRedoBtn,#sourceTtsBtn,#clearBtn){color:rgba(232,221,212,.66)!important}
[data-theme="dark"] #st-source-toolbar .format-toolbar :is(#sourceUndoBtn,#sourceRedoBtn,#sourceTtsBtn,#clearBtn):disabled{color:rgba(232,221,212,.24)!important}
[data-theme="dark"] #st-source-toolbar .format-toolbar :is(#calmTriggerBtn,#ed-voice-chevron)[aria-expanded="true"]{color:var(--ed-active-ink)!important}
#st-calm-heading-popover .calm-popover-btn .calm-format-name {font:inherit!important}
/* Columns follow the tray's own width, not the viewport: a compact source panel (<560px) opens a
   360px tray even on wide screens, where the 2+4 column desktop grid clipped and overlapped labels. */
#st-calm-heading-popover {container-type:inline-size}
/* Long localized labels (Nummereret liste) wrap at spaces instead of running under the next cell;
   a single word that still cannot fit is ellipsized (full name stays in title/aria-label). */
html body #st-calm-heading-popover .calm-popover-btn .calm-format-name {min-width:0;white-space:normal!important;overflow:hidden;text-overflow:ellipsis}
@container (min-width:520px){
/* Wide tray: size columns to their labels so Fed/Citat give room to Gennemstregning. */
#st-calm-heading-popover .calm-pop-grid {grid-template-columns:repeat(2,minmax(0,auto))!important}
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:repeat(4,minmax(0,auto))!important}
}
@container (max-width:519px){
#st-calm-heading-popover .calm-pop-grid {grid-template-columns:minmax(0,1fr)!important}
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@container (max-width:279px){
#st-calm-heading-popover .calm-popover-section:last-child .calm-pop-grid {grid-template-columns:minmax(0,1fr)!important}
}
/* Approved toolbar exception to the live mobile baseline. Keep its own row
   above the live Foto/Dikter/Indsæt shortcuts without resizing either pane. */
@media(max-width:767px){
html body .translate-page .split-translator #st-source-toolbar{
 display:flex!important;position:absolute!important;left:50%!important;right:auto!important;
 bottom:54px!important;transform:translateX(-50%)!important;margin:0!important;z-index:70!important;
}
html body .translate-page .split-translator .st-source-editor .ql-editor{padding-bottom:124px!important}
}
#st-source-toolbar button svg,#st-source-toolbar button svg * {pointer-events:none}

/* Result actions use the same surface and control geometry as the source toolbar. */
.translate-page #main-content .st-target-wrap > .st-floating-actions {
  background:var(--ed-paper)!important;border:1px solid var(--ed-border)!important;
  border-radius:16px!important;padding:6px 10px!important;gap:4px!important;
  box-shadow:0 5px 16px #443c3512!important;min-height:56px!important;
}
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn {
  width:36px!important;height:38px!important;min-width:36px!important;
  border-radius:8px!important;background:transparent!important;color:var(--ed-ink)!important;
  border:1px solid transparent!important;box-shadow:none!important;transform:none!important;
  transition:background-color 120ms,color 120ms!important;
}
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn svg {width:18px!important;height:18px!important;stroke-width:1.8!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn:is(:hover,:focus-visible):not(:disabled) {background:var(--ed-hover)!important;outline:none!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn:focus-visible {border-color:var(--ed-active-ink)!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions #chatIconBtn.active {background:var(--ed-active)!important;color:var(--ed-active-ink)!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn:disabled {opacity:.35!important;cursor:default!important}
[data-theme="dark"] .translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn {color:rgba(232,221,212,.66)!important}
/* Match Skriv's single loading ring and steady playback glyph; supersede the legacy TTS pulse. */
.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn) {animation:none!important;box-shadow:none!important}
.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn) > svg {visibility:visible!important;opacity:1!important;transform:none!important;animation:none!important}
.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn)::after {content:none!important;animation:none!important}
.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn):is([data-tts-state="loading"],[data-tts-state="playing"],[data-tts-state="paused"]) {background:var(--ed-active)!important;color:var(--ed-active-ink)!important}
.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn) .ed-tts-loading-ring {position:absolute;inset:5px;border:1.5px solid var(--ed-border);border-top-color:var(--ed-active-ink);border-radius:50%;animation:ed-tts-spin .9s linear infinite;pointer-events:none}
@media(pointer:coarse){.translate-page #main-content .st-target-wrap > .st-floating-actions .st-float-btn{width:44px!important;min-width:44px!important;height:44px!important}}
@media(prefers-reduced-motion:reduce){.translate-page #main-content :is(#sourceTtsBtn,#ttsBtn) .ed-tts-loading-ring{animation:none!important}}
/* Preserve access to the result actions at phone widths. */
@media(max-width:767px){
.translate-page #main-content .st-target-wrap > .st-floating-actions #chatIconBtn,
.translate-page #main-content .st-target-wrap > .st-floating-actions #downloadBtn,
.translate-page #main-content .st-target-wrap > .st-floating-actions .st-download-wrap{display:flex!important}
}

/* The chat opener names the task; long localized labels may wrap without hiding actions. */
.translate-page #main-content .st-target-wrap > .st-floating-actions{width:max-content!important;height:auto!important;max-width:calc(100% - 24px)!important;box-sizing:border-box!important;flex-wrap:wrap!important;justify-content:center!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions #chatIconBtn{flex:0 1 auto!important;width:auto!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:38px!important;padding:8px 10px!important;gap:7px!important;font-family:inherit!important;font-size:13px!important;font-weight:500!important;line-height:1.4!important;border-radius:8px!important;white-space:normal!important}
.translate-page #main-content .st-target-wrap > .st-floating-actions #chatIconBtn span{display:block;min-width:0}
@media(pointer:coarse){.translate-page #main-content .st-target-wrap > .st-floating-actions #chatIconBtn{min-height:44px!important}}

/* #6365: match Writing's 2px mic stroke on Translation source toolbar. */
#st-source-toolbar #micBtn svg {color:inherit!important}
#st-source-toolbar #micBtn svg :is(path,line,rect,circle,polyline) {stroke-width:2px!important}