/* ax-settings.css - host file of the YouTube bar on this sub-site (the same tokens as speclang.pro's file, mapped to this site's own variables where it has them).
   The bar itself uses fixed panel colours (the speclang.pro shop panel), so it looks the same on every site. */
:root {
  --ax-surface: var(--surface, #fff);
  --ax-text: var(--text, #172330);
  --ax-muted: var(--muted, #5b6b73);
  --ax-line: var(--line, #d9d6cc);
  --ax-accent: var(--accent, #124a6b);
  --ax-shell: 1rem;
  --ax-panel-a: #0d293a;
  --ax-panel-b: #134b55;
  --ax-panel-text: #f8fbf5;
  --ax-panel-accent: #a9e4c0;
  --ax-youtube: #c4161c;
}
/* cross-links (app / form) in the top menu: fact hides its header nav below 1200 px (workspace.css), so the phone had no menu at all; show it as a wrapping row of the same links */
@media (max-width: 1200px) { .suite-header > nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; } }

/* compact header (ax-header.js, owner 2026-10-08): title + menu button; the menu, language, appearance and share rows open under it */
.axh-toggle { display: none; }
header.axh-compact { flex-direction: row; flex-wrap: wrap; align-items: center; row-gap: .7rem; }   /* app stacks its header in a column on phones */
header.axh-compact > :is(.brand, .news-identity) { flex: 1 1 0; min-inline-size: 0; }   /* title and menu button share the first row */
header.axh-compact > .axh-toggle { display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto; min-inline-size: 46px; min-block-size: 44px;
  padding: 0 .85rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
header.axh-compact > .axh-toggle[aria-expanded="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
header.axh-compact > .axh-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
header.axh-compact:not(.axh-open) > :not(.brand):not(.news-identity):not(.axh-toggle) { display: none !important; }
header.axh-compact.axh-open > :not(.brand):not(.news-identity):not(.axh-toggle) { flex-basis: 100%; }
/* YouTube bar on narrow phones: one line (icon, live count, Subscribe); the channel name stays for screen readers */
/* (selectors carry [data-ax-ytbar] because ax-youtube-bar.css loads after this file) */
@media (max-width: 480px) {
  .ax-ytbar[data-ax-ytbar] { column-gap: .5rem; }   /* round E: the row may wrap - a long Subscribe word (ta, Binary) takes a second line instead of being cut */
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__yt { display: none; }   /* Google's count widget already shows the YouTube mark */
  .ax-ytbar[data-ax-ytbar] .ax-ytbar__cta { max-inline-size: 100%; padding-inline: .6rem; font-size: .74rem; white-space: normal; overflow-wrap: anywhere; text-align: center; }   /* round E: long Subscribe words (hy, ta, Binary) wrap inside the button instead of overflowing */
}

/* rotating deals bar (ax-dealbar.js, owner 2026-10-08): one slim line under the YouTube bar, same panel colours.
   Round E fix (owner 2026-10-10: the bar "on certain window sizes" showed its offers on top of each other): an offer is never squeezed below
   its own width any more. Before, every <li> could shrink to 0 px while its link stayed one unbreakable line, so whenever the bar did not
   rotate (reduced motion, the site's light / low modes, high contrast, a single offer, and the moment before the script runs) all offers were
   painted over each other and the title / labels were cut to a few letters ("OFE..."). Now the bar always shows ONE whole offer on one line:
   rotating = every 5 s (as before); not rotating = the same line without the timer, the dots switch offers by hand; before the script runs =
   the first offer. Inside an offer only the product name may end in an ellipsis (at least 12 characters stay); when the line is still too
   narrow, ax-dealbar.js drops parts in the same order as the narrow-screen rules below (countdown + title, then label, then the name) -
   classes ax-fit-1 / -2 / -3 on the bar.
   Host colours / fonts (ax-settings.css of each site): --ax-deal-bg, --ax-deal-line, --ax-deal-pct, --ax-deal-dot, --ax-deal-focus,
   --ax-title-font; the defaults are speclang.pro's. */
.ax-dealbar { display: flex; align-items: center; justify-content: center; gap: .7rem; min-block-size: 36px; padding: .3rem var(--ax-shell, 1rem);
  background: var(--ax-deal-bg, #0a2230); color: var(--ax-panel-text); font-size: .8rem; line-height: 1.25; border-block-end: 1px solid var(--ax-deal-line, #ffffff1f); }
.ax-dealbar__title { flex: none; color: var(--ax-panel-accent); font-family: var(--ax-title-font, inherit); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ax-dealbar__list { position: relative; display: flex; margin: 0; padding: 0; list-style: none; min-inline-size: 0; overflow: hidden; }
.ax-dealbar__item { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; }
.ax-dealbar__item ~ .ax-dealbar__item { display: none; }   /* before the script runs: the first offer only (= the first rotation step, no jump) */
.ax-dealbar:is(.is-rotating, .is-static) .ax-dealbar__item { display: none; }
.ax-dealbar:is(.is-rotating, .is-static) .ax-dealbar__item.is-current { display: block; }
.ax-dealbar__item a { display: inline-flex; align-items: baseline; gap: .45rem; max-inline-size: 100%; color: inherit; text-decoration: none; white-space: nowrap; }
.ax-dealbar__item a:is(:hover, :focus-visible) .ax-dealbar__name, .ax-dealbar__item a:is(:hover, :focus-visible) .ax-dealbar__label { text-decoration: underline; }
.ax-dealbar__item a:focus-visible { outline: 2px solid var(--ax-deal-focus, #fff); outline-offset: -2px; }   /* inside the link: the list clips everything outside its box */
.ax-dealbar__item a > * { flex-shrink: 0; }   /* shop, label, percent, countdown and arrow keep their width; only the product name may ellipsize */
.ax-dealbar__item a > .ax-dealbar__name { flex-shrink: 1; }
.ax-dealbar__shop { font-weight: 750; }
.ax-dealbar__label { opacity: .85; }
.ax-dealbar__name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; }
.ax-dealbar__name:empty { display: none; }
.ax-dealbar__pct { color: var(--ax-deal-pct, #ffd27a); font-weight: 800; direction: ltr; unicode-bidi: isolate; }   /* "−25%" reads the same in right-to-left editions */
.ax-dealbar time { opacity: .75; font-variant-numeric: tabular-nums; }
.ax-dealbar time:empty { display: none; }
.ax-dealbar__dots { display: inline-flex; flex-shrink: 0; gap: .35rem; }
html[lang="zxx"] .ax-dealbar time { display: none; }
.ax-dealbar__dots[hidden] { display: none; }
.ax-dealbar__dots button { inline-size: 20px; block-size: 20px; min-inline-size: 0; min-block-size: 0; padding: 0; border: 0; border-radius: 50%;   /* app gives buttons a 44 px minimum: the dots keep a 20 px hit area */
  background: radial-gradient(circle, var(--ax-deal-dot, #ffffff59) 0 4.5px, transparent 5px); cursor: pointer; }
.ax-dealbar__dots button[aria-current="true"] { background: radial-gradient(circle, var(--ax-panel-accent) 0 4.5px, transparent 5px); }
.ax-dealbar__dots button:focus-visible { outline: 2px solid var(--ax-deal-focus, #fff); outline-offset: 0; }
.ax-dealbar.is-rotating .ax-dealbar__item.is-current { animation: ax-dealbar-in .35s ease both; }
@keyframes ax-dealbar-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ax-dealbar__item.is-current { animation: none; } }
@media (max-width: 760px) { .ax-dealbar__title, .ax-dealbar time { display: none; } }
@media (max-width: 480px) { .ax-dealbar { font-size: .74rem; gap: .5rem; } .ax-dealbar__label { display: none; } .ax-dealbar.is-rotating .ax-dealbar__dots { display: none; } }
.ax-dealbar.ax-fit-1 .ax-dealbar__title, .ax-dealbar.ax-fit-1 time { display: none; }
.ax-dealbar.ax-fit-2 .ax-dealbar__label, .ax-dealbar.ax-fit-2.is-rotating .ax-dealbar__dots { display: none; }   /* without rotation the dots stay: they are the way to the other offers */
.ax-dealbar.ax-fit-3 .ax-dealbar__name { display: none; }
.ax-dealbar__item.is-measure { display: block !important; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: max-content; max-inline-size: none; visibility: hidden; animation: none; }