/* Layout for the three page families added on 2026-10-16:
 *   /replacement/ and /replacement/<card>/   — "what do I switch to"
 *   /updates/<YYYY-MM>/                      — monthly change digest
 *   /research/ucard-annual-2026/             — market report
 *
 * This lives in its own stylesheet rather than site.css for the reason
 * guides.css documents: site.css is a single byte-budgeted file (64 KB, checked
 * by scripts/check.mjs) that every page downloads, and it is currently within
 * ~970 bytes of that ceiling. These rules only load where they are used.
 *
 * Loaded with a plain <link> rather than through fingerprintAsset(), matching
 * radar-page.css and guides.css: the file is small, changes rarely, and the
 * conditional request is cheaper than the round trip a hashed name would add on
 * the pages that never load it.
 *
 * No JavaScript accompanies these pages. Collapsing is <details>, jumping is an
 * anchor, and the per-day grouping is emitted at build time, so the served HTML
 * is the whole page.
 */

/* ------------------------------------------------------------ shared shell */

.rp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 36px;
  align-items: start;
}

.rp-layout > .rp-side {
  position: sticky;
  top: 18px;
}

@media (max-width: 900px) {
  .rp-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .rp-layout > .rp-side {
    position: static;
  }
}

.rp-side {
  border: 1px solid var(--line, #d9e2dc);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--paper, #fff);
}

.rp-side strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted, #5c6b64);
  margin-bottom: 10px;
}

.rp-side a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid var(--line-soft, #eef2ef);
}

.rp-side a:last-child {
  border-bottom: 0;
}

/* A number that a reader may want to quote, held out of the sentence so the
   surrounding label stays a fixed translation key. */
.rp-stat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}

.rp-stat > div {
  border: 1px solid var(--line, #d9e2dc);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--paper, #fff);
}

.rp-stat dt {
  font-size: 13px;
  color: var(--muted, #5c6b64);
  margin-bottom: 4px;
}

.rp-stat dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink, #142c29);
}

.rp-stat dd small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted, #5c6b64);
  margin-top: 3px;
}

/* ------------------------------------------------------------- timeline */

.rp-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  border-left: 2px solid var(--line, #d9e2dc);
}

.rp-timeline > li {
  position: relative;
  padding: 0 0 20px 14px;
}

.rp-timeline > li:last-child {
  padding-bottom: 0;
}

.rp-timeline > li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line, #d9e2dc);
}

.rp-timeline > li[data-kind="closing"]::before {
  background: #b45309;
}

.rp-timeline > li[data-kind="ended"]::before {
  background: #9aa8a1;
}

.rp-timeline-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.rp-timeline-head time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #142c29);
}

.rp-timeline-head .rp-tag {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--line-soft, #eef2ef);
  color: var(--muted, #5c6b64);
}

.rp-timeline-body {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

/* A date that has already passed reads differently from one still ahead. */
.rp-timeline > li[data-passed="true"] .rp-timeline-body {
  color: var(--muted, #5c6b64);
}

/* --------------------------------------------------- comparison table */

.rp-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rp-compare th,
.rp-compare td {
  border-bottom: 1px solid var(--line-soft, #eef2ef);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.rp-compare thead th {
  border-bottom: 2px solid var(--line, #d9e2dc);
  font-size: 13px;
  color: var(--muted, #5c6b64);
  white-space: nowrap;
}

.rp-compare tbody th {
  font-weight: 600;
}

.rp-compare .rp-pick {
  display: inline-block;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8f2ec;
  color: #285741;
  margin-left: 6px;
}

/* --------------------------------------------------------- monthly page */

.rp-month-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-month-list > li {
  border-bottom: 1px solid var(--line-soft, #eef2ef);
  padding: 12px 0;
}

.rp-month-list > li:last-child {
  border-bottom: 0;
}

.rp-month-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.rp-month-head time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted, #5c6b64);
}

.rp-month-head .rp-tag {
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--line-soft, #eef2ef);
  color: var(--muted, #5c6b64);
}

.rp-month-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 3px;
}

.rp-month-note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted, #5c6b64);
  margin: 0 0 6px;
}

.rp-month-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
}

/* Day separators inside a month. The id is the anchor target, so the heading
   has to be a real element rather than a ::before decoration. */
.rp-day {
  margin: 26px 0 6px;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #142c29);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line, #d9e2dc);
}

.rp-day:first-of-type {
  margin-top: 10px;
}

.rp-month-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #d9e2dc);
  font-size: 14px;
}

.rp-month-nav .rp-month-nav-next {
  margin-left: auto;
}

/* Sparse months stay on /updates/ behind a <details> rather than becoming
   near-empty pages of their own. */
.rp-sparse-month {
  border-bottom: 1px solid var(--line-soft, #eef2ef);
  padding: 8px 0;
}

.rp-sparse-month > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

/* A count sitting inside a summary label. It is emitted on the /updates/ month
   index and on the report's issuer table, so the rule is unscoped: the two
   summaries are styled by different parents and a scoped rule silently missed
   the second, which rendered "View card list20" with the badge butted against
   the label. margin-left is what keeps them apart; summary has no flex gap. */
.rp-sparse-count {
  margin-left: 8px;
  font-weight: 400;
  font-size: 13px;
  color: var(--muted, #5c6b64);
}

.rp-sparse-month .rp-month-list {
  margin-top: 8px;
  padding-left: 4px;
}

/* -------------------------------------------------------------- report */

/* One finding: the numbered heading, the quotable sentence, its support, its
   caveat and its links. These five rules were missing entirely when the page
   first rendered, and the failure was quiet — the markup is well-formed, so
   every gate passed. The visible symptom was the heading: .rp-finding-no
   inherited the <h3>'s own size and weight and sat flush against the label,
   so "1 费用透明度" read as "1费用透明度", as though the label began with a
   digit. The number is aria-hidden decoration, so it needs a gap the label's
   own text cannot supply. */
.rp-finding-block {
  margin: 0 0 32px;
}

.rp-finding-no {
  display: inline-block;
  min-width: 25px;
  height: 25px;
  margin-right: 9px;
  border-radius: 50%;
  background: #e8f2ec;
  color: #285741;
  font-size: 13px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  vertical-align: 2px;
}

.rp-finding-support {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 6px;
}

/* The links under a finding open the data or the sibling guide that supports
   the claim, so they read as a row of references rather than as prose. */
.rp-finding-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
  margin: 0;
}

/* The suggested citation, set apart because it is meant to be copied out. */
.rp-cite {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--line, #d9e2dc);
  background: var(--paper, #fff);
  font-size: 14px;
  color: var(--muted, #5c6b64);
}

/* The five findings are written to be quoted whole, so they are set apart from
   the prose around them rather than folded into it. */
.rp-finding {
  margin: 0 0 10px;
  padding: 14px 18px;
  border-left: 3px solid #285741;
  background: #f4f8f5;
  border-radius: 0 8px 8px 0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
}

.rp-finding cite {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  color: var(--muted, #5c6b64);
}

.rp-method {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted, #5c6b64);
  margin: 0 0 30px;
}

.rp-issuer-list {
  border: 1px solid var(--line, #d9e2dc);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.rp-issuer-list > summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
}

.rp-issuer-list ul {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
}

.rp-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 26px;
}

.rp-report-table th,
.rp-report-table td {
  border-bottom: 1px solid var(--line-soft, #eef2ef);
  padding: 8px 10px;
  text-align: left;
}

.rp-report-table thead th {
  border-bottom: 2px solid var(--line, #d9e2dc);
  font-size: 13px;
  color: var(--muted, #5c6b64);
}

.rp-report-table td:last-child,
.rp-report-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- narrow viewport */

@media (max-width: 740px) {
  .rp-timeline {
    padding-left: 16px;
  }
  .rp-timeline > li {
    padding-left: 10px;
  }
  .rp-timeline > li::before {
    left: -23px;
  }
  .rp-finding {
    font-size: 16px;
    padding: 12px 14px;
  }
  .rp-stat dd {
    font-size: 20px;
  }
  /* The comparison tables are wide by nature; the shared .table-wrap already
     gives them a scroll container, and these keep the type legible inside it. */
  .rp-compare,
  .rp-report-table {
    font-size: 13px;
  }
  .rp-month-links {
    font-size: 13px;
  }
}