/* =========================================================================
   Bench tools — shared page layer
   -------------------------------------------------------------------------
   Loaded after editor-bench.css by the smaller two-pane tools (JWT, Base64,
   URL, GUID). The bench already provides the panels, splitter, editors,
   status line, notes and toasts; this adds the few components those four
   need and the bench does not have: the claim table, the callout note, and
   a plain output textarea.
   ========================================================================= */

/* ---- output pane that is a textarea rather than a rendered view --------- */
.qdt-bench .out-pane{
  display: flex; flex: 1; min-height: 0;
  background: var(--edit-bg);
}
.qdt-bench .out-pane textarea{
  flex: 1; min-width: 0; padding: 12px;
  border: 0; outline: none; resize: none; background: transparent;
  font: var(--code); color: var(--ink);
  white-space: pre-wrap; word-break: break-all;
  overflow: auto; overscroll-behavior: contain;
}
.qdt-bench .out-pane textarea::placeholder{ color: var(--ink-3); }

/* ---- key / value table used for claims, URL parts and UUID facts ------- */
.qdt-bench .claim-scroll{
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: var(--edit-bg);
}
.qdt-bench table.claims{ width: 100%; border-collapse: collapse; }
.qdt-bench table.claims td{
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
}
.qdt-bench table.claims tr:last-child td{ border-bottom: 0; }
.qdt-bench table.claims tr:hover td{ background: var(--edit-bg-2); }

.qdt-bench .claim-key{ width: 30%; min-width: 130px; white-space: nowrap; }
.qdt-bench .claim-key code{
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--sx-key);
}
.qdt-bench .claim-name{
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--ink-3);
}

.qdt-bench .claim-val{ display: table-cell; }
.qdt-bench .claim-raw{
  display: block;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  word-break: break-word;
}
.qdt-bench .claim-when{
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 11px; color: var(--sx-num);
}
/* The explanation is the point of these pages, so it is styled to be read
   rather than tucked away as a tooltip. */
.qdt-bench .claim-help{
  display: block; margin-top: 5px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  max-width: 62ch;
}
.qdt-bench .claim-section{
  background: var(--edit-bg-2);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ---- callout used for algorithm and validity warnings ------------------ */
.qdt-bench .jwt-note{
  margin: 14px; padding: 13px 15px;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--paper);
}
.qdt-bench .jwt-note.ok  { border-left-color: var(--ok); }
.qdt-bench .jwt-note.warn{ border-left-color: var(--warn); }
.qdt-bench .jwt-note.bad { border-left-color: var(--bad); }
.qdt-bench .jwt-note strong{ display: block; margin-bottom: 4px; color: var(--ink); font-size: 14px; }
.qdt-bench .jwt-note p{ margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; }

/* ---- the three coloured segments of a raw token ------------------------ */
.qdt-bench .raw-parts{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 16px 14px 4px;
  font: var(--code); word-break: break-all;
}
.qdt-bench .raw-part{ display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; }
.qdt-bench .raw-label{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .raw-part code{
  padding: 6px 8px; border-radius: var(--r-sm);
  word-break: break-all; line-height: 1.55;
}
.qdt-bench .raw-part.p0 code{ background: rgba(179, 38, 30, .10);  color: var(--sx-key); }
.qdt-bench .raw-part.p1 code{ background: rgba(10, 115, 85, .10);  color: var(--sx-str); }
.qdt-bench .raw-part.p2 code{ background: rgba(122, 75, 189, .10); color: #7a4bbd; }
.qdt-bench .raw-dot{ font: var(--code); color: var(--ink-3); padding: 0 2px; align-self: flex-end; }
.qdt-bench .raw-help{
  margin: 12px 14px 16px; font-size: 13px; line-height: 1.6;
  color: var(--ink-2); max-width: 70ch;
}

.qdt-bench pre.jwt-json{
  margin: 0; padding: 14px; flex: 1; min-height: 0;
  overflow: auto; overscroll-behavior: contain;
  font: var(--code); color: var(--ink); background: var(--edit-bg);
}

/* ---- small numeric input used for "how many" --------------------------- */
.qdt-bench .count-input{
  width: 74px; height: 30px; padding: 0 8px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
  text-align: right;
}

/* ---- inline single-line field (UUID inspector) ------------------------- */
.qdt-bench .inline-field{
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.qdt-bench .inline-field .icon{ width: 14px; height: 14px; color: var(--ink-3); flex: 0 0 auto; }
.qdt-bench .inline-field input{
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink);
}

/* ---- comparison grid used in the explainer sections -------------------- */
.qdt-bench .compare-grid{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.qdt-bench .compare-card{
  padding: 18px 20px;
  border: 1px solid var(--rule); border-left: 3px solid var(--mark);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--paper);
}
.qdt-bench .compare-card h3{
  margin: 0 0 4px; font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.qdt-bench .compare-card code{
  display: inline-block; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--mark-deep);
}
.qdt-bench .compare-card p{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---- reference table in the explainer ---------------------------------- */
.qdt-bench .ref-table{
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden;
  background: var(--paper);
}
.qdt-bench .ref-table th{
  padding: 10px 14px; text-align: left;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .ref-table td{
  padding: 11px 14px; border-bottom: 1px solid var(--rule-2);
  font-size: 13.5px; color: var(--ink-2); vertical-align: top;
}
.qdt-bench .ref-table tr:last-child td{ border-bottom: 0; }
.qdt-bench .ref-table code{
  font-family: var(--font-mono); font-size: 12px; color: var(--sx-key);
  white-space: nowrap;
}
.qdt-bench .table-wrap{ overflow-x: auto; }

/* =========================================================================
   AI TOKEN CALCULATOR
   ========================================================================= */
.qdt-bench .cost-grid{
  display: grid; gap: 12px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.qdt-bench .cost-card{
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper);
}
/* The per-request figure is the one people came for. */
.qdt-bench .cost-card.is-hero{
  border-color: var(--mark-line);
  background: linear-gradient(180deg, var(--mark-soft), var(--paper) 70%);
}
.qdt-bench .cost-label{
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .cost-value{
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.qdt-bench .cost-card.is-hero .cost-value{ color: var(--mark-deep); }
.qdt-bench .cost-sub{ font-size: 12px; color: var(--ink-3); }

.qdt-bench .cost-split{ padding: 0 14px 4px; display: grid; gap: 8px; }
.qdt-bench .split-row{ display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 10px; }
.qdt-bench .split-label{ font-size: 12.5px; color: var(--ink-2); }
.qdt-bench .split-bar{
  height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden;
}
.qdt-bench .split-bar i{ display: block; height: 100%; background: var(--mark); }
.qdt-bench .split-row:last-child .split-bar i{ background: var(--accent); }
.qdt-bench .split-value{
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qdt-bench .cost-note{
  margin: 10px 14px 16px; font-size: 13px; line-height: 1.6;
  color: var(--ink-2); max-width: 70ch;
}

/* ---- context window meter ---------------------------------------------- */
.qdt-bench .ctx-wrap{ padding: 14px; border-top: 1px solid var(--rule-2); }
.qdt-bench .ctx-head{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 8px; font-size: 13px; color: var(--ink-2);
}
.qdt-bench .ctx-head strong{ color: var(--ink); }
.qdt-bench .ctx-head span{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); }
.qdt-bench .ctx-track{
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--paper-3); border: 1px solid var(--rule);
}
.qdt-bench .ctx-track i{ display: block; height: 100%; transition: width .25s ease; }
.qdt-bench .seg-prompt{ background: var(--mark); }
.qdt-bench .seg-out{ background: var(--accent); }
.qdt-bench .seg-free{ background: transparent; }
.qdt-bench .ctx-key{
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
}
.qdt-bench .ctx-key i{
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px;
}
.qdt-bench .k-prompt{ background: var(--mark); }
.qdt-bench .k-out{ background: var(--accent); }
.qdt-bench .k-free{ background: var(--paper-3); border: 1px solid var(--rule); }
.qdt-bench .ctx-warn{
  margin: 10px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--bad); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--bad-soft); font-size: 12.5px; color: var(--ink-2);
}

/* ---- the model / price control grid ------------------------------------ */
.qdt-bench .field-grid{
  display: grid; gap: 10px 14px; padding: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.qdt-bench .field{ display: flex; flex-direction: column; gap: 5px; }
.qdt-bench .field > span{
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .field input,
.qdt-bench .field select{
  height: 32px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper);
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink);
  width: 100%;
}
.qdt-bench .field input:focus,
.qdt-bench .field select:focus{ outline: 2px solid var(--mark); outline-offset: 1px; }
.qdt-bench .field small{ font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }

/* =========================================================================
   SEO CHECKER
   ========================================================================= */
/* ---------- content pane (seo-checker) ---------------------------------- */
.qdt-bench .content-wrap{ padding-bottom: 18px; }
.qdt-bench .cstat-grid{
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 16px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden;
}
.qdt-bench .cstat{ padding: 12px 14px; background: var(--paper); }
.qdt-bench .cs-label{
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .cstat b{ display: block; margin: 5px 0 2px; font-size: 21px; color: var(--ink); }
.qdt-bench .cs-sub{ font-size: 11px; line-height: 1.45; color: var(--ink-3); }
.qdt-bench .cstat.is-ok b{ color: var(--ok); }
.qdt-bench .cstat.is-warn b{ color: var(--warn); }
.qdt-bench .cstat.is-bad b{ color: var(--bad); }

/* Heading outline. Indent carries the level, so the shape of the document is
   visible at a glance without reading a single word of it. */
.qdt-bench .h-tree{ padding: 0 16px; }
.qdt-bench .h-node{
  display: flex; align-items: baseline; gap: 9px;
  padding: 5px 0 5px 0; border-bottom: 1px solid var(--rule);
}
.qdt-bench .h-node.lvl-2{ padding-left: 18px; }
.qdt-bench .h-node.lvl-3{ padding-left: 36px; }
.qdt-bench .h-node.lvl-4{ padding-left: 54px; }
.qdt-bench .h-node.lvl-5{ padding-left: 72px; }
.qdt-bench .h-node.lvl-6{ padding-left: 90px; }
.qdt-bench .h-tag{
  flex: 0 0 auto; padding: 1px 6px; border-radius: 4px;
  background: var(--paper-2); border: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--ink-3);
}
.qdt-bench .h-node.lvl-1 .h-tag{ background: var(--mark-soft); border-color: transparent; color: var(--mark); }
.qdt-bench .h-text{ font-size: 13px; line-height: 1.5; color: var(--ink); min-width: 0; }
.qdt-bench .h-node.is-skip{ background: var(--warn-soft); }
.qdt-bench .h-warn{
  margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .06em; color: var(--warn);
}

/* Keyword frequency. The bar is relative to the top term, which makes the
   distribution readable without needing an axis. */
.qdt-bench .kw-list{ padding: 0 16px; display: grid; gap: 5px; }
.qdt-bench .kw{
  display: grid; grid-template-columns: minmax(90px, 1.4fr) 1fr 34px 52px;
  gap: 10px; align-items: center;
}
.qdt-bench .kw-term{ font-size: 12.5px; color: var(--ink); word-break: break-word; }
.qdt-bench .kw-bar{ height: 7px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.qdt-bench .kw-bar i{ display: block; height: 100%; background: var(--mark); }
.qdt-bench .kw-n{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); text-align: right; }
.qdt-bench .kw-d{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); text-align: right; }

.qdt-bench .cnote{
  margin: 12px 16px 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 72ch;
}
.qdt-bench .cnote.is-warn{ color: var(--warn); }

@media (max-width: 640px){
  .qdt-bench .kw{ grid-template-columns: 1fr 42px 52px; }
  .qdt-bench .kw-bar{ display: none; }
}

/* ---------- page facts (seo-checker, left panel) ------------------------
   What the page actually contains, as opposed to what is wrong with it. The
   colour carries the verdict so the panel is scannable before it is read. */
.qdt-bench .section-mini{
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  padding: 16px 16px 8px;
}
.qdt-bench .facts-wrap{ padding-bottom: 14px; }
.qdt-bench .fact-group + .fact-group{ border-top: 1px solid var(--rule); }
.qdt-bench .fact-grid{
  display: grid; gap: 8px; padding: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.qdt-bench .fact{
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  background: var(--paper);
}
.qdt-bench .fact.is-ok  { border-left-color: var(--ok);   background: var(--ok-soft); }
.qdt-bench .fact.is-warn{ border-left-color: var(--warn); background: var(--warn-soft); }
.qdt-bench .fact.is-bad { border-left-color: var(--bad);  background: var(--bad-soft); }
.qdt-bench .fact.is-idle{ border-left-color: var(--rule-2); }

.qdt-bench .fact-top{ display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.qdt-bench .fact-icon{
  min-width: 22px; height: 20px; padding: 0 5px; border-radius: 5px;
  display: inline-grid; place-items: center;
  background: var(--paper); border: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: var(--ink-2);
}
.qdt-bench .fact-label{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .fact-value{
  font-size: 13px; line-height: 1.5; color: var(--ink); word-break: break-word;
  /* Long titles and canonicals must not stretch the card past its column. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.qdt-bench .fact-note{ margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
.qdt-bench .fact-missing{ color: var(--bad); font-style: italic; }

/* ---------- expandable score categories --------------------------------- */
.qdt-bench .cat-row{ border-bottom: 1px solid var(--rule); }
.qdt-bench .cat-row > summary{
  display: grid; grid-template-columns: 14px 132px 1fr 34px;
  gap: 12px; align-items: center; padding: 9px 0;
  cursor: pointer; list-style: none;
}
.qdt-bench .cat-row > summary::-webkit-details-marker{ display: none; }
.qdt-bench .cat-row > summary:hover .cat-name{ color: var(--mark); }

/* Drawn twisty rather than a glyph, matching the FAQ accordion. */
.qdt-bench .cat-tw{ position: relative; width: 14px; height: 14px; }
.qdt-bench .cat-tw::before{
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3); transform: rotate(-45deg);
  transition: transform .18s;
}
.qdt-bench .cat-row[open] .cat-tw::before{ transform: rotate(45deg); }

.qdt-bench .cat-detail{ padding: 4px 0 14px 26px; }
.qdt-bench .cat-sum{
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch;
}
.qdt-bench .cat-sum b{ color: var(--ink); }
.qdt-bench .cat-sum .tone-bad{ color: var(--bad); }
.qdt-bench .cat-sum .tone-warn{ color: var(--warn); }

.qdt-bench .cat-check{
  display: grid; grid-template-columns: 18px 1fr auto; gap: 10px;
  padding: 9px 11px; margin-bottom: 6px;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  border-radius: var(--r-sm); background: var(--paper);
}
.qdt-bench .cat-check.tone-ok  { border-left-color: var(--ok); }
.qdt-bench .cat-check.tone-warn{ border-left-color: var(--warn); }
.qdt-bench .cat-check.tone-bad { border-left-color: var(--bad); }
.qdt-bench .cc-mark{
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; background: var(--ink-3);
}
.qdt-bench .cat-check.tone-ok   .cc-mark{ background: var(--ok); }
.qdt-bench .cat-check.tone-warn .cc-mark{ background: var(--warn); }
.qdt-bench .cat-check.tone-bad  .cc-mark{ background: var(--bad); }
.qdt-bench .cc-body{ min-width: 0; }
.qdt-bench .cc-body strong{ display: block; font-size: 13px; color: var(--ink); }
.qdt-bench .cc-found{ display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.qdt-bench .cc-fix{ display: block; margin-top: 5px; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.qdt-bench .cc-fix b{ color: var(--ink); }
.qdt-bench .cc-impact{
  align-self: start; padding: 2px 7px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--rule);
}
.qdt-bench .cc-impact.impact-high{ border-color: transparent; background: var(--bad-soft); color: var(--bad); }
.qdt-bench .cc-impact.impact-medium{ border-color: transparent; background: var(--warn-soft); color: var(--warn); }

.qdt-bench .score-serp{ border-top: 1px solid var(--rule); margin-top: 14px; }

/* ---------- Google SERP preview (seo-checker) ---------------------------
   Reproduces a real result closely enough to be useful. Colours and fonts are
   Google's, not the site's, because the point is to show what the searcher
   will see - restyling it in our palette would defeat the exercise. */
.qdt-bench .serp-wrap{ padding: 16px; }

.qdt-bench .serp-toolbar{ display: inline-flex; gap: 0; margin-bottom: 16px; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.qdt-bench .serp-tab{
  padding: 7px 16px; border: 0; background: var(--paper);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); cursor: pointer;
}
.qdt-bench .serp-tab + .serp-tab{ border-left: 1px solid var(--rule); }
.qdt-bench .serp-tab.is-on{ background: var(--ink); color: var(--paper); }

.qdt-bench .serp-stage{
  padding: 20px; border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; margin-bottom: 16px;
}
html[data-theme="dark"] .qdt-bench .serp-stage{ background: #202124; border-color: #3c4043; }

.qdt-bench .serp-stage.is-desktop .serp-result{ max-width: 600px; }
.qdt-bench .serp-stage.is-mobile .serp-result{ max-width: 400px; }

.qdt-bench .serp-site{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.qdt-bench .serp-favicon{
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: #f1f3f4; color: #5f6368;
  font: 600 12px Arial, sans-serif;
}
html[data-theme="dark"] .qdt-bench .serp-favicon{ background: #303134; color: #bdc1c6; }
.qdt-bench .serp-site-text{ display: flex; flex-direction: column; min-width: 0; }
.qdt-bench .serp-host{ font: 14px Arial, sans-serif; color: #202124; line-height: 1.3; }
.qdt-bench .serp-crumb{ font: 12px Arial, sans-serif; color: #4d5156; line-height: 1.3; }
html[data-theme="dark"] .qdt-bench .serp-host{ color: #e8eaed; }
html[data-theme="dark"] .qdt-bench .serp-crumb{ color: #bdc1c6; }

.qdt-bench .serp-title{
  margin: 0 0 4px; font: 20px Arial, sans-serif; line-height: 1.3;
  color: #1a0dab; cursor: pointer;
}
.qdt-bench .serp-stage.is-mobile .serp-title{ font-size: 18px; }
.qdt-bench .serp-title:hover{ text-decoration: underline; }
html[data-theme="dark"] .qdt-bench .serp-title{ color: #8ab4f8; }

.qdt-bench .serp-desc{ margin: 0; font: 14px Arial, sans-serif; line-height: 1.58; color: #4d5156; }
html[data-theme="dark"] .qdt-bench .serp-desc{ color: #bdc1c6; }
.qdt-bench .serp-missing{ color: #b3261e; font-style: italic; }

.qdt-bench .serp-flags{ display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.qdt-bench .serp-flag{
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
}
.qdt-bench .serp-flag.is-ok{ background: var(--ok-soft); color: var(--ok); }
.qdt-bench .serp-flag.is-warn{ background: var(--warn-soft); color: var(--warn); }
.qdt-bench .serp-flag.is-bad{ background: var(--bad-soft); color: var(--bad); }

.qdt-bench .serp-metrics{
  display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; margin-bottom: 16px;
}
.qdt-bench .serp-metric{ padding: 12px 14px; background: var(--paper); }
.qdt-bench .serp-metric .sm-label{
  display: block; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .serp-metric b{ display: block; margin: 5px 0 2px; font-size: 19px; color: var(--ink); }
.qdt-bench .serp-metric .sm-sub{ font-size: 11px; color: var(--ink-3); }
.qdt-bench .serp-metric.is-ok b{ color: var(--ok); }
.qdt-bench .serp-metric.is-warn b{ color: var(--warn); }
.qdt-bench .serp-metric.is-bad b{ color: var(--bad); }

.qdt-bench .serp-raw{ border-top: 1px solid var(--rule); margin-bottom: 14px; }
.qdt-bench .serp-raw-row{
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.qdt-bench .serp-raw-row > span{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.qdt-bench .serp-raw-row code{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); word-break: break-word; }

.qdt-bench .serp-note{ margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); max-width: 72ch; }

@media (max-width: 640px){
  .qdt-bench .serp-raw-row{ grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* ---------- deep-dive hand-off to the website inspector ----------------- */
.qdt-bench .deep-cta{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 22px 0 4px; padding: 18px 20px;
  border: 1px solid var(--rule); border-left: 3px solid var(--mark);
  border-radius: var(--r); background: var(--paper);
  text-decoration: none; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.qdt-bench .deep-cta:hover{ border-color: var(--mark); transform: translateY(-2px); box-shadow: var(--qdt-shadow); }
.qdt-bench .deep-icon{
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--mark-soft); color: var(--mark);
}
.qdt-bench .deep-icon .icon{ width: 20px; height: 20px; }
.qdt-bench .deep-body{ flex: 1 1 320px; min-width: 0; }
.qdt-bench .deep-body strong{ display: block; margin-bottom: 4px; font-size: 15.5px; color: var(--ink); }
.qdt-bench .deep-body span{ font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.qdt-bench .deep-go{
  flex: 0 0 auto; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .06em; color: var(--mark); white-space: nowrap;
}

/* ---------- "this isn't JSON" panel (json-formatter) ---------------------
   Replaces the caret/column error when the input is recognisably some other
   format. Deliberately looks like an answer rather than a failure. */
.qdt-bench .det-panel,
.jsonfmt-page .det-panel{
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--mark);
  border-radius: var(--r);
  background: var(--paper-2);
}
.jsonfmt-page .det-panel.is-fix{ border-left-color: var(--ok); }

.jsonfmt-page .det-head{ display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.jsonfmt-page .det-tag{
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mark);
}
.jsonfmt-page .det-head strong{ font-size: 15px; color: var(--ink); }
.jsonfmt-page .det-why{ margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }

.jsonfmt-page .det-btn{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border: 0; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  color: var(--paper); background: var(--ink);
  text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.jsonfmt-page .det-btn:hover{ transform: translateY(-1px); box-shadow: var(--qdt-shadow); }
.jsonfmt-page .det-none{ font-size: 12.5px; color: var(--ink-3); }

/* ---------- object dump viewer ------------------------------------------ */
.qdt-bench .strip-select{
  padding: 5px 9px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.qdt-bench .strip-select:focus{ outline: none; border-color: var(--mark); box-shadow: 0 0 0 3px var(--mark-soft); }

/* Values the source format could not carry. Greyed and italic so they read as
   absent rather than as a string whose contents happen to be that text. */
.qdt-bench .n-missing{ color: var(--ink-3); font-style: italic; }

.qdt-bench .code-out{
  margin: 0; padding: 14px 16px;
  font: var(--code); color: var(--ink);
  white-space: pre; overflow: auto;
}

.qdt-bench .dump-notes{ margin: 0; padding: 14px 16px 6px 32px; display: grid; gap: 9px; }
.qdt-bench .dump-notes li{ font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.qdt-bench .dump-note-foot{
  margin: 6px 16px 16px; padding-top: 11px; border-top: 1px solid var(--rule);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 70ch;
}

.qdt-bench .url-row{ display: flex; gap: 8px; padding: 14px; flex-wrap: wrap; }
.qdt-bench .url-field{
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 220px;
  height: 40px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper);
}
.qdt-bench .url-field:focus-within{ border-color: var(--mark); box-shadow: 0 0 0 3px var(--mark-soft); }
.qdt-bench .url-field .icon{ width: 15px; height: 15px; color: var(--ink-3); flex: 0 0 auto; }
.qdt-bench .url-field input{
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
}
.qdt-bench .run-btn{
  height: 40px; padding: 0 20px;
  border: 1px solid var(--invert); border-radius: 999px;
  background: var(--invert); color: var(--on-invert);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .16s, box-shadow .16s, opacity .16s;
}
.qdt-bench .run-btn:hover:not(:disabled){ transform: translateY(-1px); box-shadow: var(--qdt-shadow-lg); }
.qdt-bench .run-btn:disabled{ opacity: .55; cursor: wait; }

/* ---- score dial --------------------------------------------------------- */
.qdt-bench .score-wrap{
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 20px 16px 6px;
}
.qdt-bench .score-dial{
  --pct: 0;
  width: 128px; height: 128px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  /* One number, one gradient - no charting library. */
  background: conic-gradient(var(--dial) calc(var(--pct) * 1%), var(--paper-3) 0);
  transition: background .6s cubic-bezier(.4,0,.2,1);
}
.qdt-bench .score-dial.tone-ok  { --dial: var(--ok); }
.qdt-bench .score-dial.tone-warn{ --dial: var(--warn); }
.qdt-bench .score-dial.tone-bad { --dial: var(--bad); }
.qdt-bench .score-inner{
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--paper);
  display: grid; place-items: center; align-content: center; gap: 1px;
  box-shadow: var(--qdt-shadow);
}
.qdt-bench .score-inner b{
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.qdt-bench .score-inner span{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .score-copy{ flex: 1; min-width: 200px; }
.qdt-bench .score-verdict{ margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.qdt-bench .score-url code{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); word-break: break-all; }
.qdt-bench .score-note{ margin: 6px 0 0; font-size: 12px; color: var(--ink-3); }

/* ---- per-category bars -------------------------------------------------- */
.qdt-bench .cat-list{ display: grid; gap: 9px; padding: 12px 16px 20px; }
.qdt-bench .cat-row{ display: grid; grid-template-columns: 132px 1fr 34px; gap: 12px; align-items: center; }
.qdt-bench .cat-name{ font-size: 12.5px; color: var(--ink-2); }
.qdt-bench .cat-bar{ height: 8px; border-radius: 999px; background: var(--paper-3); overflow: hidden; }
.qdt-bench .cat-bar i{ display: block; height: 100%; transition: width .5s cubic-bezier(.4,0,.2,1); }
.qdt-bench .cat-bar i.tone-ok{ background: var(--ok); }
.qdt-bench .cat-bar i.tone-warn{ background: var(--warn); }
.qdt-bench .cat-bar i.tone-bad{ background: var(--bad); }
.qdt-bench .cat-val{
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ---- prioritised fixes -------------------------------------------------- */
.qdt-bench .fix-list{ list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; }
.qdt-bench .fix{
  display: grid; grid-template-columns: 28px 1fr; gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--rule); border-left: 3px solid var(--ink-3);
  border-radius: 0 var(--r) var(--r) 0; background: var(--paper);
}
.qdt-bench .fix.tone-bad { border-left-color: var(--bad); }
.qdt-bench .fix.tone-warn{ border-left-color: var(--warn); }
/* Second grid cell. min-width:0 stops a long monospace "found" value forcing
   the whole row wider than its column. */
.qdt-bench .fix-body{ min-width: 0; }

/* Status-bar stat pills. The other bench pages emit bare spans; the SEO
   checker labels them, so the gap between value and label needs setting. */
.qdt-bench .status-stats .stat{ display: inline-flex; align-items: baseline; gap: 5px; }
.qdt-bench .fix-num{
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper-3);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-2);
}
.qdt-bench .fix-head{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.qdt-bench .fix-head strong{ font-size: 14.5px; color: var(--ink); }
.qdt-bench .pill{
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-3);
}
.qdt-bench .pill.impact-high{ border-color: transparent; background: var(--bad-soft); color: var(--bad); }
.qdt-bench .pill.impact-medium{ border-color: transparent; background: var(--warn-soft); color: var(--warn); }
.qdt-bench .fix-found{ margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.qdt-bench .fix-do{ margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.qdt-bench .fix-do b{ color: var(--ink); }

/* ---- full check list ---------------------------------------------------- */
.qdt-bench .chk-group{ padding: 4px 12px 12px; }
.qdt-bench .chk-group h3{
  margin: 14px 0 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.qdt-bench .chk{
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--paper); margin-bottom: 6px;
}
.qdt-bench .chk summary{
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; cursor: pointer; list-style: none;
}
.qdt-bench .chk summary::-webkit-details-marker{ display: none; }
.qdt-bench .chk-mark{
  width: 18px; height: 18px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 10px; font-weight: 700; color: #fff;
}
.qdt-bench .chk.tone-ok   .chk-mark{ background: var(--ok); }
.qdt-bench .chk.tone-warn .chk-mark{ background: var(--warn); }
.qdt-bench .chk.tone-bad  .chk-mark{ background: var(--bad); }
.qdt-bench .chk.tone-info .chk-mark{ background: var(--ink-3); }
.qdt-bench .chk-title{ font-size: 13.5px; color: var(--ink); font-weight: 500; }
.qdt-bench .chk-found{
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); text-align: right;
}
.qdt-bench .chk-body{ padding: 2px 12px 12px 40px; }
.qdt-bench .chk-body p{ margin: 0 0 7px; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 70ch; }
.qdt-bench .chk-body b{ color: var(--ink); }
.qdt-bench .chk-evidence{
  margin: 6px 0 0; padding: 8px 10px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--edit-bg-2);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto;
}