/* Construction Tracking («متابعة الإنشاءات») — scoped under .ctrk.
   Design refresh 2026-09-04 (dashboard + drawer screens); typography = the app's
   global IBM Plex Sans Arabic stack (no external font loads). */
.ctrk { --ink:#1a1d24; --t1:#374151; --t2:#4b5563; --t3:#5b616d; --t4:#656e7d; --b1:#e6e8ec; --b2:#eef0f3; --b3:#f0f1f3;
  --s1:#fff; --s2:#f9fafb; --s3:#f4f5f7; --page:#f7f7f8; --yellow:#f5c400; --yellow-h:#e9b900; --ytint:#fff9e0; --yborder:#f5e3a0;
  --late:#cf2e25; --late-t:#b3261e; --late-bg:#fdecea; --late-b:#f5c2bd;
  --ok:#167f3d; --ok-t:#15753a; --ok-bg:#e6f6ec; --ok-b:#bfe6cc; --amber:#a75c05; --amber-t:#92400e; --amber-bg:#fef3c7; --amber-b:#fcd34d;
  --info:#0f5e8c; --info-bg:#e3eef8; --info-b:#b9d3ea; --verify:#6252e4; --verify-bg:#eeebfd; --verify-b:#cfc8f7; --unit-green:#24874b; --unit-grey:#d9dce2;
  --orange:#c1480a; --orange-bg:#fff1e6; --purple:#7c3aed; --purple-bg:#f1eafe; --blue:#2563eb; --blue-bg:#e8f0fe;
  /* Ink that sits ON a solid fill: a token, never a literal white — in dark
     mode a solid accent keeps its hue and the ink on it goes DARK instead. */
  --on-solid:#fff; --on-ink:#fff; --on-yellow:#1a1d24; --reserved-ink:#3d2f00;
  --handed-over:#15753a; --on-handed:#fff;
  --avail-bg:#fff; --avail-ink:#6d7789; --avail-b:#d1d5db;
  --conflict-bg:#fde8e8; --conflict-ink:#9f1d1d; --conflict-b:#f2b8b8; --conflict-card-bg:#fff5f5;
  --override:#7a3e9d; --override-bg:#f1e8f7; --override-b:#d9c3ea;
  --banner-ink:#7f1d1d; --cur-label-ink:#886b00; --verify-ink:#3f3592;
  --tile-dark-ink:#d1d5db; --tile-dark-k:#9ca3af; --tile-cap:#9ca3af;
  --bar-track:#e9ebef; --kpi-ic-veil:rgba(255,255,255,.7);
  --late-on-dark:#ff8a80; --ok-on-dark:#7bd39a;
  --plan-tint:#e2f1ea; --plan-ink:#0f6b4f;
  --focus-ring:#2563eb; --hover-edge:#8f95a3; --hover-surface:#f4f5f7;
  --overlay:rgba(26,29,36,.35); --shadow-s:rgba(26,29,36,.04); --shadow-m:rgba(26,29,36,.05);
  --shadow-s2:rgba(26,29,36,.06); --shadow-m2:rgba(26,29,36,.10); --shadow-sheet:rgba(0,0,0,.14);
  color: var(--t1); font-size: 13px; display: flex; flex-direction: column; gap: 14px; }
.ctrk * { box-sizing: border-box; }
.ho-delivery-status { font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.ho-delivery-next { display: block; white-space: normal; overflow-wrap: anywhere; margin-block-start: 3px; }
.ho-delivery-status--completed, .ho-delivery-status--completed_with_remarks { color: var(--hu-done-bg); }
.ho-delivery-status--final_completed, .ho-delivery-status--final_remarks, .ho-delivery-next--completed { color: var(--ho-success-ink); }
.ho-delivery-next--final_available { color: var(--ho-handover-final-ready-ink); }
.ho-delivery-status--blocked, .ho-delivery-status--rejected { color: var(--ho-warning-ink); }
.ctrk .c-late { color: var(--late-t); } .ctrk .c-ok { color: var(--ok-t); } .ctrk .c-amber { color: var(--amber-t); }
.ctrk .c-muted { color: var(--t4); } .ctrk .c-verify { color: var(--verify); }
.ctrk .c-late-on-dark { color: var(--late-on-dark); } .ctrk .c-ok-on-dark { color: var(--ok-on-dark); }
.ctrk-nums { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctrk-date { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* header */
.ctrk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ctrk-title { font-size: 26px; font-weight: 800; color: var(--ink); margin: 0; line-height: 1.2; }
.ctrk-sub { font-size: 13px; color: var(--t3); margin: 4px 0 0; max-width: 760px; }

/* KPI tiles */
.ctrk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ctrk-kpi { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 14px; min-height: 64px; }
.ctrk-kpi-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--kpi-ic-veil); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ctrk-kpi b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ctrk-kpi span { font-size: 12px; color: var(--t2); }
.ctrk-kpi--grey { background: var(--s3); color: var(--ink); }
.ctrk-kpi--orange { background: var(--orange-bg); color: var(--orange); }
.ctrk-kpi--red { background: var(--late-bg); color: var(--late); }
.ctrk-kpi--green { background: var(--ok-bg); color: var(--ok); }
.ctrk-kpi--purple { background: var(--purple-bg); color: var(--purple); }
.ctrk-kpi--blue { background: var(--blue-bg); color: var(--blue); }

/* toolbar */
.ctrk-toolbar { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 10px 14px; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.ctrk-search { display: flex; align-items: center; gap: 8px; flex: 1 1 320px; min-width: 240px; max-width: 420px; color: var(--t4); background: var(--s3); border: 1px solid var(--b1); border-radius: 10px; padding: 0 12px; height: 40px; }
.ctrk-search input { flex: 1; height: 100%; background: transparent; border: 0; font-size: 13px; color: var(--t1); min-width: 0; outline: none; }
.ctrk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ctrk-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--s1); color: var(--t1); border: 1px solid var(--b1); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ctrk-chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ctrk-chip--late.is-on { background: var(--late); border-color: var(--late); }
.ctrk-chip--overdue-items.is-on { background: var(--amber); border-color: var(--amber); }
.ctrk-chip--on-track.is-on { background: var(--ok); border-color: var(--ok); }
.ctrk-chip--needs-verification.is-on { background: var(--verify); border-color: var(--verify); }
.ctrk-chip--sm { padding: 3px 8px; font-size: 11px; }
.ctrk-area-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 4px; flex: none; }
.ctrk-sort-select { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--b1); border-radius: 10px; padding: 0 10px; height: 40px; color: var(--t2); margin-inline-start: auto; }
.ctrk-sort-select select { border: 0; background: transparent; font-size: 12.5px; color: var(--t1); outline: none; }

/* banner / empty */
.ctrk-banner { background: var(--late-bg); border: 1px solid var(--late-b); border-radius: 10px; padding: 9px 14px; color: var(--banner-ink); font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctrk-banner-ic { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--late); color: var(--on-solid); font-style: normal; font-weight: 800; font-size: 12px; align-items: center; justify-content: center; margin-inline-end: 8px; }
.ctrk-banner-actions { display: flex; gap: 6px; }
.ctrk-btn-danger-o { background: var(--s1); color: var(--late-t); border: 1px solid var(--late-b); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.ctrk-empty { border: 1px dashed var(--b1); border-radius: 12px; padding: 40px; text-align: center; color: var(--t4); font-size: 14px; }

/* cards */
.ctrk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 12px; }
.ctrk-card { min-width: 0; overflow: hidden; background: var(--s1); border-radius: 14px; padding: 14px 16px; border: 1px solid var(--b2); border-top: 3px solid var(--t4); box-shadow: 0 1px 2px var(--shadow-s), 0 4px 14px var(--shadow-m); display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: box-shadow .15s; }
.ctrk-card:hover { box-shadow: 0 2px 4px var(--shadow-s2), 0 10px 28px var(--shadow-m2); }
.ctrk-c-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ctrk-c-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ctrk-code-row { display: flex; align-items: center; gap: 8px; }
.ctrk-num { font-size: 11px; font-weight: 700; color: var(--on-ink); background: var(--ink); border-radius: 6px; padding: 2px 7px; }
.ctrk-code { font-size: 22px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ctrk-code--lg { font-size: 26px; }
.ctrk-loc { font-size: 11.5px; color: var(--t3); display: flex; align-items: center; gap: 4px; }
.ctrk-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.ctrk-badge { font-size: 10px; font-weight: 600; border-radius: 999px; padding: 1px 7px; border: 1px solid transparent; white-space: nowrap; }
.ctrk-badge--amber { color: var(--amber-t); background: var(--amber-bg); border-color: var(--amber-b); }
.ctrk-badge--verify { color: var(--verify); background: var(--verify-bg); border-color: var(--verify-b); }
.ctrk-badge--grey { color: var(--t3); background: var(--s3); border-color: var(--b1); }
.ctrk-c-status { flex: none; width: 200px; border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; text-align: center; background: var(--s3); }
.ctrk-c-status--ok { background: var(--ok-bg); } .ctrk-c-status--late { background: var(--late-bg); } .ctrk-c-status--grey { background: var(--s3); }
.ctrk-k { font-size: 10.5px; color: var(--t3); }
.ctrk-k2 { font-size: 11px; color: var(--t2); font-weight: 600; }
.ctrk-v { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrk-s { font-size: 11px; font-weight: 600; white-space: normal; line-height: 1.3; }
.ctrk-c-status .ctrk-k + .ctrk-k { margin-top: 4px; }
.ctrk-cur { background: var(--ytint); border: 1px solid var(--yborder); border-radius: 10px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ctrk-cur.is-overdue { background: var(--amber-bg); border-color: var(--amber-b); }
.ctrk-cur-l { min-width: 0; display: flex; flex-direction: column; }
.ctrk-cur-label { font-size: 10.5px; color: var(--cur-label-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrk-cur-label em { font-style: normal; font-weight: 600; }
.ctrk-cur-name { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrk-cur-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; }
.ctrk-cur.is-overdue .ctrk-cur-dot { background: var(--amber); }
.ctrk-cur--lg { padding: 12px 14px; }
.ctrk-cur-r { display: flex; flex-direction: column; text-align: end; font-size: 12px; gap: 1px; flex: none; }
.ctrk-cur-r b { font-size: 13px; color: var(--ink); white-space: nowrap; }
.ctrk-c-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 1fr); gap: 16px; }
.ctrk-c-mid-l { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ctrk-rem { font-size: 12px; margin-bottom: 4px; } .ctrk-rem b { font-size: 17px; font-weight: 800; color: var(--ink); }
.ctrk-next { height: 18px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; }
.ctrk-next i { width: 6px; height: 6px; border-radius: 50%; background: var(--t4); flex: none; } .ctrk-next span { overflow: hidden; text-overflow: ellipsis; }
.ctrk-more { height: 16px; font-size: 11px; color: var(--t4); }
.ctrk-c-mid-r { text-align: center; display: flex; flex-direction: column; }
.ctrk-ho-count { font-size: 12px; } .ctrk-ho-count b { font-size: 17px; font-weight: 800; color: var(--ok-t); }
.ctrk-ho-sub { height: 14px; font-size: 10.5px; color: var(--t4); white-space: nowrap; overflow: hidden; margin-bottom: 4px; }
.ctrk-building { height: auto; background: var(--s2); border: 1px solid var(--b2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column-reverse; justify-content: center; gap: 8px; }
.ctrk-building--lg { height: auto; max-height: none; padding: 12px; gap: 6px; }
.ctrk-building-empty { font-size: 11px; }
.ctrk-floor { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.ctrk-building--lg .ctrk-floor { min-height: 32px; gap: 6px; max-height: none; }
/* a level name sits on one line; only a name wider than the column (the unmatched-floor label) wraps at its spaces and the row grows with it */
.ctrk-floor-l { width: 60px; flex: none; font-size: 11px; line-height: 1.2; color: var(--t4); text-align: start; white-space: normal; overflow-wrap: normal; }
.ctrk-floor.has-evidence .ctrk-floor-l { color: var(--ok-t); font-weight: 700; }
.ctrk-u { flex: 1; height: 26px; min-height: 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 1px solid transparent; min-width: 0; padding: 0; cursor: default; }
.ctrk-building--lg .ctrk-u { height: 32px; max-width: 48px; font-size: 12.5px; cursor: pointer; }
.ctrk-u.is-selected { outline: 2px solid var(--ink); outline-offset: 1px; }
.ctrk-u--handed_over { background: var(--handed-over); color: var(--on-handed); }
.ctrk-u--ho_active { background: var(--info-bg); color: var(--info); border-color: var(--info); box-shadow: inset 0 0 0 1px var(--info); }
.ctrk-u--ho_blocked { background: var(--amber-bg); color: var(--amber-t); border-color: var(--amber-b); }
.ctrk-u--candidate { background: var(--info-bg); color: var(--info); border-color: var(--info-b); }
.ctrk-u--needs_verification { background: var(--verify-bg); color: var(--verify); border-color: var(--verify-b); }
.ctrk-u--not_candidate { background: var(--unit-grey); color: var(--t3); }
.ctrk-u--reserved { background: var(--yellow); color: var(--reserved-ink); border-color: var(--yellow-h); }
.ctrk-u--ownership_conflict { background: var(--conflict-bg); color: var(--conflict-ink); border-color: var(--conflict-b); box-shadow: inset 0 0 0 1px var(--conflict-b); }
.ctrk-conflict { border-color: var(--conflict-b); background: var(--conflict-card-bg); }
.ctrk-u--available { background: var(--avail-bg); color: var(--avail-ink); border-color: var(--avail-b); }
/* Completed with remarks only; a refused delivery uses ho_blocked. */
.ctrk-u--remarks { position: relative; background: var(--handed-over); color: var(--on-handed); border-color: var(--amber-b); }
.ctrk-u--remarks::after { content: '!'; position: absolute; inset-inline-end: -3px; top: -5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-b); color: var(--on-yellow); font-size: var(--ho-text-xs); line-height: 1; font-style: normal; }

/* Shared handover presentation: this registered stylesheet is loaded on both hosts. */
:is(.ctrk, .p360) { --hu-ready-bg:var(--ho-info-soft); --hu-ready-ink:var(--ho-info-ink); --hu-ready-edge:var(--ho-info-line); --hu-done-bg:var(--ho-info-ink); --hu-done-ink:var(--ho-surface); --hu-warning-bg:var(--ho-unit-reserved-fill); --hu-warning-ink:var(--ho-unit-reserved-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--final_completed, .p360-u--final_completed, .ctrk-u--final_remarks, .p360-u--final_remarks) { background: var(--ho-success-ink); color: var(--ho-surface); }
:is(.ctrk-u--final_completed, .p360-u--final_completed, .ctrk-u--final_remarks, .p360-u--final_remarks)::before { content: '✓'; margin-inline-end: 3px; }
:is(.ctrk, .p360) :is(.ctrk-u--final_eligible, .p360-u--final_eligible) { background: var(--ho-handover-final-ready-fill); color: var(--ho-handover-final-ready-ink); border-color: var(--ho-handover-final-ready-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--final_rejected, .p360-u--final_rejected) { background: var(--hu-warning-bg); color: var(--hu-warning-ink); }
:is(.ctrk-u--final_remarks, .p360-u--final_remarks) { position: relative; }
/* Independent marks on a unit (owner design 2026-09-14) — never merged into the base colour.
   The chip is the positioning context; each mark sits in its own corner with a surface ring, so
   the number, the other marks and the selection outline stay readable together:
   · «!» (per-stage remarks) — top inline-start corner (the base classes above / below paint it);
   · the turquoise dot (final handover AVAILABLE now — availability only) — top inline-end corner;
   · the amber «×» (latest FINAL attempt refused, retry allowed) — bottom inline-end corner. */
:is(.ctrk, .p360) :is(.ctrk-u, .p360-u) { position: relative; }
:is(.ctrk, .p360) :is(.ctrk-u--remarks, .p360-u--remarks, .ctrk-u--final_remarks, .p360-u--final_remarks)::after { inset-inline-end: auto; inset-inline-start: -4px; top: -5px; width: 16px; height: 16px; line-height: 16px; box-shadow: 0 0 0 2px var(--ho-surface); z-index: 1; }
:is(.ctrk, .p360) :is(.ctrk-u, .p360-u) > .u-dot { position: absolute; top: -4px; inset-inline-end: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ho-handover-final-ready-ink); box-shadow: 0 0 0 2px var(--ho-surface); z-index: 1; pointer-events: none; }
:is(.ctrk, .p360) :is(.ctrk-u, .p360-u) > .u-x { position: absolute; bottom: -5px; inset-inline-end: -4px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--ho-warning-ink); color: var(--ho-surface); font-size: var(--ho-text-xs); font-weight: 700; line-height: 1; font-style: normal; box-shadow: 0 0 0 2px var(--ho-surface); z-index: 1; pointer-events: none; }
:is(.ctrk-legend, .p360-legend) :is(.ctrk-u, .p360-u) > .u-dot { width: 7px; height: 7px; top: -3px; inset-inline-end: -3px; box-shadow: 0 0 0 1px var(--ho-surface); }
/* Compact 26px chips (project cards): smaller marks that stay inside the 6px gap, never on a neighbour. */
.ctrk-card .ctrk-u > .u-dot { width: 8px; height: 8px; top: -3px; inset-inline-end: -3px; }
.ctrk-card .ctrk-u > .u-x, .ctrk-card .ctrk-u--remarks::after { width: 12px; height: 12px; line-height: 12px; }
.ctrk-card .ctrk-u--remarks::after { top: -4px; inset-inline-start: -3px; }
.ctrk-card .ctrk-u > .u-x { bottom: -4px; inset-inline-end: -3px; }
:is(.ctrk-legend, .p360-legend) :is(.ctrk-u, .p360-u) > .u-x, :is(.ctrk-legend, .p360-legend) :is(.ctrk-u--remarks, .p360-u--remarks, .ctrk-u--final_remarks, .p360-u--final_remarks)::after { width: 11px; height: 11px; line-height: 11px; font-size: var(--ho-text-xs); box-shadow: 0 0 0 1px var(--ho-surface); }
:is(.ctrk-legend, .p360-legend) :is(.ctrk-u, .p360-u) > .u-x { bottom: -3px; inset-inline-end: -3px; }
:is(.ctrk-legend, .p360-legend) :is(.ctrk-u--final_completed, .p360-u--final_completed, .ctrk-u--final_remarks, .p360-u--final_remarks)::before { content: ''; margin: 0; }
/* The status pill states the same marks in words; a refused final attempt keeps the stage colour of the pill. */
.ctrk-ustatus[data-final-rejected="1"], .ho-record__status[data-final-rejected="1"] { border-color: var(--ho-warning-line); }
:is(.ctrk-u--final_remarks, .p360-u--final_remarks)::after { content: '!'; position: absolute; top: -5px; inset-inline-end: -3px; background: var(--hu-warning-bg); color: var(--hu-warning-ink); border-radius: 50%; width: 16px; height: 16px; line-height: 16px; }
.ho-record__status--final_completed, .ho-record__status--final_remarks, .ctrk-ustatus[data-display="final_completed"], .ctrk-ustatus[data-display="final_remarks"] { background: var(--ho-success-ink); color: var(--ho-surface); }
.ho-record__status--final_eligible, .ctrk-ustatus[data-display="final_eligible"] { background: var(--ho-handover-final-ready-fill); color: var(--ho-handover-final-ready-ink); }
.ho-record__status--final_rejected, .ctrk-ustatus[data-display="final_rejected"] { background: var(--hu-warning-bg); color: var(--hu-warning-ink); }
.fh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 16px; }
.fh-form { display: flex; flex-direction: column; gap: 12px; margin-block: 16px; padding: 12px; border: 1px solid var(--ho-line); border-radius: 9px; background: var(--ho-surface); }
.fh-form label { display: grid; gap: 6px; min-width: 0; }
.fh-form :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; font: inherit; background: var(--ho-surface); color: var(--ho-ink); border: 1px solid var(--ho-line-strong); border-radius: 8px; }
.fh-record button { min-height: 44px; }
.ho-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--ho-line-strong); border-radius: 9px; background: var(--ho-surface); color: var(--ho-ink); font: inherit; font-weight: 600; cursor: pointer; }
.ho-action--primary { background: var(--ho-handover-action-fill); border-color: var(--ho-handover-action-fill); color: var(--ho-handover-action-ink); }
.ho-action:disabled { opacity: .55; cursor: wait; }
.ho-action:focus-visible { outline: 2px solid var(--ho-ink); outline-offset: 2px; }
.ho-actions { display: flex; flex-wrap: wrap; gap: 8px; }
form.ho-delivery-form { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--ho-surface); border: 1px solid var(--ho-line); border-radius: 9px; }
form.ho-delivery-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--ho-ink-muted); }
form.ho-delivery-form :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px; font: inherit; background: var(--ho-surface); color: var(--ho-ink); border: 1px solid var(--ho-line-strong); border-radius: 8px; }
form.ho-delivery-form :is(input[type="checkbox"], input[type="radio"]) { width: auto; min-height: auto; }
form.ho-delivery-form button { min-height: 44px; }
form.ho-delivery-form button[type="submit"] { background: var(--ho-handover-action-fill); border-color: var(--ho-handover-action-fill); color: var(--ho-handover-action-ink); }
.fh-wide { grid-column: 1 / -1; }
.fh-grid dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.fh-grid dt { color: var(--ho-ink-muted); }
.ctrk-final-summary { font-size: var(--ho-text-xs); color: var(--ho-ink-muted); margin-block: 12px 0; overflow-wrap: anywhere; }
@container (max-width: 480px) { .fh-form, .fh-grid { grid-template-columns: minmax(0, 1fr); } }
:is(.ctrk, .p360) :is(.ctrk-u--candidate, .p360-u--candidate) { background: var(--hu-ready-bg); color: var(--hu-ready-ink); border-color: var(--hu-ready-edge); }
:is(.ctrk, .p360) :is(.ctrk-u--ho_active, .p360-u--ho_active) { background: var(--hu-ready-bg); color: var(--hu-ready-ink); border-color: var(--hu-ready-ink); box-shadow: inset 0 0 0 1px var(--hu-ready-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--handed_over, .p360-u--handed_over, .ctrk-u--remarks, .p360-u--remarks) { background: var(--hu-done-bg); color: var(--hu-done-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--remarks, .p360-u--remarks)::after { background: var(--hu-warning-bg); color: var(--hu-warning-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--ho_blocked, .p360-u--ho_blocked, .ho-record__status--ho_blocked) { background: var(--ho-warning-soft); color: var(--ho-warning-ink); border-color: var(--ho-warning-line); }
:is(.ctrk, .p360) :is(.ctrk-u--reserved, .p360-u--reserved, .ho-record__status--reserved) { background: var(--ho-unit-reserved-fill); color: var(--ho-unit-reserved-ink); border-color: var(--ho-unit-reserved-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--needs_verification, .p360-u--needs_verification, .ho-record__status--needs_verification) { background: var(--ho-unit-verify-fill); color: var(--ho-unit-verify-ink); border-color: var(--ho-unit-verify-line); }
:is(.ctrk, .p360) :is(.ctrk-u--ownership_conflict, .p360-u--ownership_conflict, .ho-record__status--ownership_conflict) { background: var(--ho-danger-soft); color: var(--ho-danger-ink); border-color: var(--ho-danger-line); box-shadow: inset 0 0 0 1px var(--ho-danger-line); }
:is(.ctrk, .p360) :is(.ctrk-u--not_candidate, .p360-u--not_candidate, .ho-record__status--not_candidate) { background: var(--ho-unit-unready-fill); color: var(--ho-ink); }
:is(.ctrk, .p360) :is(.ctrk-u--available, .p360-u--available, .ho-record__status--available) { background: var(--ho-surface); color: var(--ho-ink-muted); border-color: var(--ho-line-strong); }
.p360 .elig--preliminary_candidate, .p360 .ho--eligible_for_review { color: var(--hu-ready-ink); }
.p360 :is(.ho--under_review, .ho--ready, .ho--scheduled) { color: var(--hu-ready-ink); }
.p360 :is(.ho--completed, .ho--completed_with_remarks) { color: var(--good); }
.p360 :is(.ho--blocked, .ho--rejected) { color: var(--amber-ink); }
.p360 .elig--needs_verification { color: var(--verify); }

:is(.ctrk, .p360) .ho-record { --hr-surface:var(--s1, var(--surface)); --hr-panel:var(--s2, var(--surface-2)); --hr-border:var(--b1, var(--border)); --hr-muted:var(--t4, var(--muted)); --hr-text:var(--t1, var(--t2)); display: block; min-width: 0; margin: 12px 0 0; padding: 16px; background: var(--hr-surface); color: var(--hr-text); border: 1px solid var(--hr-border); border-radius: 12px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; container-type: inline-size; }
:is(.ctrk, .p360) .ho-record :is(h4, h5, p, dl, dd) { margin: 0; }
.ho-record__header { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.ho-record__header h4 { font-size: 15px; font-weight: 700; }
.ho-record__status { border-radius: 8px; padding: 4px 10px; background: var(--hu-ready-bg); color: var(--hu-ready-ink); font-weight: 700; }
.ho-record__status--handed_over, .ho-record__status--remarks { background: var(--hu-done-bg); color: var(--hu-done-ink); }
.ho-record__status--remarks::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-inline-end: 6px; background: var(--hu-warning-bg); color: var(--hu-warning-ink); }
.ho-record__status--ho_blocked, .ho-record__warning { background: var(--hu-warning-bg); color: var(--hu-warning-ink); }
.ho-record__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.ho-record__fields > div { padding: 10px 12px; background: var(--hr-panel); border-radius: 8px; min-width: 0; }
.ho-record__fields dt { color: var(--hr-muted); font-size: 12px; }
.ho-record__fields dd { font-weight: 600; }
.ho-record__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--hr-muted); font-size: 12px; margin-block: 8px !important; }
.ho-record__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-block: 16px; }
.ho-record__notes > section { min-width: 0; padding: 12px; border: 1px solid var(--hr-border); border-radius: 8px; background: var(--hr-panel); }
.ho-record h5 { font-size: 13px; font-weight: 700; }
.ho-record__note { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin-top: 8px; unicode-bidi: plaintext; }
.ho-record__file { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px; margin-top: 10px; border: 1px solid var(--hr-border); border-radius: 8px; }
.ho-record__file > div { flex: 1 1 220px; min-width: 0; }
.ho-record__filename { font-weight: 700; overflow-wrap: anywhere; }
.ho-record__current { color: var(--hu-ready-ink); background: var(--hu-ready-bg); padding: 2px 7px; border-radius: 6px; margin-inline-start: 8px; font-size: var(--ho-text-xs); }
:is(.ctrk, .p360) .ho-record__download { display: inline-flex; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 8px; background: var(--hu-warning-bg); color: var(--hu-warning-ink); font-weight: 700; text-decoration: none; }
.ho-record__download:focus-visible, .ho-record summary:focus-visible { outline: 2px solid var(--hu-ready-ink); outline-offset: 3px; }
.ho-record__disclosure summary { cursor: pointer; font-weight: 600; padding-block: 8px; }
.ho-record__timeline { padding-inline-start: 20px; margin: 12px 0 0; }
.ho-record__timeline li { padding: 8px 4px; border-bottom: 1px solid var(--hr-border); }
@container (max-width: 540px) {
  .ho-record__fields, .ho-record__notes { grid-template-columns: minmax(0, 1fr); }
  .ho-record__download { width: 100%; }
}
.ctrk-floor.is-ready .ctrk-floor-l { color: var(--ok-t); font-weight: 700; }
.ctrk-c-foot { border-top: 1px solid var(--b3); padding-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--t3); }
.ctrk-pct { font-size: 13px; font-weight: 800; color: var(--ink); min-width: 46px; font-variant-numeric: tabular-nums; }
.ctrk-bar { flex: 1; height: 7px; background: var(--bar-track); border-radius: 999px; overflow: hidden; } .ctrk-bar i { display: block; height: 100%; border-radius: 999px; }
.ctrk-stages { white-space: nowrap; }

/* legend */
.ctrk-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: 12px; color: var(--t3); }
.ctrk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ctrk-legend .ctrk-u { flex: none; width: 14px; height: 14px; border-radius: 3px; }

/* pills */
.ctrk-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; white-space: nowrap; }
.ctrk-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ctrk-pill em { font-style: normal; font-weight: 400; opacity: .8; }
.ctrk-pill--ok { color: var(--ok-t); background: var(--ok-bg); border-color: var(--ok-b); }
.ctrk-pill--late { color: var(--late-t); background: var(--late-bg); border-color: var(--late-b); }
.ctrk-pill--amber { color: var(--amber-t); background: var(--amber-bg); border-color: var(--amber-b); }
.ctrk-pill--info { color: var(--info); background: var(--info-bg); border-color: var(--info-b); }
.ctrk-pill--grey { color: var(--t3); background: var(--s3); border-color: var(--b1); }
.ctrk-pill--override { color: var(--override); background: var(--override-bg); border-color: var(--override-b); }
/* a documented historical completion date (source = historical_backfill) */
.ctrk-pill--hist { color: var(--override); background: var(--override-bg); border-color: var(--override-b); }
.ctrk-cell-note { display: block; font-size: 10.5px; font-style: normal; margin-top: 3px; white-space: normal; }

/* drawer */
.ctrk-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 40; }
.ctrk-sheet { position: fixed; top: 0; bottom: 0; width: 800px; max-width: 96vw; background: var(--page); z-index: 41; display: flex; flex-direction: column; box-shadow: 0 0 32px var(--shadow-sheet); }
.ctrk[dir="rtl"] .ctrk-sheet { left: 0; } .ctrk[dir="ltr"] .ctrk-sheet { right: 0; }
.ctrk-sheet-head { background: var(--s1); padding: 18px 22px; border-bottom: 1px solid var(--b1); display: flex; flex-direction: column; gap: 12px; position: relative; }
.ctrk-close { position: absolute; top: 14px; inset-inline-end: 16px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--b1); background: var(--s1); font-size: 18px; cursor: pointer; }
.ctrk-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ctrk-tile { background: var(--s3); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; min-height: 84px; }
.ctrk-tile b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctrk-tile.is-late { background: var(--late-bg); }
.ctrk-tile--dark { background: var(--ink); color: var(--tile-dark-ink); } .ctrk-tile--dark b { color: var(--on-ink); } .ctrk-tile--dark .ctrk-k { color: var(--tile-dark-k); }
.ctrk-tile-cap { font-style: normal; font-size: 10.5px; color: var(--tile-cap); }
.ctrk-sheet-body { overflow: auto; padding: 14px 22px 40px; display: flex; flex-direction: column; gap: 14px; }
.ctrk-sec { background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 14px 16px; }
.ctrk-sec h3 { font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 0 0 3px; }
.ctrk-sec h4 { font-size: 12px; font-weight: 700; color: var(--t2); margin: 14px 0 6px; }
.ctrk-sec-sub { font-size: 12px; color: var(--t3); margin: 0 0 10px; }
.ctrk-sec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ctrk-permits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ctrk-permit { background: var(--s2); border: 1px solid var(--b2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.ctrk-permit-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink); }
.ctrk-permit-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--info-bg); color: var(--info); display: inline-flex; align-items: center; justify-content: center; }
.ctrk-permit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctrk-permit-grid div { display: flex; flex-direction: column; gap: 1px; }
.ctrk-permit-grid b { font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctrk-permit-reason { font-size: 11px; }
.ctrk-hint { font-size: 12px; margin: 8px 0; }
.ctrk-unit { margin-top: 10px; border: 1px solid var(--b1); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--s2); }
.ctrk-unit-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.ctrk-dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 12px; }
.ctrk-dl dt { color: var(--t4); } .ctrk-dl dd { margin: 0; }
.ctrk .elig--preliminary_candidate { color: var(--info); font-weight: 600; } .ctrk .elig--needs_verification { color: var(--verify); font-weight: 600; } .ctrk .elig--preliminary_not_candidate { color: var(--t3); }
.ho--completed { color: var(--ok-t); font-weight: 700; } .ho--blocked { color: var(--amber-t); font-weight: 600; } .ho--under_review, .ho--ready, .ho--scheduled { color: var(--info); font-weight: 600; } .ho--eligible_for_review { color: var(--ok-t); }
.ctrk .ho--rejected { color: var(--amber-t); font-weight: 700; } .ctrk .ho--completed_with_remarks { color: var(--ok-t); font-weight: 700; }
/* the one-line unit status (six states) + the availability checklist (2026-09-10) */
.ctrk-status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.ctrk-ustatus { display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.ctrk-ustatus--eligible { color: var(--info); background: var(--info-bg); border-color: var(--info-b); }
.ctrk-ustatus--handed_over { color: var(--ok-t); background: var(--ok-bg); border-color: var(--ok-b); }
.ctrk-ustatus--not_eligible { color: var(--t3); background: var(--s3); border-color: var(--b1); }
.ctrk-ustatus--needs_verification { color: var(--verify); background: var(--verify-bg); border-color: var(--verify-b); }
.ctrk-ustatus--in_progress { color: var(--info); background: var(--info-bg); border-color: var(--info-b); }
.ctrk-ustatus--remarks { color: var(--orange); background: var(--orange-bg); border-color: var(--amber-b); }
.ctrk-ustatus[data-display="handed_over"], .ctrk-ustatus[data-display="remarks"] { color: var(--hu-done-ink); background: var(--hu-done-bg); }
.ctrk-ustatus[data-display="ho_blocked"] { color: var(--hu-warning-ink); background: var(--hu-warning-bg); }
.ctrk-ustatus[data-display="remarks"]::before { content: '!'; margin-inline-end: 6px; color: var(--hu-warning-ink); background: var(--hu-warning-bg); width: 16px; height: 16px; border-radius: 50%; text-align: center; }
.ctrk-checklist { font-size: 12px; margin-top: 2px; }
.ctrk-checklist td { padding: 6px 8px; }
.ctrk-checklist .ctrk-pill { font-size: 10.5px; padding: 2px 8px; }
.ctrk-attach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ctrk-attach a { color: var(--info); text-decoration: underline; }
.ctrk-notes { white-space: pre-wrap; font-size: 12px; margin: 0; color: var(--t2); }
.ctrk-btn--xs { padding: 2px 8px; font-size: 11px; margin-inline-start: 6px; }
.ctrk-form input[type="file"] { padding: 4px; }
.ctrk-form .ctrk-help { font-size: 11px; color: var(--t4); }
.ctrk-ho-facts { margin: 0; padding-inline-start: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.ctrk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ctrk-btn { background: var(--s1); border: 1px solid var(--b1); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--t1); cursor: pointer; }
.ctrk-btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); }
.ctrk-btn--p360 { margin-inline-start: auto; padding: 3px 9px; font-size: 11px; text-decoration: none; }
.ctrk-btn--p360-drawer { position: absolute; top: 14px; inset-inline-end: 56px; text-decoration: none; }
.ctrk-form { background: var(--s1); border: 1px solid var(--b2); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.ctrk-form label { display: flex; flex-direction: column; gap: 3px; color: var(--t2); }
.ctrk-form input, .ctrk-form select, .ctrk-form textarea { border: 1px solid var(--b1); border-radius: 7px; padding: 6px 8px; font-size: 12px; background: var(--s1); color: var(--t1); }
.ctrk-check { flex-direction: row !important; align-items: center; }
.ctrk-form-actions { display: flex; gap: 6px; }
.ctrk-history { margin: 0; padding-inline-start: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.ctrk-scroll { overflow-x: auto; }
.ctrk-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ctrk-table th { text-align: start; font-size: 11px; color: var(--t3); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--b1); background: var(--s2); white-space: nowrap; }
.ctrk-table td { padding: 8px; border-bottom: 1px solid var(--b3); vertical-align: top; }
.ctrk-table tr.is-selected td { background: var(--ytint); }
.ctrk-contracts { min-width: 700px; font-size: 12px; }
.ctrk-contracts td { padding: 7px 6px; }
.ctrk-contracts .ctrk-pill { font-size: 10.5px; padding: 2px 8px; }
.ctrk-contracts tr.cst--overdue td:first-child { box-shadow: inset 3px 0 0 var(--late); }
.ctrk[dir="rtl"] .ctrk-contracts tr.cst--overdue td:first-child { box-shadow: inset -3px 0 0 var(--late); }
.ctrk-items { min-width: 520px; }
.ctrk-items tr.is-primary td { background: var(--ytint); font-weight: 600; }
.ctrk-verify { margin-top: 10px; background: var(--verify-bg); border: 1px solid var(--verify-b); border-radius: 9px; padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; color: var(--verify-ink); }

/* tablet ≤ 1180px */
@media (max-width: 1180px) {
  .ctrk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* mobile ≤ 820px */
@media (max-width: 820px) {
  .ctrk { font-size: 12.5px; gap: 12px; }
  .ctrk-title { font-size: 21px; } .ctrk-sub { display: none; }
  .ctrk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctrk-kpi { padding: 10px 12px; min-height: 56px; } .ctrk-kpi b { font-size: 19px; }
  .ctrk-search { max-width: none; flex-basis: 100%; }
  .ctrk-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
  .ctrk-sort-select { margin-inline-start: 0; }
  .ctrk-grid { grid-template-columns: minmax(0, 1fr); }
  .ctrk-c-status { width: 160px; }
  .ctrk-c-mid { grid-template-columns: minmax(0, 1fr) minmax(210px, 1fr); }
  .ctrk-sheet { width: 100vw; max-width: 100vw; }
  .ctrk-sheet-head { padding: 14px 16px; } .ctrk-sheet-body { padding: 12px 14px 40px; }
  .ctrk-tiles { grid-template-columns: 1fr 1fr; } .ctrk-tile--dark { grid-column: 1 / -1; }
  .ctrk-permits { grid-template-columns: minmax(0, 1fr); }
  .ctrk-cur--lg { flex-wrap: wrap; } .ctrk-cur-r { text-align: start; flex-basis: 100%; }
  .ctrk-banner-actions { width: 100%; } .ctrk-banner-actions button { flex: 1; }
}

/* Phase 3: «in this month's plan» — a canonical badge on the card, no redesign. */
.ctrk-btn--plan { background: var(--plan-tint); color: var(--plan-ink); border-color: transparent; }

/* ─── Dark theme ──────────────────────────────────────────────────────────
   A token remap and nothing else: every rule above is already token-driven,
   so the dark sheet is these 60 declarations. Two rules set the values —

   1. Surfaces darken while ink lightens.
   2. An accent used as TEXT lightens; ink that sits ON a solid accent fill
      DARKENS. That is why the on-fill inks (--on-solid, --on-ink, --on-handed)
      are tokens and never a literal white: in dark mode the fill is the light
      half of the pair, so the ink on it has to invert with it.

   --page matches Filament's own dark page ground (oklch(.141 .005 285.823) =
   rgb(9,9,11)) because .ctrk paints no background of its own — the title, the
   subtitle and the legend sit directly on the panel's ground. */
.dark .ctrk {
  --ink:#f4f4f5; --t1:#e4e4e7; --t2:#d4d4d8; --t3:#b4b4be; --t4:#a1a1ac; --b1:#3f3f46; --b2:#2e2e35; --b3:#2a2a31;
  --s1:#18181b; --s2:#1f1f23; --s3:#26262c; --page:#09090b; --yellow:#f5c400; --yellow-h:#d9ae00; --ytint:#3a2f0a; --yborder:#5e4d13;
  --late:#f2938b; --late-t:#f4a49d; --late-bg:#3b1f1d; --late-b:#6d3532;
  --ok:#5cc9a0; --ok-t:#6fd3ad; --ok-bg:#12352a; --ok-b:#2f6350; --amber:#e8b45e; --amber-t:#e8c76e; --amber-bg:#3b3016; --amber-b:#5e4b21;
  --info:#8cc0e4; --info-bg:#152a3a; --info-b:#2f5570; --verify:#b3a8f7; --verify-bg:#262046; --verify-b:#463c74; --unit-green:#5cc9a0; --unit-grey:#3f3f47;
  --orange:#f0913f; --orange-bg:#3a2a17; --purple:#c4a2f5; --purple-bg:#2d2139; --blue:#8fb2ee; --blue-bg:#1e2a42;
  --on-solid:#0d1117; --on-ink:#131318; --on-yellow:#1a1d24; --reserved-ink:#3d2f00;
  --handed-over:#5cc9a0; --on-handed:#052018;
  --avail-bg:#1f1f23; --avail-ink:#9a9aa5; --avail-b:#3f3f46;
  --conflict-bg:#3b1f1d; --conflict-ink:#f4a49d; --conflict-b:#6d3532; --conflict-card-bg:#2a1715;
  --override:#cba6e2; --override-bg:#2d2139; --override-b:#4c3b5e;
  --banner-ink:#f7b4ad; --cur-label-ink:#e2c86f; --verify-ink:#c3bafa;
  --tile-dark-ink:#3f3f46; --tile-dark-k:#52525b; --tile-cap:#a1a1ac;
  --bar-track:#2e2e35; --kpi-ic-veil:rgba(0,0,0,.28);
  --late-on-dark:#a32017; --ok-on-dark:#126334;
  --plan-tint:#173a2e; --plan-ink:#7fd9b4;
  --focus-ring:#8fb2ee; --hover-edge:#63636f; --hover-surface:#26262c;
  --overlay:rgba(0,0,0,.6); --shadow-s:rgba(0,0,0,.45); --shadow-m:rgba(0,0,0,.5);
  --shadow-s2:rgba(0,0,0,.5); --shadow-m2:rgba(0,0,0,.6); --shadow-sheet:rgba(0,0,0,.65);
}
/* A native control keeps the OS light palette unless its scheme is stated. */
.dark .ctrk input, .dark .ctrk select, .dark .ctrk textarea { color-scheme: dark; }

/* ─── Interaction states ──────────────────────────────────────────────────
   The sheet had none of these. `outline: none` on the search field and the
   sort control removed the only keyboard focus indicator the page had, and
   the card's sole hover cue was a black shadow — which is invisible against
   a near-black ground, so in dark mode hovering a card said nothing at all.
   Both cues are token-driven, so they read in either theme. */
.ctrk :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.ctrk-search:focus-within { border-color: var(--focus-ring); }
.ctrk-search input:focus-visible, .ctrk-sort-select select:focus-visible { outline-offset: 0; }
.ctrk-card:hover { border-color: var(--hover-edge); }
.ctrk-chip:hover:not(.is-on) { background: var(--hover-surface); border-color: var(--hover-edge); }
.ctrk-btn:hover:not(:disabled) { background: var(--hover-surface); border-color: var(--hover-edge); }
.ctrk-btn:disabled, .ctrk-chip:disabled { opacity: .55; cursor: not-allowed; }
.ctrk-building--lg .ctrk-u:hover { outline: 2px solid var(--hover-edge); outline-offset: 1px; }

/* Full names and all contract fields remain visible, without sideways scrolling. */
.ctrk-sheet { width: 1120px; max-width: 98vw; }
.ctrk-sheet-body { min-width: 0; }
.ctrk-building--lg { gap: 10px; width: 100%; max-width: 440px; margin-inline: auto; }
.ctrk-building--lg .ctrk-floor-l { width: 76px; font-size: 12px; }
.ctrk-building--lg .ctrk-u { max-width: 64px; }
.ctrk-contract-wrap { min-width: 0; container-type: inline-size; }
.ctrk-contracts { min-width: 0; table-layout: fixed; }
.ctrk-contracts th, .ctrk-contracts td { white-space: normal; overflow-wrap: anywhere; }
.ctrk-contracts th:nth-child(5) { width: 19%; }
.ctrk-contracts th:last-child { width: 16%; }
.ctrk-contracts td:first-child > span { display: block; margin-top: 3px; }
.ctrk-contracts .ctrk-pill { white-space: normal; max-width: 100%; height: auto; text-align: start; }
.ctrk-contracts td::before { display: none; }
@container (max-width: 850px) {
  .ctrk-contracts, .ctrk-contracts tbody { display: block; }
  .ctrk-contracts thead { display: none; }
  .ctrk-contracts tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px; margin-bottom: 12px; border: 1px solid var(--b2); border-radius: 10px; }
  .ctrk-contracts td { display: block; min-width: 0; padding: 0; border: 0; }
  .ctrk-contracts td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--t4); margin-bottom: 4px; }
  .ctrk-contracts td:nth-child(5), .ctrk-contracts td:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ctrk-c-mid { grid-template-columns: minmax(0, 1fr); }
  .ctrk-sheet { width: 100vw; max-width: 100vw; }
}

/* Final-handover exclusions (2026-09-15): the badge only says an item does not count toward the final rule;
   the item keeps its own status pill. Tokens only; wraps on narrow screens, never below two readable lines
   (a squeezed table column keeps room for it — inside the table's own scroller, never the page). */
:is(.ctrk, .p360) .ho-excl { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ho-info-line); background: var(--ho-info-soft); color: var(--ho-info-ink); font-size: var(--ho-text-xs); font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: break-word; min-width: 9.5rem; text-align: center; }
:is(.ctrk, .p360) .ho-excl--warn { border-color: var(--ho-warning-line); background: var(--ho-warning-soft); color: var(--ho-warning-ink); }
:is(.ctrk, .p360) .fh-excl-list { margin-block: 8px; min-width: 0; }
:is(.ctrk, .p360) .fh-excl-list ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
:is(.ctrk, .p360) .fh-excl-list li { overflow-wrap: anywhere; }