/* Intros page only: the request builder (area cards, channel list, the request summary, the confirmation).
   Everything else on the page comes from site.css. */

/* version line above the page title, and the notice shown when the page is opened from the map */
.vline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.pre{margin-top:18px;max-width:34em;font-weight:600}
.pre a{white-space:nowrap}

/* left column: the request as it is built. Stays in view on wide screens. */
.slip{align-self:start;position:sticky;top:84px;display:grid;gap:12px}
.sum{font-size:19px;line-height:1.35;font-weight:600;max-width:24em;text-wrap:pretty;overflow-wrap:anywhere}
@media (max-width:800px){.slip{position:static}}

/* the form: three parts, each on a 2px rule */
.rq{display:grid;gap:48px;max-width:720px;align-content:start}
.rq .k{margin-bottom:6px}
.err{font-weight:700;border-left:2px solid var(--ink);padding-left:12px}

/* part 1: where the need sits */
.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
.picks li:last-child{grid-column:1/-1}
.picks li{display:grid}
.pick{display:grid;gap:4px;align-content:start;width:100%;text-align:left;padding:14px 16px 16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.pick:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pick strong{font-size:19px;line-height:1.2;font-weight:700}
.pick .s{font-size:15px;line-height:1.35;color:var(--ink2)}
.pick[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.pick[aria-pressed="true"] .s,.pick[aria-pressed="true"] .src{color:inherit}
@media (max-width:560px){.picks{grid-template-columns:1fr}}

/* part 2: the channel or enabler, as a scannable two-column list read downwards */
.opts{columns:2;column-gap:var(--gap);border-top:1px solid var(--line);margin-top:6px}
.opts li{break-inside:avoid;border-bottom:1px solid var(--line)}
.opts button{display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:6px;align-items:baseline;width:100%;text-align:left;padding:10px 8px;font-size:16px;line-height:1.3}
.opts b{font-weight:800;font-variant-numeric:tabular-nums}
.opts button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.opts button[aria-pressed="true"]{background:var(--ink);color:var(--bg);box-shadow:none}
.unsure{margin-top:14px}
@media (max-width:560px){.opts{columns:1}}

/* part 3: details, how to be introduced, send */
.lbl{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.how .note{margin-top:10px}
.send{margin-top:28px;border-top:1px solid var(--line);padding-top:18px}
.send .btn{margin:6px 0 16px}

/* the confirmation that takes the form's place */
.done{max-width:720px;align-self:start}
.done:focus{outline:0}
.done .facts{margin:8px 0 20px}
.done dd{overflow-wrap:anywhere}

/* notes and link rows under the lower sections */
.after{margin-top:18px;max-width:38em}
.links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px}
.next-h{margin:32px 0 10px}