/* ══ ONE BUTTON FAMILY ══════════════════════════════════════════════ 2 Oct 2026 ══
   Sir, by voice: "compare the buttons from the home page, service page and
   search page [with] the dashboards and messages ... make sure we are unifying
   the buttons ... the same across the site. Maybe slightly different depending
   on the type of request."

   MEASURED FIRST (1440, every pill-shaped control outside the bar):
     home, results   Search: navy, 50px, 10.5px / 500 / .2em
     service         Ask for a quote: the glass pill (white, navy ring), 10.5 / 500 / .2em
     dashboards      Post a job: navy, 44px, 9.5px / 400 / .17em
                     Look and sign off, Pay: the glass pill, 9.5 / 400 / .17em
                     Edit, Payment protection: a pale hairline ring (#D8CFB8), 9.5 / 400
   So the public pages and the dashboards drew the same three kinds with two
   type sizes, and the dashboards' third kind sat on a ring too pale to read
   as a control before it was touched (Sir: "the colours before it's been
   interacted with are not the way it should be").

   THE FAMILY, three weights, one type: Inter 10.5px, 500, .2em, capitals.
     SOLID   the one decisive action on a view (Search, Post a job, Send, Pay
             now). Navy, lit from the top so it reads navy and not black.
     GLASS   an action on a row or a card (Sir, 28 Aug: "use the trade profile
             button"). White glass, navy ring. Fills navy on hover.
     QUIET   a way to somewhere (Edit, Payment protection, All your jobs).
             A navy ring at a third, strong enough to read as a button.
   A page that owns a colour (Help green, Complaints claret, Records ink and
   cream) keeps these three weights in its own colour. Gold stays the one
   accent for "do this next" where a page already uses it. */
:root {
  --btn-fs: 10.5px; --btn-fw: 500; --btn-ls: .2em;
  --btn-solid: linear-gradient(180deg, #22324F 0%, #0E1B31 55%, #0A1628 100%);
  --btn-solid-hi: linear-gradient(180deg, #2B3D5E 0%, #14243F 55%, #0F1E36 100%);
  --btn-ring-quiet: rgba(10, 22, 40, .34);
}

/* one type everywhere */
html body .btn, html body .board-btn, html body .rq-btn, html body .nm-go, html body .cp-btn, html body .hp-btn, html body .pro2-btn, html body .services-view-all {
  font-family: var(--sans, 'Inter', sans-serif) !important; font-size: var(--btn-fs) !important; font-weight: var(--btn-fw) !important;
  letter-spacing: var(--btn-ls) !important; text-transform: uppercase !important; }

/* SOLID */
html body .btn.ov-post, html body .nm-go, html body .rq-btn:not(.is-ghost), html body .q-btn.is-primary {
  background: var(--btn-solid) !important; color: #FAF8F3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(10,22,40,.18), 0 12px 24px -12px rgba(10,22,40,.5) !important; }
html body .btn.ov-post:hover, html body .nm-go:hover, html body .rq-btn:not(.is-ghost):hover {
  background: var(--btn-solid-hi) !important; transform: translateY(-1px); }

/* GLASS: already the dashboards' row action and the service page's; made the same weight */
html body .btn--fill.oj-act, html body .btn--fill.btn--sm:not(.ov-post) {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 58%, #F4F1E8 100%) !important; color: #0A1628 !important;
  box-shadow: inset 0 0 0 1px #0A1628, inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(10,22,40,.10), 0 1px 2px rgba(10,22,40,.14), 0 12px 24px -12px rgba(10,22,40,.38) !important; }
html body .btn--fill.oj-act:hover, html body .btn--fill.btn--sm:not(.ov-post):hover {
  background: var(--btn-solid) !important; color: #FAF8F3 !important; box-shadow: inset 0 0 0 1px #0A1628, 0 12px 24px -12px rgba(10,22,40,.45) !important; }

/* QUIET: the ring a reader can see before touching it */
html body .services-view-all { min-height: 44px; padding: 0 24px !important; border-radius: 999px; }
html body .btn--line:not(.ov-cover-edit), html body .services-view-all { color: #0A1628 !important; background: rgba(255,255,255,.55) !important; box-shadow: inset 0 0 0 1px var(--btn-ring-quiet) !important; }
html body .btn--line:not(.ov-cover-edit):hover, html body .services-view-all:hover { background: #fff !important; box-shadow: inset 0 0 0 1px #0A1628, 0 10px 20px -14px rgba(10,22,40,.4) !important; }

/* every kind answers the hand the same way */
html body .btn, html body .board-btn, html body .rq-btn, html body .cp-btn, html body .hp-btn { transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.4,0,.2,1) !important; }
html body .btn:active, html body .board-btn:active, html body .rq-btn:active, html body .cp-btn:active, html body .hp-btn:active { transform: scale(.98) !important; }
html body .btn:focus-visible, html body .board-btn:focus-visible, html body .rq-btn:focus-visible { outline: 2px solid #D4A943; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body .btn, html body .board-btn, html body .rq-btn { transition: none !important; } }