/* Forum pages since the makeover (owner 2026-10-25, mockup canvas https://claude.ai/artifact/SykNSrAZuxtvAiVgvG4a1Y):
   the front page's category cards, board and thread rows, the member list, the search and the post editor, in the
   site's cards (site.css). Loaded by forum/frame.html and the thread pages after site.css; rules are under .fp
   except the badges and member names, which thread pages share. Thread pages add thread.css. */

/* ---- Shared with thread pages: badges in a title, member names in their group colour ---- */
.fp-badge { vertical-align: 5px; font-size: 12px; font-weight: bold; }
/* Group colours were picked for MyBB's grey tables; darkened for text so even the light greens reach 4.5:1 on white. */
.ui-mc { color: var(--mc); }
@supports (color: color-mix(in srgb, red, blue)) { .ui-mc { color: color-mix(in srgb, var(--mc) 55%, #000); } }

/* ---- Head card extras ---- */
.fp .fp-head-search { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fp .fp-head-search .ui-input { flex: 1 1 200px; width: 240px; }

/* ---- Category cards and rows (board rows on the front page, thread rows on boards and in search results) ---- */
.fp .fp-cat, .fp .fp-list { overflow: hidden; }
.fp .fp-cat-head {  /* as .ui-card-head */
  display: flex; align-items: center; gap: 14px; padding: var(--ui-pad-y) var(--ui-pad-x) 12px; border-bottom: 1px solid #eef1f5;
}
.fp .fp-cat-head h2 { flex: 1 1 auto; min-width: 0; }
.fp .fp-thread-head:not(:first-child) { border-top: 1px solid #e3e8ee; }
.fp .fp-col { flex: none; font-size: 12px; color: var(--ui-muted); }
.fp .fp-col-num { width: 80px; text-align: right; }
.fp .fp-col-last { width: 250px; padding-left: 24px; }
.fp .fp-row { display: flex; align-items: center; gap: 14px; padding: 12px var(--ui-pad-x); border-bottom: 1px solid #eef1f4; }  /* as .ui-item */
.fp .fp-row:last-child { border-bottom: 0; }
.fp .fp-row.fp-hidden { background: #fbf6f6; }
.fp .fp-ico {
  flex: none; width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; background: #eef2f6; color: #5d6874;
}
.fp .fp-state-new .fp-ico, .fp .fp-state-open .fp-ico { background: #e3f1e3; color: #24642a; }
.fp .fp-state-closed .fp-ico, .fp .fp-state-archived .fp-ico, .fp .fp-state-locked .fp-ico { background: var(--ui-warm-bg); color: var(--ui-warm); }
.fp .fp-thread .fp-ico { width: 34px; height: 34px; }
.fp .fp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fp .fp-title { font-size: 15px; font-weight: bold; overflow-wrap: anywhere; }
.fp .fp-title:not([href]) { color: var(--ui-text); }
.fp .fp-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.fp .fp-post-icon { flex: none; }
.fp .fp-subpages { font-size: 13px; color: var(--ui-muted); }
.fp .fp-subpages a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; padding: 0 4px; border-radius: 4px; }
.fp .fp-subpages a:hover { background: #eef2f6; text-decoration: none; }
.fp .fp-desc { font-size: 13px; color: var(--ui-muted); overflow-wrap: anywhere; }
.fp .fp-rating { margin-left: 6px; font-size: 13px; }
.fp .fp-num { flex: none; width: 80px; text-align: right; font-size: 15px; color: var(--ui-text); font-variant-numeric: tabular-nums; }
.fp .fp-num-label { display: none; }
.fp .fp-last { flex: none; width: 250px; padding-left: 24px; display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.fp .fp-last > * { display: block; min-height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* 24 px rows: links big enough to tap */
.fp .fp-last-title { font-weight: bold; }

/* ---- Bars above and below a list: the saved "browsing" line, the legend, the pager ---- */
.fp .fp-bar {  /* a .ui-card */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 8px 12px 8px var(--ui-pad-x); font-size: 13px;
}
.fp .fp-bar:has(> span:empty:first-child):not(:has(.fp-pager)) { display: none; }
.fp .fp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fp .fp-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.fp .fp-pager { margin-left: auto; }

/* ---- Front page statistics, the links under every forum page ---- */
.fp .fp-stats { display: flex; flex-direction: column; gap: 8px; }
.fp-links {  /* a .ui-card */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 6px 16px; font-size: 13px;
}
.fp-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; }

/* ---- Member list ---- */
.fp .fp-letters { margin: 0; padding: 10px 12px; }  /* .ui-pills in a card; margin and padding: over its phone rule */
.fp .fp-letters a { justify-content: center; min-width: 34px; padding: 0 8px; }
.fp .fp-member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp .fp-member img { flex: none; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--ui-line); object-fit: cover; }
.fp .fp-member-text { display: flex; flex-direction: column; min-width: 0; font-weight: bold; }
.fp .fp-member-text .ui-small { font-weight: normal; }
.fp .fp-stars img { margin-right: 1px; vertical-align: -1px; }
.fp .fp-members td { white-space: nowrap; }
.fp .fp-members td:first-child { white-space: normal; min-width: 200px; }

/* ---- Search ---- */
.fp .fp-search-main { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.fp .fp-grow { flex: 1 1 260px; }
.fp .fp-radios { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.fp .fp-radios legend { float: left; width: auto; margin: 0 8px 0 0; padding: 0; border: 0; font-size: 14px; }
.fp .fp-radios label, .fp .fp-search-grid .ui-small label { margin: 0; font-weight: normal; }
.fp .fp-search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 20px; }
.fp .fp-inline { display: flex; align-items: center; gap: 6px; }
.fp .fp-inline > select { flex: 1 1 auto; min-width: 0; }
.fp .fp-short { width: 80px; flex: none; }
.fp .fp-hit { display: flex; gap: 12px; padding: 12px var(--ui-pad-x); border-bottom: 1px solid #eef1f4; }
.fp .fp-hit:last-child { border-bottom: 0; }
.fp .fp-hit-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fp .fp-snippet { margin: 0; font-size: 14px; color: #333; overflow-wrap: anywhere; }

/* ---- Old pages kept for the record, the unsaved thread, the editor ---- */
.fp .fp-narrow { max-width: 480px; width: 100%; }
.fp .fp-prose p { line-height: 1.6; }
.fp .fp-known { max-width: 420px; }
.fp .fp-known dd { text-align: left; }
.fp .fp-editor textarea { min-height: 260px; }
.fp .fp-mycode { grid-template-columns: 1fr auto; font-size: 13px; }
.fp .fp-mycode code { padding: 0; background: none; color: #3d4852; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.fp .fp-preview .tp-body { padding: 18px 22px; }

/* ---- Tablets and phones (the forum's one extra width: its rows have four columns): rows stack, numbers go on one
   small line ---- */
@media (max-width: 760px) {
  .fp .fp-col { display: none; }
  .fp .fp-row { flex-wrap: wrap; align-items: flex-start; gap: 4px 12px; padding: 12px 16px; }
  .fp .fp-main { flex: 1 1 calc(100% - 52px); }
  .fp .fp-num, .fp .fp-last { width: auto; padding-left: 0; font-size: 13px; color: var(--ui-muted); text-align: left; }
  .fp .fp-num { margin-left: 52px; }
  .fp .fp-num + .fp-num { margin-left: 0; }
  .fp .fp-num-label { display: inline; }
  .fp .fp-last { flex: 1 1 100%; margin-left: 52px; }
  .fp .fp-thread .fp-num { margin-left: 48px; }
  .fp .fp-thread .fp-num + .fp-num { margin-left: 0; }
  .fp .fp-thread .fp-last { margin-left: 48px; }
  .fp .fp-cat-head { padding: 10px 16px; }
  .fp .fp-hit { padding: 12px 16px; }
  .fp .fp-head-search { width: 100%; }
  .fp .fp-head-search .ui-input { width: auto; }
  .fp .fp-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fp .fp-pager { margin-left: 0; }
}
/* the results card's foot only when it holds a pager (forum-search.js fills it on long results) */
.fp .fp-results-foot:not(:has(.fp-pager)) { display: none; }