/* ───────────────────────────────────────────────────────────────────────────
   Billing cycle (/Billing): preview → lock → check & send → done.

   Scoped under .leaf-ds and built only from the existing tokens (leaf-ds.css).
   The page reads top to bottom as the biller's questions: where is this week,
   how much is ready, what isn't and who has to act, what never became a record.
   ─────────────────────────────────────────────────────────────────────────── */

.leaf-ds .bc-page { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

/* ── stage strip ────────────────────────────────────────────────────────── */
.leaf-ds .bc-steps {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.leaf-ds .bc-step {
    display: flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 6px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: var(--surface);
    font-size: 12.5px; font-weight: 600; color: var(--ink-3);
}
.leaf-ds .bc-step + .bc-step::before {
    content: ""; width: 14px; height: 1px; background: var(--ink-4);
    margin-left: -13px; margin-right: 6px;
}
.leaf-ds .bc-step-n {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; background: var(--surface-3); color: var(--ink-2);
}
.leaf-ds .bc-step.is-now { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.leaf-ds .bc-step.is-now .bc-step-n { background: var(--accent); color: #fff; }
.leaf-ds .bc-step.is-done { color: var(--ink-2); }
.leaf-ds .bc-step.is-done .bc-step-n { background: var(--accent-soft); color: var(--accent); }
.leaf-ds .bc-step.is-stopped { border-color: var(--c-conf-bd); color: var(--c-conf-fg); background: var(--c-conf-bg); }
.leaf-ds .bc-step.is-stopped .bc-step-n { background: var(--c-conf-fg); color: #fff; }
/* On a phone the four steps share one row: numbers for all, the title only for the current one. */
@media (max-width: 640px) {
    .leaf-ds .bc-steps { flex-wrap: nowrap; }
    .leaf-ds .bc-step { padding: 4px; }
    .leaf-ds .bc-step:not(.is-now):not(.is-stopped) .bc-step-t { display: none; }
    .leaf-ds .bc-step.is-now, .leaf-ds .bc-step.is-stopped { padding-right: 10px; }
    .leaf-ds .bc-step + .bc-step::before { width: 8px; margin-left: -11px; margin-right: 4px; }
}

/* ── the run for these dates ───────────────────────────────────────────── */
.leaf-ds .bc-run {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 16px; border-radius: var(--r-6); border: 1px solid var(--line); background: var(--surface);
}
.leaf-ds .bc-run.tone-live { border-color: var(--c-live-bd); background: var(--c-live-bg); }
.leaf-ds .bc-run.tone-wait { border-color: var(--c-warn-bd); background: var(--c-warn-bg); }
.leaf-ds .bc-run.tone-fail { border-color: var(--c-conf-bd); background: var(--c-conf-bg); }
.leaf-ds .bc-run.tone-done { border-color: var(--c-sched-bd); background: var(--c-sched-bg); }
.leaf-ds .bc-run-h { font-size: 15px; font-weight: 700; color: var(--ink-1); }
.leaf-ds .bc-run-sub { margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.leaf-ds .bc-run-acts { flex-shrink: 0; }

/* ── tiles ──────────────────────────────────────────────────────────────── */
.leaf-ds .bc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .leaf-ds .bc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .leaf-ds .bc-tiles { grid-template-columns: minmax(0, 1fr); } }
.leaf-ds .bc-tile {
    padding: 12px 14px; border-radius: var(--r-6);
    background: var(--surface); border: 1px solid var(--line);
}
.leaf-ds .bc-tile-l { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.leaf-ds .bc-tile-v { margin-top: 4px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.leaf-ds .bc-tile-c { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.leaf-ds .bc-tile.is-ready { border-color: var(--c-sched-bd); background: var(--c-sched-bg); }
.leaf-ds .bc-tile.is-ready .bc-tile-v { color: var(--accent-ink); }
.leaf-ds .bc-tile.is-warn { border-color: var(--c-warn-bd); }
.leaf-ds .bc-tile.is-warn .bc-tile-v { color: var(--c-warn-fg); }
.leaf-ds .bc-tile.is-flag { border-color: var(--c-conf-bd); }
.leaf-ds .bc-tile.is-flag .bc-tile-v { color: var(--c-conf-fg); }

/* ── sections ───────────────────────────────────────────────────────────── */
.leaf-ds .bc-sec { display: flex; flex-direction: column; gap: 8px; }
.leaf-ds .bc-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.leaf-ds .bc-sec-h h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-1); }
.leaf-ds .bc-sec-sub { font-size: 12px; color: var(--ink-3); }
.leaf-ds .bc-empty {
    padding: 14px; border-radius: var(--r-6); border: 1px dashed var(--line);
    font-size: 12.5px; color: var(--ink-3); background: var(--surface);
}
.leaf-ds .bc-foot { margin: 0; font-size: 11.5px; color: var(--ink-3); }

/* ── ready groups: one row per group, opens to its records ─────────────── */
.leaf-ds .bc-groups { border: 1px solid var(--line); border-radius: var(--r-6); background: var(--surface); overflow: hidden; }
.leaf-ds .bc-grow {
    display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px 70px 90px; gap: 8px;
    padding: 9px 14px; font-size: 13px; align-items: center; font-variant-numeric: tabular-nums;
}
.leaf-ds .bc-grow > span:not(:first-child) { text-align: right; }
.leaf-ds .bc-ghead { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.leaf-ds .bc-gfoot { font-weight: 700; background: var(--surface-2); }
.leaf-ds .bc-group { border-bottom: 1px solid var(--line-2); }
.leaf-ds .bc-group > summary { cursor: pointer; list-style: none; }
.leaf-ds .bc-group > summary::-webkit-details-marker { display: none; }
.leaf-ds .bc-group > summary:hover { background: var(--surface-2); }
.leaf-ds .bc-gname { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-1); min-width: 0; }
.leaf-ds .bc-gname svg, .leaf-ds .bc-block-t svg { color: var(--ink-2); flex-shrink: 0; transition: transform .12s; }
.leaf-ds details[open] > summary .bc-gname svg,
.leaf-ds details[open] > summary .bc-block-t svg { transform: rotate(90deg); }
.leaf-ds .bc-docs { padding: 2px 14px 10px 34px; max-height: 320px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.leaf-ds .bc-doc {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr) 64px; gap: 8px;
    padding: 4px 0; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line-2);
}
.leaf-ds .bc-doc-d { color: var(--ink-3); }
.leaf-ds .bc-doc-m { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaf-ds .bc-doc-u { text-align: right; font-variant-numeric: tabular-nums; }
/* Billing can hold a record or a group from the lock (#486): one more column for the button. */
.leaf-ds .bc-doc.can-hold { grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.4fr) 64px auto; align-items: center; }
.leaf-ds .bc-doc.bc-doc-act { display: flex; justify-content: flex-end; }
@media (max-width: 640px) {
    .leaf-ds .bc-grow { grid-template-columns: minmax(0, 1fr) 56px 70px; }
    .leaf-ds .bc-grow > span:nth-child(2), .leaf-ds .bc-grow > span:nth-child(5) { display: none; }
    .leaf-ds .bc-doc { grid-template-columns: 80px minmax(0, 1fr) 56px; }
    .leaf-ds .bc-doc.can-hold { grid-template-columns: 80px minmax(0, 1fr) 56px auto; }
    .leaf-ds .bc-doc-m { display: none; }
    .leaf-ds .bc-docs { padding-left: 14px; }
}

/* ── not ready: by owner, then reason, then where the fix is made ──────── */
.leaf-ds .bc-owner { display: flex; flex-direction: column; gap: 6px; }
.leaf-ds .bc-owner + .bc-owner { margin-top: 6px; }
.leaf-ds .bc-owner-h { font-size: 11.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.leaf-ds .bc-block { border: 1px solid var(--line); border-radius: var(--r-6); background: var(--surface); }
.leaf-ds .bc-block > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px; cursor: pointer; list-style: none;
}
.leaf-ds .bc-block > summary::-webkit-details-marker { display: none; }
.leaf-ds .bc-block-t { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-1); }
.leaf-ds .bc-block-n { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leaf-ds .bc-block-a { margin: 0; padding: 0 14px 8px 33px; font-size: 12px; color: var(--ink-3); }
.leaf-ds .bc-sec > .bc-block-a { padding: 0; }
.leaf-ds .bc-places { list-style: none; margin: 0; padding: 0 14px 10px 33px; display: flex; flex-direction: column; }
.leaf-ds .bc-sec > .bc-places { padding: 0; border: 1px solid var(--line); border-radius: var(--r-6); background: var(--surface); }
.leaf-ds .bc-places li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 6px 0; border-top: 1px solid var(--line-2); font-size: 12.5px;
}
.leaf-ds .bc-sec > .bc-places li { padding: 8px 14px; }
.leaf-ds .bc-sec > .bc-places li:first-child { border-top: 0; }
.leaf-ds .bc-place-n { font-weight: 600; color: var(--ink-1); }
.leaf-ds .bc-place-c { color: var(--ink-3); flex: 1 1 200px; }
/* A deferred place's reasons: each on its own line under the place, in the reviewer's words. */
.leaf-ds .bc-place-c.bc-deferral { flex-basis: 100%; font-style: italic; }
.leaf-ds .bc-fix {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink-1); font-size: 12px; font-weight: 600; text-decoration: none;
}
.leaf-ds .bc-fix:hover { border-color: var(--accent); color: var(--accent-ink); }

/* The no-employee-number stop: the alert carries the list, flush with its text. */
.leaf-ds .bc-stop p { margin: 2px 0 6px; }
.leaf-ds .bc-stop .bc-places { padding: 0; }
.leaf-ds .bc-stop .bc-places li:first-child { border-top: 0; }

/* ── lock dialog ────────────────────────────────────────────────────────── */
.leaf-ds .bc-lock p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.leaf-ds .bc-lock p b { color: var(--ink-1); }
.leaf-ds .bc-lock-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.leaf-ds .bc-lock-lb { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.leaf-ds .bc-lock-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-1); }

/* ── payroll: STEM's pay period in the topbar ─────────────────────────────── */
.pc-period { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pc-period-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-1); }
.pc-period-l b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-period-k { color: var(--ink-3); font-size: 12px; }

/* "From earlier weeks": its two lists (ready, not ready) under small headings. */
.leaf-ds .bc-sec > .bc-owner-h { margin: 0 0 6px; }
.leaf-ds .bc-owner-h.bc-owner-gap { margin-top: 16px; }