/* Schema markup generator landing page only (/tools/structured-data-builder-validator).
   CSS-only type picker: radios + sibling selectors, no script needed. */

.tp-sd{--sd-ink:#071b35;--sd-muted:#4d5f76;--sd-line:#d7e1ee;--sd-blue:#1f5cf0;--sd-blue-ink:#1747c0;--sd-code-bg:#0b1a33;--sd-code-ink:#e6edf8;--sd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tp-sd.mt-public{padding-top:clamp(20px,3.2vw,44px)}
.tp-sd code{font-family:var(--sd-mono);font-size:.9em;background:#eef3fb;border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}

/* hero: intro + prefill left, generator right */
.tp-sd-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"intro tool" "prefill tool";gap:clamp(20px,3.4vw,48px);align-items:start}
.tp-sd-intro{grid-area:intro;min-width:0;padding-top:4px}
.tp-sd-tool{grid-area:tool;min-width:0}
.tp-sd-prefill{grid-area:prefill;min-width:0}
.tp-sd-intro h1{margin:10px 0 14px;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.05;letter-spacing:-.045em;color:var(--sd-ink);overflow-wrap:anywhere}
.tp-sd-lede{margin:0 0 16px;color:var(--sd-muted);font-size:1.08rem;line-height:1.6}
.tp-sd-facts{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.tp-sd-facts li{position:relative;padding-left:22px;line-height:1.5;font-size:.95rem;color:var(--sd-ink)}
.tp-sd-facts li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--sd-blue)}

/* generator card */
.tp-sd-tool{border:1px solid #bfd0e5;border-radius:20px;background:#fff;box-shadow:0 22px 55px rgba(9,34,70,.12);padding:clamp(14px,2.2vw,22px)}
.tp-sd-switch{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0;position:relative}
.tp-sd-switch legend{float:left;width:100%;margin:0 0 4px;padding:0;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sd-muted)}
.tp-sd-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}
.tp-sd-radio+label{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid var(--sd-line);border-radius:999px;background:#f5f8fd;color:var(--sd-ink);font-weight:750;font-size:.92rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.tp-sd-radio+label:hover{border-color:#9fb6dc;background:#eaf0ff}
.tp-sd-radio:checked+label{background:var(--sd-blue);border-color:var(--sd-blue);color:#fff}
.tp-sd-radio:focus-visible+label{outline:3px solid var(--sd-blue);outline-offset:2px}
.tp-sd-panels{flex:1 1 100%;min-width:0;margin-top:8px}
.tp-sd-panel{display:none}
#tp-sd-t-article:checked~.tp-sd-panels .tp-sd-p-article,
#tp-sd-t-faq:checked~.tp-sd-panels .tp-sd-p-faq,
#tp-sd-t-product:checked~.tp-sd-panels .tp-sd-p-product,
#tp-sd-t-local:checked~.tp-sd-panels .tp-sd-p-local,
#tp-sd-t-org:checked~.tp-sd-panels .tp-sd-p-org{display:block}
.tp-sd-code-label{display:block;margin:0 0 4px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sd-muted)}
.tp-sd-note{margin:0 0 10px;color:var(--sd-muted);font-size:.9rem;line-height:1.5}
.tp-sd-code{display:block;width:100%;box-sizing:border-box;min-height:500px;max-height:75vh;resize:vertical;margin:0;padding:14px 16px;border:1px solid #1d3257;border-radius:12px;background:var(--sd-code-bg);color:var(--sd-code-ink);font-family:var(--sd-mono);font-size:.84rem;line-height:1.55;tab-size:2;white-space:pre;overflow:auto}
.tp-sd-code:focus-visible{outline:3px solid var(--sd-blue);outline-offset:2px}
.tp-sd-copy{margin:12px 0 4px;font-size:.92rem;line-height:1.5;color:var(--sd-ink)}
.tp-sd-test{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0}
.tp-sd-test a{display:inline-flex;align-items:center;min-height:44px;color:var(--sd-blue-ink);font-weight:800;text-underline-offset:3px}
.tp-sd-test a:focus-visible,.tp-sd-links a:focus-visible{outline:2px solid var(--sd-blue);outline-offset:2px}

/* prefill block */
.tp-sd-prefill h2{margin:0 0 8px;font-size:clamp(1.25rem,2vw,1.5rem);letter-spacing:-.02em;color:var(--sd-ink)}
.tp-sd-prefill>p{margin:0;color:var(--sd-muted);line-height:1.55;font-size:.95rem}
.tp-sd-prefill .wt-drop{margin:14px 0 10px;max-width:none}
.tp-sd-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;padding:10px 14px;border:1px solid var(--sd-line);border-radius:12px;background:#fff}
.tp-sd-price b{font-size:1rem;color:var(--sd-ink)}
.tp-sd-price span{color:var(--sd-muted);font-size:.88rem;font-weight:650}

/* real output sample */
.tp-sd-demo{margin:clamp(40px,6vw,70px) 0 0;padding:clamp(18px,3vw,30px);border:1px solid var(--sd-line);border-radius:20px;background:#f7f9fc;min-width:0}
.tp-sd-demo h2{margin:0 0 6px;color:var(--sd-ink)}
.tp-sd-demo-sub,.tp-sd-demo-foot{margin:0;color:var(--sd-muted);line-height:1.55}
.tp-sd-demo-foot{margin-top:14px}
.tp-sd-demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:16px}
.tp-sd-demo-col{min-width:0}
.tp-sd-file{margin:0 0 6px;font-family:var(--sd-mono);font-size:.8rem;font-weight:700;color:var(--sd-muted)}
.tp-sd-demo-col .tp-sd-pre+.tp-sd-file{margin-top:14px}
.tp-sd-pre{margin:0;max-width:100%;overflow-x:auto;padding:14px 16px;border-radius:12px;background:var(--sd-code-bg);color:var(--sd-code-ink);font-size:.82rem;line-height:1.55}
.tp-sd-pre code{background:none;padding:0;color:inherit;font-size:1em;overflow-wrap:normal;white-space:pre}
.tp-sd-pre:focus-visible{outline:3px solid var(--sd-blue);outline-offset:2px}

.tp-sd-links{display:flex;flex-wrap:wrap;gap:4px 22px}

@media (max-width:900px){
  .tp-sd-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "tool" "prefill"}
  .tp-sd-demo-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .tp-sd-radio+label{padding:0 11px;font-size:.86rem}
  .tp-sd-code{min-height:300px;font-size:.78rem;padding:12px}
  .tp-sd-pre{font-size:.76rem;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .tp-sd-radio+label{transition:none}
}
