/* Bounded v0.55 visual preview: a shared analytical mark and aligned dashboard rows. */
#dashboard .group{--demo-heading:#315e70}
html[data-design=horse] #dashboard .group{--demo-heading:#935b33}
html[data-design=forest] #dashboard .group{--demo-heading:#437d61}
html[data-design=tech] #dashboard .group{--demo-heading:#82d3dc}
#dashboard .group-head{position:relative;gap:8px;min-height:64px;border-bottom-width:2px;border-bottom-color:color-mix(in srgb,var(--demo-heading) 40%,transparent)}
#dashboard .group-head::before{content:"";display:block;flex:none;width:27px;height:27px;background:var(--demo-heading);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 20h18v1H3zM4 12h3v7H4zM10 8h3v11h-3zM16 4h3v15h-3z'/%3E%3C/svg%3E") center/contain no-repeat}
#dashboard .group[data-group=cost] .group-head::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 9h8M8 13h8M12 7v10' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#dashboard .group[data-group=efficiency] .group-head::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='7' r='2' fill='black'/%3E%3Ccircle cx='18' cy='7' r='2' fill='black'/%3E%3Ccircle cx='12' cy='18' r='2' fill='black'/%3E%3Cpath d='M7 9l4 7M17 9l-4 7M8 7h8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
#dashboard .group[data-group=risk] .group-head::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3 8-8 11-5-3-8-6-8-11V5zM12 7v7m0 3v1' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
#dashboard .group[data-group=progression] .group-head::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20h18M5 16l5-5 4 3 6-8m-5 0h5v5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#dashboard .group[data-group=quality] .group-head::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 12l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
#dashboard .group-title{font-size:clamp(32px,2.5vw,36px);line-height:1.12;font-weight:800;letter-spacing:.025em;border-left-width:2px;border-left-color:var(--demo-heading);padding-left:10px}
#dashboard .group-number{font-size:20px;min-width:27px;text-align:center}
#dashboard [data-group=cost] .group-frequency{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;margin-left:auto;font-size:11px;line-height:1.25;text-align:right;white-space:nowrap}
#dashboard [data-group=cost] .group-frequency .denom-note{display:none}
#dashboard .risk-components{margin-left:0;padding-left:0}
@media(min-width:681px){
  #dashboard .metric-project{display:grid;grid-template-columns:28px minmax(55px,66px) minmax(20px,1fr) minmax(62px,max-content) minmax(0,max-content)!important;column-gap:5px;align-items:center}
  #dashboard .metric-project>.thumb-slot{grid-column:1}
  #dashboard .metric-project>.project-label{grid-column:2}
  #dashboard .metric-project>.track{grid-column:3;min-width:20px;width:100%}
  #dashboard .metric-project>.metric-value{grid-column:4}
  #dashboard .metric-project>.metric-aux{grid-column:5}
  #dashboard [data-metric=students] .metric-project{grid-template-columns:28px minmax(55px,66px) minmax(20px,1fr) minmax(62px,max-content) minmax(0,max-content)!important;row-gap:2px}
  #dashboard [data-metric=students] .metric-project>.track{grid-column:3/-1;grid-row:1}
  #dashboard [data-metric=students] .metric-project>.metric-value{grid-column:2/-1;grid-row:2;justify-self:end;max-width:none;width:auto;font-size:12px}
  #dashboard [data-metric=students] .metric-project>.metric-aux{display:none}
}
#dashboard [data-metric=students] .student-label{font-size:11px;line-height:1.2}
#dashboard [data-metric=students] .student-number{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:680px){
  #dashboard .group-head{min-height:58px;gap:5px 7px}
  #dashboard .group-head::before{width:20px;height:20px}
  #dashboard .group-title{font-size:28px;padding-left:8px}
  #dashboard .group-number{font-size:17px;min-width:23px}
  #dashboard .metric-project>.track{grid-column:1/-1;justify-self:stretch;width:100%;margin-left:0}
  #dashboard [data-metric=students] .metric-project .metric-value{font-size:12px;gap:3px}
  #dashboard [data-metric=students] .student-label{font-size:11px}
}

.overview-action-pair{display:inline-flex;align-items:center;gap:8px;align-self:flex-end;white-space:nowrap}
.overview-action-pair .snapshot-action{margin-left:0}
#snapshot-create{height:38px;min-height:38px;padding:0 13px;font-size:14px}
@media(max-width:680px){
 #home-date-controls .overview-action-pair{grid-column:2;grid-row:1;justify-self:end;align-self:end;gap:6px}
 #home-date-controls .overview-action-pair #reset-range{margin:0;padding:0 10px}
 #snapshot-create{height:40px;min-height:40px;padding:0 10px}
}
#home-date-controls .overview-action-pair :is(#reset-range,#snapshot-create){height:40px;min-height:40px;max-height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;align-self:center;line-height:normal}