/* Quick Track 18: two concentric time controls and iPhone 17 Pro layout.
   Outer ring = 24 whole hours. Inner ring = twelve five-minute positions. */
.dial-shell{
  --dial-size:320px;
  --minute-inset:44px;
  --minute-size:calc(var(--dial-size) - var(--minute-inset) - var(--minute-inset));
  width:var(--dial-size);height:var(--dial-size);position:relative;margin:0 auto;isolation:isolate
}
.hour-ring{
  position:absolute;inset:0;z-index:1;border:1px solid var(--qt-border-strong);border-radius:50%;
  background:#242628;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  transition:background-color .16s,border-color .16s
}
.hour-ring:before{
  content:"";position:absolute;inset:40px;border:1px solid var(--qt-border);border-radius:50%;
  background:var(--qt-canvas);pointer-events:none
}
.hour-ring.is-dragging{background:#2d3033;border-color:#71767a;cursor:grabbing}
#hourLabels{position:absolute;inset:0;pointer-events:none;z-index:1}
#hourLabels span{
  --hour-radius:calc((var(--dial-size) / 2) - 19px);
  position:absolute;left:calc(50% - 14px);top:calc(50% - 16px);width:28px;height:32px;
  display:grid;place-items:center;border-radius:8px;
  transform:rotate(var(--hour-mark-angle)) translateY(calc(-1 * var(--hour-radius))) rotate(calc(-1 * var(--hour-mark-angle)));
  color:#92938f;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;
  transition:color .14s,background-color .14s
}
#hourLabels span.is-current{color:var(--qt-text);background:#373b3e;font-weight:700}
.hour-marker{position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;transform:rotate(var(--hour-angle,0deg));transition:transform 190ms cubic-bezier(.2,.8,.2,1)}
.hour-marker:after{content:"";position:absolute;top:3px;left:calc(50% - 7px);width:14px;height:4px;border-radius:3px;background:var(--qt-brass)}
.hour-ring.feedback-pulse .hour-marker:after{background:var(--qt-text)}
.dial-shell .circular-dial,.dial-shell .circular-dial.is-dragging{
  position:absolute;inset:var(--minute-inset);z-index:3;width:auto;height:auto;margin:0;
  border:1px solid var(--qt-border-strong);background:#292b2d;box-shadow:none
}
.dial-shell .circular-dial:after{inset:42px;background:var(--qt-canvas);border-color:var(--qt-border);box-shadow:none}
.dial-shell .circular-dial .dial-ticks{inset:3px;mask:radial-gradient(transparent 56%,#000 57%);-webkit-mask:radial-gradient(transparent 56%,#000 57%)}
#minuteLabels span{
  --label-radius:calc((var(--minute-size) / 2) - 23px);
  width:38px;height:40px;left:calc(50% - 19px);top:calc(50% - 20px);font-size:13px
}
.dial-center{
  inset:100px;z-index:5;border-radius:50%;gap:3px;min-width:0;min-height:0
}
.dial-center small{font-size:11px}.dial-center strong{font-size:34px}.dial-center span{font-size:12px;max-width:108px}
.ring-help{display:flex;justify-content:center;gap:12px;align-items:center;margin:7px 0 9px;font-size:12px}
.ring-help strong{color:var(--qt-text);font-weight:600}.ring-help span{color:var(--qt-muted)}
.hour-ring:focus-visible,.circular-dial:focus-visible{outline:3px solid #8ca3b1;outline-offset:3px}

/* 1206 physical pixels / 3 = 402 CSS px on iPhone 17 Pro. The height target is 874 CSS px. */
@media(max-width:430px){
  .app{width:100%;padding:max(8px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom))}
  .app>header{min-height:44px;padding:0 1px 4px}.app h1{font-size:22px}.avatar-button{width:42px;height:42px}
  .page-tabs{gap:2px;padding-bottom:5px}.page-tabs a{min-height:42px;padding:11px 2px;border-radius:10px;font-size:13px}
  .section-heading{margin:0 2px 3px}.category-grid{gap:6px;padding:2px 1px 4px}.category,.category.tone-green{min-height:46px;padding:7px 9px}
  #taskFilters summary{min-height:38px}.mode-switch{margin:3px 0;padding:3px}.mode-switch button{height:40px}
  .dial-toolbar{height:40px;margin:0}.dial-toolbar>button,.feedback-controls button{min-height:40px}
  .dial-shell{--dial-size:min(75vw,300px);--minute-inset:41px}
  .dial-center{inset:93px}.dial-center strong{font-size:32px}
  #hourLabels span{font-size:9.5px}.ring-help{margin:5px 0 8px}
  .duration-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.duration-chips button{height:44px;padding:0 2px;font-size:12px;border-radius:10px}
  .duration-header{min-height:40px;margin:0}.duration-header button{min-height:40px;min-width:40px}
  .sticky-book{padding-top:5px}.book-button{min-height:50px}
}
@media(max-width:370px){
  .dial-shell{--dial-size:278px;--minute-inset:39px}.dial-center{inset:87px}.dial-center strong{font-size:30px}
  #hourLabels span{font-size:9px}.ring-help{gap:8px}.duration-chips button{font-size:11px}
}
@media(max-height:760px) and (max-width:430px){
  .dial-shell{--dial-size:270px;--minute-inset:38px}.dial-center{inset:84px}
  .category-section .section-heading{display:none}.page-tabs{padding-bottom:3px}.dial-toolbar{height:38px}
}
@media(prefers-reduced-motion:reduce){.hour-ring,.hour-marker,#hourLabels span{transition:none!important}}