/* ProAirs — Contracts module styles. Everything scoped under .ctr so it never collides with the
   global app classes (.btn, .chip, .st, .track, .card …). Ports docs/contracts/contracts-module.html
   onto the --ds-* design tokens. Dark text on light, responsive down to ~400px. */

/* Tokens live on .ctr AND on the body-level overlay/toast: overlay() appends the modal to
   document.body (outside .ctr), so without this the modal's var(--c-*) are undefined and it
   renders transparent over the list. */
.ctr, .ctr-ovl, .ctr-toast {
  /* local palette, sourced from the design system with mockup fallbacks */
  --c-navy: var(--ds-accent, #1E2E56);
  --c-midnight: #121C38;
  --c-steel: var(--ds-line-strong, #5E7F9F);
  --c-steel-deep: #4C6C88;
  --c-leaf: #5A7C42;
  --c-spruce: var(--ds-good, #46663A);
  --c-sprout: var(--ds-good-bg, #E8F0E1);
  --c-brass: #C9A13F;
  --c-brass-ink: #121C38;
  --c-surface: var(--ds-surface, #FFFFFF);
  --c-mist: var(--ds-bg, #EDF2F6);
  --c-ink: var(--ds-ink, #141C33);
  --c-slate: var(--ds-ink-2, #4D586E);
  --c-line: var(--ds-line, #D5DBE3);
  --c-amber: var(--ds-warn, #8F5B0C);
  --c-amber-bg: var(--ds-warn-bg, #F6ECD6);
  --c-brick: var(--ds-bad, #B23A32);
  --c-brick-bg: var(--ds-bad-bg, #F6E1DF);
  --c-sky-tint: #E3ECF5;
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 16px 36px -24px rgba(30, 46, 86, .30), 0 1px 2px rgba(30, 46, 86, .06);
}
/* Base layout stays on .ctr only — the fixed overlay must not inherit max-width. */
.ctr {
  color: var(--c-ink);
  font-family: var(--ds-font-ui, "Archivo", system-ui, sans-serif);
  max-width: 1280px;
}
.ctr * { box-sizing: border-box; }
.ctr-ovl, .ctr-ovl * { box-sizing: border-box; }
.ctr-modal { font-family: var(--ds-font-ui, "Archivo", system-ui, sans-serif); }

/* ---- top header ---------------------------------------------------------- */
.ctr-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.ctr-top h1 { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); }
.ctr-top p { margin: 6px 0 0; color: var(--c-slate); font-size: 14px; max-width: 72ch; }

.ctr-loading, .ctr-empty, .ctr-eq-empty { color: var(--c-slate); padding: 24px 6px; text-align: center; }
.ctr-eq-empty { padding: 14px 6px; }

/* ---- buttons ------------------------------------------------------------- */
.ctr-btn {
  display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 10px 17px;
  font: inherit; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
  white-space: nowrap;
}
.ctr-btn:active { transform: scale(.98); }
.ctr-brass { background: var(--c-brass); color: var(--c-brass-ink); border-color: var(--c-brass); }
.ctr-brass:hover { box-shadow: 0 10px 22px -12px rgba(201, 161, 63, .9); }
.ctr-ghost { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-steel); }
.ctr-ghost:hover { background: var(--c-mist); }
.ctr-danger { background: var(--c-surface); color: var(--c-brick); border-color: var(--c-brick); }
.ctr-danger:hover { background: var(--c-brick-bg); }
.ctr-btn:disabled, .ctr-btn.off { opacity: .5; cursor: not-allowed; }
.ctr-btn.busy { opacity: .7; cursor: wait; }
.ctr-btn .k { width: 24px; height: 24px; border-radius: 999px; background: rgba(18, 28, 56, .14); display: grid; place-items: center; font-size: 13px; }

/* ---- banners / alerts ---------------------------------------------------- */
.ctr-banner { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  background: var(--c-amber-bg); color: var(--c-amber); border-radius: var(--r-md); padding: 11px 16px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.ctr-banner a { color: inherit; font-weight: 700; }
.ctr-alert { background: var(--c-brick-bg); color: var(--c-brick); border-left: 3px solid var(--c-brick);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; }
.ctr-alert a { color: inherit; font-weight: 700; }

/* ---- status strip (one line) --------------------------------------------- */
.ctr-strip { display: flex; gap: 26px; flex-wrap: wrap; padding: 14px 2px 16px; border-bottom: 1px solid var(--c-line); margin-bottom: 16px; }
.ctr-strip > div { display: flex; align-items: baseline; gap: 8px; color: var(--c-slate); font-size: 14px; }
.ctr-strip b { font-size: 21px; color: var(--c-navy); font-variant-numeric: tabular-nums; font-weight: 700; }
.ctr-strip .dot { width: 9px; height: 9px; border-radius: 999px; align-self: center; }
.ctr-strip .ctr-await { margin-left: auto; }
.ctr-strip .ctr-await b { color: var(--c-ink); }

/* ---- filters ------------------------------------------------------------- */
.ctr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ctr-chip { border-radius: 999px; padding: 8px 15px; font: inherit; font-size: 14px; font-weight: 500; color: var(--c-steel-deep);
  background: var(--c-surface); border: 1px solid var(--c-line); cursor: pointer; transition: all .2s var(--ease); }
.ctr-chip:hover { border-color: var(--c-steel); }
.ctr-chip.on { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.ctr-search { margin-left: auto; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 14px; color: var(--c-ink); min-width: 240px; }
.ctr-search:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }

/* ---- list table ---------------------------------------------------------- */
.ctr-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.ctr-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ctr-table th { text-align: left; font-weight: 600; color: var(--c-slate); padding: 14px 18px 11px; border-bottom: 1px solid var(--c-line); font-size: 13px; }
.ctr-table td { padding: 13px 18px; border-bottom: 1px solid var(--c-line); vertical-align: middle; color: var(--c-ink); }
.ctr-table tbody tr:last-child td { border-bottom: 0; }
.ctr-table tbody tr { cursor: pointer; transition: background .2s var(--ease); }
.ctr-table tbody tr:hover { background: var(--c-mist); }
.ctr-table th.amt, .ctr-table td.amt { text-align: right; white-space: nowrap; }
.ctr-table .id { font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.ctr-table .sub { display: block; color: var(--c-slate); font-size: 12.5px; margin-top: 2px; }

/* status word + colored dot */
.ctr .st { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; border-radius: 999px; padding: 3px 10px 3px 8px; }
.ctr .st::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ctr .st.draft { color: var(--c-slate); background: var(--c-mist); }
.ctr .st.sent { color: var(--c-steel-deep); background: var(--c-sky-tint); }
.ctr .st.viewed { color: var(--c-amber); background: var(--c-amber-bg); }
.ctr .st.signed { color: var(--c-spruce); background: var(--c-sprout); }
.ctr .st.active { color: #fff; background: var(--c-spruce); }
.ctr .st.active::before { background: var(--c-sprout); }
.ctr .st.closed { color: var(--c-ink); background: var(--c-mist); }
.ctr .st.expired, .ctr .st.cancelled { color: var(--c-brick); background: var(--c-brick-bg); }
.ctr-need { color: var(--c-amber); font-size: 12px; font-weight: 700; margin-left: 6px; }
.ctr-chkcount { color: var(--c-slate); font-size: 12px; margin-left: 6px; font-weight: 600; }

/* 6-step mini track */
.ctr-track { display: flex; gap: 3px; margin-top: 6px; }
.ctr-track i { height: 4px; width: 17px; border-radius: 2px; background: var(--c-line); }
.ctr-track i.f { background: var(--c-steel); }
.ctr-track i.g { background: var(--c-leaf); }

/* ---- flow strip ---------------------------------------------------------- */
.ctr-flow { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 20px; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--shadow); }
.ctr-flow > div { padding-right: 14px; border-right: 1px dashed var(--c-line); margin-right: 14px; }
.ctr-flow > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.ctr-flow b { display: block; color: var(--c-navy); font-size: 15px; }
.ctr-flow span { font-size: 12.5px; color: var(--c-slate); }

/* ========================================================================== */
/*  EDITOR                                                                     */
/* ========================================================================== */
.ctr-editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ctr-left { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ctr-right { min-width: 0; }
.ctr-panel { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.ctr-panel h3 { margin: 22px 0 4px; font-size: 18px; color: var(--c-navy); display: flex; align-items: baseline; gap: 10px; }
.ctr-panel h3:first-of-type, .ctr-panel > h3:first-child { margin-top: 0; }
.ctr-hint { margin: 0 0 14px; color: var(--c-slate); font-size: 13.5px; }
.ctr .amber { color: var(--c-amber); font-weight: 600; }

/* template pills */
.ctr-tpl { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.ctr-tpl span { flex: 1; min-width: 130px; text-align: center; border-radius: 999px; padding: 9px 10px; font-size: 13.5px;
  font-weight: 600; color: var(--c-steel-deep); border: 1.5px solid var(--c-line); cursor: pointer; }
.ctr-tpl span.on { background: var(--c-navy); color: #fff; border-color: var(--c-navy); cursor: default; }

/* source tag */
.ctr-src { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-spruce);
  background: var(--c-sprout); border-radius: 999px; padding: 5px 13px; font-weight: 600; margin-bottom: 16px; }
.ctr-src::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--c-leaf); }

.ctr-coming { background: var(--c-mist); border-radius: var(--r-md); padding: 22px; }
.ctr-coming h3 { margin: 0 0 6px; }
.ctr-coming p { margin: 0; color: var(--c-slate); font-size: 14px; }

/* fields */
.ctr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ctr-f { display: flex; flex-direction: column; gap: 6px; }
.ctr-f label { font-size: 13px; font-weight: 600; color: var(--c-slate); }
.ctr-f .in { border: 1.5px solid var(--c-steel); border-radius: var(--r-sm); padding: 9px 12px; font: inherit; font-size: 15px;
  color: var(--c-ink); background: var(--c-surface); width: 100%; }
.ctr-f .in:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-f div.in.ro { border-color: var(--c-line); background: var(--c-mist); color: var(--c-ink); min-height: 40px; display: flex; align-items: center; }
.ctr-f .in.warn { border-color: var(--c-amber); background: var(--c-amber-bg); }
.ctr-f small { color: var(--c-slate); font-size: 12px; }
textarea.ctr-scope, textarea.in { resize: vertical; font-family: inherit; }

/* equipment table */
.ctr-eq { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 2px; }
.ctr-eq th { text-align: left; color: var(--c-slate); font-weight: 600; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--c-line); }
.ctr-eq th.n { text-align: right; }
.ctr-eq td { padding: 6px 6px; border-bottom: 1px solid var(--c-line); }
.ctr-eq td.n { text-align: right; width: 44px; }
.ctr-eq input { width: 100%; border: 1px solid var(--c-line); border-radius: 6px; padding: 7px 8px; font: inherit; font-size: 13.5px; color: var(--c-ink); background: var(--c-surface); }
.ctr-eq input:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-eq input.q { width: 56px; text-align: right; }
.eq-rm { border: 0; background: transparent; color: var(--c-slate); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.eq-rm:hover { background: var(--c-brick-bg); color: var(--c-brick); }
.ctr-addrow { margin-top: 10px; border: 1.5px dashed var(--c-steel); background: transparent; color: var(--c-steel-deep);
  border-radius: var(--r-sm); padding: 8px 14px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.ctr-addrow:hover { background: var(--c-mist); }

/* New Home draw schedule */
.ctr-draw { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ctr-drawrow { display: grid; grid-template-columns: 1fr 96px 110px 32px; gap: 10px; align-items: center; }
.ctr-drawrow > input { border: 1.5px solid var(--c-steel); border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 14px; color: var(--c-ink); background: var(--c-surface); min-width: 0; }
.ctr-drawrow > input:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-drawrow .drawamt { text-align: right; font-variant-numeric: tabular-nums; color: var(--c-navy); font-weight: 600; }
.ctr-drawsum { margin-top: 4px; font-size: 13.5px; font-weight: 600; }
.ctr-drawsum.ok { color: var(--c-spruce); }
.ctr-drawsum.bad { color: var(--c-brick); }

/* payment schedule */
.ctr-pay { display: grid; grid-template-columns: 1fr 110px 130px; gap: 10px; align-items: center; font-size: 14.5px; }
.ctr-pay .h { font-size: 12.5px; color: var(--c-slate); font-weight: 600; }
.ctr-pay .r { text-align: right; }
.ctr-pay .tot { font-weight: 700; color: var(--c-navy); text-align: right; font-variant-numeric: tabular-nums; }
.ctr-pay .totlbl { font-weight: 700; color: var(--c-navy); }
.ctr-pay .pct-flat { display: inline-block; color: var(--c-slate); font-weight: 600; }
.ctr-pay .pct-wrap, .ctr-pay .amt-wrap { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--c-steel);
  border-radius: var(--r-sm); padding: 4px 10px; background: var(--c-surface); }
.ctr-pay .pct-wrap:focus-within, .ctr-pay .amt-wrap:focus-within { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-pay .pin { border: 0; width: 72px; text-align: right; font: inherit; font-size: 14.5px; color: var(--c-ink); background: transparent; }
.ctr-pay .pin:focus { outline: none; }
.ctr-pay i { font-style: normal; color: var(--c-slate); }

/* scope */
.ctr-scope { width: 100%; border: 1.5px solid var(--c-steel); border-radius: var(--r-sm); padding: 11px 13px; font: inherit;
  font-size: 14px; line-height: 1.55; color: var(--c-ink); background: var(--c-surface); }
.ctr-scope:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-rewrite { color: var(--c-steel-deep); font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; }
.ctr-rewrite:hover { text-decoration: underline; }
.ctr-rewrite.busy { opacity: .6; pointer-events: none; }

/* Virginia checklist card (navy) */
.ctr-check { background: var(--c-navy); color: #c9d6e5; border-radius: var(--r-lg); padding: 22px 24px; box-shadow: var(--shadow); }
.ctr-check h3 { margin: 0; color: #fff; font-size: 18px; display: flex; justify-content: space-between; align-items: baseline; }
.ctr-check h3 span { font-size: 14px; font-weight: 500; color: #a9c1d8; }
.ctr-check .bar { height: 6px; border-radius: 3px; background: rgba(169, 193, 216, .25); margin: 12px 0 14px; overflow: hidden; }
.ctr-check .bar i { display: block; height: 100%; background: var(--c-leaf); border-radius: 3px; transition: width .6s var(--ease); }
.ctr-check ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; font-size: 13.5px; }
.ctr-check li { break-inside: avoid; display: flex; gap: 9px; padding: 5px 0; align-items: flex-start; }
.ctr-check li::before { content: ""; flex: 0 0 15px; height: 15px; border-radius: 999px; background: var(--c-leaf);
  margin-top: 2px; box-shadow: inset 0 0 0 4px var(--c-navy), 0 0 0 1.5px var(--c-leaf); }
.ctr-check li.todo::before { background: transparent; box-shadow: 0 0 0 1.5px #a9c1d8; }
.ctr-check li.todo { color: #fff; }
.ctr-check li em { font-style: normal; color: var(--c-brass); font-weight: 700; margin-left: auto; white-space: nowrap; font-size: 12px; }

/* paper preview */
.ctr-paper-wrap { position: sticky; top: 16px; }
.ctr-paper { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 32px 34px;
  font-size: 12.5px; line-height: 1.5; color: var(--c-ink); box-shadow: 0 24px 44px -30px rgba(30, 46, 86, .35); min-height: 640px; position: relative; }
.ctr-paper .ph { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--c-line); padding-bottom: 14px; margin-bottom: 16px; }
.ctr-paper .brandmark { font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--c-navy); }
.ctr-paper .brandmark i { font-style: normal; color: var(--c-steel); }
.ctr-paper .ph > div:last-child { text-align: right; color: var(--c-slate); font-size: 11px; }
.ctr-paper .ph b { display: block; color: var(--c-navy); font-size: 12px; }
.ctr-paper h4 { margin: 0 0 6px; font-size: 18px; color: var(--c-navy); font-weight: 700; letter-spacing: -.01em; }
.ctr-paper h5 { margin: 14px 0 5px; font-size: 12px; color: var(--c-navy); }
.ctr-paper p { margin: 0 0 8px; }
.ctr-paper p.scope { color: var(--c-slate); }
.ctr-paper table { width: 100%; border-collapse: collapse; font-size: 11.5px; margin: 4px 0; }
.ctr-paper td, .ctr-paper th { padding: 5px 8px; border-bottom: 1px solid var(--c-line); text-align: left; }
.ctr-paper th { color: var(--c-slate); }
.ctr-paper .fill { background: var(--c-sprout); border-radius: 3px; padding: 0 3px; color: var(--c-spruce); }
.ctr-paper .miss { background: var(--c-amber-bg); border-radius: 3px; padding: 0 3px; color: var(--c-amber); font-weight: 600; }
.ctr-paper .pf { position: absolute; left: 34px; right: 34px; bottom: 18px; border-top: 1px solid var(--c-line); padding-top: 8px;
  display: flex; justify-content: space-between; color: var(--c-slate); font-size: 10.5px; }
.ctr-paper .pf b { color: var(--c-navy); }

/* dock */
.ctr-dock { display: flex; gap: 10px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 18px;
  padding: 14px 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ctr-dock-note { flex: 1 1 100%; color: var(--c-slate); font-size: 14px; }
.ctr-dock-note b { color: var(--c-amber); }
/* All dock actions in one group so they wrap together and stay aligned at any width. */
.ctr-dock-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-left: auto; min-width: 0; }
@media (max-width: 560px) { .ctr-dock-btns { width: 100%; margin-left: 0; } .ctr-dock-btns .ctr-btn { flex: 1 1 auto; justify-content: center; } }

/* ========================================================================== */
/*  READ-ONLY DETAIL                                                           */
/* ========================================================================== */
.ctr-statusline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ctr-statusline .ctr-track i { width: 28px; height: 5px; }
.ctr-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ctr-detail .ctr-left, .ctr-detail .ctr-right { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ctr-dl { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.ctr-dl dt { font-weight: 600; color: var(--c-slate); }
.ctr-dl dd { margin: 0; color: var(--c-ink); }
.ctr-pdfs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ctr-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ctr-sig { border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 14px 16px; }
.ctr-sig h4 { margin: 0 0 10px; color: var(--c-navy); font-size: 14px; }
.ctr-sig .muted { color: var(--c-slate); margin: 0; }
.ctr-sig-img { background: var(--c-mist); border-radius: var(--r-sm); padding: 14px; text-align: center; color: var(--c-slate); font-size: 13px; margin-bottom: 10px; }
.ctr-sig dl { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.ctr-sig dt { color: var(--c-slate); font-weight: 600; }
.ctr-sig dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.ctr-sig dd.ua { font-size: 11px; color: var(--c-slate); }
.ctr-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ctr-actions .muted { color: var(--c-slate); margin: 0; }
.ctr-confirm { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--c-ink); }
.ctr-confirm > div { display: flex; gap: 10px; flex-wrap: wrap; }
.ctr-evt { display: flex; flex-direction: column; }
.ctr-evt-row { display: grid; grid-template-columns: 170px 1fr; gap: 6px 14px; padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: 13px; }
.ctr-evt-row:last-child { border-bottom: 0; }
.ctr-evt-row .when { color: var(--c-slate); font-variant-numeric: tabular-nums; }
.ctr-evt-row .what { color: var(--c-ink); }
.ctr-evt-row .what.muted { color: var(--c-slate); }
.ctr-evt-row .ip { color: var(--c-slate); font-size: 11.5px; }

/* ========================================================================== */
/*  SETTINGS                                                                   */
/* ========================================================================== */
.ctr-settings { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.ctr-settings .ctr-f { margin-bottom: 14px; }
.ctr-sigstat { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-size: 14px; }
.ctr-sigstat .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--c-line); flex: none; }
.ctr-sigstat .dot.on { background: var(--c-spruce); }
.ctr-file { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--c-slate); }
.ctr-file input { font: inherit; }
.ctr-sigprev { margin-top: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px; display: inline-block; }
.ctr-sigprev img { display: block; max-width: 240px; max-height: 110px; width: auto; height: auto; }
.ctr-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.ctr-save-bar .ctr-dock-note { flex: 1 1 auto; }

/* ========================================================================== */
/*  OVERLAY / MODAL (job picker, sign-url, missing items)                      */
/* ========================================================================== */
.ctr-ovl { position: fixed; inset: 0; background: rgba(18, 28, 56, .45); display: grid; place-items: center; padding: 20px; z-index: 1000; }
.ctr-modal { background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-lg); padding: 22px 24px; width: 100%; max-width: 540px;
  max-height: 86vh; overflow: auto; box-shadow: 0 30px 60px -24px rgba(18, 28, 56, .5); font-family: var(--ds-font-ui, "Archivo", sans-serif); }
.ctr-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ctr-modal-head h2 { margin: 0; font-size: 20px; color: var(--c-navy); }
.ctr-x { border: 0; background: transparent; font-size: 24px; line-height: 1; color: var(--c-slate); cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.ctr-x:hover { background: var(--c-mist); color: var(--c-ink); }
.ctr-modal-sub { margin: 6px 0 14px; color: var(--c-slate); font-size: 14px; }
.ctr-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.ctr-typepick { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ctr-typepick label { flex: 1; min-width: 110px; text-align: center; border: 1.5px solid var(--c-line); border-radius: 999px;
  padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--c-steel-deep); cursor: pointer; }
.ctr-typepick label.on { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.ctr-typepick input { position: absolute; opacity: 0; width: 0; height: 0; }
.ctr-modal-search { width: 100%; border: 1.5px solid var(--c-steel); border-radius: var(--r-sm); padding: 10px 13px; font: inherit;
  font-size: 15px; color: var(--c-ink); background: var(--c-surface); margin-bottom: 12px; }
.ctr-modal-search:focus { outline: 2px solid var(--c-navy); outline-offset: -1px; border-color: var(--c-navy); }
.ctr-joblist { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.ctr-jobrow { display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--c-line); background: var(--c-surface);
  border-radius: var(--r-sm); padding: 10px 12px; font: inherit; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.ctr-jobrow:hover { background: var(--c-mist); border-color: var(--c-steel); }
.ctr-jobrow.busy { opacity: .6; cursor: wait; }
.ctr-jobrow .jc { font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.ctr-jobrow .jn { flex: 1; color: var(--c-ink); font-size: 14px; }
.ctr-jobrow .js { display: block; color: var(--c-slate); font-size: 12px; }
.ctr-jobrow .jt { color: var(--c-slate); font-size: 11.5px; white-space: nowrap; text-transform: capitalize; }
.ctr-joblist-more { display: flex; justify-content: center; margin-top: 12px; }
.ctr-joberr { color: var(--c-brick); }
.ctr-missing { margin: 0 0 4px; padding-left: 20px; color: var(--c-ink); font-size: 14px; }
.ctr-missing li { padding: 3px 0; }
.ctr-signurl { display: flex; gap: 8px; }
.ctr-signurl input { flex: 1; border: 1.5px solid var(--c-steel); border-radius: var(--r-sm); padding: 9px 12px; font: inherit;
  font-size: 13.5px; color: var(--c-ink); background: var(--c-mist); }

/* ---- toast --------------------------------------------------------------- */
.ctr-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--c-navy); color: #fff;
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 36px -18px rgba(18, 28, 56, .7);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 1100; max-width: 90vw; }
.ctr-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ctr-toast.bad { background: var(--c-brick); }

/* ========================================================================== */
/*  RESPONSIVE                                                                 */
/* ========================================================================== */
@media (max-width: 960px) {
  .ctr-editor, .ctr-detail { grid-template-columns: 1fr; }
  .ctr-paper-wrap { position: static; }
  .ctr-flow { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ctr-flow > div { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px dashed var(--c-line); padding-bottom: 10px; }
}
@media (max-width: 620px) {
  .ctr-top h1 { font-size: 24px; }
  .ctr-strip { gap: 16px 22px; }
  .ctr-strip .ctr-await { margin-left: 0; }
  .ctr-search { margin-left: 0; width: 100%; min-width: 0; }
  .ctr-grid2 { grid-template-columns: 1fr; }
  .ctr-sigs { grid-template-columns: 1fr; }
  .ctr-check ul { columns: 1; }
  .ctr-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .ctr-dl dt { margin-top: 8px; }
  .ctr-evt-row { grid-template-columns: 1fr; gap: 2px; }
  .ctr-flow { grid-template-columns: 1fr; }
  /* list table → stacked cards */
  .ctr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ctr-table, .ctr-table tbody, .ctr-table tr, .ctr-table td { display: block; }
  .ctr-table tr { border-bottom: 1px solid var(--c-line); padding: 8px 4px; }
  .ctr-table td { border: 0; padding: 3px 4px; }
  .ctr-table td.amt { text-align: left; }
  .ctr-pay { grid-template-columns: 1fr auto auto; gap: 8px; }
}

/* Preview slide-over (right): the contract PDF as the customer sees it, ephemeral single-view iframe. */
.ctr-preview-scrim { position: fixed; inset: 0; background: rgba(18, 28, 56, .45); opacity: 0; pointer-events: none; transition: opacity .35s cubic-bezier(.22, 1, .36, 1); z-index: 1000; }
.ctr-preview-scrim.on { opacity: 1; pointer-events: auto; }
.ctr-preview { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100%); background: var(--c-mist); box-shadow: -24px 0 60px -34px rgba(18, 28, 56, .6); transform: translateX(100%); transition: transform .35s cubic-bezier(.22, 1, .36, 1); z-index: 1001; display: flex; flex-direction: column; }
.ctr-preview.on { transform: none; }
.ctr-preview-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.ctr-preview-head h2 { margin: 0; font-size: 18px; color: var(--c-navy); }
.ctr-preview-miss { padding: 9px 20px; background: var(--c-amber-bg); color: var(--c-amber); font-size: 13.5px; font-weight: 600; }
.ctr-preview iframe { flex: 1; width: 100%; border: 0; background: var(--c-mist); }
@media (prefers-reduced-motion: reduce) { .ctr-preview, .ctr-preview-scrim { transition-duration: .01ms; } }