/* © 2026 Kingsleigh Homes Limited. All rights reserved.
   takeoff-review.css — the Takeoff Review & Correct surface (TK1), REACTOR voice.
   tokens.css CSS variables ONLY — no raw hex, no raw sizes. Gold carries ink; rust is
   loss/reject only; amber = unverified ("grey never green"); sage = human-verified.
   Loads after tokens.css + kh-ui.css. Scoped under .kh-tr-wrap so nothing leaks. */

.kh-tr-wrap{
  display:flex; gap:var(--kh-s-4); min-height:0; height:100%;
  color:var(--kh-ink); font-family:var(--kh-font-ui);
  background:var(--kh-void-1); border-radius:var(--kh-r-2); padding:var(--kh-s-3);
}
.kh-tr-canvas-wrap{
  flex:1 1 auto; min-width:0; min-height:0;
  background:var(--kh-void-0); border:1px solid var(--kh-line);
  border-radius:var(--kh-r-2); overflow:hidden; display:flex;
}
.kh-tr-canvas{ display:block; width:100%; height:100%; touch-action:none; }

/* ── the review panel: one line per detected room/count ─────────────────────── */
.kh-tr-panel{
  flex:0 0 300px; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--kh-s-2);
  padding-right:var(--kh-s-1);
}

.kh-tr-signoff{
  font-family:var(--kh-font-mono); font-size:var(--kh-fs-11); font-weight:var(--kh-mono-w);
  letter-spacing:var(--kh-mono-track); text-transform:uppercase;
  padding:var(--kh-s-2) var(--kh-s-3); border-radius:var(--kh-r-1);
  border:1px solid var(--kh-line);
}
.kh-tr-signoff.is-pending{ color:var(--kh-warn); border-color:var(--kh-warn); }
.kh-tr-signoff.is-ready{ color:var(--kh-gold-ink); background:var(--kh-grad); border-color:transparent; }

.kh-tr-line{
  display:grid; grid-template-columns:1fr auto; grid-auto-rows:auto; gap:var(--kh-s-1) var(--kh-s-2);
  align-items:center;
  padding:var(--kh-s-2) var(--kh-s-3); border-radius:var(--kh-r-1);
  background:var(--kh-void-2); border:1px solid transparent; cursor:pointer;
  transition:border-color var(--kh-t-2) var(--kh-swift), background var(--kh-t-2) var(--kh-swift);
}
.kh-tr-line:hover{ background:var(--kh-void-3); }
.kh-tr-line.is-sel{ border-color:var(--kh-gold); }
.kh-tr-line.is-ai .kh-tr-stat{ color:var(--kh-warn); }        /* unverified — amber, never green */
.kh-tr-line.is-accepted .kh-tr-stat,
.kh-tr-line.is-adjusted .kh-tr-stat,
.kh-tr-line.is-redrawn .kh-tr-stat,
.kh-tr-line.is-added .kh-tr-stat{ color:var(--kh-ok); }        /* human-verified — sage */
.kh-tr-line.is-rejected{ opacity:.6; }
.kh-tr-line.is-rejected .kh-tr-stat{ color:var(--kh-crit); }   /* rejected — rust (loss) */

.kh-tr-name{ font-size:var(--kh-fs-14); font-weight:var(--kh-w-emph); color:var(--kh-ink); }
.kh-tr-val{
  font-family:var(--kh-font-mono); font-size:var(--kh-fs-12-5); font-weight:var(--kh-mono-w);
  color:var(--kh-ink); font-variant-numeric:var(--kh-num); text-align:right; white-space:nowrap;
}
.kh-tr-stat{
  grid-column:1 / -1;
  font-family:var(--kh-font-mono); font-size:var(--kh-fs-10); font-weight:var(--kh-mono-w);
  letter-spacing:var(--kh-mono-track); text-transform:uppercase; color:var(--kh-ink-dim);
}
.kh-tr-acts{ grid-column:1 / -1; display:flex; gap:var(--kh-s-1); flex-wrap:wrap; }

.kh-tr-btn{
  font-family:var(--kh-font-ui); font-size:var(--kh-fs-11); font-weight:var(--kh-w-label);
  min-height:var(--kh-s-6); padding:0 var(--kh-s-2); border-radius:var(--kh-r-1);
  background:var(--kh-void-3); color:var(--kh-ink); border:1px solid var(--kh-line);
  cursor:pointer; transition:transform var(--kh-t-1) var(--kh-swift);
}
.kh-tr-btn:active{ transform:scale(.96); }
.kh-tr-btn.kh-tr-ok{ color:var(--kh-ok); border-color:var(--kh-ok); }
.kh-tr-btn.kh-tr-no{ color:var(--kh-crit); border-color:var(--kh-crit); }

.kh-tr-commit{
  margin-top:var(--kh-s-2); min-height:var(--kh-s-12);
  font-family:var(--kh-font-ui); font-size:var(--kh-fs-14); font-weight:var(--kh-w-label);
  border:none; border-radius:var(--kh-r-2); cursor:pointer;
  color:var(--kh-gold-ink); background:var(--kh-grad); box-shadow:var(--kh-e2);
  transition:transform var(--kh-t-1) var(--kh-swift), opacity var(--kh-t-2) var(--kh-swift);
}
.kh-tr-commit:active{ transform:scale(.98); }
.kh-tr-commit:disabled{ background:var(--kh-void-3); color:var(--kh-ink-dim); cursor:not-allowed; box-shadow:none; }

@media (max-width:640px){
  .kh-tr-wrap{ flex-direction:column; }
  .kh-tr-panel{ flex-basis:auto; }
}