/* ==========================================================================
   S16 Job cost vs estimate (Mockup 3) styling. Uses chrome.css tokens.
   Plain-English verdict + inline snapshot (no big KPI tiles) + a drillable
   per-phase matrix. Review-only mockup.
   ========================================================================== */

/* ---- verdict banner --------------------------------------------------- */
.verdict { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--border-default); border-left: 4px solid var(--danger); background: var(--card);
  box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.verdict.ok { border-left-color: var(--success); }
.verdict .vi { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: var(--danger-soft); color: var(--danger); }
.verdict.ok .vi { background: var(--success-soft); color: var(--success); }
.verdict .vt { font-size: 15.5px; font-weight: 600; color: var(--fg-1); }
.verdict .vs { font-size: 13.5px; color: var(--fg-2); margin-top: 3px; line-height: 1.55; }
.verdict .vs b { color: var(--fg-1); }
.verdict .vs .r { color: var(--danger); font-weight: 600; }
.verdict .vs .g { color: var(--success); font-weight: 600; }

/* ---- inline snapshot strip ------------------------------------------- */
.jc-snap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 4px 2px 15px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle); }
.jc-snap .eb { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand);
  display: inline-flex; align-items: center; gap: 6px; }
.jc-snap .eb .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); }
.jc-snap .st { font-size: 13px; color: var(--fg-3); display: inline-flex; align-items: baseline; gap: 6px; }
.jc-snap .st b { font-size: 20px; font-weight: 700; color: var(--fg-1); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.jc-snap .st.over b { color: var(--danger); }
.jc-snap .st.mgn.under b { color: var(--danger); }
.jc-snap .sep { color: var(--border-default); }

/* ---- per-phase matrix ------------------------------------------------- */
.jc-wrap { overflow-x: auto; }
.jc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.jc-table thead th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-3); padding: 8px 12px; border-bottom: 2px solid var(--border-default); white-space: nowrap; }
.jc-table th.num, .jc-table td.num { text-align: right; }
.jc-table th.ctr, .jc-table td.ctr { text-align: center; }
.jc-table tbody tr { cursor: pointer; }
.jc-table tbody tr:hover td { background: #fafbfd; }
.jc-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jc-table td.ph { font-weight: 500; color: var(--fg-1); font-variant-numeric: normal; }
.jc-table td.ph .drill { display: block; font-size: 11px; color: var(--sky); font-weight: 400; }
.jc-table .done { display: inline-flex; align-items: center; gap: 8px; }
.jc-table .done .bar { width: 44px; height: 5px; border-radius: 999px; background: var(--border-default); overflow: hidden; }
.jc-table .done .bar i { display: block; height: 100%; background: var(--sky); }
.jc-table .done .pctn { font-size: 11.5px; color: var(--fg-3); }
.jc-table td.dim { color: var(--fg-3); }
.vchip { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.vchip.over { color: var(--danger); background: var(--danger-soft); }
.vchip.under { color: var(--success); background: var(--success-soft); }
.vchip.on { color: var(--fg-3); background: var(--surface-secondary); }
.jc-table td.mgn { font-weight: 600; color: var(--fg-1); }
.jc-table td.mgn.thin { color: var(--danger); }
.jc-table tfoot td { padding: 13px 12px; border-top: 2px solid var(--border-default); font-weight: 700; color: var(--fg-1);
  font-variant-numeric: tabular-nums; }
.jc-table tfoot td.ph { font-variant-numeric: normal; font-size: 14px; }

/* ---- QuickBooks provenance shading (the shaded column = from QB) ------ */
.jc-table th.col-qb, .jc-table td.col-qb { background: var(--surface-secondary); border-left: 2px solid var(--border-default); border-right: 2px solid var(--border-default); }
.jc-table tbody tr:hover td.col-qb { background: #e6ecf4; }
.jc-table tfoot td.col-qb { background: var(--surface-secondary); }
.jc-table .src { display: block; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-top: 2px; }
.jc-table .src.rc { color: var(--sky); }
.jc-table .src.qb { color: var(--warning); }
.jc-table .csub { display: block; font-size: 10.5px; font-weight: 400; color: var(--brand); margin-top: 1px; font-variant-numeric: tabular-nums; }
.srcbadge { font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.srcbadge.rc { background: rgba(81,137,173,0.12); color: var(--sky); }
.srcbadge.qb { background: var(--warning-soft); color: var(--warning); }

.jc-note { font-size: 12.5px; color: var(--fg-3); margin-top: 16px; padding: 12px 15px; background: var(--surface-secondary);
  border-radius: var(--r-md); line-height: 1.55; }
.jc-note b { color: var(--fg-2); }
.jc-note .lock { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-3);
  background: #fff; border: 1px solid var(--border-default); border-radius: 999px; padding: 2px 7px; }

/* ---- drill modal ------------------------------------------------------ */
.backdrop { position: fixed; inset: 0; background: rgba(11,18,32,0.45); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.backdrop.show { display: flex; }
.modal { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: 88vh; overflow: auto; }
.modal .mhead { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-default); }
.modal .mhead h3 { font-size: 16px; }
.modal .mhead .sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.modal .x { font-size: 20px; color: var(--fg-3); cursor: pointer; background: none; border: none; line-height: 1; }
.modal .mbody { padding: 6px 0; }
.drow { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--border-subtle); }
.drow .ty { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.ty.Labor { background: rgba(81,137,173,0.12); color: var(--sky); }
.ty.Sub { background: var(--warning-soft); color: var(--warning); }
.ty.Material { background: var(--success-soft); color: var(--success); }
.ty.PO { background: var(--brand-subtle); color: var(--brand); }
.drow .dd { flex: 1; font-size: 13px; color: var(--fg-2); }
.drow .da { font-size: 13.5px; font-weight: 600; color: var(--fg-1); font-variant-numeric: tabular-nums; }
.drow.committed .da { color: var(--brand); }
.dtot { display: flex; justify-content: space-between; padding: 13px 20px; font-weight: 700; color: var(--fg-1); border-top: 2px solid var(--border-default); font-variant-numeric: tabular-nums; }
.dmeta { padding: 12px 20px; font-size: 12px; color: var(--fg-3); background: var(--surface-secondary); line-height: 1.5; }
.dmeta b { color: var(--fg-2); }
.dempty { padding: 22px 20px; font-size: 13px; color: var(--fg-3); text-align: center; }