/* The issue board: pages on top of the landing page's style.css (colours, fonts, buttons, form fields). */
.board { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(ellipse 70% 40% at 50% 0, rgba(138, 92, 240, .14), transparent), var(--ink); }
.board-top { position: sticky; top: 0; z-index: 10; background: rgba(20, 11, 34, .96); box-shadow: 0 1px 0 rgba(214, 162, 62, .45); }
.board-top-inner { max-width: 1000px; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.board-nav { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.board-nav a, .board-nav .link-btn { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.board-nav a:hover, .board-nav .link-btn:hover { color: var(--gold-hi); }
.board-main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 2rem 16px 4rem; }
.board-foot { padding: 2rem 16px; text-align: center; color: var(--text-dim); font-size: 1rem; border-top: 1px solid rgba(214, 162, 62, .2); }
.board-foot p { margin: .3rem 0; }
.board h1 { margin: 0 0 .4rem; font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--gold-hi); line-height: 1.2; overflow-wrap: anywhere; }
.board h2 { margin: 2rem 0 .8rem; font-family: var(--display); font-size: 1.15rem; color: var(--gold-hi); letter-spacing: .04em; }
.inline { display: inline; }
.crumbs { margin: 0 0 1rem; font-size: 1rem; color: var(--text-dim); }
.crumbs a { color: var(--gold); }

.flash { margin: 0 0 1.4rem; padding: .8rem 1.1rem; border-radius: 3px; border: 1px solid rgba(214, 162, 62, .5); background: rgba(214, 162, 62, .1); }
.flash-bad { border-color: #e0705a; background: rgba(224, 112, 90, .12); }
.flash-info { border-color: rgba(201, 168, 255, .5); background: rgba(138, 92, 240, .12); }

.panel, .issue .post, .admin, .reply {
  border-radius: 2px; background: linear-gradient(180deg, #24160e, #170d08);
  box-shadow: 0 0 0 1px #0d0703, 0 0 0 2px rgba(180, 132, 44, .45), 0 10px 22px rgba(0, 0, 0, .4);
}
.panel { padding: clamp(1.2rem, 4vw, 2rem); }
.panel-narrow { max-width: 560px; margin: 0 auto; }
.panel-lede { margin: 0 0 1.2rem; color: var(--text-dim); }
.panel-after { margin: 1.4rem 0 0; color: var(--text-dim); }
.panel a, .prose a, .post-body a, .empty a, .reply a { color: var(--gold-hi); }
.prose p { color: var(--text-dim); }
.check { display: flex; gap: .55rem; align-items: baseline; cursor: pointer; }
.check input { accent-color: var(--gold); }
fieldset.field { margin: 0; padding: 0; border: 0; }
fieldset.field legend { padding: 0; margin-bottom: .35rem; font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.choice { display: flex; gap: .4rem 1.6rem; flex-wrap: wrap; }
.field input[type="file"] { padding: .5rem; font-size: .95rem; }
/* the attached files, listed under the file box by board.js; a new one glows for a moment */
.file-list { list-style: none; margin: -.4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.file-list + .field-note { margin-top: -.5rem; }
.file-list li { display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem .4rem .4rem; border-radius: 3px;
  border: 1px solid rgba(247, 217, 138, .55); background: rgba(214, 162, 62, .12); }
.file-list li.is-new { animation: file-new 1.6s ease-out; }
@keyframes file-new { from { background: rgba(247, 217, 138, .38); box-shadow: 0 0 0 3px rgba(247, 217, 138, .35); } }
@media (prefers-reduced-motion: reduce) { .file-list li.is-new { animation: none; } }
.file-list img { flex: none; width: 64px; height: 44px; object-fit: cover; border-radius: 2px; background: #000; }
.file-kind { flex: none; width: 64px; text-align: center; font-family: var(--display); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold-hi); font-weight: 600; }
.file-size { flex: none; color: var(--text-dim); font-size: .9rem; }
.file-off { flex: none; width: 2rem; height: 2rem; border: 0; border-radius: 3px; background: transparent; color: var(--text-dim); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.file-off:hover, .file-off:focus-visible { color: #ffb3a3; background: rgba(224, 112, 90, .15); }
.field-count { font-size: .9rem; color: var(--text-dim); justify-self: end; }
.btn-danger { --h: 2.6rem; }
.btn-danger span { color: #ffb3a3; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0 0 1rem; }
.facts dt { font-family: var(--display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #c9a8ff; padding-top: .35rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.cf-turnstile { min-height: 65px; }

/* the list */
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.board-head .panel-lede { margin: 0; }
.filters { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1.4rem; }
.filters .field { flex: 0 1 180px; }
.filters .field-grow { flex: 1 1 200px; }
.filters .field select, .filters .field input { padding: .5rem .7rem; font-size: 1rem; }
.filters .check { padding-bottom: .6rem; }
.issue-meta, .post-meta { margin: .15rem 0 0; font-size: .95rem; color: var(--text-dim); }

/* the list as one table, like GitHub's issues: a bar with Open / Closed and the filters, then rows */
.issues { border-radius: 4px; overflow: hidden; background: #150c07;
  box-shadow: 0 0 0 1px #0d0703, 0 0 0 2px rgba(180, 132, 44, .45), 0 10px 22px rgba(0, 0, 0, .4); }
.issues-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; flex-wrap: wrap; padding: .7rem 1rem;
  background: linear-gradient(180deg, #2a1a10, #1d110a); border-bottom: 1px solid rgba(214, 162, 62, .3); }
.state-tabs { display: flex; gap: 1.2rem; }
.state-tabs a { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-dim); text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.state-tabs a:hover, .state-tabs a.is-on { color: var(--text); }
.state-tabs .state { flex: none; width: 16px; height: 16px; color: inherit; }
/* the count: a fixed-height box with the digits centred both ways (lining figures, so 1, 2 and 3 digits all sit on the middle) */
.pill { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem;
  border-radius: 99px; background: rgba(214, 162, 62, .16); font-size: .88rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.state-tabs a.is-on .pill { background: rgba(214, 162, 62, .32); color: var(--gold-hi); }
.bar-filters { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bar-filters input, .bar-filters select { padding: .35rem .6rem; border-radius: 3px; border: 1px solid rgba(214, 162, 62, .3); background: rgba(0, 0, 0, .35); color: var(--text); font: inherit; font-size: .98rem; }
.bar-filters select { appearance: none; padding-right: 1.8rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%);
  background-position: right .9rem center, right .6rem center; background-size: 5px 5px; background-repeat: no-repeat; }
.bar-filters select option { background: #1a0e07; }
.bar-search input { width: 12rem; }
.bar-filters input:focus, .bar-filters select:focus { outline: none; border-color: var(--gold-hi); }
.bar-go { padding: .35rem .8rem; border-radius: 3px; border: 1px solid rgba(214, 162, 62, .5); background: transparent; color: var(--gold-hi); font: inherit; cursor: pointer; }
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-row { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; border-top: 1px solid rgba(214, 162, 62, .16); scroll-margin-top: 90px; }
.issue-row:first-child { border-top: 0; }
.issue-row:hover { background: rgba(214, 162, 62, .05); }
.issue-row:target { background: rgba(214, 162, 62, .1); }
.issue-row > .state { flex: none; width: 18px; height: 18px; margin-top: .35rem; }
.issue-main { min-width: 0; flex: 1; }
.issue-title { color: var(--text); text-decoration: none; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; margin-right: .4rem; }
.issue-title:hover { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.issue-side { flex: none; display: flex; align-items: center; gap: 1rem; margin-top: .1rem; }
.state-open { color: #6fcf73; }
.state-progress { color: #e8c15a; }
.state-fixed { color: #b392f0; }
.state-closed { color: #9a8c74; }
.state-blocked { color: #f0a35a; }
.state-wontdo { color: #c98a8a; }
.state-potential { color: #b8dc5a; }
.label { display: inline-block; margin: .1rem .3rem .1rem 0; padding: 0 .55rem; border-radius: 99px; font-size: .85rem; font-weight: 600; line-height: 1.55; vertical-align: .15em; white-space: nowrap;
  color: var(--text-dim); border: 1px solid rgba(191, 174, 140, .4); background: rgba(191, 174, 140, .08); }
.label-type-bug { color: #f3a99a; border-color: rgba(240, 130, 110, .5); background: rgba(240, 130, 110, .12); }
.label-type-suggestion { color: #8fe0d0; border-color: rgba(100, 210, 190, .5); background: rgba(100, 210, 190, .1); }
.label-status-progress { color: #f2d37e; border-color: rgba(232, 193, 90, .5); background: rgba(232, 193, 90, .1); }
.label-status-blocked { color: #f6bd85; border-color: rgba(240, 163, 90, .55); background: rgba(240, 163, 90, .12); }
.label-status-potential { color: #d3ec8e; border-color: rgba(184, 220, 90, .5); background: rgba(184, 220, 90, .1); }
.label-type-other { color: #c9b8e8; border-color: rgba(190, 170, 230, .45); background: rgba(190, 170, 230, .1); }
.label-priority-critical { color: #fff3ea; background: #c8321e; border-color: #ff7a5c; box-shadow: 0 0 6px rgba(230, 70, 40, .45); }
.label-priority-high { color: #1a0e07; background: #f3a99a; border-color: #f3a99a; }
.label-priority-normal { color: var(--gold-hi); border-color: rgba(247, 217, 138, .45); }
.issue-tags { margin: 0; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; color: var(--text-dim); font-size: .95rem; }
.empty { margin: 0; padding: 2rem 1.4rem; text-align: center; color: var(--text-dim); }
.pager { display: flex; justify-content: center; gap: 1.4rem; margin: 1.6rem 0 0; color: var(--text-dim); }
.pager a { color: var(--gold-hi); }

.tag, .badge { display: inline-block; padding: .1rem .55rem; border-radius: 99px; font-family: var(--display); font-weight: 700; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.6; white-space: nowrap;
  color: var(--text-dim); border: 1px solid rgba(191, 174, 140, .4); }
.tag-type-bug { color: #f0a08e; border-color: rgba(240, 160, 142, .55); }
.tag-type-suggestion { color: #c9a8ff; border-color: rgba(201, 168, 255, .55); }
.tag-status-open { color: var(--gold-hi); border-color: rgba(247, 217, 138, .55); }
.tag-status-progress { color: #9fd3ff; border-color: rgba(159, 211, 255, .55); }
.tag-status-fixed { color: #a6e3a1; border-color: rgba(166, 227, 161, .55); }
.tag-status-blocked { color: #f6bd85; border-color: rgba(240, 163, 90, .6); }
.tag-status-wontdo { color: #d9a0a0; border-color: rgba(201, 138, 138, .55); }
.tag-status-potential { color: #d3ec8e; border-color: rgba(184, 220, 90, .6); }
.tag-type-other { color: #c9b8e8; border-color: rgba(190, 170, 230, .5); }
.tag-priority-critical { color: #fff3ea; background: #c8321e; border-color: #ff7a5c; }
.tag-priority-high { color: #1a0e07; background: #f0a08e; border-color: #f0a08e; }
.tag-priority-normal { color: var(--gold-hi); }
.badge-dev { color: #1a0e07; background: linear-gradient(180deg, #fbe7a3, #d9a744); border-color: #d9a744; }
.who { color: var(--text); font-weight: 600; }
.who-gone { color: var(--text-dim); font-style: italic; font-weight: 400; }

/* upvotes and comment counts */
.vote-form { margin: 0; }
.vote { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-width: 3.1rem; padding: .35rem .5rem; border-radius: 3px;
  border: 1px solid rgba(214, 162, 62, .45); background: rgba(0, 0, 0, .3); color: var(--text); font: inherit; line-height: 1; text-decoration: none; cursor: pointer; }
.vote:hover { border-color: var(--gold-hi); color: var(--gold-hi); }
.vote.is-on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(251, 231, 163, .22), rgba(217, 167, 68, .12)); color: var(--gold-hi); }
.vote.is-static { cursor: default; opacity: .8; }
.vote.is-static:hover { border-color: rgba(214, 162, 62, .45); color: var(--text); }
.vote-arrow { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid currentColor; }
.vote-n { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.count { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-dim); font-size: .95rem; white-space: nowrap; }
.count svg { width: 18px; height: 18px; }
.issue-row .count { min-width: 2.4rem; }
.issue-row .vote { flex-direction: row; gap: .35rem; min-width: 3.2rem; padding: .25rem .5rem; }
.issue-row .vote-arrow { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 6px; }

/* the downloads page (admin) */
.muted { color: var(--text-dim); font-size: .92em; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.stat { display: grid; gap: .1rem; padding: 1rem 1.2rem; border-radius: 3px; border: 1px solid rgba(214, 162, 62, .35); background: rgba(0, 0, 0, .25); }
.stat-n { font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--gold-hi); line-height: 1.1; }
.stat-l { font-weight: 600; }
.stats { width: 100%; border-collapse: collapse; font-size: 1rem; }
.stats th { text-align: left; font-family: var(--display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: .4rem .6rem; border-bottom: 1px solid rgba(214, 162, 62, .4); }
.stats td { padding: .4rem .6rem; border-bottom: 1px solid rgba(214, 162, 62, .12); }

/* one issue */
.issue-head { margin-bottom: 1.2rem; display: flex; gap: 1rem; align-items: flex-start; }
.issue-head-main { min-width: 0; flex: 1; }
.issue-head .vote { margin-top: .3rem; }
.issue .post { padding: 1rem 1.3rem 1.1rem; margin-bottom: .9rem; }
.post-body { overflow-wrap: anywhere; }
.post-body p { margin: .6rem 0; }
.post-meta a { color: var(--gold); }
.post-comment { margin-left: clamp(0rem, 3vw, 1.6rem); }
.event { margin: .4rem 0 .9rem clamp(0rem, 3vw, 1.6rem); padding-left: 1rem; border-left: 2px solid rgba(214, 162, 62, .4); font-size: .98rem; color: var(--text-dim); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin: .8rem 0 0; }
.file { margin: 0; }
.file img, .file video { display: block; width: 100%; max-height: 360px; object-fit: contain; background: #000; border-radius: 2px; box-shadow: 0 0 0 1px rgba(214, 162, 62, .4); }
.file-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; height: 110px; background: rgba(0, 0, 0, .45); border-radius: 2px; box-shadow: 0 0 0 1px rgba(214, 162, 62, .4); font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--gold); text-decoration: none; text-align: center; }
.file-text span { font-family: inherit; font-size: .72rem; color: var(--text-dim); }
.file-text:hover span { color: var(--gold); }
.file figcaption { margin-top: .3rem; font-size: .88rem; color: var(--text-dim); overflow-wrap: anywhere; }
.reply, .admin { padding: 1rem 1.3rem 1.3rem; margin-top: 1.6rem; }
.reply h2, .admin h2 { margin-top: .2rem; }
.reply .empty { padding: .4rem; }
.admin { box-shadow: 0 0 0 1px #0d0703, 0 0 0 2px rgba(201, 168, 255, .5), 0 10px 22px rgba(0, 0, 0, .4); }
.admin .filters { margin-bottom: 1rem; }
.admin-row { display: flex; gap: .8rem; flex-wrap: wrap; }

@media (max-width: 600px) {
  .board-top-inner { justify-content: center; }
  .board-nav { justify-content: center; gap: .5rem 1rem; }
  .brand-text small { display: none; }
  .filters .field { flex: 1 1 45%; }
  .bar-filters { width: 100%; }
  .bar-search { flex: 1 1 100%; }
  .bar-search input { width: 100%; }
  .bar-filters select { flex: 1; }
  .issue-row { padding: .75rem .8rem; gap: .6rem; }
  .issue-side { flex-direction: column-reverse; align-items: flex-end; gap: .4rem; }
  .issue-row .count { min-width: 0; }
  .issue .post { padding: .9rem 1rem; }
}