/* Общие детали: бирка, кнопки, карточки, график. */
/* Бирка с номером коровы */
.tag { position: relative; display: inline-flex; align-items: center; min-height: 26px; padding: 3px 11px 3px 21px; border-radius: 6px 14px 14px 6px; background: var(--tag); color: var(--tag-ink); font: 700 15px/1 var(--mono); letter-spacing: .02em; white-space: nowrap; text-decoration: none; }
.tag::before { content: ''; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgba(43,33,0,.28); }
a:hover .tag, a .tag:hover { background: #F9D45E; color: var(--tag-ink); }
.tag.lg { min-height: 56px; padding: 8px 22px 8px 42px; border-radius: 10px 28px 28px 10px; font-size: 34px; }
.tag.lg::before { left: 14px; width: 13px; height: 13px; margin-top: -6.5px; }

/* Кнопки */
.btn { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #C9CEE0; background: #fff; color: var(--ink); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn:hover { border-color: var(--night); color: var(--ink); }
.btn.primary { background: var(--night); border-color: var(--night); color: #fff; }
.btn.dawn { background: var(--dawn); border-color: var(--dawn); color: #fff; }
.btn.dawn:hover { background: #E05A2A; color: #fff; }
.pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--line-2); font-weight: 600; font-size: 14px; }
.pill.bad { background: var(--bad-soft); color: var(--bad-ink); }
.pill.ok { background: var(--good-soft); color: var(--good-ink); }
.pill.warn { background: var(--warn-soft); color: var(--warn-ink); }
.card { background: var(--paper); border-radius: 22px; padding: 20px 22px; }
.block { background: var(--paper); border-radius: 22px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chev { color: #9AA0BA; }
.figure { display: flex; align-items: baseline; gap: 6px; }
.figure b { font: 700 30px var(--display); }
.figure span { color: var(--muted); }
.figure i { font-style: normal; font-weight: 700; font-size: 14px; padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.figure i.down { background: var(--bad-soft); color: var(--bad-ink); }
.figure i.up { background: var(--good-soft); color: var(--good-ink); }

/* График */
.chart { position: relative; margin: 6px 0 22px 0; padding-left: 0; touch-action: pan-y; cursor: crosshair; }
.chart svg { display: block; width: 100%; height: 180px; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .area { fill: var(--night); opacity: .07; }
.chart .line { fill: none; stroke: var(--night); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.prev { stroke: #B9BFD6; stroke-width: 2; }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; margin-left: 6px; }
.legend .k-cur { background: var(--night); }
.legend .k-prev { background: #B9BFD6; }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart .ticks span { position: absolute; left: 0; transform: translateY(-50%); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--paper); padding-right: 4px; }
.chart .xlabels span { position: absolute; bottom: -22px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; }
.chart .xlabels span:last-child { transform: translateX(-100%); }
.chart .enddot, .chart .dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--dawn); box-shadow: 0 0 0 2px var(--paper); pointer-events: none; }
.chart .dot { background: var(--night); }
.chart .dot[hidden], .chart .tip[hidden] { display: none; }
.chart .tip { position: absolute; top: -6px; padding: 8px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; display: flex; flex-direction: column; pointer-events: none; white-space: nowrap; z-index: 2; }
.chart .tip b { font-size: 16px; }
.chart .tip span { color: #C9CEE3; }

@media (max-width: 700px) {
  .block { padding: 14px 14px; border-radius: 20px; }
  .chart svg { height: 150px; }
  .tag.lg { min-height: 46px; font-size: 28px; padding: 6px 18px 6px 36px; }
  .tag.lg::before { left: 12px; width: 11px; height: 11px; margin-top: -5.5px; }
}