/* ═══════════════════════════════════════════════════════════════════════
   Forum front page — concepts/Forum Front Page Redesign.svg
   Design px == CSS px on the 1920 px canvas. The white panel is 987 px wide
   (same width as the header's .header-inner); its content column is 968 px
   (6 px inset on the left, 13 px on the right, exactly as drawn).
   The concept is the light look (white panel on the light cubes backdrop); the
   dark theme gets a recoloured copy at the bottom of this file. The shared header
   follows the theme as everywhere else. Everything is scoped to body.forum-page / .fp-* classes.
   ═══════════════════════════════════════════════════════════════════════ */

.forum-page {
  --fp-green: #008210;
  --fp-link: #0051ff;
  --fp-focus: #00a82d;
  --fp-panel-bottom: 182px; /* blank panel space under the last green bar in the concept */

  /* 148 x 22 button outline (+1 px margin so the hairline's outer edge isn't clipped): 0.5 px black stroke, bottom-right chamfer */
  --fp-btn-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24' viewBox='-1 -1 150 24'%3E%3Cpath d='M147.75 .25V16.03L142.04 21.75H.25V.25H147.75Z' fill='none' stroke='%23000' stroke-width='.5'/%3E%3C/svg%3E");
  --fp-btn-outline-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24' viewBox='-1 -1 150 24'%3E%3Cpath d='M147.75 .25V16.03L142.04 21.75H.25V.25H147.75Z' fill='none' stroke='%23000' stroke-width='.5'/%3E%3Cpath d='M139 16L136.11 11H141.89L139 16ZM139 5H139.5V11.5H139H138.5V5H139Z' fill='%23000'/%3E%3C/svg%3E");
  /* members icon (the concept's 96 px grey silhouette, redrawn as vector) */
  --fp-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23666'%3E%3Ccircle cx='48' cy='28' r='16'/%3E%3Cpath d='M12 84V72A36 16.5 0 0 1 84 72V84Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Light cubes backdrop at the concept's scale/position; its flat top and bottom
   margins blend into #cdcdcd. !important beats the site-wide light-theme body rule. */
body.forum-page {
  background: #cdcdcd url("../assets/bg-blocks-light.jpg") center 43.55px / 5588.42px 1698.25px no-repeat !important;
  color: #000;
}
/* styles.css fades the page edges with main::before; the concept shows the cubes untouched. */
body.forum-page main::before { display: none !important; }

.forum-page [hidden] { display: none !important; }

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

/* Resets use :where() so every component rule below overrides them without !important. */
:where(.fp-panel) :is(h1, h2, h3, p, ul, ol) { margin: 0; padding: 0; }
:where(.fp-panel) :is(ul, ol) { list-style: none; }
:where(.fp-panel) :is(button, input, select) { font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
:where(.fp-panel) button {
  appearance: none; border: 0; background: none; padding: 0;
  cursor: pointer; text-align: inherit;
}
:where(.fp-panel) a { color: inherit; text-decoration: none; }
:where(.fp-panel) :is(button, a, select, input[type="checkbox"]):focus-visible {
  outline: 2px solid var(--fp-focus); outline-offset: 2px;
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.fp-main {
  position: relative; z-index: 1;
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  width: 100%; max-width: 987px;
  margin: -2px auto 0; /* the concept's panel starts at y=71, 2 px under the header */
}
.fp-panel {
  flex: 1 0 auto;
  padding: 14px 13px var(--fp-panel-bottom) 6px;
  background: #fff;
  color: #000;
}

/* Shown by app.js when an admin switches the forums off */
.fp-main > .feature-offline-message {
  flex: 1 0 auto;
  border: 0; border-radius: 0; box-shadow: none;
  padding: 70px 20px var(--fp-panel-bottom);
  background: #fff; color: #000;
}
.fp-main > .feature-offline-message h2 { color: #000; }
.fp-main > .feature-offline-message p { color: #444; }

.fp-title {
  font-size: 32px; font-weight: 400; line-height: 39px;
  color: #000;
}

/* ── Tab bar ──────────────────────────────────────────────────────────── */
.fp-tabbar {
  position: relative;
  display: flex; align-items: stretch;
  height: 42px; margin-top: 10px;
  border-radius: 6px;
  background: linear-gradient(to bottom, #4a4a4a 0%, #181818 100%);
  box-shadow: 0 2px 3.5px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.fp-tab {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: #f2f2f2;
  font-size: 14px; font-weight: 300; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.fp-tab--hot { width: 127px; padding-left: 1px; }
.fp-tab--favs { width: 68px; padding-left: 3px; }
.fp-tab--recents { width: 84px; padding-left: 2px; }
.fp-tab:first-child { border-radius: 6px 0 0 6px; }
.fp-tab:hover:not(.is-active) { color: #fff; }
.fp-tab.is-active {
  color: #fff; font-weight: 400;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background: linear-gradient(to bottom, #1a1a1a 0%, #0a0a0a 100%);
  box-shadow: inset 0 4px 5px rgba(0, 0, 0, 0.75), inset -2px 0 2px rgba(0, 0, 0, 0.9);
}
/* 2 px separator: a soft-light highlight beside a multiply shadow */
.fp-tab + .fp-tab::before,
.fp-tab + .fp-tab::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 1px;
  pointer-events: none;
}
.fp-tab + .fp-tab::before {
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: soft-light;
}
.fp-tab + .fp-tab::after {
  left: 1px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
}

.fp-search {
  position: absolute; top: 6px; right: 8px;
  display: flex; align-items: center;
  width: 244px; height: 30px; padding-left: 8px;
  background: #0f0f0f;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.8), inset 0 1px 0 #000;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.fp-search:focus-within {
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.8), inset 0 1px 0 #000, inset 0 0 0 1px var(--fp-focus);
}
.fp-search input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0; border: 0; border-radius: 0; background: none; outline: none;
  color: #d8d8d8;
  font-size: 14px; font-weight: 400;
  text-shadow: 0 -1px 0 #000;
  -webkit-appearance: none; appearance: none;
}
.fp-search input::placeholder { color: #767676; opacity: 1; }
.fp-search input::-webkit-search-cancel-button { display: none; }
/* The site-wide light-theme rule forces white form fields with !important; ids outrank it. */
#forum-search { background: none !important; color: #d8d8d8 !important; border-color: transparent !important; }
#forum-filter { background: transparent !important; color: #000 !important; border-color: transparent !important; }
.fp-search svg {
  flex: none; width: 12px; height: 12px; margin-right: 19.6px; overflow: visible;
  fill: none; stroke: #767676; stroke-width: 1;
}

/* ── Toolbar (section label, create + sort) ───────────────────────────── */
.fp-toolbar {
  display: flex; align-items: center;
  height: 22px; margin-top: 15px;
}
.fp-subtitle {
  position: relative; top: 1px;
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 400; line-height: 20px;
  color: #000;
}
.fp-btn {
  --fp-ch: 5.72px;
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 148px; height: 22px; margin-left: 9px; padding-bottom: 2px;
  background: #fff; color: #000;
  font-size: 15px; font-weight: 400; line-height: 1;
  white-space: nowrap;
  /* chamfered bottom-right corner (clip reaches 1 px past the box so the hairline's outer edge stays visible) */
  clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% - var(--fp-ch) + 1px), calc(100% - var(--fp-ch) + 1px) calc(100% + 1px), -1px calc(100% + 1px));
}
.fp-btn::after {
  content: ""; position: absolute; inset: -1px; z-index: 1;
  background: var(--fp-btn-outline) no-repeat 0 0 / 150px 24px;
  pointer-events: none;
}
.fp-btn:hover { background: #f1f1f1; }
.fp-btn:active { background: #e6e6e6; }
/* clip-path would cut an outside outline, so keyboard focus is drawn as an inner ring */
.fp-btn:focus-visible,
.fp-btn:has(select:focus-visible) { outline: none; box-shadow: inset 0 0 0 2px var(--fp-focus); }
.fp-btn--sort::after { background-image: var(--fp-btn-outline-sort); }
.fp-btn--sort select {
  width: 100%; height: 100%;
  padding: 0 0 0 5px;
  border: 0; border-radius: 0; background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
  text-align: left;
  cursor: pointer;
}
.fp-btn--sort select option { color: #000; background: #fff; }

/* ── Green filter / pagination bars ───────────────────────────────────── */
.fp-bar {
  display: flex; align-items: center;
  height: 38px; margin-top: 11px; padding: 0 10.8px 0 10px;
  background: var(--fp-green); color: #fff;
  font-size: 16px; font-weight: 400; line-height: 20px;
}
.fp-bar--bottom { margin-top: 7px; }
.fp-bar :is(button, input):focus-visible { outline-color: #fff; }
.fp-check {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; cursor: pointer;
}
.fp-check span { position: relative; top: 1px; }
.fp-check + .fp-check { margin-left: 25.4px; }
.fp-check input {
  -webkit-appearance: none; appearance: none;
  position: relative; flex: none;
  width: 12px; height: 12px; margin: 0;
  border: 0; border-radius: 0;
  background: #fff;
  cursor: pointer;
}
.fp-check input::before { content: ""; position: absolute; inset: 2px; background: #000; }
.fp-check input:checked::after {
  content: ""; position: absolute; left: 4px; top: 2px;
  width: 3px; height: 6px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.fp-pager {
  display: flex; align-items: center;
  margin-left: auto;
  font-size: 16px; font-weight: 500;
}
.fp-pager button { position: relative; top: 1px; color: #fff; line-height: 20px; white-space: nowrap; }
.fp-pager button:hover:not([aria-disabled="true"]) { text-decoration: underline; text-underline-offset: 3px; }
.fp-pager button[aria-disabled="true"] { cursor: default; }
.fp-pager-sep {
  align-self: flex-start;
  width: 2px; height: 21px; margin: 8px 9.4px 0 7.5px;
  /* the concept's 1 px stroke at 52% white, centred on a pixel edge */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='21' viewBox='0 0 2 21'%3E%3Cpath d='M1 0V21' stroke='%23fff' stroke-opacity='.52'/%3E%3C/svg%3E") 0 0 / 2px 21px no-repeat;
}

/* ── Forum list ───────────────────────────────────────────────────────── */
.fp-list { margin: 0; padding: 0; }
.fp-entry {
  position: relative;
  min-height: 185px; padding: 14px 0 0 7px;
}
/* embossed rule between entries: the concept's two gradient hairlines (a faint one above a darker one) */
.fp-entry:not(:last-child)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='968' height='3' viewBox='0 0 968 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='968' y2='0'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='.49' stop-opacity='.15'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='968' y2='0'%3E%3Cstop stop-opacity='0'/%3E%3Cstop offset='.5' stop-opacity='.6'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 1H968' stroke='url(%23a)' stroke-opacity='.15'/%3E%3Cpath d='M0 2H968' stroke='url(%23b)' stroke-opacity='.6'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.fp-entry-title,
.fp-entry-desc,
.fp-entry-by {
  max-width: calc(100% - 100px);
  font-size: 20px; font-weight: 300; line-height: 24px;
  overflow-wrap: anywhere;
}
.fp-entry-title { padding-left: 3px; color: var(--fp-accent, var(--fp-link)); }
.fp-entry-title a:hover { text-decoration: underline; }
.fp-entry-desc { margin-top: 5px; color: #000; }
.fp-entry-by { color: #666; }
.fp-entry-by a {
  color: var(--fp-link);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.5px; text-decoration-skip-ink: none;
}
.fp-entry-members {
  position: absolute; top: 19px; right: 2px;
  display: flex; align-items: center; gap: 7px;
  height: 20px;
  font-size: 14px; font-weight: 400; line-height: 20px;
  color: #666;
}
.fp-entry-members span { position: relative; top: 1px; }
.fp-entry-members::before {
  content: ""; flex: none; width: 20px; height: 20px;
  background: var(--fp-person) center / 20px 20px no-repeat;
}
.fp-entry-delete {
  position: absolute; top: 46px; right: 2px;
  padding: 2px 8px;
  border: 1px solid #b00020; border-radius: 2px;
  background: #fff; color: #b00020;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase;
}
.fp-entry-delete:hover { background: #b00020; color: #fff; }

/* latest-post card */
.fp-post {
  position: relative; display: block;
  width: 738px; max-width: 100%; min-height: 63px;
  margin-top: 15px; padding: 4px 13px 4px 66px;
  background: #f9f9f9; color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}
a.fp-post:hover { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.fp-post-avatar {
  position: absolute; left: 2px; top: 2px;
  width: 59px; height: 59px;
  background: #d9d9d9;
}
.fp-post-user {
  display: block; max-width: calc(100% - 160px);
  font-size: 14px; font-weight: 500; line-height: 17px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fp-post-date {
  position: absolute; top: 6px; right: 13px;
  font-size: 14px; font-weight: 300; line-height: 17px;
  color: #777;
}
.fp-post-body {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin-top: 3px; overflow: hidden;
  font-size: 14px; font-weight: 300; line-height: 17px;
  overflow-wrap: anywhere;
}
.fp-post--empty .fp-post-body { color: #777; margin-top: 5px; }
.fp-empty {
  padding: 40px 7px;
  font-size: 20px; font-weight: 300; line-height: 24px; color: #666;
}

/* ── Dark theme (the site default); light keeps the concept's white panel ─
   Same layout and sizes, recoloured like the other dark pages (watch.css). ── */
html:not([data-theme="light"]) .forum-page {
  --fp-link: #5b9bff;
  --fp-btn-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24' viewBox='-1 -1 150 24'%3E%3Cpath d='M147.75 .25V16.03L142.04 21.75H.25V.25H147.75Z' fill='none' stroke='%23707070' stroke-width='.5'/%3E%3C/svg%3E");
  --fp-btn-outline-sort: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='24' viewBox='-1 -1 150 24'%3E%3Cpath d='M147.75 .25V16.03L142.04 21.75H.25V.25H147.75Z' fill='none' stroke='%23707070' stroke-width='.5'/%3E%3Cpath d='M139 16L136.11 11H141.89L139 16ZM139 5H139.5V11.5H139H138.5V5H139Z' fill='%23fff'/%3E%3C/svg%3E");
  --fp-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Cg fill='%23aaa'%3E%3Ccircle cx='48' cy='28' r='16'/%3E%3Cpath d='M12 84V72A36 16.5 0 0 1 84 72V84Z'/%3E%3C/g%3E%3C/svg%3E");
}
html:not([data-theme="light"]) body.forum-page {
  background: #272727 url("../assets/bg-blocks-dark.png") center 43.55px / 5588.42px 1698.25px no-repeat !important;
  color: #f2f2f2;
}
html:not([data-theme="light"]) .fp-panel {
  background: linear-gradient(to bottom, rgba(26, 26, 26, 0.96), #101010 1547px);
  color: #f2f2f2;
}
html:not([data-theme="light"]) .fp-main > .feature-offline-message { background: #101010; color: #f2f2f2; }
html:not([data-theme="light"]) .fp-main > .feature-offline-message h2 { color: #fff; }
html:not([data-theme="light"]) .fp-main > .feature-offline-message p { color: #aaa; }
html:not([data-theme="light"]) :is(.fp-title, .fp-subtitle, .fp-entry-desc) { color: #f2f2f2; }
/* the official forums' brand colours are too dark on this panel, so lighten them */
html:not([data-theme="light"]) .fp-entry-title { color: color-mix(in srgb, var(--fp-accent, var(--fp-link)) 50%, #fff); }
html:not([data-theme="light"]) :is(.fp-entry-by, .fp-entry-members, .fp-empty) { color: #999; }
html:not([data-theme="light"]) .fp-btn { background: linear-gradient(to bottom, #3c3c3c, #1f1f1f); color: #fff; }
html:not([data-theme="light"]) .fp-btn:hover { background: linear-gradient(to bottom, #4b4b4b, #292929); }
html:not([data-theme="light"]) .fp-btn:active { background: linear-gradient(to bottom, #1f1f1f, #2c2c2c); }
html:not([data-theme="light"]) #forum-filter { color: #fff !important; }
html:not([data-theme="light"]) .fp-btn--sort select option { color: #fff; background: #1f1f1f; }
/* the embossed rule between entries, light on dark */
html:not([data-theme="light"]) .fp-entry:not(:last-child)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='968' height='3' viewBox='0 0 968 3' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='968' y2='0'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='968' y2='0'%3E%3Cstop stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23000' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 1H968' stroke='url(%23a)'/%3E%3Cpath d='M0 2H968' stroke='url(%23b)'/%3E%3C/svg%3E");
}
html:not([data-theme="light"]) .fp-entry-delete { background: #1a1a1a; border-color: #ff6b81; color: #ff6b81; }
html:not([data-theme="light"]) .fp-entry-delete:hover { background: #b00020; border-color: #b00020; color: #fff; }
html:not([data-theme="light"]) .fp-post { background: #1e1e1e; color: #f2f2f2; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
html:not([data-theme="light"]) a.fp-post:hover { background: #262626; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.75); }
html:not([data-theme="light"]) .fp-post-avatar { background: #3a3a3a; }
html:not([data-theme="light"]) :is(.fp-post-date, .fp-post--empty .fp-post-body) { color: #999; }

/* ── Smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .fp-panel { padding-right: 13px; padding-left: 13px; }
  .fp-tabbar { flex-wrap: wrap; height: auto; min-height: 42px; }
  .fp-tab { height: 42px; }
  .fp-search { position: relative; top: auto; right: auto; flex: 1 1 200px; margin: 6px 8px; width: auto; min-width: 0; }
  .fp-toolbar { flex-wrap: wrap; height: auto; row-gap: 10px; }
  .fp-subtitle { flex: 1 0 100%; }
  #create-forum-btn { margin-left: 0; }
  .fp-bar { height: auto; min-height: 38px; flex-wrap: wrap; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  .fp-pager { margin-left: auto; }
  .fp-pager-sep { align-self: center; margin-top: 0; }
}
@media (max-width: 640px) {
  .fp-title { font-size: 28px; }
  .fp-entry-title, .fp-entry-desc, .fp-entry-by { max-width: calc(100% - 70px); font-size: 18px; }
  .fp-entry-members { gap: 4px; }
  .fp-post { padding-right: 10px; }
  .fp-post-date { position: static; display: block; margin-top: 2px; }
}