/* One button system (Kenneth, 4 Oct 2026). Loaded last on every page so it wins over design, production,
   scorecard, system and the page sheets. Seven jobs, one look each, taken from the approved listing card:
     1 primary    blue fill, white label          WhatsApp, Next, Show results, consent Accept, page CTAs
     2 secondary  white, blue outline, blue label Call, Decline, Copy, Yes/No, Show more reviews, Show map, Sort
     3 yellow     yellow fill, navy label         View vendor profile, For businesses
     4 quiet      no box, navy label              Website
     5 text link  no box, blue label              Back links, Reset all, Print
     6 chip       white pill, outline             review topics, help options, search suggestions
     7 tab        navy fill when selected         Tools tabs (unchanged)
   Every boxed button: 48px high, 10px corners, 1.5px border, DM Sans 15px/700. Revert: remove this file's <link>
   in Layout.tsx (tag pre-button-unify-2026-10-04 holds the state before). The !important marks are deliberate:
   this file is the single place a button's look is decided. */
:root{--b-h:48px;--b-r:10px;--b-bw:1.5px;--b-fs:15px;--b-fw:700;--b-blue:#00509d;--b-blue-h:#003f7d;--b-navy:#102e4f;--b-yellow:#fdc500;--b-yellow-h:#f0b900;--b-pale:#e9f2fb;--b-line:#dfe5eb}

/* shared box: size, corner, type */
.vendor-contact-actions>.primary,.vendor-contact-actions>.contact-secondary,.hf-sticky .acts .wa,.hf-sticky .acts .call,
#main a.primary,#main button.primary,#main .btn.btn-primary,#main .utility-button,#main .btn-secondary,#main .hc-copy,#main .hf-copy-btn,
.header-actions a.primary,.mobile-menu a.primary,a.primary.yellow,
[data-consent-action="accept"],[data-consent-action="decline"],.fb-vote-btn,
button.contact-secondary.review-more,.listing-map-toggle,.listing-map-launch,.mobile-listing-controls button,
.card-summary .card-profile-button,
.hp-form button[type=submit],.tk-form button[type=submit],.comparison-dialog .contact-secondary,.listing-page-nav a{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px;box-sizing:border-box!important;
  min-height:var(--b-h)!important;height:auto!important;padding:0 20px!important;border-radius:var(--b-r)!important;
  border-width:var(--b-bw)!important;border-style:solid!important;
  font-family:'DM Sans',Arial,sans-serif!important;font-size:var(--b-fs)!important;font-weight:var(--b-fw)!important;
  line-height:1.2!important;letter-spacing:0!important;text-decoration:none!important;text-align:center;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s}

/* 1 primary */
.vendor-contact-actions>.primary,.hf-sticky .acts .wa,#main a.primary:not(.yellow),#main button.primary,#main .btn.btn-primary,
#main .utility-button:not(.secondary),[data-consent-action="accept"],
.hp-form button[type=submit],.tk-form button[type=submit],.listing-page-nav a{
  background:var(--b-blue)!important;border-color:var(--b-blue)!important;color:#fff!important}
.vendor-contact-actions>.primary:hover,.hf-sticky .acts .wa:hover,#main a.primary:not(.yellow):hover,#main button.primary:hover,#main .btn.btn-primary:hover,
#main .utility-button:not(.secondary):hover,[data-consent-action="accept"]:hover,
.hp-form button[type=submit]:hover,.tk-form button[type=submit]:hover,.listing-page-nav a:hover{background:var(--b-blue-h)!important;border-color:var(--b-blue-h)!important}

/* 2 secondary */
.vendor-contact-actions>.contact-secondary,.hf-sticky .acts .call,#main .utility-button.secondary,#main .btn-secondary,#main .hc-copy,#main .hf-copy-btn,
[data-consent-action="decline"],.fb-vote-btn,button.contact-secondary.review-more,.listing-map-toggle,.listing-map-launch,.mobile-listing-controls button,.comparison-dialog .contact-secondary{
  background:#fff!important;border-color:var(--b-blue)!important;color:var(--b-blue)!important}
.vendor-contact-actions>.contact-secondary:hover,.hf-sticky .acts .call:hover,#main .utility-button.secondary:hover,#main .btn-secondary:hover,#main .hc-copy:hover,#main .hf-copy-btn:hover,
[data-consent-action="decline"]:hover,.fb-vote-btn:hover,button.contact-secondary.review-more:hover,.listing-map-toggle:hover,.listing-map-launch:hover,.mobile-listing-controls button:hover,.comparison-dialog .contact-secondary:hover{
  background:var(--b-pale)!important}
.fb-vote-btn[aria-pressed="true"],.fb-vote-btn.is-selected{background:var(--b-blue)!important;color:#fff!important}
.listing-map-toggle svg,.listing-map-launch svg,.mobile-listing-controls button svg{color:currentColor}

/* 3 yellow */
.card-summary .card-profile-button,a.primary.yellow,#main a.primary.yellow{background:var(--b-yellow)!important;border-color:var(--b-yellow)!important;color:var(--b-navy)!important}
.card-summary .card-profile-button:hover,a.primary.yellow:hover,#main a.primary.yellow:hover{background:var(--b-yellow-h)!important;border-color:var(--b-yellow-h)!important}

/* 4 quiet: website, everywhere the same */
.vendor-contact-actions>.business-action,.vendor-contact-actions>a[data-channel="website"],.hf-sticky .acts .web{
  display:inline-flex!important;align-items:center!important;gap:8px;min-height:var(--b-h)!important;padding:0 12px!important;
  border:var(--b-bw) solid transparent!important;border-radius:var(--b-r)!important;background:transparent!important;color:var(--b-navy)!important;
  font-family:'DM Sans',Arial,sans-serif!important;font-size:var(--b-fs)!important;font-weight:var(--b-fw)!important;text-decoration:none!important}
.vendor-contact-actions>.business-action:hover,.vendor-contact-actions>a[data-channel="website"]:hover,.hf-sticky .acts .web:hover{
  background:var(--b-pale)!important;text-decoration:underline!important;text-underline-offset:3px}

/* 5 text link */
#main .text-btn,.listing-sheet-actions .text-btn,#main a.text-link,.vendor-page-back,.hf-sticky .back{
  background:transparent!important;border:0!important;padding:4px 0!important;min-height:0!important;color:var(--b-blue)!important;
  font-family:'DM Sans',Arial,sans-serif!important;font-size:15px!important;font-weight:var(--b-fw)!important;text-decoration:none!important}
#main .text-btn:hover,.listing-sheet-actions .text-btn:hover,#main a.text-link:hover,.vendor-page-back:hover,.hf-sticky .back:hover{
  color:var(--b-blue-h)!important;text-decoration:underline!important;text-underline-offset:3px}

/* 6 chip: one pill */
.review-topics button,button.hfc-opt,main .hs-chips a{border-radius:999px!important;border-width:var(--b-bw)!important;font-family:'DM Sans',Arial,sans-serif!important}
.review-topics button{background:#fff!important;border-color:var(--b-line)!important;color:var(--b-navy)!important;font-size:13px!important;font-weight:600!important;min-height:44px!important;padding:6px 14px!important}
.review-topics button:hover{background:var(--b-pale)!important}
.review-topics button[aria-pressed="true"]{background:var(--b-navy)!important;border-color:var(--b-navy)!important;color:#fff!important}
button.hfc-opt{border-color:var(--b-blue)!important;color:var(--b-blue)!important;font-weight:var(--b-fw)!important;min-height:44px!important}

/* form selects: one control */
#main .hf-dropdown-control{border-radius:var(--b-r)!important}

/* rows of buttons on phones keep their old wrapping */
@media(max-width:600px){.vendor-contact-actions>.business-action,.vendor-contact-actions>a[data-channel="website"]{min-height:44px!important;padding:0 8px!important}}

/* phone toolbar on listings (Sort, Filters, Map): three in a row, so tighter sides and one line */
.mobile-listing-controls button{padding:0 10px!important;white-space:nowrap;font-size:13px!important}
/* text buttons (Print, Reset all) keep a 44px tap area without looking boxed */
#main button.text-btn,.listing-sheet-actions button.text-btn{display:inline-flex!important;align-items:center;min-height:44px!important}

/* The box rule above sets display with !important, so put back every place another sheet hides a button
   (4 Oct 2026: two Show map buttons on laptops). Phone map button only on phones, laptop one only on laptops,
   sticky Website only from 761px, no Website in urgent mode, and anything marked hidden stays hidden. */
@media(min-width:1001px){.listing-map-launch{display:none!important}}
@media(max-width:1000px){.listing-map-toggle{display:none!important}}
@media(max-width:760px){.hf-sticky .acts .web{display:none!important}}
.emergency-mode .business-action,.review-more[hidden],button[hidden],a[hidden]{display:none!important}

/* B1 audit (6 Oct 2026): the compare dialog close glyph follows the button corner; pressed state for every boxed button
   (the yellow, secondary and primary looked the same pressed as hovered). Reduced motion is handled in system.css. */
.comparison-dialog>header>button,.comparison-dialog>button{border-radius:var(--b-r)}
.vendor-contact-actions>.primary:active,.vendor-contact-actions>.contact-secondary:active,#main a.primary:active,#main button.primary:active,#main .btn:active,#main .utility-button:active,
.card-summary .card-profile-button:active,.hp-form button[type=submit]:active,.tk-form button[type=submit]:active,.listing-page-nav a:active{filter:brightness(.94)}