/* Shared stylesheet for the three sites (CR-T-059): one file, a per-site colour by body class.
   Modelled on the local directories ChatGPT cites (BestProsInTown, Florida Roofing Directory, Yably; read 21 Oct
   2026): a solid brand bar with the town menu, a serif for headings, each business as a numbered listing with its
   facts under small labels and the phone as the action, plain rules between entries, and a footer of links. On a
   wide screen the facts sit in columns; on a phone they stack. The comparison table stays a <table> in the HTML
   (CMP §5); only its look changes (td[data-label], pages.comparison). Styling only: no rule here changes what a page
   says, so recorded reads (review.page_hash) are unaffected. Light and dark follow the reader's system setting. */
:root{
 --bar:#173b4d; --bar-ink:#ffffff; --bar-soft:#c9dbe3;
 --page:#ffffff; --tint:#f6f3ec; --ink:#1b1d1f; --muted:#5d6266; --rule:#e2ded5; --strong-rule:#1b1d1f;
 --link:#175e86; --num:#b0541f; --ok:#2f7a4f;
 --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
 --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root{
 --bar:#0f2733; --bar-soft:#9fbccb;
 --page:#121416; --tint:#1a1d1f; --ink:#e7e5e0; --muted:#a2a6a8; --rule:#2e3235; --strong-rule:#e7e5e0;
 --link:#82bde0; --num:#e8995f; --ok:#78c79a; color-scheme:dark}}
.face-trustedsource{--bar:#1f3a6b; --link:#24508f; --num:#24508f}
.face-localstrust{--bar:#5c2c4a; --link:#7a3b62; --num:#7a3b62}
@media (prefers-color-scheme: dark){
 .face-trustedsource{--bar:#16294b; --link:#9fb8e6; --num:#9fb8e6}
 .face-localstrust{--bar:#3f1f33; --link:#dba3c6; --num:#dba3c6}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;
 overflow-wrap:break-word}
.wrap{max-width:980px;margin:0 auto;padding:0 24px}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* brand bar and town menu */
header.site{background:var(--bar);color:var(--bar-ink)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;min-height:64px;padding-top:8px;
 padding-bottom:8px}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--bar-ink);text-decoration:none;
 font-family:var(--serif);font-size:23px;font-weight:700;letter-spacing:-.01em}
.brand .mark{color:#e9a23b;--mark-ink:var(--bar);flex:none}
.topnav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:15px}
.topnav a{color:var(--bar-soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.topnav a:hover{color:var(--bar-ink);border-bottom-color:#e9a23b}

main{padding-top:28px;padding-bottom:64px}

/* page top: breadcrumb, title, date line, the answer as a lead paragraph */
.crumbs{font-size:14px;color:var(--muted);margin:0 0 6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(28px,4.4vw,42px);line-height:1.12;letter-spacing:-.015em;
 margin:4px 0 10px;max-width:24ch}
h2{font-family:var(--serif);font-size:23px;line-height:1.25;margin:44px 0 12px;padding-top:14px;
 border-top:2px solid var(--strong-rule)}
p{max-width:70ch}
.checked{margin:0 0 18px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.answer{font-size:18.5px;line-height:1.55;margin:0 0 28px;max-width:62ch}
.answer a{font-size:16px;white-space:nowrap}
.note{color:var(--muted);font-size:14.5px;font-style:italic}
.unverified{color:var(--muted);font-style:italic}

/* the comparison table, set as a numbered listing: one entry per business, facts in labelled columns */
.table-wrap{border-top:2px solid var(--strong-rule)}
table,tbody,tr,td{display:block}
table{width:100%}
thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
tr{display:grid;grid-template-columns:48px repeat(4,minmax(0,1fr));column-gap:20px;row-gap:8px;
 padding:20px 0 22px;border-bottom:1px solid var(--rule)}
td{padding:0;font-size:15px;min-width:0}
td::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;letter-spacing:.07em;
 text-transform:uppercase;color:var(--muted);margin-bottom:2px}
td:first-child{grid-row:1 / span 2;font-family:var(--serif);font-size:30px;line-height:1;color:var(--num);
 font-variant-numeric:lining-nums}
td:first-child::before,td:nth-child(2)::before{content:none}
td:nth-child(2){grid-column:2 / -1;font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.3}
td a[href^="tel:"]{display:inline-block;font-weight:700;text-decoration:none;white-space:nowrap;
 border:1.5px solid var(--link);border-radius:4px;padding:2px 9px;margin-top:2px}
td a[href^="tel:"]::before{content:"Call ";font-weight:400}
td a[href^="tel:"]:hover{background:var(--link);color:var(--page)}

/* the one-line summaries under the list, the FAQ */
ol.lines{padding-left:22px;font-size:14.5px;color:var(--muted);max-width:80ch}
ol.lines li{margin:0 0 8px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-weight:600;font-size:17px;cursor:pointer;padding:14px 32px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:24px;color:var(--num);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 18px}

/* hubs, the state page and the home page: an index of links with rules between */
ul.trades,ul.towns,ul.pages{list-style:none;padding:0;margin:8px 0 24px;border-top:1px solid var(--rule)}
ul.trades li,ul.towns li,ul.pages li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--muted)}
ul.trades li a,ul.towns li a,ul.pages li a{font-family:var(--serif);font-size:20px;font-weight:700;
 text-decoration:none;color:var(--ink)}
ul.trades li a:hover,ul.towns li a:hover,ul.pages li a:hover{color:var(--link);text-decoration:underline}
h2 + ul.pages{border-top:0;margin-top:0}
h2 a{color:var(--ink);text-decoration:none}
h2 a:hover{color:var(--link);text-decoration:underline}

/* footer: the byline, then columns of links */
footer.site{background:var(--tint);border-top:1px solid var(--rule);padding:30px 0 40px;font-size:14.5px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.foot-col{display:flex;flex-direction:column;gap:6px}
.foot-col a{color:var(--ink);text-decoration:none}
.foot-col a:hover{color:var(--link);text-decoration:underline}
.foot-head{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.byline{margin:0 0 6px;font-family:var(--serif);font-size:17px;font-weight:700}
.foot-tag{margin:0;color:var(--muted);max-width:40ch}

/* TrustedSource guides: the numbered checks first, then each step's sourced rows (verification.py) */
ol.answer-steps{padding-left:24px;margin:6px 0 18px;max-width:78ch;font-size:16.5px}
ol.answer-steps li{margin:0 0 9px}
ol.answer-steps li::marker{font-family:var(--serif);font-weight:700;color:var(--num)}
ul.facts{list-style:none;padding:0;margin:6px 0 10px;max-width:80ch}
ul.facts li{padding:12px 0;border-bottom:1px solid var(--rule)}
ul.facts li:last-child{border-bottom:0}
ul.facts .sub{display:block;margin-top:5px;font-size:14.5px}
ul.facts .note{display:block;margin-top:5px;font-style:normal}

/* locals-trust: criteria and conduct lists, the join form (INTEGRATION.md §5) */
ul.criteria,ol.criteria,ol.conduct{padding-left:22px;max-width:75ch}
ul.criteria li,ol.criteria li,ol.conduct li{margin:0 0 10px}
form.join{display:grid;gap:14px;max-width:520px;margin:8px 0 18px;padding:20px 0;border-top:2px solid var(--strong-rule)}
form.join label{display:grid;gap:5px;font-size:14px;font-weight:600}
form.join input,form.join select{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--rule);border-radius:4px;
 background:var(--page);color:var(--ink)}
form.join input:focus,form.join select:focus{outline:2px solid var(--link);outline-offset:1px}
form.join label.agree{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px}
form.join label.agree input{margin-top:4px}
form.join button{justify-self:start;font:inherit;font-weight:700;padding:11px 22px;border:0;border-radius:4px;
 background:var(--bar);color:#fff;cursor:pointer}
form.join button:hover{filter:brightness(1.15)}

/* sample-data builds only (generator/demo.py) */
.demo-banner{background:#ffe08a;color:#3b2a00;font-weight:700;text-align:center;padding:8px 16px;font-size:14px}

/* narrower screens */
@media (max-width:760px){
 tr{grid-template-columns:40px repeat(2,minmax(0,1fr));row-gap:10px;column-gap:14px}
 td:first-child{grid-row:1 / span 3;font-size:26px}
 .foot{grid-template-columns:1fr 1fr}
 .foot-brand{grid-column:1 / -1}
}
@media (max-width:520px){
 .wrap{padding:0 16px}
 body{font-size:16px}
 .brand{font-size:21px}
 .topnav{width:100%;gap:2px 16px;font-size:14.5px}
 .answer{font-size:17px}
 tr{grid-template-columns:26px repeat(2,minmax(0,1fr));column-gap:12px;padding:16px 0 18px}
 td:first-child{grid-row:1 / span 3;font-size:22px}
 td{font-size:14.5px}
 td:nth-child(2){font-size:18px}
 h2{font-size:21px;margin-top:36px}
}
@media print{header.site{background:none;color:var(--ink)} .brand{color:var(--ink)} .topnav{display:none}}