/* Closing (§6.9) and Reports (§6.11).
 *
 * Every metric in the .cl block below is quoted from the "07 Closing
 * checklist" export's own inline `style` and `rowStyle` declarations. Where a
 * value differs from the prototype the comment says so and why — the only
 * systematic change is that its physical `padding-left` / `border-left` become
 * logical `-inline-start` properties, because this screen renders in Arabic
 * too and rtl-check.py enforces that. */

/* Prototype: `display:flex; align-items:flex-end; gap:16px; margin-bottom:14px`.
   `flex-wrap` is added: the export is a fixed-width desktop artboard and has
   no answer for a narrow window. */
.cl__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.cl__headings { flex: 1; min-width: 0; }
.cl__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.cl__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; }

/* The prototype's "Apply firm template" slot, at its metrics
   (`padding:9px 13px; font-size:12.5px; font-weight:500`, pill, 1px line-2).
   There is no template concept in the API — no route, no field, and a
   server-fixed three-step list a template could not change — so the screen's
   real secondary act, Mark prepared, occupies it. */
.cl__template {
  display: flex; align-items: center; gap: 7px;
  background: var(--p-surface); border: 1px solid var(--p-line-2);
  border-radius: var(--radius-pill); padding: 9px 13px;
  font-size: 12.5px; font-weight: 500; color: var(--p-ink); cursor: pointer;
}

/* Said once when a role holds no act on this screen at all, rather than by
   four controls that are each individually absent. */
.cl__standing {
  flex-basis: 100%; margin: 0;
  font-size: 11.5px; color: var(--p-ink-3); line-height: 1.5;
}

/* The month switcher. A native select: the option list has to stay usable at
   36 entries and in RTL, and there is no menu primitive here to build on. */
.cl__period { display: inline-flex; align-items: center; gap: 8px; }
.cl__period-label { font-size: 11px; color: var(--p-ink-3); }
.cl__period-select {
  background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 8px 12px;
  font: inherit; font-size: 12.5px; color: var(--p-ink); cursor: pointer;
}
.cl__period-select:disabled { opacity: 0.6; cursor: default; }

/* On the unstarted state the switcher is centred with the rest of the block,
   and sits clear of the button below it. */
.cl__unstarted .cl__period { justify-content: center; margin: 4px 0 14px; }

/* `1fr 330px` and `gap:16px` are the prototype's own values, read off the
   export's grid declaration rather than eyeballed. */
.cl__grid { display: grid; grid-template-columns: 1fr 330px; gap: 16px; align-items: start; }
.cl__main, .cl__side { display: flex; flex-direction: column; gap: 14px; }

/* The prototype puts the percentage and the bar on the left of this card and
   the stat strip on the right, divided by a rule. */
.cl__progress {
  padding: 15px 16px; display: flex; align-items: center; gap: 14px;
}
.cl__progress-figure { flex: 1; min-width: 0; }
.cl__pct-row { display: flex; align-items: baseline; gap: 9px; }
.cl__pct {
  /* No font-family: the element carries `.num`, and JetBrains Mono is the
     numerals' face throughout. Declaring the display font here at equal
     specificity but later in the cascade silently beat it. */
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
}
.cl__pct-label { font-size: 12px; color: var(--p-ink-2); }
.cl__bar {
  height: 8px; border-radius: var(--radius-pill);
  background: var(--p-surface-2); margin: 9px 0 0; overflow: hidden;
}
/* `var(--p-brand)`, which is the export's own `closeBarStyle.background`. */
.cl__bar-fill { display: block; height: 100%; background: var(--p-brand); }

/* THREE stats, not the prototype's four — "Blockers" and "Days left" have no
   field behind them. Laid out as label-over-value columns, as it draws them. */
.cl__stats {
  flex: none; display: grid; grid-auto-flow: column; gap: 22px; margin: 0;
  padding-inline-start: 20px; border-inline-start: 1px solid var(--p-line);
  grid-template-rows: auto auto;
}
.cl__stats dt { font-size: 10.5px; color: var(--p-ink-3); grid-row: 1; }
.cl__stats dd { margin: 3px 0 0; font-size: 16px; font-weight: 600; grid-row: 2; }
/* The preparation tile is a word, not a figure, so it sets its own size. */
.cl__prep { font-size: 12px; }
.cl__prep.is-done { color: var(--p-ok); }
.cl__prep.is-stale { color: var(--p-warn); }
.cl__prep.is-waiting { color: var(--p-ink-3); }

/* The checklist card. `.cl__main` already spaces the cards by 14px, so unlike
   the old build this adds no margin of its own — that doubled the gap. The
   rows run edge to edge inside it, as the prototype draws them. */
.cl__group { overflow: hidden; }
.cl__tasks { list-style: none; margin: 0; padding: 0; }

/* The export's `rowStyle`, verbatim:
     display:flex; align-items:center; gap:12px; padding:11px 16px;
     borderBottom:1px solid var(--p-line);
     background: blocked && !done ? var(--p-risk-soft) : transparent
   `align-items` stays `center` as it draws it; the text column carries the
   only multi-line content and centres against a 20px control cleanly.
   Its four trailing slots — evidence, assignee avatar, due date, status —
   collapse to one: only the status has a field behind it. */
.cl__task {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--p-line);
}
/* The card clips at 20px, so the last row's rule would sit on the curve. */
.cl__task:last-child { border-bottom: none; }
/* A blocked row is visually distinct AND says so; colour is never the only
   signal — the row also carries a "Blocked" chip. */
.cl__task.is-blocked { background: var(--p-risk-soft); }
/* `width:20px; height:20px; borderRadius:6px; boxShadow: inset 0 0 0 1.5px`
   are the export's `checkStyle`. */
.cl__check {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--p-line-2);
}
/* `background: var(--p-ok)` with no inset ring, per `checkStyle` when done. */
.cl__check.is-on { background: var(--p-ok); color: var(--p-on-brand); box-shadow: none; }
/* An open step nobody present may sign off. Sign-off is an ACCOUNTANT act, so
   for anyone else the control is absent — this is the empty box left behind,
   marked up as an image with a label rather than as a dead button. */
.cl__check.is-empty { cursor: default; }
.cl__task-text { flex: 1; min-width: 0; }
/* `font-size:12.5px; font-weight:500` — the export's, not a heading weight. */
.cl__task-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500;
}
/* The prototype's instruction line, at its `11px; var(--p-ink-3); margin-top:2px`.
   `blockerReason` is the only text the wire has for that slot. */
.cl__task-instruction { font-size: 11px; color: var(--p-ink-3); margin-top: 2px; }
/* `width:62px; justify-content:center` is the export's `signStyle`. */
.cl__task-status { flex: none; display: flex; justify-content: center; min-width: 62px; }

.cl__blockers, .cl__history { list-style: none; margin: 0; padding: 0 16px; }
.cl__blockers li, .cl__history li {
  padding: 9px 0; border-top: 1px solid var(--p-line);
}
.cl__blockers li:first-child, .cl__history li:first-child { border-top: none; }
.cl__history-top {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 600;
}
.cl__history-when { font-size: 10.5px; font-weight: 400; color: var(--p-ink-3); }
/* A reopening is the exceptional event in this list — the prototype gives it
   a card of its own, so here it gets a marker rather than being lost among
   four other actions. Never colour alone: the action word says "Reopened". */
.cl__history li.is-reopen { border-inline-start: 2px solid var(--p-warn); padding-inline-start: 10px; }
/* An obstacle row is a sentence, so it wraps rather than sitting on one line. */
.cl__blocker-title {
  font-size: 12px; font-weight: 500; line-height: 1.5;
}
.cl__blocker-why, .cl__history-why {
  font-size: 10.5px; color: var(--p-ink-3); margin-top: 3px; line-height: 1.5;
}

/* Sign-off rows: role + state chip, then who, then when. The prototype's
   avatar circle is dropped with the assignee it belonged to — there is no
   per-person initial on a period, only two user ids. */
.cl__signoffs { list-style: none; margin: 0; padding: 0 16px; }
.cl__signoffs li { padding: 9px 0; border-top: 1px solid var(--p-line); }
.cl__signoffs li:first-child { border-top: none; }
.cl__signoff-role {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600;
}
.cl__signoff-who { font-size: 11.5px; color: var(--p-ink-2); margin-top: 3px; line-height: 1.45; }
.cl__signoff-when { font-size: 10.5px; color: var(--p-ink-3); margin-top: 2px; }

.cl__signoff-note {
  font-size: 10.5px; color: var(--p-ink-3); margin: 10px 0 0;
  padding: 0 16px 14px; line-height: 1.5;
}

@media (max-width: 1199px) { .cl__grid { grid-template-columns: 1fr; } }

/* ---- Reports (§6.11) ---- */
.rp { display: grid; grid-template-columns: 320px 1fr 260px; gap: 14px; align-items: start; }
@media (max-width: 1319px) { .rp { grid-template-columns: 260px 1fr; } }
@media (max-width: 899px)  { .rp { grid-template-columns: 1fr; } }

.rp__builder, .rp__issue {
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-lg); padding: 16px;
}
.rp__builder .eyebrow, .rp__issue .eyebrow { display: block; margin: 14px 0 8px; }
.rp__builder .eyebrow:first-child { margin-top: 0; }

.rp__types { display: flex; flex-direction: column; }
.rp__type {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; border-radius: var(--radius-pill);
  padding: 10px 11px; margin-bottom: 2px;
  font-size: 12.5px; font-weight: 500; color: var(--p-ink-2);
  cursor: pointer; text-align: start;
}
.rp__type.is-on {
  background: var(--p-brand-soft); color: var(--p-brand-ink); font-weight: 600;
}
.rp__periods { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rp__period {
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-sm); padding: 9px 0;
  font-size: 12px; font-weight: 500; color: var(--p-ink-2); cursor: pointer;
}
.rp__period.is-on {
  background: var(--p-ink); border-color: var(--p-ink);
  color: var(--p-surface); font-weight: 600;
}

.rp__opts { display: flex; flex-direction: column; gap: 4px; }
.rp__opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 7px 0; cursor: pointer;
}
.rp__opt-label { flex: 1; font-size: 12px; color: var(--p-ink-2); text-align: start; }
.rp__track {
  width: 36px; height: 20px; flex: none; border-radius: var(--radius-pill);
  background: var(--p-line-2); display: flex; align-items: center;
  padding: 2px; justify-content: flex-start; transition: background 140ms ease;
}
.rp__track.is-on { background: var(--p-brand); justify-content: flex-end; }
.rp__knob {
  width: 16px; height: 16px; border-radius: var(--radius-pill);
  background: var(--p-surface); box-shadow: var(--shadow-xs);
}

.rp__preview { display: flex; justify-content: center; }
/* The paper is deliberately a LIGHT scope: "light is for what clients see". */
.rp__paper {
  width: 100%; max-width: 620px;
  background: var(--p-surface); color: var(--p-ink);
  border: 1px solid var(--p-line); border-radius: var(--radius-md);
  padding: 28px 30px 34px;
}
.rp__letterhead {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; border-bottom: 1px solid var(--p-line); margin-bottom: 18px;
}
.rp__mark {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-grad); color: var(--text-on-accent);
}
.rp__firm { font-size: 13px; font-weight: 700; }
.rp__prepared { font-size: 10.5px; color: var(--p-ink-3); }
.rp__client { font-size: 17px; font-weight: 600; margin: 0; }
.rp__title { font-size: 11.5px; color: var(--p-ink-3); margin: 3px 0 18px; }

.rp__section { display: block; margin: 16px 0 6px; }
.rp__line, .rp__total {
  display: grid; grid-template-columns: 1fr 110px;
  gap: 10px; padding: 5px 0; font-size: 12px;
}
.rp__line.has-compare, .rp__total.has-compare {
  grid-template-columns: 1fr 110px 110px;
}
.rp__amt { text-align: end; }
.rp__prior { color: var(--p-ink-3); }
.rp__total {
  border-top: 2px solid var(--p-ink); margin-top: 8px; padding-top: 9px;
  font-size: 13.5px; font-weight: 700;
}
.rp__notes { font-size: 10.5px; color: var(--p-ink-3); margin-top: 18px; }

.rp__status { margin-bottom: 12px; }
.rp__signatory { display: flex; flex-direction: column; font-size: 12px; margin: 0 0 14px; }
.rp__signatory span { font-size: 10.5px; color: var(--p-ink-3); margin-top: 2px; }
.rp__issue-btn { width: 100%; justify-content: center; margin-bottom: 8px; }
.rp__secondary {
  width: 100%; background: var(--p-surface-2); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 9px 0; margin-bottom: 6px;
  font-size: 12px; cursor: pointer;
}
.rp__note { font-size: 10.5px; color: var(--p-ink-3); line-height: 1.5; margin: 10px 0 0; }
.rp__versions { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.rp__versions li { padding: 6px 0; border-top: 1px solid var(--p-line); }
.rp__versions li:first-child { border-top: none; }
.rp__superseded { color: var(--p-ink-3); }

.cl__signoff .card__head { padding-bottom: 8px; }
.rp__statement { display: block; }

/* Below 900px the progress card stops being two columns beside a rule: the
   stat strip drops under the bar, and the rule with it. */
@media (max-width: 899px) {
  /* The row's trailing status drops under the text rather than squeezing it. */
  .cl__task { align-items: flex-start; flex-wrap: wrap; }
  .cl__task-status { margin-inline-start: 32px; justify-content: flex-start; }
  .cl__progress { flex-direction: column; align-items: stretch; }
  .cl__stats {
    grid-auto-flow: row; grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none; row-gap: 2px; column-gap: 12px;
    padding-inline-start: 0; border-inline-start: none;
    padding-top: 12px; border-top: 1px solid var(--p-line);
  }
  .cl__stats dt { grid-row: auto; }
  .cl__stats dd { grid-row: auto; }
  .cl__head { flex-direction: column; align-items: flex-start; }
}

/* A completed step is static, not a control. */
.cl__check.is-locked { cursor: default; }
.cl__check.is-busy { opacity: 0.6; }
/* A step the SERVER would refuse. Disabled and explained, per §8.6 — unlike
   a step this ROLE cannot sign off, which renders no control at all. */
.cl__check.is-disabled { cursor: not-allowed; opacity: 0.55; }
.cl__task-amount { font-size: 11px; color: var(--p-ink-2); margin-top: 4px; }
.cl__task-immutable { font-size: 10.5px; color: var(--p-ink-3); margin-top: 4px; line-height: 1.5; }
.cl__obstacles .cl__signoff-note { padding-bottom: 0; }
.cl__obstacles .cl__signoff-note:last-child { padding-bottom: 14px; }
.cl__reopen {
  background: var(--p-warn-soft); border: 1px solid var(--p-warn);
  border-radius: var(--radius-pill); padding: 9px 14px;
  font-size: 12.5px; font-weight: 600; color: var(--p-warn); cursor: pointer;
}
.cl__lock.is-busy, .cl__template.is-busy { opacity: 0.7; }

/* No figures for this statement type. */
.rp__nofigures { padding: 8px 0 4px; }
.rp__nofigures-tile {
  width: 44px; height: 44px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--p-warn-soft); color: var(--p-warn);
}
.rp__nofigures-title { font-size: 14.5px; font-weight: 600; margin: 0 0 6px; }
.rp__nofigures-body { font-size: 12px; line-height: 1.6; color: var(--p-ink-2); margin: 0 0 10px; }
.rp__nofigures-needs {
  font-size: 11px; color: var(--p-ink-3); margin: 0;
  border-inline-start: 2px solid var(--p-line-2); padding-inline-start: 10px;
}
.rp__line--head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--p-ink-3); padding: 16px 0 6px; }
.rp__line--sub { border-top: 1px solid var(--p-line-2); font-weight: 600; }
.rp__line--total { border-top: 2px solid var(--p-ink); margin-top: 8px;
  padding-top: 9px; font-size: 13.5px; font-weight: 700; }
.rp__issue-btn.is-busy { opacity: 0.7; }
.cl__unstarted { max-width: 460px; }