/* Use the timer's own width for its digits. Viewport size alone is misleading
   when a navigation rail or settings column shares that viewport. */
.timer-main{container-type:inline-size}

/* Compact the normal timer only; fullscreen keeps its distance-readable scale. */
body:not(.focus-mode) #timer-panel:not(:fullscreen){grid-template-columns:minmax(0,1fr) 224px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-main{padding:12px 22px 14px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-stage{margin-top:4px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-display{font-size:min(140px,40cqw);min-height:130px;line-height:1;margin:0;letter-spacing:-.025em}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-display:has(#hours-block:not([hidden])){font-size:min(104px,23cqw);min-height:130px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .finish-at{margin-top:0;min-height:22px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .remaining-scale{margin-top:12px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .progress-track{height:18px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .scale-labels{padding-top:4px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-actions{margin-top:12px;flex-wrap:nowrap;gap:8px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .start-button{min-height:48px;flex:1;padding-inline:14px;font-size:15px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .secondary-button{min-height:44px;flex:none;padding-inline:10px;font-size:13px}
body:not(.focus-mode) #timer-panel:not(:fullscreen) .keyboard-hint{margin-top:8px;gap:3px 10px}

#timer-panel .timer-settings{padding:14px 16px}
#timer-panel .presets{margin-top:10px;gap:6px}
#timer-panel .custom-time-hint{margin-top:8px}
#timer-panel .sound-settings{margin-top:10px;padding-top:10px}
#timer-panel .sound-settings>.field-label{margin-top:8px;margin-bottom:5px}
#timer-panel .volume-control{display:flex;align-items:center;gap:10px;margin-top:6px}
#timer-panel .volume-control .field-label{margin:0;flex:none}
#timer-panel .volume-control input{min-width:0;flex:1}
#timer-panel .repeat-option{margin-top:0}
#timer-panel .repeat-description{font-size:11px}
#timer .purpose-bar{margin-top:8px;min-height:50px}
#timer .help-panel>summary{min-height:48px}

@media(min-width:701px){
  #timer-panel .preset-settings>h2{display:inline-block}
  #timer-panel .preset-settings>.setting-description{display:inline-block;margin:0 0 0 6px;font-size:11px}
  #timer-panel .sound-settings>.field-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #timer-panel .sound-choice{margin-top:8px}
}

@media(min-width:1001px){
  body[data-tool="timer"] .tool-nav{min-height:400px;gap:6px;padding-top:0}
  body[data-tool="timer"] .tool-nav a{flex:1}
}

@media(max-width:700px){
  body:not(.focus-mode) #timer-panel:not(:fullscreen){display:block}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-main{padding:14px 20px 18px}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-display{min-height:112px;font-size:min(140px,40cqw)}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-display:has(#hours-block:not([hidden])){min-height:112px;font-size:min(104px,23cqw)}
  #timer-panel .timer-settings{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:18px 20px}
  #timer-panel .presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  #timer-panel .sound-settings{margin:0;padding:0;border:0}
  #timer-panel .timer-settings h2{font-size:15px}
  #timer-panel .custom-time-hint{flex-wrap:wrap;font-size:11px}
  #timer-panel .sound-choice select{font-size:12px;padding-inline:4px}
}

@media(max-width:380px){
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-main{padding-inline:16px}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .timer-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .start-button{font-size:14px;padding-inline:9px;gap:4px}
  body:not(.focus-mode) #timer-panel:not(:fullscreen) .secondary-button{font-size:12px;padding-inline:8px;gap:3px}
  #timer-panel .timer-settings{display:block;padding:18px 16px}
  #timer-panel .presets{grid-template-columns:repeat(4,minmax(0,1fr))}
  #timer-panel .sound-settings{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
}