/* Percentage scale coverage for Month and Analytics. */

/* Month matrix: every past day exposes its calculated tone. */
.matrix .day-head{position:relative!important;min-width:58px!important;padding:9px 6px 12px!important;overflow:hidden!important}
.matrix .day-head:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){
  box-shadow:inset 0 -4px 0 var(--percent-color)!important;
  background:linear-gradient(180deg,var(--premium-surface-muted,#f7f0e6),color-mix(in srgb,var(--percent-color) 8%,var(--premium-surface,#fffdf8)))!important;
}
.matrix .day-head em{display:block!important;margin-top:3px!important;color:var(--percent-color)!important;font-size:10px!important;font-style:normal!important;font-weight:850!important;line-height:1!important}
.matrix .day-head.today{color:var(--premium-ink)!important;outline:2px solid var(--percent-color,var(--premium-accent))!important;outline-offset:-2px!important}
.matrix .day-head.today b{color:var(--percent-color,var(--premium-accent))!important}
.matrix .day-head.future{opacity:.55!important;box-shadow:inset 0 -4px 0 #d8d2c8!important}

/* Heatmap and its legend share the exact six colors. */
.heat-cell.lv0,.heat-sample.lv0{background:var(--percent-neutral)!important;color:#fff!important}
.heat-cell.lv1,.heat-sample.lv1{background:var(--percent-terracotta)!important;color:#fff!important}
.heat-cell.lv2,.heat-sample.lv2{background:var(--percent-amber)!important;color:#1f2923!important}
.heat-cell.lv3,.heat-sample.lv3{background:var(--percent-sage)!important;color:#1f2923!important}
.heat-cell.lv4,.heat-sample.lv4{background:var(--percent-green)!important;color:#fff!important}
.heat-cell.lv5,.heat-sample.lv5{background:var(--percent-emerald)!important;color:#fff!important}
.heat-cell:not(.future):not(.day-disabled){border:1px solid color-mix(in srgb,currentColor 16%,transparent)!important;box-shadow:inset 0 1px rgba(255,255,255,.18)!important}
.heat-cell.today{outline:3px solid color-mix(in srgb,var(--heat-color,currentColor) 32%,transparent)!important;outline-offset:2px!important}
.heat-legend,.compact-legend{display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;margin-top:13px!important;color:var(--premium-muted,var(--muted))!important}
.heat-legend span,.compact-legend span{display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:11px!important;font-weight:750!important}
.heat-sample{display:inline-block!important;width:13px!important;height:13px!important;border-radius:4px!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important}

/* Month and Analytics bars color both the fill and the numerical value. */
.bar-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>b,
.dist-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>b{
  color:var(--percent-color)!important;font-variant-numeric:tabular-nums!important;
}
.bar-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .progress-line>i,
.dist-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .progress-line>i{background:var(--percent-color)!important}
.bar-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .progress-line,
.dist-row:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .progress-line{background:color-mix(in srgb,var(--percent-color) 14%,var(--premium-bg-deep,#e9dfce))!important}

/* Hero summary and KPI values no longer fall back to one green. */
.stats-subgrid>span:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){
  border:1px solid color-mix(in srgb,var(--percent-color) 22%,var(--premium-line,var(--line)))!important;
  background:color-mix(in srgb,var(--percent-color) 8%,var(--premium-surface,#fffdf8))!important;
  border-radius:10px!important;padding:7px 9px!important;
}
.stats-subgrid>span:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>b{color:var(--percent-color)!important}
.stats-task-month-v125:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>b{color:var(--percent-color)!important}

/* Seven-day strip: individual columns follow individual day percentages. */
.week-day:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){--week-color:var(--percent-color);border-color:color-mix(in srgb,var(--week-color) 25%,var(--premium-line,var(--line)))!important}
.week-day:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .week-bar{background:color-mix(in srgb,var(--week-color) 14%,var(--premium-bg-deep,#e9dfce))!important}
.week-day:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) .week-bar>i{background:var(--week-color)!important}
.week-day:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>b{color:var(--week-color)!important}

/* Trend uses the average tone for the line and the exact tone for every point. */
.trend-v484:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){color:var(--percent-color)!important}
.trend-v484:is(.neutral,.terracotta,.amber,.sage,.green,.emerald) svg path{stroke:var(--percent-color)!important}
.trend-v484 .trend-dot-v484{background:var(--point-color)!important;color:var(--point-color)!important;border-color:var(--premium-surface,#fffdf8)!important}

/* The forecast card uses the same tone as its percentage. */
.month-plan:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){
  border-left-color:var(--percent-color)!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--percent-color) 10%,var(--premium-surface,#fffdf8)),var(--premium-surface,#fffdf8))!important;
}
.month-plan:is(.neutral,.terracotta,.amber,.sage,.green,.emerald)>div>b{color:var(--percent-color)!important}

body[data-lt-theme="dark"] .matrix .day-head:is(.neutral,.terracotta,.amber,.sage,.green,.emerald){
  background:linear-gradient(180deg,var(--premium-surface-muted),color-mix(in srgb,var(--percent-color) 11%,var(--premium-surface)))!important;
}