/* The forum, laid out the way the old boards were (a navbar, category tables, threads with the member's column on
   the left of each post) and dressed like the rest of the site: metal bars, gold titles, dark wells. */

.fnav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  padding: 6px 8px; margin-bottom: 8px; background: var(--panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a372f;
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 700 12.5px var(--head); }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--text-dim); }
.crumbs strong { color: var(--text); font-weight: 700; }
.fuser { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; }
.fuser > a:not(.btn) { color: var(--text); text-decoration: none; }
.fuser > a:not(.btn):hover { color: var(--gold); }
.fuser .btn { min-height: 34px; }
.fuser form { margin: 0; }
.linkish { background: none; border: 0; padding: 0; color: var(--text); font: inherit; }
.linkish:hover { color: var(--gold); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c8202a; color: #fff; font: 800 11px var(--head); }

.fnote { margin: 0 0 8px; padding: 8px 10px; background: rgba(76, 217, 123, 0.08); border: 1px solid rgba(76, 217, 123, 0.4); color: #bff2cf; }
.fnote-warn { background: rgba(242, 193, 78, 0.08); border-color: rgba(242, 193, 78, 0.45); color: #f6dfa3; }
.fnote a { color: var(--gold); }
.ferror { margin: 0 0 8px; padding: 8px 10px 8px 26px; background: rgba(224, 69, 58, 0.1); border: 1px solid rgba(224, 69, 58, 0.55); color: #ffb3a9; }
p.ferror { padding-left: 10px; }

.fbox { margin-bottom: 8px; }
.fbox-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

/* category and thread tables */
.ftable { width: 100%; border-collapse: collapse; }
.ftable th {
  text-align: left; padding: 5px 8px; background: var(--panel-2); color: var(--label); border-bottom: 1px solid #000;
  font: 800 11px var(--head); text-transform: uppercase; letter-spacing: 0.08em;
}
.ftable td { padding: 7px 8px; vertical-align: middle; border-bottom: 1px solid #000; background: linear-gradient(180deg, #1a1813, #131209); }
.ftable tbody tr:nth-child(even) td { background: linear-gradient(180deg, #16150f, #100f0a); }
.ftable tr.is-sticky td { background: linear-gradient(180deg, #221d10, #17140b); }
.ftable .num { text-align: right; font: 800 12.5px var(--head); white-space: nowrap; color: #f3e7c6; }
.ftable th.num { color: var(--label); font-size: 11px; }
.fcat .box-head h2 { text-transform: none; letter-spacing: 0.04em; font-size: 13.5px; }  /* the staff's own titles */
.ftable td.ficon { width: 50px; padding-left: 0; padding-right: 0; text-align: center; }
.ficon img { display: block; width: 34px; height: 34px; margin: 0 auto; }  /* a block: no line box under it, so it sits in the middle of its cell */
.fmain { min-width: 0; }
.ftitle { display: inline-block; color: #ffe08a; font: 800 14px/1.3 var(--head); text-decoration: none; }
.ftitle:hover { color: #fff1c4; text-decoration: underline; }
.fdesc { display: block; color: var(--text-dim); font-size: 12px; margin-top: 1px; }
.fdesc.gap { display: flex; }  /* the author and the date with room between them */
.fdesc a { color: var(--text-dim); }
.fflag { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: #d8b56a; font: 700 11px var(--head); text-transform: uppercase; letter-spacing: 0.05em; }
.fflag img { width: 14px; height: 14px; }
/* the last post: its thread's title on the first line, who wrote it and when side by side on the second */
.flast { width: 230px; font-size: 12px; line-height: 1.4; }
.flast-title { display: block; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.flast-title:hover { color: #ffe08a; }
.flast-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.fwhen { color: var(--text-dim); font-size: 11.5px; }
.ftag {
  display: inline-block; margin-right: 4px; padding: 1px 6px; vertical-align: 2px;
  background: var(--metal-gold); color: #ffe7a3; border: 1px solid #000; font: 800 10px var(--head); text-transform: uppercase; letter-spacing: 0.06em;
}
.ftag-dim { background: var(--metal); color: var(--text-dim); }
.ftag-red { background: linear-gradient(180deg, #7a2a22, #4a1612); color: #ffd0c8; }
.ftable-compact td { padding: 4px 8px; font-size: 12px; }

.fbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fbar .title { text-transform: none; letter-spacing: 0.02em; }  /* members' own titles: never cased by the page language */
.fbar .lead { margin: 0; }

.pages { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 0 0 8px; font: 700 12px var(--head); }
.pages span { color: var(--text-dim); padding: 0 6px 0 0; }
.pages a, .pages strong { --ch: 4px; display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0 6px; }

/* who's online */
.fwho { padding: 8px 10px; font-size: 12.5px; }
.fwho p { margin: 0 0 6px; }
.fstats { color: var(--text-dim); }

/* names in their role's colour, as the old boards did */
.uname { font-weight: 700; text-decoration: none; }
.role-member { color: #d9e2f0; }
.role-moderator { color: #6ee08a; }
.role-admin { color: #ff7a5c; }
a.uname:hover { text-decoration: underline; }

/* a post: the date bar, the member's column, the message */
.post { margin-bottom: 8px; border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a463d; background: #14130e; }
.post-head {
  display: flex; justify-content: space-between; padding: 4px 10px; background: var(--metal); border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); font: 700 11.5px var(--head); color: #ddd6c6; text-shadow: 0 1px 0 #000;
}
.post-head a { color: #ddd6c6; text-decoration: none; }
.post-head a:hover { color: #ffe08a; }
.post-row { display: grid; grid-template-columns: 170px 1fr; }
.postbit { padding: 10px; background: linear-gradient(180deg, #1b1914, #121109); border-right: 1px solid #000; text-align: center; }
.postbit .uname { font: 800 14px var(--head); }
.postbit-title { display: block; margin: 2px 0 8px; font: 700 11px var(--head); text-transform: uppercase; letter-spacing: 0.06em; }
.postbit > img { width: 96px; height: 96px; margin: 0 auto 8px; border: 1px solid #000; box-shadow: 0 0 0 1px #4a463d; background: #000; }
.postbit dl { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 1px 8px; margin: 0; font-size: 11.5px; }
.postbit dt { color: var(--text-dim); text-align: right; }
.postbit dd { margin: 0; text-align: left; font-family: var(--head); font-weight: 700; }
.post-body { padding: 12px 14px; min-width: 0; }
.bb { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.bb a { color: var(--gold); }
.bb-quote { margin: 6px 0 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid #000; box-shadow: inset 0 0 0 1px #3a372f; font-size: 13px; }
.bb-quote cite { display: block; margin-bottom: 4px; color: var(--label); font: 700 11.5px var(--head); font-style: normal; }
.bb-code { margin: 6px 0; padding: 8px 10px; background: #050504; border: 1px solid #2b2924; overflow-x: auto; font: 12.5px/1.5 Consolas, monospace; }
.bb-spoiler { margin: 6px 0; padding: 6px 10px; background: var(--panel-2); border: 1px dashed var(--edge-mid); }
.bb-spoiler summary { color: var(--label); font: 700 12px var(--head); }
.bb-list { margin: 6px 0; padding-left: 20px; }
.post-edited { margin: 12px 0 0; padding-top: 6px; border-top: 1px dashed #3a372f; color: var(--text-dim); font-size: 11.5px; font-style: italic; }
.post-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 4px 8px; background: var(--panel-2); border-top: 1px solid #000; }
.post-foot:empty { display: none; }
.plink {
  --ch: 5px; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 10px;
  font: 700 12px var(--head); letter-spacing: 0.03em;
}
.plink img { width: 16px; height: 16px; }
.plink-gold { --edge-c: rgba(242, 193, 78, 0.8); color: #ffe7a3; }
form.inline { display: inline; margin: 0; }

.ftools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 8px; }
.ftools form { margin: 0; }
.fmove { display: flex; align-items: flex-end; gap: 6px; }
.fmove label { display: block; font-size: 11px; color: var(--text-dim); }

/* forms */
.fform { display: grid; gap: 4px; padding: 10px; }
.fform label { color: var(--text); font: 700 12px var(--head); margin-top: 4px; }
.fform input[type="text"], .fform input[type="email"], .fform input[type="password"], .fform input[type="number"],
.fform input[type="search"], .fform input:not([type]), .fform textarea, .fform select, .fmove select, .frow-form select, .frow-form input {
  width: 100%; min-height: 38px; padding: 6px 9px; background: #070605; color: var(--text);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a463d, inset 0 2px 6px rgba(0, 0, 0, 0.6); font: 14px var(--body);
}
.fform textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.fform input:focus, .fform textarea:focus, .fform select:focus { outline: 2px solid var(--gold); outline-offset: 0; }
.fform .btn { justify-self: start; margin-top: 6px; }
.fform .btn-wide { justify-self: stretch; }
.fhelp { margin: 0; color: var(--text-dim); font-size: 11.5px; }
.fact { display: flex; gap: 6px; flex-wrap: wrap; }
.flinks { margin: 8px 0 0; font-size: 12.5px; text-align: center; }
.check { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; font: 400 13px var(--body) !important; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--gold); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.frow-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.frow-form > div { display: grid; gap: 2px; min-width: 120px; }
.frow-form .grow { flex: 1; min-width: 180px; }
.frow-form.tight { flex-wrap: nowrap; }
.frow-form.tight select { width: auto; }
.frow-form.tight input { min-width: 120px; }

.editor { display: grid; gap: 4px; }
.editor-bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; background: rgba(5, 5, 4, 0.5); border: 1px solid rgba(140, 140, 134, 0.25); }
.editor-bar button { --ch: 4px; min-width: 34px; min-height: 30px; padding: 0 8px; font: 800 12px var(--head); }

/* profile, user panel, lists */
.profile-card { display: flex; gap: 14px; align-items: center; padding: 12px; }
.profile-card > img { width: 96px; height: 96px; border: 1px solid #000; box-shadow: 0 0 0 1px #4a463d; background: #000; }
.profile-name { margin: 0; font: 800 20px var(--head); }
.profile-name .uname { font: inherit; }
.profile-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12.5px; }
.profile-facts dt { color: var(--text-dim); }
.profile-facts dd { margin: 0; }
.flist { list-style: none; margin: 0; padding: 4px 8px 8px; }
.flist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 2px; border-bottom: 1px solid #26241f; }
.flist li a { color: var(--text); }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin: 4px 0; padding: 0; border: 0; }
.avatars label { position: relative; margin: 0; }
.avatars input { position: absolute; opacity: 0; }
.avatars img { width: 100%; height: auto; aspect-ratio: 1; border: 1px solid #000; box-shadow: 0 0 0 1px #3a372f; background: #000; }
.avatars label:hover img { box-shadow: 0 0 0 1px var(--edge); }
.avatars input:checked + img { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(242, 193, 78, 0.4); }
.avatars input:focus-visible + img { outline: 2px solid var(--gold); outline-offset: 2px; }
.reports { list-style: none; margin: 0; padding: 6px 10px; }
.reports li { padding: 8px 0; border-bottom: 1px solid #26241f; }
.reports p { margin: 0 0 4px; }
.report-reason { color: #ffd08a; }
.fedit { margin: 0 8px 6px; border: 1px solid #000; background: var(--panel-2); }
.fedit summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; font: 800 13px var(--head); color: #ffe08a; }
.fedit summary .fwhen { margin-left: auto; font-family: var(--body); font-weight: 400; }
.fedit summary img { width: 20px; height: 20px; }
.rules { margin: 0; padding: 10px 14px 12px 34px; }
.rules li { padding: 6px 0; border-bottom: 1px solid #26241f; }
.rules strong { display: block; color: #ffe08a; font: 800 13px var(--head); text-transform: uppercase; letter-spacing: 0.05em; }
.rules span { color: var(--text); }

@media (max-width: 680px) {
  .post-row { grid-template-columns: 1fr; }
  .postbit { display: grid; grid-template-columns: 48px 1fr; grid-template-areas: "img name" "img title"; text-align: left; align-items: center; column-gap: 10px; padding: 8px; border-right: 0; border-bottom: 1px solid #000; }
  .postbit > img { grid-area: img; width: 48px; height: 48px; margin: 0; }
  .postbit > .uname, .postbit-name { grid-area: name; justify-content: flex-start; }
  .postbit-title { grid-area: title; margin: 0; }
  .postbit dl { display: none; }
  .ficon { width: 38px; }
  .ficon img { width: 26px; height: 26px; }
  .frow-form.tight { flex-wrap: wrap; }
}

/* the label in the true middle (see the end of site.css): this file comes after it and sets these paddings again */
.plink, .pages a, .pages strong, .editor-bar button { padding-top: 0.2em; }

/* a sticky or locked thread: its mark before the title, the name of it on hover and for screen readers */
.fmark { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.fmark img { width: 18px; height: 18px; }

/* a member's country flag beside the name */
.uflag { display: inline-block; vertical-align: -3px; margin-left: 6px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); }
.postbit-name { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.profile-name .uflag { vertical-align: -2px; }
.fform-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fform-row select { min-width: 220px; }