/* Preferred Sources: additive placements only. Load after main.css.
   Keep the frozen DM Sans / warm-paper / maroon visual system and its tokens.
   Rendering, eligibility, completion and stacking measurements belong to JS. */

.preferred-source-pill{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:100%;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  line-height:16px;
  text-decoration:none;
  white-space:nowrap;
  vertical-align:middle;
  cursor:pointer;
}
.preferred-source-pill:hover{
  border-color:var(--accent-line);
  text-decoration:none;
}
.preferred-source-pill:focus-visible{
  border-radius:999px;
  box-shadow:var(--focus);
}
.preferred-source-pill.preferred-source-maroon{
  background:transparent;
  border-color:rgba(255,255,255,.28);
  color:#fff;
}
.preferred-source-pill.preferred-source-maroon:hover{
  border-color:rgba(255,255,255,.55);
}
.preferred-source-google{
  display:block;
  width:14px;
  height:14px;
  flex:0 0 14px;
}
/* Do not set fill/currentColor on the Google mark: retain its four colours. */

.preferred-source-about{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
/* Replace the existing reserved clearance, rather than adding to it.
   The absolute globe's crest is at hero bottom minus --ab-globe. */
.abhero.has-preferred-source{
  padding-bottom:calc(var(--ab-globe) + 36px);
}

.preferred-source-insights{
  display:flex;
  justify-content:flex-start;
  margin-top:24px;
}
/* Compact the prompt's intro without spending the rail's bottom clearance.
   Bottom padding stays with the responsive hero rules in main.css; allow the
   band to grow rather than pushing the last logo row against the intake band. */
.inshero.has-preferred-source{
  --preferred-source-ins-padding:24px;
}
.inshero.has-preferred-source .uspin{
  padding-top:calc(var(--preferred-source-ins-padding) - 12px);
}
.inshero.has-preferred-source .inshh{
  margin-bottom:calc(var(--s5) - 6px);
}
@media (min-width:721px) and (max-width:1199px){
  .inshero.has-preferred-source{
    --preferred-source-ins-padding:32px;
  }
}
@media (max-width:720px){
  .inshero.has-preferred-source{
    --preferred-source-ins-padding:28px;
  }
}

.preferred-source-home{
  position:fixed;
  right:16px;
  bottom:var(--preferred-source-bottom,calc(16px + env(safe-area-inset-bottom,0px)));
  z-index:30;
  max-width:calc(100vw - 32px);
  animation:preferred-source-reveal 220ms var(--e-out) both;
}
.preferred-source-home .preferred-source-pill{
  box-shadow:var(--sh-3);
}
/* Reserve the sibling close target without changing the anchor's 10px/16px
   padding, or nesting an interactive control inside it. */
.preferred-source-home .preferred-source-pill::after{
  content:"";
  width:22px;
  flex:0 0 22px;
}
/* JS sets --preferred-source-bottom to viewport bottom minus the visible
   #totop top + 10px. Never infer visibility from .show alone or enable totop.
   At exactly 720px the two controls can coexist; below that only totop does. */
.preferred-source-home.is-stacked{
  bottom:var(--preferred-source-bottom,calc(16px + env(safe-area-inset-bottom,0px)));
}
.preferred-source-close{
  position:absolute;
  top:50%;
  right:7px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ink-3);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1;
  cursor:pointer;
}
.preferred-source-close:hover{
  color:var(--ink);
}
/* Override main.css's generic focus position so the sibling close control
   stays visually inside the anchor's reserved right end. */
.preferred-source-close:focus-visible{
  position:absolute;
  border-radius:999px;
  box-shadow:var(--focus-tight);
}
@media (width < 720px){
  .preferred-source-home{display:none}
}
/* Floating promotion must not cover or compete with existing overlays. */
body.locked .preferred-source-home,
body.menuing .preferred-source-home,
body.searching .preferred-source-home{
  display:none;
}

.preferred-source-article{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 16px;
  max-width:100%;
  margin:24px 0 0;
  animation:preferred-source-reveal 200ms var(--e-out) both;
}
.preferred-source-article .preferred-source-pill{
  flex:0 0 auto;
}
.art .preferred-source-copy{
  flex:1 1 260px;
  min-width:0;
  margin:0;
  color:var(--ink-3);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:400;
  line-height:1.55;
}
.art .preferred-source-thanks{
  margin:24px 0 0;
  color:var(--ink-3);
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:400;
  line-height:1.55;
}
.preferred-source-article .preferred-source-thanks{
  margin:0;
}
@media (max-width:720px){
  .preferred-source-article{
    flex-direction:column;
    align-items:flex-start;
  }
  .preferred-source-copy{flex:0 1 auto}
}

.preferred-source-home[hidden],
.preferred-source-about[hidden],
.preferred-source-insights[hidden],
.preferred-source-article[hidden],
.preferred-source-thanks[hidden]{
  display:none!important;
}
@keyframes preferred-source-reveal{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .preferred-source-home,
  .preferred-source-article{
    animation:none;
  }
}