/* ByteCode.News brand over PUDL. Any change must keep raised/sunken/flat distinct and meet
   WCAG 2.2 AA contrast; the theme workbench (/_specimen, dev profile) checks every scheme. */
:root {
  --accent: #9f3c1b;
  --accent-hover: #86331a;
}

[data-theme="dark"] {
  --accent: #f08a5d;
  --accent-hover: #f5a57f;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.article {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

.article-meta,
.article-tags {
  color: var(--text-muted);
}

.board-title {
  margin: 0;
  font-size: var(--text-md);
}

.popular {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.popular h2 {
  margin: 0;
}

/* The detail pane hosts the article windows, as in PUDL's article-reader sample. */
.board-stage {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.board-stage .md-back {
  margin: var(--space-3) var(--space-4) var(--space-1);
  align-self: flex-start;
}

.board-stage .win-host {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.win .article {
  padding: var(--space-2) var(--space-2) var(--space-6);
}

.comments {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment-list .comment-list {
  margin-left: var(--space-5);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border);
}

.comment {
  margin: var(--space-4) 0;
}

.comment-meta,
.comments-none,
.comment-deleted {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.tag-page {
  max-width: 72ch;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}

.tag-sort {
  margin: var(--space-3) 0 var(--space-5);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.launcher-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.error-page {
  padding: var(--space-6) var(--space-4);
}

/* The Site window (#23): the site's own pages. Hidden until pudl-windows.js removes it when the
   reader closed it before, so it doesn't flash on load. */
.bcn-site-closed .win[data-win="site"] {
  display: none;
}

.site-list {
  list-style: none;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* Entries sit side by side, each description on one line, so every page shows in the strip. */
.site-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 14rem;
  max-width: 22rem;
  min-width: 0;
}

.site-desc {
  color: var(--text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-page {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.login-form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

/* A field's help text, tied to it by aria-describedby. PUDL has .form-error but no hint. */
.form-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

/* The profile: a readable column like sign-in, a little wider for the dialog's text. */
.profile-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.profile-section {
  margin-top: var(--space-6);
}

.profile-section h2 {
  font-size: var(--text-lg);
}

/* A feature that isn't built yet (#44): a short, readable column. */
.placeholder-page {
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

/* Submitting a post (#36): a wider column for writing. */
.submit-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.submit-form { display: grid; gap: var(--space-2); }

.submit-tags { display: flex; gap: var(--space-2); }
.submit-tags .form-input { flex: 1; }

.form-optional { font-weight: 400; color: var(--text-muted); }

/* Text that's written as markup reads best in PUDL's monospace face, as in ui-nextjs. */
.form-mono { font-family: var(--mono); font-size: var(--text-sm); line-height: 1.6; }

/* The spam trap: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The emailed sign-in code (#48): set like a code, so six digits are plainly what's wanted. */
.form-input.otp-input {
  height: auto;
  padding: var(--space-3) var(--space-4);
  font-family: var(--mono);
  font-size: 1.75rem;
  letter-spacing: 0.4em;
  text-align: center;
}

/* The site's own feeds in the topbar (#54): the standard feed icon marks them as subscriptions,
   not navigation. The icon is decorative; the label says which feed. */
.feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feed-icon { flex: none; }

/* === Post and comment content (#35) =======================================
   Posts and comments are Markdown the API renders (streampack's
   MarkdownRenderingService: flexmark with tables, task lists, strikethrough and
   subscript, footnotes, asides, admonitions and factoid wiki links). PUDL styles
   an application, not prose, so the text is set here from PUDL's tokens, and
   admonitions borrow PUDL's notices. /_specimen shows every construct as the
   API renders it. */
:is(.article-body, .comment-body) {
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-wrap: break-word;
}

:is(.article-body, .comment-body) :is(p, ul, ol, blockquote, pre, table, aside, .adm-block) {
  margin: 0 0 var(--space-4);
}

:is(.article-body, .comment-body) > :last-child,
:is(.article-body, .comment-body) :is(blockquote, aside, li, .adm-body) > :last-child {
  margin-bottom: 0;
}

:is(.article-body, .comment-body) :is(h2, h3, h4, h5, h6) {
  margin: var(--space-6) 0 var(--space-3);
  line-height: 1.3;
  font-weight: 700;
}
:is(.article-body, .comment-body) h2 { font-size: var(--text-2xl); }
:is(.article-body, .comment-body) h3 { font-size: var(--text-xl); }
:is(.article-body, .comment-body) h4 { font-size: var(--text-lg); }
:is(.article-body, .comment-body) h5 { font-size: var(--text-base); }
:is(.article-body, .comment-body) h6 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

:is(.article-body, .comment-body) a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:is(.article-body, .comment-body) a:hover { text-decoration-thickness: 2px; }

/* Inline code, and code blocks like PUDL's pre.code: monospace, flat, scrolling. */
:is(.article-body, .comment-body) code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-alt);
  overflow-wrap: anywhere;
}
:is(.article-body, .comment-body) pre {
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font: var(--text-sm)/1.55 var(--mono);
  tab-size: 4;
}
:is(.article-body, .comment-body) pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: normal;
}

:is(.article-body, .comment-body) blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--border);
  color: var(--text-muted);
}

:is(.article-body, .comment-body) hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--border);
}

:is(.article-body, .comment-body) :is(ul, ol) { padding-inline-start: 1.5em; }
:is(.article-body, .comment-body) :is(ul, ol) :is(ul, ol) { margin: var(--space-1) 0 0; }
:is(.article-body, .comment-body) li + li { margin-top: var(--space-1); }

/* Task lists: the box is the marker. */
:is(.article-body, .comment-body) li.task-list-item {
  list-style: none;
  margin-inline-start: -1.5em;
}
:is(.article-body, .comment-body) .task-list-item-checkbox {
  margin: 0 0.4em 0 0;
  vertical-align: -0.1em;
  accent-color: var(--accent);
}

/* Tables: ruled like PUDL's data table, and scrolling inside the text when wide. */
:is(.article-body, .comment-body) table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-md);
}
:is(.article-body, .comment-body) :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: start;
  vertical-align: top;
}
:is(.article-body, .comment-body) :is(th, td)[align="center"] { text-align: center; }
:is(.article-body, .comment-body) :is(th, td)[align="right"] { text-align: end; }
:is(.article-body, .comment-body) thead th {
  background: var(--surface-alt);
  font-weight: 600;
}

:is(.article-body, .comment-body) img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* An aside: a note set off from the main text. */
:is(.article-body, .comment-body) aside {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  font-size: var(--text-md);
}

/* Footnotes: small references, and the notes below the text. */
:is(.article-body, .comment-body) sup { line-height: 0; }
:is(.article-body, .comment-body) a.footnote-ref { text-decoration: none; padding: 0 0.1em; }
:is(.article-body, .comment-body) .footnotes {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
:is(.article-body, .comment-body) .footnotes hr { margin: 0 0 var(--space-3); }
:is(.article-body, .comment-body) .footnotes li p { display: inline; }
:is(.article-body, .comment-body) a.footnote-backref { margin-inline-start: 0.3em; }

/* Admonitions, as PUDL notices: a coloured edge and the glyph of their kind. The
   renderer puts an icon sprite (.adm-hidden) at the top of every post and points
   each icon into it, but the API's sanitizer strips those references, so the
   sprite is hidden and PUDL's glyphs stand in for the empty icons. Collapsible
   ones (??? and ???+) stay open, as on bytecode.news. */
:is(.article-body, .comment-body) .adm-hidden,
:is(.article-body, .comment-body) .adm-icon { display: none; }
:is(.article-body, .comment-body) .adm-block {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  font-size: var(--text-md);
}
:is(.article-body, .comment-body) .adm-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
  font-weight: 700;
}
:is(.article-body, .comment-body) .adm-heading::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: var(--glyph-info) center / contain no-repeat;
  mask: var(--glyph-info) center / contain no-repeat;
}
:is(.article-body, .comment-body) .adm-body {
  display: block;
  padding: var(--space-1) var(--space-4) var(--space-3);
}
/* Each kind's colour and glyph, written out: brand.css may only set PUDL's theme tokens. */
.article-body :is(.adm-tip, .adm-hint, .adm-success, .adm-faq, .adm-question), .comment-body :is(.adm-tip, .adm-hint, .adm-success, .adm-faq, .adm-question) {
  border-color: color-mix(in srgb, var(--positive) 45%, var(--border));
  border-inline-start-color: var(--positive);
  background: color-mix(in srgb, var(--positive) 9%, var(--surface));
}
.article-body :is(.adm-tip, .adm-hint, .adm-success, .adm-faq, .adm-question) .adm-heading::before, .comment-body :is(.adm-tip, .adm-hint, .adm-success, .adm-faq, .adm-question) .adm-heading::before {
  background: var(--positive);
  -webkit-mask-image: var(--glyph-check);
  mask-image: var(--glyph-check);
}
.article-body :is(.adm-warning, .adm-caution, .adm-attention), .comment-body :is(.adm-warning, .adm-caution, .adm-attention) {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  border-inline-start-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
}
.article-body :is(.adm-warning, .adm-caution, .adm-attention) .adm-heading::before, .comment-body :is(.adm-warning, .adm-caution, .adm-attention) .adm-heading::before {
  background: var(--warn);
  -webkit-mask-image: var(--glyph-warning);
  mask-image: var(--glyph-warning);
}
.article-body :is(.adm-danger, .adm-error, .adm-fail, .adm-failure, .adm-bug), .comment-body :is(.adm-danger, .adm-error, .adm-fail, .adm-failure, .adm-bug) {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  border-inline-start-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--surface));
}
.article-body :is(.adm-danger, .adm-error, .adm-fail, .adm-failure, .adm-bug) .adm-heading::before, .comment-body :is(.adm-danger, .adm-error, .adm-fail, .adm-failure, .adm-bug) .adm-heading::before {
  background: var(--danger);
  -webkit-mask-image: var(--glyph-stop);
  mask-image: var(--glyph-stop);
}
.article-body :is(.adm-example, .adm-quote, .adm-abstract), .comment-body :is(.adm-example, .adm-quote, .adm-abstract) {
  border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border));
  border-inline-start-color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 9%, var(--surface));
}
.article-body :is(.adm-example, .adm-quote, .adm-abstract) .adm-heading::before, .comment-body :is(.adm-example, .adm-quote, .adm-abstract) .adm-heading::before {
  background: var(--text-muted);
}

/* The specimen's post: a readable column, as on an article page. */
.specimen-post { max-width: 46rem; }

/* The knowledge base (#34): the list is PUDL's data table, a factoid its attributes. */
.factoids-page {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.factoids-summary, .factoid-meta { color: var(--text-muted); font-size: var(--text-sm); }
.factoids-intro { padding: var(--space-5); max-width: 40rem; }
.factoids-intro h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.factoid-attributes { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-5); margin: var(--space-5) 0; }
.factoid-attributes dt { font-weight: 600; color: var(--text-muted); font-size: var(--text-sm); }
.factoid-attributes dd { margin: 0; overflow-wrap: anywhere; line-height: 1.6; }
.factoid-attributes dd .chip { margin-inline-end: var(--space-1); }
@media (max-width: 40rem) {
  .factoid-attributes { grid-template-columns: 1fr; gap: var(--space-1); }
  .factoid-attributes dd { margin-bottom: var(--space-3); }
}

/* The RSS Reader (#64): items as a plain list, each linking out. */
.rss-latest, .rss-feed { padding: var(--space-4) var(--space-5); }
.rss-latest h2 { font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.rss-page { max-width: 48rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.rss-items { list-style: none; margin: 0; padding: 0; }
.rss-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.rss-item:last-child { border-bottom: 0; }
.rss-item-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.rss-item-meta, .rss-feed-meta, .rss-none { color: var(--text-muted); font-size: var(--text-sm); }

/* Channel logs (#65): a day of lines, time and sender then what was said. */
.logs-intro, .log-day-window { padding: var(--space-4) var(--space-5); }
.logs-intro { max-width: 40rem; }
.logs-intro h2 { font-size: var(--text-xl); margin: 0 0 var(--space-2); }
.logs-page { max-width: 60rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.log-days { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.log-day { color: var(--text-muted); }
.log-lines { list-style: none; margin: 0; padding: 0; font: var(--text-sm)/1.55 var(--mono); }
.log-lines li { padding: 1px 0; overflow-wrap: anywhere; }
.log-time { color: var(--text-muted); text-decoration: none; }
.log-time:hover { text-decoration: underline; }
/* A line opened by its permalink (#72). */
.log-lines li { scroll-margin-top: var(--space-6); }
.log-lines li:target { background: color-mix(in srgb, var(--accent) 16%, transparent); outline: 1px solid var(--accent); }
.log-content a { color: var(--accent); overflow-wrap: anywhere; }
/* Nicks in colour, the same every time (#72): PUDL's syntax colours, checked in both themes. */
.nick-0 { color: var(--syntax-keyword); }
.nick-1 { color: var(--syntax-string); }
.nick-2 { color: var(--syntax-number); }
.nick-3 { color: var(--syntax-name); }
.nick-4 { color: var(--syntax-tag); }
.nick-5 { color: var(--syntax-attr); }
.nick-6 { color: var(--syntax-error); }
.log-sender { font-weight: 700; }
.log-outbound .log-content, .log-system .log-content { color: var(--text-muted); }
.log-system .log-content { font-style: italic; }
.log-none { color: var(--text-muted); }

/* Tags as a board (#66): the cloud on the stage, a tag's posts in its window. */
.tag-stage { padding: var(--space-4) var(--space-5); }
.tag-posts { padding: var(--space-4) var(--space-5); }
.tag-post-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.tag-post-list li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.tag-post-list li:last-child { border-bottom: 0; }
.tag-post-list a { font-weight: 600; }
.tag-post-list time, .tag-posts-none { display: block; color: var(--text-muted); font-size: var(--text-sm); }

/* The karma leaderboard (#67): highest and lowest side by side, stacked when narrow. */
.karma-page { max-width: 64rem; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.karma-intro { color: var(--text-muted); }
.karma-limit { margin: var(--space-4) 0; }
.karma-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-5); align-items: start; }
.karma-boards caption { text-align: start; font-weight: 700; padding: 0 0 var(--space-2); }
.karma-window { display: grid; gap: var(--space-4); padding: var(--space-3) var(--space-4); }
.karma-window caption { text-align: start; font-weight: 700; padding: 0 0 var(--space-2); }
.karma-none { color: var(--text-muted); }