/* Ladder, phase strip */
/* the ladder opens across the whole screen */
#d-ladder { width: 100%; }
#d-ladder .sheet-body { max-width: 1400px; width: 100%; margin: 0 auto; }

/* ledger rule between the days and the week targets */
@media (min-width: 761px) {
  .cal-row > .wk, .cal-row > .cal-dow.wkh { margin-left: var(--space-md); position: relative; overflow: visible; }
  .cal-row > .wk::before, .cal-row > .cal-dow.wkh::before { content: ""; position: absolute; left: -12px; top: -4px; bottom: -4px; border-left: 1px solid var(--line); }
  .cal-row > .cal-dow.wkh { padding-left: var(--space-2xs); color: var(--accent); }
}

/* phase strip in the balance card */
.phase-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-xs); margin-top: var(--space-md); }
.ph { position: relative; border: 1px solid color-mix(in srgb, var(--on-dark) 22%, transparent); border-radius: var(--radius-panel); padding: var(--space-xs) var(--space-sm) var(--space-xs); background: color-mix(in srgb, var(--ink-deep) 14%, transparent); overflow: hidden; min-width: 0; }
.ph .n { font: 700 var(--text-xs) var(--font-body); color: var(--muted); }
.ph .r { font: 600 var(--text-sm) var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .k { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); font-size: var(--text-xs); color: var(--muted); }
.ph .meter { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent);  }
.ph.done { border-color: color-mix(in srgb, var(--on-dark-good) 45%, transparent); } .ph.done .n { color: var(--on-dark-good); } .ph.done .meter { background: var(--on-dark-good); }
.ph.cur { border-color: var(--accent); background: color-mix(in srgb, var(--dark-accent) 14%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dark-accent) 18%, transparent); }
.ph.cur .n { color: var(--accent); }
/* in the side panel: one row per phase, on the light sheet */
.lead-side .phase-strip { margin-top: 0; }
@media (min-width: 901px) {
  .lead-side .phase-strip { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
  .lead-side .ph { display: grid; border: 0; border-radius: 0; background: transparent; box-shadow: 0 -1px 0 var(--line); padding: var(--space-xs) var(--space-sm); grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n r" "k k"; align-items: baseline; gap: var(--space-3xs) var(--space-sm); }
  .lead-side .ph .n { grid-area: n; font-size: var(--text-sm); } .lead-side .ph .r { grid-area: r; text-align: end; } .lead-side .ph .k { grid-area: k; }
  .lead-side .ph .meter { display: none; }
  .lead-side .ph.cur { box-shadow: 0 -1px 0 var(--line), inset 3px 0 0 var(--accent); }
  :root[lang="ar"] .lead-side .ph.cur { box-shadow: 0 -1px 0 var(--line), inset -3px 0 0 var(--accent); }
}
.lead-side .ph { border-color: var(--line); background: transparent; }
.lead-side .ph .n { color: var(--muted); }
.lead-side .ph.done .n { color: var(--good); } .lead-side .ph.done .meter { background: var(--good); }
.lead-side .ph.cur { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-color: var(--accent); }
.lead-side .ph.cur .n { color: var(--accent); }
.lead-side .ph.locked { background: transparent; opacity: 1; } .lead-side .ph.locked .n, .lead-side .ph.locked .r, .lead-side .ph.locked .k { color: var(--muted); opacity: .75; }
@media (max-width: 760px) { .phase-strip { gap: var(--space-2xs); } .ph { padding: var(--space-2xs) var(--space-xs) var(--space-xs); } .ph .k { display: none; } .ph .r { font-size: var(--text-xs); } }
@media (max-width: 480px) { .ph .r { display: none; } }