/* ============================================================
   Shared components — loaded by BOTH shells (index.html and
   index-v2.html, after their theme stylesheet).
   Styles for components rendered by the shared /js/*.js screens
   live HERE, written only against variables that exist in both
   themes (--primary, --border, --bg-input, --text-dim, …), so
   each shell colors them natively. Never style a shared-JS
   component in app.css or app-v2.css alone — it will look
   unstyled in the other shell.
   ============================================================ */

/* ── Editable rate grids (Global Pricing / Lead Costs) ──
   Design intent: reads like a clean modern data table (UI font, lining
   figures, formatted currency), NOT a calculator. A cell only reveals it is
   editable on hover (soft tint) / focus (field + ring). */
.rate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(480px,1fr));gap:6px 56px;max-width:1240px}
.tbl-zebra td{border-bottom:none;padding:5px 10px}
.tbl-zebra tbody tr:nth-child(even) td{background:var(--hover,rgba(148,163,184,.07))}
.tbl-zebra tbody tr:hover td{background:var(--raise,rgba(148,163,184,.13))}
.tbl-zebra th{cursor:default}
.tbl-zebra th.num,.tbl-zebra td.num{text-align:right}
.st-cell{font-weight:600;font-size:13px;color:var(--text)}

.cell-input{width:112px;padding:7px 10px;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text);font-family:inherit;font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums lining-nums;text-align:right;transition:background .12s,border-color .12s,box-shadow .12s}
.cell-input::placeholder{color:var(--text-dim);font-weight:400}
.cell-input:hover{background:var(--bg-input)}
.cell-input:focus{outline:none;background:var(--bg-input);border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 18%,transparent)}
.cell-input.cell-filled{background:color-mix(in oklab,var(--primary) 14%,transparent);border-color:color-mix(in oklab,var(--primary) 45%,transparent)}
.cell-input::-webkit-outer-spin-button,.cell-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell-input[type=number]{appearance:textfield;-moz-appearance:textfield}

/* ── Pricing quick-fill toolbar ── */
.gp-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:12px;margin-bottom:18px;max-width:1240px}
.gp-tool{display:flex;align-items:center;gap:9px}
.gp-lbl{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap}
.gp-eq{font-size:12.5px;color:var(--text-muted);white-space:nowrap}
.gp-in{height:32px;width:78px;padding:0 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-weight:500;font-family:inherit;font-variant-numeric:tabular-nums lining-nums;text-align:right;transition:border-color .12s,box-shadow .12s}
.gp-in:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 18%,transparent)}
select.gp-in{width:auto;text-align:left;padding:0 8px}
.gp-sep{width:1px;height:24px;background:var(--border)}
.gp-hint{font-size:12px;color:var(--text-dim);margin-left:auto}
@media(max-width:1100px){.gp-hint{margin-left:0;flex-basis:100%}}