/* Yellow Pages RV, version 03: black, bright yellow and white (Chandler,
   16 October 2026). Replaces look B (look.css), whose files are left in place.

   One shared set of pieces for the whole site. Pages use these and never carry
   their own copy of the colors. It loads only under the ?work=1 preview, by the
   switch line in each page's head (after look B's line, which it cancels), or by
   the Worker for the pages it builds, so without the preview nothing changes.

   Every piece is a class starting v3-, so nothing here can catch a page's own
   class by accident. Bright yellow is a fill under black words, or words on
   black; it is never text on white, which cannot be read in sunlight. Warnings
   keep their own colors (amber worth a look, red actually broken), so a
   warning is never mistaken for something picked.

   Inter is served from /fonts, cut down to the letters the site uses (SIL Open
   Font License, /fonts/Inter-LICENSE.txt). No request goes to another company.
   Four fixed weights, not the one variable file: the variable file drew every
   weight as regular in the WebKit test browser, and a browser only fetches the
   weights a page uses. Words are 400, 600, 700 or 800; nothing asks for 900.

   The truck is the supplied cutout with only its see-through margins trimmed
   (/img/v03/truck-v03.png, every pixel the same) and scaled copies of that for
   phones. Never redrawn, recolored or cropped into the truck; always shown
   whole with object-fit: contain. The original file is kept untouched beside it. */

@font-face { font-family: "Inter V03"; src: url("/fonts/Inter-v03-400.woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter V03"; src: url("/fonts/Inter-v03-600.woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter V03"; src: url("/fonts/Inter-v03-700.woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter V03"; src: url("/fonts/Inter-v03-800.woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --v3-yellow: #FFDE00;
  --v3-yellow-edge: #E1C400;
  --v3-black: #111111;
  --v3-white: #FFFFFF;
  --v3-bg: #F4F4F4;
  --v3-dark: #2C2C2C;
  --v3-text: #111111;
  --v3-text-soft: #3A3A3A;
  --v3-line: #E2E2E2;
  --v3-field-line: #8C9198;
  --v3-quiet: #ECECEC;
  --v3-warn: #E0A416;
  --v3-warn-wash: #FDF4DD;
  --v3-warn-ink: #6B4D00;
  --v3-bad: #B3261E;
  --v3-bad-wash: #FCEBEA;
  --v3-shadow: 0 2px 6px rgba(0,0,0,.10);
  --v3-radius: 12px;
  --v3-font: "Inter V03", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --v3-bar-h: 76px;
  /* The tick, the cross and the fold arrow from icons.svg, for places a
     stylesheet has to draw them (a checked box, a picked chip, a fold). */
  --v3-img-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  --v3-img-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
  --v3-img-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}

/* Every piece measures its width with its padding and border inside it. */
[class^="v3-"], [class*=" v3-"] { box-sizing: border-box; }

/* ---------- Type ---------- */
html.v03 body { font-family: var(--v3-font); font-size: 16px; line-height: 1.45; color: var(--v3-text);
                background: var(--v3-bg); -webkit-text-size-adjust: 100%; }
.v3-h1 { font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.v3-h2 { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 8px; }
.v3-lead { font-size: 16px; color: var(--v3-text-soft); margin: 0 0 16px; }
.v3-note { font-size: 15px; color: var(--v3-text-soft); margin: 6px 0 0; }
.v3-sub { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
          color: var(--v3-text-soft); margin: 24px 0 10px; }

/* ---------- Icons ---------- */
.v3-ico { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }

/* ---------- Focus: a black ring with a white gap, visible on yellow, white and black ---------- */
.v3-btn:focus-visible, .v3-card:focus-visible, .v3-row:focus-visible, .v3-promo:focus-visible,
.v3-chip:focus-visible, .v3-input:focus-visible, .v3-check input:focus-visible + .v3-box,
.v3-topbar a:focus-visible, .v3-topbar button:focus-visible, .v3-back:focus-visible,
.v3-group > summary:focus-visible, .v3-help:focus-visible, .v3-link:focus-visible {
  outline: 3px solid var(--v3-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--v3-white);
}
.v3-dark .v3-btn:focus-visible, .v3-dark .v3-card:focus-visible { outline-color: var(--v3-yellow); box-shadow: none; }

/* ---------- The yellow top bar: the mark and the name, then Help, Map, Sign out ---------- */
.v3-topbar { background: var(--v3-yellow); color: var(--v3-black); }
.v3-topbar .v3-wrap { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 10px; max-width: 1100px; margin: 0 auto; }
.v3-brand { display: flex; align-items: center; gap: 8px; color: var(--v3-black); text-decoration: none;
            font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; min-width: 0; min-height: 50px; overflow: hidden; }
/* The mark on a small black tile, so it stands out on the yellow (Chandler, Stage 2). */
.v3-brand img { height: 36px; width: auto; flex: none; padding: 4px 5px; background: var(--v3-black); border-radius: 8px; }
.v3-toplinks { margin-left: auto; display: flex; align-items: center; flex: none; }
.v3-toplinks a, .v3-toplinks button { display: inline-flex; align-items: center; min-height: 50px; padding: 0 6px;
  color: var(--v3-black); font: 700 16px/1 var(--v3-font); text-decoration: none; background: none; border: 0; cursor: pointer; }
.v3-toplinks a:hover, .v3-toplinks button:hover { text-decoration: underline; text-underline-offset: 3px; }
/* As on the map, only the mark shows where the name and the three links do not fit (below 380
   pixels here, where the map uses 360); the name stays for screen readers. */
@media (max-width: 379px) {
  .v3-brand .v3-brandname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v3-toplinks a, .v3-toplinks button { padding: 0 8px; }
}

/* ---------- The truck header ---------- */
/* Compact: on every page of the editor but the menu, and on signup, sign in and
   For technicians. Solid black, the caption on the left, nothing over the words,
   no stripe. It scrolls away with the page. */
.v3-truckhead { background: var(--v3-black); border-bottom: 3px solid var(--v3-yellow); }
.v3-truckhead .v3-wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                         height: 76px; padding: 0 14px; max-width: 1100px; margin: 0 auto; }
.v3-truckhead picture { display: block; flex: none; margin-left: auto; height: 62px; }
.v3-truckhead .v3-truck { display: block; height: 62px; width: auto; object-fit: contain; }
.v3-caption { color: var(--v3-yellow); font-weight: 800; font-size: 15px; line-height: 1.12; letter-spacing: .05em;
              text-transform: uppercase; margin: 0; max-width: 11em; }

/* Large: the Your Listing menu only. The stripes run behind the truck and below
   the caption, never under or over the words. */
.v3-truckhero { position: relative; overflow: hidden; background: var(--v3-black); height: 232px; }
.v3-truckhero::before, .v3-truckhero::after { content: ""; position: absolute; background: var(--v3-yellow);
  transform: rotate(-15deg); transform-origin: left center; z-index: 0; }
.v3-truckhero::before { left: -40px; width: calc(100% + 80px); height: 64px; top: 160px; }
.v3-truckhero::after { left: -40px; width: calc(100% + 80px); height: 12px; top: 236px; }
.v3-truckhero .v3-caption { position: absolute; z-index: 2; top: 14px; left: 14px; max-width: none;
  background: var(--v3-black); padding: 7px 10px; }
.v3-truckhero .v3-truck { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%);
  bottom: 16px; height: 140px; width: auto; object-fit: contain;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.55)); }
/* Narrow phones: the caption breaks after BUSINESS. so its box stays clear of the stripe. */
@media (max-width: 379px) { .v3-truckhero .v3-caption { max-width: 13.5em; } }
@media (min-width: 700px) {
  .v3-truckhero { height: 280px; }
  .v3-truckhero .v3-truck { height: 210px; }
  .v3-truckhero::before { top: 175px; height: 80px; }
  .v3-truckhero::after { top: 290px; }
}

/* ---------- Page body ---------- */
.v3-page { max-width: 640px; margin: 0 auto; padding: 14px 16px calc(var(--v3-bar-h) + 28px + env(safe-area-inset-bottom)); }
.v3-dark { background: var(--v3-black); color: var(--v3-white); }
.v3-dark > .v3-inner { max-width: 640px; margin: 0 auto; padding: 14px 12px 4px; }
.v3-back { display: inline-flex; align-items: center; min-height: 50px; padding: 0 2px; margin: 0 0 2px;
           background: none; border: 0; color: var(--v3-black); font: 700 17px/1 var(--v3-font); cursor: pointer; text-decoration: none; }
.v3-link { background: none; border: 0; padding: 0; color: var(--v3-black); font: 600 16px/1.4 var(--v3-font);
           text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 50px; }

/* Step 2 of 8, and the bar under it: setup steps only. */
.v3-stepline { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; color: var(--v3-text-soft); }
.v3-progress { height: 8px; background: #E3E3E3; border-radius: 6px; overflow: hidden; margin: 8px 0 16px; }
.v3-progress > i { display: block; height: 100%; background: var(--v3-yellow); box-shadow: inset 0 0 0 1px var(--v3-yellow-edge); border-radius: 6px; }

/* "Why this matters": the help mark on a heading. */
.v3-help { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; min-height: 44px; padding: 0 12px;
           border-radius: 22px; border: 1.5px solid var(--v3-black); background: var(--v3-white); color: var(--v3-black);
           font: 700 15px/1 var(--v3-font); letter-spacing: 0; cursor: pointer; }
.v3-help .v3-ico { width: 18px; height: 18px; }

/* ---------- Cards ---------- */
/* The big cards on the menu: a round yellow icon, a name, a line, the arrow. */
.v3-card { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 14px; margin: 0 0 12px;
           background: var(--v3-white); color: var(--v3-black); border: 0; border-radius: 14px; box-shadow: var(--v3-shadow);
           text-align: left; font: inherit; text-decoration: none; cursor: pointer; }
.v3-card .v3-round { width: 54px; height: 54px; border-radius: 50%; background: var(--v3-yellow); color: var(--v3-black);
                     display: flex; align-items: center; justify-content: center; flex: none; }
.v3-card .v3-round .v3-ico { width: 28px; height: 28px; }
.v3-card b { display: block; font-size: 19px; line-height: 1.2; font-weight: 800; margin-bottom: 4px; }
.v3-card small { display: block; font-size: 15px; line-height: 1.35; color: var(--v3-text-soft); }
.v3-card .v3-chev, .v3-row .v3-chev, .v3-promo .v3-chev { margin-left: auto; width: 22px; height: 22px; color: #444; flex: none; }
.v3-card .v3-cardbody { flex: 1 1 auto; min-width: 0; }
/* A card that holds buttons instead of being one. */
.v3-card.v3-holds { cursor: default; flex-wrap: wrap; }
.v3-card.v3-holds .v3-btns { flex: 1 0 100%; display: flex; gap: 8px; }
.v3-card.v3-holds .v3-btns .v3-btn { flex: 1 1 0; }

/* A plain white panel for anything else. */
.v3-panel { background: var(--v3-white); border-radius: var(--v3-radius); box-shadow: var(--v3-shadow); padding: 16px; margin: 0 0 12px; }

/* The rows on Edit my listing: an icon, the number and name, a line, the arrow. */
.v3-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; margin: 0 0 8px;
          background: var(--v3-white); color: var(--v3-black); border: 0; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
          text-align: left; font: inherit; cursor: pointer; text-decoration: none; }
.v3-row > .v3-ico { width: 26px; height: 26px; }
.v3-row b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.v3-row small { display: block; font-size: 15px; line-height: 1.3; color: var(--v3-text-soft); margin-top: 2px; }

/* The cards on Promote your business. */
.v3-promo { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 14px; margin: 0 0 10px;
            background: var(--v3-white); color: var(--v3-black); border-radius: 12px; box-shadow: var(--v3-shadow); text-decoration: none; }
.v3-promo > .v3-ico { width: 30px; height: 30px; }
.v3-promo b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.v3-promo small { display: block; font-size: 15px; line-height: 1.35; color: var(--v3-text-soft); margin-top: 3px; }

/* ---------- Buttons ---------- */
.v3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 18px;
          border-radius: 10px; border: 0; font: 800 18px/1.15 var(--v3-font); text-align: center; text-decoration: none; cursor: pointer;
          background: var(--v3-quiet); color: var(--v3-black); }
.v3-btn--main { background: var(--v3-black); color: var(--v3-yellow); }
.v3-btn--line { background: var(--v3-white); color: var(--v3-black); box-shadow: inset 0 0 0 2px var(--v3-black); }
.v3-btn--small { min-height: 50px; font-size: 16px; padding: 4px 14px; }
.v3-btn[disabled] { opacity: .5; cursor: default; }

/* The bottom bar: one row, fixed, clear of the phone's home bar. The main
   button takes the room left; the others wrap their words inside, never the row. */
.v3-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--v3-white); border-top: 1px solid var(--v3-line);
          box-shadow: 0 -2px 8px rgba(0,0,0,.06); }
.v3-bar .v3-wrap { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 8px; max-width: 640px; margin: 0 auto;
                   padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.v3-bar .v3-btn { flex: 0 1 auto; min-width: 0; padding: 6px 14px; }
.v3-bar .v3-btn--main { flex: 1 1 0; }
.v3-bar .v3-btn:only-child { flex: 1 1 auto; }
@media (max-width: 359px) { .v3-bar .v3-btn { font-size: 16px; padding: 6px 10px; } }

/* ---------- Fields ---------- */
.v3-field { display: block; margin: 0 0 16px; }
.v3-label { display: block; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.v3-input { display: block; width: 100%; box-sizing: border-box; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--v3-field-line);
            border-radius: 10px; background: var(--v3-white); color: var(--v3-black); font: 400 18px/1.2 var(--v3-font); }
.v3-input::placeholder { color: #767676; }
/* A dollar amount: the $ inside the box, the number typed after it. */
.v3-money { position: relative; display: block; }
.v3-money::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font: 600 18px/1 var(--v3-font); color: var(--v3-black); pointer-events: none; }
.v3-money .v3-input { padding-left: 32px; }
.v3-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 359px) { .v3-row2 { grid-template-columns: 1fr; gap: 0; } }

/* A checkbox row in the board's style: a square that goes yellow with a black tick. */
.v3-check { display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px; margin: 0 0 8px; box-sizing: border-box;
            background: var(--v3-white); border: 1px solid var(--v3-line); border-radius: 10px; cursor: pointer; }
.v3-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v3-box { width: 26px; height: 26px; flex: none; border: 2px solid #8C8C8C; border-radius: 5px; background: var(--v3-white);
          display: flex; align-items: center; justify-content: center; color: transparent; }
.v3-box .v3-ico { width: 18px; height: 18px; }
.v3-check input:checked + .v3-box { background: var(--v3-yellow); border-color: var(--v3-black); color: var(--v3-black); }
.v3-check b { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.v3-check small { display: block; font-size: 15px; color: var(--v3-text-soft); margin-top: 2px; }

/* ---------- Chips: white with a black line; picked, yellow with a black tick ---------- */
.v3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 50px; padding: 6px 16px; box-sizing: border-box;
           border-radius: 10px; border: 1.5px solid var(--v3-black); background: var(--v3-white); color: var(--v3-black);
           font: 600 16px/1.2 var(--v3-font); text-align: left; cursor: pointer; }
.v3-chip .v3-ico { width: 18px; height: 18px; display: none; }
.v3-chip.on, .v3-chip[aria-pressed="true"] { background: var(--v3-yellow); font-weight: 700; padding-left: 12px; }
.v3-chip.on .v3-ico, .v3-chip[aria-pressed="true"] .v3-ico { display: inline-block; }
/* Held: a job that is also a specialty, so it stays checked here. */
.v3-chip.held { background: var(--v3-yellow); border-style: dashed; }
/* Jobs you don't take: picked, black with white words and a cross. */
.v3-chip.no.on { background: var(--v3-black); color: var(--v3-white); }

/* A group of jobs that folds open, saying how many are picked. */
.v3-group { background: var(--v3-white); border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.08); margin: 0 0 8px; }
.v3-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 14px;
                      font-size: 17px; font-weight: 700; cursor: pointer; }
.v3-group > summary::-webkit-details-marker { display: none; }
.v3-group > summary .v3-count { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--v3-text-soft); white-space: nowrap; }
.v3-group > summary .v3-count.some { color: var(--v3-black); background: var(--v3-yellow); border-radius: 12px; padding: 3px 9px; }
.v3-group > summary .v3-ico { width: 22px; height: 22px; transition: transform .15s; }
.v3-group[open] > summary .v3-ico { transform: rotate(180deg); }
.v3-group .v3-chips { padding: 2px 14px 14px; }
.v3-search { position: relative; display: block; }
.v3-search .v3-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #555; pointer-events: none; }
.v3-search .v3-input { padding-left: 44px; }

/* ---------- Notes and warnings keep their own colors ---------- */
.v3-warn { background: var(--v3-warn-wash); border-left: 5px solid var(--v3-warn); color: var(--v3-warn-ink); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }
.v3-bad { background: var(--v3-bad-wash); border-left: 5px solid var(--v3-bad); color: #5C1410; border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; }

/* ---------- Respect a request for less movement ---------- */
@media (prefers-reduced-motion: reduce) { .v3-group > summary .v3-ico { transition: none; } }