/* Topic page (templates/pages/topic-public.php): fact tiles, the why / use / evidence cards, resource rows and the side boxes.
   Loaded after content.css and overrides it for this page only. Colours are tokens or color-mix() of tokens. */

/* Header: the stable id is a reference, so it is quiet. */
.topic-page .tp-id { font-size: .78rem; color: var(--text-3); }

/* Facts: four glass tiles. data-dom on a tile sets --tint (the subject hue) for its meter and its fill. */
.tp-facts { margin: var(--sp-5) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.tp-fact { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); align-content: start; display: grid; gap: var(--sp-2);
  --glass-top: color-mix(in srgb, var(--tint, var(--cyan)) 9%, var(--glass-tile));
  --glass-bottom: var(--glass-tile); }
.tp-fact dt { display: flex; align-items: center; gap: var(--sp-2); font: 500 .85rem/1.2 var(--font-ui); color: var(--text-3); }
.tp-fact dd { margin: 0; font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--text); }
.tp-meter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; max-width: 150px; margin-top: var(--sp-2); }
.tp-meter i { display: block; height: 6px; border-radius: var(--r-sm); background: var(--surface-3); }
.tp-meter i.is-on { background: var(--tint, var(--cyan)); }

/* Icons: 18px line icons in text-2; inside a badge they take on-hue. */
.tp-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--text-2); }

/* Cards: one column; two columns from 900px with the evidence card spanning both. */
.tp-main { min-width: 0; }
.tp-cards { display: grid; gap: var(--sp-3); }
@media (min-width: 900px) {
  .tp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-card--evidence, .tp-card:only-child { grid-column: 1 / -1; }
}
.tp-card { --bc: var(--tint, var(--cyan)); margin: 0; padding: var(--sp-4) var(--sp-5); display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.tp-card h2 { grid-column: 2; margin: 0; font-size: 1.05rem; line-height: 30px; }
.tp-card p { grid-column: 2; margin: var(--sp-2) 0 0; max-width: var(--measure); font: 400 1.05rem/1.6 var(--font-read); color: var(--text-2); }
.tp-card__badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; grid-row: 1;
  background: radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--bc), var(--lit-hi) 50%) 0, var(--bc) 50%, color-mix(in srgb, var(--bc), var(--bg) 55%) 100%);
  box-shadow: inset -2px -3px 5px var(--glass-shade); }
.tp-card__badge .tp-ico { width: 16px; height: 16px; color: var(--on-hue); }
.tp-card--use { --bc: var(--cyan); }
.tp-card--evidence { --bc: var(--green);
  --glass-top: color-mix(in srgb, var(--green) 10%, var(--surface));
  --glass-bottom: color-mix(in srgb, var(--green) 10%, var(--surface)); }

/* Resources: rows separated by hairlines; the icon names the kind of link, the type is small text. */
.tp-res { margin-top: var(--sp-7); }
.tp-res > h2 { font-size: 1.05rem; margin: 0; }
.tp-res__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.tp-res__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; }
.tp-res__row + .tp-res__row { border-top: 1px solid var(--line); }
.tp-res__ico { display: block; padding-top: 2px; }
.tp-res__ico .tp-ico { width: 20px; height: 20px; }
.tp-res__title { display: block; font-weight: 600; color: var(--text); }
.tp-res__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: .9rem; }
.tp-res__author { color: var(--text-2); }
.tp-res__type { color: var(--text-3); }

/* Side boxes: glass cards; each item carries a planet glyph and its requirement as a small line. */
.side__box.tp-side { padding: var(--sp-4) var(--sp-5); }
.tp-side > h2 { font-size: .95rem; margin: 0 0 var(--sp-3); }
.tp-list { gap: var(--sp-3); }
.tp-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
.tp-item > .phase { margin-top: 2px; }
.tp-item__body { min-width: 0; }
.tp-item__body > a { overflow-wrap: anywhere; }
.tp-item__sub { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.4; color: var(--text-3); }
.tp-side .tp-list.small .tp-item__body { color: var(--text-2); }
.tp-side > .tp-item__sub { padding-left: calc(18px + var(--sp-3)); }

/* "Learn it here" lists what the page offers, not topics: a film and a pencil instead of planet glyphs. */
.tp-learn-ico { flex: none; color: var(--cyan-text); margin-top: 1px; }