/* SKIN: auto (auto repair, state inspection, alignment, tire and detailing shops)
   Feel: dark, mechanical, confident. Garage-floor contrast, sharp edges, big
   condensed headings, a light "paper" with deep-navy alternate sections.

   PILOTED on karnon-automotive (2026-09-03) — the first real render of this
   skin. Everything below the :root block was added in that pass; the original
   file was 16 lines of tokens that had never met a page. Brand colors come
   from config (the pilot runs navy #0A2A5E primary / gold #F2B233 accent /
   near-black navy #0B1426 dark, sampled from the client's own shield logo).
   First use on a NON-blue/gold brand: re-measure every accent surface's
   computed contrast (site-factory/CLAUDE.md) — this skin sets --accent-text
   to var(--dark) on purpose because the pilot's gold measures 9.6:1 under
   navy text and ~2.1:1 under white; a site with a DARK accent must set
   `accent_text` in its config.php. */
:root{
  --paper:#f5f7fa; --ink:#0f172a; --muted:#4b5563;
  --radius:8px;
  --shadow:0 4px 14px rgba(11,20,38,.14);
  --tile-border:1px solid #dde3ec;
  --header-line:3px solid var(--primary);
  /* Alternate sections go DARK in this vertical (the one skin that does).
     Every rule below that touches .section-alt exists to keep text and tiles
     readable on it — base.css assumes a light alt background everywhere. */
  --section-bg-alt:#0b1426;
  --accent-text:var(--dark);
  /* Photography in this trade is dark metal, bright headlights and white
     shop walls in the same frame. Floor at .55 so a white wall behind the h1
     still clears AA; the middle dips less than base so a bright hood does not
     wash out the eyebrow. */
  --hero-overlay:linear-gradient(180deg,rgba(6,12,26,.82),rgba(6,12,26,.55) 50%,rgba(6,12,26,.86));
}

/* ---- type: condensed uppercase display, wide-tracked micro eyebrows ---- */
h1,h2{text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(2.5rem,6vw,4.4rem);line-height:.98}
h2{font-size:clamp(1.9rem,4vw,2.9rem)}
h3{letter-spacing:0}
.eyebrow{letter-spacing:.18em;font-size:.76rem;font-weight:700}
/* --accent-ink: the accent used as TEXT on the light paper. The pilot's gold
   measures 1.9:1 on white — a fill color, not an ink. Mixing 45% of --dark
   in lands it at 5.2:1 while keeping the hue. Fallback is --primary, which
   any brand's primary already has to clear for links. */
:root{--accent-ink:var(--primary)}
@supports (color:color-mix(in srgb,red,blue)){
  :root{--accent-ink:color-mix(in srgb, var(--accent) 55%, var(--dark))}
}

/* ---- buttons: squared, solid, no drop shadow, lift on hover ----
   Order matters TWICE (the CSS ordering trap, site-factory/CLAUDE.md): this
   skin loads after base.css, so `.btn` beats base's `.btn-accent`/
   `.btn-primary` at equal specificity and the variants must restate their
   FULL look after it; and the variant hovers are written after `.btn:hover`
   so they win that tie too. Same lesson laundry.css/collective.css banked. */
.btn{border-radius:6px;border-color:transparent;box-shadow:none;background:#e6ebf2;color:var(--dark);
  font-weight:700;letter-spacing:.01em}
.btn-primary{background:var(--primary);border-color:transparent;color:#fff}
.btn-accent{background:var(--accent);border-color:transparent;color:var(--accent-text,var(--dark))}
.btn:hover{background:#d9e0ea;transform:translateY(-2px)}
.btn-primary:hover{background:var(--dark);border-color:transparent;color:#fff}
.btn-accent:hover{background:var(--accent);border-color:transparent;color:var(--accent-text,var(--dark));
  filter:brightness(1.06)}
.mobile-nav a.mobile-cta{border-color:transparent}
.menu-btn{border-color:transparent;background:#e6ebf2;box-shadow:none;border-radius:6px}
/* 44px tap target for the one control every phone visitor must hit. MUST
   stay inside this media query — base.css hides .menu-btn on desktop. */
@media (max-width:860px){.menu-btn{min-height:44px;display:inline-flex;align-items:center}}

/* ---- header: the pilot's header CTA is a phone number, which is longer
   than "Get a free quote". Keep labels one-line and drop the small phone
   link in the 860–1040px band (it duplicates the CTA on this vertical). ---- */
.main-nav a{white-space:nowrap}
@media (max-width:1040px){.tel-mini{display:none}}
@media (max-width:960px){.main-nav{gap:14px}.hdr-cta .btn{padding:.6rem 1rem}}

/* ---- dark alternate sections: everything base.css paints for a LIGHT alt
   background restated for a dark one ---- */
.section-alt{color:#e8ecf3}
.section-alt .sub{color:#b8c2d1}
.section-alt .eyebrow{color:var(--accent)}
.section-alt h2,.section-alt h3{color:#fff}
.section-alt .tile{background:#141f36;border-color:#263352;color:#e8ecf3;box-shadow:none}
.section-alt .tile h3{color:#fff}
.section-alt .tile p{color:#b8c2d1}
.section-alt .tile a{color:#fff}
.section-alt .faq details{border-color:#263352}
.section-alt .faq summary{color:#fff}
.section-alt .faq summary::after{color:var(--accent)}
.section-alt .faq p{color:#b8c2d1}
.section-alt .steps p{color:#b8c2d1}
.section-alt .steps h3{color:#fff}
.section-alt .ticks li::before{background:var(--accent)}
.section-alt a{color:#fff}
.section-alt .btn{background:#1b2740;color:#fff}
.section-alt .btn:hover{background:#263352}
.section-alt .btn-accent{background:var(--accent);color:var(--accent-text,var(--dark))}
.section-alt .btn-accent:hover{background:var(--accent)}
.section-alt .btn-primary{background:#fff;color:var(--dark)}
.section-alt .btn-primary:hover{background:#e6ebf2;color:var(--dark)}
.section-alt .reviews-more a{color:var(--accent)}

/* ---- tiles: square-cornered cards with a thin accent rule that grows on
   hover; photo-topped variant for destination grids ---- */
.tile{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.tile::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);
  transition:width .35s ease}
@media (hover:hover){
  .tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,20,38,.16)}
  .tile:hover::after{width:100%}
}
@media (prefers-reduced-motion:reduce){.tile,.tile::after{transition:none}.tile:hover{transform:none}}
/* height:auto is NOT optional next to aspect-ratio — every fleet <img> carries
   HTML width/height attributes for CLS and the browser's presentational hint
   keeps the box pinned to the raw height attribute otherwise (the aph /
   retail.css lesson, 2026-09-02). */
.tile > img{margin:-1.6rem -1.5rem 1.1rem;width:calc(100% + 3rem);max-width:none;height:auto;
  aspect-ratio:16/10;object-fit:cover;display:block}
.tile h3{color:var(--primary);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.section-alt .tile h3{color:#fff}

/* ---- tile icon badges (monoline SVG inside) ----
   Markup: <span class="tico" aria-hidden="true"><svg …></svg></span> */
.tico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  background:var(--primary);color:#fff;border-radius:8px;margin-bottom:.8rem}
.tico svg{width:26px;height:26px}
.section-alt .tico{background:var(--accent);color:var(--accent-text,var(--dark))}

/* ---- footer accent lift: base.css paints footer link hovers and the
   "see all areas" link in --accent on --dark, which assumes a light accent.
   Lift toward white so any brand's accent clears AA there. ---- */
.foot-areas-all,.foot-areas a:hover,.foot-links a:hover{
  color:var(--accent);
  color:color-mix(in srgb, var(--accent) 70%, #fff);
}

/* ---- hero: taller, headline-forward, no form (walk-in / phone verticals) ---- */
.hero{min-height:78vh}
.hero .sub{font-size:1.12rem;max-width:52ch}
.hero .cta-row .btn-big{padding:1rem 1.6rem;font-size:1.08rem}

/* ================= AUTO-VERTICAL COMPONENTS =================
   Reusable pieces built for the karnon-automotive pilot. Each is inert until
   a page writes the markup. JS for the interactive ones (open-now pill,
   dashboard decoder, symptom finder) lives in that site's own
   assets/js/<site>.js — site.js is fleet-shared and stays generic. */

/* --- open-now status pill: <span class="status-pill" data-hours='…'> ---
   Neutral until JS decides; .is-open / .is-closed set by the page script. */
.status-pill{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.42rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.status-pill::before{content:"";width:9px;height:9px;border-radius:50%;background:#9aa3b2;flex:0 0 auto}
.status-pill.is-open::before{background:#35d07f;box-shadow:0 0 0 4px rgba(53,208,127,.25)}
.status-pill.is-closed::before{background:#ff6b6b}
.status-pill small{font-weight:600;letter-spacing:0;text-transform:none;opacity:.85}
/* on the light paper (contact page) */
.status-pill.on-paper{background:#eef2f7;color:var(--ink);border-color:#dde3ec;backdrop-filter:none}

/* --- stat strip: big condensed numerals --- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:2.4rem}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:1.3rem 1.2rem;border:var(--tile-border);border-radius:var(--radius);background:#fff}
.section-alt .stat{background:#141f36;border-color:#263352}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3rem);
  line-height:1;color:var(--primary);letter-spacing:.01em}
.section-alt .stat b{color:var(--accent)}
.stat span{display:block;margin-top:.4rem;font-size:.86rem;color:var(--muted);line-height:1.4}
.section-alt .stat span{color:#b8c2d1}

/* --- dashboard warning-light decoder ---
   <div class="dash"><div class="dash-lights" role="tablist">
     <button class="dash-light" role="tab" aria-selected="true" aria-controls="…">
       <span class="dash-ico"><svg …></svg></span><span>Check engine</span></button>…
   </div><div class="dash-panels"><div class="dash-panel" role="tabpanel" id="…">…</div>…</div></div> */
.dash{margin-top:2.2rem;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:26px;align-items:start}
@media (max-width:860px){.dash{grid-template-columns:minmax(0,1fr)}}
.dash-lights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:520px){.dash-lights{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-light{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem .5rem;
  background:#0f1a30;border:1px solid #263352;border-radius:var(--radius);color:#b8c2d1;
  font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;text-align:center;
  transition:border-color .2s ease,color .2s ease,transform .2s ease}
.dash-light .dash-ico{width:42px;height:42px;color:#6c7a94;transition:color .2s ease,filter .2s ease}
.dash-light .dash-ico svg{width:100%;height:100%}
.dash-light:hover{border-color:#3a4b70;color:#fff}
.dash-light[aria-selected="true"]{border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.dash-light[aria-selected="true"] .dash-ico{color:var(--dash-color,var(--accent));
  filter:drop-shadow(0 0 8px var(--dash-color,var(--accent)))}
.dash-light:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dash-panel{display:none;background:#141f36;border:1px solid #263352;border-radius:var(--radius);padding:1.6rem 1.6rem 1.5rem}
.dash-panel.is-active{display:block}
.dash-panel h3{color:#fff;font-size:1.3rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.02em}
.dash-panel .dash-level{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .6rem;border-radius:4px;margin-bottom:.9rem}
.dash-level.l-now{background:#ff6b6b;color:#1a0505}
.dash-level.l-soon{background:var(--accent);color:var(--accent-text,var(--dark))}
.dash-level.l-info{background:#3b82f6;color:#fff}
.dash-panel p{color:#b8c2d1;font-size:.95rem}
.dash-panel p + p{margin-top:.6rem}
.dash-panel .dash-do{margin-top:1rem;padding-top:1rem;border-top:1px solid #263352;color:#fff;font-weight:600}

/* --- symptom finder: pick what the car is doing, see the likely service --- */
.symptoms{margin-top:2.2rem}
.symptom-list{display:flex;flex-wrap:wrap;gap:10px}
.symptom-btn{font:inherit;font-size:.9rem;font-weight:600;padding:.6rem 1rem;border-radius:999px;
  border:1.5px solid #cfd7e3;background:#fff;color:var(--ink);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.symptom-btn:hover{border-color:var(--primary);transform:translateY(-1px)}
.symptom-btn[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.symptom-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.symptom-result{margin-top:1.4rem;padding:1.4rem 1.5rem;border-radius:var(--radius);
  background:#fff;border:var(--tile-border);border-left:5px solid var(--accent)}
.symptom-result h3{font-size:1.15rem;margin-bottom:.35rem}
.symptom-result p{font-size:.95rem;color:var(--muted)}
.symptom-result .sr-cta{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:10px}
.symptom-result[hidden]{display:none}

/* --- metro / route strip: a horizontal list of stops, current stop marked --- */
.route{margin-top:1.6rem;display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:.4rem 0 .8rem;
  scrollbar-width:thin}
.route li{list-style:none;flex:1 0 72px;position:relative;text-align:center;font-size:.72rem;font-weight:600;
  color:var(--muted);padding-top:22px}
.route li::before{content:"";position:absolute;top:6px;left:0;right:0;height:4px;background:#cfd7e3}
.route li:first-child::before{left:50%}
.route li:last-child::before{right:50%}
.route li::after{content:"";position:absolute;top:2px;left:50%;width:12px;height:12px;margin-left:-6px;
  border-radius:50%;background:#fff;border:3px solid #c8102e}
.route li.is-here{color:var(--ink);font-weight:800}
.route li.is-here::after{background:var(--accent);border-color:var(--dark);width:16px;height:16px;top:0;margin-left:-8px}
.section-alt .route li{color:#b8c2d1}
.section-alt .route li::before{background:#263352}
.section-alt .route li.is-here{color:#fff}

/* --- sticky mobile action bar: Call / Directions (phones only) ---
   <div class="callbar"><a href="tel:…">Call</a><a href="maps…">Directions</a></div>
   The page also sets body{padding-bottom} so the bar never covers the footer. */
.callbar{display:none}
@media (max-width:860px){
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:98;display:grid;grid-template-columns:1fr 1fr;
    gap:1px;background:#263352;border-top:1px solid #263352;
    padding-bottom:env(safe-area-inset-bottom)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;
    font-weight:800;font-size:1rem;text-decoration:none;letter-spacing:.02em;text-transform:uppercase;
    font-family:var(--display)}
  .callbar a:first-child{background:var(--accent);color:var(--accent-text,var(--dark))}
  .callbar a:last-child{background:var(--dark);color:#fff}
  .callbar svg{width:20px;height:20px}
  body.has-callbar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* --- hours table on the contact page (light ground) --- */
.hours-table{list-style:none;margin-top:.6rem;max-width:360px;border:var(--tile-border);border-radius:var(--radius);
  overflow:hidden;background:#fff}
.hours-table li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem .9rem;font-size:.93rem;
  border-bottom:1px solid #eef2f7}
.hours-table li:last-child{border-bottom:0}
.hours-table li.is-today{background:#fff7e0;font-weight:700}
.hours-table li span:last-child{white-space:nowrap}

/* --- language chips --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;padding:.4rem .8rem;
  border-radius:999px;background:#eef2f7;color:var(--ink);border:1px solid #dde3ec}
.section-alt .chip{background:#141f36;color:#fff;border-color:#263352}
.hero .chip{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22)}

/* --- big-number checklist (what the inspection covers) --- */
.checklist{counter-reset:ck;list-style:none;margin-top:1.8rem;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px}
@media (max-width:700px){.checklist{grid-template-columns:minmax(0,1fr)}}
.checklist li{counter-increment:ck;position:relative;padding:.2rem 0 .2rem 3rem;font-size:.95rem}
.checklist li::before{content:counter(ck,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--accent-ink)}
.checklist li b{display:block;font-weight:700;color:var(--ink)}
.checklist li span{color:var(--muted);font-size:.9rem}
.section-alt .checklist li b{color:#fff}
.section-alt .checklist li span{color:#b8c2d1}
.section-alt .checklist li::before{color:var(--accent)}

/* --- quote block (real customer words) --- */
.quote{position:relative;padding:1.6rem 1.6rem 1.4rem 2rem;border-radius:var(--radius);background:#fff;
  border:var(--tile-border);border-left:5px solid var(--primary)}
.quote p{font-size:1.02rem;color:var(--ink)}
.quote footer{margin-top:.8rem;font-size:.84rem;color:var(--muted);font-weight:600}
.quote .stars{color:var(--accent-ink);letter-spacing:.1em;font-size:.9rem;display:block;margin-bottom:.5rem}
.section-alt .quote{background:#141f36;border-color:#263352;border-left-color:var(--accent)}
.section-alt .quote p{color:#fff}
.section-alt .quote footer{color:#b8c2d1}
.section-alt .quote .stars{color:var(--accent)}

/* --- per-site opt-ins via <body class="..."> (added for karnon-automotive,
   2026-09-10). base.css owns the header and is fleet-shared, so a client
   who wants a different header treatment opts in from the page's <body>
   tag instead of editing shared CSS. Each rule is a no-op unless the class
   is present.
   .logo-lg     bigger brand mark (66px desktop / 52px mobile). The mobile
                nav panel is pinned under the header at a fixed 66px in
                base.css, so it moves down to match the taller header here.
   .hdr-tel-off hide the small phone-number text beside the header CTA -
                for a site whose CTA button already IS the phone number,
                the text next to it just repeats it. */
.logo-lg .brand img{height:66px}
.hdr-tel-off .tel-mini{display:none}
@media (max-width:860px){
  .logo-lg .brand img{height:52px}
  .logo-lg .mobile-nav{top:79px;max-height:calc(100vh - 79px)}
}