/* Wave 4 tools (mechanics and car owner), on top of tools.css: unit selects, plate and VIN fields and results.
   Same tokens as landing.css; no output.css / Tailwind on the marketing pages (spec-ferramentas-gratis D4). */

/* Unit select inside a .tf-box. The box is transparent on a dark tone, so the options need their own colours or
   Windows draws light text on a white list. */
.tf-select { cursor: pointer; appearance: auto; font-family: var(--mono); }
.tf-select option { background: var(--surf); color: var(--fg); }

/* Plate and VIN are codes: upper case, spaced, mono. */
.tf-code { text-transform: uppercase; letter-spacing: .08em; }

/* A plate or a VIN as the result: 17 characters must fit a 360 px phone. */
.tr-code { font-family: var(--mono); font-weight: 600; font-size: clamp(1.25rem, 5.2vw, 2rem); letter-spacing: .06em; line-height: 1.2; margin: 10px 0 8px; color: var(--fg); overflow-wrap: anywhere; }
.tr-code.big { font-size: clamp(2rem, 9vw, 3rem); }
.tr-mark { color: var(--accent); border-bottom: 2px solid var(--accent); }
.tr-pair { display: grid; gap: 4px; margin-top: 6px; }

/* Year code table on the VIN page: three narrow columns, so it stays readable at 360 px without scrolling. */
.code-table { width: 100%; max-width: 520px; border-collapse: collapse; margin: 6px 0 18px; font-size: .9rem; }
.code-table th, .code-table td { padding: 7px 10px; border-bottom: 1px solid var(--hair); text-align: left; }
.code-table thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.code-table td { font-family: var(--mono); color: var(--dim); }
.code-table td:first-child { color: var(--fg); font-weight: 600; }