/* The information pages in the new look (makeover, owner 2026-10-25): /archive, /about, /history, /staff,
   /staff/<slug>, /credits, /removal, /help, /premium, /queue, /archive/progress. Loaded through their head block,
   after site.css, whose cards, head, menu, chips and tables they use; only what these pages alone need is here. */

/* ---- Head: lede under the title, a logo beside it on the archive page ---- */
.ui-head .ui-lede { max-width: 760px; }
.ui-head .ui-lede > * + * { margin-top: 8px; }
.info-hero { display: flex; flex-direction: row !important; align-items: center; gap: 20px; }
.info-hero > img { flex: none; image-rendering: pixelated; }
.info-hero > img:not([class]) { width: 72px; height: 66px; }  /* the site logo */

/* ---- Article beside its table of contents (on phones the contents scroll sideways above it) ---- */
.info-toc { align-self: flex-start; position: sticky; top: 12px; }
.info-article { padding: 18px 22px 22px; }  /* text: .ui-prose */
.info-article > * + * { margin-top: 12px; }
.info-article h2 { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ui-soft-line); font-size: 18px; scroll-margin-top: 12px; }
.info-article > h2:first-child, .info-article > section:first-child > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.info-article h3, .info-article h4 { margin-top: 20px; font-size: 15px; scroll-margin-top: 12px; }
.info-article ul, .info-article ol { margin-bottom: 0; padding-left: 22px; }
.info-article li + li { margin-top: 4px; }
.info-article img { max-width: 100%; height: auto; }
.info-article .ui-table-wrap { margin-top: 12px; border: 1px solid var(--ui-line); border-radius: 8px; }
.info-article .ui-table th[scope="row"] { background: none; font-size: 14px; color: var(--ui-text); white-space: normal; min-width: 130px; }

/* Link cards ("In this archive"): .ui-linkcards; the article's list indent does not apply to them */
.info-article .info-links { padding: 0; }
.info-links li + li { margin-top: 0; }
.info-links .ui-linkcard { height: 100%; }

/* Definition list of sources */
.info-sources { margin: 0; display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px 18px; }
.info-sources dt { font-weight: bold; }
.info-sources dd { margin: 0; }

/* Numbered steps (removal requests) */
.info-steps { counter-reset: step; padding-left: 0 !important; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.info-steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; }
.info-steps li::before {
  content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ui-primary); color: #fff; font-weight: bold; font-size: 14px;
}

/* ---- History timeline ---- */
.info-timeline { list-style: none; padding-left: 0 !important; position: relative; }
.info-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: 2px; background: var(--ui-line); }
.info-timeline li { position: relative; padding-left: 28px; margin-top: 0 !important; padding-bottom: 14px; }
.info-timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ui-primary);
}
.info-timeline .info-when { display: block; font-weight: bold; color: var(--ui-text); }
.info-timeline .info-what { display: block; color: #3d4852; }

/* ---- Staff list and staff person ---- */
.info-people { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); padding: 18px 22px; }
.ui-linkcard.info-person { flex-direction: row; align-items: flex-start; gap: 14px; min-width: 0; }  /* a face beside the text */
.info-person img, .info-face { flex: none; width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--ui-line); image-rendering: pixelated; }
.info-person-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-person-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.info-person-name b { font-size: 15px; color: var(--ui-link); }
.info-person-name small, .info-person-years { font-size: 12px; color: var(--ui-muted); }
.info-person-roles { font-size: 13px; font-weight: bold; color: #3d4852; }
.info-person-summary { font-size: 13px; color: var(--ui-muted); }
.info-face-lg { width: 72px; height: 72px; }

/* ---- Help: the first box as a warning, the rest as questions that open ---- */
.info-qs { display: flex; flex-direction: column; }
.info-q { border-top: 1px solid var(--ui-soft-line); }
.info-q:first-child { border-top: 0; }
.info-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 22px;
  font-size: 15px; font-weight: bold; color: var(--ui-text); cursor: pointer; list-style: none;
}
.info-q > summary::-webkit-details-marker { display: none; }
.info-q > summary::after { content: "+"; flex: none; font-size: 22px; font-weight: normal; color: var(--ui-muted); }
.info-q[open] > summary::after { content: "\2212"; }
.info-q > summary:hover { background: var(--ui-tint-2); }
.info-q-body { padding: 0 22px 20px; }  /* text: .ui-prose */
.info-q-body img { max-width: 100%; height: auto; }
.info-video {
  display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--ui-line);
  border-radius: 8px; background: var(--ui-tint-2); color: var(--ui-text) !important; text-decoration: none !important;
}
.info-video:hover { background: #eef2f6; }
.info-video .ui-icon { color: #b03a2e; }
.info-video span { display: flex; flex-direction: column; gap: 2px; }
.info-video b { color: var(--ui-link); }
.info-video small { font-size: 13px; color: var(--ui-muted); }
.info-warn { border-color: #ecdcae; }
.info-warn > .ui-card-head { background: #fcf8e3; border-radius: 8px 8px 0 0; }
.info-warn > .ui-card-head h2 { color: #6b5427; }
.info-warn-body > * + * { margin-top: 10px; }

/* ---- Premium table ---- */
.info-premium td.info-no { color: #8a2f2c; background: #fbeeec; }
.info-premium td.info-yes, .info-premium th.info-yes { color: #2f5f2f; background: #eef7ea; }

/* ---- Queue: the status line on each card ---- */
.info-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; }
.info-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.info-status-now { color: #2f6b2f; }
.info-status-wait { color: #8a5a1f; }

/* ---- Progress (filled by progress.js) ---- */
.pg-updated { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ui-muted); }
.pg-meter { display: flex; flex-direction: column; gap: 6px; }
.pg-meter + .pg-meter { margin-top: 14px; }
.pg-meter-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 14px; }
.ui-meter > span.pg-primary { background: var(--ui-primary); }  /* .ui-meter bars: green by default */
.ui-meter > span.pg-warm { background: #b7791f; }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.pg-tile { padding: 12px 14px; border: 1px solid var(--ui-soft-line); border-radius: 8px; background: var(--ui-tint-2); }
.pg-num { display: block; font-size: 18px; font-weight: bold; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.pg-small { font-size: 13px; color: var(--ui-muted); }
.pg-names { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pg-list { margin: 10px 0 0; padding-left: 20px; font-size: 13px; }
.pg-list li + li { margin-top: 3px; }
#pg-fetching .ui-table-wrap { margin-top: 14px; border: 1px solid var(--ui-line); border-radius: 8px; }
#pg-fetching .ui-table td { font-size: 13px; }
#pg-releases > p + p, #pg-fetching > p, #pg-recovered > p, #pg-maps > p + p { margin-top: 10px; }

@media (max-width: 600px) {
  .info-toc { position: static; }
  .info-article { padding: 14px 16px; font-size: 15px; }
  .info-hero > img:not([class]) { width: 48px; height: 44px; }
  .info-face-lg { width: 56px; height: 56px; }
  .info-sources { grid-template-columns: 1fr; gap: 2px; }
  .info-sources dd { margin-bottom: 10px; }
  .info-people { grid-template-columns: 1fr; padding: 12px; }
  .info-q > summary { padding: 12px 16px; }
  .info-q-body { padding: 0 16px 16px; }
}