/* Mobile Wikipedia (Minerva) as closely as is worth reproducing. The details
   that sell it are the ones a phone user sees without looking: the wordmark,
   the serif article title, the exact link blue, the thin grey rules. */

:root {
  --blue: #3366cc;
  --text: #202122;
  --grey: #54595d;
  --line: #c8ccd1;
  --line-soft: #eaecf0;
  --bg-soft: #f8f9fa;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(51,102,204,.12); }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

/* ---- header ---- */

.hdr {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}

.icon-btn {
  border: 0;
  background: none;
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
}
.icon-btn svg { fill: currentColor; display: block; }

.brand {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  -webkit-user-select: none;
}
.brand-globe { width: 24px; height: 24px; }
.brand-mark {
  font-family: "Linux Libertine", Georgia, Times, serif;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: #000;
}

/* ---- search ---- */

.searchbar {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 2px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 30;
}
.searchbar[hidden] { display: none; }
#searchInput {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 16px;
  padding: 8px 4px;
  background: none;
  color: var(--text);
  font-family: inherit;
}

.suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
}
.suggestions[hidden] { display: none; }
.suggestions li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  font-size: 15px;
}
.suggestions li:last-child { border-bottom: 0; }
.suggestions li:active { background: var(--bg-soft); }

/* ---- the portal (wikipedia.org itself) ----
   Measurements are the real portal's own mobile values. It sets the root font
   to 62.5% so 1rem is 10px there; those are written out in px here. */

/* The wordmark and the small icons come out of the portal's own sprite sheet,
   which is why the lettering is the real Wikipedia brand face rather than
   whatever serif the phone falls back to. Positions scale with the rendered
   width: the wordmark sits at -304px in a sheet 176px wide, so a 150px render
   puts it at -304 x 150/176, which is the -260px the real site uses. */
.sprite {
  background-image: url(portal-sprite.svg);
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  color: transparent;
  overflow: hidden;
  text-indent: -10000px;
}
.wordmark-portal { width: 150px; height: 25px; background-position: 0 -260px; background-size: 100%; }
.wordmark-hdr    { width: 110px; height: 20px; background-position: 0 -190px; background-size: 100%; }
.lang-icon       { width: 22px;  height: 22px; background-position: 0 -667px; }
.wmf-logo        { width: 42px;  height: 42px; background-position: 0 -262px; }

body.on-portal .hdr { display: none; }
.portal { display: none; padding: 0 16px 32px; }
body.on-portal .portal { display: block; }
body.on-portal #view { display: none; }

.central-textlogo {
  /* Resets the session when tapped. Kept visually inert -- no cursor, no tap
     flash -- because on the real portal the logo is not a link and nothing
     should invite a spectator to try it. */
  -webkit-tap-highlight-color: transparent;
  position: relative;
  height: 70px;
  margin: 20px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.portal-globe { width: 57px; height: auto; }
.textlogo-wrap { margin: 0; font-weight: 400; text-align: center; }
.slogan {
  display: block;
  margin-top: 2px;
  font-family: "Linux Libertine", "Hoefler Text", Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.portal-search {
  display: flex;
  align-items: stretch;
  margin: 22px 0 0;
}
.psearch-box {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #a2a9b1;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  background: #fff;
}
#portalInput {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: none;
  padding: 0 10px;
  font: inherit;
  font-size: 16px;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
}
#portalInput::-webkit-search-cancel-button { display: none; }
.psearch-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px 0 8px;
  font-size: 15px;
  color: var(--grey);
  white-space: nowrap;
}
.psearch-go {
  width: 62px;
  border: 1px solid var(--blue);
  border-radius: 0 2px 2px 0;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.portal-suggestions {
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.08);
}

.central-featured {
  margin-top: 30px;
  overflow: hidden;
}
.central-featured-lang {
  box-sizing: border-box;
  float: left;
  width: 33.33%;
  height: 64px;
  margin: 0 0 16px;
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
}
.link-box { display: block; text-decoration: none; }
.central-featured-lang strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}
.central-featured-lang small {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}

.lang-list-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-soft);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
}
.lang-list-label { font-weight: 700; }

.portal-footer {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.portal-footer p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey);
}

/* ---- article ---- */

.article { padding: 12px 16px 48px; }
.article h1.title {
  font-family: "Linux Libertine", Georgia, Times, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  margin: 6px 0 2px;
}
.article .desc {
  color: var(--grey);
  font-size: 14px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 12px;
}
.article p { margin: 0 0 14px; }

.article h2.section, .article h3.section {
  font-family: "Linux Libertine", Georgia, Times, serif;
  font-weight: 400;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 5px;
  margin: 26px 0 12px;
}
.article h2.section { font-size: 22px; }
.article h3.section { font-size: 18px; border-bottom: 0; font-weight: 600; font-family: inherit; }

a.wlink {
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
}
a.wlink:active { text-decoration: underline; }

.thumb {
  float: right;
  width: 44%;
  max-width: 190px;
  margin: 4px 0 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 3px;
}
.thumb img { width: 100%; display: block; }
.thumbcap {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--grey);
  padding: 4px 2px 2px;
}

ul.seealso { padding-left: 22px; margin: 0 0 14px; }
ul.seealso li { margin-bottom: 4px; }

.footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 28px;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--grey);
  line-height: 1.7;
}
.footer .lic { margin-top: 6px; font-size: 11.5px; color: #72777d; }

/* ---- search results ---- */

.results { padding: 0; }
.results li {
  list-style: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.results li:active { background: var(--bg-soft); }
.results .rtitle { color: var(--blue); font-size: 16px; }
.results .rsnip { color: var(--grey); font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.results ul { padding: 0; margin: 0; }
.results .rhead { padding: 10px 16px; color: var(--grey); font-size: 13px; border-bottom: 1px solid var(--line-soft); }

/* ---- spinner ---- */

.spinner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: center;
  z-index: 40;
  pointer-events: none;
}
.spinner[hidden] { display: none; }
.spinner .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue);
  margin-top: 14px;
  animation: pulse 1s infinite ease-in-out;
}
.spinner .dot:nth-child(2) { animation-delay: .15s; }
.spinner .dot:nth-child(3) { animation-delay: .3s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }