/* CK Metrics responsive + sticky header refinement — Aug. 29, 2026 */
html,body{max-width:100%;overflow-x:clip!important}
.app,main,.panel,.panel-inner{min-width:0;max-width:100%}
.metric-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.mobile-row-info{display:none;border:1px solid #cbd9df;background:#fff;color:#5f7484;width:22px;height:22px;border-radius:50%;place-items:center;font-size:11px;font-weight:950;line-height:1;padding:0;cursor:pointer;flex:0 0 auto}
.detail-season.ffe .range{margin-top:2px}

/* Over-budget treatment: keep the 0–100% bar intact and mark the breakout at its edge. */
.bar-row.combined-bar{height:10px;display:block!important;position:relative;overflow:visible!important;grid-template-columns:none!important}
.combined-bar .bar-main{position:relative;width:100%;height:8px;background:var(--track);border-radius:999px!important;overflow:hidden}
.combined-bar.is-over .bar-main{border-radius:999px!important}
.combined-bar .overflow-float,.combined-bar .hundred-marker,.combined-bar .over-pill{display:none!important}
.burst-marker{position:absolute;left:100%;top:4px;transform:translate(-50%,-50%);width:15px;height:15px;border:0;padding:0;margin:0;cursor:help;z-index:8;background:var(--orange);clip-path:polygon(50% 0%,61% 30%,82% 12%,70% 39%,100% 50%,70% 61%,82% 88%,61% 70%,50% 100%,39% 70%,18% 88%,30% 61%,0 50%,30% 39%,18% 12%,39% 30%);filter:drop-shadow(0 1px 1px rgba(55,72,82,.18))}
.burst-marker.pace-burst{background:#f29a82}
.burst-marker:focus-visible{outline:2px solid #153e57;outline-offset:3px}
.swatch.over-spent{width:12px;height:12px;border-radius:0;background:var(--orange)!important;clip-path:polygon(50% 0%,61% 30%,82% 12%,70% 39%,100% 50%,70% 61%,82% 88%,61% 70%,50% 100%,39% 70%,18% 88%,30% 61%,0 50%,30% 39%,18% 12%,39% 30%)}

/* Desktop: keep the compact Budget/year header visible while content scrolls. */
@media(min-width:821px){
  .page-header{position:fixed!important;top:0;left:238px;right:0;z-index:60;background:rgba(245,248,250,.985);backdrop-filter:blur(9px);padding:18px 22px 14px;margin:0!important;border-bottom:1px solid rgba(219,229,234,.95);box-shadow:0 3px 10px rgba(18,49,73,.035)}
  main{padding-top:100px!important}
}

@media(max-width:1050px){
  .metric-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:820px){
  body{width:100%;overflow-x:clip!important}
  .app{width:100%;overflow-x:clip!important}
  aside{width:100%;max-width:100%;overflow-x:clip!important}
  aside>nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;overflow:visible;width:100%}
  aside>nav button{min-width:0;justify-content:center;flex-direction:column;gap:4px;padding:8px 3px;font-size:11px;line-height:1.05;text-align:center}
  aside>nav .icon{width:auto;font-size:15px}
  main{width:100%;max-width:100%;overflow:visible!important;padding:12px}
  .page-header{position:sticky!important;top:0;z-index:60;margin:-4px -12px 12px;padding:10px 12px;background:rgba(245,248,250,.985);backdrop-filter:blur(9px);border-bottom:1px solid rgba(219,229,234,.92);align-items:center;gap:10px}
  .page-header>div{min-width:0}
  .page-header h1{font-size:27px}
  .page-meta{font-size:10.5px;margin-top:5px;white-space:normal}
  .year-select{flex:0 0 auto;min-width:88px;max-width:96px;padding:8px 26px 8px 10px;font-size:13px}
  .metric-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .top-grid{grid-template-columns:1fr;gap:12px}
  .top-grid>.panel{min-height:0}
  .overview-row{grid-template-columns:1fr!important;gap:7px;padding:11px 1px}
  .value-stack{display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-align:left}
  .mobile-row-info{display:inline-grid;margin-left:auto}
  .detail-seasons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cat-table{max-width:100%;overflow:hidden}
  .floating-tip{left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto!important;max-width:none;pointer-events:auto;max-height:52vh;overflow:auto}
  .modal-backdrop{padding:8px}
  .modal{width:100%;max-height:92vh;border-radius:14px}
  .burst-marker{cursor:pointer;width:16px;height:16px}
}

@media(max-width:590px){
  main{padding:9px}
  .page-header{margin:-3px -9px 10px;padding:9px}
  .page-header h1{font-size:25px}
  .year-chip{display:none}
  .year-select{min-width:82px;max-width:88px;padding:7px 23px 7px 9px;font-size:12.5px}
  .metric-grid,.metric-grid.five,.metric-grid.closed{grid-template-columns:1fr!important;gap:8px}
  .metric{min-height:0;padding:12px 13px}
  .metric-top{margin-bottom:7px}
  .metric-value{font-size:24px}
  .metric-note{font-size:11px}
  .panel-inner{padding:14px}
  .segmented{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .segmented button{width:100%}
  .legend{gap:10px}
  .detail-summary{grid-template-columns:1fr 1fr}
  .detail-seasons{grid-template-columns:1fr}
  .cat-row,.cat-row.closed-cat{grid-template-columns:1fr 1fr!important;min-width:0!important;width:100%;gap:8px;padding:11px 8px}
  .cat-row>div:nth-child(1),.cat-row>div:nth-child(2){grid-column:1/-1;min-width:0}
  .cat-row .num{min-width:0;overflow-wrap:anywhere}
  .ffemodal-row{grid-template-columns:1fr!important;padding:10px 0}
  .ffemodal-row>div{grid-column:1!important;text-align:left!important}
  .month-detail-row{grid-template-columns:34px minmax(0,1fr)!important}
  .tx-table{min-width:620px}
}