/* Esteban Denecken — the free version's banners: the Workspace, the newsletter, the Pokédex and the coffee */

/* Tinted banners */
.banner{
  --tone:var(--gold);
  display:block;text-decoration:none;text-align:left;
  padding:18px 20px;margin:0 0 14px;
  background:linear-gradient(120deg,color-mix(in srgb, var(--tone) 28%, transparent),color-mix(in srgb, var(--tone) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--tone) 65%, transparent);
  border-radius:var(--r-card);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.banner.alt{--tone:var(--accent,var(--cyan))}
.banner:hover{
  transform:translateY(-2px);border-color:var(--tone);
  background:linear-gradient(120deg,color-mix(in srgb, var(--tone) 38%, transparent),color-mix(in srgb, var(--tone) 18%, transparent));
}
.banner:active{filter:brightness(.86)}
.banner .kicker{color:var(--tone);font-size:var(--fs-11);font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.banner .ttl{color:var(--gray);font-size:var(--fs-16);font-weight:650;margin-top:5px}
.banner .blurb{color:var(--muted);font-size:var(--fs-13);line-height:1.5;margin-top:3px}
.banner .feats{list-style:none;margin:11px 0 0;padding:0}
.banner .feats li{color:var(--muted);font-size:var(--fs-13);line-height:1.5;padding-left:19px;position:relative}
.banner .feats li + li{margin-top:3px}
.banner .feats li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--tone);font-weight:700}

/* Pokédex link */
.pokelink{
  display:flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;color:var(--gray);border-width:1px;border-style:solid;
  font-size:var(--fs-14);font-weight:650;letter-spacing:.3px;
  padding:12px 20px;margin:0 0 14px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.pokelink:hover{transform:translateY(-2px)}
.pokelink svg{flex:none;width:22px;height:22px}

/* Buy me a coffee */
.tipbtn{
  display:block;text-align:center;text-decoration:none;color:var(--gray);
  font-size:var(--fs-14);font-weight:600;letter-spacing:.3px;
  padding:12px 20px;margin:0;
  background:linear-gradient(120deg,color-mix(in srgb, var(--gold) 28%, transparent),color-mix(in srgb, var(--gold) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  border-radius:var(--r-card);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.tipbtn:hover{
  transform:translateY(-2px);border-color:var(--gold);
  background:linear-gradient(120deg,color-mix(in srgb, var(--gold) 38%, transparent),color-mix(in srgb, var(--gold) 18%, transparent));
}
.tipbtn:active{filter:brightness(.86)}

/* Colors, dark or light, and the language */
.prefs{margin:26px 0 22px}
.prefstog{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px}
.prefs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.palsw{display:flex;gap:6px;align-items:center}
.palsw button{
  width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid var(--border);background:var(--card);
  transition:transform .12s,border-color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.palsw button:hover{transform:scale(1.15)}
.palsw button[aria-pressed="true"]{border-color:var(--gray)}
.palsep{color:var(--muted);opacity:.5;font-weight:700;line-height:1;user-select:none;margin:0 3px}
@media(max-width:420px){.palsw{flex-wrap:wrap}.palsw button{width:26px;height:26px}}

/* The footnote */
.sitefoot{margin-top:38px;text-align:center;color:var(--muted);font-size:var(--fs-13)}
.sitefoot a{color:var(--teal);text-decoration:none}
.sitefoot a:hover{color:var(--accent)}

/* The banners at the top of a settings page */
.brandtop{margin:0 0 26px}

/* The banners at the foot of a tool */
.brandfoot{width:100%;max-width:520px;margin:34px auto 0}

@media(prefers-reduced-motion:reduce){
  .banner,.pokelink,.tipbtn{transition:none}
  .banner:hover,.pokelink:hover,.tipbtn:hover{transform:none}
}

/* The EN / ES switch at the foot of a tool */
.langsw{
  display:flex;align-items:center;gap:2px;
  background:var(--well);border:1px solid var(--border);
  border-radius:999px;padding:2px;
}
.langsw button{
  display:flex;align-items:center;justify-content:center;
  min-width:32px;height:27px;padding:0 9px;
  border:0;border-radius:999px;background:transparent;
  color:var(--muted);font:inherit;font-size:var(--fs-13);font-weight:700;
  letter-spacing:.5px;line-height:1;cursor:pointer;
  transition:background .15s,color .15s;
}
.langsw button:hover{color:var(--gray)}
.langsw button[aria-pressed="true"]{background:var(--accent,var(--cyan));color:var(--navy)}
.infobar .langsw{order:-1;margin-right:auto}
.infobar.langbar{margin:18px 0 0}