/* Kaizen Labor Costing Tool. Scoped styles — everything under .klc so the
   bundle never leaks onto the host HubSpot page. Matches the Auto Shop
   Valuation tool: Nunito Sans + the fully-dark surface treatment (Onyx canvas,
   #0f0f0f cards, light text, Foundry Tan accents, Forged Ember CTAs). Colors
   are the canonical Kaizen tokens (shared/brand-tokens.json). */

.klc {
  --kz-onyx: #0F0F0F;
  --kz-tan: #DDCCA5;
  --kz-ember: #D66A4A;
  --kz-graphite: #3A3838;
  --kz-parchment: #F1EFEA;
  --kz-font: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  /* dark-surface working tokens (subtle lift: boxes read as dark-gray cards on
     a near-black canvas, text stays #f1efea for high contrast) */
  --s-bg: #0a0a0a;
  --s-card: #181818;
  --s-panel: #202020;
  --s-line: #303030;
  --s-line-2: #3a3a3a;
  --s-text: #f1efea;
  --s-muted: #d8d3c5;
  --s-faint: #9a9384;
  --s-tan-soft: rgba(221,204,165,0.18);
  /* GP semantic colors (kept from v42) */
  --gp-green: #2d7a4a;
  --gp-amber: #b58a2e;
  --gp-red: #c0392b;
}

.klc, .klc * { box-sizing: border-box; margin: 0; padding: 0; }
.klc { font-family: var(--kz-font); background: var(--s-bg); color: var(--s-text); line-height: 1.5; font-weight: 300; -webkit-font-smoothing: antialiased; }
.klc h1, .klc h2, .klc h3, .klc h4 { font-family: var(--kz-font); line-height: 1.15; color: var(--s-text); }

/* ── Shell + header ───────────────────────────────────────── */
.klc-app { max-width: 880px; margin: 0 auto; padding: 28px 20px 64px; }
.klc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--s-line); margin-bottom: 24px; }
.klc-brand-eye { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kz-tan); font-weight: 700; }
.klc-topbar-tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; }

/* ── Intro ────────────────────────────────────────────────── */
.klc-intro { margin-bottom: 28px; }
.klc-intro-eye { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; margin-bottom: 12px; }
.klc-intro-h { font-size: clamp(26px,3.2vw,36px); font-weight: 800; letter-spacing: 0.005em; color: var(--s-text); margin-bottom: 16px; line-height: 1.12; }
.klc-intro-body { font-size: 16px; color: var(--s-muted); line-height: 1.6; margin-bottom: 14px; max-width: 64ch; font-weight: 300; }
.klc-intro-body strong { color: var(--s-text); font-weight: 700; }
.klc-start-btn { margin-top: 12px; padding: 14px 28px; font-size: 15px; }

/* ── Tabs ─────────────────────────────────────────────────── */
.klc-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.klc-tab { flex: 1; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid var(--s-line); background: var(--s-card); color: var(--s-faint); }
.klc-tab-active { border-color: var(--kz-ember); color: var(--s-text); background: rgba(214,106,74,0.10); }
.klc-tab-done { color: var(--s-text); }
.klc-tab-skipped { color: var(--s-faint); border-style: dashed; }
.klc-sn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800; flex-shrink: 0; background: var(--s-panel); color: var(--s-faint); border: 1px solid var(--s-line-2); }
.klc-sn-active { background: var(--kz-ember); color: #fff; border-color: var(--kz-ember); }
.klc-sn-done { background: var(--kz-tan); color: var(--kz-onyx); border-color: var(--kz-tan); }
.klc-sn-skipped { background: var(--s-panel); color: var(--s-faint); }

/* ── Panels ───────────────────────────────────────────────── */
.klc-panel { display: none; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 12px; padding: 32px 28px; }
.klc-panel.active { display: block; }
.klc-slabel { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; margin-bottom: 6px; }
.klc-sh { font-size: 24px; font-weight: 800; color: var(--s-text); margin-bottom: 8px; }
.klc-sdesc { font-size: 15px; color: var(--s-muted); margin-bottom: 20px; line-height: 1.55; font-weight: 300; max-width: 64ch; }
.klc-sdesc-note { font-size: 13px; color: var(--s-faint); line-height: 1.6; margin-bottom: 16px; font-weight: 300; }
.klc-sdesc-note strong { color: var(--s-muted); font-weight: 700; }

/* ── Formula chip ─────────────────────────────────────────── */
.klc-formula { background: var(--s-panel); border: 1px solid var(--s-line); border-left: 3px solid var(--kz-tan); border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; }
.klc-formula .fl { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; margin-bottom: 3px; }
.klc-formula .ft { font-size: 14px; color: var(--s-muted); }
.klc-formula .ft strong { color: var(--kz-tan); font-weight: 700; }

/* ── Inputs ───────────────────────────────────────────────── */
.klc-field-label { display: block; font-size: 13px; font-weight: 700; color: var(--s-text); margin-bottom: 5px; }
.klc-field-label .klc-opt { color: var(--s-faint); font-weight: 400; }
.klc-field-hint { font-size: 12px; color: var(--s-faint); line-height: 1.45; margin-top: 4px; font-weight: 300; }
.klc-field-input { width: 100%; padding: 9px 12px; font-size: 15px; border: 1px solid var(--s-line-2); border-radius: 6px; background: var(--s-panel); color: var(--s-text); font-family: var(--kz-font); font-weight: 400; -moz-appearance: textfield; }
.klc-field-input::-webkit-outer-spin-button, .klc-field-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.klc-field-input:focus { outline: none; border-color: var(--kz-tan); box-shadow: 0 0 0 3px var(--s-tan-soft); }
.klc-input-wrap { position: relative; display: inline-block; width: 100%; }
.klc-input-prefix { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--s-faint); font-size: 14px; pointer-events: none; }
.klc-field-input.klc-has-prefix { padding-left: 22px; }
.klc-rm-btn { background: transparent; border: 1px solid var(--s-line-2); color: var(--s-faint); border-radius: 6px; width: 28px; height: 28px; font-size: 16px; cursor: pointer; line-height: 1; }
.klc-rm-btn:hover { border-color: var(--kz-ember); color: var(--kz-ember); }

/* ── Header help "?" popover (Step-1 columns) ─────────────── */
/* Mirrors the valuation tool's .ksv-info-btn/.ksv-info-popover (dark variant),
   adapted to a table-header (inline) context. Click pins .on (touch); CSS reveals
   on hover/focus. Popover opens downward over the first rows so it isn't clipped by
   the mobile .klc-tbl-scroll{overflow-x:auto} rule. */
.klc-th-help { position: relative; }
.klc-info-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin-left: 6px; width: 20px; height: 20px; border: 1px solid #2f2f2f; background: #161616; color: var(--kz-tan); border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; cursor: help; text-transform: none; letter-spacing: normal; font-family: var(--kz-font); transition: all .2s; }
.klc-info-btn:hover, .klc-info-btn:focus-visible, .klc-info-btn[aria-expanded="true"] { background: var(--kz-tan); color: var(--kz-onyx); border-color: var(--kz-tan); outline: none; }
.klc-info-popover { display: none; position: absolute; top: 100%; left: 0; width: 240px; max-width: 70vw; margin-top: 6px; padding: 11px 13px; background: #1c1c1c; color: var(--s-text); border: 1px solid #2f2f2f; border-radius: 8px; font-size: 12px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal; white-space: normal; z-index: 30; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
.klc-info-popover.on { display: block; }
.klc-info-btn:hover ~ .klc-info-popover, .klc-info-btn:focus-visible ~ .klc-info-popover { display: block; }

/* ── Tech table (Step 1) ──────────────────────────────────── */
.klc-tech-tbl, .klc-loaded-tbl, .klc-res-tbl { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.klc-tech-tbl th, .klc-res-tbl th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--s-line); }
.klc-tech-tbl td, .klc-res-tbl td { padding: 10px 10px; border-bottom: 1px solid var(--s-line); font-size: 14px; color: var(--s-text); vertical-align: middle; }
.klc-add-btn { display: block; width: 100%; background: transparent; color: var(--s-muted); border: 1.5px dashed var(--s-line-2); border-radius: 8px; padding: 11px 20px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--kz-font); text-align: center; margin-bottom: 14px; }
.klc-add-btn:hover { border-color: var(--kz-tan); color: var(--kz-tan); }

/* ── Loaded table (Step 2) ────────────────────────────────── */
.klc-loaded-tbl td { padding: 9px 8px; border-bottom: 1px solid var(--s-line); font-size: 14px; color: var(--s-text); }
.klc-loaded-tbl td:last-child { text-align: right; width: 170px; }
.klc-loaded-input-wrap { position: relative; display: inline-block; }
.klc-loaded-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--s-faint); font-size: 14px; pointer-events: none; }
.klc-loaded-input { width: 140px; padding: 7px 10px 7px 22px; border: 1.5px solid var(--s-line-2); border-radius: 5px; font-size: 14px; font-family: var(--kz-font); text-align: right; background: var(--s-panel); color: var(--s-text); font-weight: 400; -moz-appearance: textfield; }
.klc-loaded-input::-webkit-outer-spin-button, .klc-loaded-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.klc-loaded-input:focus { outline: none; border-color: var(--kz-tan); box-shadow: 0 0 0 3px var(--s-tan-soft); }
.klc-loaded-tbl-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 8px 0; font-weight: 800; font-size: 16px; color: var(--s-text); }
.klc-loaded-tbl-total-lbl { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; }
.klc-toggle-box { margin-bottom: 18px; padding: 13px 16px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 7px; }
.klc-toggle-note { font-size: 12px; color: var(--s-faint); line-height: 1.6; margin-top: 6px; font-weight: 300; }
.klc-check-box { margin-bottom: 14px; padding: 12px 14px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 6px; display: flex; align-items: center; gap: 10px; }
.klc-check-box label { font-size: 13px; color: var(--s-muted); cursor: pointer; line-height: 1.4; }
.klc-check-box input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--kz-ember); }

/* ── Summary boxes ────────────────────────────────────────── */
.klc-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
.klc-sum-box { padding: 14px 16px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 8px; }
.klc-sum-box.dark { background: var(--kz-tan); border-color: var(--kz-tan); }
.klc-sum-lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; margin-bottom: 4px; }
.klc-sum-box.dark .klc-sum-lbl { color: rgba(15,15,15,0.55); }
.klc-sum-val { font-size: 22px; font-weight: 800; color: var(--s-text); }
.klc-sum-box.dark .klc-sum-val { color: var(--kz-onyx); }
.klc-sum-sub { font-size: 11px; color: var(--s-faint); margin-top: 2px; font-weight: 300; }
.klc-sum-box.dark .klc-sum-sub { color: rgba(15,15,15,0.5); }

/* ── Door box (Step 3) ────────────────────────────────────── */
.klc-door-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 8px; margin-bottom: 24px; }
.klc-door-lbl { font-size: 14px; font-weight: 700; color: var(--s-text); }
.klc-door-sub { font-size: 12px; color: var(--s-faint); font-weight: 300; margin-top: 2px; }

/* Loaded Cost/Hr result cell + status badges */
.klc-res-tbl td.klc-loaded-cell { font-size: 16px; font-weight: 800; background: rgba(214,106,74,0.10); border-left: 3px solid var(--kz-ember); }
.klc-badge { display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--s-faint); background: #262626; border-radius: 3px; padding: 1px 5px; }

/* ── GP pills ─────────────────────────────────────────────── */
.klc-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 13px; font-weight: 800; }
.klc-pill.pg { background: rgba(45,122,74,0.18); color: #6ed29a; }
.klc-pill.pw2 { background: rgba(181,138,46,0.18); color: #e0bd6a; }
.klc-pill.pb { background: rgba(192,57,43,0.18); color: #ef8a7e; }

/* ── Color key / legend (Step 3) ──────────────────────────── */
.klc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 18px; padding: 12px 16px; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 8px; }
.klc-key-title { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; }
.klc-key-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--s-muted); font-weight: 700; }
.klc-key-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ── Next-step box ────────────────────────────────────────── */
.klc-nextstep { background: var(--s-panel); border: 1.5px solid var(--kz-ember); border-radius: 8px; padding: 18px 22px; line-height: 1.7; margin-bottom: 22px; }
.klc-nextstep-eye { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--kz-ember); margin-bottom: 6px; }
.klc-nextstep-body { font-size: 13px; color: var(--s-muted); font-weight: 300; }
.klc-nextstep-body a { color: var(--kz-ember); text-decoration: underline; font-weight: 700; cursor: pointer; }
.klc-unloaded-warn { font-size: 12px; color: #f0a070; background: rgba(160,64,32,0.18); border: 1px solid #a04020; border-radius: 5px; padding: 7px 10px; margin-bottom: 10px; line-height: 1.55; font-weight: 300; }

/* ── Book a Shop Review CTA (Step 3) ──────────────────────── */
.klc-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; padding: 20px 22px; background: rgba(214,106,74,0.08); border: 1px solid rgba(214,106,74,0.40); border-radius: 10px; }
.klc-cta-h { font-size: 16px; font-weight: 800; color: var(--s-text); margin-bottom: 4px; }
.klc-cta-sub { font-size: 13px; color: var(--s-muted); font-weight: 300; line-height: 1.55; }
.klc-cta .klc-btn { flex-shrink: 0; }

/* ── Step-3 breathing room ────────────────────────────────── */
/* Wider vertical gaps between the marked Step-3 sections (scoped to #panel2 so
   Step 2's shared classes are unaffected). #step3-formula carries its own inline
   margin in the markup. */
#panel2 .klc-door-box { margin-bottom: 32px; }
#panel2 .klc-sum-grid { margin-bottom: 32px; }
#panel2 .klc-nextstep { margin-bottom: 32px; }

/* ── Alerts / validation ──────────────────────────────────── */
.klc-alert { background: rgba(214,106,74,0.12); border: 1px solid rgba(214,106,74,0.45); border-radius: 6px; padding: 11px 14px; font-size: 13px; color: #f0b49c; line-height: 1.6; margin-bottom: 14px; font-weight: 300; }
.klc-alert strong { color: var(--s-text); font-weight: 700; }
.klc-val-msg { display: none; color: var(--kz-ember); font-size: 13px; font-weight: 700; margin-bottom: 12px; }

/* ── Buttons ──────────────────────────────────────────────── */
.klc-btn-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.klc-btn-row-right { display: flex; gap: 10px; flex-wrap: wrap; }
.klc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; font-family: var(--kz-font); transition: all .15s; }
.klc-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--s-tan-soft); }
.klc-btn-primary { background: var(--kz-ember); color: #fff; border-color: var(--kz-ember); }
.klc-btn-primary:hover { background: #c25b3d; border-color: #c25b3d; }
.klc-btn-secondary { background: transparent; color: var(--s-text); border-color: var(--s-line-2); }
.klc-btn-secondary:hover { border-color: var(--kz-tan); color: var(--kz-tan); }

/* ── Footer ───────────────────────────────────────────────── */
.klc-foot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--s-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.klc-foot-brand { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-faint); font-weight: 700; }
.klc-foot-url { font-size: 12px; color: var(--s-faint); font-weight: 300; }

/* ── Mobile (P1.3) ────────────────────────────────────────── */
@media (max-width: 640px) {
  .klc-app { padding: 18px 14px 56px; }
  .klc-panel { padding: 20px 16px; }
  .klc-tabs { gap: 6px; }
  .klc-tab { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 10px; font-size: 12px; }
  .klc-sum-grid { grid-template-columns: 1fr; }
  .klc-door-box { flex-direction: column; align-items: stretch; }
  .klc-btn-row { flex-direction: column-reverse; align-items: stretch; }
  .klc-btn { width: 100%; }
  .klc-btn-row-right { flex-direction: column; }
  /* Tables scroll horizontally rather than clip */
  .klc-tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .klc-tech-tbl, .klc-res-tbl { min-width: 520px; }
}

/* ── Print (P1.2) ─────────────────────────────────────────── */
@media print {
  .klc { background: #fff !important; color: #111 !important; font-weight: 400; }
  .klc-app { padding: 0; max-width: 100%; }
  .klc h1, .klc h2, .klc h3, .klc h4, .klc-sh, .klc-intro-h, .klc-sum-val { color: #111 !important; }
  .klc-panel { background: #fff !important; border: none !important; padding: 0 !important; }
  .klc-tabs, .klc-btn-row, .klc-add-btn, .klc-topbar-tag, .klc-nextstep, .klc-check-box, .klc-toggle-box, .klc-val-msg, .klc-alert, .klc-cta, .klc-key { display: none !important; }
  .klc-res-tbl th, .klc-res-tbl td { color: #111 !important; border-bottom: 1px solid #ccc !important; }
  .klc-sum-box, .klc-sum-box.dark { background: #f4f2ee !important; border: 1px solid #ddd !important; }
  .klc-sum-box.dark .klc-sum-val, .klc-sum-box.dark .klc-sum-lbl { color: #111 !important; }
  .klc-sum-lbl, .klc-sum-sub, .klc-door-sub { color: #555 !important; }
  .klc-pill.pg { background: #e3f0e8 !important; color: #1c5733 !important; }
  .klc-pill.pw2 { background: #f3ead2 !important; color: #6b520f !important; }
  .klc-pill.pb { background: #f6dcd8 !important; color: #7a241b !important; }
}