/* Texas Property Protest, guide pages (loads after site.css and reuses its tokens).
   Adds only what site.css lacks: a breadcrumb, links inside the lede and the route table,
   subheads and lists inside .prose, and a roomier route table on phones.
   No inline styles anywhere: the site's CSP only allows these stylesheets. */

/* Breadcrumb */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:500 .8rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.crumbs li:not(:last-child)::after{content:"\203A";margin:0 10px;color:var(--red)}
.crumbs a{display:inline-block;padding:15px 0;color:var(--navy-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.crumbs [aria-current]{display:inline-block;padding:15px 0;color:var(--mute)}

/* Hero: the h1 is a question, so it needs more width than the comparison page's */
.cmp-hero.guide h1{max-width:24ch}
.lede a,.band p a,.tbl a,.note a{color:var(--ink);font-weight:600;text-underline-offset:3px}
.band p a{color:#fff}

/* Inside .prose: subheads, lists, spacing */
.prose h3{margin-top:14px;font-size:1.2rem}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:6px}
.prose h3[id]{scroll-margin-top:16px}

/* Route table */
.tbl.routes td.sec{white-space:nowrap}
.tbl.routes th[scope="row"]{min-width:150px}

@media (max-width:760px){
  .tbl.routes td{display:block;text-align:left}
  .tbl.routes td::before{display:block;max-width:none;margin-bottom:2px}
  .tbl.routes td.sec{white-space:normal}
  .tbl.routes th[scope="row"]{min-width:0}
  .tbl.routes td.sec a{display:inline-block;padding:13px 0}
  #sources li a{display:inline;padding:13px 0}
}

/* Tap targets: inline links in the copy get 44px of hit area on phones and touch screens */
@media (max-width:760px),(pointer:coarse){
  .lede a,.disclose a,.sub a,.prose a,.checks a,.note a,.band p a,.faq details p a,.tbl td a,.tbl th a{padding:13px 0}
}

/* ---------- Sign-up control: a header button on wide screens, a bottom bar on phones ---------- */
.join-h{display:inline-flex;align-items:center;background:var(--red);color:#fff;text-decoration:none;font:800 .86rem/1 var(--body);letter-spacing:.03em;text-transform:uppercase;padding:13px 20px;border:var(--bd);border-radius:999px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap;min-height:44px}
.join-h:hover{background:var(--red-d)}
.site-h .join-h{margin-left:6px}
.g-sticky{display:none}
@media (max-width:1040px){.site-h .nav{display:none}.site-h .join-h{margin-left:auto}}
@media (max-width:700px){
  .site-h .join-h{display:none}
  .g-sticky{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border-top:var(--bd);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .g-sticky span{font-size:.92rem;color:var(--ink-2);line-height:1.25}
  .g-sticky b{display:block;color:var(--ink);font:800 1rem/1.1 var(--disp);text-transform:uppercase}
  .g-sticky .join-h{background:var(--sun);color:var(--ink)}
  .site-f{padding-bottom:calc(114px + env(safe-area-inset-bottom))}
}
.site-f .links{gap:0 20px}
/* The closing band button keeps its own padding (the tap-target rule above is for text links). */
.band p a.cta-hero{padding:18px 28px}