/* ══ ONE GUTTER FOR THE CHROME ═══════════════════════════ 22 Sep 2026 ══
   Sir: every page's header and footer must use the homepage's spacing.

   What was actually there, measured at 1440: the homepage's bar sat at a
   flat 51px, the pages carrying hyyryn-account.css at 46.08px (3.2vw), the
   pages with their own --edge at 23.04px, and the footers at 23.04, 32 or
   100px depending on which kit the page grew up in. Five gutters for two
   components.

   The one they all now use is the homepage's CONTENT edge, the gutter its
   bands and its footer already share: clamp(20px, 2.4vw, 40px) on the left,
   clamp(24px, 3vw, 48px) on the right. So the mark in the bar, the first
   word of a band and the brand in the foot all stand on the same line at
   every width, which was never true before, including on the homepage.

   !important is not decoration here: several of these pages declare their
   own gutter in an inline <style> that loads after every stylesheet, and
   one sheet that can be dropped in one line is worth more than fifty edits
   that have to be made again on the fifty-first page. */

:root { --hy-gut-l: clamp(20px, 2.4vw, 40px); --hy-gut-r: clamp(24px, 3vw, 48px); }

/* the bar, in each of the four shapes the site builds it in */
header.topbar .topbar-inner,
header .rec-head-in,
.jsh-bar .jsh-bar-inner {
  max-width: none !important;
  margin: 0 !important;
  padding-left: var(--hy-gut-l) !important;
  padding-right: var(--hy-gut-r) !important;
}
.nm-head {
  padding-left: var(--hy-gut-l) !important;
  padding-right: var(--hy-gut-r) !important;
}

/* the foot. 72 over, 86 under: the 86 clears the two controls that float
   at the bottom of the window (the tour launcher stands 58px off it, the
   back to top button 72px), which were sitting on the copyright line. */
footer.footer, footer.site-footer { padding-left: 0 !important; padding-right: 0 !important; }
footer.footer .footer-inner, footer.site-footer .footer-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 72px var(--hy-gut-r) 86px var(--hy-gut-l) !important;
}
@media (max-width: 1024px) {
  footer.footer .footer-inner, footer.site-footer .footer-inner { padding: 56px 24px 86px !important; }
}
@media (max-width: 700px) {
  footer.footer .footer-inner, footer.site-footer .footer-inner { padding: 44px 20px 86px !important; }
}

/* ── THE FOOT'S COLUMNS ──────────────────────────────────────────────────
   The pages that carried a two column foot (Platform, Company) now carry
   the homepage's four, marked .has-5 so only the converted footers take
   this grid and the richer ones are left alone. Brand column at 1.55fr,
   four equal columns after it, the same shape the homepage settled on. */
footer.footer .footer-top.has-5 {
  display: grid !important;
  grid-template-columns: minmax(240px, 1.55fr) repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(28px, 3vw, 56px) !important;
}
@media (max-width: 1180px) {
  footer.footer .footer-top.has-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px 28px !important;
  }
  footer.footer .footer-top.has-5 > :first-child {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px;
  }
  footer.footer .footer-top.has-5 > :first-child .tag { max-width: none; }
}
@media (max-width: 860px) {
  footer.footer .footer-top.has-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  /* rp178, 21 Oct 2026 (the phone sweep): two columns of links, not one. One column made the foot two screens long
     on a phone, fifteen links in a single file; two halve it and keep each group whole. The brand row spans both
     (above, from 1180px down), and each link is a 32px target, not 23px. */
  footer.footer .footer-top.has-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 20px !important; }
  footer.footer .footer-top.has-5 .footer-col a { padding-top: 7px; padding-bottom: 7px; }
}

/* The ICO badge is a blue disc with white lettering inside it. Knocking it
   out to cream, which several pages did, turns the whole thing into a white
   disc and destroys the mark it exists to show. It is shown as issued.
   5 Oct 2026: the ICO's rosette came off every page (Sir chose words; the
   ICO says its logos need its express approval). The cream coin now carries
   Hyyryn's own seal in navy ink, assets/hyyryn-dp-seal-ink.svg, and the
   words say "Registered with the ICO" with a link to the public register. */
footer.footer .footer-ico img { filter: none !important; opacity: .9; transition: opacity 200ms; }
footer.footer .footer-ico:hover img { opacity: 1; }

/* ══ A SHUT DRAWER IS SHUT FOR THE KEYBOARD TOO ══════════════ 13 Oct 2026 (rp123) ══
   The account drawer parks past the right edge when shut, and its links were still reached by Tab
   on twenty-one pages. Hidden once its slide has finished; shown the moment it opens. */
.profile-drawer:not(.open) { visibility: hidden; transition: right 300ms ease, transform 300ms ease, visibility 0s linear 300ms; }
.profile-drawer.open { visibility: visible; }

/* ══ rp157 (17 Oct 2026, the launch-day pass): A CLOSED MENU IS OUT OF REACH ═════════════════════════════════════
   The phone menu (.mobile-drawer) slides in from the right, and closed it waited just off the screen, still visible
   to the keyboard: on ten of the signed-in pages Tab walked through its seven or eight links one by one with nothing
   on screen showing where the focus was (WCAG 2.4.7, Focus Visible: a focus off the screen cannot be seen). Closed,
   it is now out of Tab's reach and a screen reader's; open, it is as it was. */
.mobile-drawer:not(.open) { visibility: hidden; }

/* ── A PHONE DOES NOT ZOOM INTO A FIELD (rp181, corrected rp182, 21 Oct 2026, the phone sweep) ─────────────────
   iOS Safari zooms the whole page into any field whose text is under 16px as it takes the focus, and does not
   zoom back out: the sign-up card (15px), settings, the tax details, the help form and the dispute form all did.
   On a phone every field's text is at least 16px. A field's size is set by a dozen sheets, some through an id, so the
   floor wins on count, never !important (Mason 05): :is() weighs as its heaviest choice even where that choice is an
   id no element has, so the second :is() counts three ids and matches every field.
   rp182: the floor as first written (rp181) also brought fields drawn LARGER than 16px down to 16 (the calculator's
   46px figure, the Records search's 22px, the fee box on How it works, settings' 17px): a rule cannot read the size
   it replaces. So those fields are named and kept out (each is 16px or more already, and design/rp182.mjs measures
   every field with and without this rule, so a new large field that is not named here fails it). And a source that
   sets a field's size with !important (the messages' search, the trade picker) takes the floor as a variable,
   max(<its size>, var(--field-floor)), which is 0 except on a phone. */
:root { --field-floor: 0px; }
@media (max-width: 760px) {
  :root { --field-floor: 16px; }
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea):not(#calcJob, #calcHomes, #hwQuote, #ccQ, #wNo, #hpQ, #s-phone, #s-post, #s-digest):is(*, #hy-floor#hy-floor#hy-floor) { font-size: max(16px, 1em); }
}

/* ══ THE PHONE'S PRESS AREAS (rp200, 22 Oct 2026, phone faults N and O) ═════════════════════════════════════════
   Every page a reader reaches was walked at 390 as all three people; a control a finger presses was measured against
   WCAG 2.2's 2.5.8 (24 by 24, a link inside a sentence excepted). These were the height of their words, 13 to 22px.
   Each grows by padding and gives it back by a negative margin, so the press area grows and nothing on the page
   moves (an inline link needs no margin: its padding never moves a line). Named by page; they win on count
   (:is(*, #hy-press) weighs an id), never !important. The words' own floor is written beside each size it raises
   (search "rp200 phone floor"). */
@media (max-width: 760px) {
  /* every crumb trail (a crumb is a link standing alone, the height of 11 to 13px capitals) */
  :is(nav.crumb, nav.breadcrumb, nav.tmh-crumb, nav.co-crumb, nav.pp-crumb, .breadcrumbs, #rqCrumb, .pc-k) a:is(*, #hy-press) { padding-block: 6px; margin-block: -6px; }
  /* the footer's mark; the masthead marks on the home and legal pages */
  :is(.footer a.brand-big, .nm-head a.nm-logo, .topbar a.brand):is(*, #hy-press) { padding-block: 5px; margin-block: -5px; }
  /* the homepage: View all trades, More answers, How the money is held, the fee schedule */
  :is(a.trades-all, a.band-go, a.pro2-link):is(*, #hy-press) { padding-block: 6px; margin-block: -6px; }
  /* the legal pages' contents and their "find" numbers */
  :is(.lg-toc li > a, .lg-find-go > a, .lg-doc ul > li > a):is(*, #hy-press) { min-width: 24px; padding-block: 4px; margin-block: -4px; }
  a.lg-n:is(*, #hy-press) { display: inline-block; min-width: 24px; padding-block: 4px; margin-block: -4px; }
  /* a source named under a line (How it works, Payment protection, Cookies): a link alone on its line */
  :is(.hw-road-src > a, li[id^="src-"] em > a, li[id^="src-"] .s > a, .pp-src-stamp .s > a, dd > a[href^="mailto:"], .rv-go > a, .oj-more--phone > a, li > small > a[href*="complain"]):is(*, #hy-press) { padding-block: 5px; }
  /* footnote marks: a number to press, inside a sentence, 24px wide and high (Payment protection's marks already reach
     29px by an ::after, so they are not named here) */
  :is(a.hw-fn, a.ck-fn):is(*, #hy-press) { min-width: 24px; min-height: 24px; padding-block: 4px; margin-block: -4px; text-align: center; }
  :is(a.hw-back, a.ck-back):is(*, #hy-press) { display: inline-block; min-width: 24px; padding-block: 4px; margin-block: -4px; text-align: center; }
  /* Payment protection and About: links alone at a part's foot; About's fee box */
  :is(a.pp-reg-a, a.pp-act-a, a.pp-more, .ab-stop a.more, a.ab-nmore, .ab-fee-try #abFee):is(*, #hy-press) { padding-block: 6px; margin-block: -6px; }
  /* the job pages, My jobs, the dashboard */
  :is(a.jsh-back, a.ir-back, a.near-more, a.ovh-row-t, a.oj-name, a.quiet, button.ir-all, .sv-more > a, .protect-explainer > a):is(*, #hy-press) { padding-block: 5px; margin-block: -5px; }
  button.ovh-why:is(*, #hy-press) { width: 24px; height: 24px; }
  /* Messages, Saved, settings, the trade's profile */
  :is(button.tn-more, a.who-rec, a.sv-bar-a, a.be-clear, a.sv-board, a.pv-open, a.pf-more, button.st-link):is(*, #hy-press) { padding-block: 6px; margin-block: -6px; }
  a#ovNext:is(*, #hy-press) { padding-block: 5px; margin-block: -2px; }
  .hiw-rail > a:is(*, #hy-press) { padding-block: 3px; }
  .tc-find input:is(*, #hy-press) { min-height: 26px; }
  /* rp202, from the service flow's audit: the listing's "Or send a message first", the setup lists' Hide this list and
     Change, the profile's services, the payment page's way back, the price card's Message */
  :is(a.board-quiet, button.ov-start-hide, a.ov-step-change, .pf-rail .rg-body a, .hy-d-crumb > a, a.jt-q-msg):is(*, #hy-press) { padding-block: 6px; margin-block: -6px; }
}

/* ══ THE HERO'S DOTS ARE A 24px PRESS (rp200, 22 Oct 2026) ═════════════════════════════════════════════════════
   The slides' dots on the homepage, Find a trade, the board and Saved were 5px buttons, the dot the whole of the
   press, nine apart. Each is a 24px button now with the 5px dot drawn in its middle, the row lowered by the half it
   grew so every dot sits where it sat. The row is aria-hidden, so its buttons are out of Tab's way (tabindex -1). */
.nm-dots:is(*, #hy-press) { gap: 0; margin-bottom: -9.5px; }
.nm-dots button:is(*, #hy-press) { position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; }
.nm-dots button:is(*, #hy-press)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: rgba(246,240,222,.34); transition: background .3s ease; }
.nm-dots button.on:is(*, #hy-press)::before { background: var(--nm-cream, #F6F0DE); }