/* Shared finishing layer. Palette remains defined in site.css. */
.home-page,
.compare-page,
.topic-page {
  -webkit-font-smoothing: antialiased;
}
.home-page :is(button, .button, input, select),
.compare-page :is(button, .button, input, select),
.topic-page :is(button, .button, input, select) {
  transition:
    border-color 0.22s cubic-bezier(0.2, 0, 0, 1),
    box-shadow 0.22s cubic-bezier(0.2, 0, 0, 1),
    background 0.22s cubic-bezier(0.2, 0, 0, 1);
}
.home-page :is(button, .button):active,
.compare-page :is(button, .button):active,
.topic-page :is(button, .button):active {
  transform: translateY(1px);
}
.comparison-motif {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.comparison-motif > div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.comparison-motif span {
  grid-column: 1/-1;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--white);
}
.comparison-motif i {
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.comparison-motif i:first-of-type {
  grid-column: 1/-1;
  height: 13px;
  background: var(--surface-muted);
}
.comparison-motif > div:last-child {
  grid-template-columns: 2fr 1fr;
}
.comparison-motif > div:last-child i:first-of-type {
  height: 13px;
  width: 65%;
}
.home-page .segments,
.compare-page .segments {
  padding: 3px;
  gap: 2px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
}
.home-page .segments button,
.compare-page .segments button {
  border-color: transparent;
  background: transparent;
  border-radius: 8px;
  font-size: 12px;
}
.home-page .segments button[aria-pressed="true"],
.compare-page .segments button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 2px 4px #18223014;
}
/* Compact workstation chrome; all remaining height belongs to the previews. */
@media (prefers-reduced-motion: reduce) {
  .home-page *,
  .compare-page *,
  .topic-page * {
    transition: none !important;
  }
  .home-page .card:hover,
  .topic-page .card:hover {
    transform: none;
  }
}

/* Archive browsing and comparison flow. */
.advanced-filters {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-top: 10px;
  background: var(--white);
}
.advanced-filters summary,
.topic-models summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.active-filters:empty {
  display: none;
}
.active-filters button {
  padding: 5px 9px;
  font-size: 12px;
  overflow-wrap: anywhere;
  max-width: 100%;
  text-align: left;
}
.topic-models {
  margin-bottom: 14px;
}
.topic-models .tags {
  margin-top: 10px;
}
.recent-list {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.recent-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap: 16px;
  padding: 14px 18px;
  font-size: 13px;
  text-decoration: none;
  align-items: center;
}
.recent-list a + a {
  border-top: 1px solid var(--line);
}
.recent-list a:hover {
  background: var(--paper);
}
.recent-list small {
  color: var(--muted);
}
#topic-count {
  font-size: 12px;
  color: var(--muted);
  margin: 18px 0;
}
.table-scroll {
  width: 100%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}
.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}
.archive-table caption {
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
}
.archive-table th,
.archive-table td {
  padding: 12px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
}
.archive-table th {
  background: var(--paper);
  font-weight: 600;
}
.archive-table th small {
  display: block;
  font-weight: normal;
  color: var(--muted);
  margin: 4px 0;
}
.matrix-desktop table {
  min-width: 800px;
}
.matrix-desktop th:first-child {
  min-width: 180px;
}
.matrix-desktop td {
  min-width: 90px;
}
.matrix-desktop summary {
  cursor: pointer;
  white-space: nowrap;
}
.matrix-record {
  min-width: 180px;
  padding: 12px 0;
}
.matrix-record + .matrix-record {
  border-top: 1px solid var(--line);
}
.matrix-record small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.matrix-record .card-actions {
  margin-top: 8px;
  flex-wrap: wrap;
}
.matrix-record button {
  font-size: 12px;
}
.missing-record {
  color: var(--muted);
  font-size: 12px;
}
.matrix-mobile {
  display: none;
}
.matrix-model {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 14px;
}
.matrix-model summary {
  cursor: pointer;
  font-weight: 600;
}
.mobile-effort {
  padding-top: 12px;
}
.mobile-effort h3 {
  margin: 0;
  font-size: 13px;
}
.replacement-slots {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}
.replacement-slots button {
  text-align: left;
}
.conditions-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.conditions-heading h2 {
  font-size: 18px;
  margin: 0;
}
.conditions-heading label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}
#conditions-notice {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.conditions-view .table-scroll {
  flex: 1;
}
@media (max-width: 700px) {
  .recent-list a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
  }
  .recent-list strong {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12px;
  }
  .topic-toolbar label,
  .topic-toolbar select {
    width: 100%;
  }
  .matrix-desktop {
    display: none;
  }
  .matrix-mobile {
    display: block;
  }
  .matrix-record {
    min-width: 0;
  }
}

/* 选择状态即时反馈，避免文字与底色在过渡中暂时失去对比。 */
:is(.home-page, .topic-page, .compare-page) button[aria-pressed] {
  transition: none;
}
@media (max-width: 700px) {
  :is(.home-page, .topic-page) .site-header :is(nav a, .nav-more > summary) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.score-split {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
.verification-note {
  font-size: 13px;
  line-height: 1.6;
}