/* Tektura: styles for the contact page only, split out of site.css so no other page has to
   download them. Loaded after site.css. The rules are in the order they had there, and
   none of them needs to win against a later rule of the same weight in site.css, so the
   split changes nothing on screen. A rule another page needs goes in site.css. */

.between{justify-content:space-between}


/* ---------- Accent bar for a caveat ---------- */
.caveat{display:flex;gap:16px;align-items:flex-start}
.caveat::before{content:"";width:6px;align-self:stretch;background:var(--signal);border-bottom-left-radius:4px;border-top-right-radius:4px;flex-shrink:0}
.caveat p{font-size:15px;color:var(--body)}

/* The note for a browser without scripts opens the form; with scripts it takes no room. */
@media (scripting:enabled){#enq>noscript+*{margin-top:0}}

/* What needs fixing reads apart from focus (an orange edge) and from links (orange text):
   a tinted field with a darker edge, and a marked line under it in the darker red. */
#enq :is(.input,textarea)[aria-invalid=true]{background:var(--signal-bg);box-shadow:inset 0 0 0 2px var(--signal-text)}
#enq :is(.input,textarea)[aria-invalid=true]:focus{box-shadow:inset 0 0 0 2.5px var(--signal)}
#enq .field .f-err,#enq p.error{position:relative;padding-left:26px;color:var(--signal-text);font-weight:500;line-height:1.4}
#enq .field .f-err::before,#enq p.error::before{content:"!";position:absolute;left:0;top:1px;display:grid;place-items:center;width:18px;height:18px;background:var(--signal-text);color:var(--white);font-size:12px;font-weight:700;line-height:1;border-top-right-radius:6px;border-bottom-left-radius:6px}
#enq p.error{padding:12px 14px 12px 42px;background:var(--signal-bg);font-size:15px;border-top-right-radius:var(--r-btn);border-bottom-left-radius:var(--r-btn)}
#enq p.error::before{left:14px;top:14px}
#enq p.error a{color:inherit}
@media (forced-colors:active){#enq :is(.input,textarea)[aria-invalid=true]{border-width:3px}}

/* Choices in a row */
.chips-e{display:flex;flex-wrap:wrap;gap:8px}

.ts-box{min-height:0;margin:4px 0 2px}
.ts-box:empty{display:none}
.ts-box.ts-ask{padding:10px;background:var(--paper);border-top-right-radius:var(--r-card);border-bottom-left-radius:var(--r-card);box-shadow:0 0 0 1px var(--rule)}
/* Our own line for Cloudflare’s hidden check: checking, then done */
.ts-state{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);text-align:left!important}
.ts-state::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--rule);box-shadow:0 0 0 3px rgba(92,100,112,.12)}
.ts-state[data-s="checking"]::before{background:var(--slate)}
@media (prefers-reduced-motion:no-preference){.ts-state[data-s="checking"]::before{animation:ts-pulse 1.1s ease-in-out infinite}}
@keyframes ts-pulse{50%{opacity:.35}}
.ts-state[data-s="ok"]{color:var(--ink)}
.ts-state[data-s="ok"]::before{width:11px;height:6px;border-radius:0;background:none;box-shadow:none;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg) translate(1px,-2px)}
.ts-state[data-s="fail"],.ts-state[data-s="ask"]{color:var(--signal)}
.ts-state[data-s="fail"]::before,.ts-state[data-s="ask"]::before{background:var(--signal);box-shadow:0 0 0 3px rgba(194,65,12,.15)}
.ts-box:not(.ts-ask){margin:0}
/* How they heard of us: each answer with a small line drawing, like the estimator */
#source input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#source{margin-bottom:8px}
.ce.ic span{gap:8px}
.ce.ic input:checked+span::before{display:none}
.chi{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ce.ic input:not(:checked)+span .chi{color:var(--signal)}

/* The message box grows with what is typed (contact.js), so there is no handle to drag. */
#enq textarea{min-height:0;resize:none;overflow-y:hidden;line-height:1.5}
@supports (field-sizing:content){#enq textarea{field-sizing:content;min-height:calc(4lh + 26px)}}
/* Social media asks which: a smaller row under the first, tied to it by the gap alone. */
.sub-q{border:0;padding:0;margin:10px 0 0;min-width:0}
.sub-q legend{padding:0;margin-bottom:8px}
#social input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chips-s .ce span{min-height:40px;padding:8px 14px;font-size:14.5px}
/* A day and a time they suggest, side by side */
.when-at{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-top:10px}
.when-at .field > label{font-weight:500;font-size:14.5px}
.when-at .input{min-height:50px}
@media (max-width:420px){.when-at{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}}