/**
 * Diagnostic interface.
 *
 * Reads from the theme's own custom properties, so the tool inherits the SEO
 * Maxing palette, typography and dark mode rather than shipping a second design
 * system. Severity colours come from the Search Console set used across the
 * site. No framework, no icon font: every icon is inline SVG.
 */

/* Search Console's own status palette. People recognise these four states from
   the report they already look at, so borrowing the hues costs nothing and
   makes the severity readable before the label is. */
.smd {
  --smd-crit: #C5221F;  --smd-crit-wash: #FCE8E6;  --smd-crit-line: #F3B7B3;  --smd-crit-solid: #D93025;
  --smd-warn: #A85B00;  --smd-warn-wash: #FEF7E0;  --smd-warn-line: #F2D9A0;  --smd-warn-solid: #E37400;
  --smd-pass: #137333;  --smd-pass-wash: #E6F4EA;  --smd-pass-line: #B7E1C4;  --smd-pass-solid: #1E8E3E;
  --smd-info: #1554B8;  --smd-info-wash: #E8F0FE;  --smd-info-line: #C2D7F7;  --smd-info-solid: #1A73E8;
  --smd-na:   #5F6368;  --smd-na-wash:   #F1F3F4;  --smd-na-line:   #DADCE0;  --smd-na-solid:   #80868B;
  display: flex; flex-direction: column; gap: 18px;
}
[data-theme="dark"] .smd {
  --smd-crit: #F28B82;  --smd-crit-wash: #2E1512;  --smd-crit-line: #5C2B26;  --smd-crit-solid: #F28B82;
  --smd-warn: #FDD663;  --smd-warn-wash: #2B2109;  --smd-warn-line: #574517;  --smd-warn-solid: #FDD663;
  --smd-pass: #81C995;  --smd-pass-wash: #0F2417;  --smd-pass-line: #1E4B2E;  --smd-pass-solid: #81C995;
  --smd-info: #8AB4F8;  --smd-info-wash: #12203A;  --smd-info-line: #22406B;  --smd-info-solid: #8AB4F8;
  --smd-na:   #9AA0A6;  --smd-na-wash:   #17191C;  --smd-na-line:   #2E3134;  --smd-na-solid:   #9AA0A6;
}

.smd [hidden] { display: none !important; }
.smd-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.smd-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Tool panel
   ============================================================ */
.smd-tool {
  background: var(--navy); border-radius: 22px; padding: 30px 26px;
  position: relative; overflow: hidden; box-shadow: var(--shadow-l);
  display: flex; flex-direction: column; gap: 20px;
}
[data-theme="dark"] .smd-tool { border: 1px solid var(--border); }
.smd-tool::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(680px 340px at 100% 0%, rgba(99,102,241,.50), transparent 62%),
              radial-gradient(500px 300px at 0% 100%, rgba(14,168,113,.30), transparent 62%);
}
.smd-tool > * { position: relative; z-index: 1; }
/* Without its own heading the panel is pure control surface, so it tightens up. */
.smd-tool:not(:has(.smd-tool-head)) { padding: 26px 24px; gap: 16px; }
.smd-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-family: "Sora", sans-serif; font-weight: 800;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.smd-badge svg { width: 14px; height: 14px; }
.smd-tool-head { display: flex; flex-direction: column; gap: 11px; }
.smd-tool-head h2 {
  color: #fff; font-family: "Sora", sans-serif; font-size: 1.72rem;
  font-weight: 800; line-height: 1.2; margin: 0; letter-spacing: -.02em;
}
.smd-tool-head p { color: #C2CBE6; margin: 0; font-size: 1rem; max-width: 60ch; }

.smd-start { display: flex; flex-direction: column; gap: 11px; }
.smd-field-lbl {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: #AEB9DC;
}
.smd-input-wrap { display: flex; flex-direction: column; gap: 10px; position: relative; }
/* The globe sits inside the field, so the input reads as an address bar. */
.smd-input-ico {
  position: absolute; left: 16px; top: 18px; width: 21px; height: 21px;
  color: #8592AE; pointer-events: none; z-index: 2;
}
.smd-input-ico svg { width: 100%; height: 100%; display: block; }
.smd-input-wrap input {
  width: 100%; padding: 17px 18px 17px 46px; font-size: 1.05rem; font-family: inherit;
  color: var(--text); background: #fff; border: 2px solid transparent;
  border-radius: 13px; transition: border-color .18s, box-shadow .18s;
}
[data-theme="dark"] .smd-input-wrap input {
  background: var(--surface); color: var(--text); border-color: rgba(255,255,255,.28);
}
.smd-input-wrap input::placeholder { color: #8592AE; }
.smd-input-wrap input:focus {
  outline: none; border-color: #C05600; box-shadow: 0 0 0 4px rgba(192,86,0,.30);
}
.smd-start .btn { justify-content: center; padding: 16px 24px; white-space: nowrap; }
.smd-start .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.smd-assure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.smd-assure li { color: #AEB9DC; font-size: .87rem; display: inline-flex; align-items: center; gap: 8px; }
.smd-assure li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: #00806F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.smd-err { margin: 0; font-size: .93rem; font-weight: 600; color: #FFC9A3; }
.smd-err:empty { display: none; }

/* ============================================================
   Scanning
   ============================================================ */
.smd-running {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 24px; box-shadow: var(--shadow-m);
  display: flex; flex-direction: column; gap: 16px;
}
.smd-run-head { display: flex; align-items: center; gap: 13px; }
.smd-run-head > div { flex: 1; min-width: 0; }
.smd-run-k {
  display: block; font-family: "Sora", sans-serif; font-weight: 800;
  font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
}
.smd-run-head strong {
  display: block; font-family: "Sora", sans-serif; font-size: 1.06rem;
  color: var(--text); word-break: break-all;
}
.smd-pct {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.1rem;
  font-weight: 700; color: var(--eyebrow); font-variant-numeric: tabular-nums;
}
.smd-spin {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--indigo);
  animation: smd-spin 900ms linear infinite;
}
@keyframes smd-spin { to { transform: rotate(360deg); } }

.smd-bar { height: 8px; border-radius: 99px; background: var(--bg-alt); overflow: hidden; }
.smd-bar i {
  display: block; height: 100%; width: 4%; border-radius: 99px;
  background: var(--grad-brand); transition: width .45s ease;
}
.smd-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.smd-steps li {
  display: flex; align-items: center; gap: 11px;
  font-size: .93rem; color: var(--text-3); transition: color .2s;
}
.smd-dot {
  width: 17px; height: 17px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-2); background: var(--bg-2); transition: all .2s;
}
.smd-steps li.is-now { color: var(--text); font-weight: 600; }
.smd-steps li.is-now .smd-dot {
  border-color: var(--indigo); box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 18%, transparent);
}
.smd-steps li.is-done { color: var(--text-2); }
.smd-steps li.is-done .smd-dot {
  border-color: #00806F; background: #00806F center/10px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ============================================================
   Results
   ============================================================ */
.smd-result { display: flex; flex-direction: column; gap: 16px; }

/* The report masthead uses the site footer navy, so the results open with the
   same weight the tool panel had rather than a second white box. */
.smd-id {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  background: var(--navy); border: 1px solid transparent;
  border-radius: 18px; padding: 24px 26px; box-shadow: var(--shadow-m);
  position: relative; overflow: hidden;
}
[data-theme="dark"] .smd-id { border-color: var(--border); }
.smd-id::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 260px at 100% 0%, rgba(99,102,241,.40), transparent 64%);
}
.smd-id > * { position: relative; z-index: 1; }
.smd-id-main { min-width: 0; flex: 1 1 260px; }
.smd-id-k {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: #A9B4FF;
}
.smd-id h3 {
  font-family: "Sora", sans-serif; font-size: 1.6rem; font-weight: 800;
  margin: 5px 0 4px; letter-spacing: -.02em; word-break: break-word; color: #fff;
}
/* Break a long URL where needed, but never split the scan date. */
.smd-id-meta { margin: 0; font-size: .86rem; color: #A3AFCE;
  word-break: normal; overflow-wrap: anywhere; }
.smd-id-meta .smd-when { white-space: nowrap; }
.smd-sep { margin: 0 8px; opacity: .5; }
.smd-id-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.smd-id-actions .btn { padding: 11px 17px; font-size: .9rem; }
.smd-ghost {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26);
  border-radius: 11px; padding: 11px 16px; font-family: "Sora", sans-serif;
  font-weight: 700; font-size: .9rem; color: #fff;
  transition: background .18s, border-color .18s;
}
.smd-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.44); }
.smd-ghost svg { width: 16px; height: 16px; }

.smd-scope {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  background: var(--smd-info-wash); border: 1px solid var(--smd-info-line);
  border-radius: 12px; padding: 13px 16px; font-size: .92rem; color: var(--text-2);
}
.smd-scope svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--smd-info); }

.smd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.smd-stat.has-items.smd-na { background: var(--bg-alt); border-color: var(--border-2); }
.smd-stat.has-items.smd-na .smd-stat-n,
.smd-stat.has-items.smd-na .smd-stat-k,
.smd-stat.has-items.smd-na .smd-stat-ico { color: var(--text-2); }
.smd-stat {
  border-radius: 15px; padding: 16px 17px; border: 1px solid var(--border);
  background: var(--card); display: grid;
  grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 11px; align-items: center;
}
.smd-stat-ico {
  grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--smd-na-solid);
}
.smd-stat-ico svg { width: 18px; height: 18px; }
.smd-stat-n {
  font-family: "Sora", sans-serif; font-size: 1.7rem; font-weight: 800;
  line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.smd-stat-k { font-size: .8rem; font-weight: 600; color: var(--text-3); }
/* A zero stays neutral. Only a state that actually has findings takes colour,
   so the eye lands on what needs attention rather than on four bright boxes. */
.smd-stat.has-items.smd-crit { background: var(--smd-crit-wash); border-color: var(--smd-crit-line); }
.smd-stat.has-items.smd-warn { background: var(--smd-warn-wash); border-color: var(--smd-warn-line); }
.smd-stat.has-items.smd-pass { background: var(--smd-pass-wash); border-color: var(--smd-pass-line); }
.smd-stat.has-items.smd-info { background: var(--smd-info-wash); border-color: var(--smd-info-line); }
.smd-stat.has-items.smd-na   { background: var(--smd-na-wash);   border-color: var(--smd-na-line); }
.smd-stat.has-items.smd-crit .smd-stat-n, .smd-stat.has-items.smd-crit .smd-stat-k { color: var(--smd-crit); }
.smd-stat.has-items.smd-warn .smd-stat-n, .smd-stat.has-items.smd-warn .smd-stat-k { color: var(--smd-warn); }
.smd-stat.has-items.smd-pass .smd-stat-n, .smd-stat.has-items.smd-pass .smd-stat-k { color: var(--smd-pass); }
.smd-stat.has-items.smd-info .smd-stat-n, .smd-stat.has-items.smd-info .smd-stat-k { color: var(--smd-info); }
.smd-stat.has-items.smd-na   .smd-stat-n, .smd-stat.has-items.smd-na   .smd-stat-k { color: var(--smd-na); }
.smd-stat.has-items.smd-crit .smd-stat-ico { background: var(--smd-crit-solid); }
.smd-stat.has-items.smd-warn .smd-stat-ico { background: var(--smd-warn-solid); color: #3A2B00; }
.smd-stat.has-items.smd-pass .smd-stat-ico { background: var(--smd-pass-solid); }
.smd-stat.has-items.smd-info .smd-stat-ico { background: var(--smd-info-solid); }

.smd-h {
  font-family: "Sora", sans-serif; font-size: 1.1rem; font-weight: 800;
  margin: 8px 0 0; letter-spacing: -.01em;
}

/* ---- Finding card -------------------------------------------------- */
.smd-list { display: flex; flex-direction: column; gap: 11px; }
.smd-find {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--border-2); border-radius: 15px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-s);
}
.smd-find.sev-critical { border-left-color: var(--smd-crit); }
.smd-find.sev-warning  { border-left-color: var(--smd-warn); }
.smd-find.sev-passed   { border-left-color: var(--smd-pass); }
.smd-find.sev-info     { border-left-color: var(--smd-info); }
.smd-find.sev-unknown  { border-left-color: var(--border-2); }

.smd-find-head { display: flex; gap: 13px; align-items: flex-start; }
.smd-find-ico {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
}
.smd-find-ico svg { width: 18px; height: 18px; }
.sev-critical .smd-find-ico { background: var(--smd-crit-wash); color: var(--smd-crit); }
.sev-warning  .smd-find-ico { background: var(--smd-warn-wash); color: var(--smd-warn); }
.sev-passed   .smd-find-ico { background: var(--smd-pass-wash); color: var(--smd-pass); }
.sev-info     .smd-find-ico { background: var(--smd-info-wash); color: var(--smd-info); }
.sev-unknown  .smd-find-ico { background: var(--smd-na-wash); color: var(--smd-na); }
.smd-find.sev-unknown { border-left-color: var(--smd-na-solid); }

/* Title and severity share a line where there is room, so each card stays
   compact and the eye reads status without a second stop. */
.smd-find-title { min-width: 0; flex: 1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px 10px; }
.smd-find-lead { flex: 0 0 100%; }
.smd-find h4 { flex: 1 1 auto; min-width: 0; }
.smd-chip { flex: none; }
.smd-find-lead {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .67rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.smd-find h4 {
  font-family: "Sora", sans-serif; font-size: 1.08rem; font-weight: 800;
  margin: 0; line-height: 1.34; letter-spacing: -.01em;
}
.smd-chip {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 5px;
}
.smd-chip.smd-critical { background: var(--smd-crit-wash); color: var(--smd-crit); }
.smd-chip.smd-warning  { background: var(--smd-warn-wash); color: var(--smd-warn); }
.smd-chip.smd-passed   { background: var(--smd-pass-wash); color: var(--smd-pass); }
.smd-chip.smd-info     { background: var(--smd-info-wash); color: var(--smd-info); }
.smd-chip.smd-unknown  { background: var(--smd-na-wash); color: var(--smd-na); }

.smd-found {
  margin: 0; color: var(--text); font-size: 1rem; line-height: 1.6;
}
.smd-ev {
  margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size: .8rem; color: var(--text-2); background: var(--bg-alt);
  border: 1px solid var(--border); padding: 9px 12px; border-radius: 9px;
  word-break: break-word;
}
.smd-ev-k {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .6rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); flex: none;
}
[data-theme="dark"] .smd-ev { background: var(--bg-2); border-color: var(--border-2); }

.smd-why { border-top: 1px solid var(--border); padding-top: 11px; }
.smd-why summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: .89rem; color: var(--eyebrow);
}
.smd-why summary::-webkit-details-marker { display: none; }
.smd-why summary svg { width: 17px; height: 17px; transition: transform .25s; flex: none; }
.smd-why[open] summary svg { transform: rotate(180deg); }
.smd-why summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 5px; }
.smd-why-in { padding-top: 9px; display: flex; flex-direction: column; gap: 9px; }
.smd-why-in p { margin: 0; font-size: .94rem; color: var(--text-2); line-height: 1.62; }
.smd-why-in b { color: var(--text); }

.smd-clear {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--smd-pass-wash); border: 1px solid var(--smd-pass-line);
  border-radius: 15px; padding: 20px 22px;
}
.smd-clear-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  display: grid; place-items: center; background: #00806F; color: #fff;
}
.smd-clear-ico svg { width: 20px; height: 20px; }
.smd-clear h4 { font-family: "Sora", sans-serif; font-size: 1.06rem; font-weight: 800; margin: 0 0 5px; }
.smd-clear p { margin: 0; font-size: .94rem; color: var(--text-2); }

/* ---- Category tabs -------------------------------------------------- */
.smd-tabs {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.smd-tab {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  cursor: pointer; background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 14px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: .9rem;
  color: var(--text-2); transition: border-color .18s, color .18s, background .18s;
}
.smd-tab:hover { border-color: var(--border-2); color: var(--text); }
.smd-tab.is-on {
  background: color-mix(in srgb, var(--indigo) 10%, var(--card));
  border-color: var(--indigo); color: var(--text);
}
.smd-tab:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.smd-tab-n {
  font-size: .74rem; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-alt); color: var(--text-3); font-variant-numeric: tabular-nums;
}
.smd-tab-n.smd-crit { background: var(--smd-crit-wash); color: var(--smd-crit); }
.smd-tab-n.smd-warn { background: var(--smd-warn-wash); color: var(--smd-warn); }
.smd-tab-n.smd-ok   { background: var(--smd-pass-wash); color: var(--smd-pass); }
.smd-panel { display: none; }
.smd-panel.is-on { display: block; }

/* ---- Pages list ------------------------------------------------------ */
.smd-pages-block {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-2); overflow: hidden;
}
.smd-pages-block summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-family: "Sora", sans-serif; font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.smd-pages-block summary::-webkit-details-marker { display: none; }
.smd-pages-block summary svg {
  width: 18px; height: 18px; color: var(--eyebrow); transition: transform .25s; flex: none;
}
.smd-pages-block[open] summary svg { transform: rotate(180deg); }
.smd-pages-block summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: -3px; }
.smd-pages {
  list-style: none; margin: 0; padding: 0 18px 16px;
  display: flex; flex-direction: column; gap: 7px;
}
.smd-pages li { display: flex; gap: 10px; align-items: baseline; font-size: .87rem; }
.smd-page-url { color: var(--text-2); word-break: break-all; }
.smd-code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; flex: none;
  background: var(--smd-pass-wash); color: var(--smd-pass);
  border: 1px solid var(--smd-pass-line); padding: 1px 7px; border-radius: 6px;
}
.smd-code.is-bad { background: var(--smd-crit-wash); color: var(--smd-crit); border-color: var(--smd-crit-line); }

/* ============================================================
   Email gate
   ============================================================ */
.smd-gate {
  background: var(--navy); border-radius: 18px; padding: 26px 24px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
}
[data-theme="dark"] .smd-gate { border: 1px solid var(--border); }
.smd-gate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 300px at 100% 0%, rgba(99,102,241,.48), transparent 62%),
              radial-gradient(420px 240px at 0% 100%, rgba(14,168,113,.28), transparent 60%);
}
.smd-gate > * { position: relative; z-index: 1; }
.smd-gate-copy h4 {
  font-family: "Sora", sans-serif; color: #fff; font-size: 1.24rem;
  font-weight: 800; margin: 0 0 7px; letter-spacing: -.01em;
}
.smd-gate-copy p { color: #C2CBE6; font-size: .96rem; margin: 0; max-width: 58ch; }
.smd-gate-row { display: flex; flex-direction: column; gap: 11px; }
.smd-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.smd-lbl {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .72rem;
  letter-spacing: .11em; text-transform: uppercase; color: #AEB9DC;
}
.smd-field input {
  width: 100%; padding: 14px 16px; border-radius: 12px; font-size: 1rem;
  font-family: inherit; color: var(--text); background: #fff; border: 2px solid transparent;
  transition: border-color .18s, box-shadow .18s;
}
[data-theme="dark"] .smd-field input {
  background: var(--surface); color: var(--text); border-color: rgba(255,255,255,.28);
}
.smd-field input:focus { outline: none; border-color: #C05600; box-shadow: 0 0 0 4px rgba(192,86,0,.28); }
.smd-gate .btn { justify-content: center; white-space: nowrap; padding: 15px 22px; }
.smd-consent {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  color: #D3DAEC; font-size: .91rem; line-height: 1.5;
}
.smd-consent input {
  appearance: none; -webkit-appearance: none; margin: 2px 0 0; flex: none;
  width: 21px; height: 21px; border: 2px solid rgba(255,255,255,.45);
  border-radius: 6px; background: transparent; cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.smd-consent input:hover { border-color: #fff; }
.smd-consent input:checked { background: #00806F; border-color: #00806F; }
.smd-consent input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.smd-consent input:focus-visible { outline: 3px solid #C05600; outline-offset: 2px; }
.smd-fine { color: #8FA0C4; font-size: .83rem; margin: 0; max-width: 62ch; }

/* ============================================================
   What comes next
   ============================================================ */
.smd-next { display: grid; gap: 13px; margin-top: 4px; }
.smd-next-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 9px;
}
.smd-next-k {
  font-family: "Sora", sans-serif; font-weight: 800; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.smd-next-card h4 { font-family: "Sora", sans-serif; font-size: 1.14rem; font-weight: 800; margin: 0; }
.smd-next-card p { margin: 0; color: var(--text-2); font-size: .94rem; }
.smd-next-paid {
  border-color: color-mix(in srgb, var(--indigo) 34%, transparent);
  background: color-mix(in srgb, var(--indigo) 6%, var(--card));
}
.smd-next-paid .btn { align-self: flex-start; margin-top: 5px; }
.smd-next-alt { font-size: .88rem; color: var(--text-3); }
.smd-next-alt a { color: var(--eyebrow); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Wider screens
   ============================================================ */
@media (min-width: 640px) {
  .smd-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .smd-input-wrap { flex-direction: row; align-items: center; }
  .smd-input-ico { top: 50%; transform: translateY(-50%); }
  .smd-input-wrap input { flex: 1; }
  .smd-start .btn { flex: none; }
  .smd-gate-row { flex-direction: row; align-items: flex-end; }
  .smd-gate-row .btn { flex: none; }
}
@media (min-width: 861px) {
  .smd-tool { padding: 38px 36px; }
  .smd-tool-head h2 { font-size: 2.05rem; }
  .smd-running, .smd-id, .smd-gate { padding: 26px 28px; }
}
@media (min-width: 961px) {
  .smd-next { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .smd-bar i, .smd-why summary svg, .smd-pages-block summary svg { transition: none; }
  .smd-spin { animation: none; border-top-color: var(--border); }
}

/* ============================================================
   Print: the personalised PDF
   ============================================================ */
@media print {
  @page { margin: 14mm 12mm; }

  body { background: #fff !important; color: #111 !important; }
  #site-header, footer, .social-rail, .share, .read-bar, .crumbs,
  .smd-tool, .smd-running, .smd-gate, .smd-next, .final-alt,
  .smd-id-actions, .page-hero,
  .toolpage-head, .toolpage-notes { display: none !important; }
  .toolpage { padding: 0 !important; }
  .toolpage::before { display: none !important; }
  .toolpage-shell { max-width: none !important; padding: 0 !important; gap: 0 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  .smd { display: block !important; }
  .smd-result { gap: 12px !important; }

  .smd-id {
    border: none !important; border-bottom: 2px solid #0B1533 !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 0 0 10px !important; background: #fff !important;
    display: block !important; overflow: visible !important;
  }
  /* ::before carries the masthead on paper, since the site header is gone. */
  .smd-id::before {
    content: "SEO MAXING  |  WEBSITE SEO DIAGNOSTIC" !important;
    display: block !important; position: static !important; background: none !important;
    width: 100%; font-family: "Sora", sans-serif; font-weight: 800; font-size: 9pt;
    letter-spacing: .12em; color: #4338CA !important; margin-bottom: 6px;
  }
  .smd-id-k { display: none; }
  .smd-id::after { display: none !important; }
  .smd-id h3 { font-size: 19pt; color: #0B1533 !important; }
  .smd-id-meta { color: #444 !important; font-size: 9pt; }
  .smd-scope {
    background: #f4f4f6 !important; border-color: #ccc !important;
    color: #333 !important; font-size: 9.5pt;
  }

  .smd-stats { display: flex !important; gap: 8px; }
  .smd-stat { border: 1px solid #bbb !important; background: #fff !important; padding: 8px 10px; flex: 1; }
  .smd-stat-ico { display: none; }
  .smd-stat-n { font-size: 15pt; }
  .smd-stat-k { font-size: 8pt; }

  .smd-h { font-size: 12pt; margin-top: 12px; }
  .smd-find, .smd-clear, .smd-pages-block {
    break-inside: avoid; page-break-inside: avoid;
    background: #fff !important; border-color: #ccc !important; box-shadow: none !important;
  }
  .smd-find h4 { font-size: 11.5pt; color: #0B1533; }
  .smd-find-ico { display: none; }
  .smd-found, .smd-why-in p { color: #222 !important; font-size: 10pt; }
  .smd-ev { background: #f4f4f6 !important; border-color: #ddd !important; font-size: 8.5pt; color: #333 !important; }
  .smd-chip { border: 1px solid #999; }

  /* Every section prints, tabs and collapsed detail included. */
  .smd-tabs { display: none !important; }
  .smd-panel { display: block !important; }
  .smd-panel::before {
    content: attr(data-label); display: block; margin: 14px 0 6px;
    font-family: "Sora", sans-serif; font-weight: 800; font-size: 10.5pt;
    color: #0B1533; border-bottom: 1px solid #ccc; padding-bottom: 4px;
  }
  .smd-why summary, .smd-pages-block summary { display: none !important; }
  .smd-why, .smd-why-in, .smd-pages { display: block !important; padding: 0 !important; }
  details:not([open]) > *:not(summary) { display: block !important; }

  .smd-result::after {
    content: "Generated by the SEO Maxing free website SEO diagnostic. This is an automated first look at a sample of the site, not a full SEO audit.";
    display: block; margin-top: 14px; padding-top: 8px;
    border-top: 1px solid #ccc; font-size: 8pt; color: #555;
  }
}