/* ===========================================================================
   QDT tool hero — v2  (wwwroot/css/shared/qdt-tool-hero.css)

   The centred "X → readable" hero used by /json-formatter and /xml-formatter.
   Scoped under .qdt-hero2 and given its own tokens, deliberately NOT reusing
   the .hero class: the bench pages already style .qdt-bench .hero, and reusing
   the name would have meant fighting those rules with overrides.

   The page's own breadcrumb is rendered by the layout's PageBreadcrumb
   component, so the source design's breadcrumb is intentionally omitted here
   rather than duplicated.
   =========================================================================== */

.qdt-hero2{
  --h-panel:#FFFFFF; --h-panel-2:#FAFAFB;
  --h-ink:#16181A; --h-ink-2:#474D53; --h-ink-3:#858C93; --h-ink-4:#AEB4BA;
  --h-line:#E3E5E8; --h-line-2:#F0F1F3;
  --h-amber:#C97D0B; --h-amber-2:#A66408; --h-amber-tint:#FDF4E4; --h-amber-line:#EFD9AE;
  --h-ok:#0E7A4B; --h-ok-tint:#E8F6EF; --h-ok-line:#C4E5D3;
  --h-display:'Archivo',system-ui,sans-serif;
  --h-sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --h-mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
  --h-r:12px; --h-r2:8px;

  text-align:center;
  padding:14px 0 0;
  font-family:var(--h-sans);
  color:var(--h-ink);
}
.qdt-hero2 *{box-sizing:border-box}
.qdt-hero2 svg{display:block}
.qdt-hero2 button{background:none;border:0;cursor:pointer;font-family:inherit;font-size:inherit;color:inherit}
.qdt-hero2 :focus-visible{outline:2px solid var(--h-amber);outline-offset:2px}

/* ---------- eyebrow ---------- */
.qdt-hero2 .eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:0;
  font-family:var(--h-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--h-ink-3)}
.qdt-hero2 .eyebrow::before,.qdt-hero2 .eyebrow::after{content:'';flex:1;max-width:190px;height:1px;background:var(--h-line)}
.qdt-hero2 .eyebrow b{color:var(--h-amber-2);font-weight:500}

/* ---------- headline ---------- */
.qdt-hero2 h1{font-family:var(--h-display);font-weight:800;font-stretch:94%;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.1rem,5.4vw,3.55rem);margin:13px 0 0;
  display:flex;align-items:center;justify-content:center;gap:.24em;flex-wrap:wrap;color:var(--h-ink)}
.qdt-hero2 h1 .lite{font-weight:700;font-stretch:96%;letter-spacing:-.042em}
.qdt-hero2 h1 .arw{width:.92em;color:var(--h-amber);flex-shrink:0}
.qdt-hero2 h1 .arw svg{width:100%;height:auto}

.qdt-hero2 .lede{margin:13px auto 0;max-width:74ch;font-size:.98rem;line-height:1.55;color:var(--h-ink-2)}
.qdt-hero2 .lede b{color:var(--h-ink);font-weight:600}

/* ---------- quick actions ---------- */
.qdt-hero2 .jump{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:15px}
.qdt-hero2 .jump .btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--h-line);background:var(--h-panel);
  border-radius:var(--h-r2);padding:7px 13px;font-size:13px;font-weight:500;color:var(--h-ink-2);
  transition:border-color .15s,color .15s,background .15s,transform .12s}
.qdt-hero2 .jump .btn:hover{border-color:var(--h-ink-4);color:var(--h-ink)}
.qdt-hero2 .jump .btn:active{transform:translateY(1px)}
.qdt-hero2 .jump .btn:disabled{opacity:.5;cursor:not-allowed}
.qdt-hero2 .jump .btn.dark{background:var(--h-ink);border-color:var(--h-ink);color:#fff}
.qdt-hero2 .jump .btn.dark:hover{background:#000;border-color:#000}
.qdt-hero2 .jump .sep{width:1px;height:20px;background:var(--h-line);margin:0 3px}
.qdt-hero2 .jump .chip{font-family:var(--h-mono);font-size:11.5px;color:var(--h-ink-2);background:var(--h-panel);
  border:1px solid var(--h-line);border-radius:100px;padding:5px 11px;transition:all .15s}
.qdt-hero2 .jump .chip:hover{background:var(--h-amber-tint);border-color:var(--h-amber-line);color:var(--h-amber-2)}

/* inline feedback for the hero's own actions — the formatter's toast system is
   private to its IIFE, so the hero reports its own outcomes here instead */
.qdt-hero2 .hero-msg{display:none;margin:10px auto 0;max-width:70ch;padding:7px 12px;border-radius:var(--h-r2);
  font-size:12.5px;line-height:1.5}
.qdt-hero2 .hero-msg.show{display:block}
.qdt-hero2 .hero-msg.ok{background:var(--h-ok-tint);border:1px solid var(--h-ok-line);color:#28604A}
.qdt-hero2 .hero-msg.warn{background:var(--h-amber-tint);border:1px solid var(--h-amber-line);color:var(--h-amber-2)}

/* ---------- capability band ---------- */
.qdt-hero2 .spec2{display:grid;grid-template-columns:1fr;margin-top:22px;background:var(--h-panel);
  border:1px solid var(--h-line);border-radius:var(--h-r);overflow:hidden;text-align:left}
@media(min-width:640px){.qdt-hero2 .spec2{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.qdt-hero2 .spec2{grid-template-columns:repeat(4,1fr)}}
.qdt-hero2 .spec2 div{padding:12px 16px;border-right:1px solid var(--h-line-2);border-bottom:1px solid var(--h-line-2)}
@media(min-width:1040px){.qdt-hero2 .spec2 div{border-bottom:0}.qdt-hero2 .spec2 div:last-child{border-right:0}}
@media(min-width:640px) and (max-width:1039px){.qdt-hero2 .spec2 div:nth-child(2n){border-right:0}.qdt-hero2 .spec2 div:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:639px){.qdt-hero2 .spec2 div{border-right:0}.qdt-hero2 .spec2 div:last-child{border-bottom:0}}
.qdt-hero2 .spec2 .k{font-family:var(--h-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--h-ink-3);
  display:flex;align-items:center;gap:6px;margin:0}
.qdt-hero2 .spec2 .k b{color:var(--h-ink-4);font-weight:500;margin-left:auto;letter-spacing:.08em}
.qdt-hero2 .spec2 .v{font-family:var(--h-mono);font-size:12px;line-height:1.6;color:var(--h-ink-3);margin:5px 0 0}
.qdt-hero2 .spec2 .v b{color:var(--h-ink);font-weight:500}
.qdt-hero2 .spec2 .v i{font-style:normal;color:var(--h-ink-4);padding:0 1px}

/* ---------- assurance strip ---------- */
.qdt-hero2 .foot2{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:9px 14px;
  background:var(--h-ok-tint);border:1px solid var(--h-ok-line);border-radius:var(--h-r);text-align:left}
.qdt-hero2 .foot2 .lock{flex-shrink:0;font-size:14px}
.qdt-hero2 .foot2 p{font-size:12.5px;line-height:1.45;color:#28604A;margin:0}
.qdt-hero2 .foot2 p b{color:#07472E;font-weight:700}
.qdt-hero2 .foot2 .sp{flex:1}
.qdt-hero2 .foot2 .tick{font-family:var(--h-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--h-ok);white-space:nowrap;border-left:1px solid var(--h-ok-line);padding-left:12px}
@media(max-width:860px){.qdt-hero2 .foot2 .tick{display:none}}

@media (prefers-reduced-motion:reduce){
  .qdt-hero2 .jump .btn,.qdt-hero2 .jump .chip{transition:none}
  .qdt-hero2 .jump .btn:active{transform:none}
}