/* Mail check page (/mail/): layout A "Verdict first" from design/mail-options.html, with layout C's
   mail paths folded underneath. Shared tokens, .spec, .field, .btn, .note-block and details.fold come
   from site.css; this file adds only what the mail check needs. Narrow layouts use container queries
   on .page (a container named "page" in site.css). */

/* ---- Page grid: form left, "How this check works" right; result full width under them.
   DOM order is intro, result, how, privacy, so on narrow screens the result follows the form. ---- */
.mc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) 48px; align-items: start; }
.mc > * { min-width: 0; }
.mc-intro { grid-column: 1; }
.mc-how { grid-column: 2; grid-row: 1; }
.mc-result, .mc-privacy { grid-column: 1 / -1; }
.mc-result:empty { display: none; }

.mc-intro h1 { margin: 0; color: var(--ink); font-weight: 600; font-size: clamp(30px, 4.2cqi, 54px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.mc-intro .lede { margin: 14px 0 0; font-size: clamp(16.5px, 1.35cqi, 18.5px); line-height: 1.6; max-width: 36em; }
.mc-how dd ul { margin: 0; padding-left: 1.1em; }
.mc-how dd { line-height: 1.5; }

/* ---- The form ---- */
.checker { background: var(--sheet); border: 1px solid var(--ink); margin-top: 20px; }
.ck-in { padding: 14px 14px 12px; display: grid; gap: 8px; }
.ck-label { font: 600 15px var(--sans); color: var(--ink); }
.ck-row { display: flex; gap: 8px; }
.ck-row .field { flex: 1; font-size: 19px; }
.ck-row .btn { flex: none; font-size: 16px; padding: 0 22px; }
.msg { margin: 0; display: flex; gap: 8px; font-size: 14.5px; line-height: 1.45; align-items: baseline; }
.msg .ic { position: relative; top: 2px; }
.msg.err { color: var(--bad); }
.msg.info { color: var(--note); }
.hint { margin: 0; font-size: 14px; color: var(--mute); line-height: 1.5; }
.hint strong { color: var(--ink); font-weight: 500; }
/* Optional DKIM selector: folded under the domain field, closed by default */
details.ck-sel { border-top: 1px solid var(--rule); padding-top: 8px; min-width: 0; }
details.ck-sel > summary { cursor: pointer; font: 500 14.5px var(--sans); color: var(--blue); padding: 4px 0; min-height: 28px; }
.ck-sel-in { display: grid; gap: 8px; padding-top: 8px; }
.ck-sel-in .field { width: 100%; max-width: 22em; box-sizing: border-box; }
/* The line about the selector the visitor entered, and the way back to the selector box */
.v-sel { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; max-width: 46em; color: var(--ink); overflow-wrap: anywhere; }
.iss-act { margin: 12px 0 0; }

/* ---- Icons and severity tags (icon shape + word, never colour alone) ---- */
.ic { width: 1em; height: 1em; flex: none; }
.ic .k { fill: none; stroke: var(--sheet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .kd { fill: var(--sheet); }
.bad { color: var(--bad); } .warn { color: var(--warn); } .note { color: var(--note); } .ok { color: var(--ok); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 6px; font: 600 12.5px/1.3 var(--mono); border: 1px solid currentColor; white-space: nowrap; }
.tag .ic { width: 15px; height: 15px; }
.tag.bad { background: var(--bad-bg); } .tag.warn { background: var(--warn-bg); } .tag.note { background: var(--note-bg); } .tag.ok { background: var(--ok-bg); }

/* ---- Result ---- */
.mc-result { display: grid; gap: 16px; }
.mc-busy { background: var(--sheet); border: 1px solid var(--ink); padding: 18px 20px; display: grid; gap: 4px; }
.mc-busy p { margin: 0; color: var(--ink); font-size: 17px; }
.mc-busy .busy-d { font: 500 14px var(--mono); color: var(--mute); overflow-wrap: anywhere; }

/* Verdict box */
.verdict, .mc-err { background: var(--sheet); border: 1px solid var(--ink); }
.v-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px; border-bottom: 1px solid var(--ink); font: 600 13px var(--mono); color: var(--ink); }
.v-top > span { min-width: 0; overflow-wrap: anywhere; }
.v-top .r { font-weight: 400; color: var(--mute); }
.v-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 20px 20px 18px; align-items: start; }
.v-icon .ic { width: 46px; height: 46px; }
.v-main h2 { margin: 2px 0 0; color: var(--ink); font-size: clamp(26px, 3cqi, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.v-sub { margin: 10px 0 0; font-size: 17px; line-height: 1.55; max-width: 46em; }
.v-count { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.err-todo { margin: 10px 0 0; font-size: 16px; line-height: 1.55; max-width: 46em; color: var(--ink); }
.facts { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.facts > div { padding: 10px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.facts > div:last-child { border-right: 0; }
.facts dt { font: 500 12px var(--mono); color: var(--mute); }
.facts dd { margin: 3px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* Fix in this order */
.fixes { display: grid; gap: 16px; }
.sec-h { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--ink); font-size: 20px; font-weight: 600; }
.sec-h span { font: 400 14px var(--sans); color: var(--mute); }
.issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.issue { background: var(--sheet); border: 1px solid var(--ink); min-width: 0; }
.iss-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 14px 16px; border-bottom: 1px solid var(--rule); align-items: start; }
.iss-n { font: 600 22px/1 var(--mono); color: var(--ink); min-width: 1.2em; padding-top: 3px; }
.iss-head h3 { margin: 8px 0 0; color: var(--ink); font-size: 19px; line-height: 1.3; font-weight: 600; text-wrap: balance; }
.iss-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.iss-body > div { padding: 14px 16px; min-width: 0; }
.iss-body > div + div { border-left: 1px solid var(--rule); }
h4.lab { margin: 0 0 6px; font: 600 12.5px var(--mono); color: var(--mute); }
.prose-s p { margin: 0; font-size: 15.5px; line-height: 1.6; max-width: 40em; }
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.55; }
.steps li::marker { font: 600 14px var(--mono); color: var(--ink); }

/* Records, folded */
details.ev { border-top: 1px solid var(--rule); }
details.ev > summary { padding: 10px 16px; cursor: pointer; font: 500 14px var(--sans); color: var(--blue); list-style: none; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.ev > summary::-webkit-details-marker { display: none; }
details.ev > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); align-self: center; flex: none; transition: transform .15s; }
details.ev[open] > summary::before { transform: rotate(45deg); }
details.ev > summary span { font: 400 13px var(--mono); color: var(--mute); }
details.ev > summary:hover { background: var(--tint); }
.evs { display: grid; gap: 12px; padding: 0 16px 16px; }
.ev-box { border: 1px solid var(--rule); background: var(--sheet); min-width: 0; }
.ev-h { margin: 0; padding: 8px 12px; font: 400 12.5px/1.5 var(--mono); color: var(--mute); background: var(--tint); border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.rec { width: 100%; border-collapse: collapse; font: 13px/1.5 var(--mono); table-layout: auto; }
.rec th { text-align: left; font: 500 12px var(--mono); color: var(--mute); padding: 6px 12px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rec td { padding: 6px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--body); overflow-wrap: anywhere; font-weight: 400; }
.rec tr:last-child td { border-bottom: 0; }
.rec td.v { color: var(--ink); width: 55%; }
.rec td.ttl, .rec td.ty { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec tr.miss td.v { color: var(--mute); font-style: italic; }
.ev-note { margin: 0; padding: 8px 12px; font-size: 13.5px; line-height: 1.5; color: var(--mute); border-top: 1px solid var(--rule); }

/* SPF lookup counter */
.lk { border-top: 1px solid var(--rule); padding: 10px 12px 12px; display: grid; gap: 10px; }
.lk-h { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--ink); }
.lk-h b { font: 600 15px var(--mono); }
.meter { display: flex; gap: 3px; align-items: stretch; height: 18px; max-width: 100%; }
.meter i { flex: 1 1 0; max-width: 26px; min-width: 6px; border: 1px solid var(--field); background: var(--sheet); }
.meter i.on { background: var(--ink); border-color: var(--ink); }
.meter i.over { border-color: var(--bad); background: repeating-linear-gradient(135deg, var(--bad) 0 3px, var(--bad-bg) 3px 6px); }
.meter b { width: 2px; background: var(--ink); margin-inline: 3px; flex: none; }
.lk-chain { margin: 0; padding: 0; list-style: none; max-width: 46em; font: 13px/1.45 var(--mono); }
.lk-chain li { padding: 4px 0; border-bottom: 1px dotted var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; }
.lk-chain li:last-child { border-bottom: 0; }

/* ---- Mail paths, folded under the result ---- */
details.flows > summary { font-size: 16px; }
details.flows > .lanes { padding: 14px; }
.lanes { display: grid; gap: 14px; }
.lane { background: var(--sheet); border: 1px solid var(--ink); min-width: 0; }
.lane-h { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--ink); }
.lane-h h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; }
.lane-h span { font-size: 14px; color: var(--mute); }
.path { list-style: none; margin: 0; padding: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 30px; }
.stn { position: relative; border: 1px solid var(--rule); padding: 10px 12px; display: grid; gap: 6px; align-content: start; justify-items: start; min-width: 0; background: var(--sheet); }
.stn:not(:last-child)::after { content: "\2192"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); font: 600 18px var(--mono); color: var(--ink); }
.stn-k { font: 500 12.5px var(--mono); color: var(--mute); }
.stn-v { font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; max-width: 100%; }
.stn.out { border: 2px solid var(--ink); }
.stn.out.bad { background: var(--bad-bg); } .stn.out.warn { background: var(--warn-bg); } .stn.out.note { background: var(--note-bg); } .stn.out.ok { background: var(--ok-bg); }
.stn.out .stn-v { font-weight: 500; }

/* ---- Narrow ---- */
@container page (max-width: 980px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 12px; border-right: 0; border-bottom: 1px solid var(--rule); padding: 8px 16px; }
  .facts > div:last-child { border-bottom: 0; }
  .facts dd { margin: 0; }
  .path { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
  .stn:not(:last-child)::after { content: "\2193"; right: auto; left: 24px; top: auto; bottom: -25px; transform: none; }
}
@container page (max-width: 820px) {
  .mc { grid-template-columns: minmax(0, 1fr); }
  .mc-intro, .mc-how, .mc-result, .mc-privacy { grid-column: 1; grid-row: auto; }
  .iss-body { grid-template-columns: minmax(0, 1fr); }
  .iss-body > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}
@container page (max-width: 640px) {
  .v-main { padding: 16px; gap: 4px 12px; }
  .v-icon .ic { width: 30px; height: 30px; }
  .v-top .r { display: none; }
  .v-sub { font-size: 16px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); }
  .iss-head { padding: 12px 14px; gap: 6px 10px; }
  .iss-head h3 { font-size: 17.5px; }
  .iss-body > div { padding: 12px 14px; }
  .evs { padding: 0 12px 12px; }
  details.ev > summary { padding: 10px 14px; }
  .rec thead { display: none; }
  .rec, .rec tbody, .rec tr, .rec td { display: block; width: auto; }
  .rec tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 10px; padding: 6px 12px; border-bottom: 1px solid var(--rule); }
  .rec tr:last-child { border-bottom: 0; }
  .rec td { padding: 0; border: 0; }
  .rec td.n { grid-column: 1 / -1; color: var(--mute); font-size: 12.5px; }
  .rec td.ttl::before { content: "TTL "; color: var(--mute); }
  .rec td.v { width: auto; grid-column: 1 / -1; }
  details.flows > .lanes { padding: 10px; }
  .path { padding: 14px; }
  .lane-h { padding: 10px 14px; }
  .ck-row .btn { padding: 0 16px; }
  .ck-row .field { font-size: 17px; }
  .tag { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { details.ev > summary::before { transition: none; } }