/* =============================================================================
 * scope-quote.css — LRES-MAB-006 Lane D · Quote counterpart sub-tab
 *
 * Every selector is prefixed `.sq-` and everything sits inside `.sq-wrap`, so
 * this file can never collide with the card chassis, the Planner (Lane B) or the
 * 3D (Lane C). Linked by Lane F from web/index.html.
 *
 * Chassis match: the surface is styled to sit inside `#lresCardContent`
 * (lres-cards.js _injectOverlay) under a `.lres-subtab-panel`, matching the
 * job-card mock LRES_JOBCARD_SCOPE_3D_v1_2026-08-11.html — same 12px table,
 * same 9.5px uppercase headers, same #F8FAFB header fill, same 10px radii.
 *
 * BRAND — locked, non-negotiable:
 *   green      #009A42   (deep #064a23, mist #f0f8f3)
 *   anthracite #1F2937   (slate #374151, steel #6B7280)
 *   state ramp #0B7A4B -> #E8A33D -> #C0392B   (good -> warn -> bad)
 *   copper     #C77D2E   (unscheduled / not-yet-on-programme)
 * NO BLUE ANYWHERE. The greys below are neutral (#E5E7EB / #6B7280 / #F8FAFB) —
 * checked by the smoke test, which rejects any hex whose blue channel dominates.
 * ============================================================================= */

.sq-wrap {
  --sq-green: #009A42;
  --sq-green-deep: #064a23;
  --sq-green-mist: #f0f8f3;
  --sq-ramp-good: #0B7A4B;
  --sq-ramp-warn: #E8A33D;
  --sq-ramp-bad: #C0392B;
  --sq-copper: #C77D2E;
  --sq-ink: #1F2937;
  --sq-slate: #374151;
  --sq-steel: #6B7280;
  --sq-mist: #E5E7EB;
  --sq-paper: #F8FAFB;
  --sq-hair: #F0F1F2;
  --sq-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sq-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 12px;
  color: var(--sq-ink);
}

/* ── header ─────────────────────────────────────────────────────────────── */
.sq-head { margin-bottom: 10px; }
.sq-head-t {
  font-family: var(--sq-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--sq-ink);
}
.sq-head-s { font-size: 11px; color: var(--sq-steel); margin-top: 2px; line-height: 1.45; }

.sq-loading { padding: 2rem; text-align: center; color: #9CA3AF; font-size: 13px; }

/* ── DEC-016 masking notice + alerts ───────────────────────────────────── */
.sq-notice {
  background: var(--sq-paper);
  border: 1px solid #EEF0F2;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 11px;
  color: var(--sq-slate);
  margin-bottom: 10px;
}
.sq-alert {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sq-alert--ok   { background: var(--sq-green-mist); border: 1px solid rgba(0, 154, 66, .35); color: #00722F; }
.sq-alert--warn { background: #FDF4E5; border: 1px solid var(--sq-ramp-warn); color: #8a5820; }
.sq-alert--deny { background: #FBECEA; border: 1px solid var(--sq-ramp-bad); color: #8f2b20; }

/* ── issue-gate banner ─────────────────────────────────────────────────── */
.sq-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 10px;
}
.sq-banner-body { flex: 1; min-width: 0; }
.sq-banner-title { font-family: var(--sq-display); font-weight: 800; font-size: 12.5px; }
.sq-banner-reasons { margin: 5px 0 4px; padding-left: 18px; font-size: 11.5px; font-weight: 400; }
.sq-banner-reasons li { margin: 1px 0; }
.sq-banner-meta { font-size: 10.5px; font-weight: 400; color: var(--sq-steel); }
.sq-banner-acts { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.sq-banner--blocked {
  background: #FBECEA;
  border: 1px solid var(--sq-ramp-bad);
  color: #8f2b20;
}
.sq-banner--blocked .sq-banner-meta { color: #a5564a; }
.sq-banner--ok {
  background: var(--sq-green-mist);
  border: 1px solid rgba(0, 154, 66, .35);
  color: #00722F;
}

/* ── totals strip (live vs countersigned) ─────────────────────────────── */
.sq-tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.sq-tile {
  flex: 1 1 150px;
  min-width: 130px;
  background: #fff;
  border: 1px solid var(--sq-mist);
  border-radius: 10px;
  padding: 8px 11px;
}
.sq-tile-k {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sq-steel);
}
.sq-tile-v {
  font-family: var(--sq-mono);
  font-weight: 700;
  font-size: 14px;
  margin-top: 3px;
  color: var(--sq-ink);
}
.sq-tile-v small { font-family: Arial, sans-serif; font-weight: 400; font-size: 10px; color: var(--sq-steel); display: block; }
.sq-tile--live { border-color: rgba(0, 154, 66, .45); }
.sq-tile--live .sq-tile-v { color: var(--sq-green-deep); }
.sq-tile--drift .sq-tile-v { color: var(--sq-ramp-bad); }

/* ── the counterpart table ────────────────────────────────────────────── */
.sq-tablewrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--sq-mist); border-radius: 10px; background: #fff; }
.sq-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.sq-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--sq-steel);
  background: var(--sq-paper);
  padding: 7px 10px;
  border-bottom: 1px solid var(--sq-mist);
}
.sq-table td { padding: 8px 10px; border-bottom: 1px solid var(--sq-hair); vertical-align: middle; }
.sq-table tbody tr:hover td { background: var(--sq-green-mist); }
.sq-table .sq-value, .sq-table th.sq-value { text-align: right; white-space: nowrap; }
.sq-table .sq-vs, .sq-table th.sq-vs { text-align: right; white-space: nowrap; }
.sq-area b, .sq-line b { display: block; color: var(--sq-ink); font-size: 11.5px; }
.sq-area small, .sq-line small { display: block; color: var(--sq-steel); font-size: 10px; margin-top: 1px; }
.sq-basis { color: var(--sq-slate); font-size: 11px; white-space: nowrap; }

.sq-sec td {
  background: #F3F4F6 !important;
  font-family: var(--sq-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--sq-slate);
}
.sq-sec-note {
  font-family: Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sq-steel);
  margin-left: 8px;
  font-size: 10px;
}
.sq-empty td { color: #9CA3AF; font-size: 11.5px; text-align: center; }

.sq-row--tray td { background: rgba(199, 125, 46, .06); }
.sq-row--tray:hover td { background: rgba(199, 125, 46, .11); }
.sq-row--equip td { background: #FCFDFD; }
.sq-row--equip:hover td { background: var(--sq-paper); }

.sq-total td {
  background: var(--sq-paper);
  border-top: 2px solid var(--sq-green);
  font-family: var(--sq-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--sq-ink);
}
.sq-total td small { font-family: Arial, sans-serif; font-weight: 400; font-size: 10px; color: var(--sq-steel); margin-left: 8px; }
.sq-total .sq-value .sq-money { font-size: 14px; color: var(--sq-green-deep); }

/* ── money, mask and absent ───────────────────────────────────────────── */
.sq-money { font-family: var(--sq-mono); font-weight: 700; }
/* Withheld by role (DEC-016). Deliberately NOT the same glyph as absent. */
.sq-mask { color: #9CA3AF; font-weight: 700; letter-spacing: .5px; }
/* Genuinely no value (e.g. a never-approved line). */
.sq-absent { color: #C4C8CC; font-weight: 400; }

.sq-hint { font-size: 10px; color: #9CA3AF; }
.sq-hint--warn { color: #8a5820; }
.sq-lock { font-style: italic; }

/* ── chips (server-computed, rendered verbatim) ───────────────────────── */
.sq-chip {
  display: inline-block;
  border-radius: 99px;
  padding: 1px 9px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-right: 3px;
  white-space: nowrap;
}
.sq-chip--synced      { background: rgba(11, 122, 75, .13); color: var(--sq-ramp-good); }
.sq-chip--redlined    { background: var(--sq-ramp-bad); color: #fff; }
.sq-chip--unscheduled { background: var(--sq-copper); color: #fff; }
.sq-chip--extra       { background: var(--sq-ramp-warn); color: #3d2b00; }
.sq-chip--other       { background: var(--sq-mist); color: var(--sq-slate); }
.sq-chip-none         { color: #C4C8CC; }

.sq-flag {
  display: inline-block;
  border-radius: 99px;
  padding: 0 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .03em;
  margin-left: 4px;
}
.sq-flag--tbc { background: var(--sq-ramp-warn); color: #3d2b00; }
.sq-flag--ind { background: rgba(199, 125, 46, .15); color: #8a5820; }

/* ── buttons (chassis .hbtn shape) ───────────────────────────────────── */
.sq-btn {
  border: 1px solid #D1D5DB;
  background: #fff;
  border-radius: 7px;
  padding: 5px 11px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--sq-slate);
  cursor: pointer;
}
.sq-btn:hover { background: var(--sq-paper); }
.sq-btn--primary { background: var(--sq-green); border-color: var(--sq-green); color: #fff; }
.sq-btn--primary:hover { background: #00822F; border-color: #00822F; }
.sq-btn--muted { color: var(--sq-steel); }
.sq-btn--sm { padding: 3px 8px; font-size: 10px; }
.sq-btn[disabled] { opacity: .55; cursor: not-allowed; }
.sq-btn[disabled]:hover { background: #fff; }

.sq-foot { margin-top: 9px; font-size: 10.5px; color: var(--sq-steel); line-height: 1.45; }

/* ── narrow card / mobile ────────────────────────────────────────────── */
@media (max-width: 760px) {
  .sq-banner { flex-direction: column; }
  .sq-banner-acts { justify-content: flex-start; }
  .sq-table .sq-basis { white-space: normal; }
  .sq-tile { flex: 1 1 100%; }
}