/* Colors come from the forum's "Algorand Light Mode" scheme. */
:root {
  --primary: #000;
  --primary-high: #333;
  --primary-medium: #666;
  --primary-low-mid: #999;
  --primary-low: #e5e7e9;
  --primary-very-low: #f5f6f7;
  --secondary: #fff;
  --tertiary: #0f8b8d;
  --tertiary-low: #e3f7f6;
  --highlight: #fff8d6;
  --success: #01a774;
  --love: #e5484d;
  --danger: #ff7f48;
  --banner-bg: #17cac6;
  --banner-fg: #001b1a;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #e8eaed;
    --primary-high: #c9cdd2;
    --primary-medium: #9aa0a6;
    --primary-low-mid: #6b7177;
    --primary-low: #33373c;
    --primary-very-low: #1f2226;
    --secondary: #141619;
    --tertiary: #3fd9d5;
    --tertiary-low: #10302f;
    --highlight: #3a3418;
    --success: #2fd69a;
    --love: #ff6b70;
    --banner-bg: #0f5f5d;
    --banner-fg: #e6fffe;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--secondary); color: var(--primary); font: 16px/1.5 var(--font); min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
a { color: var(--tertiary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1110px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.2rem 0 .6rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .6rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--primary-low); background: var(--secondary); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo img { display: block; height: 36px; width: auto; }
.logo strong { color: var(--primary); font-size: 1.3rem; }
.header-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.header-nav a { color: var(--primary-high); font-weight: 500; }
.archive-banner { background: var(--banner-bg); color: var(--banner-fg); font-size: .9rem; padding: 8px 0; }
.site-footer { border-top: 1px solid var(--primary-low); margin-top: 48px; padding: 24px 0; color: var(--primary-medium); font-size: .85rem; }
.footer-nav { margin-top: 8px; }
.footer-nav a { color: var(--primary-medium); }

/* Badges */
.badge-category { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-high); font-size: .85rem; margin-right: 10px; white-space: nowrap; }
.badge-category::before { content: ""; width: 10px; height: 10px; background: var(--cat, #999); border-radius: 2px; flex: none; }
.tags { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tag { color: var(--primary-medium); font-size: .85rem; }
.tag::before { content: "#"; opacity: .6; }
.topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 4px; }
.topic-status { color: var(--primary-medium); font-size: .85rem; margin-left: 10px; }
.ico { margin-right: 6px; font-size: .85em; }
.ico.solved { color: var(--success); }

/* Topic and category lists */
table { border-collapse: collapse; width: 100%; }
.topic-list, .category-list { margin: 8px 0; }
.topic-list th, .category-list th { text-align: left; font-weight: 500; color: var(--primary-medium); font-size: .85rem; border-bottom: 3px solid var(--primary-low); padding: 8px; }
.topic-list td, .category-list td { border-bottom: 1px solid var(--primary-low); padding: 12px 8px; vertical-align: top; }
.num { text-align: center; width: 80px; color: var(--primary-medium); font-size: .95rem; }
.topic-list th.num, .category-list th.num { text-align: center; }
.mobile-only { display: none; }
.topic-list td.age { white-space: nowrap; width: 110px; }
.topic-list .main-link-inner { display: flex; gap: 10px; align-items: flex-start; }
.title-wrap { min-width: 0; }
.topic-list .title { color: var(--primary); font-size: 1.05rem; font-weight: 500; overflow-wrap: anywhere; }
.topic-list .title:visited { color: var(--primary-high); }
.category-list .category { border-left: 5px solid var(--cat); padding-left: 14px; }
.category-name { color: var(--primary); font-weight: 600; font-size: 1.1rem; }
.category-description { color: var(--primary-high); margin: 4px 0 6px; font-size: .95rem; }
.subcategories { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 8px; }
.list-header { border-left: 5px solid var(--cat, transparent); padding-left: 14px; margin: 16px 0; }
.list-header h1 { margin-top: .2rem; }
.more { text-align: right; }
.pager { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 24px 0; color: var(--primary-medium); }
.empty { color: var(--primary-medium); }
.tag-cloud { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tag-cloud .tag { font-size: 1rem; }
.count { color: var(--primary-low-mid); font-size: .85rem; }

/* Avatars */
.avatar { border-radius: 50%; background: var(--primary-low); object-fit: cover; flex: none; }
.avatar.small { margin-top: 2px; }

/* Topic page */
.topic-header { margin-bottom: 12px; }
.topic-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 12px 0; border-top: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low); margin-bottom: 8px; font-size: .95rem; }
.topic-stats div { display: flex; flex-direction: column; }
.topic-stats span { color: var(--primary-medium); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.post { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--primary-low); scroll-margin-top: 80px; }
.post:target { background: var(--highlight); box-shadow: -8px 0 0 var(--highlight), 8px 0 0 var(--highlight); }
.post.is-solution { border-left: 3px solid var(--success); padding-left: 10px; }
.post-main { min-width: 0; flex: 1; }
.post-meta { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.names { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.names .username { font-weight: 600; color: var(--primary); }
.names .full-name, .names .user-title { color: var(--primary-medium); font-size: .9rem; }
.staff-badge { font-size: .7rem; text-transform: uppercase; background: var(--tertiary-low); color: var(--tertiary); padding: 1px 6px; border-radius: 10px; }
.post-date { color: var(--primary-medium); font-size: .85rem; }
.reply-to { display: inline-block; font-size: .85rem; color: var(--primary-medium); margin-top: 2px; }
.post-footer { display: flex; justify-content: flex-end; gap: 16px; margin-top: 8px; color: var(--primary-medium); font-size: .9rem; }
.likes { color: var(--love); }
.solution { color: var(--success); font-weight: 600; }
.accepted-answer { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--success); border-radius: var(--radius); color: var(--primary-high); }
.moderator-action .cooked { background: var(--primary-very-low); padding: 4px 12px; border-radius: var(--radius); }

/* Post content (Discourse "cooked" HTML) */
.cooked { overflow-wrap: anywhere; margin-top: 6px; }
.cooked img { max-width: 100%; height: auto; }
.cooked img.emoji { width: 20px; height: 20px; vertical-align: text-bottom; }
.cooked img.emoji.only-emoji { width: 32px; height: 32px; }
.cooked h1 { font-size: 1.6rem; } .cooked h2 { font-size: 1.35rem; } .cooked h3 { font-size: 1.15rem; }
.cooked blockquote { margin: 1em 0; padding: 10px 14px; 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 code { font-family: var(--mono); font-size: .9em; background: var(--primary-very-low); padding: 2px 4px; border-radius: 3px; }
.cooked pre { background: var(--primary-very-low); padding: 12px; border-radius: var(--radius); overflow-x: auto; max-height: 600px; }
.cooked pre code { background: none; padding: 0; white-space: pre; overflow-wrap: normal; }
.cooked table { display: block; overflow-x: auto; margin: 1em 0; }
.cooked th, .cooked td { border-bottom: 1px solid var(--primary-low); padding: 6px 10px; text-align: left; overflow-wrap: normal; word-break: normal; min-width: 6em; }
.cooked th { border-bottom-width: 2px; }
.cooked hr { border: 0; border-top: 1px solid var(--primary-low); }
.cooked a.mention, .cooked a.mention-group, .cooked span.mention { background: var(--primary-very-low); padding: 0 4px; border-radius: 8px; font-size: .95em; color: var(--primary-high); }
.cooked a[data-unlinked] { color: inherit; }
.cooked .hashtag-cooked { background: var(--primary-very-low); padding: 0 4px; border-radius: 4px; }
.cooked .hashtag-cooked svg, .cooked .hashtag-icon-placeholder { display: none; }
.cooked .lightbox-wrapper { display: inline-block; max-width: 100%; }
.cooked .lightbox-wrapper .meta { display: none; }
.cooked aside.quote { margin: 1em 0; }
.cooked aside.quote .title { background: var(--primary-very-low); border-left: 5px solid var(--primary-low); padding: 10px 14px 0; color: var(--primary-high); font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.cooked aside.quote .title img.avatar { width: 20px; height: 20px; }
.cooked aside.quote .quote-controls { display: none; }
.cooked aside.quote blockquote { margin-top: 0; }
.cooked aside.onebox { border: 1px solid var(--primary-low); border-radius: var(--radius); padding: 12px 14px; margin: 1em 0; overflow: hidden; }
.cooked aside.onebox header { font-size: .85rem; color: var(--primary-medium); margin-bottom: 6px; }
.cooked aside.onebox header img.site-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.cooked aside.onebox h3, .cooked aside.onebox h4 { margin: .2em 0 .4em; font-size: 1.05rem; }
.cooked aside.onebox img.thumbnail, .cooked aside.onebox .aspect-image img { float: right; max-width: 120px; max-height: 120px; margin: 0 0 8px 12px; object-fit: cover; }
.cooked aside.onebox .onebox-body::after { content: ""; display: table; clear: both; }
.cooked aside.onebox pre { max-height: 300px; }
.cooked .onebox-avatar, .cooked .onebox-avatar-inline { width: 40px; height: 40px; border-radius: 50%; float: left; margin-right: 10px; }
.cooked .github-icon-container, .cooked .github-info svg { display: none; }
.cooked .lazy-video-container { position: relative; max-width: 690px; }
.cooked .lazy-video-container a.video-thumbnail { display: block; position: relative; }
.cooked .lazy-video-container a.video-thumbnail::after { content: "▶"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.cooked .video-placeholder-container { aspect-ratio: 16/9; max-width: 690px; background: #000; }
.cooked video { max-width: 100%; }
.cooked iframe { max-width: 100%; }
.cooked iframe.youtube-onebox { width: 100%; max-width: 640px; height: auto; aspect-ratio: 16/9; }
.cooked img[src=""] { display: none; }
.cooked details { background: var(--primary-very-low); padding: 8px 12px; border-radius: var(--radius); margin: 1em 0; }
.cooked summary { cursor: pointer; font-weight: 500; }
.cooked .spoiler, .cooked .spoiled { filter: blur(5px); transition: filter .2s; }
.cooked .spoiler:hover, .cooked .spoiled:hover, .cooked .spoiler:focus, .cooked .spoiled:focus { filter: none; outline: none; }
.cooked .spoiler, .cooked .spoiled { cursor: pointer; }
.cooked a.attachment::before { content: "📎 "; }
.cooked .d-wrap, .cooked .discourse-local-date { white-space: nowrap; }
.cooked .footnotes-sep { margin-top: 2em; }
.cooked .math { overflow-x: auto; }
.cooked span.math { display: inline-block; max-width: 100%; vertical-align: bottom; overflow-y: hidden; }

/* Polls (rendered as static results) */
.cooked .poll { border: 1px solid var(--primary-low); border-radius: var(--radius); padding: 12px 16px; margin: 1em 0; }
.cooked .poll ul, .cooked .poll ol { list-style: none; padding: 0; margin: 0; }
.cooked .poll li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; margin: 6px 0; border-radius: 4px; background: linear-gradient(90deg, var(--tertiary-low) var(--pct, 0%), var(--primary-very-low) var(--pct, 0%)); }
.cooked .poll-count { color: var(--primary-medium); font-size: .85rem; white-space: nowrap; }
.cooked .poll-info { color: var(--primary-medium); font-size: .9rem; }
.cooked .poll-info p { margin: 8px 0 0; }
.cooked .poll-buttons { display: none; }

/* User pages */
.user-header { display: flex; gap: 20px; align-items: center; margin: 24px 0; flex-wrap: wrap; }
.user-header h1 { margin: 0; }
.user-header .full-name { font-size: 1.1rem; color: var(--primary-high); }
.user-header .user-title, .user-stats { color: var(--primary-medium); }
.activity { list-style: none; padding: 0; }
.activity li { padding: 6px 0; border-bottom: 1px solid var(--primary-low); display: flex; justify-content: space-between; gap: 12px; }
.activity time { color: var(--primary-medium); white-space: nowrap; font-size: .9rem; }

.not-found { text-align: center; padding: 60px 0; }

/* Search (Pagefind UI) */
#search { --pagefind-ui-primary: var(--tertiary); --pagefind-ui-text: var(--primary); --pagefind-ui-background: var(--secondary); --pagefind-ui-border: var(--primary-low); --pagefind-ui-tag: var(--primary-very-low); --pagefind-ui-font: var(--font); margin-bottom: 40px; }
#search .pagefind-ui__search-input::placeholder { color: var(--primary-medium); opacity: 1; }
#search .pagefind-ui__search-clear { color: var(--primary-medium); }
#search .pagefind-ui__search-clear:hover { color: var(--primary); }
#search mark { background: var(--tertiary-low); color: inherit; border-radius: 2px; padding: 0 1px; }
#search .pagefind-ui__result-link { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  /* Filters stack above the results here; Pagefind's 48px drawer gap leaves a big hole between them */
  #search .pagefind-ui__drawer { row-gap: 0; }
  #search .pagefind-ui__filter-panel { margin-top: 4px; }
  #search .pagefind-ui__results-area { margin-top: 8px; }
}

@media (max-width: 700px) {
  h1 { font-size: 1.4rem; }
  .topic-list thead { display: none; }
  .topic-list tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--primary-low); padding: 10px 0; }
  .topic-list td { border: 0; padding: 2px 4px; }
  .topic-list td.main-link { grid-column: 1 / -1; }
  .mobile-only { display: inline; }
  .topic-list td.num { width: auto; text-align: left; font-size: .8rem; }
  .topic-list td.num:nth-child(3) { display: none; }
  .topic-list td.age { text-align: right; }
  .post { gap: 10px; }
  .post-avatar .avatar { width: 32px; height: 32px; }
  .header-nav { gap: 12px; font-size: .95rem; }
  .logo img { height: 30px; }
  .num { width: 56px; }
}

/* References to topics that aren't in the archive */
.cooked .unavailable { color: var(--primary-medium); }
.cooked span.unavailable[title] { text-decoration: underline dotted; text-underline-offset: 3px; }
.cooked .unavailable-quote blockquote { color: var(--primary-medium); font-style: italic; }

/* The dark logo PNG has far more transparent padding than the light one. Scale and shift it so the
   wordmark matches the light logo's width, left edge and baseline. Kept last so it beats .logo img above. */
@media (prefers-color-scheme: dark) {
  .logo img { height: 48.7px; margin: -8.5px 0 -4.2px -9.2px; }
}
@media (max-width: 700px) and (prefers-color-scheme: dark) {
  .logo img { height: 40.6px; margin: -7.0px 0 -3.5px -7.7px; }
}