/* Design Surrey — the AI visibility report
   ==================================================================
   Loaded by ai-visibility-report.html and by the homepage section that
   points at it. Everything here is the furniture that page needs and no
   other page has: the domain form, the sample report excerpt (engine
   grid and competitor table), and the gates list.

   Phone first throughout, like pages.css. Single column by default, the
   grid arrives at a breakpoint. */


/* ---------- the domain form -------------------------------------------
   One field, one button. It submits as a plain GET to the checker, so it
   works with JavaScript off; js/ai-check.js only tidies the value first
   (strips https://, www. and any path) and refuses obvious non-domains
   before the page changes. */

.dcheck { display: block; max-width: 600px; margin-top: var(--s8); }
.dcheck__row { display: flex; flex-direction: column; gap: var(--s3); }
.dcheck__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.dcheck__input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  min-height: 56px; padding: 0 var(--s4);
  background: var(--page); color: var(--ink-900);
  border: 1px solid var(--ink-300); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--body); font-weight: 500;
  caret-color: var(--brass-500);
}
.dcheck__input::placeholder { color: var(--ink-400); font-weight: 400; }
.dcheck__input:focus { outline: none; border-color: var(--brass-500); box-shadow: inset 0 0 0 1px var(--brass-500); }
.dcheck .btn { flex: none; min-height: 56px; width: 100%; }
.dcheck__note {
  margin-top: var(--s4);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-400); max-width: none;
}
.dcheck__err { display: none; margin-top: var(--s3); font-size: var(--small); color: var(--danger); }
.dcheck.is-bad .dcheck__err { display: block; }
.dcheck.is-bad .dcheck__input { border-color: var(--danger); }

@media (min-width: 560px) {
  .dcheck__row { flex-direction: row; }
  .dcheck .btn { width: auto; }
}

/* on ink — the hero and the closing band */
.on-ink .dcheck__input {
  background: rgba(251,250,247,.06); color: var(--bone-50);
  border-color: rgba(251,250,247,.34);
}
.on-ink .dcheck__input::placeholder { color: rgba(251,250,247,.45); }
.on-ink .dcheck__input:focus { background: rgba(251,250,247,.1); border-color: var(--brass-500); }
.on-ink .dcheck__note { color: rgba(207,206,197,.7); }
.on-ink .dcheck__err { color: #E9B8A9; }
.on-ink .dcheck.is-bad .dcheck__input { border-color: #E9B8A9; }

/* the same autofill repaint base.css does for the enquiry form */
.on-ink .dcheck__input:-webkit-autofill,
.on-ink .dcheck__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone-50); caret-color: var(--bone-50);
  -webkit-box-shadow: 0 0 0 1000px #1B1D17 inset; box-shadow: 0 0 0 1000px #1B1D17 inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* the hero's children are capped at 58% width; the form wants the lot of it */
.hero .dcheck { max-width: 600px; }
.hero .dcheck__note { max-width: none; }


/* ---------- the sample excerpt ----------------------------------------
   What a report looks like before anyone has run one. Labelled as a
   sample on the page: the firm, the competitors and every number are
   made up, and saying so is part of the point. */

.sample { display: grid; grid-template-columns: 1fr; gap: var(--s10); margin-top: var(--s10); }
.sample h3 { font-size: var(--h3); }
.sample__tag {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4); padding: 6px var(--s3);
  border: 1px solid var(--brass-500);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--brass-700);
}
.sample__tag::before { content: ""; width: 7px; height: 7px; background: var(--brass-500); }
@media (min-width: 900px) { .sample { grid-template-columns: 1fr 1fr; gap: var(--s16); } }

/* named by engine — five rows, one bar each, count on the right */
.egrid { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--ink-900); }
.egrid li {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4);
  align-items: center; padding: var(--s4) 0; border-bottom: 1px solid var(--border);
}
.egrid__name { font-weight: 600; color: var(--ink-900); font-size: var(--small); }
.egrid__n {
  font-family: var(--font-mono); font-size: var(--small); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--ink-900); white-space: nowrap;
}
.egrid__n small { color: var(--ink-400); font-size: 12px; margin-left: 2px; }
.egrid__bar { grid-column: 1 / -1; height: 6px; background: var(--bone-200); position: relative; overflow: hidden; }
.egrid__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brass-500); }
.egrid__bar i[style*="width: 0%"] { display: none; }

/* who was named instead */
.ctab { width: 100%; border-collapse: collapse; margin-top: var(--s6); font-size: var(--small); }
.ctab th {
  text-align: left; padding: 0 0 var(--s3); border-bottom: 1px solid var(--ink-900);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-400);
}
.ctab td { padding: var(--s4) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ctab td:first-child { font-weight: 600; color: var(--ink-900); padding-right: var(--s4); }
.ctab td:last-child, .ctab th:last-child {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ctab td:last-child { color: var(--ink-900); font-weight: 500; }
.ctab .ctab__eng { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-400); font-weight: 400; }

/* the gate that failed, and the change that opens it */
.verdict { margin-top: var(--s10); padding-top: var(--s8); border-top: 1px solid var(--ink-900);
           display: grid; grid-template-columns: 1fr; gap: var(--s6); max-width: 900px; }
.verdict dt {
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em;
  text-transform: uppercase; font-weight: 500; color: var(--brass-700);
}
.verdict dd { margin: var(--s2) 0 0; color: var(--ink-900); font-size: var(--body); max-width: 40ch; }
@media (min-width: 768px) { .verdict { grid-template-columns: 1fr 1fr; gap: var(--s12); } }


/* ---------- the seven gates -------------------------------------------
   Each one is a fact about the site and the change that fixes it. */

.gates { list-style: none; margin: var(--s8) 0 0; padding: 0; counter-reset: gate; border-top: 1px solid var(--ink-900); }
.gates li {
  counter-increment: gate;
  display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s8);
  padding: var(--s5) 0; border-bottom: 1px solid var(--border);
}
.gates li::before {
  content: counter(gate, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--label); letter-spacing: .16em;
  font-weight: 500; color: var(--brass-700); padding-top: 4px;
}
.gates b { display: block; color: var(--ink-900); font-size: 16px; letter-spacing: -.01em; }
.gates span { display: block; font-size: var(--small); margin-top: var(--s1); }
.gates .gates__fix { padding-left: var(--s4); border-left: 2px solid var(--brass-500); }
.gates .gates__fix i {
  display: block; font-style: normal; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brass-700); margin-bottom: 4px;
}
@media (min-width: 768px) {
  .gates li { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); }
  .gates .gates__fix { margin-top: 0; }
}


/* ---------- the homepage section --------------------------------------
   Copy and form on the left, the sample engine grid on the right so the
   block shows what a result looks like rather than describing one. */

.aiv__inner { display: grid; grid-template-columns: 1fr; gap: var(--s10); }
.aiv__fig { border: 1px solid var(--border); background: var(--page); padding: var(--s6) var(--s6) var(--s7); }
.aiv__fig .egrid { margin-top: var(--s4); }
.aiv__fig .label { color: var(--ink-400); }
.aiv__fig p { font-size: 13px; color: var(--ink-400); margin-top: var(--s4); }
@media (min-width: 900px) {
  .aiv__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s16); align-items: start; }
}
@media (max-width: 767px) { .aiv__fig { display: none; } }