:root {
  font-family: system-ui, sans-serif;
  color-scheme: light dark;
  --content-max: 80ch;
  --page-gutter: 2em;
}
* { box-sizing: border-box; }
body { margin:0; line-height:1.55; }
header, main, footer {
  width:min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  margin-inline:auto;
  padding-block:1rem;
}
header { display:flex; gap:1rem 1.5rem; align-items:center; border-bottom:1px solid #8885; }
.brand { font-size:1.35rem; font-weight:700; text-decoration:none; text-transform:none; }
nav { display:flex; gap:.25rem; }
main { min-height:70vh; overflow-wrap:anywhere; }
a { text-decoration:none; text-underline-offset:.15em; }
.hero { padding:2rem 0 1rem; }
.recent { padding-left:1.5rem; }
.recent li { margin:.4rem 0; }
.recent time { display:inline-block; min-width:11rem; opacity:.7; font-variant-numeric:tabular-nums; }
article { max-width:100%; }
table { border-collapse:collapse; width:100%; }
th, td { padding:.45rem .6rem; border-bottom:1px solid #8885; text-align:left; }
table thead th { cursor:pointer; user-select:none; }
table thead th[data-dir="asc"]::after { content:" ↑"; font-size:.8em; }
table thead th[data-dir="desc"]::after { content:" ↓"; font-size:.8em; }
footer { border-top:1px solid #8885; opacity:.7; }
.blog-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; margin-top:2rem; padding-top:1rem; border-top:1px solid #8885; }
.blog-nav .newer { text-align:right; }

/* 8thWiki additions layered on PureCSS */
.site-header {
  width:min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  max-width:none;
  margin-inline:auto;
  display:block;
}
.header-top { display:flex; flex-wrap:nowrap; align-items:center; gap:1rem; }
.header-top .brand { min-width:0; }
.site-header nav { display:flex; flex-wrap:wrap; align-items:center; margin-top:.35rem; }
.site-header .pure-menu-link { display:inline-block; }
.auth { margin-left:auto; display:flex; flex-wrap:nowrap; align-items:center; gap:.75rem; white-space:nowrap; }
.auth .auth-link { padding:.5em 1em; }
.logout-form { margin-left:.25rem; }
.editor { max-width:100%; }
.editor input[type=text], .editor input:not([type]), .editor input[type=password], .editor textarea, .editor select { width:100%; max-width:100%; }
.pure-table { width:100%; }
.recent-date { margin:1.25rem 0; }
.recent-date h3 { margin-bottom:.35rem; }
.recent-date .recent { margin-top:0; }
.delete-form { margin-top:1.5rem; padding-top:1rem; border-top:1px solid #8885; }
.delete-button { background:#b33; color:#fff; }

@media (max-width:48em) {
  :root { --page-gutter: 2em; }
  header, main, footer, .site-header { width:calc(100% - (2 * var(--page-gutter))); }
  .site-header nav { margin:.35rem 0 0; }
  .header-top { width:100%; }
  .auth { margin-left:auto; }
  .pure-table { font-size:.9rem; }
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .blog-nav { grid-template-columns:1fr; }
  .blog-nav .newer { text-align:left; }
}

/* Per-user appearance preference. System remains the default. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.category { margin-right:.35rem; }
.inline { display:inline; }
.hashtag-link { text-decoration:none; padding-left:.35em; }
.hashtag, .page-tag { border-radius:.25em; padding:0 .18em; background:color-mix(in srgb, currentColor 10%, transparent); }

/* Markdown editor / preview */
.markdown-editor { border:1px solid #8885; border-radius:.25rem; overflow:hidden; margin:.25rem 0 1rem; }
.editor-tabs { display:flex; align-items:center; gap:.25rem; padding:.45rem; border-bottom:1px solid #8885; background:color-mix(in srgb, currentColor 4%, transparent); }
.editor-tabs .pure-button { background:transparent; }
.editor-tabs .pure-button.active { font-weight:700; border-bottom:2px solid currentColor; }
.editor-help { margin-left:auto; }
.editor-pane { padding:.75rem; }
.editor-pane textarea { box-sizing:border-box; min-height:24rem; width:100%; resize:vertical; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.editor-pane textarea.drag-active { outline:3px dashed currentColor; outline-offset:-4px; }
.editor-hint { margin:.4rem 0 0; opacity:.72; font-size:.9rem; }
.editor-status { min-height:1.4em; font-size:.9rem; }
.editor-status.error { font-weight:600; }
.markdown-preview { min-height:24rem; overflow:auto; }
.markdown-preview img, article img { max-width:100%; height:auto; }
.preview-placeholder { opacity:.65; }

.site-logo { max-height: 2.25rem; max-width: 10rem; vertical-align: middle; margin-right: .5rem; }
.brand { display: inline-flex; align-items: center; gap: .35rem; }
.logo-drop { border: 2px dashed #999; border-radius: .4rem; padding: 1.5rem; margin: .5rem 0; cursor: copy; }
.namespace-header, .namespace-footer { margin: 1rem 0; }

.pinned-panel {
  margin: 0 0 1.25rem 0;
  padding: .8rem 1rem;
  border: 1px solid #ddd;
  border-radius: .35rem;
  background: rgba(127,127,127,.06);
}
.pinned-panel h2 { margin: 0 0 .5rem 0; font-size: 1.1rem; }
.pinned-panel ul { margin: 0; padding-left: 1.3rem; }
.link-button {
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.upgrade-dialog { max-width:34rem; border:1px solid #8888; border-radius:.5rem; padding:1.25rem 1.5rem; box-shadow:0 .5rem 2rem #0005; }
.upgrade-dialog::backdrop { background:#0006; }
.site-blurb > :first-child { margin-top:0; }
.site-blurb > :last-child { margin-bottom:0; }

/* Collapsible page comments. */
.comments-fold {
  margin:1.25rem 0;
  border-top:1px solid #8885;
  padding-top:.75rem;
}
.comments-fold > summary {
  cursor:pointer;
  font-size:1.25rem;
  font-weight:650;
  list-style-position:outside;
  padding:.2rem 0;
}
.comment-fold-body { padding-top:.75rem; }
.comment { margin:1rem 0; padding:0 0 1rem; border-bottom:1px solid #8884; }
.comment:last-child { border-bottom:0; }

/* Admin notification immediately below the main menu. */
.admin-comment-notice {
  width:min(var(--content-max), calc(100% - (2 * var(--page-gutter))));
  margin:.75rem auto 0;
  padding:.65rem .8rem;
  border:1px solid #8886;
  border-radius:.35rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  background:color-mix(in srgb, currentColor 5%, transparent);
}
.admin-comment-notice .pure-button { flex:none; }
.admin-review-comment { padding:1rem 0; border-bottom:1px solid #8885; }

@media (max-width:32em) {
  .admin-comment-notice { align-items:flex-start; flex-direction:column; }
  .editor-tabs { flex-wrap:wrap; }
  .editor-help { margin-left:0; width:100%; }
}

.search-query-row {
  margin-bottom: .75rem;
}
.search-date-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem .75rem;
}
.search-text-control input {
  min-width: min(36rem, 100%);
}
@media (max-width: 40rem) {
  .search-text-control input { min-width: 0; width: 100%; }
  .search-date-row { display: block; }
  .search-date-row label { display: block; margin-bottom: .5rem; }
}

.tags-fold {
  margin-top:1.5em;
}
.tags-fold > summary {
  cursor:pointer;
  font-weight:600;
}
.tag-fold-body {
  padding-top:.5em;
}

/* Responsive navigation */
.menu-toggle { display:none; margin-left:auto; font-size:1.2rem; line-height:1; }
.mobile-auth { display:none; }

@media (max-width:60em) {
  .desktop-auth { display:none; }
  .menu-toggle { display:inline-block; }
  .site-header nav {
    display:none;
    width:100%;
    margin-top:.5rem;
    flex-direction:column;
    align-items:stretch;
    border-top:1px solid #8885;
    padding-top:.35rem;
  }
  .site-header nav.menu-open { display:flex; }
  .site-header nav .pure-menu-link { display:block; width:100%; box-sizing:border-box; }
  .mobile-auth { display:block; padding:.5em 1em; border-top:1px solid #8885; margin-top:.25rem; }
  .mobile-auth form { display:block; margin:0; }
  .mobile-auth .pure-button { width:100%; }
}


/* Compact, expandable access log. */
.access-log-table { width:100%; table-layout:auto; }
.access-log-table .access-time,
.access-log-table .access-user,
.access-log-table .access-ip { white-space:nowrap; width:1%; }
.access-log-table .access-path { width:auto; overflow-wrap:anywhere; }
.access-log-row { cursor:pointer; }
.access-log-row:hover { background:rgba(127,127,127,.08); }
.access-log-row:focus { outline:2px solid currentColor; outline-offset:-2px; }
.access-log-detail { margin-top:.65rem; padding:.6rem .75rem; border-left:3px solid #8886; background:rgba(127,127,127,.05); }
.access-log-detail dl { margin:0; display:grid; grid-template-columns:max-content 1fr; gap:.25rem .75rem; }
.access-log-detail dt { font-weight:600; }
.access-log-detail dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:40em) {
  .access-log-table { font-size:.92rem; }
  .access-log-table .access-user { white-space:normal; }
  .access-log-detail dl { grid-template-columns:1fr; }
  .access-log-detail dd { margin:0 0 .4rem 0; }
}

/* Anonymous-comment honeypot: visually absent but left in the DOM for simple bots. */
.comment-hp { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.table-pager { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:.75rem 0 1.25rem; }
.table-pager .table-page-status { min-width:11rem; text-align:center; }
.table-pager label { display:inline-flex; align-items:center; gap:.35rem; margin-left:auto; }
@media (max-width: 40em) { .table-pager label { margin-left:0; } }


/* Compact, expandable IP blacklist. */
.blacklist-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin:.75rem 0; }
.blacklist-rows-form { display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.blacklist-page-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; min-width:0; }
.blacklist-page-nav { display:flex; align-items:center; gap:.35rem; }
.blacklist-table { table-layout:auto; }
.blacklist-table th:first-child, .blacklist-table td:first-child { white-space:nowrap; width:1%; }
.blacklist-table th:last-child, .blacklist-table td.blacklist-action { white-space:nowrap; width:1%; }
.blacklist-table td:nth-child(2) { overflow-wrap:anywhere; }
.blacklist-expand { text-align:left; }
.blacklist-reason { max-width:100%; overflow-wrap:anywhere; }
.blacklist-detail-row td { padding-top:0; }
.blacklist-detail { margin:.2rem 0 .45rem; padding:.55rem .7rem; border-left:3px solid #8886; background:rgba(127,127,127,.05); display:grid; grid-template-columns:max-content 1fr; gap:.2rem .75rem; }
.blacklist-detail dt { font-weight:600; }
.blacklist-detail dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:40em) {
  .blacklist-page-controls { flex-basis:100%; }
  .blacklist-detail { grid-template-columns:1fr; }
  .blacklist-detail dd { margin:0 0 .35rem; }
}
.search-query-row { display:flex; flex-wrap:wrap; align-items:end; gap:.5rem 1rem; }
.search-options { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:.25rem 0 .75rem; }
.search-inline-options { margin:0; align-items:center; }
.option-check { display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.option-check input[type="checkbox"] { width:auto; min-width:0; flex:none; }