/* Contract delivery terms review («شروط التسليم التعاقدية») — scoped under .cdt.
   Colours: the shared roles read from the token layer (tokens.css, HO-3104)
   and gain a dark value for free; what is local to this design keeps its
   light value to the byte and collapses onto the nearest shared token in
   dark (.dark .cdt below), so no dark value is a literal chosen by hand.
   Solids and the ink on them are fixed in both themes: a filled chip keeps
   its fill on a dark page, and --ink doubled as a fill before (the active
   chip) — in dark that ink goes light and white text on it would vanish. */
.cdt {
  --ink: var(--ho-ink); --t3: var(--ho-ink-muted); --b1: var(--ho-line); --s1: var(--ho-surface); --s2: var(--ho-surface-sunken);
  --ok: var(--ho-success-ink); --late: var(--ho-danger-ink); --amber: var(--ho-warning-ink);
  --ok-bg: var(--ho-success-soft); --late-bg: var(--ho-danger-soft); --amber-bg: var(--ho-warning-soft); --muted-bg: var(--ho-surface-inset);
  /* gray-400 was painted as TEXT four times at 2.54:1 on white; de-emphasis is --ho-ink-muted. */
  --t4: var(--ho-ink-muted);
  /* local, unchanged in light */
  --t2:#4b5563; --b2:#eef0f3; --s3:#f4f5f7;
  --ok-b:#b8e2c8; --late-b:#f5c2bd;
  --yellow:#f5c400; --yellow-bg:#fff9e0; --yellow-b:#f5e3a0;
  --purple:#7a3e9d; --purple-bg:#f1e8f7; --purple-b:#d9c3ea; --orange-b:#f2c7a0; --orange-bg:#fff8f1;
  /* fixed in both themes */
  --on-solid:#fff; --solid:#111827; --on-yellow:#111827; --on-amber:#111827; --late-solid:#b3261e;
  color: var(--t2); font-size: 13px; display: flex; flex-direction: column; gap: 14px; }
.dark .cdt {
  --t2: var(--ho-ink); --b2: var(--ho-line); --s3: var(--ho-surface-raised);
  --ok-b: var(--ho-success-line); --late-b: var(--ho-danger-line);
  --yellow-bg: var(--ho-warning-soft); --yellow-b: var(--ho-warning-line);
  --purple: var(--ho-info-ink); --purple-bg: var(--ho-info-soft); --purple-b: var(--ho-info-line); --orange-b: var(--ho-accent-line); --orange-bg: var(--ho-accent-soft); }
.cdt * { box-sizing: border-box; }
.cdt .c-muted { color: var(--t4); } .cdt .c-amber { color: var(--amber); }
.cdt-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cdt-title { font-size: 24px; font-weight: 800; color: var(--ink); margin: 0; }
.cdt-sub { font-size: 13px; color: var(--t3); margin: 4px 0 0; max-width: 720px; }
.cdt-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdt-pill { background: var(--s1); border: 1px solid var(--b1); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.cdt-pill b { font-weight: 700; } .cdt-pill b.st-proposed { color: var(--amber); } .cdt-pill b.st-confirmed { color: var(--ok); } .cdt-pill b.st-rejected { color: var(--late); }
.cdt-toolbar { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 10px 14px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cdt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cdt-chip { background: var(--s1); border: 1px solid var(--b1); border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--t2); }
.cdt-chip.is-on { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.cdt-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }
.cdt-field select, .cdt-field input { border: 1px solid var(--b1); border-radius: 8px; padding: 6px 8px; font-size: 12px; background: var(--s3); color: var(--ink); }
.cdt-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 12px; }
.cdt-card { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.cdt-list { overflow-x: auto; }
.cdt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cdt-table th { text-align: start; font-size: var(--ho-text-xs); color: var(--t4); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--b1); white-space: nowrap; }
.cdt-table td { padding: 7px 6px; border-bottom: 1px solid var(--b2); vertical-align: top; white-space: nowrap; }
.cdt-table tbody tr { cursor: pointer; } .cdt-table tbody tr:hover td { background: var(--s2); } .cdt-table tr.is-selected td { background: var(--yellow-bg); }
.cdt-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdt-status { display: inline-block; font-size: var(--ho-text-xs); font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--muted-bg); color: var(--t3); }
.cdt-status.st-proposed { background: var(--amber-bg); color: var(--amber); } .cdt-status.st-confirmed { background: var(--ok-bg); color: var(--ok); } .cdt-status.st-rejected { background: var(--late-bg); color: var(--late); }
.cdt-detail h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink); display: flex; gap: 8px; align-items: center; } .cdt-detail h4 { font-size: 12px; margin: 14px 0 6px; color: var(--t2); }
.cdt-dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; } .cdt-dl dt { color: var(--t4); } .cdt-dl dd { margin: 0; }
.cdt-quote { background: var(--s2); border: 1px solid var(--b2); border-radius: 8px; padding: 8px; font-size: 12px; line-height: 1.7; }
.cdt-result { margin-top: 10px; background: var(--s2); border: 1px solid var(--b2); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.cdt-siblings { margin: 0; padding-inline-start: 16px; font-size: 12px; }
.cdt-preview { border-style: dashed; }
.cdt-override { display: inline-block; font-size: var(--ho-text-xs); font-weight: 700; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-b); border-radius: 999px; padding: 1px 8px; }
.cdt-reference summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--t2); }
.cdt-reference { background: var(--s2); border: 1px solid var(--b2); border-radius: 9px; padding: 10px; } .cdt-reference h4 { margin: 0; font-size: 13px; }
.cdt-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cdt-form label { display: flex; flex-direction: column; gap: 3px; color: var(--t3); }
.cdt-form input, .cdt-form select, .cdt-form textarea { border: 1px solid var(--b1); border-radius: 7px; padding: 6px 8px; font-size: 12px; background: var(--s1); color: var(--ink); }
.cdt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .cdt-span2 { grid-column: 1 / -1; }
.cdt-inline { display: flex; gap: 6px; } .cdt-inline input { width: 90px; }
.cdt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cdt-btn { background: var(--s1); border: 1px solid var(--b1); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--t2); cursor: pointer; }
.cdt-btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); } .cdt-btn--danger { background: var(--late-bg); border-color: var(--late-b); color: var(--late); }
.cdt-history { margin: 0; padding-inline-start: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.cdt-empty { border: 1px dashed var(--b1); border-radius: 10px; padding: 30px; text-align: center; color: var(--t4); }
@media (max-width: 900px) { .cdt-layout { grid-template-columns: minmax(0, 1fr); } }

/* review priority (product order 2026-09-04) */
.cdt-pr { display: inline-block; font-size: var(--ho-text-xs); font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--muted-bg); color: var(--t3); }
.cdt-pr--conflict { background: var(--late-bg); color: var(--late); } .cdt-pr--unparseable { background: var(--amber-bg); color: var(--amber); }
.cdt-chip--pr-conflict.is-on { background: var(--late-solid); border-color: var(--late-solid); } .cdt-chip--pr-unparseable.is-on { background: var(--ho-warning-line); border-color: var(--ho-warning-line); color: var(--on-amber); }
.cdt-chip--pr-noterm { cursor: default; background: var(--s3); }
.cdt-noterm h3 { font-size: 14px; margin: 0 0 4px; color: var(--ink); }
.cdt-noterm-list { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12.5px; columns: 2; column-gap: 24px; } .cdt-noterm-list li { break-inside: avoid; margin: 2px 0; }
.cdt-btn--xs { padding: 1px 8px; font-size: var(--ho-text-xs); margin-inline-start: 6px; }
@media (max-width: 700px) { .cdt-noterm-list { columns: 1; } }

/* preliminary vs final comparison (reviewer view) */
.cdt-compare { margin-top: 12px; border: 1px solid var(--b1); border-radius: 10px; padding: 10px 12px; background: var(--s2); }
.cdt-compare h4 { margin: 0 0 6px; }
.cdt-dl--facts { margin-bottom: 8px; }
.cdt-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cdt-side { background: var(--s1); border: 1px solid var(--b1); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.cdt-side--final { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.cdt-side-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cdt-side .cdt-dl { grid-template-columns: 78px 1fr; }
.cdt-diff { background: var(--amber-bg); color: var(--amber); font-weight: 700; border-radius: 6px; padding: 0 6px; }
.cdt-batch { background: var(--yellow-bg); border-color: var(--yellow-b); font-size: 13px; }
@media (max-width: 800px) { .cdt-compare-grid { grid-template-columns: 1fr; } }

/* Version history (2026-09-04): historical proposals + governing-final selection */
.cdt .cdt-hist { display: inline-block; font-size: var(--ho-text-xs); padding: .05rem .4rem; border-radius: 999px; background: var(--muted-bg); color: var(--t2); border: 1px solid var(--b1); vertical-align: middle; }
.cdt .cdt-hist.is-governing { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-b); }
.cdt .cdt-hist-hint { font-size: .86rem; color: var(--t2); background: var(--s2); border-style: dashed; }
.cdt .cdt-finals { border-color: var(--orange-b); background: var(--orange-bg); }
.cdt .cdt-finals-list { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.cdt .cdt-finals-list li { padding: .55rem .7rem; border: 1px solid var(--b1); border-radius: .6rem; background: var(--s1); }
.cdt .cdt-finals-list li.is-governing { border-color: var(--ok-b); background: var(--ok-bg); }
.cdt .cdt-finals-list label { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; cursor: pointer; }
.cdt .cdt-governing { font-weight: 600; color: var(--ok); margin: .3rem 0; }