/* Topic index pages (topics/render.py), on top of telegram-history-dump.css */
.topics { clear: both; background: #fff; padding: 1em 1.4em; border-radius: 4px; line-height: 1.45; }
.topics h1 { font-size: 1.6em; margin: .2em 0 .3em; }
.topics h2 { font-size: 1.25em; margin: 1.4em 0 .4em; border-bottom: 1px solid #ddd; }
.topics .lead { font-size: 1.05em; }
.topics .period, .topics .crumbs, .topics .meta, .topics .method { color: #666; font-size: .9em; }
.topics .method { margin-top: 2em; border-top: 1px solid #eee; padding-top: .6em; }
.topics .n { color: #888; font-size: .8em; font-weight: normal; }
.themes .theme { border-left: 4px solid #7aa7d8; padding: .1em 0 .1em .8em; margin: 1em 0; }
.themes h3 { margin: 0 0 .2em; font-size: 1.1em; }
.themes .subs { font-size: .9em; color: #555; margin: .2em 0; }
.highlights li { margin: .35em 0; }
.topics .date { color: #777; font-size: .85em; white-space: nowrap; margin-right: .3em; }
.toc { columns: 2; padding-left: 1.2em; }
@media (max-width: 600px) { .toc { columns: 1; } }
details.conv { margin: .3em 0; border: 1px solid #e3e3e3; border-radius: 4px; padding: .3em .6em; }
details.conv[open] { background: #fafafa; }
details.conv summary { cursor: pointer; }
details.conv.w3 .title { font-weight: bold; }
details.conv .weight { color: #d0a000; font-size: .8em; }
.conv-body p { margin: .4em 0; }
.conv-body ul.res { margin: .2em 0; font-size: .9em; }
.conv-body .ref { color: #888; word-break: break-all; }
.profile .who { display: flex; align-items: center; gap: 14px; }
.profile .who h1 { margin: 0; }
.profile .role { margin: .2em 0 0; color: #555; }
.profile .avatar.big { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.profile .avatar.initials.big { display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--h) 40% 45%); color: #fff; font-size: 26px; font-weight: bold; }
.profile table.years td { padding: 1px 6px; }
.profile table.years td:nth-child(2) { width: 60%; }
.profile .bar { display: inline-block; height: .8em; background: hsl(var(--h) 50% 60%); border-radius: 2px; }
.profile .toc { columns: 1; }
.years-nav { font-size: .9em; color: #666; margin: 0 0 .6em; }
.topics .year { margin: 1.2em 0; }
.topics .year h2 { border-bottom: none; margin-bottom: .2em; }
details.profile-year { margin: .5em 0; }
details.profile-year > summary { cursor: pointer; }
/* Front page topic list. Wide screens: a grid of cards, up to 4 columns, photo on top.
   Phones: one column, thumbnail beside the text, alternating left and right. */
body.wide { max-width: 1240px; }
body.wide .topics > * { max-width: 700px; }
body.wide .topics > ul.cross-topics { max-width: none; }
ul.cross-topics { list-style: none; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
ul.cross-topics li { border: 1px solid #e3e3e3; border-radius: 6px; overflow: hidden; background: #fcfcfc; }
ul.cross-topics .thumb { display: block; }
ul.cross-topics .thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
ul.cross-topics .text { padding: 8px 10px 10px; }
ul.cross-topics .scope { color: #666; font-size: .85em; }
@media (max-width: 600px) {
  ul.cross-topics { grid-template-columns: 1fr; gap: 10px; }
  ul.cross-topics li { display: flex; align-items: stretch; }
  ul.cross-topics li:nth-child(even) { flex-direction: row-reverse; }
  ul.cross-topics .thumb { flex: 0 0 34%; }
  ul.cross-topics .thumb img { height: 100%; aspect-ratio: auto; min-height: 96px; }
  ul.cross-topics .text { flex: 1; }
}
/* Topic page: the topic's photo to the left of the summary */
figure.topic-image { float: left; width: 280px; margin: .3em 1.2em .6em 0; }
figure.topic-image img { width: 100%; border-radius: 4px; display: block; }
figure.topic-image figcaption { font-size: .8em; color: #666; margin-top: .3em; }
.topics .years-nav { clear: both; }
@media (max-width: 600px) { figure.topic-image { float: none; width: 100%; margin: .5em 0; } }
.topic-year { margin-top: 1.4em; }
.topic-year h3 { font-size: 1.02em; margin: 1em 0 .2em; }
.topic-year .subsum { margin: .2em 0 .5em; color: #333; }
a.cross { font-size: .9em; }
/* community gallery (comunidade.html) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 1em 0; }
.gallery .card { border: 1px solid #e3e3e3; border-top: 4px solid hsl(var(--h) 50% 55%); border-radius: 6px;
  padding: 14px 10px; text-align: center; background: hsl(var(--h) 60% 98%); }
.gallery .card .avatar.big { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.gallery .card .avatar.initials.big { display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--h) 40% 45%); color: #fff; font-size: 34px; font-weight: bold; }
.gallery .card h3 { margin: .5em 0 .1em; font-size: 1.05em; }
.gallery .card p { margin: .2em 0; }
.gallery .card .role { color: #555; font-size: .9em; }
.topics .group-links { font-size: .9em; color: #666; margin: 0 0 .3em; }
/* repositories: projetos.html and the box on topic pages */
ul.repos { list-style: none; padding: 0; margin: .5em 0; }
ul.repos li { margin: 0 0 .6em; padding-left: .8em; border-left: 3px solid #7fb98a; }
ul.repos .scope { color: #555; font-size: .9em; }
aside.repos-box { clear: both; background: #f4f9f5; border: 1px solid #cfe3d3; border-radius: 6px; padding: .2em 1em .4em; margin: 1em 0; }
aside.repos-box h2 { font-size: 1em; border: 0; margin: .6em 0 .3em; }
figure.topic-image.small { width: 220px; }
section.project-group { clear: both; overflow: hidden; }
section.project-group ul.repos { overflow: hidden; }
@media (max-width: 600px) { figure.topic-image.small { width: 100%; } }

/* ---- Desktop layout. Every topic-type page is body.wide (1240 px). Text keeps a readable
   line length; the extra width goes to side-by-side blocks. Phones (under 700 px) keep one
   column, which is what the rules above already give. */
body.wide .topics > * { max-width: none; }
body.wide .topics p, body.wide .topics li { max-width: 92ch; }
body.wide .gallery p, body.wide ul.cross-topics li, body.wide ul.repos li, body.wide .conv-body p,
body.wide .themes p, body.wide .year p { max-width: none; }
.toc { columns: 3 240px; }
@media (min-width: 900px) {
  /* topic page: repositories box at the right, photo at the left, summary between them */
  aside.repos-box { float: right; clear: right; width: 320px; margin: .3em 0 1em 1.5em; }
  figure.topic-image { width: 300px; }
  /* conversations two by two */
  .convs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-items: start; }
  .convs details.conv { margin: 0; }
  .convs details.conv[open] { grid-column: 1 / -1; }
  /* front page: the years two by two */
  .topics > .year { display: inline-block; vertical-align: top; width: calc(50% - 14px); margin: .6em 10px .6em 0; }
  /* year page: themes as cards, highlights in two columns */
  .themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 6px 24px; }
  ul.highlights { columns: 2 420px; column-gap: 2em; }
  ul.highlights li { break-inside: avoid; }
  /* projects: repositories in columns beside the group's photo */
  section.project-group ul.repos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 20px; }
  /* profile: yearly chart beside the bio */
  .profile table.years { min-width: 420px; }
  details.profile-year { clear: both; }
}
.topic-year, .topics h2, .topics .method { clear: both; }

/* ---- Site style (2026-11), as in telegram-history-dump.css: dark cards instead of white ones */
.topics { background: transparent; padding: 0 0 3em; }
.topics h2 { border-bottom-color: var(--line); font-weight: normal; }
.topics .period, .topics .crumbs, .topics .meta, .topics .method, .topics .n, .topics .date,
.themes .subs, ul.cross-topics .scope, ul.repos .scope, .years-nav, .topics .group-links,
.conv-body .ref, .profile .role, .gallery .card .role, .topic-year .subsum,
figure.topic-image figcaption { color: var(--dim); }
.topics .method { border-top-color: var(--line); }
.themes .theme { border-left-color: var(--accent); }
ul.cross-topics li, .gallery .card { background: var(--card); border-color: var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.gallery .card { border-top-color: hsl(var(--h) 50% 55%); }
ul.cross-topics .text > a:first-child { font-size: 1.05em; }
details.conv { border-color: var(--line); background: var(--card); }
details.conv[open] { background: #232a2f; }
details.conv .weight { color: #e0b84a; }
ul.repos li { border-left-color: var(--accent); }
aside.repos-box { background: var(--card); border-color: var(--line); }
.profile .bar { background: hsl(var(--h) 45% 55%); }