/* Валютный монитор — тёмное табло для настенного экрана (4K 75", в том числе повёрнутого) */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #080b12;
  --bg-soft:     #0d111b;
  --card:        #151a26;
  --card-line:   rgba(255, 255, 255, .04);
  --line:        #232a3a;

  --ink:         #ffffff;
  --ink-dim:     #8a93a6;
  --ink-faint:   #5b6478;

  --up:          #2fbf71;
  --down:        #f05561;
  --flat:        #6b7688;

  --c-cbr:        #f5b23e;   /* официальный курс — золотой */
  --c-investing:  #22c9df;   /* рынок — бирюзовый */
  --c-profinance: #3f8cff;   /* рынок — синий */
  --c-other:      #a78bfa;   /* запасной цвет для нового источника */

  --radius:      .78em;
  --safe:        0px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  display: block;
  background:
    radial-gradient(90% 55% at 50% 0%, #131a2c 0%, rgba(19, 26, 44, 0) 70%),
    var(--bg);
}

/* Сцена во весь экран; если телевизор висит боком, поворачивается целиком,
   а её логические ширина и высота меняются местами. */
.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: var(--safe);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 0 0;
}

body.rot90 .stage,
body.rot270 .stage { width: 100vh; height: 100vw; }

body.rot90  .stage { transform: translateX(100vw) rotate(90deg); }
body.rot270 .stage { transform: translateY(100vh) rotate(-90deg); }
body.rot180 .stage { transform: translate(100vw, 100vh) rotate(180deg); }

/* Базовый кегль подбирает скрипт: от окна браузера до панели 3840×2160.
   Все размеры — в em, поэтому масштабируются вместе с ним. */
.monitor {
  font-size: clamp(11px, 2.6vh, 220px);
  width: 100%;
  max-width: min(96%, 30em);
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: .6em .5em;
}

/* --- шапка ------------------------------------------------------------------ */
.head { text-align: center; display: grid; gap: .3em; margin-bottom: .35em; }

.title {
  font-size: 1.72em;
  font-weight: 700;
  letter-spacing: -.01em;
}

.date {
  font-size: 1.02em;
  font-weight: 500;
  color: var(--ink-dim);
}

.clock {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin-top: .12em;
  padding: .34em 1.05em;
  border: 1px solid var(--line);
  border-radius: 3em;
  background: var(--bg-soft);
  font-size: 1.12em;
  font-weight: 600;
}

.dot {
  width: .4em; height: .4em; border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 .55em rgba(47, 191, 113, .85);
  animation: pulse 2.4s ease-in-out infinite;
}
.dot.warn { background: #f0b429; box-shadow: 0 0 .55em rgba(240, 180, 41, .85); }
.dot.down { background: var(--down); box-shadow: 0 0 .55em rgba(240, 85, 97, .85); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* --- таблица ----------------------------------------------------------------- */
.thead,
.row {
  display: grid;
  grid-template-columns: 2.15em repeat(var(--source-count, 3), 1fr);
  column-gap: .5em;
  align-items: stretch;
}

.thead {
  padding: 0 .62em .15em;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.thead .th { text-align: center; }
.thead .th-note {
  display: block;
  font-size: .78em;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .7;
}

.th.pair-th { text-align: left; color: var(--ink-faint); }

.th[data-source]              { color: var(--c-other); }
.th[data-source="cbr"]        { color: var(--c-cbr); }
.th[data-source="investing"]  { color: var(--c-investing); }
.th[data-source="profinance"] { color: var(--c-profinance); }

.rows { display: flex; flex-direction: column; gap: .42em; }

.placeholder { margin: auto; padding: 2em 0; color: var(--ink-faint); font-size: .9em; }

.row {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  /* --fill-pad добавляет скрипт: остаток высоты экрана распределяется
     по карточкам, чтобы табло занимало его целиком */
  padding: calc(.62em + var(--fill-pad, 0px)) .62em;
}

/* обозначение пары слева */
.pair {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .12em;
  font-size: .55em;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-dim);
  line-height: 1;
}
.pair .bar { width: 1.7em; height: 1px; background: var(--line); }

/* колонка одного источника */
.q {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1em;
  min-width: 0;
  padding: .1em .2em;
  border-radius: .4em;
  transition: background .6s ease;
}

/* разделители стоят посередине промежутка между колонками */
.q::before {
  content: "";
  position: absolute;
  left: -.25em;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(255, 255, 255, .5);
}

.value {
  font-size: 1.42em;
  font-weight: 700;
  line-height: 1.06;
  white-space: nowrap;
}

.delta { font-size: .58em; font-weight: 500; white-space: nowrap; }
.delta.up   { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--flat); }

.spread { font-size: .5em; color: var(--ink-faint); white-space: nowrap; }
body:not(.show-spread) .spread { display: none; }

.q.stale .value { color: var(--ink-dim); }
.q.stale .delta { opacity: .5; }
.q.empty .value { color: var(--ink-faint); font-weight: 500; font-size: 1.1em; }

/* подсветка изменения котировки */
.q.tick-up   { background: rgba(47, 191, 113, .14); }
.q.tick-down { background: rgba(240, 85, 97, .14); }

/* --- подвал -------------------------------------------------------------------- */
.foot { margin-top: .35em; }

.status {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .8em;
  font-size: .5em;
  color: var(--ink-faint);
}
.status .item { display: inline-flex; align-items: center; gap: .4em; }
.status .rhythm { opacity: .65; }
.status .led { width: .5em; height: .5em; border-radius: 50%; background: var(--up); }
.status .led.stale { background: #f0b429; }
.status .led.bad   { background: var(--down); }

/* --- подсказка про полный экран -------------------------------------------------- */
.fs-hint {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: rgba(21, 26, 38, .95);
  color: var(--ink-dim);
  font-size: .8rem;
  z-index: 20;
  animation: hint-out 12s ease forwards;
}
@keyframes hint-out {
  0%, 80% { opacity: 1 }
  100%    { opacity: 0 }
}

/* --- панель управления ------------------------------------------------------------ */
.toolbar {
  position: fixed;
  right: 1rem; bottom: 1rem;
  display: flex;
  gap: .4rem;
  opacity: 0;
  transition: opacity .25s;
  z-index: 30;
}
body:hover .toolbar { opacity: 1; }
.toolbar button {
  font: inherit;
  font-size: .72rem;
  color: var(--ink-dim);
  background: rgba(21, 26, 38, .92);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: .4rem .7rem;
  cursor: pointer;
}
.toolbar button:hover { color: var(--ink); border-color: #3a4459; }

body.kiosk .toolbar { display: none; }
body.kiosk { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .q { transition: none; }
}