/* =========================================================================
   SEO Checker Detailed — flagship 60-test audit
   -------------------------------------------------------------------------
   Shares its type family with /seo-checker (Bricolage Grotesque / Instrument
   Sans / JetBrains Mono) so the two read as siblings, but gets its own
   palette and its own centerpiece: a circular score gauge with category
   nodes radiating off it, rendered as SVG by seo-checker-detailed.js. Fully
   scoped under .sdx so nothing here can leak into the rest of the site.
   ========================================================================= */

.sdx{
  --bg:#F7F7FB;
  --panel:#FFFFFF;
  --ink:#15151F;
  --ink-2:#454559;
  --slate:#767688;
  --rule:#E4E4EE;
  --rule-soft:#EEEEF6;

  --violet:#5B3DF2;
  --violet-soft:#EFEAFE;
  --amber:#D9820A;
  --amber-soft:#FDF3E3;
  --pass:#0E8A5F;
  --pass-soft:#E4F3ED;
  --warn:#B5790B;
  --warn-soft:#FBF1DE;
  --fail:#C23A2C;
  --fail-soft:#FBEAE8;
  --info:#3B6FF5;
  --info-soft:#EBF1FE;
  --mute:#9A9AAE;
  --mute-soft:#F1F1F8;

  --f-display:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --f-body:"Instrument Sans",-apple-system,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(16px,3vw,28px);
}
.sdx *{box-sizing:border-box}
.sdx{
  margin:0;
  font-family:var(--f-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 480px at 12% -10%, rgba(91,61,242,.07), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(217,130,10,.06), transparent 55%),
    var(--bg);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.sdx img{max-width:100%}
.sdx button{font:inherit;color:inherit;cursor:pointer}
.sdx a{color:var(--violet);text-underline-offset:3px}
.sdx :focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.sdx .wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.sdx i.bi{line-height:1}

/* ---------------------------------------------------------------- hero */
.sdx-hero{padding:clamp(40px,7vw,78px) 0 30px}
.sdx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);background:var(--violet-soft);border-radius:999px;padding:6px 12px 6px 10px;
}
.sdx-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 4px rgba(91,61,242,.15)}
.sdx h1{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(36px,6.6vw,66px);margin:20px 0 0;
}
.sdx-thin{font-weight:400;color:var(--slate)}
.sdx-lede{max-width:60ch;color:var(--ink-2);margin:16px 0 0;font-size:16.5px}

.sdx-intake-form{margin-top:30px}
.sdx-intake-row{
  display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--rule);border-radius:14px;
  box-shadow:0 1px 2px rgba(21,21,31,.04),0 20px 44px -30px rgba(21,21,31,.4);
  overflow:hidden;
}
.sdx-proto{display:flex;align-items:center;padding:0 16px;font-family:var(--f-mono);font-size:13px;color:var(--slate);border-right:1px solid var(--rule-soft);background:#FBFBFE}
.sdx-intake-row input{flex:1;min-width:200px;border:0;padding:20px 16px;font-family:var(--f-mono);font-size:15.5px;background:transparent;color:var(--ink)}
.sdx-intake-row input::placeholder{color:#B4B4C6}
.sdx-intake-row input:focus{outline:none}
.sdx-run{
  border:0;background:var(--ink);color:#fff;padding:0 26px;font-weight:700;font-size:14.5px;
  letter-spacing:-.01em;display:flex;align-items:center;gap:9px;
}
.sdx-run:hover{background:var(--violet)}
.sdx-kbd{font-family:var(--f-mono);font-size:10.5px;opacity:.65;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:1px 5px}

.sdx-samples{margin-top:13px;font-family:var(--f-mono);font-size:11.5px;color:var(--slate);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sdx-samples button{background:none;border:0;border-bottom:1px dashed #C7C7D6;padding:0 0 1px;color:var(--ink-2);font-family:var(--f-mono);font-size:11.5px}
.sdx-samples button:hover{color:var(--violet);border-color:var(--violet)}

/* 7 categories: an auto-fit grid would orphan the last one on a row of its own at most
   widths, so the column count is stepped explicitly - 4+3 on desktop, 2 on tablet, 1 on
   phones. Row separators come from a uniform 1px gap over a ruled background, which keeps
   every cell's borders consistent without per-child nth-child juggling. */
.sdx-catstrip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  border:1px solid var(--rule);border-radius:16px;margin-top:36px;background:var(--rule-soft);overflow:hidden;
}
.sdx-catstrip div{padding:16px 15px;background:var(--panel);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sdx-catstrip i{font-size:16px;color:var(--violet);background:var(--violet-soft);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:2px}
.sdx-catstrip b{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sdx-catstrip span{font-size:12px;color:var(--slate);line-height:1.45}
@media (max-width:900px){ .sdx-catstrip{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sdx-catstrip{grid-template-columns:1fr} }

.sdx-deep{
  margin-top:20px;display:flex;align-items:center;gap:16px;
  background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;
  text-decoration:none;color:inherit;transition:border-color .15s ease,box-shadow .15s ease;
}
.sdx-deep:hover{border-color:var(--violet);box-shadow:0 8px 24px -16px rgba(91,61,242,.4)}
.sdx-deep-ico{width:38px;height:38px;border-radius:10px;background:var(--violet-soft);color:var(--violet);display:grid;place-items:center;flex-shrink:0;font-size:16px}
.sdx-deep-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sdx-deep-body b{font-size:14px;color:var(--ink)}
.sdx-deep-body span{font-size:13px;color:var(--slate)}
.sdx-deep-go{font-size:13px;font-weight:700;color:var(--violet);white-space:nowrap}

/* ---------------------------------------------------------------- explainer */
.sdx-explain{padding:56px 0 0}
.sdx-explain-head{max-width:64ch}
.sdx-explain-head h2,.sdx-faq h2,.sdx-section-head h2{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(23px,3.4vw,31px);margin:0;line-height:1.15;
}
.sdx-explain-head p{color:var(--ink-2);margin:12px 0 0;font-size:15px}

.sdx-statedefs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:26px}
.sdx-statedef{
  background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--mute);
  border-radius:14px;padding:15px 15px 16px;display:flex;flex-direction:column;
}
.sdx-statedef.is-pass{border-top-color:var(--pass)}
.sdx-statedef.is-warn{border-top-color:var(--warn)}
.sdx-statedef.is-fail{border-top-color:var(--fail)}
.sdx-statedef.is-info{border-top-color:var(--info)}
.sdx-sd-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;color:#fff;margin-bottom:10px}
.is-pass .sdx-sd-ico{background:var(--pass)}
.is-warn .sdx-sd-ico{background:var(--warn)}
.is-fail .sdx-sd-ico{background:var(--fail)}
.is-info .sdx-sd-ico{background:var(--info)}
.is-na .sdx-sd-ico{background:var(--mute)}
.sdx-statedef b{font-size:13.5px;color:var(--ink);letter-spacing:-.01em}
.sdx-statedef em{
  font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--mute);
  letter-spacing:.06em;text-transform:uppercase;margin:1px 0 7px;
}
.sdx-statedef>span:last-child{font-size:12.5px;color:var(--slate);line-height:1.5}
@media (max-width:960px){ .sdx-statedefs{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .sdx-statedefs{grid-template-columns:1fr} }

.sdx-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.sdx-promises>div{
  background:linear-gradient(180deg,#FCFCFE,var(--panel));border:1px solid var(--rule);
  border-radius:14px;padding:18px 18px 19px;display:flex;flex-direction:column;
}
.sdx-promises i{font-size:17px;color:var(--violet);margin-bottom:11px}
.sdx-promises b{font-size:14px;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.sdx-promises span{font-size:13px;color:var(--slate);line-height:1.55}
@media (max-width:820px){ .sdx-promises{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- faq */
.sdx-faq{padding:52px 0 70px}
.sdx-faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
@media (max-width:820px){ .sdx-faq-grid{grid-template-columns:1fr} }
.sdx-faq details{
  background:var(--panel);border:1px solid var(--rule);border-radius:13px;
  padding:0 18px;transition:border-color .15s ease;
}
.sdx-faq details[open]{border-color:#D6CEFB;box-shadow:0 10px 30px -22px rgba(91,61,242,.5)}
.sdx-faq summary{
  cursor:pointer;list-style:none;padding:16px 26px 16px 0;position:relative;
  font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.sdx-faq summary::-webkit-details-marker{display:none}
/* Drawn from borders rather than an icon-font glyph: a hardcoded codepoint silently
   turns into a tofu box if the icon set is ever swapped or its version bumped, and a
   disclosure arrow isn't worth that coupling. */
.sdx-faq summary::after{
  content:"";position:absolute;right:2px;top:calc(50% - 3px);width:7px;height:7px;
  border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);
  transform:translateY(-50%) rotate(45deg);transform-origin:center;transition:transform .18s ease,border-color .18s ease;
}
.sdx-faq details[open] summary::after{
  transform:translateY(-50%) rotate(-135deg);
  border-right-color:var(--violet);border-bottom-color:var(--violet);
}
.sdx-faq details p{margin:0;padding:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.65;max-width:60ch}

/* ---------------------------------------------------------------- section heads */
.sdx-section-head{margin-bottom:16px}
.sdx-section-head h2{display:flex;align-items:center;gap:10px;font-size:clamp(19px,2.6vw,23px)}
.sdx-section-head h2 i{font-size:.82em}
.sdx-section-head p{margin:8px 0 0;font-size:13.5px;color:var(--slate);max-width:74ch;line-height:1.6}
.sdx-tabs-intro{padding-top:38px}

/* ---------------------------------------------------------------- scan */
#sdx-scan{padding:40px 0 10px}
.sdx-scanbox{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:28px}
.sdx-scan-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-mono);font-size:12.5px;color:var(--slate)}
.sdx-scan-bar{height:4px;background:var(--rule-soft);margin:18px 0 22px;border-radius:99px;position:relative;overflow:hidden}
.sdx-scan-bar i{position:absolute;inset:0 100% 0 0;background:linear-gradient(90deg,var(--violet),var(--amber));transition:right .35s ease;border-radius:99px}
.sdx-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-family:var(--f-mono);font-size:13px;color:var(--mute)}
.sdx-steps li{display:flex;gap:12px;align-items:center;transition:color .2s}
.sdx-steps li .sdx-dot{width:8px;height:8px;border:1.5px solid currentColor;border-radius:50%;flex:none}
.sdx-steps li.done{color:var(--ink-2)}
.sdx-steps li.done .sdx-dot{background:var(--pass);border-color:var(--pass)}
.sdx-steps li.active{color:var(--ink);font-weight:600}
.sdx-steps li.active .sdx-dot{background:var(--violet);border-color:var(--violet);animation:sdxPulse 1s infinite}
@keyframes sdxPulse{50%{opacity:.25}}
.sdx-scan-note{
  display:flex;gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--slate);line-height:1.55;max-width:72ch;
}
.sdx-scan-note i{color:var(--amber);flex-shrink:0;margin-top:2px}

/* ---------------------------------------------------------------- error */
#sdx-error{padding:40px 0}
.sdx-error-box{
  display:flex;align-items:center;gap:16px;background:var(--fail-soft);border:1px solid #F3C6BF;
  border-radius:14px;padding:18px 20px;color:#7A2015;
}
.sdx-error-box>i{font-size:22px;color:var(--fail);flex-shrink:0}
.sdx-error-box b{display:block;font-size:14.5px}
.sdx-error-box p{margin:4px 0 0;font-size:13.5px}
.sdx-error-box .sdx-ghost-btn{margin-left:auto;flex-shrink:0}

/* ---------------------------------------------------------------- report head */
.sdx-report-head{padding:34px 0 22px;border-bottom:1px solid var(--rule)}
.sdx-rh-top{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between}
.sdx-target{min-width:0;flex:1}
.sdx-identity{display:flex;align-items:center;gap:13px;min-width:0}
.sdx-fav{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;object-fit:contain;
  background:var(--panel);border:1px solid var(--rule);padding:3px;
}
.sdx-identity-text{min-width:0}
.sdx-u{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;font-size:clamp(20px,3vw,29px);word-break:break-all;line-height:1.15}
.sdx-t{font-size:13.5px;color:var(--slate);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62ch}
.sdx-m{font-family:var(--f-mono);font-size:11.5px;color:var(--slate);margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 14px}
.sdx-m b{font-weight:500;color:var(--ink-2)}
.sdx-rh-actions{display:flex;gap:8px;flex-wrap:wrap}
.sdx-ghost-btn{
  background:var(--panel);border:1px solid var(--rule);border-radius:9px;padding:8px 14px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .14s ease,color .14s ease;
}
.sdx-ghost-btn:hover{border-color:var(--violet);color:var(--violet)}
.sdx-ghost-btn i{font-size:12px}

/* This banner is toggled with the `hidden` attribute, so it must not carry a bare
   `display:flex` - author styles beat the browser's [hidden]{display:none} regardless
   of specificity, and it would sit there permanently. Same trap that once left the
   admin Targets modal open on every page load. */
.sdx-allclear{display:none}
.sdx-allclear:not([hidden]){
  display:flex;align-items:center;gap:14px;margin-top:28px;
  background:var(--pass-soft);border:1px solid #BFE3D3;border-radius:14px;padding:17px 20px;
}
.sdx-allclear>i{font-size:23px;color:var(--pass);flex-shrink:0}
.sdx-allclear b{display:block;font-size:14.5px;color:#0A5C40}
.sdx-allclear span{display:block;font-size:13px;color:#2A6B54;margin-top:2px}

/* ---------------------------------------------------------------- score map */
.sdx-scoremap-wrap{padding:34px 0 10px}
.sdx-scoremap{
  background:var(--panel);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(20px,4vw,38px);
  box-shadow:0 1px 2px rgba(21,21,31,.04),0 30px 60px -40px rgba(21,21,31,.35);
}
.sdx-scoremap-inner{display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap}

.sdx-gauge-block{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.sdx-gauge-ring{filter:drop-shadow(0 14px 28px -12px rgba(21,21,31,.4))}
/* Pinned to the ring's own centre (cy=80 in the SVG above), not to 50% of the block -
   the block also contains the grade pill and caption below the ring. */
.sdx-gauge-score{position:absolute;top:80px;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.sdx-gauge-score b{display:block;font-family:var(--f-display);font-weight:800;font-size:52px;letter-spacing:-.04em;line-height:1}
.sdx-gauge-score span{display:block;font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--slate);margin-top:3px}
.sdx-grade-pill{font-family:var(--f-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 16px}
.sdx-gauge-caption{font-size:11.5px;color:var(--mute);text-align:center;max-width:170px;line-height:1.45}

/* ---- the tree ----
   The connectors are plain CSS boxes, not SVG. An SVG overlay has to know the pixel
   height of the node column to draw straight lines into it, which means measuring the
   DOM and re-measuring on every resize; a percentage viewBox with preserveAspectRatio
   "none" avoids the measuring but stretches the strokes into visibly different
   thicknesses. Fixed-height rows plus absolutely-positioned 1px rules give exact,
   resolution-independent geometry at any width with no JS at all.
   Row height is pinned so the spine's endpoints (half a row from top and bottom) are
   arithmetic rather than guesswork - keep --node-h and the spine inset in sync. */
.sdx-tree{--node-h:56px;--branch:34px;flex:1;min-width:300px;position:relative;padding-left:calc(var(--branch) * 2)}
.sdx-tree::before{ /* trunk: gauge -> spine, at the vertical centre */
  content:"";position:absolute;left:0;top:50%;width:var(--branch);height:2px;
  background:var(--rule);border-radius:2px;
}
.sdx-tree-spine{
  position:absolute;left:var(--branch);top:calc(var(--node-h) / 2);bottom:calc(var(--node-h) / 2);
  width:2px;background:var(--rule);border-radius:2px;
}
.sdx-nodes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sdx-nodes li{position:relative;height:var(--node-h);display:flex;align-items:center}
.sdx-nodes li::before{ /* branch: spine -> node */
  content:"";position:absolute;left:calc(var(--branch) * -1);top:50%;width:var(--branch);height:2px;
  background:var(--rule);border-radius:2px;
}
.sdx-nodes li.is-pass::before{background:var(--pass);opacity:.5}
.sdx-nodes li.is-warn::before{background:var(--warn);opacity:.55}
.sdx-nodes li.is-fail::before{background:var(--fail);opacity:.55}

.sdx-node-btn{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:1px solid transparent;cursor:pointer;padding:6px 12px 6px 8px;
  border-radius:12px;text-align:left;transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.sdx-node-btn:hover{background:var(--mute-soft);border-color:var(--rule);transform:translateX(2px)}
.sdx-node-dot{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;font-size:15px;
  border:1.5px solid currentColor;
}
.sdx-node-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.sdx-node-info b{font-size:13px;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.sdx-node-meter{height:5px;border-radius:99px;background:var(--rule-soft);overflow:hidden;max-width:210px}
.sdx-node-meter i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.sdx-node-num{
  font-family:var(--f-mono);font-size:13px;font-weight:700;flex-shrink:0;
  min-width:44px;text-align:right;letter-spacing:-.02em;
}
.sdx-node-flags{display:flex;gap:5px;flex-shrink:0;min-width:76px;justify-content:flex-end}
.sdx-node-flag{font-family:var(--f-mono);font-size:10px;font-weight:700;border-radius:5px;padding:2px 6px}
.sdx-node-flag.f{background:var(--fail-soft);color:var(--fail)}
.sdx-node-flag.w{background:var(--warn-soft);color:var(--warn)}
.sdx-node-go{color:var(--mute);flex-shrink:0;font-size:12px}
.sdx-node-btn:hover .sdx-node-go{color:var(--violet)}

/* ---- tally strip under the map ---- */
.sdx-tally{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--rule-soft);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-top:26px;
}
.sdx-tally div{background:var(--panel);padding:13px 14px;display:flex;flex-direction:column;gap:2px}
.sdx-tally b{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.03em;line-height:1.1}
.sdx-tally span{font-size:11.5px;color:var(--slate)}
.sdx-tally .t-pass b{color:var(--pass)}
.sdx-tally .t-warn b{color:var(--warn)}
.sdx-tally .t-fail b{color:var(--fail)}
.sdx-tally .t-info b{color:var(--info)}
.sdx-tally .t-na b{color:var(--mute)}
@media (max-width:720px){ .sdx-tally{grid-template-columns:repeat(2,1fr)} }

/* ---- snapshot ---- */
.sdx-shot{margin-top:26px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--mute-soft)}
.sdx-shot-head{
  display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--panel);
  border-bottom:1px solid var(--rule-soft);font-family:var(--f-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--mute);
}
.sdx-shot-head .sdx-shot-dots{display:flex;gap:5px;margin-right:4px}
.sdx-shot-head .sdx-shot-dots i{width:9px;height:9px;border-radius:50%;background:var(--rule);display:block}
.sdx-shot-frame{max-height:430px;overflow:hidden;position:relative}
.sdx-shot-frame img{display:block;width:100%;height:auto}
.sdx-shot-frame::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(transparent,rgba(255,255,255,.9));pointer-events:none;
}

/* ---------------------------------------------------------------- top fixes */
.sdx-topfixes{padding:36px 0 6px}
.sdx-topfixes h2 i{color:var(--fail)}
.sdx-topfixes ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sdx-topfixes li{
  display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--rule);
  border-left:3px solid var(--fail);border-radius:12px;padding:13px 16px;
  transition:border-color .14s ease,transform .14s ease;
}
.sdx-topfixes li:hover{transform:translateX(2px)}
.sdx-topfixes li.is-warn{border-left-color:var(--warn)}
.sdx-topfixes li .sdx-tf-num{
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:#fff;background:var(--fail);
  width:21px;height:21px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;
}
.sdx-topfixes li.is-warn .sdx-tf-num{background:var(--warn)}
.sdx-tf-text{flex:1;min-width:0}
.sdx-topfixes li b{display:block;font-size:13.5px;color:var(--ink)}
.sdx-topfixes li>.sdx-tf-text>span{display:block;font-size:12.5px;color:var(--slate);margin-top:2px}
.sdx-tf-cat{
  font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--slate);background:var(--mute-soft);border-radius:6px;padding:4px 9px;flex-shrink:0;white-space:nowrap;
}
@media (max-width:640px){ .sdx-tf-cat{display:none} }

/* ---------------------------------------------------------------- tabs */
/* top offset matches the site header's height (--u * 3 = 84px desktop, --u * 2.5 = 70px under
   900px - see .qdt-site-header / .qdt-header-inner in site.css) so the sticky tab rail settles
   just below it instead of being covered by it. */
.sdx-tabrail{position:sticky;top:84px;z-index:50;background:rgba(247,247,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);margin-top:32px;margin-bottom:24px}
@media (max-width:900px){ .sdx-tabrail{top:70px} }
.sdx-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px 0}
.sdx-tabs::-webkit-scrollbar{display:none}
.sdx-tab{
  background:none;border:0;border-bottom:2px solid transparent;padding:12px 15px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--slate);display:flex;align-items:center;gap:8px;border-radius:8px 8px 0 0;
}
.sdx-tab:hover{color:var(--ink);background:var(--mute-soft)}
.sdx-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--violet);background:var(--violet-soft)}
.sdx-tab .sdx-tab-score{font-family:var(--f-mono);font-size:10.5px;color:var(--mute);background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:1px 7px}
.sdx-tab .sdx-tab-flags{display:flex;gap:3px}
.sdx-tab .sdx-flag{width:6px;height:6px;border-radius:50%}
.sdx-tab .sdx-flag.f{background:var(--fail)}
.sdx-tab .sdx-flag.w{background:var(--warn)}

/* Panes carry both .on and the native `hidden` attribute (class for styling, attribute so
   assistive tech and in-page find skip the inactive ones). A bare `display:block` on .on
   would beat the browser's own [hidden]{display:none} — author styles win over UA styles
   regardless of specificity — so the two are explicitly reconciled here rather than left
   to depend on the JS keeping them perfectly in sync. */
.sdx-pane{display:none;animation:sdxRise .35s ease both}
.sdx-pane.on:not([hidden]){display:block}
@keyframes sdxRise{from{opacity:0;transform:translateY(8px)}}

.sdx-pane-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--rule-soft);
}
.sdx-pane-head h3{font-family:var(--f-display);font-weight:800;font-size:21px;letter-spacing:-.03em;margin:0;display:flex;align-items:center;gap:10px}
.sdx-pane-head h3 i{color:var(--violet);font-size:.86em}
.sdx-pane-blurb{margin:8px 0 0;font-size:13.5px;color:var(--slate);line-height:1.6;max-width:70ch}
.sdx-pane-headtext{min-width:0;flex:1}
.sdx-pane-aside{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.sdx-pane-score{
  font-family:var(--f-display);font-weight:800;font-size:27px;letter-spacing:-.03em;line-height:1;
}
.sdx-pane-tally{font-family:var(--f-mono);font-size:11px;color:var(--slate);white-space:nowrap}

/* Filter is deliberately not a "hide passing tests" checkbox: on a healthy page that
   would empty the tab entirely and read as a bug. Explicit segmented choice instead. */
.sdx-filter{display:inline-flex;background:var(--mute-soft);border:1px solid var(--rule);border-radius:9px;padding:2px}
.sdx-filter button{
  background:none;border:0;border-radius:7px;padding:5px 11px;font-size:11.5px;font-weight:700;
  color:var(--slate);white-space:nowrap;transition:background .14s ease,color .14s ease;
}
.sdx-filter button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(21,21,31,.09)}
.sdx-filter button:hover{color:var(--ink)}
.sdx-test.is-filtered{display:none}
.sdx-emptyfilter{
  text-align:center;padding:34px 20px;border:1px dashed var(--rule);border-radius:14px;
  font-size:13.5px;color:var(--slate);background:var(--panel);
}
.sdx-emptyfilter i{display:block;font-size:22px;color:var(--pass);margin-bottom:8px}
@media (max-width:640px){
  .sdx-pane-aside{align-items:flex-start;flex-direction:row;align-items:center;width:100%;justify-content:space-between}
}

.sdx-test-list{display:grid;gap:10px;margin-bottom:18px}
.sdx-test{
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--mute);border-radius:12px;
  overflow:hidden;transition:border-color .15s ease;
}
.sdx-test.status-pass{border-left-color:var(--pass)}
.sdx-test.status-warning{border-left-color:var(--warn)}
.sdx-test.status-fail{border-left-color:var(--fail)}
.sdx-test.status-info{border-left-color:var(--info)}
.sdx-test.status-unavailable{border-left-color:var(--mute)}

.sdx-test-row{
  display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;width:100%;text-align:left;background:none;border:0;
}
.sdx-test-icon{
  position:relative;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  flex-shrink:0;font-size:13px;color:#fff;
}
.status-pass .sdx-test-icon{background:var(--pass)}
.status-warning .sdx-test-icon{background:var(--warn)}
.status-fail .sdx-test-icon{background:var(--fail)}
.status-info .sdx-test-icon{background:var(--info)}
.status-unavailable .sdx-test-icon{background:var(--mute)}

.sdx-test-body{flex:1;min-width:0}
.sdx-test-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.sdx-test-summary{font-size:12.5px;color:var(--slate);margin-top:2px}

.sdx-test-value{
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;white-space:nowrap;flex-shrink:0;
  background:var(--mute-soft);color:var(--ink-2);border-radius:999px;padding:4px 10px;
}
.status-pass .sdx-test-value{background:var(--pass-soft);color:var(--pass)}
.status-warning .sdx-test-value{background:var(--warn-soft);color:var(--warn)}
.status-fail .sdx-test-value{background:var(--fail-soft);color:var(--fail)}
.status-info .sdx-test-value{background:var(--info-soft);color:var(--info)}

/* Reserved even when there's no detail to expand, so every row's value badge lands on the
   same vertical line whether or not that particular test has an explanation. */
.sdx-test-chevron{color:var(--mute);flex-shrink:0;width:14px;text-align:center;transition:transform .15s ease}
.sdx-test.open .sdx-test-chevron{transform:rotate(180deg);color:var(--violet)}

.sdx-test-detail{display:none;padding:2px 16px 16px 52px;font-size:13px;color:var(--ink-2);line-height:1.65;max-width:88ch}
.sdx-test.open .sdx-test-detail{display:block}

/* Visible label for the status glyph. The coloured square reads instantly to a sighted
   user and not at all to a screen reader, so the word goes in too, just not on screen. */
.sdx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- extras (SERP, cloud, shot) */
/* Anything that isn't a plain test row gets this shell, so the meta tab's Google preview,
   the content tab's keyword cloud and the mobile tab's snapshot all read as the same
   kind of object rather than three unrelated one-off cards. */
.sdx-extra{background:var(--panel);border:1px solid var(--rule);border-radius:14px;margin-bottom:14px;overflow:hidden}
.sdx-extra-head{
  display:flex;align-items:center;gap:9px;padding:12px 18px;border-bottom:1px solid var(--rule-soft);
  font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--mute);
}
.sdx-extra-head i{font-size:12px}
.sdx-extra-body{padding:18px}
.sdx-extra-note{padding:0 18px 15px;font-size:12.5px;color:var(--slate);line-height:1.55;max-width:74ch}

/* Google's own type stack and colours on purpose - the point of a preview is to look like
   the thing it previews, not like the rest of this page. */
.sdx-serp-row{display:flex;align-items:center;gap:11px;margin-bottom:5px}
.sdx-serp-fav{width:26px;height:26px;border-radius:50%;border:1px solid var(--rule);padding:4px;object-fit:contain;background:#fff;flex-shrink:0}
.sdx-serp-favx{
  width:26px;height:26px;border-radius:50%;border:1px dashed var(--rule);flex-shrink:0;
  display:grid;place-items:center;color:var(--mute);font-size:11px;
}
.sdx-serp-site{font-family:arial,sans-serif;font-size:14px;color:#202124;line-height:1.2}
.sdx-serp-url{font-family:arial,sans-serif;font-size:12.5px;color:#4d5156;word-break:break-all}
.sdx-serp-title{font-size:20px;color:#1a0dab;margin:3px 0 2px;font-family:arial,sans-serif;line-height:1.3}
.sdx-serp-desc{font-size:13.5px;color:#4d5156;font-family:arial,sans-serif;line-height:1.58;max-width:64ch}
.sdx-serp-ghost{color:#9aa0a6;font-style:italic}

.sdx-cloud{display:flex;flex-wrap:wrap;gap:8px 9px;align-items:center}
.sdx-cloud span{
  font-family:var(--f-mono);font-weight:600;color:var(--violet);background:var(--violet-soft);
  border-radius:8px;padding:4px 11px;line-height:1.45;
}

/* ---------------------------------------------------------------- footer */
.sdx-foot{
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;padding:26px 0 60px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--mute);
}

/* ---------------------------------------------------------------- responsive */
/* Below 820px the gauge stacks above the categories, so the bracket tree's geometry
   (a trunk running left-to-right into a vertical spine) no longer describes anything
   real - the connectors are dropped and the nodes become a plain card list. */
@media (max-width:820px){
  .sdx-scoremap-inner{flex-direction:column;align-items:stretch;gap:24px}
  .sdx-gauge-block{align-self:center}
  .sdx-tree{padding-left:0;min-width:0}
  .sdx-tree::before,.sdx-tree-spine{display:none}
  .sdx-nodes{gap:8px}
  .sdx-nodes li{height:auto}
  .sdx-nodes li::before{display:none}
  .sdx-node-btn{border-color:var(--rule);background:#FCFCFE;padding:11px 13px}
  .sdx-node-btn:hover{transform:none}
  .sdx-node-meter{max-width:none}
}
@media (max-width:560px){
  .sdx-rh-actions{width:100%}
  .sdx-rh-actions .sdx-ghost-btn{flex:1;justify-content:center}
  .sdx-node-flags{display:none}
  .sdx-gauge-score b{font-size:46px}
}

/* Everything on this page animates in on render; anyone who has asked their OS not to
   see that gets the same layout without the motion. */
@media (prefers-reduced-motion:reduce){
  .sdx *,.sdx *::before,.sdx *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}