/* Quick Track 26: compact dial, wider thumb ring and calmer professional palette. */
.time-adjust-layout{
  grid-template-columns:50px minmax(0,220px) 50px;
  gap:14px;
  margin:7px 0 9px;
}
.time-adjust-rail{height:218px}
.time-adjust-rail button{min-height:34px}
.precision-dial{
  width:min(56vw,220px);
  border-color:#52636d;
  background:#25313a;
  box-shadow:0 7px 18px #0006,inset 0 0 0 2px #182026;
}
.precision-dial:before{
  inset:27px;
  border-color:#465761;
  background:#0b0f12;
  box-shadow:0 0 0 2px #192229,inset 0 0 0 5px #11181d;
}
.precision-dial:after{
  inset:30%;
  border-color:#536873;
  background:radial-gradient(circle at 50% 35%,#182126,#0b0f12 74%);
}
.precision-dial.is-dragging{
  filter:brightness(1.08);
  box-shadow:0 8px 22px #0008,0 0 0 3px #4d7a914d;
}
.precision-ticks i:after{top:7px;height:13px;background:#4d7a91}
.precision-ticks i.is-major:after{top:5px;height:19px;background:#8db8ca}
.precision-labels span{
  --label-radius:75px;
  color:#f3f5f6;
}
.precision-marker span{
  top:10px;
  border-color:#e0b45d;
  background:#d6a245;
  box-shadow:0 2px 7px #0008;
}
.precision-marker b{top:10px;left:calc(50% - 12px);width:24px;height:24px;background:transparent;box-shadow:none;font-size:10px}
.precision-center{inset:30%}
.precision-center small{color:#8db8ca}
.precision-center strong{color:#f3f5f6}
.ring-help{margin:8px 0 7px!important}
.ring-help strong{color:#8db8ca!important}
.time-adjust-plus button{color:#8db8ca}
.duration-summary{border-color:#40545f;background:#151c21}
.duration-summary>div:first-child strong{color:#8db8ca}

@media(max-width:430px){
  .time-adjust-layout{grid-template-columns:48px minmax(0,218px) 48px;gap:14px}
  .precision-dial{width:min(calc(100vw - 164px),218px)}
  .precision-labels span{--label-radius:calc(min(calc(100vw - 164px),218px)/2 - 34px)}
  .time-adjust-rail{height:216px}
}
@media(max-width:370px){
  .time-adjust-layout{grid-template-columns:44px minmax(0,202px) 44px;gap:12px}
  .precision-dial{width:min(calc(100vw - 150px),202px)}
  .precision-labels span{--label-radius:calc(min(calc(100vw - 150px),202px)/2 - 32px)}
  .time-adjust-rail{height:214px}
  .precision-dial:before{inset:25px}
}
@media(max-height:760px) and (max-width:430px){
  .time-adjust-layout{grid-template-columns:44px minmax(0,198px) 44px;gap:16px;margin:10px 0 10px}
  .precision-dial{width:198px}
  .precision-labels span{--label-radius:67px}
  .time-adjust-rail{height:214px}
  .precision-dial:before{inset:25px}
}