/* Content modules (blog, glossary, tools, rankings, pull rates) — reuses the
   design tokens; loaded only on content pages via head_extra. */

.sub { color: var(--text-dim); margin: 0 0 calc(var(--space) * 5); }

.blogcats { display: flex; flex-wrap: wrap; gap: calc(var(--space) * 2); margin: 0 0 calc(var(--space) * 6); }
.blogcats__item { padding: calc(var(--space) * 1.5) calc(var(--space) * 3); border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-xs); color: var(--text-dim); }
.blogcats__item:hover, .blogcats__item.is-active { color: #fff; border-color: rgba(255,203,5,.5); }

.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: calc(var(--space) * 4); }
.glossary__item { display: flex; flex-direction: column; gap: calc(var(--space) * 1.5); padding: calc(var(--space) * 4); background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); }
.glossary__item:hover { border-color: rgba(255,203,5,.4); }
.glossary__term { font-family: "Poppins", sans-serif; font-weight: 600; }
.glossary__def { color: var(--text-dim); font-size: var(--fs-xs); line-height: 1.5; }
.glossary__lead { margin: 0 0 calc(var(--space) * 4); line-height: 1.6; }

.toplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.toplist__row { display: grid; grid-template-columns: 2.2rem 1fr auto auto; align-items: center; gap: calc(var(--space) * 3); padding: calc(var(--space) * 2.5) calc(var(--space) * 3); background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); }
.toplist__rank { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--text-dim); text-align: center; }
.toplist__card { display: flex; align-items: center; gap: calc(var(--space) * 3); min-width: 0; }
.toplist__img { border-radius: 4px; flex: 0 0 auto; }
.toplist__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-weight: 600; }
.toplist__meta { color: var(--text-dim); font-size: var(--fs-xs); font-weight: 400; }
.toplist__price { font-family: "Poppins", sans-serif; font-weight: 700; white-space: nowrap; }
.toplist__trend { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; min-width: 4.5rem; text-align: right; }
.toplist__trend.is-up { color: #6ee7a0; }
.toplist__trend.is-down { color: #f08c8c; }

.datatable { width: 100%; border-collapse: collapse; margin: calc(var(--space) * 5) 0; overflow-x: auto; display: block; }
.datatable thead th { text-align: left; font-size: var(--fs-xs); color: var(--text-dim); padding: calc(var(--space) * 2) calc(var(--space) * 3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.datatable tbody td { padding: calc(var(--space) * 2.5) calc(var(--space) * 3); border-bottom: 1px solid var(--border); }
.datatable tbody tr:hover { background: rgba(255,255,255,.03); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); }
.badge--est { background: rgba(255,203,5,.15); color: #ffcb05; }
.badge--warn { background: rgba(240,140,140,.15); color: #f08c8c; padding: calc(var(--space) * 2) calc(var(--space) * 3); }

.sources { color: var(--text-dim); font-size: var(--fs-xs); }

.postlinks { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 6); padding-top: calc(var(--space) * 4); border-top: 1px solid var(--border); }
.postlinks__h { color: var(--text-dim); font-size: var(--fs-xs); margin-right: calc(var(--space) * 2); }

.tool { background: rgba(20,26,43,.6); border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 5); margin: calc(var(--space) * 4) 0; }
.tool__rows { display: flex; flex-direction: column; gap: calc(var(--space) * 3); }
.tool__row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(110px, 180px) auto; align-items: center; gap: calc(var(--space) * 3); }
.tool__label { font-weight: 600; }
.tool__hint { color: var(--text-dim); font-weight: 400; font-size: var(--fs-xs); }
.tool__input { background: var(--surface-2, #141a2b); color: inherit; border: 1px solid var(--border); border-radius: 8px; padding: calc(var(--space) * 2) calc(var(--space) * 3); font: inherit; width: 100%; }
.tool__out { font-family: "Poppins", sans-serif; font-weight: 700; min-width: 6rem; text-align: right; }
.tool__result { font-family: "Poppins", sans-serif; font-weight: 700; font-size: var(--fs-lg); margin: calc(var(--space) * 4) 0 0; }
.tool__note { color: var(--text-dim); font-size: var(--fs-xs); margin: calc(var(--space) * 3) 0 0; line-height: 1.6; }

.cvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: calc(var(--space) * 3); margin: calc(var(--space) * 4) 0; }
.cvcard { display: flex; flex-direction: column; align-items: center; gap: calc(var(--space) * 1.5); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); padding: calc(var(--space) * 3); cursor: pointer; color: inherit; font: inherit; }
.cvcard[aria-pressed="true"] { border-color: #ffcb05; background: rgba(255,203,5,.08); }
.cvcard img { border-radius: 6px; }
.cvcard__name { font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.cvcard__price { font-size: var(--fs-xs); color: var(--text-dim); }

@media (max-width: 640px) {
  .toplist__row { grid-template-columns: 1.6rem 1fr auto; }
  .toplist__trend { display: none; }
  .tool__row { grid-template-columns: 1fr; gap: calc(var(--space) * 1.5); }
  .tool__out { text-align: left; }
}