/* Script-tag checker page (/script-tag-check). Builds on hub.css; adds the tool, result card, guide and a dark theme
   for this page only (the hub itself stays light). */
.checker { --ok: #059669; --warn: #d97706; --bad: #dc2626; --card: #fff; --input: #fff; }
.checker .hero { padding: 72px 0 32px; }
.checker .hero h1 { font-size: clamp(34px, 5.4vw, 60px); }
.checker .lead { margin-bottom: 24px; }
.checker .pill { max-width: 100%; text-align: left; }

.tool { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 22px;
  box-shadow: var(--shadow); text-align: left; }
.tool label { display: block; font-weight: 700; margin: 0 0 8px; }
.tool .row { display: flex; gap: 10px; }
.tool input[type="text"], .tool textarea { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #cbd5e1; background: var(--input); color: var(--ink); }
.tool input:focus, .tool textarea:focus { outline: 3px solid color-mix(in srgb, var(--b1) 35%, transparent); border-color: var(--b1); }
.tool button { font: inherit; cursor: pointer; }
.tool .btn-dark { border: 0; }
.tool .btn-dark[disabled] { opacity: .6; cursor: progress; }
.tool .hint { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.tool details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.tool summary { cursor: pointer; font-weight: 650; color: var(--ink2); }
.tool textarea { width: 100%; min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; margin: 10px 0; }
/* 16px on phones: iOS zooms the page into any field with smaller text. */
@media (max-width: 760px) { .tool textarea { font-size: 16px; } }
.tool ol { margin: 8px 0 0; padding-left: 20px; color: var(--ink2); font-size: 15px; }
@media (max-width: 560px) { .tool .row { flex-direction: column; } .tool .row .btn { width: 100%; } .tool { padding: 18px; } }

.result { max-width: 760px; margin: 22px auto 0; text-align: left; }
.result[hidden] { display: none; }
.verdict { border-radius: 18px; padding: 20px 22px; border: 1px solid var(--line); background: var(--card); }
.verdict h2 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; line-height: 1.25; }
.verdict p { margin: 0; color: var(--ink2); }
.verdict.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 7%, var(--card)); }
.verdict.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--card)); }
.verdict.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--card)); }
.verdict .meta-line { margin-top: 8px; font-size: 13px; color: var(--muted); }
.scripts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.scripts li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.scripts .name { font-weight: 750; font-size: 17px; }
.scripts .kind { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.scripts .name { overflow-wrap: anywhere; }
.scripts .why { margin: 4px 0 0; color: var(--ink2); font-size: 15px; }
.scripts code { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.scripts .refs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 14px; }
.scripts .refs a { color: var(--b1); font-weight: 600; }
.swap { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--soft); font-size: 14.5px; color: var(--ink2); }
.swap a { color: var(--b1); font-weight: 700; }
.todo { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.todo h3 { margin: 0 0 8px; font-size: 18px; }
.todo ol { margin: 0; padding-left: 20px; color: var(--ink2); }
.todo li { margin: 4px 0; }
.note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

.guide { max-width: 800px; margin: 0 auto; }
.guide h2 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.02em; line-height: 1.15; margin: 56px 0 12px; }
.guide h3 { font-size: 19px; margin: 24px 0 6px; }
.guide p, .guide li { color: var(--ink2); font-size: 16.5px; }
.guide ol, .guide ul { padding-left: 22px; }
.guide code { background: var(--soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 14px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 10px 0; background: var(--card); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.faq details p { margin: 10px 0 0; }
.ours { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.ours a { display: flex; gap: 12px; align-items: center; text-decoration: none; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  background: var(--card); }
.ours img { width: 44px; height: 44px; border-radius: 11px; }
.ours b { display: block; } .ours span { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .ours { grid-template-columns: 1fr; } }

/* Dark theme, this page only */
@media (prefers-color-scheme: dark) {
  body.checker { --ink: #e8ecf4; --ink2: #b8c1d1; --muted: #8b96a8; --line: #263043; --soft: #151c2b; --card: #111827; --input: #0b1220;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -18px rgba(0,0,0,.7); background: #0b1020; color: var(--ink); color-scheme: dark; }
  body.checker .nav { background: rgba(11,16,32,.82); border-bottom-color: var(--line); }
  body.checker .hero::before { background: radial-gradient(560px 320px at 50% 0%, rgba(99,102,241,.22), transparent 70%), linear-gradient(180deg, #0f1428, #0b1020 75%); }
  body.checker .pill, body.checker .btn-ghost { background: var(--card); border-color: var(--line); color: var(--ink); }
  body.checker .btn-dark { background: #e8ecf4; color: #0b1220; }
  body.checker .tool input, body.checker .tool textarea { border-color: #334155; }
  body.checker .foot { background: #0d1324; border-top-color: var(--line); }
  body.checker .scripts .refs a, body.checker .swap a { color: #a5b4fc; }
}