/* WebDoctor theme — clinical diagnostics: light slate, medical teal, status colors */
:root{
  --bg:#f6f8f8;
  --fg:#132029;
  --muted:#5c6b73;
  --card:#ffffff;
  --border:#dfe6e8;
  --accent:#0f766e;      /* medical teal */
  --accent-2:#2563eb;    /* info blue */
  --accent-ink:#ffffff;
  --ring:#0f766e;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --font-display:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --radius:14px;--radius-sm:9px;--maxw:1080px;
  --shadow:0 1px 2px rgba(19,32,41,.05),0 16px 34px -22px rgba(15,118,110,.22);
}
body{
  background:
    radial-gradient(860px 460px at 92% -12%, rgba(15,118,110,.08), transparent 62%),
    radial-gradient(700px 400px at -5% 8%, rgba(37,99,235,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
.brand-accent{color:var(--accent)}
.brand-pulse{width:40px;height:22px;color:var(--accent);flex:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
.eyebrow{color:var(--accent);font-weight:700}
.rule{height:1px;border:0;margin:1.4rem 0;background:linear-gradient(90deg,transparent,var(--border),transparent)}
code{font-family:var(--font-mono);font-size:.92em;background:color-mix(in srgb,var(--fg) 6%,transparent);padding:.08em .35em;border-radius:5px}
pre{background:#0f1d24;color:#d7e5ea;border-radius:var(--radius-sm);padding:1rem 1.2rem;overflow-x:auto;font-size:.88rem;line-height:1.55}
pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* comparison / reference tables */
.table-scroll{overflow-x:auto;margin:1.2rem 0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card)}
table.cmp{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
table.cmp th,table.cmp td{text-align:left;padding:.6em .8em;border-bottom:1px solid var(--border);vertical-align:top}
table.cmp thead th{background:color-mix(in srgb,var(--accent) 7%,var(--card));font-weight:700}
table.cmp tbody tr:last-child td{border-bottom:0}

/* ---------- validator tool ---------- */
.vd-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.vd-tabs button{padding:.55em 1.1em;border:1px solid var(--border);border-radius:999px;background:var(--bg);font-weight:600;font-size:.92rem;color:var(--muted)}
.vd-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vd-pane{display:none}
.vd-pane.active{display:block}
.vd-pane input[type=url]{font-family:var(--font-mono);font-size:.95rem;width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65em .8em;font-weight:400}
.vd-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.vd-file{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:1.1rem;border:2px dashed var(--border);border-radius:var(--radius-sm);background:var(--bg)}
.vd-file .fname{font-family:var(--font-mono);font-size:.88rem;color:var(--muted);word-break:break-all}
.vd-note{color:var(--muted);font-size:.82rem;margin-top:.9rem}
.vd-status{margin-top:1rem;color:var(--muted);font-weight:600;min-height:1.4em}
.vd-status.busy::before{content:'';display:inline-block;width:.9em;height:.9em;margin-right:.5ch;border:2px solid var(--accent);border-right-color:transparent;border-radius:50%;vertical-align:-.1em;animation:vdspin .7s linear infinite}
@keyframes vdspin{to{transform:rotate(360deg)}}

/* result stats: compact inline pills, not the base .stats card grid */
.panel .stats{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.panel .stat{display:inline-flex;align-items:baseline;gap:.55ch;width:auto;padding:.4rem .85rem;border:1px solid var(--border);border-radius:999px;background:var(--card)}
.panel .stat b{display:inline;font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0;white-space:nowrap}
.panel .stat span{font-size:.7rem;white-space:nowrap}

/* result banner */
.vd-banner{display:flex;gap:1rem;align-items:flex-start;border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.4rem 0 1rem;border:1px solid}
.vd-banner .ico{font-size:1.6rem;line-height:1}
.vd-banner b{display:block;font-size:1.15rem;margin-bottom:.15rem}
.vd-banner p{margin:0;font-size:.92rem;color:var(--muted)}
.vd-banner.ok{background:color-mix(in srgb,var(--ok) 8%,var(--card));border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.vd-banner.ok b{color:var(--ok)}
.vd-banner.warn{background:color-mix(in srgb,var(--warn) 8%,var(--card));border-color:color-mix(in srgb,var(--warn) 35%,var(--border))}
.vd-banner.warn b{color:var(--warn)}
.vd-banner.bad{background:color-mix(in srgb,var(--bad) 7%,var(--card));border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}
.vd-banner.bad b{color:var(--bad)}
.vd-meta{font-size:.82rem;color:var(--muted);font-family:var(--font-mono);word-break:break-all;margin:.3rem 0 1rem}

/* findings */
.vd-list{list-style:none;margin:.6rem 0 1.4rem;padding:0}
.vd-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.55em .8em;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.45rem;background:var(--card);font-size:.92rem;word-break:break-word}
.vd-list li::before{content:'';flex:none;width:.6em;height:.6em;border-radius:50%;margin-top:.45em}
.vd-list.err li::before{background:var(--bad)}
.vd-list.wrn li::before{background:var(--warn)}
.vd-h{margin:1.6rem 0 .4rem;font-size:1.05rem}
.vd-h.err{color:var(--bad)}
.vd-h.wrn{color:var(--warn)}
.vd-more{background:none;border:1px solid var(--border);border-radius:999px;padding:.4em 1em;font-size:.85rem;font-weight:600;color:var(--muted);margin:.2rem 0 1rem}
.vd-more:hover{border-color:var(--accent);color:var(--fg)}

/* sitemap index children */
.vd-child{display:flex;gap:.8rem;align-items:center;padding:.6em .8em;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.45rem;background:var(--card);font-size:.9rem}
.vd-child .u{font-family:var(--font-mono);word-break:break-all;flex:1}
.vd-child .lm{color:var(--muted);font-size:.8rem;white-space:nowrap}
.vd-child button{flex:none;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);border-radius:999px;padding:.35em .9em;font-weight:600;font-size:.82rem}
.vd-child button:hover{background:var(--accent);color:var(--accent-ink)}

/* child auto-check chips */
.vd-child .ch-sum{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ch-chip{font-family:var(--font-mono);font-size:.74rem;font-weight:600;padding:.15em .6em;border-radius:999px;border:1px solid var(--border);background:var(--bg);white-space:nowrap}
.ch-chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,var(--bg))}
.ch-chip.wrn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--bg))}
.ch-chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,var(--bg))}
.vd-child.ch-bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--border))}

/* single-input tools (AI checker / generator) */
input.vd-domain{width:100%;font-family:var(--font-mono);font-size:.95rem;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65em .8em}

/* AI readiness sections */
.ai-score{font-size:2rem;font-weight:800;line-height:1}
.ai-sec{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);padding:1rem 1.1rem;margin:.6rem 0}
.ai-sec h4{margin:0 0 .5rem;font-size:1rem;display:flex;align-items:center;gap:.6ch}
.ai-sec .mark{flex:none;width:1.35em;height:1.35em;border-radius:50%;display:inline-grid;place-items:center;font-size:.8em;font-weight:800;color:#fff}
.ai-sec .mark.ok{background:var(--ok)} .ai-sec .mark.wrn{background:var(--warn)} .ai-sec .mark.bad{background:var(--bad)}
.ai-sec ul{list-style:none;margin:0;padding:0}
.ai-sec li{padding:.3em 0;font-size:.92rem;display:flex;gap:.6ch;align-items:flex-start}
.ai-sec li::before{content:'·';font-weight:800}
.ai-sec li.ok::before{content:'✓';color:var(--ok)}
.ai-sec li.wrn::before{content:'!';color:var(--warn)}
.ai-sec li.bad::before{content:'✕';color:var(--bad)}
.ai-bots{margin-top:.6rem}

/* generator output */
.gen-out{width:100%;min-height:320px;font-family:var(--font-mono);font-size:.88rem;line-height:1.55;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9em 1em;resize:vertical}
.pro-box{border-left:4px solid var(--warn)}

/* tool directory cards on home */
.toolcard{border-left:4px solid var(--accent)}
.toolcard .btn{margin-top:.8rem}
.sooncard{opacity:.75}
.sooncard h3{color:var(--muted)}
.soon-tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);font-weight:700}

/* language switcher: header dropdown */
.lang-dd{position:relative}
.lang-dd summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45ch;
  padding:.5em .8em;border-radius:var(--radius-sm);color:var(--muted);font-size:.95rem;font-weight:600;
  white-space:nowrap;transition:background .15s,color .15s;user-select:none}
.lang-dd summary::-webkit-details-marker{display:none}
.lang-dd summary::after{content:'▾';font-size:.75em;opacity:.6}
.lang-dd summary:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg)}
.lang-dd[open] summary{color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.lang-dd .globe{font-size:1.05em}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:190px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:.35rem;display:grid;gap:2px}
.lang-menu a{padding:.45em .85em;border-radius:7px;font-size:.9rem;font-weight:600;color:var(--fg)}
.lang-menu a:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lang-menu a[aria-current=true]{background:var(--accent);color:var(--accent-ink)}
@media(max-width:720px){
  .lang-dd{width:100%}
  .lang-dd summary{width:100%}
  .lang-menu{position:static;border:0;box-shadow:none;padding:.2rem 0 .4rem;grid-template-columns:repeat(2,1fr)}
}