/* The gradient is anchored to the whole allowance, then revealed up to usage. */
.project-utilization-chart { --usage-gradient:linear-gradient(90deg,#30d158 0%,#8bd346 35%,#ffd60a 60%,#ff9f0a 80%,#ff453a 100%); }
.project-usage-help { max-width:740px; margin:10px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.project-usage-scale { flex:0 0 210px; display:grid; gap:8px; color:var(--muted); font-size:12px; }
.project-usage-scale>span { display:block; height:8px; border-radius:4px; background:var(--usage-gradient); }
.project-utilization-chart .project-chart-rows button { grid-template-columns:minmax(180px,1fr) minmax(360px,2fr) 85px; padding:16px 10px; gap:20px; border-radius:8px; border-bottom:1px solid var(--line); }
.project-utilization-chart .project-chart-rows button:last-child { border-bottom:0; }
.project-utilization-chart .project-chart-rows button>strong { white-space:normal; overflow-wrap:anywhere; line-height:1.5; }
.project-utilization-chart .project-chart-rows button>strong small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:4px; }
.project-utilization-chart .project-chart-rows .project-usage-lanes { position:static; display:grid; gap:12px; height:auto; border-radius:0; background:transparent; overflow:visible; }
.project-usage-lane { display:grid; grid-template-columns:60px minmax(40px,1fr) 190px; align-items:center; gap:12px; font-size:12px; color:var(--muted); }
.project-usage-track { position:relative; display:block; height:10px; overflow:hidden; border-radius:4px; background:rgba(120,120,128,.2); }
.project-utilization-chart .project-usage-track i { position:absolute; inset:0; width:100%; height:100%; border-radius:0; background:var(--usage-gradient); }
.project-usage-value { text-align:right; font-variant-numeric:tabular-nums; }
.project-usage-lane.is-over .project-usage-value { color:var(--red); font-weight:600; }
.project-utilization-chart .project-chart-rows .project-usage-budget { color:var(--ink); font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.project-usage-budget small { display:block; margin-top:4px; font-size:12px; font-weight:400; color:var(--muted); }
.project-utilization-chart button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
@media(max-width:1050px) {
 .project-utilization-chart .panel-head { flex-wrap:wrap; gap:18px; }
 .project-utilization-chart .project-chart-rows button { grid-template-columns:minmax(0,1fr) 85px; gap:12px; }
 .project-utilization-chart .project-usage-lanes { grid-column:1/-1; grid-row:2; }
 .project-usage-budget { grid-column:2; grid-row:1; }
}
@media(max-width:520px) {
 .project-utilization-chart .project-chart-rows { padding:8px 12px 16px; }
 .project-utilization-chart .project-chart-rows button { padding:14px 4px; }
 .project-usage-lane { grid-template-columns:1fr auto; gap:6px 10px; }
 .project-usage-track { grid-column:1/-1; grid-row:2; }
 .project-usage-value { grid-column:2; grid-row:1; }
}