/* widgets/close-room — THE CLOSE ROOM (Builder, 2026-08-05)

   COLOUR IS COURT-HONEST. A mirrored close is a REPORT, not a demand on anybody in this firm —
   Sunflower's close is Sergio's work, already done, and nothing on this surface is Craig's move.
   So there is no alarm colour anywhere in this file. The three greens carry the whole thing:
   --canopy for structure, --signal for the mirrored/secondary voice, --action for completion.
   The one amber note is the "next sync: not scheduled" provenance chip, which is the single place
   this room is telling on ITSELF, and it is deliberately a caution tint rather than an alarm —
   the data is real and fresh, it just is not on a schedule yet.

   TYPE COMES FROM THE TOKENS, never from ad-hoc px. --fs-body for anything anyone reads as prose
   (notes are prose — they are the point of this room), --fs-label for stage and section headers,
   --fs-micro for chips and badges only, never for a sentence. */

#close-room, #close-index {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: #f7f9f7;
  -webkit-overflow-scrolling: touch;
}
.cr-room .cr-inner {
  /* Left padding clears the 128x52 the portal engine reserves for its brand mark. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 32px 72px;
}

/* ── HEAD ──────────────────────────────────────────────────────────────────────────────────── */
.cr-room .cr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--canopy, #1e3b2f);
}
.cr-room .cr-client {
  margin: 0;
  font: 700 var(--fs-num, 24px)/1.15 Inter, system-ui, sans-serif;
  color: var(--canopy, #1e3b2f);
  letter-spacing: -0.01em;
}
.cr-room .cr-period {
  margin-top: 4px;
  font: 500 var(--fs-body, 13.5px)/1.4 Inter, system-ui, sans-serif;
  color: #55665c;
}
.cr-room .cr-headright {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.cr-room .cr-status {
  font: 700 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--signal-tint, #eaf3ec);
  color: var(--signal, #3e7d5c);
  border: 1px solid #cfe2d6;
}
.cr-room .cr-status.cr-done {
  background: var(--action-tint, #e4f9e8);
  color: var(--action-deep, #0c7a38);
  border-color: var(--action-line, #8fdba8);
}
.cr-room .cr-progress {
  font: 600 var(--fs-label, 11px) Inter, system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #55665c;
}
.cr-room .cr-people {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 0 0;
}
.cr-room .cr-person {
  font: 400 var(--fs-body, 13.5px)/1.4 Inter, system-ui, sans-serif;
  color: #33473c;
}
.cr-room .cr-person b {
  font: 600 var(--fs-label, 11px) Inter, system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7b8c82;
  margin-right: 6px;
}

/* ── PROVENANCE: source · synced · next sync ───────────────────────────────────────────────── */
.cr-room .cr-prov {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
.cr-room .cr-prov-item {
  font: 400 var(--fs-micro, 10px)/1.5 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  color: #46584e;
  background: #edf2ee;
  border: 1px solid #dbe7e0;
  border-radius: 5px;
  padding: 5px 10px;
}
.cr-room .cr-prov-item b {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7b8c82;
  margin-right: 5px;
}
/* Caution, not alarm — see the header note. */
.cr-room .cr-prov-warn {
  background: #fdf6e6;
  border-color: #ecdcae;
  color: #7a6320;
}
.cr-room .cr-prov-warn b { color: #96803c; }

.cr-room .cr-mgmt {
  margin-top: 12px;
  padding: 10px 13px;
  border-left: 3px solid var(--signal, #3e7d5c);
  background: #fff;
  font: 400 var(--fs-body, 13.5px)/1.5 Inter, system-ui, sans-serif;
  color: #33473c;
}
.cr-room .cr-mgmt b {
  font: 600 var(--fs-label, 11px) Inter, system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7b8c82;
  margin-right: 6px;
}
.cr-room .cr-unmapped {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 5px;
  background: #fdf6e6;
  border: 1px solid #ecdcae;
  font: 400 var(--fs-micro, 10px)/1.5 Inter, system-ui, sans-serif;
  color: #7a6320;
}

/* ── STAGES ────────────────────────────────────────────────────────────────────────────────── */
.cr-room .cr-stages { margin-top: 26px; }
.cr-room .cr-stage { margin-bottom: 30px; }
.cr-room .cr-stage-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #dbe7e0;
}
.cr-room .cr-stage-name {
  font: 600 var(--fs-label, 11px) Inter, system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--canopy, #1e3b2f);
}
.cr-room .cr-stage-count {
  font: 700 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  color: #7b8c82;
}
.cr-room .cr-empty {
  font: 400 var(--fs-body, 13.5px)/1.5 Inter, system-ui, sans-serif;
  color: #8a9a90;
  padding: 4px 0 8px;
}

/* ── TASKS ─────────────────────────────────────────────────────────────────────────────────── */
.cr-room .cr-tasks, .cr-room .cr-notes, .cr-room .cr-atts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cr-room .cr-task {
  background: #fff;
  border: 1px solid #e2ebe5;
  border-radius: 7px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.cr-room .cr-task-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cr-room .cr-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c8d5cd;
  flex: 0 0 auto;
}
.cr-room .cr-task.cr-done .cr-dot { background: var(--action, #15a850); }
.cr-room .cr-task.cr-wip .cr-dot { background: var(--signal, #3e7d5c); }
.cr-room .cr-tname {
  font: 600 var(--fs-body, 13.5px)/1.35 Inter, system-ui, sans-serif;
  color: #1f3129;
  flex: 1 1 auto;
}
.cr-room .cr-tstatus {
  font: 700 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7b8c82;
}
.cr-room .cr-task.cr-done .cr-tstatus { color: var(--action-deep, #0c7a38); }
.cr-room .cr-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 0 17px;
  font: 400 var(--fs-micro, 10px)/1.5 Inter, system-ui, sans-serif;
  color: #7b8c82;
}

/* Reconciliation detail — the balance is the whole reason this stage is not a check mark. */
.cr-room .cr-recon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 0 17px;
  padding: 7px 11px;
  background: var(--signal-tint, #eaf3ec);
  border-radius: 5px;
}
.cr-room .cr-bal {
  font: 700 var(--fs-num-sm, 17px)/1 Inter, system-ui, sans-serif;
  color: var(--canopy, #1e3b2f);
  font-variant-numeric: tabular-nums;
}
.cr-room .cr-acct, .cr-room .cr-src {
  font: 500 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5c7166;
}
/* THE ATTESTATION — a reconciliation whose firm does not let dollar figures leave the building.
   Deliberately quieter than .cr-bal: an attestation is evidence, but it is not the figure, and
   giving it the balance's weight would let a reader who scans the stage read one as the other.
   Deliberately louder than .cr-acct: it is the sentence that makes this line not a check mark. */
.cr-room .cr-attest {
  font: 600 var(--fs-label, 12px)/1.3 Inter, system-ui, sans-serif;
  color: var(--canopy, #1e3b2f);
}
/* Undated and not-reconciled both step back to plain grey — they are honest, weaker statements,
   and neither is a fault worth alarm colour (alarm is Craig-court only). */
.cr-room .cr-attest-undated, .cr-room .cr-attest-no {
  font-weight: 500;
  color: var(--motm-grey-700, #525854);
}
.cr-room .cr-attest-by {
  font: 500 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5c7166;
}

/* ── NOTES: rendered as written, author first ──────────────────────────────────────────────── */
.cr-room .cr-notes {
  margin: 10px 0 0 17px;
  border-left: 2px solid #e2ebe5;
  padding-left: 12px;
}
.cr-room .cr-note { padding: 7px 0; }
.cr-room .cr-note + .cr-note { border-top: 1px dashed #eaf0ec; }
.cr-room .cr-note-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.cr-room .cr-author {
  font: 600 var(--fs-body, 13.5px)/1.4 Inter, system-ui, sans-serif;
  color: var(--canopy, #1e3b2f);
}
.cr-room .cr-when {
  font: 400 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  color: #8a9a90;
}
.cr-room .cr-note-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin-top: 3px;
  font: 400 var(--fs-body, 13.5px)/1.5 Inter, system-ui, sans-serif;
}
.cr-room .cr-col {
  font: 600 var(--fs-micro, 10px) Inter, system-ui, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7b8c82;
}
.cr-room .cr-from { color: #8a9a90; text-decoration: line-through; }
.cr-room .cr-arrow { color: #b3c3ba; }
.cr-room .cr-to { color: #1f3129; font-weight: 600; }
.cr-room .cr-note-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 4px;
  font: 400 var(--fs-micro, 10px)/1.5 Inter, system-ui, sans-serif;
  color: #7b8c82;
}
.cr-room .cr-amt {
  font-weight: 700;
  color: #46584e;
  font-variant-numeric: tabular-nums;
}

/* ── ATTACHMENTS ───────────────────────────────────────────────────────────────────────────── */
.cr-room .cr-atts { margin: 9px 0 0 17px; }
.cr-room .cr-att {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  font: 400 var(--fs-micro, 10px)/1.6 Inter, system-ui, sans-serif;
  color: #55665c;
}
.cr-room .cr-file { color: #33473c; }
.cr-room .cr-atype, .cr-room .cr-adate { color: #98a89e; }
.cr-room .cr-atts-loose {
  columns: 3;
  column-gap: 26px;
  margin-left: 0;
}
.cr-room .cr-atts-loose .cr-att { break-inside: avoid; }

/* ── STATES ────────────────────────────────────────────────────────────────────────────────── */
.cr-room .cr-state {
  margin-top: 40px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e2ebe5;
  border-radius: 7px;
  font: 400 var(--fs-body, 13.5px)/1.6 Inter, system-ui, sans-serif;
  color: #46584e;
}
.cr-room .cr-state, .cr-room .cr-state code, .cr-room .cr-state code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #edf2ee;
  padding: 1px 5px;
  border-radius: 3px;
}
.cr-room .cr-err { border-left: 3px solid #d9a441; }

@media (max-width: 860px) {
  .cr-room .cr-inner { padding: 60px 18px 56px; }
  .cr-room .cr-head { flex-direction: column; gap: 10px; }
  .cr-room .cr-atts-loose { columns: 1; }
}

/* ── THE INDEX ROOM (#/closes) ───────────────────────────────────────────────────────────────
   Same three greens, same type tokens, and the same court-honesty: a client whose close is not
   mirrored yet is a FACT ABOUT THIS FIRM'S PLUMBING, not a demand on anyone, so it wears the
   quiet grey voice — never alarm. The only colour that separates the two groups is --action on
   the live rows' rail, which reads as "there is something behind this door". */
.cr-room .cx-sec { margin-top: 30px; }
.cr-room .cx-rows {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}
.cr-room .cx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: #fff;
  border: 1px solid #e2ebe5;
  border-left: 3px solid #dfe7e2;
  border-radius: 7px;
  text-decoration: none;
  color: inherit;
}
.cr-room .cx-row:hover {
  background: var(--brand-tint, #eef5f0);
  border-color: var(--signal, #3e7d5c);
}
.cr-room .cx-row:focus-visible {
  outline: 2px solid var(--canopy, #1e3b2f);
  outline-offset: 1px;
}
/* A mirrored row is the one with a full room behind it — the rail says so, before the click. */
.cr-room .cx-row.cx-live { border-left-color: var(--action, #15a850); }
.cr-room .cx-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 var(--fs-body, 13.5px) Inter, system-ui, sans-serif;
  color: var(--brand-ink-green, #1a2e20);
}
.cr-room .cx-own,
.cr-room .cx-per,
.cr-room .cx-prog,
.cr-room .cx-mark {
  flex: none;
  font: 500 var(--fs-micro, 11px) Inter, system-ui, sans-serif;
  color: #8a9a90;
  white-space: nowrap;
}
.cr-room .cx-per { color: #46584e; }
.cr-room .cx-prog { color: var(--signal, #3e7d5c); font-weight: 600; }
.cr-room .cx-mark { min-width: 118px; text-align: right; }
.cr-room .cx-row.cx-live .cx-mark { color: var(--action-deep, #0c7a38); }
.cr-room .cx-go {
  flex: none;
  font: 700 var(--fs-body, 13.5px) Inter, system-ui, sans-serif;
  color: #b3c3ba;
}
.cr-room .cx-row:hover .cx-go { color: var(--signal, #3e7d5c); }
.cr-room .cx-find {
  font: 400 var(--fs-body, 13.5px) Inter, system-ui, sans-serif;
  padding: 6px 11px;
  border: 1px solid #d7e2da;
  border-radius: 6px;
  background: #fff;
  color: #1f3129;
  min-width: 200px;
}
.cr-room .cx-find:focus {
  outline: none;
  border-color: var(--signal, #3e7d5c);
}
.cr-room .cx-count {
  font: 500 var(--fs-micro, 11px) Inter, system-ui, sans-serif;
  color: #8a9a90;
  margin-left: 9px;
}
.cr-room .cr-headright { align-items: center; }

@media (max-width: 860px) {
  .cr-room .cx-own, .cr-room .cx-prog { display: none; }
  .cr-room .cx-mark { min-width: 0; }
}

/* ── INLINE — the close under the row that names it (Craig 8/6 ruling M) ──────────────────────
   Every rule above was rewritten from `#close-room .x` to `.cr-room .x` in this same change, for
   one reason: an id selector cannot dress a second instance, and the close body now paints in two
   places. The elements matched are identical — shell() has always emitted class="cr-room" on the
   div carrying that id — so the room is untouched by construction.

   What the inline panel overrides is CHROME ONLY, never the reading surface. Notes are the point
   of this close and they keep the room's prose size; what shrinks is the room-sized header, the
   72px of page padding a full room wants, and the height (a 90-task close must not push the rest
   of the client list off the floor — it scrolls inside its own panel instead). */
.cr-inline {
  margin: 2px 0 8px;
  border-radius: 10px;
  border: 1px solid var(--brand-line-pale, #cfe3d3);
  border-left: 3px solid var(--canopy, #1e3b2f);
  background: #f7f9f7;
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.cr-inline .cr-inner { max-width: none; margin: 0; padding: 14px 16px 16px; }
.cr-inline .cr-head { padding-bottom: 10px; border-bottom-width: 1px; }
.cr-inline .cr-client { font-size: var(--fs-body, 14px); font-weight: 700; }
.cr-inline .cr-stages { gap: 14px; }
.cr-inline .cr-state { padding: 14px 4px; }
/* The expander itself: a button, not a link — it goes nowhere. */
.ct-close-door[aria-expanded="true"] {
  background: var(--canopy, #1e3b2f) !important;
  color: #fff !important;
}

/* ── THE RECONCILE DOOR (Builder 2026-08-08) ─────────────────────────────────────────────────
   Sits under the Reconciliation stage's task list, and under nothing else. Styled as a door and
   not as an alarm: the reconcile may or may not tie, and the button cannot know which before it
   opens, so it carries meter ink only. Court-honest law — alarm ink belongs to the your-court
   band alone, and a control is never a verdict. */
.cr-recon-door { margin-top: 12px; }
.cr-recon-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 16px; cursor: pointer; font: inherit; color: inherit;
  background: var(--motm-grey-50, #f8faf9);
  border: 1px solid var(--brand-line-pale, #cfe3d3);
  border-left: 3px solid var(--canopy, #1e3b2f);
  border-radius: 8px; transition: background .14s, border-color .14s;
}
.cr-recon-btn:hover { background: #fff; border-color: var(--signal, #3e7d5c); }
.cr-recon-btn[aria-expanded="true"] { background: #fff; border-color: var(--canopy, #1e3b2f); }
.cr-recon-ico { color: var(--canopy, #1e3b2f); font-size: 15px; flex-shrink: 0; }
.cr-recon-lbl {
  font-size: var(--fs-label, 11px); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--canopy, #1e3b2f); flex-shrink: 0;
}
.cr-recon-sub { font-size: 11.5px; color: var(--motm-grey-700, #525854); line-height: 1.4; }
.cr-recon-panel { margin-top: 12px; }
.cr-recon-panel[hidden] { display: none; }
@media (max-width: 720px) {
  .cr-recon-btn { flex-wrap: wrap; gap: 6px 10px; }
  .cr-recon-sub { flex-basis: 100%; }
}