/* Yellow Pages RV, version 03: the pages the Worker builds (Stage 5, 16 October
   2026): a technician's page, the state and town pages, the troubleshooting
   pages, the page-not-here page and the sign-in button page.

   The Worker adds this (after /v03.css) only under the ?work=1 preview, and for
   the screen only, so a printed technician page is exactly as before. It dresses
   each page's own classes, reading only the tokens in /v03.css. No truck on these
   pages. Badges keep their colors; the amber answer box and the red warning on a
   troubleshooting page keep theirs. Words at least 15 pixels, anything pressed
   at least 50 pixels tall. */

html.v03 { --ink: var(--v3-text); --ink-soft: var(--v3-text-soft); --paper: var(--v3-bg); --rule: var(--v3-line); --link: var(--v3-black); }
html.v03 body { background: var(--v3-bg); color: var(--v3-text); font: 400 16px/1.5 var(--v3-font); }
html.v03 :focus-visible { outline: 3px solid var(--v3-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--v3-white); }
html.v03 a { color: var(--v3-black); }
html.v03 .wrap, html.v03 .w { padding-left: 16px; padding-right: 16px; }

/* ---------- The yellow top bar ---------- */
html.v03 body > header { background: var(--v3-yellow); border-bottom: 0; }
html.v03 body > header .wrap, html.v03 body > header .w { display: flex; align-items: center; gap: 8px; min-height: 56px; padding-top: 3px; padding-bottom: 3px; }
html.v03 .brand, html.v03 .b { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; color: var(--v3-black); font: 800 17px/1 var(--v3-font);
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
html.v03 .brand span, html.v03 .b span { color: inherit; }
/* The mark on a small black tile, so it stands out on the yellow. */
html.v03 .brand img, html.v03 .b img { height: 36px; width: auto; padding: 4px 5px; background: var(--v3-black); border-radius: 8px; }
html.v03 .findlink { display: inline-flex; align-items: center; min-height: 50px; color: var(--v3-black); font: 700 16px/1 var(--v3-font); }
@media (max-width: 440px) { html.v03 .findlink { display: none; } }
html.v03 .navback { min-height: 50px; color: var(--v3-black); font: 800 17px/1 var(--v3-font); }
html.v03 .navback:hover { color: var(--v3-black); text-decoration: underline; text-underline-offset: 3px; }
html.v03 .share { min-height: 50px; border: 1.5px solid var(--v3-black); background: var(--v3-white); color: var(--v3-black); font: 700 16px/1 var(--v3-font); }
html.v03 .share:hover { background: var(--v3-white); }

/* ---------- Words ---------- */
html.v03 h1 { font-weight: 800; letter-spacing: -.02em; color: var(--v3-text); }
html.v03 h2 { font-weight: 800; color: var(--v3-text); }
html.v03 p { color: var(--v3-text-soft); }
html.v03 b, html.v03 strong { color: inherit; }

/* ---------- A technician's page ---------- */
html.v03 .hero, html.v03 .card { background: var(--v3-white); border: 0; border-radius: 14px; box-shadow: var(--v3-shadow); }
html.v03 p.role { font-size: 17px; }
html.v03 .stars { font-size: 16px; }
html.v03 .stars b { color: #e0a416; }
/* Badges keep their colors; only the words grow to 15 pixels. */
html.v03 .badge { font-size: 15px; }
html.v03 a.badge.ok small { font-size: 15px; }
html.v03 .lang { font-size: 15px; }
html.v03 .btn { min-height: 52px; border: 1.5px solid var(--v3-black); border-radius: 10px; background: var(--v3-white); color: var(--v3-black); font: 700 17px/1.15 var(--v3-font); }
/* The way to their number: the main button, black with yellow words. */
html.v03 .btn.go, html.v03 .mapcta .btn { background: var(--v3-black); border-color: var(--v3-black); color: var(--v3-yellow); font-weight: 800; }
html.v03 .callany { font-size: 17px; }
html.v03 .facts { font-size: 15px; border-top-color: var(--v3-line); }
html.v03 .facts b { font-size: 17px; font-weight: 800; }
html.v03 .card h2 { font-size: 20px; }
html.v03 .line { border-bottom-color: var(--v3-line); }
html.v03 .line .amt { font-weight: 800; }
html.v03 .note, html.v03 .small, html.v03 .credfoot { font-size: 15px; }
/* The work they take on, as plain labels (they are not pressed). */
html.v03 .chip { font-size: 15px; background: var(--v3-bg); border: 1px solid var(--v3-line); color: var(--v3-black); }
html.v03 ul.creds li { border-bottom-color: var(--v3-line); }
html.v03 ul.creds .who { font-size: 15px; }
html.v03 .seen { font-size: 15px; }
html.v03 .tel { color: var(--v3-black); font-weight: 800; }
html.v03 .qrcard .url { font-size: 15px; }
html.v03 .away { font-size: 16px; }
html.v03 .mapcta { border-radius: 14px; }

/* ---------- The state and town pages ---------- */
html.v03 .crumb { font-size: 15px; }
html.v03 .crumb a { display: inline-flex; align-items: center; min-height: 50px; color: var(--v3-black); font-weight: 600; }
html.v03 h2 { border-bottom-color: var(--v3-line); }
html.v03 .tcount { font-size: 15px; }
html.v03 .tli { border-bottom-color: var(--v3-line); }
html.v03 .tli a { display: inline-flex; align-items: center; min-height: 50px; color: var(--v3-black); font-size: 18px; font-weight: 800; }
html.v03 .tli .meta { font-size: 15px; }
html.v03 .grp { font-size: 17px; }
/* Towns and states to pick from: white cards with a black line. */
html.v03 .townwrap a { display: inline-flex; align-items: center; min-height: 50px; padding: 6px 16px; border: 1.5px solid var(--v3-black); border-radius: 10px;
  background: var(--v3-white); color: var(--v3-black); font: 600 16px/1.2 var(--v3-font); }
html.v03 .statewrap a { min-height: 56px; border: 0; border-radius: 12px; background: var(--v3-white); box-shadow: 0 1px 4px rgba(0,0,0,.08); color: var(--v3-black);
  font: 700 17px/1.2 var(--v3-font); }
html.v03 .statewrap a .n { font-size: 15px; }
html.v03 footer { background: var(--v3-bg); border-top: 1px solid var(--v3-line); }
html.v03 footer .wrap { font-size: 15px; }
html.v03 footer a { display: inline-flex; align-items: center; min-height: 50px; color: var(--v3-black); }
/* Specialties past the featured five fold under Show all (Phase 1, under the same preview). */
html.v03 .specmore summary { min-height: 50px; font-size: 16px; }

/* ---------- Troubleshooting ---------- */
html.v03 .answer, html.v03 .warn { border-radius: 12px; }
html.v03 .field { border-left-color: var(--v3-warn); }
html.v03 form.near input { min-height: 52px; border: 1.5px solid var(--v3-field-line); border-radius: 10px; font: 400 18px/1.2 var(--v3-font); }
html.v03 form.near button { min-height: 52px; border: 0; border-radius: 10px; background: var(--v3-black); color: var(--v3-yellow); font: 800 17px/1 var(--v3-font); }
html.v03 #usemine { min-height: 52px; border: 1.5px solid var(--v3-black); border-radius: 10px; background: var(--v3-white); color: var(--v3-black); font: 700 16px/1 var(--v3-font); }
html.v03 .byline { font-size: 15px; border-top-color: var(--v3-line); }
html.v03 ul.guides h2 a { display: inline-flex; align-items: center; min-height: 50px; color: var(--v3-black); }

/* ---------- Page not here, and the sign-in button page ---------- */
html.v03 .go { border-radius: 10px; background: var(--v3-black); color: var(--v3-yellow); font: 800 18px/56px var(--v3-font); }
html.v03 form button { border-radius: 10px; background: var(--v3-black); color: var(--v3-yellow); font: 800 18px/1.15 var(--v3-font); }
html.v03 .more { font-size: 16px; }
html.v03 .more a, html.v03 .w p a { color: var(--v3-black) !important; font-weight: 700; }

/* The wording round (18 October 2026): Show phone number on a technician's page,
   its person check over the page, and the short line under Call out fee. */
html.v03 button#techphone { font: inherit; font-weight: 700; cursor: pointer; }
html.v03 button#techphone:disabled { opacity: .7; cursor: default; }
html.v03 #techphone-slot p { margin: 0; font-size: 16px; }
html.v03 #techcheck { position: fixed; inset: 0; z-index: 1000; background: rgba(17,17,17,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
html.v03 #techcheck[hidden] { display: none; }
html.v03 .techcheck-card { background: #fff; border-radius: 14px; padding: 20px; max-width: 360px; width: 100%; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
html.v03 .techcheck-card p { margin: 0 0 12px; font-size: 16px; }
html.v03 #techcheck-box { min-height: 65px; margin: 0 0 8px; }
html.v03 .techcheck-err { color: #b3260a; min-height: 1em; }
html.v03 .techcheck-card .btn { width: 100%; min-height: 50px; }
html.v03 .v3w-feehint { display: block; font-weight: 400; font-size: 15px; line-height: 1.35; color: #555; margin-top: 2px; }