/* Preserve the same proportions in native UHD and high-density HD browser viewports. */
:root{--display-ratio:1}
body{font-size:clamp(14px,1.12vw,48px)}
@media(min-width:1101px){.school-logo{width:17.5vw;max-width:none}}
@media(min-width:1921px){
  header{border-bottom-width:calc(4px * var(--display-ratio))}
  header:after{height:calc(4px * var(--display-ratio));bottom:calc(-4px * var(--display-ratio))}
  .panel,.clockcard,.notice{border-radius:calc(5px * var(--display-ratio))}
  .clockcard,.notice{border-top-width:calc(4px * var(--display-ratio))}
  footer{border-top-width:calc(3px * var(--display-ratio))}
  .sectionhead h2:after{width:calc(37px * var(--display-ratio));height:calc(3px * var(--display-ratio));box-shadow:0 calc(3px * var(--display-ratio)) 0 var(--lar-navy);margin-bottom:calc(3px * var(--display-ratio))}
  .progress{height:calc(4px * var(--display-ratio))}
  .dot,.dots i{width:calc(7px * var(--display-ratio));height:calc(7px * var(--display-ratio))}
  .dots{gap:calc(7px * var(--display-ratio))}
  .pill{padding:calc(6px * var(--display-ratio)) calc(12px * var(--display-ratio))}
  .badge{padding:calc(6px * var(--display-ratio)) calc(10px * var(--display-ratio))}
  .slot.break{border-left-width:calc(2px * var(--display-ratio))}
  .slot.active{box-shadow:inset calc(3px * var(--display-ratio)) 0 var(--lar-yellow)}
  .footlabel{min-width:calc(170px * var(--display-ratio))}
  button{padding:calc(8px * var(--display-ratio)) calc(13px * var(--display-ratio))}
  .dialog{max-width:calc(650px * var(--display-ratio));padding:calc(28px * var(--display-ratio))}
  .dialog input,.dialog select,.dialog textarea{padding:calc(10px * var(--display-ratio));margin-top:calc(7px * var(--display-ratio))}
  .dialog label{margin-top:calc(15px * var(--display-ratio))}
  .dialog hr{margin:calc(23px * var(--display-ratio)) 0}
  #previewBanner{font-size:calc(12px * var(--display-ratio));padding:calc(4px * var(--display-ratio))}
}

/* Readability steps: at least 1pt for small text, 2pt for navigation and footer.
   Double the step at native 4K to match a high-density 1080p TV viewport. */
:root{--small-text-step:max(1pt,.069445vw);--bar-text-step:max(2pt,.138889vw)}