/* TDKSEO SEO Check + Roadmap components.
 * Loaded after src/styles.css and reuses the same design tokens. */

.check-hero{padding:88px 0 56px}
.check-hero h1{font-size:clamp(2.6rem,6vw,4.9rem);line-height:1.02;letter-spacing:-.07em;margin:0 0 24px;max-width:900px;font-weight:700}
.check-hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em}
.check-hero .lede{max-width:640px;color:var(--muted);font-size:1.02rem;margin:0 0 34px}
.check-form{display:flex;gap:10px;align-items:stretch;max-width:720px;flex-wrap:wrap}
.check-form label{display:block;width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#787872;margin-bottom:10px}
.field-wrap{flex:1 1 320px;min-width:0}
.url-input{width:100%;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:14px 20px;font-size:.95rem;color:var(--ink);min-height:48px}
.url-input::placeholder{color:#9a9a93}
.url-input.is-invalid{border-color:#a33a2a;background:#fdf4f1}
.check-form .button{min-height:48px;padding-inline:22px;white-space:nowrap}
.example-row{margin-top:16px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.74rem;color:var(--muted)}
.chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.72rem;color:var(--muted);cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.check-note{margin-top:26px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:var(--muted);line-height:1.7;max-width:640px}

.result-shell{padding:8px 0 96px}
.result-card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px 28px;margin-bottom:16px}
.result-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:var(--muted)}
.result-meta a{border-bottom:1px solid var(--line)}
.result-headline{font-size:1.5rem;letter-spacing:-.04em;margin:14px 0 6px}
.result-sub{color:var(--muted);font-size:.88rem;margin:0}
.banner{border-radius:6px;padding:16px 18px;margin-bottom:20px;font-size:.9rem;border:1px solid transparent}
.banner strong{display:block;font-size:.98rem;margin-bottom:4px}
.banner-error{background:#fdf4f1;border-color:#e6c4ba;color:#7d2f20}
.banner-verify{background:#f1f0ea;border-color:var(--line);color:#4d4d48}
.banner-fixed{background:#e6f0dd;border-color:#bdd3a8;color:#2f5522}
.banner-still{background:#f6ecd2;border-color:#e0cfa0;color:#6d5410}
.spinner{display:inline-block;width:12px;height:12px;border:2px solid #b6b5ad;border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

.roadmap{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.roadmap li{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--line)}
.roadmap .stage-index{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:#92928b}
.roadmap .stage-name{font-size:.95rem;font-weight:600;letter-spacing:-.02em}
.roadmap .stage-summary{display:block;font-weight:400;color:var(--muted);font-size:.78rem;letter-spacing:0;margin-top:2px}
.roadmap li.is-blocker{background:#fdf6ee;border-left:3px solid #c9903f;padding-left:12px;margin-left:-15px}
.roadmap li.is-blocker .stage-name{color:#8a5a11}
.stage-flag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6rem;letter-spacing:.14em;color:#8a5a11;display:block;margin-top:3px}

.pill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;letter-spacing:.1em;padding:5px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.pill-pass{background:#e3efdf;color:#2f6b3a}
.pill-fail{background:#f6e0d9;color:#9c3623}
.pill-warning{background:#f6ecd2;color:#7a5a12}
.pill-unknown{background:#e8e7e2;color:#5d5d58}
.pill-not{background:transparent;color:#85857e;border-color:var(--line)}
.pill-info{background:#e5e8ef;color:#3d4a63}

.blocker{background:var(--dark);color:var(--white);border-radius:6px;padding:30px;margin-bottom:18px}
.blocker .eyebrow{color:#9c9c94;margin-bottom:14px}
.blocker h2{font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.05em;line-height:1.1;margin:0 0 10px}
.blocker .blocker-stage{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;color:var(--lime);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.blocker p{color:#b9b8b1;font-size:.9rem}
.evidence{margin:22px 0 0;border-top:1px solid #3a3b36}
.evidence-row{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid #3a3b36}
.evidence-row dt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;color:#8f8f88;letter-spacing:.05em;margin:0;word-break:break-word}
.evidence-row dd{margin:0;font-size:.85rem;color:#eceae4;word-break:break-word}
.explain{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.explain h3{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#8f8f88;margin:0 0 8px}
.explain p{margin:0;font-size:.84rem;color:#c9c8c1;line-height:1.55}

.copy-block{margin-top:26px;padding-top:22px;border-top:1px solid #3a3b36}
.copy-block h3{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#8f8f88;margin:0 0 12px}
.copy-row{display:flex;gap:10px;flex-wrap:wrap}
.copy-button{border:1px solid #4a4b45;background:transparent;color:var(--white);border-radius:999px;padding:10px 16px;font-size:.76rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s}
.copy-button:hover{background:#2c2d29;border-color:var(--lime);color:var(--lime)}
.copy-button.is-copied{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.copy-fallback{margin-top:12px}
.copy-fallback textarea{width:100%;min-height:190px;background:#161713;color:#d9d8d3;border:1px solid #3a3b36;border-radius:4px;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.6;resize:vertical}

.verify-row{margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.verify-row .text-link{color:var(--lime);border-color:var(--lime)}
.verify-hint{font-size:.74rem;color:#8f8f88}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:6px}
.section-head h2{font-size:1.35rem;letter-spacing:-.04em;margin:0}
.section-head span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;color:#92928b}
.warn-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.warn-item{border:1px solid var(--line);border-radius:5px;padding:16px 18px;background:var(--paper)}
.warn-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.warn-head h3{font-size:.98rem;letter-spacing:-.02em;margin:0}
.warn-item p{margin:0 0 10px;color:var(--muted);font-size:.82rem}
.warn-item .copy-button{border-color:var(--line);color:var(--ink);font-size:.72rem;padding:8px 13px}
.warn-item .copy-button:hover{background:var(--card);border-color:var(--ink);color:var(--ink)}
.warn-item .copy-button.is-copied{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.unknown-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.unknown-list li{border-left:2px solid var(--line);padding:2px 0 2px 14px}
.unknown-list strong{display:block;font-size:.86rem;font-weight:600}
.unknown-list span{font-size:.8rem;color:var(--muted)}
.details-block{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.details-block summary{cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 0}
.details-block summary:hover{color:var(--ink)}
.checks-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.8rem}
.checks-table th,.checks-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.checks-table th{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#92928b;font-weight:400}
.checks-table td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:var(--muted)}

.explainer{padding:8px 0 110px}
.explainer h2{font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.06em;margin:52px 0 16px}
.explainer h2:first-child{margin-top:0}
.explainer p{color:var(--muted);font-size:.95rem;max-width:720px}
.explainer ul{color:var(--muted);font-size:.95rem;max-width:720px;padding-left:20px}
.explainer li{margin-bottom:8px}
.explainer li strong{color:var(--ink)}
.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0 0}
.answer-card{background:var(--card);border-radius:5px;padding:20px}
.answer-card h3{margin:0 0 8px;font-size:1rem;letter-spacing:-.02em}
.answer-card p{margin:0;font-size:.85rem}
.step-list{list-style:none;counter-reset:step;padding:0;margin:22px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.step-list li{counter-increment:step;position:relative;border-bottom:1px solid var(--line);padding:20px 0 20px 52px}
.step-list li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:#92928b}
.step-list strong{display:block;font-size:1rem;letter-spacing:-.02em;margin-bottom:5px}
.step-list span{color:var(--muted);font-size:.88rem}

.roadmap-page{padding:80px 0 110px}
.roadmap-page h1{font-size:clamp(2.4rem,5.4vw,4.4rem);letter-spacing:-.07em;line-height:1.03;margin:0 0 20px;max-width:820px}
.roadmap-page h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.05em}
.roadmap-page .lede{max-width:660px;color:var(--muted);font-size:1rem;margin:0 0 30px}
.stage-block{border-top:1px solid var(--line);padding:32px 0;display:grid;grid-template-columns:64px 1fr;gap:24px}
.stage-block:last-of-type{border-bottom:1px solid var(--line)}
.stage-num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;color:#92928b;padding-top:6px}
.stage-block h2{font-size:1.7rem;letter-spacing:-.05em;margin:0 0 10px}
.stage-block h3{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#92928b;margin:20px 0 8px}
.stage-block p{margin:0;color:var(--muted);font-size:.92rem;max-width:640px}
.stage-block ul{margin:0;padding-left:18px;color:var(--muted);font-size:.9rem;max-width:640px}
.stage-block li{margin-bottom:6px}
.stage-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:22px}
.stage-cta{margin-top:40px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}

@media(max-width:860px){
  .explain,.answer-grid,.stage-facts{grid-template-columns:1fr}
  .evidence-row{grid-template-columns:1fr;gap:2px}
}
@media(max-width:760px){
  .check-hero{padding:56px 0 40px}
  .result-card{padding:20px 18px}
  .blocker{padding:22px 18px}
  .roadmap li{grid-template-columns:26px 1fr;row-gap:6px}
  .roadmap li .pill{grid-column:2;justify-self:start}
  .check-form .button{width:100%}
  .stage-block{grid-template-columns:1fr;gap:6px}
  .copy-button{width:100%;text-align:center}
  .checks-table{font-size:.74rem}
  .checks-table th:nth-child(2),.checks-table td:nth-child(2){display:none}
}