/* Refine round 4 components — every value is a token from styles.css. The life of the bill, the roll-up tree,
   the trade calendar, the heat-map's operational detail. */
.boq-life{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4);counter-reset:life}
.boq-life li{counter-increment:life;position:relative;padding:var(--space-8) var(--space-8) var(--space-8) var(--space-32);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--text-muted);font-size:var(--font-size-sm,.875rem);min-height:44px;display:flex;align-items:center}
.boq-life li::before{content:counter(life);position:absolute;left:var(--space-8);top:50%;transform:translateY(-50%);width:var(--space-20);height:var(--space-20);border-radius:var(--radius-pill,999px);border:1px solid var(--border-strong);display:grid;place-items:center;font-size:var(--font-size-xs,.75rem);font-variant-numeric:tabular-nums}
.boq-life li.done{background:var(--surface-card);color:var(--text-body)}
.boq-life li.done::before{background:var(--success-solid);border-color:var(--success-solid);color:var(--text-on-highlight)}
.boq-life li.current{background:var(--surface-selected);color:var(--text-body);border-color:var(--surface-brand);font-weight:600}
.boq-life li.current::before{background:var(--surface-brand);border-color:var(--surface-brand);color:var(--df-white)}

.rollup-area{border-left:var(--space-4) solid var(--surface-brand)}
.rollup-pm{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-8) var(--space-12);background:var(--surface-card)}
.rollup-pm>summary{cursor:pointer;list-style:none;min-height:44px;align-items:center;gap:var(--space-12)}
.rollup-pm>summary::-webkit-details-marker{display:none}
.rollup-pm[open]>summary{margin-bottom:var(--space-12);border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-8)}

.calendar{display:grid;gap:var(--space-4);grid-auto-rows:minmax(44px,auto)}
.calendar .cal-row{display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(var(--cal-days,14),minmax(28px,1fr));gap:var(--space-4);align-items:stretch}
.calendar .cal-head{font-size:var(--font-size-xs,.75rem);color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums;align-self:end}
.calendar .cal-cell{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);min-height:44px;background:var(--surface-sunken);display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4)}
.calendar .cal-cell a{display:block;font-size:var(--font-size-xs,.75rem);line-height:1.2;color:var(--text-body);text-decoration:none;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar .cal-cell.conflict{border-color:var(--danger-solid);background:var(--surface-card)}
.calendar .cal-cell.today{outline:2px solid var(--surface-brand);outline-offset:-2px}
.calendar .cal-name{display:flex;flex-direction:column;justify-content:center;padding:0 var(--space-4)}

.pin-ops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.pin-ops .btn{justify-content:center}

@media (max-width:640px){
  .boq-life{grid-template-columns:1fr}
  .pin-ops{grid-template-columns:1fr}
  .calendar .cal-row{grid-template-columns:minmax(110px,1fr) repeat(var(--cal-days,14),minmax(24px,1fr))}
}