/* #region zone:desk.style.news-ticker — แถบข่าวเศรษฐกิจวันนี้ใต้แถบสภาพตลาด */
/* The daily economy news crawl (feature.desk_news_ticker, desk-news-ticker.js): one line at every width, a pinned
   label on the left, the headlines running right-to-left in an endless loop, a pause button on the right. The motion
   is one transform animation on a track of two identical copies (0 → −50%). Tokens only, so light and dark follow. */
.news-ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-inner);
  overflow: hidden;
}
.news-ticker[hidden] {
  display: none;
}
.nt-head {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-1);
  border-radius: 6px;
  color: var(--text);
  font-size: var(--u-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: help;
}
.nt-head svg {
  flex: none;
  color: var(--accent-text);
}
.nt-head:focus-visible,
.nt-link:focus-visible,
.nt-pause:focus-visible {
  outline: 2px solid var(--acc-ring);
  outline-offset: 2px;
}
.nt-viewport {
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-left: 1px solid var(--line);
  /* Soft edges, so headlines glide in and out instead of being cut. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 24px,
    #000 calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.nt-track {
  display: flex;
  flex: none;
  width: max-content;
}
.nt-track.nt-run {
  animation: nt-crawl var(--nt-seconds, 60s) linear infinite;
  will-change: transform;
}
@keyframes nt-crawl {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* Pause: pointer over the band, keyboard focus inside it, a finger held on it, the pause button, a hidden tab. */
.news-ticker:hover .nt-track,
.news-ticker:focus-within .nt-track,
.news-ticker[data-hold] .nt-track,
.news-ticker[data-paused] .nt-track,
.news-ticker[data-tab-hidden] .nt-track {
  animation-play-state: paused;
}
.nt-copy {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nt-item {
  flex: none;
  display: flex;
  align-items: center;
}
.nt-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  border-radius: 6px;
  color: var(--text);
  font-size: var(--u-text-sm);
  text-decoration: none;
  white-space: nowrap;
}
.nt-link:hover .nt-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nt-chip {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--u-text-xs);
  font-weight: 700;
  line-height: 18px;
}
.nt-chip.nt-th {
  background: var(--acc-soft);
  color: var(--accent-text);
}
.nt-chip.nt-world {
  background: var(--ai-soft);
  color: var(--ai);
}
.nt-title {
  font-weight: 500;
}
.nt-meta {
  flex: none;
  color: var(--faint);
  font-size: var(--u-text-xs);
}
/* The divider between headlines (also after the last one, so both copies are identical and the seam is exact). */
.nt-sep {
  flex: none;
  width: 4px;
  height: 4px;
  margin: 0 var(--sp-5, 20px);
  border-radius: 50%;
  background: var(--faint);
  opacity: 0.55;
}
.nt-pause {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.nt-pause:hover {
  background: var(--hover);
  color: var(--text);
}
.nt-pause[aria-pressed='true'] {
  background: var(--acc-soft);
  border-color: transparent;
  color: var(--accent-text);
}
/* Reduced motion: no animation, one plain copy that scrolls by hand. */
@media (prefers-reduced-motion: reduce) {
  .nt-track.nt-run {
    animation: none;
  }
  .nt-viewport {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .nt-pause {
    display: none;
  }
  /* DUI-11: by hand-scroll each headline fits the viewport and ends in an ellipsis, never under the pause button. */
  .nt-viewport {
    container-type: inline-size;
  }
  .nt-item {
    max-width: calc(100cqw - var(--sp-2));
  }
  .nt-link {
    min-width: 0;
    max-width: 100%;
  }
  .nt-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Desk phones (bottom tabs, < 900 px): the chart tab keeps its full height, as the regime strip does. */
@media (max-width: 899px) {
  #app-shell[data-mobile-tab='chart'] .news-ticker {
    display: none;
  }
}
/* Touch and phones: still one line; the pause button grows to a 44 px target. */
@media (max-width: 600px), (pointer: coarse) {
  .news-ticker {
    height: 52px;
    gap: var(--sp-2);
  }
  .nt-pause {
    width: 44px;
    height: 44px;
  }
}
@media (max-width: 600px) {
  .nt-head svg {
    display: none;
  }
  .nt-head {
    font-size: var(--u-text-xs);
  }
}
/* #endregion */

/* #region zone:desk.board.style.news-ticker — แถบข่าวบน Super_T Board: แถบเต็มความกว้างใต้แถบสภาพตลาด */
/* On the Board the band follows the regime band under the header (desk-board.js moves both): one calm full-width
   row. The side panes' sticky offsets grow by the band's height so nothing slides under it. */
:root[data-board] .app-shell:has(> #news-ticker:not([hidden])) {
  --news-h: 40px;
}
@media (max-width: 600px), (max-width: 899px) and (pointer: coarse) {
  :root[data-board] .app-shell:has(> #news-ticker:not([hidden])) {
    --news-h: 52px;
  }
}
@media (min-width: 900px) {
  :root[data-board] .app-shell:has(> #news-ticker:not([hidden])) {
    --side-top: calc(var(--head-h) + var(--board-band-h) + var(--news-h) + var(--gap));
    --side-h: calc(100vh - var(--head-h) - var(--board-band-h) - var(--news-h) - 2 * var(--gap));
  }
  @supports (height: 100dvh) {
    :root[data-board] .app-shell:has(> #news-ticker:not([hidden])) {
      --side-h: calc(100dvh - var(--head-h) - var(--board-band-h) - var(--news-h) - 2 * var(--gap));
    }
  }
  :root[data-board] .app-shell > .news-ticker {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--head-h) + var(--board-band-h));
    z-index: 28;
    height: var(--news-h);
    padding: 0 var(--sp-3) 0 var(--sp-5);
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  :root[data-board] .app-shell > .news-ticker .nt-head {
    color: var(--muted);
    font-weight: 500;
  }
}
@media (max-width: 899px) {
  :root[data-board] .app-shell > .news-ticker {
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding-left: var(--sp-4);
  }
}
/* #endregion */