/* Stylesheet of the static KIR archive; build_archive.py copies it to style.css.
   Modeled on the kir.kaia.io Discourse theme (light scheme, as on the live site). */
:root {
  --primary: #222; --primary-high: #4a4a4a; --primary-medium: #646464; --primary-low-mid: #919191;
  --primary-low: #e9e9e9; --primary-very-low: #f8f8f8; --secondary: #fff; --tertiary: #0088cc;
  --tertiary-hover: #005c8a; --notice: #fbc02d; --notice-border: #e0a800; --notice-text: #3d2b00;
  --heat-low: #cf7721; --heat-med: #e45735; --heat-high: #c42e14;
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--secondary); color: var(--primary);
  font: 15px/1.4 Arial, "Helvetica Neue", Helvetica, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  overflow-wrap: anywhere;
}
a { color: var(--tertiary); text-decoration: none; }
a:hover { color: var(--tertiary-hover); }
.wrap { max-width: 1110px; margin: 0 auto; padding: 0 16px; }

/* header and archive notice */
.d-header { background: var(--secondary); box-shadow: 0 2px 4px -1px rgba(0,0,0,.25); position: sticky; top: 0; z-index: 10; }
.d-header .wrap { height: 60px; display: flex; align-items: center; }
.d-header .logo img { height: 36px; display: block; }
.d-header .logo { font-size: 1.5em; font-weight: 700; color: var(--primary); }
.archive-notice { background: var(--notice); border-bottom: 2px solid var(--notice-border);
  color: var(--notice-text); font-size: 1.07em; font-weight: 600; }
.archive-notice .wrap { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px 12px; }
.archive-notice-label { background: var(--notice-text); color: var(--notice); border-radius: 4px;
  padding: 3px 9px; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
main.wrap { padding-top: 20px; min-height: 60vh; }
footer { margin-top: 48px; padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--primary-low);
  color: var(--primary-medium); font-size: .87em; }
time { white-space: nowrap; }

/* category badge */
.badge-category { display: inline-flex; align-items: baseline; gap: 5px; color: var(--primary-high);
  font-size: .87em; margin-right: 10px; }
.badge-category__swatch { display: inline-block; width: 10px; height: 10px; flex: none; }

/* list controls: category boxes and Categories / Latest pills */
.list-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; }
.category-box { border: 1px solid var(--primary-low); padding: 6px 10px; border-radius: 2px; }
.category-box.current { border-color: var(--tertiary); }
.category-box .badge-category { font-size: 1.07em; margin-right: 0; }
.category-box.subs .badge-category { font-size: .93em; margin-right: 10px; }
.nav-pills { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; }
.nav-pills a { display: block; padding: 6px 10px; color: var(--primary); font-size: 1.07em;
  border-bottom: 2px solid transparent; }
.nav-pills a.active { color: var(--tertiary); border-bottom-color: var(--tertiary); }

/* home: categories and latest */
.categories-and-latest { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.category-list, .topic-list { width: 100%; border-collapse: collapse; }
.category-list th, .topic-list th, .latest-topic-list .table-heading {
  font-weight: 400; font-size: .87em; color: var(--primary-medium); text-align: left;
  padding: 12px 10px; border-bottom: 3px solid var(--primary-low); }
.category-list td { border-bottom: 1px solid var(--primary-low); vertical-align: top; padding: 14px 12px; }
.category-list td.category { border-left: 6px solid; }
.category-list h3 { margin: 0 0 6px; }
.category-list h3 .badge-category { font-size: 1.2rem; font-weight: 700; color: var(--primary-high); }
.category-list h3 .badge-category__swatch { width: 14px; height: 14px; }
.category-description { color: var(--primary-medium); font-size: 1.07em; }
.subcategories { margin-top: 8px; }
.category-list th.topics, .category-list td.topics { text-align: right; width: 70px; }
.category-list td.topics { font-size: 1.2em; font-weight: 700; color: var(--primary-medium); }
.latest-topic-list-item { display: flex; align-items: center; gap: 12px; padding: 14px 12px;
  border-bottom: 1px solid var(--primary-low); }
.latest-topic-list-item .main-link { flex: 1; font-size: 1.2em; }
.latest-topic-list-item .title { color: var(--primary); }
.latest-topic-list-item .topic-stats { text-align: right; color: var(--primary-low-mid); font-size: 1.07em; }
.latest-topic-list-item .posts { color: var(--primary-medium); }
.more-topics { text-align: right; padding: 16px 0; }
.btn { display: inline-block; padding: 7px 11px; border: 1px solid var(--primary-low); border-radius: 2px;
  color: var(--primary); background: var(--secondary); }

/* topic list */
.topic-list td { border-bottom: 1px solid var(--primary-low); padding: 12px 10px; vertical-align: middle; }
.topic-list .main-link { font-size: 1.2em; }
.topic-list .main-link .title { color: var(--primary); }
.topic-list .link-bottom-line { margin-top: 2px; font-size: .78em; }
.topic-list .topic-excerpt { margin-top: 4px; font-size: .85em; color: var(--primary-medium); }
.topic-list .posters { width: 146px; white-space: nowrap; }
.topic-list .posters .avatar { margin-right: 3px; }
.topic-list .num { text-align: center; width: 70px; color: var(--primary-medium); font-size: .93em; }
.topic-list td.posts { font-weight: 700; }
.topic-list .activity { width: 90px; }
.heatmap-low { color: var(--heat-low) !important; }
.heatmap-med { color: var(--heat-med) !important; }
.heatmap-high { color: var(--heat-high) !important; }
.empty { color: var(--primary-medium); }
svg.pin { width: 12px; height: 14px; fill: var(--primary-low-mid); margin-right: 4px; vertical-align: -1px; }

/* avatars */
.avatar { border-radius: 50%; vertical-align: middle; display: inline-block; object-fit: cover; }
.avatar.letter { color: #fff; text-align: center; font-family: Arial, sans-serif; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.avatar.letter::before { content: attr(data-letter); }

/* topic page */
main.topic { max-width: 1110px; }
.topic-title { max-width: 758px; margin-bottom: 12px; }
.topic-title h1 { font-size: 1.9em; line-height: 1.25; margin: 4px 0 6px; font-weight: 700; }
.topic-title h1 a { color: var(--primary); }
.topic-title h1 svg.pin { width: 16px; height: 20px; }
.posts { max-width: 758px; }
.post { display: flex; gap: 12px; border-top: 1px solid var(--primary-low); padding: 16px 0 12px; }
.topic-avatar { width: 48px; flex: none; }
.topic-body { flex: 1; min-width: 0; }
.topic-meta-data { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.topic-meta-data .username { font-weight: 700; color: var(--primary-high); }
.topic-meta-data .user-title { color: var(--primary-medium); margin-left: 6px; }
.post-infos { display: flex; gap: 14px; color: var(--primary-low-mid); white-space: nowrap; }
.post-date { color: var(--primary-low-mid); }
.reply-to-tab { color: var(--primary-medium); }
.reply-to-tab .avatar { margin: 0 3px; }
.post-actions { margin-top: 12px; color: var(--primary-medium); font-size: .93em; }
.topic-map { display: flex; align-items: center; gap: 18px; margin-left: 60px; padding: 10px 0;
  border-top: 1px solid var(--primary-low); }
.topic-map .map-item { display: flex; flex-direction: column; align-items: center; }
.topic-map .number { font-size: 1.2em; color: var(--tertiary); }
.topic-map .label { font-size: .85em; color: var(--primary-medium); }
.topic-map .avatars .avatar { margin-right: 4px; }
.small-action { display: flex; margin-left: 60px; padding: 10px 0; border-top: 1px solid var(--primary-low);
  color: var(--primary-medium); }
.small-action-desc .avatar { margin-right: 6px; }
.small-action-desc .action { margin-right: 4px; }
.small-action-desc p { display: inline; margin: 0; }

/* Discourse "cooked" post HTML */
.cooked { font-size: 1.07em; line-height: 1.5; }
.cooked img { max-width: 100%; height: auto; }
.cooked img.emoji { width: 20px; height: 20px; vertical-align: middle; }
.cooked h1 { font-size: 1.7em; } .cooked h2 { font-size: 1.5em; } .cooked h3 { font-size: 1.3em; }
.cooked h4 { font-size: 1.1em; }
.cooked pre { background: var(--primary-very-low); padding: 12px; overflow-x: auto; }
.cooked code { font-family: Consolas, Menlo, Monaco, monospace; font-size: .93em; }
.cooked :not(pre) > code { background: var(--primary-very-low); padding: 2px 4px; }
.cooked blockquote { margin: 1em 0; padding: 12px; border-left: 5px solid var(--primary-low);
  background: var(--primary-very-low); }
.cooked blockquote > :first-child { margin-top: 0; } .cooked blockquote > :last-child { margin-bottom: 0; }
.cooked .md-table { overflow-x: auto; }
.cooked table { border-collapse: collapse; margin: 1em 0; }
.cooked th, .cooked td { border-bottom: 1px solid var(--primary-low); padding: 4px 8px; text-align: left; }
.cooked th { border-bottom-width: 2px; }
.cooked a.anchor { display: none; }
.cooked .lightbox-wrapper .meta, .cooked svg.d-icon { display: none; }
.cooked .mention, .cooked .mention-group { background: var(--primary-low); color: var(--primary-high);
  padding: 2px 4px; border-radius: 8px; font-size: .93em; }
.cooked aside.quote { margin: 1em 0; }
.cooked aside.quote .title { padding: 12px 12px 1px; background: var(--primary-very-low);
  border-left: 5px solid var(--primary-low); color: var(--primary-high); }
.cooked aside.quote .title .avatar { margin-right: 6px; }
.cooked aside.quote .title + blockquote { margin-top: 0; }
.cooked aside.onebox { border: 5px solid var(--primary-low); padding: 12px; margin: 1em 0; }
.cooked aside.onebox .source { font-size: .87em; color: var(--primary-medium); }
.cooked aside.onebox .site-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.cooked aside.onebox .thumbnail { float: left; max-width: 90px; max-height: 120px; margin: 0 12px 8px 0;
  object-fit: contain; }
.cooked aside.onebox h3 { font-size: 1.1em; margin: 4px 0; }
.cooked .aspect-image { display: contents; }
.cooked details { background: var(--primary-very-low); padding: 6px 12px; margin: 8px 0; }
.cooked summary { cursor: pointer; }

/* --hide-authors: no avatar column */
.no-authors .topic-avatar, .no-authors .topic-list .posters { display: none; }
.no-authors .topic-map, .no-authors .small-action { margin-left: 0; }

@media (max-width: 800px) {
  .categories-and-latest { grid-template-columns: 1fr; }
  .topic-list .posters, .topic-list .views { display: none; }
  .topic-list .num { width: 56px; }
  .topic-avatar { width: 36px; }
  .topic-avatar .avatar { width: 36px !important; height: 36px !important; }
  .topic-map, .small-action { margin-left: 0; }
  .topic-meta-data { flex-wrap: wrap; }
}