/* horizontal.one/services: MCP 服务实测 · Tested MCP Servers (tools/services/build.mjs makes the pages). On top of site.css and
   cases.css: their tokens, type scale, spacing steps and easing. The chips say a test's result in words; the colour only
   repeats it: works in the live green, needs a sign in in the amber, the rest in grey. */

/* ---------------------------------------------------------------- chips */
.lv-works { color: var(--live); border-color: rgb(111 211 154 / 0.5); }
.lv-login { color: var(--accent); border-color: rgb(242 180 90 / 0.5); }
.lv-broken, .lv-down { color: var(--muted); }
.lv-untested, .lv-local { color: var(--faint); border-style: dashed; }
.chip.cat { color: var(--soft); background: var(--raised); border-color: var(--raised); text-decoration: none; }
a.chip.cat:hover { background: var(--hover); }
.chip.warn { gap: 4px; color: #ffb4a8; border-color: rgb(255 180 168 / 0.5); }
.chip.warn .icon { width: 12px; height: 12px; }
.chip.ro { color: var(--live); border-color: rgb(111 211 154 / 0.4); }
.chip.rw { color: #ffb4a8; border-color: rgb(255 180 168 / 0.5); }
.ue-tested { color: var(--live); border-color: rgb(111 211 154 / 0.5); }
.ue-owner { color: var(--sky); border-color: rgb(124 196 255 / 0.45); }
.ue-derived { color: var(--faint); border-style: dashed; }
.faint { color: var(--faint); font-size: 14px; line-height: 20px; }

/* ---------------------------------------------------------------- the list, the search */
.cases-head .kpis { margin-top: 8px; }
.sub { margin: 32px 0 16px; font-size: 24px; line-height: 32px; }
.cases-body .wrap > .sub:first-child, .s-start > .sub:first-child { margin-top: 16px; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.svc-list[hidden] { display: none; }
.svc-link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 24px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.svc-link:hover { background: var(--raised); border-color: #5a5a5a; }
.svc-link .case-chips { margin-bottom: 4px; }
.svc-link h3 { font-size: 20px; line-height: 28px; overflow-wrap: anywhere; }
.svc-name { margin: 0; color: var(--faint); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.svc-desc { margin: 0; color: var(--muted); font-size: 14px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.svc-link .case-foot { margin-top: auto; }
.cat-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cat-links .f-chip { text-decoration: none; }
.cat-links .f-chip span { color: var(--faint); font-variant-numeric: tabular-nums; }
.cases-body .cat-links + .btn, .cases-body .cat-links { margin-top: 24px; }
.s-start > .cat-links { margin-top: 0; }
.see { margin: 0 0 16px; }
.s-start .see { max-width: 680px; }

/* ---------------------------------------------------------------- a server */
.svc-page h1 { overflow-wrap: anywhere; }
.connect { display: grid; gap: 8px; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.connect-row { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.connect-row .k { color: var(--faint); font-size: 14px; line-height: 20px; }
.connect code, .svc-page code, .usecase code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.connect-row code { padding: 8px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--rule); }
.copy { font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); color: var(--text); cursor: pointer; transition: background-color 300ms var(--ease); }
.copy:hover { background: var(--hover); }
.copy:active { transform: scale(0.98); }
.connect details summary { width: fit-content; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 20px; }
.connect details summary:hover { color: var(--text); }
.connect pre, .usecase pre { margin: 8px 0 0; padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--rule); overflow-x: auto; }
@media (max-width: 560px) { .connect-row { grid-template-columns: minmax(0, 1fr) auto; } .connect-row .k { grid-column: 1 / -1; } }
.warnings { display: grid; gap: 12px; }
.warning { display: grid; gap: 8px; padding: 16px; border-radius: 12px; border: 1px solid rgb(255 180 168 / 0.4); background: rgb(255 180 168 / 0.06); }
.warning p { margin: 0; line-height: 24px; }
.warning b { color: #ffb4a8; font-weight: 600; }
.warning.info { border-color: var(--line); background: var(--surface); }
.warning.info b { color: var(--text); }
.found { color: var(--muted); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.found q { color: var(--soft); }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.tool { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tool p { margin: 0; line-height: 24px; overflow-wrap: anywhere; }
.tool-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-head code { color: var(--text); font-weight: 600; }
.tool-title { color: var(--soft); }
.tool .params { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.tool .params code { color: var(--faint); font-size: 12px; line-height: 16px; }
.tool .params code.req { color: var(--soft); text-decoration: underline; text-underline-offset: 4px; }
.withheld { color: var(--faint); }
.hist th[scope="row"] { font-variant-numeric: tabular-nums; }
.svc-cta { display: grid; gap: 12px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.svc-cta h2, .svc-cta .sub { margin: 0; font-size: 24px; line-height: 32px; }
.svc-cta p { margin: 0; line-height: 28px; }
.svc-view .v-body { display: grid; gap: 24px; }

/* ---------------------------------------------------------------- ways to use a server */
.usecases { display: grid; gap: 16px; }
.usecase { display: grid; gap: 12px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.usecase h3 { font-size: 20px; line-height: 28px; }
.usecase p { margin: 0; line-height: 28px; }
.usecase .case-steps li { display: grid; gap: 4px; }
.usecase .args { color: var(--muted); }
.usecase .result code { color: var(--soft); white-space: pre-wrap; }
.usecase .why { color: var(--soft); }

/* ---------------------------------------------------------------- claiming, the plans */
.svc-form { display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.svc-form[hidden] { display: none; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > span, .field legend { color: var(--soft); font-size: 14px; line-height: 20px; font-weight: 600; padding: 0; }
.field input:not([type="radio"]), .field textarea { font: inherit; font-size: 16px; line-height: 24px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; width: 100%; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sky); outline-offset: 0; }
.field input[aria-invalid="true"] { border-color: #ffb4a8; }
.radio { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 16px; line-height: 24px; cursor: pointer; }
.radio input { accent-color: var(--accent); width: 16px; height: 16px; }
.field legend + .radio { margin-top: 8px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.form-msg:empty { display: none; }
.form-msg.ok { color: var(--live); }
.form-msg.err { color: #ffb4a8; }
.pricing .wrap { display: grid; gap: 24px; padding: 32px 0 64px; }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.plan { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.plan.main { border-color: rgb(242 180 90 / 0.5); }
.plan h2 { font-size: 20px; line-height: 28px; }
.plan .price { margin: 0; font-size: 30px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; color: var(--soft); font-size: 14px; line-height: 20px; }
.plan li .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--live); }
.plan .btn, .plan .see { margin-top: auto; }
.want-for { margin: 0; font-weight: 600; }
.svc-faq dl { display: grid; margin: 0; border-top: 1px solid var(--line); }
.svc-faq dl > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.svc-faq dt { font-weight: 600; line-height: 28px; }
.svc-faq dd { margin: 0; color: var(--muted); line-height: 28px; }
.pricing .lede, .pricing .note { max-width: 760px; }

/* ---------------------------------------------------------------- the numbers to watch (assets/services.js draws them) */
.key-form[hidden] { display: none; }
.key-form { display: grid; gap: 12px; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.m-body { display: grid; gap: 32px; }
.cols { display: block; width: 100%; height: auto; overflow: visible; }
.cols .base { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cols path { fill: var(--viz); }
.cols .hit { fill: transparent; }
.cols g:hover path, .cols g:focus path { fill: #e09a12; }

/* the method page: a long chip in the left column wraps instead of running into the words beside it */
.services-site .defs dt .chip { white-space: normal; text-align: left; }