/*
 * The rebuild's changes to how live's marketing pages look, in one sheet
 * of their own so a re-copy of live's files can never lose them (P7 spec
 * §1.4). Every rule is `html body …` with !important, so the order of
 * live's own <style> blocks never matters. Nothing here moves anything:
 * colours, invisible hit areas and focus rings, and the calculator made to
 * fit a 320 screen (P7-6b, P7-D49, P7-D50).
 */

/* The tickets-sold band waits, hidden, until there is a number worth
   showing (100 or more); live's renderer drops a bare `hidden`, which
   left an empty band on live when the count failed (P7-D48) */
html body .tally.ot-wait{display:none!important}

/* ---------------------------------------------------------------- text
   Accent text under 4.5:1 takes the link colour, --link (#4f46e5:
   6:1 and more on every ground): the mono eyebrows on the bands and the features page's section counts, the payout statement's
   total, the comparison tables' "One Ticket" and "Platform tier" heads.
   Exempt, as pictures of the product (WCAG 1.4.3, incidental text): the
   initials and the "N left" and "Door · 7:38 pm" labels inside the phone
   and door mock-ups */
html body :is(.on-paper,.on-night) .eyebrow,
html body .map a b,
html body .st-total b,
html body .cmp thead th.ours{color:var(--link,#4f46e5)!important}

/* ------------------------------------------------------------- targets
   Controls drawn under 44px answer to an invisible ::after that reaches
   44px, centred on them, and stops halfway to a neighbour that sits closer
   (WCAG 2.5.8's spacing rule). Exempt: the carousels' dots (each carousel
   has 44px arrows and swipe), the skip link (off-screen; 44px when it
   shows, below) and links inside a sentence or a caption */
html body .links a,
html body .tc-all,
html body .tm-all,
html body .map a,
html body .tg-jump a,
html body .bl-filters a,
html body .bl-rail a,
html body .ot-footer-links a,
html body .ot-header-brand{position:relative!important}

html body .links a::after,
html body .tc-all::after,
html body .tm-all::after,
html body .map a::after,
html body .tg-jump a::after,
html body .bl-filters a::after,
html body .bl-rail a::after,
html body .ot-footer-links a::after,
html body .ot-header-brand::after{
  content:''!important;position:absolute!important;
  left:50%!important;top:50%!important;
  width:max(100%,44px)!important;height:max(100%,44px)!important;
  transform:translate(-50%,-50%)!important;
  background:none!important;border:0!important;pointer-events:auto!important;
}
/* Rows closer than 44px: each link reaches halfway into the gap to the
   next row. The end band's links (22px lines, rows 12px apart) answer to
   34px, a taller (wrapped) one to half the gap more; the posts' "On this
   page" (the same lines and gaps) to exactly 6px each way, no floor: the
   desktop rail scrolls, and anything past its 6px bottom padding would make
   it scroll by a pixel, with a scrollbar where scrollbars always show; the
   blog's topic links (37px, rows 6px apart) to 43px */
html body .links a::after{height:max(34px,calc(100% + 12px))!important}
html body .bl-rail a::after{height:calc(100% + 12px)!important}
html body .bl-filters a::after{height:calc(100% + 6px)!important}

/* The skip link, off-screen until it is focused: then 44px tall */
html body .ot-skip-link:focus{min-height:44px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important}

/* The calculator's fields grow to 44px (1 to 4px taller) */
html body .fc-grid input,
html body .fc-grid select{min-height:44px!important;box-sizing:border-box!important}

/* Signed in: the 40px avatar answers to 44px, and the menu's rows are 44px
   (the menu is a fixed panel, so nothing below it moves) */
html body .ot-header-avatar::after{content:''!important;position:absolute!important;inset:-2px!important;border-radius:50%!important}
html body .ot-profile-link{min-height:44px!important;box-sizing:border-box!important}

/* --------------------------------------------------------------- focus
   The header's ring in the link colour (live set a pale tint there, under 2:1 on the header). Inside the nav, whose sideways
   scroll clips anything outside it, the ring is drawn inside each item; on
   the filled "Log in / Sign up" it is the button's own ink, as the fill and
   the ring would be one colour. The avatar keeps its circle */
html body .ot-header a:focus-visible,
html body .ot-header button:focus-visible{outline-color:#4f46e5!important}
html body .ot-header-nav a:focus-visible{outline-offset:-3px!important}
html body .ot-header-nav a.ot-header-cta:focus-visible{outline-color:var(--ot-cta-ink,#ffffff)!important}
html body .ot-header-avatar:focus-visible{border-radius:50%!important}
/* Up to 720px the nav items are pills, and circles from 480 down: the ring
   follows their shape, not live's 4px focus corner */
@media (max-width:720px){
  html body .ot-header-nav a.ot-nav-item:focus-visible{border-radius:999px!important}
}

/* --------------------------------------------------- nothing cut at 320
   The calculator's fields shrink with their card, and its table scrolls
   sideways inside a box of its own (FeeCalculator.html, row A1), as live's
   blog tables do on a phone. On a phone live's table runs up to 20px into
   the card's 28px right padding (11px at 390), so the box reaches into
   that padding too and the table keeps the card's content width: it shows
   whole, as on live, down to the widths where live cut it */
html body .fc-grid label{min-width:0!important}
html body .fc-grid input,
html body .fc-grid select{width:100%!important;min-width:0!important}
html body .fc-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch;margin-right:-28px!important}
html body .fc-scroll .fc-table{width:calc(100% - 28px)!important}
/* The box reaches the card's edge, so its ring is drawn inside it */
html body .fc-scroll:focus-visible{outline:2px solid #4f46e5!important;outline-offset:-2px!important}