/*
 * The public inspection page.
 *
 * These styles deliberately mirror the main site (index.html): same tokens,
 * same component names, same shapes, so the page reads as part of
 * aiwebmechanic.com rather than a tool bolted onto it. If the site's palette or
 * buttons change, change them here too — this block is the seam between them.
 *
 * Everything from "the certificate" onwards styles markup rendered by app.js,
 * which is shared with the private console and knows nothing about this page.
 */

/* ------------------------------------------------------- site design system */

:root {
  --ink:        #12181b;   /* graphite steel — dark sections */
  --ink-soft:   #1a2226;
  --panel:      #1f292e;
  --line-dark:  #2d3a40;
  --steel:      #93a5a2;
  --paper:      #eef1ef;
  --card:       #ffffff;
  --line:       #d7ded8;
  --txt:        #22302d;
  --mut:        #5c6b67;
  --green:      #14966a;
  --green-deep: #0d7452;
  --green-hi:   #33cf90;
  --red:        #e5484d;
  --amber:      #edb440;
  --blue:       #3b6ea5;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --shadow-card: 0 1px 2px rgba(18,24,27,.05), 0 8px 24px -12px rgba(18,24,27,.18);
  --shadow-lift: 0 2px 4px rgba(18,24,27,.06), 0 20px 40px -16px rgba(18,24,27,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--green); color: #fff; }

h1, h2, h3 {
  font-family: var(--sans);
  font-stretch: 115%;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 0;
}
p { margin: 0; }
button, input { font: inherit; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) { .wrap { padding: 0 40px; } }

.sr-only, .srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--ink); color: #fff; padding: 12px 18px; }
.skip:focus { left: 0; }

/* mono "work order" eyebrow */
.tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}
.tag::before { content: ""; width: 22px; height: 2px; background: currentColor; opacity: .85; }
.tag--green { color: var(--green); }
.tag--bright { color: var(--green-hi); }

/* blueprint grid texture for dark sections */
.blueprint { position: relative; background: var(--ink); color: #fff; }
.blueprint::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(147,165,162,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,165,162,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.blueprint > * { position: relative; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 28px; border-radius: 8px;
  font-weight: 700; font-size: 16px; font-stretch: 105%;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  background: transparent; color: inherit; font-family: var(--sans);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--green-hi); outline-offset: 2px; }
/* --green is a fine accent but a poor background for white text: the two
   only reach 3.75:1, under the 4.5:1 needed to read comfortably. --green-deep
   is the same brand green a shade further down and reaches 5.77:1. */
.btn--green {
  background: var(--green-deep); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(20,150,106,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn--green:hover { background: #0b6a4a; }
.btn--green:disabled { background: var(--mut); box-shadow: none; transform: none; cursor: default; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #223036; }
.btn--outline { border-color: var(--line); background: var(--card); color: var(--ink); }
.btn--outline:hover { border-color: var(--ink); }
.btn--sm { padding: 11px 20px; font-size: 14.5px; border-radius: 7px; }

.section { padding: 88px 0; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .tag { justify-content: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 44px); margin-top: 14px; }
.section-head .lede { margin-top: 16px; font-size: 18px; color: var(--mut); }
.on-dark .section-head .lede { color: var(--steel); }

/* header — lifted from index.html so the two are the same object */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,24,27,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
  color: #fff;
}
.site-header nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 0;
}
.brand img { height: 56px; width: auto; }
@media (min-width: 640px) { .brand img { height: 64px; } }

/* The header is one line or it is the hamburger — never a cramped two rows.
   Eight items, the logo and the button need about 1126px of room, and .wrap
   never gives more than 1112 of it, so the breakpoint is set above that width
   rather than below it. Squeezing the gap alone could not have fixed this:
   the shortfall was wider than the gaps put together. */
.nav-links { display: none; align-items: center; gap: 22px; }
@media (min-width: 1160px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: 14.5px; font-weight: 600;
  color: #cfd9d6; text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav-links a:hover { color: var(--green-hi); border-color: var(--green-hi); }
/* the page you are on */
.nav-links a[aria-current="page"] { color: var(--green-hi); border-color: var(--green-hi); }
.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
.header-cta {
  padding: 9px 16px; font-size: 14px; white-space: nowrap;
}

.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-dark); border-radius: 8px;
  color: #fff; padding: 9px; cursor: pointer;
  transition: background-color .18s ease;
}
.menu-btn:hover { background: rgba(255,255,255,.07); }
@media (min-width: 1160px) { .menu-btn { display: none; } }
.hidden { display: none !important; }
.mobile-menu { border-top: 1px solid var(--line-dark); background: var(--ink); }
@media (min-width: 1160px) { .mobile-menu { display: none !important; } }
.mobile-menu .inner { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 18px; }
.mobile-menu a {
  text-decoration: none; color: #cfd9d6; font-weight: 600; font-size: 15px;
  padding: 11px 12px; border-radius: 8px;
  transition: background-color .15s ease, color .15s ease;
}
.mobile-menu a:hover { background: rgba(255,255,255,.06); color: var(--green-hi); }
.mobile-menu a[aria-current="page"] { color: var(--green-hi); }
.mobile-menu .btn { margin-top: 10px; color: #fff; }

/* footer */
.site-footer { background: var(--ink); color: var(--steel); padding: 52px 0 44px; }
.site-footer a { color: var(--steel); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14.5px; }
.site-footer .small { font-size: 13.5px; margin-top: 8px; }

/* ----------------------------------------------------------------- the bay */

.hero { padding: clamp(46px, 8vw, 92px) 0 clamp(52px, 8vw, 96px); }
.hero h1 { font-size: clamp(38px, 6.4vw, 68px); margin-top: 18px; }
.hero h1 .fix { color: var(--green-hi); }
.hero-sub { margin-top: 20px; font-size: clamp(17px, 2vw, 20px); color: var(--steel); max-width: 56ch; }

.bayForm { margin-top: 34px; max-width: 640px; }
.inputRow {
  display: flex; align-items: stretch; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line-dark);
  border-radius: 10px; padding: 8px;
}
.proto { display: flex; align-items: center; padding-left: 12px; font-family: var(--mono); font-size: 15px; color: var(--steel); }
#domain {
  flex: 1; min-width: 0; border: 0; background: none; color: #fff;
  font-family: var(--mono); font-size: 16.5px; padding: 12px 6px;
}
#domain::placeholder { color: rgba(147,165,162,.75); }
#domain:focus { outline: none; }
.inputRow:focus-within { border-color: var(--green-hi); }

.note { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--steel); letter-spacing: .02em; }

.err {
  font-family: var(--mono); font-size: 13.5px; color: var(--red);
  margin-top: 14px; border-left: 3px solid currentColor; padding-left: 12px;
}
.hero .err { color: #ffb4b6; }

/* progress bench */
.bench {
  margin-top: 30px; max-width: 640px;
  background: var(--panel); border: 1px solid var(--line-dark);
  border-radius: 12px; padding: 26px;
}
.benchTitle { font-weight: 700; font-stretch: 110%; font-size: 20px; color: #fff; }
.progressBar { height: 10px; border-radius: 6px; background: var(--line-dark); overflow: hidden; margin-top: 16px; }
.progressBar i { display: block; height: 100%; width: 0; background: var(--green-hi); transition: width .4s ease; }
.readout { margin-top: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--steel); }
.log {
  margin-top: 16px; max-height: 148px; overflow: auto; border-radius: 8px;
  background: rgba(0,0,0,.25); padding: 12px;
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--steel);
  white-space: pre-wrap;
}

/* ----------------------------------------------------------- the spec sheet */

.areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.areas li {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
}
.areaNo {
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--green);
  min-width: 2.2em; text-align: right; padding-top: 3px;
}
.areaName { font-weight: 700; font-stretch: 110%; font-size: 17.5px; color: var(--ink); }
.areaBlurb { grid-column: 2; font-size: 14.5px; line-height: 1.55; color: var(--mut); }

/* --------------------------------------------------------- the certificate */

/* The certificate sits directly under the dark hero. Without a top pad the
   white card butts straight up against it. Matches .section's rhythm. */
#resultPanel { padding: 88px 0; }

.cert {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.certHead {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start;
  padding: 30px; border-bottom: 1px solid var(--line);
}
.certLabel { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.certHead h2 { font-size: clamp(26px, 4vw, 38px); margin-top: 10px; word-break: break-word; }
.certHead .readout { color: var(--mut); word-break: break-all; }

.stamp {
  border: 2px solid var(--line); border-radius: 12px;
  padding: 16px 26px; text-align: center; min-width: 180px;
}
.stampScore { display: block; font-family: var(--mono); font-weight: 500; font-size: 46px; line-height: 1; color: var(--ink); }
.stampScore small { font-size: 15px; color: var(--mut); }
.stampVerdict {
  display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.stamp.pass { border-color: var(--green); }
.stamp.pass .stampVerdict { color: var(--green-deep); }
.stamp.advisory { border-color: var(--amber); }
.stamp.advisory .stampVerdict { color: #96700c; }
.stamp.fail { border-color: var(--red); }
.stamp.fail .stampVerdict { color: var(--red); }

.pills { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pill {
  flex: 1 1 auto; padding: 15px 20px; border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
}
.pill:last-child { border-right: 0; }
.pill.critical { color: var(--red); }
.pill.high { color: #c2560f; }
.pill.medium { color: #96700c; }
.pill.zero { color: #b9c4bf; }

.catGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cat {
  display: grid; gap: 7px; justify-items: stretch; text-align: left; width: 100%;
  padding: 20px 22px; border: 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  background: none; color: inherit; cursor: default; font-family: inherit;
}
.cat .label { font-weight: 700; font-stretch: 110%; font-size: 15.5px; color: var(--ink); }
.cat .val { font-family: var(--mono); font-size: 26px; font-weight: 500; }
.cat .bar { display: block; width: 100%; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cat .bar i { display: block; height: 100%; }
.cat .n { font-family: var(--mono); font-size: 12px; color: var(--mut); }

.statBar { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); border-top: 1px solid var(--line); background: #f7faf8; }
.statBar div {
  padding: 18px 20px; border-right: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
}
.statBar b { display: block; font-size: 21px; letter-spacing: 0; text-transform: none; color: var(--ink); margin-bottom: 3px; }

/* ------------------------------------------------------------ the findings */

.findingsHead { margin: 54px 0 24px; }
.findingsHead h2 { font-size: clamp(24px, 3.4vw, 34px); margin-top: 12px; }

/* What replaces the form once the details are in. The report goes by email, so
   this is the last thing on the page rather than a stepping stone to a list. */
.leadThanks {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: clamp(28px, 4vw, 44px);
  max-width: 580px; margin: clamp(40px, 6vw, 72px) auto 0;
  border-top: 4px solid var(--green); text-align: center;
}
.leadThanks.failed { border-top-color: var(--amber); }
.leadThanks h3 { font-size: clamp(23px, 3vw, 30px); line-height: 1.15; }
.leadThanks .lede { margin: 14px 0 0; font-size: 17px; color: var(--txt); }
.leadThanks .small { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--mut); }
.leadThanks .btn { margin-top: 22px; }
.leadThanks .lede, .leadThanks .small { margin-left: auto; margin-right: auto; max-width: 42ch; }
.filters { display: none; }   /* the console has filters; out here the list is short by design */
.tabs { display: none; }

.finding {
  background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--mut);
  border-radius: 12px; padding: 24px 26px; margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.finding.critical { border-left-color: var(--red); }
.finding.high { border-left-color: #c2560f; }
.finding.medium { border-left-color: var(--amber); }
.finding.low { border-left-color: var(--blue); }
.fTitle { font-size: 21px; margin: 0; }
.fTags { display: flex; flex-wrap: wrap; gap: 16px; margin: 11px 0 15px; }
/* the site's .tag draws a leading dash; the finding chips should not */
.fTags .tag { font-size: 11px; letter-spacing: .12em; color: var(--mut); gap: 0; }
.fTags .tag::before { content: none; }
.fTags .tag.sev.critical { color: var(--red); }
.fTags .tag.sev.high { color: #c2560f; }
.fTags .tag.sev.medium { color: #96700c; }
.fBody p { margin: 9px 0; font-size: 15.5px; line-height: 1.6; }
.fBody b { font-weight: 700; color: var(--ink); }

.finding details { margin-top: 15px; }
.finding summary {
  cursor: pointer; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep);
}
.instList { list-style: none; margin: 12px 0 0; padding: 0; }
.instList li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; word-break: break-word; }
.instList a { color: var(--green-deep); }
.ev { display: none; }        /* evidence belongs to the working copy */
.empty { padding: 40px 0; color: var(--mut); font-family: var(--mono); font-size: 14px; }

/* ------------------------------------------------------------ the lead form */

.leadForm {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lift); padding: clamp(26px, 4vw, 40px);
  max-width: 580px; margin: clamp(40px, 6vw, 72px) auto 0;
}
.leadForm h3 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; }
.leadForm .lede { margin: 12px 0 26px; font-size: 16px; color: var(--mut); }
.leadForm .stack { display: block; margin-bottom: 20px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.leadForm .stack input {
  display: block; width: 100%; margin-top: 8px; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 9px; background: #fbfdfc;
  font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--txt);
}
.leadForm .stack input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(20,150,106,.16); }
.leadForm .check { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5; margin: 4px 0 24px; }
.leadForm .check input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--green); }
.leadForm button {
  width: 100%; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--green); color: #fff; padding: 16px 24px;
  font-family: var(--sans); font-weight: 700; font-size: 16px; font-stretch: 105%;
  box-shadow: 0 10px 24px -10px rgba(20,150,106,.55), inset 0 1px 0 rgba(255,255,255,.18);
}
.leadForm button:hover { background: var(--green-deep); }
.leadForm button:disabled { background: var(--mut); box-shadow: none; cursor: default; }
.leadForm .consent { margin-top: 18px; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------- the close */

.closer h2 { font-size: clamp(28px, 4.6vw, 44px); }
.closer .lede { margin-top: 16px; font-size: 18px; color: var(--steel); max-width: 54ch; }
.closerActions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.reach { margin-top: 24px; font-family: var(--mono); font-size: 14px; color: var(--steel); }
.reach a { color: var(--green-hi); }

@media (max-width: 620px) {
  .section { padding: 62px 0; }
  .inputRow { flex-wrap: wrap; }
  #domain { flex-basis: 100%; }
  .proto { display: none; }
  #runBtn { width: 100%; }
  .certHead { flex-direction: column; }
  .stamp { width: 100%; }
  .closerActions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The second footer column, the same one the home page carries, so the footer
   is laid out identically wherever it appears. */
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.footer-net { text-align: left; }
@media (min-width: 768px) { .footer-net { text-align: right; } }
.footer-net .lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--green-hi);
}
.footer-net .links { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
@media (min-width: 768px) { .footer-net .links { align-items: flex-end; } }