/* Tech App — legacy support layer.
   tech-v2.css (loaded after) owns the design system. This file only keeps:
   1. The damage-marker color tokens (--d-*) not defined in tech-v2.
   2. Base element resets for the kiosk scope.
   3. The .btn / .field / .eyebrow / .scroll primitives still used by the
      AddServiceSheet + AddDamageSheet components, restyled to match v2.
   Delete a block here once its last consumer is migrated to .tx-*. */

.tech-root {
  --d-ding:    #b4730a;
  --d-scratch: #c2410c;
  --d-dent:    #e11d2e;
  --d-paint:   #7c3aed;
  --d-other:   #2563eb;
}
.tech-root.tech-dark {
  --d-ding:    #f0b135;
  --d-scratch: #f07b35;
  --d-dent:    #f3343b;
  --d-paint:   #c08bf5;
  --d-other:   #6ab3f7;
}

.tech-root * { box-sizing: border-box; }
.tech-root button { font: inherit; cursor: pointer; }
.tech-root input, .tech-root textarea, .tech-root select { font: inherit; }
.tech-root .mono { font-family: var(--font-data); font-feature-settings: "tnum"; }

/* ── Scroll (sheets) ─────────────────────────────────────────────────── */
.tech-root .scroll {
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.tech-root .scroll::-webkit-scrollbar { width: 8px; }
.tech-root .scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.tech-root .scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ── Buttons (sheets) — v2 look ──────────────────────────────────────── */
.tech-root .btn {
  min-height: 44px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-weight: 600; font-size: 0.9375rem; line-height: 1;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .06s var(--ease);
  white-space: nowrap; cursor: pointer;
}
.tech-root .btn:active { transform: translateY(1px); }

.tech-root .btn-primary {
  background: var(--brand); color: var(--on-brand); font-weight: 700;
  box-shadow: 0 1px 2px rgba(225, 29, 46, .30);
}
.tech-root .btn-primary:hover { background: var(--brand-hover); }
.tech-root .btn-primary:disabled {
  background: var(--surface-2); color: var(--ink-faint);
  cursor: not-allowed; box-shadow: none;
}

.tech-root .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.tech-root .btn-ghost:hover { background: var(--surface-2); }

/* ── Eyebrow label (sheets) ──────────────────────────────────────────── */
.tech-root .eyebrow {
  font-family: var(--font-ui);
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Inputs (sheets) — v2 look ───────────────────────────────────────── */
.tech-root .field {
  width: 100%; min-height: 44px; padding: 0 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 1rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); outline: none;
}
.tech-root textarea.field { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; line-height: 1.5; }
.tech-root select.field { cursor: pointer; }
.tech-root .field::placeholder { color: var(--ink-3); }
.tech-root .field:focus { border-color: var(--brand); box-shadow: var(--focus); }