/* First thing anyone reads here, and it was the dimmest text on the
   page. */
#resultsPlaceholder{text-shadow:0 1px 2px rgba(0,0,0,.6);}
#resultsPlaceholder .muted{color:#aab4c2;margin:0;}
.hint{color:#8d97a6;font-size:.8rem;margin-top:6px;}
/* On the same translucent card as everything else, so every glyph
   gets the same edge. */
table{
  width:100%;border-collapse:collapse;margin-top:4px;font-size:.92rem;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--border);}
td{color:#f2f6fa;}
th{color:#8d97a6;font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;}
tr:last-child td{border-bottom:none;}
.tag{
  display:inline-block;background:var(--accent-soft);color:var(--accent);
  border-radius:6px;padding:2px 8px;font-size:.8rem;font-weight:600;
}
.status-ok{color:var(--ok);}
.status-err{color:var(--err);}
.muted{color:#8d97a6;}

a{color:var(--accent);}
.spinner{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);
  animation:spin .7s linear infinite;vertical-align:-2px;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* The only footer on the page. Brand left, links right, so it carries
   a name and still fits on one screen - stacking it was what turned a
   one-page tool into something you scroll past. */
.gw2-band{
  position:relative;z-index:1;
  margin-top:6px;padding:11px 16px 13px;
  background:linear-gradient(180deg, rgba(10,13,17,0), rgba(10,13,17,.66) 55%);
  border-top:1px solid rgba(127,214,242,.09);
}
.gw2-band-inner{
  max-width:860px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:12px 24px;
}
.gw2-band-brand{display:flex;align-items:center;gap:10px;min-width:0;}
/* Same crest as the title, held back: down here it signs off rather
   than announces. */
.gw2-band-crest{flex-shrink:0;opacity:.8;}
.gw2-band-words{display:flex;flex-direction:column;gap:1px;min-width:0;}
.gw2-band-name{
  font-size:.82rem;font-weight:700;color:var(--text);letter-spacing:.2px;
}
.gw2-band-tag{font-size:.74rem;color:var(--muted);line-height:1.35;}
.gw2-band-links{display:flex;flex-wrap:wrap;align-items:center;}
/* 24px is the floor WCAG 2.2 puts on a tap target outside a sentence,
   and these are in a nav. Costs no height - the crest already makes the
   row 28px. */
.gw2-band-links a{
  position:relative;
  display:inline-flex;align-items:center;min-height:24px;
  color:#8d97a6;text-decoration:none;font-size:.78rem;
  padding:0 11px;line-height:1.2;
  transition:color .15s ease;
}
/* Drawn rather than typed in, so the first link carries no stray dot
   and a wrap strands none. A pseudo-element and not a border, which
   would run the full 24px of the tap target and look like a table. */
.gw2-band-links a + a::before{
  content:'';position:absolute;left:0;top:50%;
  width:1px;height:11px;margin-top:-5.5px;
  background:rgba(154,164,178,.22);
}
.gw2-band-links a:hover{color:var(--accent-bright);}
/* Provenance and trademarks, at the quietest weight on the page - but
   not quieter than the floor. #737c88 measured 4.41:1 against the band
   over the photo, just under AA; this is the same grey one step up. */
.gw2-band-fine{
  max-width:900px;margin:9px auto 0;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.05);
  color:#757f8b;font-size:.68rem;line-height:1.5;text-align:center;
}
@media (max-width:560px){
  .gw2-band-inner{flex-direction:column;justify-content:center;gap:12px;}
  .gw2-band-brand{flex-direction:column;text-align:center;gap:7px;}
  .gw2-band-words{align-items:center;}
}