/* Tektura: styles for the free tools: the website check, ticket fees and the checklist 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)}
/* Choices in a row */
.chips-e{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- The free tools: website check, ticket fees, checklist ---------- */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.cols2{grid-template-columns:minmax(0,1fr)}}
/* The example address is a shade lighter than slate so it doesn't read as filled in:
   4.5:1 on the white box, still enough to read. */
#chk-a::placeholder{color:#707782;opacity:1}
.chk-out{margin-top:18px}
.chk-wait{padding:12px 2px}
.chk-sum{margin:8px 0 4px;font-size:16px}
.chk-g{font-size:13px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin:22px 0 6px;font-weight:500}
.chk-list{list-style:none;margin:0;padding:0}
.chk-i{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--rule)}
.chk-i p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--slate);overflow-wrap:anywhere}
.chk-dot{width:12px;height:12px;margin-top:5px;border-radius:50%;background:#2F7D4F}
.chk-w{font-size:13px;color:var(--slate);margin-left:4px;white-space:nowrap}
.tf-who{border:0;padding:0;margin:6px 0 0;min-width:0}
.tf-who legend{margin-bottom:8px}
.tf-who input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tf-own summary{cursor:pointer;font-weight:600;font-size:15px}
.tf-out{border-top:1px solid var(--rule);padding-top:16px;display:grid;gap:10px}
.tf-out p{margin:0}
.tf-big{font-weight:600;font-size:clamp(32px,4vw,44px);line-height:1.05;font-variant-numeric:tabular-nums}
.tf-big small{font-size:16px;font-weight:500;color:var(--slate)}
/* On a phone the answer comes straight after the four main boxes, so it stays in sight above the keyboard. */
@media (max-width:560px){#tf{display:flex;flex-direction:column}#tf>.tf-out{order:1;padding-bottom:18px;border-bottom:1px solid var(--rule)}#tf>.tf-who,#tf>.tf-own{order:2}#tf>.tf-who{margin-top:18px}}
.cl-head{max-width:760px}
.cl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 40px;margin-top:40px}
@media (max-width:760px){.cl-grid{grid-template-columns:minmax(0,1fr)}}
.cl-sec h2{font-size:20px;margin:0 0 10px}
.cl{list-style:none;margin:0;padding:0}
.cl li{border-top:1px solid var(--rule);line-height:1.5}
/* Real tick boxes, in the mark's corners: they tick on screen and print as ticked or
   empty. Nothing is kept once the page is closed. */
.cl label{display:grid;grid-template-columns:16px minmax(0,1fr);gap:14px;align-items:start;padding:10px 0 10px 2px;cursor:pointer}
.cl input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:4px 0 0;border:1.5px solid var(--ink);border-radius:0;border-bottom-left-radius:5px;border-top-right-radius:5px;background:var(--white) center/12px 12px no-repeat;cursor:pointer;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cl input:checked{background-color:var(--ink);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 6.2l2.3 2.3 4.7-5"/></svg>')}
.cl input:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px}
.cl input:checked+span{color:var(--slate)}
.cl label span{text-align:left;hyphens:manual}
@media (forced-colors:active){.cl input{appearance:auto;-webkit-appearance:auto}}
.cl-foot{margin-top:36px;color:var(--slate)}
.cl-from{display:none}
/* The website check's result: the address that was checked, path and all, under its label. */
.chk-at{margin:0;display:grid;gap:4px}
.chk-at:focus{outline:none}
.chk-url{font-size:15px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
@media print{
  .cl-from{display:inline}
  .cl-print{display:none}
  .cl-page{padding:0}
  .cl-grid{grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:18px}
  .cl li{font-size:11.5pt;break-inside:avoid}
  .cl label{padding:6px 0;gap:12px}
  .cl-sec{break-inside:avoid}
  .cl-page .htab{font-size:22pt;background:none!important;color:#111!important;padding:0!important;-webkit-print-color-adjust:exact}
  .cl-foot a::after{content:" (tektura.org" attr(href) ")"}
}
.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:12px;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}
/* Phone type scale: this page's share. The scale is described at the end of site.css. */
@media (max-width:520px){
  /* body text inside cards and lists */
  .tf-big small{font-size:17px}
  /* sub-headings */
  .cl-sec h2{font-size:22px}
}