/* ==========================================================================
   v2-closed.css - the Closed Deals page.

   EVERY SELECTOR IS PREFIXED `cd`, so nothing here reaches another page. The
   card chassis, the tablist, the table base and the column menu come from
   v2.css and v2-loi.css and are not restated.

   THE MARKS CARRY WORDS FIRST. "n/a" and "withheld by policy" are different
   text, and the border style (dashed, solid) is the second channel. Neither
   mark carries a status colour, because an absence is a state and not a
   warning (GL-003 § 8.2).

   TYPE FOLLOWS THE COMMAND CENTER'S PROJECTOR FLOOR. Meta text uses
   --text-caption and --text-micro, both 13px (GL-003 § 8.4).

   STRICT CSP: the only dynamic value is a bar width, and it arrives as the
   custom property --w written through CSSOM by cc2-dom.js.
   ========================================================================== */

/* ---------------- page frame ---------------- */
.cdpage { display: flex; flex-direction: column; gap: var(--space-lg); }
.cdpage .card + .card { margin-top: 0; }
.cdpage .loibody > * + * { margin-top: var(--space-md); }
.cdpage .card:focus-visible { outline-offset: -2px; }
/* "Dissect this deal" scrolls this card to the top, which is under the sticky top bar. */
#cd-dissect { scroll-margin-top: calc(var(--topbar-h) + var(--space-md)); }
.cdstackblock { display: flex; flex-direction: column; gap: var(--space-md); }
/* A reading measure for prose. At 2568 an uncapped caption ran about 2240px. */
.cdcallout, .cdcaption, .cdempty { max-width: 120ch; }

/* ---------------- text ---------------- */
.cdcallout {
  margin: 0; padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface-2);
  font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-text);
}
.cdcaption {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cdnote {
  display: block; margin: 0; max-width: 60ch;
  font-size: var(--text-micro); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cdcallout .cdnote { max-width: none; margin-top: var(--space-xs); }
.cdsub {
  margin: var(--space-lg) 0 0; font-size: var(--text-h3); line-height: var(--text-h3-lh);
  font-weight: 700; color: var(--color-text-strong);
}
.cdval { color: var(--color-text); }
.cdquiet { color: var(--color-text-muted); }
.cdstack, .cdfieldval {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0;
}
.cdlist {
  margin: 0; padding-left: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-xs);
  font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text);
}

/* ---------------- tags, chips, marks ---------------- */
.cdtag {
  font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--color-text-muted);
}
/* The watch pair is the one pairing measured AA on both canvases for a label,
   and it is theme-invariant (GL-003 § 2.2b). The words carry the instruction. */
.cdtag--caution, .cdwarn {
  display: inline-block; padding: 2px var(--space-sm); border-radius: var(--radius-pill);
  font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  background: var(--surface-status-warning); color: var(--on-surface-status-warning);
  border: 1px solid var(--on-surface-status-warning);
}
.cdprov {
  display: inline-block; white-space: nowrap; padding: 2px var(--space-sm);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-muted);
  font-size: var(--text-micro); font-weight: 600; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}
.cdna, .cdwh { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cdna__mark, .cdwh__mark {
  display: inline-block; align-self: flex-start;
  padding: 2px var(--space-sm); border-radius: var(--radius-pill);
  background: var(--color-surface-2); color: var(--color-text-strong);
  font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}
.cdna__mark { border: 1px dashed var(--color-text-muted); }
.cdwh__mark { border: 1px solid var(--color-text-muted); }
.cdna__why, .cdwh__why, .cdwh__meta {
  max-width: 52ch; font-size: var(--text-micro); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cdwh__meta { max-width: 60ch; font-weight: 600; }

/* ---------------- dissection panels ---------------- */
.cdpanel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md);
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border);
}
.cdpanel__title {
  margin: 0; font-size: var(--text-h2); font-weight: 700; color: var(--color-text-strong);
}
.cdpanel__hint {
  margin-left: auto; font-size: var(--text-caption); color: var(--color-text-muted);
}
.cdpanel__body {
  display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-md);
}
.cdsubpanel { display: block; padding-top: var(--space-md); }
.cdsubpanel[hidden] { display: none; }

/* ---------------- detail groups ---------------- */
.cdgroups {
  display: grid; grid-template-columns: minmax(0, min(100%, 760px)); gap: var(--space-2xl);
}
.cdgroups > .cdgroup {
  border-left: 3px solid var(--color-text-muted); padding-left: var(--space-md);
}
.cdgroup { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.cdgroup__head {
  margin: 0; font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: 700;
  color: var(--color-text-strong);
}
.cdgroup__src {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cddl { margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.cddl--measure { max-width: 760px; }
.cdrow {
  display: grid; grid-template-columns: minmax(88px, min(42%, 190px)) minmax(0, 1fr);
  gap: var(--space-sm); align-items: baseline;
  padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border);
}
.cdrow__dt {
  font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text-muted);
}
.cdrow__dd {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-size: var(--text-body); line-height: var(--text-body-lh); color: var(--color-text);
}
.cdgroups .cdnote { max-width: 52ch; }

/* ---------------- conflicts ---------------- */
.cdconflict { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.cdcand {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm);
  padding-left: var(--space-md); border-left: 3px solid var(--color-border-strong);
}
.cdcand__val { font-weight: 700; color: var(--color-text-strong); overflow-wrap: anywhere; }
.cdcand__src {
  font-family: var(--font-code); font-size: var(--text-micro); color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.cdcand__gloss { font-size: var(--text-micro); color: var(--color-text-muted); }
.cdconflicts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg);
}
.cdconflictcard {
  display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-2); padding: var(--space-md);
}
.cdconflictcard__head {
  margin: 0; font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: 700;
  color: var(--color-text-muted); overflow-wrap: anywhere;
}

/* ---------------- stats and tiles ---------------- */
.cdstats { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.cdstat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cdstat__val {
  font-size: var(--text-metric-sm); font-weight: 700; color: var(--color-text-strong);
}
.cdstat__label { font-size: var(--text-caption); color: var(--color-text-muted); }
.cdtiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-md);
}
.cdtile { min-width: 0; }
.cdtile .tile__sub { overflow-wrap: anywhere; }
.cdtile--pending .tile__val { color: var(--color-text-muted); }

/* ---------------- bars ---------------- */
/* An unrecorded phase is an outline at its true length, never a filled bar and
   never a zero-length one. The outline is --color-text-muted because the
   border-strong rung measured under 3:1 against the track in v1. */
.cdphases { display: flex; flex-direction: column; gap: var(--space-xs); }
.cdphase {
  display: grid; grid-template-columns: minmax(88px, 148px) minmax(0, 1fr) auto;
  gap: var(--space-md); align-items: center;
}
.cdphase__label {
  font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text);
}
.cdphase__track {
  position: relative; height: 16px; border-radius: var(--radius-xs);
  background: var(--color-surface-2);
}
.cdphase__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px;
  border-radius: var(--radius-xs); background: var(--brand-ramp-4);
}
.cdphase--unrecorded .cdphase__fill {
  background: transparent; border: 1px dashed var(--color-text-muted);
}
.cdphase--unrecorded .cdphase__label { font-weight: 700; }
.cdphase__val {
  font-size: var(--text-caption); color: var(--color-text-muted);
  text-align: right; max-width: 24ch;
}
.cdphasemeta { display: flex; flex-direction: column; gap: var(--space-xs); }
.cdanchors {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: var(--space-xs);
  font-size: var(--text-caption); line-height: var(--text-caption-lh); color: var(--color-text);
}
.cdanchors li {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-md);
  align-items: baseline;
}
.cdanchors__date {
  font-size: var(--text-micro); color: var(--color-text-muted); white-space: nowrap;
}
.cdbar {
  display: block; position: relative; height: 8px; width: 100%; min-width: 60px;
  background: var(--color-surface-2); border-radius: var(--radius-xs);
}
.cdbar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); min-width: 2px;
  background: var(--brand-ramp-4); border-radius: var(--radius-xs);
}
/* GL-003 § 2.3b: a ramp fill on the dark canvas takes the ink-derived inset hairline. */
:root[data-theme="dark"] .cdphase:not(.cdphase--unrecorded) .cdphase__fill,
:root[data-theme="dark"] .cdbar__fill {
  outline: 1px solid color-mix(in srgb, var(--brand-ramp-4-ink) 35%, transparent);
  outline-offset: -1px;
}
.cdstageval { font-weight: 600; }

/* ---------------- empty ---------------- */
.cdempty {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-md) var(--space-lg); border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.cdempty__icon { font-size: var(--text-h2); line-height: 1; color: var(--color-text-muted); }
.cdempty__desc {
  margin: 0; font-size: var(--text-caption); line-height: var(--text-caption-lh);
  color: var(--color-text);
}

/* ---------------- tables ---------------- */
.cdtable { font-size: var(--text-caption); }
.cdtable td.num, .cdtable th.num { white-space: nowrap; }
.cdtable td.cdcellstack { white-space: normal; text-align: left; }
.cdtable .cdcol-name { min-width: 120px; }
.cdtable .cdcol-text { min-width: 140px; max-width: 320px; overflow-wrap: anywhere; }
.cdtable th.cdrowhead { font-weight: inherit; text-align: left; }
.cdtable code {
  font-family: var(--font-code); font-size: var(--text-micro); overflow-wrap: anywhere;
}
.cdtable .cdna__why, .cdtable .cdwh__why { max-width: 36ch; }
/* A MARK IN A NUMERIC CELL CARRIES A SENTENCE, and the cell's nowrap is for
   the figure. Left to inherit it, the reason ran on one line past its 36ch cap
   and pushed the dispositions table 141px past its box. */
.cdtable td.num .cdna, .cdtable td.num .cdwh { white-space: normal; text-align: left; }
/* Header labels on the dissection tables wrap, so eight long column names fit
   the box at 1280. The roster keeps the one-line headers its column menus use. */
.cdpanel .cdtable thead th { white-space: normal; }
/* The dissection tables size to their content inside a capped box, so a label
   stays near its value on a wide screen. The roster is not in a .cdpanel. */
.cdpanel .loiscroll { width: fit-content; max-width: min(100%, 1320px); }
.cdpanel .cdtable { width: auto; }
.cdscroll--roster { max-height: 640px; overflow-y: auto; }

/* ---------------- roster ---------------- */
.cdroster--compact .cdcol-opt { display: none; }
.cdtoolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
}
.cdtoolbar .cdcaption { flex: 1 1 320px; }
.cdtrigger {
  display: inline-flex; align-items: baseline; gap: var(--space-xs); padding: 0; border: 0;
  background: none; text-align: left; color: var(--color-accent-ink); font-weight: 600;
}
.cdtrigger__name { text-decoration: underline; text-underline-offset: 2px; }
.cdtrigger:hover .cdtrigger__name { text-decoration-thickness: 2px; }
.cdtrigger__caret { opacity: .7; }
.cdamt { white-space: nowrap; }
.cdamt__frac { display: inline-block; width: 1.8em; text-align: left; }
/* The selection cue is the words "showing below". The tint and the edge marker
   reinforce it and never carry it alone. */
.loitable tbody tr.cdrowsel td {
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}
.loitable tbody tr.cdrowsel td:first-child { box-shadow: inset 3px 0 0 var(--color-accent-ink); }
.cdrowsel__mark {
  font-size: var(--text-micro); font-weight: 700; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--color-accent-ink);
}
.cdrowsel__mark:empty { display: none; }

/* ---------------- dissection header ---------------- */
.cdpick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.cdpick select {
  max-width: 520px; min-width: 0; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
}
.cdpick__label {
  font-size: var(--text-micro); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking); color: var(--color-text-muted);
}
.cdpick__name {
  margin: 0; font-size: var(--text-h3); font-weight: 700; color: var(--color-text-strong);
}
.cdsum__line {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  font-size: var(--text-body); color: var(--color-text-strong);
}
.cdsum__item { font-weight: 600; }
.cdsum__item + .cdsum__item::before {
  content: "·"; color: var(--color-text-muted); font-weight: 400; margin-right: var(--space-md);
}
.cdsum__item .cdna__mark, .cdsum__item .cdwh__mark { margin-right: 2px; }

/* ---------------- summary card ---------------- */
.cddialog {
  padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg);
  width: calc(100vw - 2 * var(--space-lg)); max-width: 640px;
}
.cddialog::backdrop { background: var(--scrim-backdrop); }
.cddialog__panel {
  display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-xl);
  max-height: calc(100vh - 2 * var(--space-2xl)); overflow-y: auto;
}
/* The dialog clips anything outside the panel's border box, so the ring is drawn inside it. */
.cddialog__panel:focus-visible { outline-offset: -2px; }
.cddialog__title {
  margin: 0; font-size: var(--text-h2); line-height: var(--text-h2-lh);
  color: var(--color-text-strong); overflow-wrap: anywhere;
}
.cddialog__hslinks { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.cdhslink {
  font-size: var(--text-caption); font-weight: 600; color: var(--color-accent-ink);
  white-space: nowrap;
}
.cddialog__hsnote { margin: 0; font-size: var(--text-caption); color: var(--color-text-muted); }
.cddialog__groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg);
}
.cddialog .cdgroup__head { color: var(--color-text-muted); }
.cddialog .cdrow { grid-template-columns: minmax(88px, 42%) minmax(0, 1fr); }
.cddialog__actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-md);
}
.cddialog__actions .btn { min-width: 96px; }