/* ---------------------------------------------------------------------------
   DNStotal — original stylesheet.

   Structure: a logo row with a long search box on top, a blue navigation strip
   that sticks to the top while scrolling, and one column of findings where the
   verdict of each check lives in a narrow left gutter as a word, not an icon.
   Hairlines instead of boxes, colour reserved for verdicts, no gradients.
   --------------------------------------------------------------------------- */

:root {
  --paper: #ffffff;
  --shade: #f3f5f7;
  --ink: #14171a;
  --ink-soft: #4d555f;
  --ink-faint: #828b96;
  --rule: #e2e6ea;
  --rule-dark: #c2c9d1;
  --accent: #14459b;
  --accent-dark: #0e3273;
  --accent-weak: #eaf0fa;
  --fail: #bf2419;
  --warn: #9a4a13;
  --pass: #17693e;
  --info: #1b4f8f;

  /* headline score bands */
  --sc-excellent: #17693e;   /* 90-100, green  */
  --sc-fair: #c8860b;        /* 70-89,  amber  */
  --sc-even: #6b7480;        /* 50-69,  grey   */
  --sc-poor: #bf2419;        /* 0-49,   red    */

  --sans: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SF Mono", "DejaVu Sans Mono", Menlo, monospace;

  --shell: 1060px;
  --gutter: 104px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.62 var(--sans);
  -webkit-text-size-adjust: 100%;
}

a, button, .nav__item, .find__go { touch-action: manipulation; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--fail); }

h1, h2, h3 { font-weight: 600; line-height: 1.25; margin: 0 0 .5em; letter-spacing: -.2px; }
h1 { font-size: 26px; }
h2 { font-size: 19px; margin-top: 1.7em; }
h3 { font-size: 16px; margin-top: 1.4em; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0 0 1em; padding-left: 20px; }
li { margin-bottom: .25em; }

/* Justified body copy; interface lines keep their own alignment. */
p, li, dd, .item__text, .flag, .sect__note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.kicker, .tally, .doing, .meter__label, .find__bad, .foot, .promo small,
.types, .spread, .grid td, .grid th, .recent, .nav__item, .mark__tag {
  text-align: left;
  hyphens: manual;
}
.tries, .find__note, .wait__subject, .wait__msg, .wait__log { text-align: center; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; background: var(--paper); padding: 8px 12px; border: 1px solid var(--ink); z-index: 60; }

/* ---------- sticky head: logo row + search + menu travel together ---------- */
.shell-top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  box-shadow: 0 1px 4px rgba(20, 23, 26, .12);
}

/* ---------- logo row + long search ---------------------------------------- */
.top { background: var(--paper); }
.top__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px 24px 14px;
  transition: padding .12s linear;
  display: flex;
  align-items: center;
  gap: 26px;
}

.mark { text-decoration: none; color: var(--ink); flex: 0 0 auto; line-height: 1.1; }
.mark:hover { color: var(--ink); }
.mark__name { font: 700 24px/1 var(--sans); letter-spacing: -.9px; }
.mark__dot { font: 700 24px/1 var(--sans); color: var(--accent); }
.mark__tag { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

.find { flex: 1 1 auto; min-width: 0; }
.find__row { display: flex; align-items: stretch; }
.find__field {
  flex: 1 1 auto;
  min-width: 0;
  font: 15px/1.2 var(--mono);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-dark);
  border-right: none;
  padding: 10px 12px;
  outline: none;
}
.find__field:focus { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.find__field::placeholder { color: var(--ink-faint); }
.find__pick {
  font: 13px/1 var(--sans);
  border: 1px solid var(--rule-dark);
  border-right: none;
  background: var(--shade);
  padding: 0 6px;
  outline: none;
}
.find__go {
  flex: 0 0 auto;
  font: 600 13px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0 24px;
  cursor: pointer;
}
.find__go:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.find__go[disabled] { opacity: .65; cursor: default; }
.find__note, .find__bad { font-size: 13px; margin: 8px 0 0; }
.find__note { color: var(--ink-faint); text-align: center; }
.find__bad { color: var(--fail); font-weight: 500; }

.find--full { width: 100%; margin: 22px 0 0; }
.find--full .find__field { font-size: 18px; padding: 14px 16px; }
.find--full .find__go { padding: 0 34px; font-size: 14px; }

/* ---------- sticky blue navigation ---------------------------------------- */
.nav { background: var(--accent); }
.nav__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
}
.nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 8px;
  color: #fff;
  text-decoration: none;
  font: 600 16.5px/1 var(--sans);
  border-right: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.nav__item:first-child { border-left: 1px solid rgba(255, 255, 255, .18); }
.nav__item:hover { color: #fff; background: var(--accent-dark); text-decoration: none; }
.nav__item.on { background: var(--accent-dark); border-bottom-color: #fff; }
.nav__item svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shell-top.is-scrolled .top__in { padding-top: 8px; padding-bottom: 8px; }
.shell-top.is-scrolled .mark__tag { display: none; }
.shell-top.is-scrolled .mark__name,
.shell-top.is-scrolled .mark__dot { font-size: 20px; }
.shell-top.is-scrolled .find__field { padding-top: 7px; padding-bottom: 7px; }
.shell-top.is-scrolled .nav__item { padding-top: 10px; padding-bottom: 10px; }

/* ---------- page ------------------------------------------------------------ */
.page { max-width: var(--shell); margin: 0 auto; padding: 28px 24px 60px; }

/* Body copy runs the full width of the main column. */
.col, .lead { max-width: none; }

.lede { font-size: 16.5px; color: var(--ink-soft); }

.kicker {
  font: 600 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}

.tries { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 0; text-align: center; }
.tries a { margin: 0 7px; }

/* ---------- recently checked ------------------------------------------------ */
.recent {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.recent li { margin: 0; }
.recent a {
  display: inline-block;
  font: 12.5px/1 var(--mono);
  color: var(--ink-soft);
  background: var(--shade);
  border: 1px solid var(--rule);
  padding: 6px 9px;
  text-decoration: none;
}
.recent a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); }

/* ---------- report headline: the score is the headline ---------------------- */
.head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 18px;
}
.head__left { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.head__name { font: 600 30px/1.2 var(--mono); letter-spacing: -.9px; word-break: break-all; margin: 0 0 10px; }
.head__when { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; text-align: left; }

.tally { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.tally b { font-size: 19px; font-weight: 700; }
.tally .t-fail b { color: var(--fail); }
.tally .t-warn b { color: var(--warn); }
.tally .t-pass b { color: var(--pass); }
.tally span { color: var(--ink-soft); }

.score {
  flex: 0 0 268px;
  border: 2px solid var(--band, var(--sc-even));
  background: var(--paper);
  padding: 14px 20px 18px;
  text-align: center;
}
.score--excellent { --band: var(--sc-excellent); }
.score--fair      { --band: var(--sc-fair); }
.score--even      { --band: var(--sc-even); }
.score--poor      { --band: var(--sc-poor); }

.score__label {
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
  text-align: center;
}
.score__figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--band, var(--sc-even));
}

.score__num { font: 700 62px/1 var(--sans); letter-spacing: -2.5px; }
.score__den { font: 600 19px/1 var(--sans); }
.score__grade {
  align-self: center;
  margin-left: 10px;
  min-width: 40px;
  padding: 5px 8px;
  font: 700 20px/1 var(--sans);
  letter-spacing: -.5px;
  color: #fff;
  background: var(--band, var(--sc-even));
}

.score__bar { height: 8px; background: var(--rule); margin: 14px 0 0; }
.score__bar i { display: block; height: 100%; background: var(--band, var(--sc-even)); }

.doing { font-size: 13.5px; margin: 14px 0 0; }
.doing a { margin-right: 16px; }

.flag {
  border-left: 3px solid var(--warn);
  background: var(--shade);
  padding: 12px 16px;
  margin: 20px 0;
}
.flag--bad { border-left-color: var(--fail); }
.flag--good { border-left-color: var(--pass); }

/* ---------- sections and findings --------------------------------------------- */
.sect { margin: 38px 0 0; scroll-margin-top: 130px; }
.sect__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 6px;
}
.sect__n { font: 600 11.5px/1 var(--mono); color: var(--ink-faint); width: var(--gutter); flex: none; }
.sect__title { font-size: 17px; margin: 0; }
.sect__score { margin-left: auto; font-size: 12.5px; color: var(--ink-faint); }
.sect__note { font-size: 13.5px; color: var(--ink-faint); margin: 8px 0 0 calc(var(--gutter) + 14px); }

.find-list { margin: 0; padding: 0; list-style: none; }

.item { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 130px; }
.item:last-child { border-bottom: none; }

.item__verdict {
  width: var(--gutter);
  flex: none;
  font: 600 10.5px/1.7 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-top: 3px;
}
.item--pass .item__verdict { color: var(--pass); }
.item--warn .item__verdict { color: var(--warn); }
.item--fail .item__verdict { color: var(--fail); }
.item--info .item__verdict { color: var(--info); }
.item--error .item__verdict { color: var(--ink-faint); }
.item__verdict::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  vertical-align: middle;
  margin-right: 7px;
  background: currentColor;
}

.item__body { min-width: 0; flex: 1; }
.item__name { font-weight: 600; font-size: 14.5px; margin: 0 0 3px; }
.item__text { margin: 0; color: var(--ink-soft); }
.item__text a { font-size: 12.5px; }
.item--fail .item__name { color: var(--fail); }

.said {
  font: 12px/1.7 var(--mono);
  color: var(--ink-soft);
  background: var(--shade);
  border-left: 2px solid var(--rule-dark);
  padding: 9px 12px;
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ---------- borderless data tables --------------------------------------------- */
.grid { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 0; }
.grid th {
  text-align: left;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 14px 6px 0;
  border-bottom: 1px solid var(--rule-dark);
  white-space: nowrap;
}
.grid td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft); }
.grid tr:last-child td { border-bottom: none; }
.grid td.m { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.grid td.any { word-break: break-all; }
.grid .yes { color: var(--pass); font-weight: 600; }
.grid .no { color: var(--fail); font-weight: 600; }
.grid tr.odd td { background: var(--accent-weak); box-shadow: inset 2px 0 0 var(--warn); }
.dim { color: var(--ink-faint); }
.tablewrap { overflow-x: auto; }

.sift {
  font: 12.5px/1 var(--sans);
  border: none;
  border-bottom: 1px solid var(--rule-dark);
  background: transparent;
  padding: 4px 2px;
  color: var(--ink);
  outline: none;
  width: 130px;
}
.sift:focus { border-bottom-color: var(--accent); }

/* ---------- propagation ---------------------------------------------------------- */
.types { font-size: 13px; color: var(--ink-faint); margin: 0 0 14px; }
.types a { margin-right: 10px; text-decoration: none; border-bottom: 1px solid transparent; }
.types a:hover { border-bottom-color: var(--accent); }
.types a.on { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--ink); }
.types .apart { margin-left: 12px; }

.spread { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13.5px; }
.spread__track { width: 190px; height: 4px; background: var(--rule); position: relative; flex: none; }
.spread__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--pass); transition: width .5s ease; }
.spread__fill.mixed { background: var(--warn); }

/* ---------- long-form text --------------------------------------------------------- */
.copy { max-width: none; }
.copy h2 { border-bottom: 1px solid var(--rule); padding-bottom: 5px; scroll-margin-top: 130px; }
.copy h3 { scroll-margin-top: 130px; }
.copy p { color: var(--ink-soft); }
.copy dt { font-weight: 600; margin-top: 14px; }
.copy dd { margin: 3px 0 0; color: var(--ink-soft); }
.copy code { font: 12.5px var(--mono); background: var(--shade); padding: 1px 4px; }

/* ---------- waiting screen ---------------------------------------------------------- */
.wait {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade .18s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.wait__box { width: 100%; max-width: 460px; text-align: center; }
.wait__subject { font: 600 20px/1.3 var(--mono); letter-spacing: -.6px; margin: 0 0 18px; word-break: break-all; }
.wait__bar { height: 4px; background: var(--rule); overflow: hidden; position: relative; }
.wait__bar i {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 34%;
  background: var(--accent);
  animation: sweep 1.15s cubic-bezier(.65, .05, .36, 1) infinite;
}
@keyframes sweep {
  0% { left: -34%; width: 34%; }
  55% { width: 46%; }
  100% { left: 100%; width: 26%; }
}
.wait__msg { font-size: 14px; color: var(--ink); margin: 14px 0 0; min-height: 1.6em; }
.wait__log { list-style: none; margin: 6px 0 0; padding: 0; font: 12px/1.8 var(--mono); color: var(--ink-faint); }
.wait__log li { margin: 0; opacity: .85; }
.wait__log li:nth-child(2) { opacity: .55; }
.wait__log li:nth-child(3) { opacity: .3; }

/* ---------- ads (always centred) ------------------------------------------------------ */
.promo { margin: 30px auto; max-width: 760px; text-align: center; }
.promo small {
  display: block;
  font: 10px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 6px;
  margin-bottom: 8px;
}
.promo .slot {
  border: 1px dashed var(--rule-dark);
  color: var(--ink-faint);
  font-size: 12px;
  padding: 34px 0;
}
.promo ins { margin: 0 auto; }

/* ---------- footer ---------------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  margin-top: 50px;
  padding-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot .end { margin-left: auto; }
.foot b { color: var(--ink-soft); font-weight: 600; }

/* ---------- small screens ----------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav__item { font-size: 15px; gap: 7px; padding: 12px 5px; }
  .nav__item svg { width: 17px; height: 17px; }
}

@media (max-width: 680px) {
  :root { --gutter: 0px; }
  .top__in { flex-direction: column; align-items: stretch; gap: 9px; padding: 10px 16px; }
  .mark { text-align: center; }
  .mark__tag { display: none; }
  .shell-top.is-scrolled .top__in { padding-top: 6px; padding-bottom: 6px; }
  .sect, .item, .copy h2, .copy h3 { scroll-margin-top: 150px; }
  .page { padding: 22px 16px 46px; }
  /* One row that scrolls sideways: every label stays whole and the bar keeps
     the same height whether you are at the top of the page or not. The item
     cut off at the right edge is what tells you it scrolls. */
  .nav__in {
    padding: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__in::-webkit-scrollbar { display: none; }
  .nav__item {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    padding: 12px 18px;
    font-size: 14.5px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .item { display: block; }
  .item__verdict { width: auto; margin-bottom: 4px; }
  .sect__n { display: none; }
  .sect__note { margin-left: 0; }
  .head__name { font-size: 21px; }
  .head { gap: 18px; }
  .score { flex: 1 1 100%; }
  .score__num { font-size: 52px; }
  /* Any control under 16px makes iOS zoom the page when it gets focus, which
     is the "the page jumps when I tap the box" effect. Never below 16px here;
     the visitor can still pinch to zoom whenever they want. */
  .find__field, .find__pick, .find__go, .sift,
  input, select, textarea, button { font-size: 16px; }

  /* Landing search: field on top, button below at 80% of the screen. */
  .find--full .find__row { flex-direction: column; align-items: center; }
  .find--full .find__field {
    width: 100%;
    font-size: 16px;
    padding: 13px 12px;
    border-right: 1px solid var(--rule-dark);
  }
  .find--full .find__go { width: 80%; margin-top: 10px; padding: 14px 0; font-size: 14px; }
  .find__go { padding: 0 16px; }
  .foot .end { margin-left: 0; }
}

@media print {
  .top, .nav, .promo, .doing, .sift, .wait { display: none; }
  .item { break-inside: avoid; }
}