/* Two media icons share the established appearance row. Options float above
   the document instead of changing the masthead's measured footprint. */
#rg-news-bars .nb-listening-controls {
  display:inline-flex;align-items:center;flex:none;gap:1px;min-width:0;
  position:relative;order:1;margin-inline-start:7px;padding:0;
  border:0;border-radius:6px;color:var(--rg-crimson,var(--nb-red));
  background:var(--nb-soft);
  background:color-mix(in srgb,var(--rg-crimson,var(--nb-red)) 11%,var(--nb-paper));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rg-crimson,var(--nb-red)) 30%,transparent);
}
/* Keep the original first-paint header footprint while localization and the
   controller attach these two icons to the existing appearance group. */
#rg-news-bars .nb-reader-header > .nb-listening-controls {display:none}
html[dir=rtl] #rg-news-bars .nb-listening-controls {order:-1;margin-inline-start:0;margin-inline-end:7px}
#rg-news-bars .nb-listening-controls > :is(button,a) {
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;min-height:28px;margin:0;padding:0;
  border:1px solid transparent;border-radius:4px;background:transparent;
  color:inherit;font:inherit;text-decoration:none;cursor:pointer;
}
#rg-news-bars .nb-listening-controls > :is(button,a):hover {background:color-mix(in srgb,var(--rg-crimson,var(--nb-red)) 17%,transparent)}
#rg-news-bars .nb-listening-controls > button[aria-pressed=true] {background:var(--rg-crimson,var(--nb-red));border-color:var(--rg-crimson,var(--nb-red));color:var(--rg-on-crimson,var(--nb-paper))}
#rg-news-bars .nb-listening-controls > button:is(:disabled,[aria-disabled=true]) {opacity:.45;cursor:default}
#rg-news-bars .nb-listening-controls > [data-reader-listen] {position:relative}
#rg-news-bars .nb-listening-controls > [data-reader-listen][aria-busy=true]::after {
  content:'';position:absolute;width:20px;height:20px;box-sizing:border-box;
  border:1.5px solid currentColor;border-inline-end-color:transparent;border-radius:50%;
  opacity:.7;pointer-events:none;animation:nb-audio-loading 1.4s linear infinite;
}
@keyframes nb-audio-loading {to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce) {
  #rg-news-bars .nb-listening-controls > [data-reader-listen][aria-busy=true]::after {animation:none}
}
html[data-rg-motion=reduce] #rg-news-bars .nb-listening-controls > [data-reader-listen][aria-busy=true]::after {animation:none}
#rg-news-bars .nb-listening-controls :is(button,a,select):focus-visible {outline:3px solid var(--rg-focus,var(--nb-gold));outline-offset:3px}
#rg-news-bars .nb-listening-controls svg {display:block;flex:none;pointer-events:none;width:16px;height:16px}
#rg-news-bars .nb-listening-controls [data-reader-listen-icon] {display:flex;align-items:center}
.nb-listening-options {
  position:absolute;inset:auto 0 auto auto;top:calc(100% + 8px);
  width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 24px);
  overflow:auto;box-sizing:border-box;margin:0;padding:13px;z-index:60;
  display:grid;grid-template-columns:40px 40px 1fr;gap:10px;
  border:1px solid var(--nb-line,var(--rg-border));border-radius:8px;
  background:var(--nb-paper,var(--rg-page));color:var(--nb-ink,var(--rg-ink));
  box-shadow:0 10px 28px #0003;font:400 12px/1.7 Vazirmatn,system-ui,sans-serif;
}
.nb-listening-options[hidden] {display:none!important}
.nb-listening-options:popover-open {position:fixed;inset:auto;display:grid}
html[dir=rtl] .nb-listening-options {right:0;left:auto}
html[dir=rtl] .nb-listening-options:popover-open {right:auto}
.nb-listening-options :is(button,select) {display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:0;padding:6px 9px;border:1px solid var(--nb-line,var(--rg-border));border-radius:4px;background:var(--nb-soft,var(--rg-surface));color:inherit;font:inherit;cursor:pointer}
.nb-listening-options button:disabled {opacity:.45;cursor:default}
.nb-listening-options svg {width:18px;height:18px}
.nb-listening-options .nb-listening-speed {justify-self:end;display:flex}
.nb-listening-options select {width:80px;direction:ltr}
.nb-listening-title {grid-column:1/-1;min-width:0;overflow-wrap:anywhere;color:var(--nb-muted,var(--rg-muted));font-size:12px;line-height:1.8}
html[dir=rtl] .nb-listening-nav svg {transform:scaleX(-1)}
#rg-news-bars [data-news-id].is-listening {outline:2px solid var(--nb-gold);outline-offset:3px;border-radius:var(--nb-radius)}
@media(pointer:coarse) {
  #rg-news-bars .nb-listening-controls > :is(button,a) {width:44px;height:44px;min-height:44px}
  .nb-listening-options :is(button,select) {min-height:44px}
}
@media(max-width:580px) and (pointer:coarse) {
  #rg-news-bars .nb-reader-header .rg-theme-control {gap:0;overflow-x:auto;scrollbar-width:none}
  #rg-news-bars .nb-reader-header .nb-listening-controls {gap:0;margin:0;padding:0;border:0}
  #rg-news-bars .nb-reader-header .rg-theme-control .nb-language-control,
  #rg-news-bars .nb-reader-header .rg-theme-control .rg-theme-contrast {margin-inline-start:0}
}
@media(forced-colors:active) {
  #rg-news-bars .nb-listening-controls > :is(button,a),.nb-listening-options,.nb-listening-options :is(button,select) {border-color:ButtonText}
}
@media print {#rg-news-bars .nb-listening-controls,.nb-listening-options {display:none!important}}