/* #region zone:desk.style.regime-live — แถบสภาพตลาดสด: ป้ายสด ตัวเลขวันนี้ มาตรผันผวน เส้นราคาย่อ */
/* Live layer of the regime strip (feature.desk_regime_live). Tokens only, so light and dark follow automatically.
   Three moods through data-vol on the tile: calm (1-2), normal (3), high (4-5). Every animation sits inside a
   prefers-reduced-motion: no-preference query, so reduced motion removes them all. */
.regime-item {
  --meter: var(--accent-text);
}
.regime-item[data-vol='calm'] {
  --meter: var(--up);
}
.regime-item[data-vol='normal'] {
  --meter: var(--accent-text);
}
.regime-item[data-vol='high'] {
  --meter: var(--amber);
}
.regime-item[data-vol='high'][data-level='5'] {
  --meter: var(--down);
}
.regime-item[data-live] .regime-title {
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}

/* LIVE badge / closed note, right end of the tile title */
.regime-live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  font-size: var(--u-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.regime-live[hidden] {
  display: none;
}
.regime-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  flex: none;
}
.regime-live[data-state='closed'] .regime-live-dot {
  display: none;
}
.regime-live-text {
  padding-inline: var(--u-space-1);
  border-radius: var(--u-radius-pill);
  background: var(--u-sheet);
}
.regime-live[data-state='open'] .regime-live-text {
  color: var(--up);
}

/* Numbers that count and flash */
.regime-num {
  font-variant-numeric: tabular-nums;
  border-radius: 4px;
  padding: 0 2px;
}
.regime-fact[hidden] {
  display: none;
}
.regime-today[hidden] {
  display: none;
}
.regime-today .regime-num {
  font-weight: 600;
  color: var(--text);
}
.regime-today .regime-num[data-dir='up'] {
  color: var(--up);
}
.regime-today .regime-num[data-dir='down'] {
  color: var(--down);
}

/* Volatility row: 5-segment meter, mood label, intraday sparkline */
.regime-live-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
}
.regime-live-row[hidden] {
  display: none;
}
.regime-meter {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.regime-meter i {
  width: 14px;
  height: 6px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 28%, transparent);
  transition:
    background-color 300ms var(--ease-out),
    transform 300ms var(--ease-out);
}
.regime-meter i.on {
  background: var(--meter);
}
.regime-vol-label {
  font-size: var(--u-text-xs);
  color: var(--muted);
  min-width: 0;
}
.regime-item[data-vol='high'] .regime-vol-label {
  color: var(--meter);
  font-weight: 600;
}
.regime-spark {
  width: 72px;
  height: 20px;
  flex: none;
  margin-left: auto;
  overflow: visible;
  color: var(--up);
}
.regime-spark[data-dir='down'] {
  color: var(--down);
}
.regime-spark-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* High mood: the tile border glows and pulses */
.regime-item[data-vol='high'] {
  border-color: var(--meter);
}

/* Board (compact one-row band): badge beside the title and the meter; its short mood word (ผันผวนต่ำ…) shows from
   1100px up — below that the band is too tight, and the meter's aria-label still says it. No sparkline. */
:root[data-board] .regime-live {
  margin-left: 0;
}
:root[data-board] .regime-live-row {
  flex-wrap: nowrap;
  gap: var(--sp-2);
}
:root[data-board] .regime-spark {
  display: none;
}
:root[data-board] .regime-vol-label {
  white-space: nowrap;
}
@media (max-width: 1099px) {
  :root[data-board] .regime-vol-label {
    display: none;
  }
}
:root[data-board] .regime-meter i {
  width: 10px;
}
:root[data-board] .regime-item[data-vol='high'] {
  border-color: transparent;
}
/* The band never clips: breadth goes first, then the 200-day fact, before the chip, badge, today and meter. */
:root[data-board] .regime-item[data-live] .regime-fact:nth-child(4) {
  display: none;
}
@media (max-width: 1099px) {
  :root[data-board] .regime-item[data-live] .regime-fact:nth-child(1) {
    display: none;
  }
}
@media (max-width: 1099px) and (min-width: 900px) {
  :root[data-board] .regime-facts .regime-fact.regime-today:not([hidden]) {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .regime-live[data-state='open'] .regime-live-dot {
    animation: regimeLivePulse 2.4s ease-in-out infinite;
  }
  .regime-num.flash-up {
    animation: regimeFlashUp 900ms ease-out;
  }
  .regime-num.flash-down {
    animation: regimeFlashDown 900ms ease-out;
  }
  .regime-item[data-vol='calm'] .regime-spark {
    animation: regimeSparkCalm 7s ease-in-out infinite alternate;
  }
  .regime-item[data-vol='high'] {
    animation: regimeGlow 2.2s ease-in-out infinite;
  }
  .regime-item[data-vol='high'] .regime-spark {
    animation: regimeSparkHigh 1.4s ease-in-out infinite alternate;
  }
  .regime-item[data-vol='high'] .regime-meter i.on {
    animation: regimeSegment 2.2s ease-in-out infinite;
  }
  :root[data-board] .regime-item[data-vol='high'] {
    animation: none;
  }
  :root[data-board] .regime-item[data-vol='high'] .regime-title {
    animation: regimeGlow 2.2s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .regime-meter i {
    transition: none;
  }
}
@keyframes regimeLivePulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 50%, transparent);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 5px transparent;
  }
}
@keyframes regimeFlashUp {
  from {
    background: var(--up-soft);
  }
  to {
    background: transparent;
  }
}
@keyframes regimeFlashDown {
  from {
    background: var(--down-soft);
  }
  to {
    background: transparent;
  }
}
@keyframes regimeSparkCalm {
  from {
    opacity: 0.6;
    transform: translateY(-1px);
  }
  to {
    opacity: 1;
    transform: translateY(1px);
  }
}
@keyframes regimeSparkHigh {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
@keyframes regimeSegment {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}
@keyframes regimeGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--meter) 0%, transparent),
      0 0 4px 0 color-mix(in srgb, var(--meter) 20%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--meter) 55%, transparent),
      0 0 16px 2px color-mix(in srgb, var(--meter) 42%, transparent);
  }
}
/* #endregion */