/* scraper-request.css: /custom-scrapers/ (the plan details, care strip, proof list, limits and the request form,
   driven by /scraper-request.js). Loaded after styles.css and ui.css; uses their tokens only. */

/* ---------- Plans: local prices and what each includes ---------- */
.plan-local { margin: -0.25rem 0 1rem; font-size: 0.8125rem; color: var(--ink-2); }
.plan-includes { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--rule); }
.plan-includes li { padding: 0.5625rem 0 0.5625rem 1.125rem; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; color: var(--ink-2); position: relative; text-wrap: pretty; }
.plan-includes li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.5rem; height: 2px; background: var(--vermilion); }

/* The care plan: a ruled strip under the two notices. */
.care {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    margin-top: 2.5rem; padding: 1.25rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.care > div { flex: 1 1 28rem; min-width: 0; }
.care-title { margin: 0; font: 600 1.375rem/1.25 var(--serif); letter-spacing: -0.01em; }
.care-price { margin-left: 0.5rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.care-local { margin: 0.25rem 0 0.625rem; font-size: 0.8125rem; color: var(--ink-2); }
.care p:last-child { margin: 0; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.care .btn { flex: none; }

/* ---------- Free if public ---------- */
.public-band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: end; }
.public-band .section-intro { margin-bottom: 0; }
.public-how { margin: 0; padding: 1rem 0 0 1.125rem; border-left: 2px solid var(--vermilion); color: var(--ink); max-width: 44ch; text-wrap: pretty; }

/* ---------- Proof: our own public scrapers ---------- */
.proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
.proof li { padding: 1.125rem 0 1.25rem; border-top: 1px solid var(--rule); min-width: 0; }
.proof a { font: 600 1.1875rem/1.3 var(--serif); letter-spacing: -0.005em; text-decoration-color: var(--vermilion); }
.proof p { margin: 0.375rem 0 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* ---------- What we don't build ---------- */
.limits { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 52rem; border-top: 1px solid var(--ink); }
.limits li { padding: 0.875rem 0 0.875rem 1.75rem; border-bottom: 1px solid var(--rule); position: relative; }
.limits li::before { content: "\00d7"; position: absolute; left: 0.125rem; top: 0.75rem; font: 500 1.125rem/1.2 var(--mono); color: var(--vermilion-ink); }

/* ---------- The request form ---------- */
.request-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.request-grid > * { min-width: 0; }
.req-aside { margin-top: clamp(0rem, 6vw, 5.5rem); }

.req { position: relative; max-width: 40rem; margin: 0; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
.req-field { margin: 0 0 1.25rem; min-width: 0; }
.req label { display: block; font-size: 0.9375rem; font-weight: 500; margin: 0 0 0.375rem; }
.req-optional { font-weight: 400; color: var(--ink-2); }
.req-hint { margin: -0.125rem 0 0.5rem; font-size: 0.8125rem; color: var(--ink-2); max-width: 60ch; }
.req input[type="email"], .req input[type="text"], .req textarea, .req select {
    display: block; width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--ink); background: var(--surface);
    border: 1px solid var(--ink-2); border-radius: 3px; padding: 0.6875rem 0.75rem;
    transition: border-color 160ms var(--ease-out);
}
.req textarea { resize: vertical; min-height: 5.25rem; }
#req-sites { font-family: var(--mono); font-size: 0.9375rem; }
.req select {
    appearance: none; padding-right: 2.25rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
    background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.75rem) 55%; background-size: 0.375rem 0.375rem; background-repeat: no-repeat;
}
.req input:hover, .req textarea:hover, .req select:hover { border-color: var(--ink); }
.req input:focus-visible, .req textarea:focus-visible, .req select:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 1px; border-color: var(--ink); }
.req [aria-invalid="true"] { border-color: var(--vermilion); }
.req-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

.req-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.625rem; align-items: start; margin: 0.25rem 0 1.5rem; }
.req-check input { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; cursor: pointer; }
.req-check label { font-weight: 400; margin: 0; cursor: pointer; text-wrap: pretty; }

.req-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.req-submit .btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.req-submit .btn[aria-busy="true"] { cursor: progress; }
.req-msg { flex: 1 1 14rem; margin: 0; font-size: 0.9375rem; color: var(--vermilion-ink); }
.req-msg:empty { display: none; }
.req-fine { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.req-fine a { color: inherit; }
/* Left empty by people; form-filling bots fill it in. Out of sight and out of the tab order. */
.req-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sent: the form gives way to a short note under a vermilion rule. */
form.req[data-state="sent"] { border-top: 0; padding-top: 0; }
.req-done { padding-top: 1rem; border-top: 2px solid var(--vermilion); outline: none; }
.req-done h3 { margin: 0 0 0.5rem; font: 600 1.5rem/1.2 var(--serif); letter-spacing: -0.01em; }
.req-done p { margin: 0 0 0.5rem; max-width: 52ch; text-wrap: pretty; }
.req-done .req-fine { margin-top: 0.75rem; }

@media (max-width: 52rem) {
    .public-band, .request-grid { grid-template-columns: minmax(0, 1fr); }
    .proof { grid-template-columns: minmax(0, 1fr); }
    .req-aside { margin-top: 0; }
}
@media (max-width: 30rem) {
    .req-pair { grid-template-columns: minmax(0, 1fr); }
    .req-submit .btn { flex: 1 1 100%; text-align: center; }
    .care .btn { flex: 1 1 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .req input, .req textarea, .req select { transition: none; }
}