/* ============================================================
   TheShopCritics

   Palette is derived from a vehicle inspection sheet: pass-green,
   caution-amber, attention-red, on the pale green of a carbon copy.
   Bootstrap 5.3.8 is loaded from CDN and themed by remapping its
   --bs-* variables onto the --sc-* tokens below. No Sass build.

   Reference mockup: /design/shopcritics-home.html
   ============================================================ */
:root{
  --sc-paper:#E7EBE6;      /* carbon-copy green-gray — page */
  --sc-sheet:#FBFCFA;      /* a fresh sheet — cards */
  --sc-stub:#EFF2ED;       /* the tinted stub half of a work order */
  --sc-ink:#15191B;        /* cast iron */
  --sc-ink-2:#4A5551;
  --sc-ink-3:#78837F;
  --sc-line:#C9D1C8;
  --sc-perf:#9DAB9C;       /* the tear line — must actually read */
  --sc-go:#1D6B48;         /* inspection PASS */
  --sc-go-dk:#154F35;
  --sc-amber:#D98A12;      /* CAUTION */
  --sc-red:#B23A2C;        /* ATTENTION */

  --sc-display:"Archivo",system-ui,sans-serif;
  --sc-voice:"Source Serif 4",Georgia,serif;
  --sc-data:"IBM Plex Mono",ui-monospace,monospace;

  --sc-shadow:0 1px 2px rgba(21,25,27,.05), 0 10px 30px -16px rgba(21,25,27,.22);
  --sc-shadow-lift:0 2px 4px rgba(21,25,27,.06), 0 22px 46px -20px rgba(21,25,27,.30);

  --bs-body-bg:var(--sc-paper);
  --bs-body-color:var(--sc-ink);
  --bs-body-font-family:var(--sc-display);
  --bs-border-color:var(--sc-line);
  --bs-link-color:var(--sc-go-dk);
  --bs-link-hover-color:var(--sc-ink);
  --bs-focus-ring-color:rgba(29,107,72,.35);
}

body{
  font-family:var(--sc-display);
  background:var(--sc-paper);
  color:var(--sc-ink);
  -webkit-font-smoothing:antialiased;
}

/* Match the container's side padding to the widest row gutter in use (g-5).
   Without this, .row.g-5's -24px margins outrun the container's 12px padding
   and the page scrolls sideways on small screens. .row resets --bs-gutter-x
   itself, so this does not leak into rows that want a smaller gutter. */
.container-xl{ --bs-gutter-x:3rem; }

/* --- type roles -------------------------------------------- */
.sc-eyebrow{
  font-family:var(--sc-data); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sc-ink-3);
}
.sc-data{ font-family:var(--sc-data); font-variant-numeric:tabular-nums; }
.sc-emph{ color:var(--sc-ink); font-weight:700; }
.sc-underline{ text-decoration:underline; text-underline-offset:3px; }

.sc-h1{
  font-weight:900; font-size:clamp(2.25rem,5vw,3.55rem);
  line-height:1.02; letter-spacing:-.035em; text-wrap:balance;
}
.sc-h2{
  font-weight:800; font-size:clamp(1.5rem,2.7vw,2.05rem);
  line-height:1.08; letter-spacing:-.026em; text-wrap:balance;
}
.sc-lede{
  font-family:var(--sc-voice); font-size:clamp(1rem,1.35vw,1.12rem);
  line-height:1.62; color:var(--sc-ink-2); max-width:34em;
}

/* --- rhythm (deliberately uneven, not one uniform band) ----- */
.sc-band{ padding-block:clamp(3.25rem,6vw,5.25rem); }
.sc-band-lg{ padding-block:clamp(4rem,8vw,7rem); }
.sc-band-sm{ padding-block:clamp(2.25rem,3.5vw,3rem); }
.sc-rule{ border:0; border-top:1px solid var(--sc-line); opacity:1; margin:0; }

/* --- nav --------------------------------------------------- */
.sc-nav{
  background:rgba(231,235,230,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sc-line); position:sticky; top:0; z-index:20;
}
.sc-brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--sc-ink); }
/* The logo art is 2:1. width/height attributes on the <img> reserve its space before it loads. */
.sc-logo{ display:block; width:170px; height:auto; border:0; border-radius:12px; }
@media (min-width:768px){ .sc-logo{ width:230px; } }
.sc-brand-mark{
  width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center;
  background:var(--sc-go); color:#fff; border-radius:5px;
}
.sc-brand-name{ font-weight:900; letter-spacing:-.025em; font-size:1.02rem; }
.sc-brand-name span{ color:var(--sc-ink-3); font-weight:600; }
.sc-navlink{ font-size:.875rem; font-weight:600; color:var(--sc-ink-2); text-decoration:none; }
.sc-navlink:hover{ color:var(--sc-ink); }

/* --- buttons ----------------------------------------------- */
.sc-btn{
  font-family:var(--sc-display); font-weight:700; font-size:.9rem;
  border-radius:7px; padding:.72rem 1.25rem; border:1.5px solid transparent;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.sc-btn-go{ background:var(--sc-go); color:#fff; }
.sc-btn-go:hover{ background:var(--sc-go-dk); color:#fff; }
.sc-btn-quiet{ background:transparent; color:var(--sc-ink); border-color:var(--sc-line); }
.sc-btn-quiet:hover{ border-color:var(--sc-ink); color:var(--sc-ink); }
.sc-btn-sm{ padding:.5rem .9rem; font-size:.84rem; }

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--sc-go); outline-offset:2px; border-radius:4px;
}

/* --- hero search ------------------------------------------- */
.sc-find{
  display:flex; gap:.4rem; align-items:center;
  background:var(--sc-sheet); border:1.5px solid var(--sc-line);
  border-radius:9px; padding:.35rem; max-width:26rem;
  transition:border-color .15s ease;
}
.sc-find:focus-within{ border-color:var(--sc-go); }
.sc-find input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:0;
  font-family:var(--sc-display); font-size:.95rem; font-weight:500;
  padding:.45rem .6rem; color:var(--sc-ink);
}
.sc-find input::placeholder{ color:var(--sc-ink-3); font-weight:500; }

/* ============================================================
   SIGNATURE — the review as a two-part work order.
   Service-record stub on top, the customer's words below the tear.
   Markup lives in Components/Shared/ReviewCard.razor.
   ============================================================ */
.ro{
  background:var(--sc-sheet);
  border:1.5px solid var(--sc-line);
  border-radius:10px;
  box-shadow:var(--sc-shadow);
  overflow:visible;
  height:100%;
  display:flex; flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.ro:hover{ box-shadow:var(--sc-shadow-lift); transform:translateY(-2px); }

.ro-stub{ background:var(--sc-stub); border-radius:8.5px 8.5px 0 0; padding:.9rem 1.15rem 1rem; }

/* The location drops to its own line rather than crushing the shop name —
   these cards sit in narrow columns as often as wide ones. */
.ro-stub-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2rem .9rem; }
.ro-shop{
  flex:1 1 11rem;
  font-weight:800; font-size:.9rem; letter-spacing:-.015em;
  line-height:1.25; color:var(--sc-ink); margin:0; text-decoration:none;
}
.ro-shop:hover{ color:var(--sc-go-dk); text-decoration:underline; text-underline-offset:2px; }
.ro-where{
  flex:0 0 auto;
  font-family:var(--sc-data); font-size:.66rem; letter-spacing:.09em;
  color:var(--sc-ink-3); text-transform:uppercase; white-space:nowrap;
}
.ro-record{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin-top:.7rem;
  font-family:var(--sc-data); font-size:.66rem; letter-spacing:.07em;
  color:var(--sc-ink-3); text-transform:uppercase;
}
.ro-record-gap{ margin-top:.5rem; }
.ro-verified{
  font-family:var(--sc-data); font-size:.66rem; letter-spacing:.09em;
  color:var(--sc-go); text-transform:uppercase; font-weight:500;
  display:inline-flex; align-items:center; gap:.32rem;
}
.ro-unsolicited{
  font-family:var(--sc-data); font-size:.66rem; letter-spacing:.09em;
  color:var(--sc-ink-3); text-transform:uppercase;
}

/* the tear — dashes drawn as a gradient so length and gap are exact */
.ro-perf{
  position:relative; height:2px;
  background:repeating-linear-gradient(90deg, var(--sc-perf) 0 8px, transparent 8px 15px);
}
.ro-perf::before,
.ro-perf::after{
  content:""; position:absolute; top:-11.5px;
  width:22px; height:22px; border-radius:50%;
  background:var(--sc-paper); border:1.5px solid var(--sc-line);
}
.ro-perf::before{ left:-12.5px; clip-path:inset(0 0 0 48%); }
.ro-perf::after { right:-12.5px; clip-path:inset(0 48% 0 0); }

.ro-body{ padding:1.2rem 1.15rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.ro-title{
  font-weight:800; font-size:1.12rem; letter-spacing:-.022em;
  line-height:1.18; margin:.6rem 0 .55rem;
}
.ro-text{ font-family:var(--sc-voice); font-size:.975rem; line-height:1.6; color:var(--sc-ink-2); margin:0; }
.ro-sign{
  margin-top:auto; padding-top:1.1rem;
  font-family:var(--sc-data); font-size:.7rem; letter-spacing:.06em;
  color:var(--sc-ink-3); text-transform:uppercase;
}

/* the hero copy sits on the counter, slightly askew.
   Kept square below lg — the tilt reads as a mistake at phone width. */
.ro-hero{ box-shadow:var(--sc-shadow-lift); max-width:29rem; margin-inline:auto; }
@media (min-width:992px){
  .ro-hero{ transform:rotate(-1.15deg); }
  .ro-hero:hover{ transform:rotate(0deg) translateY(-2px); }
}

/* --- rating ------------------------------------------------ */
.sc-stars{ color:var(--sc-amber); font-size:.95rem; letter-spacing:.12em; line-height:1; }
.sc-stars .off{ color:var(--sc-line); }

/* --- rating distribution ----------------------------------- */
.sc-dist{ display:flex; flex-direction:column; gap:.55rem; }
.sc-dist-row{ display:grid; grid-template-columns:2.6rem 1fr 7rem; align-items:center; gap:.85rem; }
.sc-dist-k{ font-family:var(--sc-data); font-size:.78rem; color:var(--sc-ink-2); font-variant-numeric:tabular-nums; }
.sc-dist-track{ height:12px; background:var(--sc-stub); border:1px solid var(--sc-line); border-radius:3px; overflow:hidden; }
.sc-dist-fill{ height:100%; }
.sc-dist-v{
  font-family:var(--sc-data); font-size:.72rem; color:var(--sc-ink-3);
  font-variant-numeric:tabular-nums; text-align:right; letter-spacing:.03em;
}
.fill-go{ background:var(--sc-go); }
.fill-amber{ background:var(--sc-amber); }
.fill-red{ background:var(--sc-red); }

.sc-ledger{
  font-family:var(--sc-data); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--sc-ink-3);
}

/* --- steps (a real sequence, so numbering carries meaning) -- */
.sc-step{ border-top:2px solid var(--sc-ink); padding-top:.85rem; height:100%; }
.sc-step-n{ font-family:var(--sc-data); font-size:.7rem; font-weight:600; letter-spacing:.11em; color:var(--sc-go); }
.sc-step-h{ font-weight:800; font-size:1rem; letter-spacing:-.02em; margin:.45rem 0 .35rem; line-height:1.22; }
.sc-step-p{ font-family:var(--sc-voice); font-size:.92rem; line-height:1.55; color:var(--sc-ink-2); margin:0; }

/* --- state chips ------------------------------------------- */
.sc-chip{
  display:inline-flex; align-items:baseline; gap:.5rem;
  background:var(--sc-sheet); border:1.5px solid var(--sc-line);
  border-radius:7px; padding:.5rem .8rem; text-decoration:none; color:var(--sc-ink);
  transition:border-color .15s ease,background-color .15s ease;
}
.sc-chip:hover{ border-color:var(--sc-go); background:#fff; color:var(--sc-ink); }
.sc-chip-st{ font-weight:800; font-size:.88rem; letter-spacing:-.012em; }
.sc-chip-n{ font-family:var(--sc-data); font-size:.7rem; color:var(--sc-ink-3); font-variant-numeric:tabular-nums; }

/* --- shop owner block -------------------------------------- */
.sc-owner{ background:var(--sc-ink); color:#E4EAE3; border-radius:12px; padding:clamp(1.75rem,4vw,2.9rem); }
.sc-owner .sc-h2{ color:#fff; }
.sc-owner .sc-lede{ color:#A7B4AD; }
.sc-owner-eyebrow{ color:#8DA396; }

/* --- footer ------------------------------------------------ */
.sc-foot{ border-top:1px solid var(--sc-line); }
.sc-foot-h{ font-family:var(--sc-data); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--sc-ink-3); margin-bottom:.75rem; }
.sc-foot a{ color:var(--sc-ink-2); text-decoration:none; font-size:.875rem; font-weight:600; display:block; padding:.2rem 0; }
.sc-foot a:hover{ color:var(--sc-ink); }

/* --- internal shop lookup ---------------------------------- */
.sc-input{
  width:100%; margin-top:.4rem;
  background:var(--sc-sheet); border:1.5px solid var(--sc-line); border-radius:8px;
  font-family:var(--sc-display); font-size:.95rem; font-weight:500;
  padding:.6rem .75rem; color:var(--sc-ink); outline:0;
  transition:border-color .15s ease;
}
.sc-input:focus{ border-color:var(--sc-go); }
.sc-input::placeholder{ color:var(--sc-ink-3); font-weight:500; }

.sc-note{
  background:var(--sc-stub); border:1.5px solid var(--sc-line); border-radius:9px;
  padding:1rem 1.15rem; font-family:var(--sc-voice); font-size:.975rem;
  line-height:1.55; color:var(--sc-ink-2); max-width:44rem;
}

.sc-cand{
  background:var(--sc-sheet); border:1.5px solid var(--sc-line); border-radius:10px;
  padding:1rem 1.1rem 1.1rem; height:100%;
  display:flex; flex-direction:column;
  box-shadow:var(--sc-shadow);
}
.sc-cand-name{ font-weight:800; font-size:1rem; letter-spacing:-.02em; line-height:1.2; margin:0; }
.sc-cand-dist{
  font-family:var(--sc-data); font-size:.68rem; color:var(--sc-ink-3);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.sc-cand-addr{ font-family:var(--sc-voice); font-size:.9rem; line-height:1.45; color:var(--sc-ink-2); margin-top:.45rem; }
.sc-cand-meta{
  display:flex; flex-wrap:wrap; gap:.3rem .8rem; margin-top:auto;
  font-family:var(--sc-data); font-size:.68rem; letter-spacing:.05em; color:var(--sc-ink-3);
}
.sc-cand-src{ text-transform:uppercase; }
.sc-cand-tag{
  display:inline-block; font-family:var(--sc-data); font-size:.66rem;
  letter-spacing:.08em; text-transform:uppercase; border-radius:5px; padding:.35rem .6rem;
}
.sc-cand-tag-in{ background:rgba(29,107,72,.12); color:var(--sc-go-dk); }

/* --- page-load reveal -------------------------------------- */
@keyframes sc-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes sc-rise-tilt{ from{ opacity:0; transform:translateY(18px) rotate(-3deg); } to{ opacity:1; transform:rotate(-1.15deg); } }
.sc-rise{ animation:sc-rise .6s cubic-bezier(.22,.7,.3,1) both; }
/* below lg the card is square, so it rises without the tilt */
.sc-rise-tilt{ animation:sc-rise .72s cubic-bezier(.22,.7,.3,1) both; }
@media (min-width:992px){
  .sc-rise-tilt{ animation:sc-rise-tilt .72s cubic-bezier(.22,.7,.3,1) both; }
}
.sc-d1{ animation-delay:.05s } .sc-d2{ animation-delay:.13s }
.sc-d3{ animation-delay:.21s } .sc-d4{ animation-delay:.30s }

@media (prefers-reduced-motion:reduce){
  .sc-rise,.sc-rise-tilt{ animation:none; }
  .ro-hero{ transform:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}