.пики-верх{display:flex; justify-content:space-between; gap:10px; font-size:11.5px;
  color:var(--sand-dim); margin-bottom:6px; font-variant-numeric:tabular-nums}
.пики-верх b{font-weight:600; color:var(--sand)}
.пики-холст{display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px;
  height:172px; align-items:end;
  
  background-image:linear-gradient(to bottom, var(--seam) 1px, transparent 1px);
  background-size:100% 50%}
.час{position:relative; display:flex; align-items:flex-end; height:100%; min-width:0;
  padding:0; border:0; border-radius:5px 5px 2px 2px; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.час.ночь{background:rgba(0,0,0,.24)}
.час i{display:block; width:100%; border-radius:4px 4px 2px 2px;
  background:color-mix(in oklab, var(--lamp) 34%, transparent);
  transition:height 320ms var(--ease-out), filter 160ms}
.час.наплыв i{background:linear-gradient(180deg, var(--lamp-hi), var(--lamp-lo))}

.час.ноль i{height:3px !important; background:var(--seam-2)}
.час.выбран{box-shadow:inset 0 0 0 1px var(--seam-2)}
.час.выбран i{filter:brightness(1.25)}
@media (hover:hover){ .час:hover i{filter:brightness(1.25)} }
.час.сейчас::after{content:''; position:absolute; left:50%; bottom:-10px; width:6px;
  height:6px; margin-left:-3px; border-radius:50%; background:var(--ore)}
.пики-ось{display:grid; grid-template-columns:repeat(24, minmax(0, 1fr)); gap:3px;
  margin-top:14px; font-size:10.5px; color:var(--sand-dim); text-align:center;
  font-variant-numeric:tabular-nums}
.пики-ось span{white-space:nowrap; overflow:visible}
.пики-ось span.сейчас{color:var(--ore)}
.пики-ключ{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:11px;
  color:var(--sand-dim)}
.пики-ключ span{display:inline-flex; align-items:center; gap:6px}
.пики-ключ i{display:inline-block; width:12px; height:10px; border-radius:3px}
.пики-ключ .к-наплыв{background:linear-gradient(180deg, var(--lamp-hi), var(--lamp-lo))}
.пики-ключ .к-ночь{background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px var(--seam-2)}
.пики-ключ .к-сейчас{width:7px; height:7px; border-radius:50%; background:var(--ore)}
.пики-деталь{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  margin-top:10px; padding:10px 12px; border-radius:11px; background:rgba(0,0,0,.24);
  border:1px solid var(--seam); font-size:12.5px; color:var(--sand);
  font-variant-numeric:tabular-nums}
.пики-деталь b{font-size:14px; color:var(--cream)}
.пики-деталь u{text-decoration:none; font-size:11.5px; color:var(--sand-dim)}
.когда-пусто{margin:0; padding:22px 10px; text-align:center; font-size:13px;
  color:var(--sand-dim)}


.пики-итог{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px; margin-top:12px}
.пики-итог:empty{display:none}
.итог-ч{display:grid; gap:2px; padding:10px 12px; border-radius:12px;
  background:rgba(0,0,0,.22); border:1px solid var(--seam)}
.итог-ч span{font-size:11px; color:var(--sand-dim)}
.итог-ч b{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.итог-ч u{text-decoration:none; font-size:11.5px; color:var(--sand)}
.итог-ч.наплыв{border-color:color-mix(in oklab, var(--lamp) 38%, transparent)}
.итог-ч.наплыв b{color:var(--lamp)}
.итог-ч.тихо b{color:var(--sand)}
.когда-мало{grid-column:1 / -1; margin:2px 0 0; font-size:11.5px; color:var(--sand-dim)}


.дни-недели{display:grid; gap:3px; margin-top:16px}
.дни-недели:empty{display:none}
.подзаг{display:block; font-size:12.5px; font-weight:600; color:var(--sand); margin:0 0 6px}
.день{display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px;
  padding:5px 8px; border-radius:9px}
.день:hover{background:var(--stone-2)}
.день-имя{font-size:12.5px; color:var(--sand)}
.день.сегодня .день-имя{color:var(--ore); font-weight:600}
.день-жёлоб{height:12px; border-radius:6px; background:rgba(0,0,0,.26); overflow:hidden}
.день-жёлоб i{display:block; height:100%; border-radius:6px;
  background:color-mix(in oklab, var(--lamp) 42%, transparent)}
.день.лучший .день-жёлоб i{background:linear-gradient(90deg, var(--lamp-lo), var(--lamp-hi))}
.день-числа{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  min-width:86px}
.день-числа b{font-size:13px; font-weight:600}
.день-числа u{display:block; text-decoration:none; font-size:10.5px; color:var(--sand-dim)}


@media (max-width: 520px){
  .пики-холст,.пики-ось{gap:2px}
  .пики-холст{height:150px}
  .час{border-radius:3px 3px 1px 1px}
  .час i{border-radius:3px 3px 1px 1px}
}

@media (prefers-reduced-motion:reduce){
  .час i{transition:none}
}