/* content.css — hub directories + reference/guide article pages
   (distinct from the calculator shell; reuses the same design tokens) */

/* ---- shared page intro ---- */
.page-head { padding-block: var(--s-8) var(--s-6); }
.page-head__title { font-size: var(--t-xl); letter-spacing: -0.03em; margin: var(--s-3) 0; max-width: 20ch; }
.page-head__lede { color: var(--c-ink-soft); font-size: var(--t-lg); line-height: 1.5; max-width: 60ch; }
.page-head__meta { margin-top: var(--s-5); font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-ink-faint); letter-spacing: 0.01em; }

/* ---- hub directory grouped by cluster ---- */
.hub-cluster { padding-block: var(--s-6); }
.hub-cluster + .hub-cluster { border-top: var(--hair); }
.hub-cluster__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.hub-cluster__title { font-size: var(--t-lg); letter-spacing: -0.02em; }
.hub-cluster__count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-faint); letter-spacing: 0.06em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s-4); }
.hub-card {
  display: flex; flex-direction: column; gap: var(--s-2); min-height: 116px;
  background: var(--c-surface); border: 1px solid var(--c-hair); border-radius: var(--r-md);
  padding: var(--s-5); box-shadow: var(--shadow-flat); position: relative; isolation: isolate;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hub-card:hover { border-color: var(--c-hair-strong); transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--c-ink); }
.hub-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.hub-card__name { font-family: var(--f-display); font-weight: var(--w-semi); font-size: var(--t-md); letter-spacing: -0.015em; }
.hub-card__num { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-faint); flex: none; }
.hub-card__formula { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-faint); margin-top: auto; overflow-wrap: anywhere; }

/* ---- reference table (benchmarks hub + benchmark page) ---- */
.ref-table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--t-sm); }
.ref-table caption { text-align: left; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-faint); padding-bottom: var(--s-3); }
.ref-table th, .ref-table td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: var(--hair); }
.ref-table th { color: var(--c-ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--t-xs); font-weight: var(--w-med); }
.ref-table td:last-child, .ref-table th:last-child { text-align: right; }
.ref-table tbody tr { transition: background var(--dur-1) var(--ease); }
.ref-table tbody tr:hover { background: var(--c-surface-sunk); }
.ref-table a { color: var(--c-ink); }
.ref-table a:hover { color: var(--c-accent); }
.ref-table .ref-table__val { color: var(--c-accent); font-weight: var(--w-med); }
.ref-wrap { border: 1px solid var(--c-hair); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-flat); padding: var(--s-5); overflow-x: auto; }

/* ---- reference / guide article ---- */
.doc { padding-block: var(--s-6) var(--s-7); }
.doc__body { max-width: 72ch; }
.doc__body > * + * { margin-top: var(--s-4); }
.doc__body h2 { font-size: var(--t-lg); letter-spacing: -0.02em; margin-top: var(--s-7); }
.doc__body h3 { font-size: var(--t-md); margin-top: var(--s-5); letter-spacing: -0.01em; }
.doc__body p { color: var(--c-ink); line-height: var(--lh-body); }
.doc__body ul, .doc__body ol { padding-left: var(--s-5); display: grid; gap: var(--s-2); color: var(--c-ink); }
.doc__body ul { list-style: disc; }
.doc__body ol { list-style: decimal; }
.doc__body li { line-height: 1.55; padding-left: var(--s-1); }
.doc__body strong { font-weight: var(--w-semi); }
.doc__body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.doc__body a:hover { color: var(--c-accent-deep); }
.doc__lede { font-size: var(--t-lg) !important; color: var(--c-ink-soft) !important; line-height: 1.5; }
.doc__callout { border-left: 4px solid var(--c-note-line); background: var(--c-note-wash); padding: var(--s-4) var(--s-5); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.doc__callout p { font-size: var(--t-sm); }

/* ---- CTA strip back to a calculator ---- */
.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  margin-top: var(--s-7); padding: var(--s-5) var(--s-6);
  border: 1px solid var(--c-hair-strong); border-radius: var(--r-lg);
  background: var(--c-surface); box-shadow: var(--shadow-rest); position: relative; overflow: hidden;
}
.cta-strip::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-accent); }
.cta-strip__text { display: grid; gap: 2px; min-width: 0; }
.cta-strip__title { font-family: var(--f-display); font-weight: var(--w-semi); letter-spacing: -0.01em; }
.cta-strip__sub { font-size: var(--t-sm); color: var(--c-ink-soft); }

@media (max-width: 560px) {
  .cta-strip { flex-direction: column; align-items: flex-start; }
}