/* The shared interaction kit: one set of switches, press states, menus, loading placeholders and page transitions for the Sports Desk
   and the news site. It has no colours of its own: it reads each site's --accent, --page, --paper, --ink, --muted and --line, so the
   same switch is green on the Desk and dark ink on the newspaper. ui-kit.js places the switch pills and opens the menus. */
:root{--ui-ease:cubic-bezier(.2,.8,.2,1);--ui-spring:cubic-bezier(.3,1.25,.5,1);--ui-sk:color-mix(in srgb,var(--ink,#888) 9%,transparent);--ui-sk-hi:color-mix(in srgb,var(--page,#fff) 55%,transparent)}

/* ---- page to page: the old page fades, the new one rises in (both sites, so going from the news to the Desk moves the same way) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ui-vt-out .2s ease both}
::view-transition-new(root){animation:ui-vt-in .32s var(--ui-ease) both}
@keyframes ui-vt-out{to{opacity:0}}
@keyframes ui-vt-in{from{opacity:0;transform:translateY(8px)}}
/* a week arrow or a swipe: the page slides the way the reader moved */
html:active-view-transition-type(ui-next)::view-transition-old(root){animation:ui-vt-out-l .22s ease both}
html:active-view-transition-type(ui-next)::view-transition-new(root){animation:ui-vt-in-r .34s var(--ui-ease) both}
html:active-view-transition-type(ui-prev)::view-transition-old(root){animation:ui-vt-out-r .22s ease both}
html:active-view-transition-type(ui-prev)::view-transition-new(root){animation:ui-vt-in-l .34s var(--ui-ease) both}
@keyframes ui-vt-out-l{to{opacity:0;transform:translateX(-40px)}}
@keyframes ui-vt-out-r{to{opacity:0;transform:translateX(40px)}}
@keyframes ui-vt-in-r{from{opacity:0;transform:translateX(48px)}}
@keyframes ui-vt-in-l{from{opacity:0;transform:translateX(-48px)}}

/* ---- switches: a pill slides under the chosen option. Without the script the chosen option keeps its own colour. ---- */
.ui-seg{position:relative;isolation:isolate}
.ui-pill{position:absolute;z-index:-1;left:0;top:0;width:var(--ui-w,0);height:var(--ui-h,0);transform:translate(var(--ui-x,0),var(--ui-y,0));border-radius:var(--ui-pill-r,999px);background:var(--ui-pill,var(--accent));box-shadow:var(--ui-pill-shadow,none);pointer-events:none}
.ui-seg.ui-live>.ui-pill{transition:transform .42s var(--ui-spring),width .42s var(--ui-spring),height .3s var(--ui-ease)}
.ui-seg.ui-has>:is([aria-current],[aria-pressed="true"],[aria-selected="true"]){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.ui-seg.ui-live>:is(a,button){transition:color .2s ease .08s,border-color .2s}

/* ---- press: anything tappable gives a little as it is pressed ---- */
.ui-press{transition:scale .14s ease}
.ui-press:active:not([disabled]):not([aria-disabled]){scale:.96}
/* a refresh in progress turns its arrow */
.ui-spin svg{animation:ui-rot .8s linear infinite}
@keyframes ui-rot{to{transform:rotate(360deg)}}

/* ---- menus: open from the button, scaled from its corner ---- */
.ui-menu{transform-origin:var(--ui-origin,top right)}
.ui-menu.ui-open{animation:ui-menu .26s var(--ui-spring) both}
@keyframes ui-menu{from{opacity:0;transform:translateY(-6px) scale(.94)}}

/* ---- loading placeholders: soft blocks with a light passing over them, never a blank panel or a dash ---- */
.ui-skel{position:relative;overflow:hidden;display:block;border-radius:6px;background:var(--ui-sk);color:transparent!important}
.ui-skel::after,.ui-skel-box::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--ui-sk-hi),transparent);animation:ui-shimmer 1.5s ease-in-out infinite;pointer-events:none}
.ui-skel-box{position:relative;overflow:hidden}
@keyframes ui-shimmer{to{transform:translateX(100%)}}
.ui-busy{position:relative}
.ui-busy::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--ui-sk-hi),transparent) 0 0/50% 100% no-repeat;animation:ui-sweep 1.1s ease-in-out infinite;pointer-events:none}
@keyframes ui-sweep{from{background-position:-100% 0}to{background-position:200% 0}}
.ui-fresh{animation:ui-fresh .45s var(--ui-ease)}
@keyframes ui-fresh{from{opacity:.35}}

/* ---- swipe: the content follows the finger, then springs back or leaves ---- */
.ui-swipe{touch-action:pan-y}
.ui-swiping{transition:none!important}
.ui-swipe-back{transition:transform .35s var(--ui-spring),opacity .35s ease}

.ui-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======== The news site (not the Desk) ======== */
/* Light | Dark in the nav, where the round theme button used to be; the EN | ES switch joins it here with the Spanish edition */
.nav .ui-nprefs{display:flex;align-items:center;gap:6px;margin-left:10px}
.ui-tseg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--paper);--ui-pill:var(--accent)}
.ui-tseg button{display:grid;place-items:center;width:34px;height:28px;padding:0;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ui-tseg button svg{width:16px;height:16px}
.ui-tseg button:hover{color:var(--ink)}
.ui-tseg button[aria-pressed="true"]{color:#fff;background:var(--accent)}
html[data-theme="dark"] .ui-tseg button[aria-pressed="true"]{color:#0c1911}
.ui-tseg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav.has-drawer{grid-template-columns:56px minmax(0,1fr) auto auto}
.nav.has-drawer>.ui-nprefs{grid-column:3;grid-row:1;margin:0 0 0 4px;align-self:center}
/* phones: one round button showing the other theme, so the bar name still fits beside it */
@media(max-width:650px){
.nav.has-drawer .ui-tseg{padding:0;border:0;background:none}
.nav.has-drawer .ui-tseg>.ui-pill,.nav.has-drawer .ui-tseg>button[aria-pressed="true"]{display:none}
.nav.has-drawer .ui-tseg>button{width:44px;height:44px;border:1px solid var(--line);color:var(--ink)}
.nav.has-drawer .ui-tseg>button svg{width:19px;height:19px}
.nav.has-drawer .ui-tseg.ui-tswap>button{animation:ui-tspin .45s var(--ui-spring) both}
.nav.has-drawer .nav-brand{font-size:13.5px;letter-spacing:.3px}
.nav.has-drawer>a.nav-pulse-btn.nav-pulse-btn{padding:0 11px;margin:0 10px 0 6px}
}
@keyframes ui-tspin{from{opacity:0;transform:rotate(-120deg) scale(.5)}}
.nav.has-drawer>a.nav-pulse-btn.nav-pulse-btn{grid-column:4}
html.ui-prefs-on .theme-toggle{display:none}
/* the Editorials tabs become a switch */
#ed-tabs.ui-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
#ed-tabs.ui-seg[hidden]{display:none}
#ed-tabs.ui-seg .ed-tab{border:0;border-radius:999px;background:none;min-height:38px;padding:0 18px}
#ed-tabs.ui-seg .ed-tab[aria-selected="true"]{color:#fff}
html[data-theme="dark"] #ed-tabs.ui-seg .ed-tab[aria-selected="true"]{color:#0c1911}
/* press states on the news site's buttons and links that act like buttons */
:is(.nav a,.nav-pulse-btn,.ed-tab,.plan-btn,.paywall-join,.pulse-dock button,.pulse-promo a,.share-btn,.nav-menu-btn,.pager a,.ui-tseg button){transition-property:color,background-color,border-color,opacity,scale;transition-duration:.15s;transition-timing-function:ease}
:is(.nav a,.nav-pulse-btn,.ed-tab,.plan-btn,.paywall-join,.pulse-dock button,.pulse-promo a,.share-btn,.nav-menu-btn,.pager a,.ui-tseg button):active{scale:.96}
/* placeholders: the rates until they arrive, the stories until they are drawn, the most-read list */
.market-ticker:not(.ui-ready) :is(.market-ticker-item strong,.mtm-cell strong){display:inline-block;min-width:48px;height:.95em;border-radius:4px;background:var(--ui-sk);color:transparent;vertical-align:middle;position:relative;overflow:hidden}
.market-ticker:not(.ui-ready) :is(.market-ticker-item strong,.mtm-cell strong)::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--ui-sk-hi),transparent);animation:ui-shimmer 1.5s ease-in-out infinite}
.market-ticker.ui-ready :is(.market-ticker-item strong,.mtm-cell strong){animation:ui-fresh .45s var(--ui-ease)}
:is(#lead-story,#secondary-stories,.bottom-story-grid,.section-list):empty{position:relative;overflow:hidden;min-height:200px;background:
  linear-gradient(var(--ui-sk) 0 0) 0 4px/72px 14px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 30px/94% 26px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 64px/68% 26px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 110px/98% 12px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 132px/90% 12px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 154px/60% 12px no-repeat,
  linear-gradient(var(--ui-sk) 0 0) 0 184px/110px 11px no-repeat}
#lead-story:empty{min-height:300px;background-size:96px 18px,96% 42px,74% 42px,98% 16px,92% 16px,64% 16px,120px 12px;background-position:0 4px,0 34px,0 86px,0 150px,0 176px,0 202px,0 240px}
:is(#lead-story,#secondary-stories,.bottom-story-grid,.section-list):empty::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--ui-sk-hi),transparent);animation:ui-shimmer 1.5s ease-in-out infinite}
:is(#lead-story,#secondary-stories,.bottom-story-grid,.section-list):not(:empty){animation:ui-fresh .45s var(--ui-ease)}
.most-viewed-list .ui-sk-li{list-style:none;display:grid;gap:9px;padding:14px 0}
.most-viewed-list .ui-sk-li i{display:block;height:14px;border-radius:5px;background:var(--ui-sk);position:relative;overflow:hidden}
.most-viewed-list .ui-sk-li i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--ui-sk-hi),transparent);animation:ui-shimmer 1.5s ease-in-out infinite}
.most-viewed-list .ui-sk-li i:first-child{width:60px;height:11px}
.most-viewed-list .ui-sk-li i:nth-child(2){width:92%}
.most-viewed-list .ui-sk-li i:nth-child(3){width:70%}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .ui-seg.ui-live>.ui-pill,.ui-press,.ui-swipe-back{transition:none!important}
  .ui-tseg>button{animation:none!important}
  .ui-spin svg{animation:none!important}
  .ui-menu.ui-open,.ui-fresh,.ui-busy::before,.ui-skel::after,.ui-skel-box::after,.market-ticker *,.most-viewed-list .ui-sk-li i::after,:is(#lead-story,#secondary-stories,.bottom-story-grid,.section-list)::after,:is(#lead-story,#secondary-stories,.bottom-story-grid,.section-list){animation:none!important}
  :is(.nav a,.nav-pulse-btn,.ed-tab,.plan-btn,.paywall-join,.pulse-dock button,.pulse-promo a,.share-btn,.nav-menu-btn,.pager a,.ui-tseg button):active,.ui-press:active{scale:none!important}
}