/* Alderun forum — layered on top of style.css, which supplies the palette, nav and footer.
   Loaded only by the forum's server-rendered pages. */

.forumbar {
  background: #151a2b;
  border-bottom: 1px solid #7a6520;
}
.forumbar .inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.forumbar .brand { font-size: 1.15em; letter-spacing: 0.04em; }
.forumbar .acct { display: flex; align-items: center; gap: 12px; font-size: 0.92em; }
.forumbar .acct .who { display: flex; align-items: center; gap: 6px; color: #f0e6c8; }

nav.site a.here { color: #fff; border-bottom: 2px solid #7a6520; padding-bottom: 3px; }

.crumbs { font-size: 0.9em; color: #8a93ac; margin-bottom: 6px; }
.crumbs i { font-style: normal; color: #4b5068; margin: 0 4px; }

.disc { color: #8a93ac; font-size: 0.85em; }

.role {
  display: inline-block;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.68em;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: 2px;
  background: #2a2f45;
  color: #f0e6c8;
  border: 1px solid #4b5068;
}
.role.owner { background: #4a3d0d; border-color: #7a6520; color: #f7d60d; }
.role.admin { background: #1d3348; border-color: #37628a; color: #9fd0ff; }
.role.banned { background: #3d1616; border-color: #7a2b2b; color: #e6a0a0; }

.flash {
  border-radius: 5px;
  padding: 10px 14px;
  margin: 14px 0;
  border: 1px solid #333245;
  background: #10131f;
}
.flash.good { border-color: #3d6b3d; color: #b7e2b7; }
.flash.bad { border-color: #7a2b2b; color: #e6b0b0; }

img.av {
  border: 1px solid #7a6520;
  border-radius: 4px;
  background: #000;
  vertical-align: middle;
  object-fit: cover;
}

/* board + topic tables */
table.boards td, table.topics td { vertical-align: top; }
td.num, th.num { text-align: center; width: 5.5em; }
td.last, th.last { width: 30%; }
td.av-cell { width: 44px; }
a.bname { font-size: 1.15em; }
tr.gone a { color: #8a93ac; text-decoration: line-through; }

.pin, .lock {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.7em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  background: #2a2f45;
  color: #f0e6c8;
  vertical-align: 3px;
}
.pin { background: #4a3d0d; color: #f7d60d; }

ul.recent { list-style: none; padding: 0; }
ul.recent li { border-bottom: 1px solid #1c2033; padding: 6px 0; }

/* posts */
.posts { margin: 18px 0; }
/* `minmax(0, …)` on BOTH tracks, not `150px 1fr`: a grid item's automatic minimum size is its
   min-content width, and a tag like `squirrelfm#2416` is one unbreakable token wider than the
   author column — so the column refused to shrink and the name spilled sideways across the post
   body. minmax(0, …) lets the track hold its item, and the wrapping rules below let the name
   itself break rather than demand the width. */
.post {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 0 20px;
  background: #10131f;
  border: 1px solid #333245;
  border-radius: 6px;
  margin: 14px 0;
  padding: 16px 20px;
}
/* min-width:0 on the flex container AND on the text block inside it — a flex item also defaults to
   a min-content minimum, so without both the name pushes the column open again. */
.post .who { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.post .who > div { min-width: 0; }
/* Names are 2-12 characters plus a `#1234` discriminator. `userName()` puts a <wbr> between the two
   so the usual break lands at the `#`; `break-word` (not `anywhere`) is the last resort for a name
   too long to fit even on its own line — it tries the whole token first, so it does not split a
   name that would have fitted after wrapping. */
.post .who .nm { color: #f0e6c8; font-weight: bold; overflow-wrap: break-word; }
.post .content { min-width: 0; overflow-wrap: break-word; }
.post .content p { margin: 0 0 0.8em; }
.post .content p:last-child { margin-bottom: 0; }
.post .meta {
  grid-column: 1 / -1;
  border-top: 1px solid #1c2033;
  margin-top: 12px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.post .actions { display: flex; gap: 14px; align-items: center; font-size: 0.9em; }
.post .removed { color: #8a93ac; font-style: italic; }
.post .edited { margin-top: 8px; }
@media (max-width: 640px) {
  .post { grid-template-columns: 1fr; gap: 10px; }
  .post .who { border-bottom: 1px solid #1c2033; padding-bottom: 8px; }
}

blockquote {
  margin: 8px 0;
  padding: 8px 14px;
  border-left: 3px solid #7a6520;
  color: #b9bed0;
}

/* forms */
.panel.narrow { max-width: 520px; }
label { display: block; margin: 14px 0; color: #f0e6c8; }
label.check { display: flex; gap: 9px; align-items: flex-start; color: #d8d8e8; }
label.check input { width: auto; margin-top: 5px; }
input[type=text], input[type=email], input:not([type]), textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: #0a0a14;
  color: #e8e8f0;
  border: 1px solid #4b5068;
  border-radius: 4px;
  padding: 9px 11px;
  font: inherit;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus { outline: none; border-color: #7a6520; }
img.captcha {
  display: block;
  margin: 8px 0 4px;
  border: 1px solid #4b5068;
  border-radius: 4px;
  max-width: 100%;
}

.toolbar { display: flex; gap: 14px; align-items: center; margin: 16px 0 0; flex-wrap: wrap; }
.btn, button.btn {
  display: inline-block;
  background: linear-gradient(#3a3752, #26243a);
  color: #f7d60d;
  border: 1px solid #7a6520;
  border-radius: 5px;
  padding: 9px 20px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: linear-gradient(#454065, #2e2b45); text-decoration: none; }
.btn.danger { color: #ffb3b3; border-color: #7a2b2b; }
form.inline { display: inline; }
button.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: #f7d60d;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
button.linkish:hover { text-decoration: underline; }
button.linkish.danger { color: #e08585; }

.modbar { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.modbar button {
  background: #1b2038;
  color: #f0e6c8;
  border: 1px solid #4b5068;
  border-radius: 4px;
  padding: 5px 13px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.modbar button.danger { color: #e08585; border-color: #7a2b2b; }

.pager { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.pager a, .pager .cur {
  border: 1px solid #333245;
  border-radius: 4px;
  padding: 3px 11px;
  min-width: 2em;
  text-align: center;
}
.pager .cur { background: #1b2038; color: #f0e6c8; border-color: #7a6520; }