/* FORUM (owner, 23 Oct 2026 — massagerepublic's forum): /forums/ · /forums/{section}/ · /forums/{section}/{topic}/
   Colours come from the palette tokens only, so the admin's theme and the light mode carry over. */

.fm { padding-bottom: 56px }
.fm-wrap { padding-top: 26px }

/* ── hero: heading + search ─────────────────────────────────────────────── */
.fm-hero {
      background: var(--c-texture), linear-gradient(180deg, var(--c-band-mid1), var(--c-band-mid2));
      border-bottom: 1px solid var(--c-border);
      padding: 38px 0 34px
}
.fm-hero__in { text-align: center }
.fm-hero__h { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; color: var(--c-accent); line-height: 1.2 }
.fm-hero__sub { margin: 10px auto 0; max-width: 60ch; color: var(--c-text-muted); font-size: 16px; line-height: 1.5 }
.fm-search {
      position: relative;
      max-width: 600px;
      margin: 20px auto 0
}
.fm-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: 15px; pointer-events: none }
.fm-search input {
      width: 100%;
      height: 48px;
      padding: 0 16px 0 44px;
      border-radius: 10px;
      border: 1px solid var(--c-border);
      background: var(--c-dark);
      color: var(--c-text);
      font-size: 16px
}
.fm-search input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18) }

.fm-h2 { margin: 30px 0 12px; font-size: 19px; font-weight: 700; color: var(--c-text) }

/* ── section cards (index) ──────────────────────────────────────────────── */
.fm-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      border: 1px solid var(--c-border);
      border-radius: 12px;
      overflow: hidden;
      background: var(--c-surface)
}
.fm-card {
      position: relative;
      padding: 18px 20px;
      border-right: 1px solid var(--c-border);
      border-bottom: 1px solid var(--c-border);
      transition: background .15s
}
.fm-card:nth-child(2n) { border-right: 0 }
.fm-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0 }   /* a card alone on its row (General) takes the whole row, no empty half */
.fm-card:nth-last-child(-n+2):nth-child(odd), .fm-card:last-child { border-bottom: 0 }
.fm-card:hover { background: var(--c-surface-light) }
.fm-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.fm-card__name { margin: 0; font-size: 18px; font-weight: 700 }
.fm-card__name a { color: var(--c-accent); text-decoration: none }
.fm-card__name a::after { content: ""; position: absolute; inset: 0 }   /* the whole card is the link */
.fm-card__count { color: var(--c-text-muted); font-size: 13.5px; white-space: nowrap }
.fm-card__desc { margin: 7px 0 0; color: var(--c-text); font-size: 14.5px; line-height: 1.45 }
.fm-card__upd { margin: 7px 0 0; color: var(--c-muted); font-size: 13.5px }
.fm-cityhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; scroll-margin-top: 90px }
.fm-citypick { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: 13px; color: var(--c-text-muted) }
.fm-citypick select {
      min-width: 230px;
      height: 42px;
      padding: 0 12px;
      border-radius: 9px;
      border: 1px solid var(--c-border);
      background: var(--c-surface);
      color: var(--c-text);
      font-size: 15px
}

/* ── section + topic: sections on the left, the content on the right ─── */
.fm-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 36px; align-items: start }
.fm-side { display: flex; flex-direction: column; position: sticky; top: 90px }
.fm-side__item {
      display: block;
      padding: 14px 16px;
      border-bottom: 1px solid var(--c-border);
      text-decoration: none;
      border-left: 3px solid transparent
}
.fm-side__item b { display: block; color: var(--c-accent); font-size: 16.5px }
.fm-side__item span { display: block; margin-top: 4px; color: var(--c-text-muted); font-size: 13.5px; line-height: 1.4 }
.fm-side__item:hover { background: var(--c-tint) }
.fm-side__item.is-on { border-left-color: var(--c-accent); background: var(--c-tint) }
.fm-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; color: var(--c-text-muted) }
.fm-crumb a { color: var(--c-text); text-decoration: none }
.fm-crumb a:hover { color: var(--c-accent) }

.fm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px }
.fm-bar__count { color: var(--c-text-muted); font-size: 14px }
.fm-bar__new { display: inline-flex; align-items: center; gap: 8px }

/* ── topic list ─────────────────────────────────────────────────────────── */
.fm-topics { list-style: none; margin: 0; padding: 0 }
.fm-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-border) }
.fm-row__n {
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--c-accent);
      color: var(--c-on-accent);
      font-size: 13.5px;
      font-weight: 700
}
.fm-row__b { min-width: 0; padding-top: 5px; line-height: 1.45 }
.fm-row__t { color: var(--c-text); font-weight: 700; font-size: 16px; text-decoration: none; overflow-wrap: anywhere; text-transform: none }
.fm-row__t:hover { color: var(--c-accent) }
.fm-row__m { color: var(--c-muted); font-size: 13.5px; margin-left: 4px }
.fm-row__m::before { content: "|"; margin-right: 6px; opacity: .6 }
.fm-row.is-pinned .fm-row__n { background: var(--c-accent-light) }
.fm-row.is-wait { opacity: .75 }
.fm-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: 6px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid var(--c-border);
      color: var(--c-text-muted);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      vertical-align: 2px
}
.fm-tag--wait { border-color: rgba(var(--c-warning-rgb), .5); color: var(--c-warning) }
.fm-tag--staff { border-color: rgba(var(--c-accent-rgb), .55); color: var(--c-accent) }
.fm-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0 }
.fm-pager a, .fm-pager span {
      min-width: 38px;
      height: 38px;
      padding: 0 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--c-border);
      color: var(--c-text);
      text-decoration: none;
      font-weight: 600
}
.fm-pager span[aria-current] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent) }
.fm-empty { color: var(--c-text-muted); font-size: 15px; margin: 16px 0 }
.fm-empty a { color: var(--c-accent) }

/* ── topic ──────────────────────────────────────────────────────────────── */
.fm-topic__h { margin: 4px 0 6px; font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: var(--c-accent); line-height: 1.3; overflow-wrap: anywhere; text-transform: none }   /* a member's title as they typed it ("iPhone", not "IPhone") */
.fm-topic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 18px; color: var(--c-text-muted); font-size: 14px }
.fm-topic__meta .fm-tag { margin-left: 0 }
.fm-follow { margin: 0 0 0 auto }
.fm-follow__btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--c-border);
      background: transparent;
      color: var(--c-accent);
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer
}
a.fm-follow__btn { margin-left: auto }
.fm-follow__btn:hover { border-color: var(--c-accent) }
.fm-follow__btn.is-on { background: rgba(var(--c-accent-rgb), .12); border-color: rgba(var(--c-accent-rgb), .5) }
.fm-post__body a, .fm-quote a { color: var(--c-accent); overflow-wrap: anywhere }
.fm-topic__meta b { color: var(--c-text) }
.fm-topic__meta b.is-staff { color: var(--c-accent) }
.fm-topic__admin { margin-left: 10px; color: var(--c-accent); font-size: 13px }
.fm-posts { display: flex; flex-direction: column }
.fm-post { padding: 18px 0; border-bottom: 1px solid var(--c-border); scroll-margin-top: 90px }
.fm-post__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px }
.fm-post__ava {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--c-tint);
      border: 1px solid var(--c-border);
      color: var(--c-accent);
      font-weight: 700
}
.fm-post__name { color: var(--c-text); font-size: 15.5px }
.fm-post__time { color: var(--c-muted); font-size: 13.5px }
.fm-post__body { color: var(--c-text); font-size: 16px; line-height: 1.7; overflow-wrap: anywhere }
.fm-post--staff { padding-left: 16px; border-left: 3px solid var(--c-accent); background: linear-gradient(90deg, rgba(var(--c-accent-rgb), .07), transparent 60%) }
.fm-post--staff .fm-post__ava { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent) }
.fm-post.is-wait { opacity: .75 }
.fm-post__quote {
      margin-top: 10px;
      padding: 4px 10px;
      border-radius: 7px;
      border: 1px solid var(--c-border);
      background: transparent;
      color: var(--c-text-muted);
      font-size: 13px;
      cursor: pointer
}
.fm-post__quote:hover { color: var(--c-accent); border-color: var(--c-accent) }
.fm-quote {
      margin: 0 0 12px;
      padding: 10px 14px;
      border-left: 3px solid var(--c-muted);
      background: var(--c-tint);
      border-radius: 0 8px 8px 0;
      color: var(--c-text);
      font-size: 15px;
      line-height: 1.6;
      overflow-wrap: anywhere
}
.fm-quote b { display: block; margin-bottom: 3px; color: var(--c-text-muted); font-size: 13.5px }
.fm-quote--pv { position: relative; padding-right: 38px }
.fm-quote__x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; color: var(--c-text-muted); font-size: 20px; line-height: 1; cursor: pointer }

/* ── forms ──────────────────────────────────────────────────────────────── */
.fm-reply { margin-top: 26px; scroll-margin-top: 90px }
.fm-form { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); margin: 0 0 18px; scroll-margin-top: 90px }
.fm-form .fm-h2 { margin: 0 0 6px }
.fm-form--topic summary { cursor: pointer; color: var(--c-accent); font-weight: 700; font-size: 16px }
.js .fm-form--topic:not([open]) { display: none }   /* the "Start a new topic" button opens it; without JS the bar stays as the way in */
.fm-form--topic[open] summary { margin-bottom: 10px }
.fm-form--topic form { display: flex; flex-direction: column; gap: 6px }
.fm-form__lab { margin-top: 8px; color: var(--c-text); font-size: 14px; font-weight: 600 }
.fm-form__in, .fm-form__ta {
      width: 100%;
      padding: 10px 12px;
      border-radius: 9px;
      border: 1px solid var(--c-border);
      background: var(--c-dark);
      color: var(--c-text);
      font-size: 16px;
      font-family: inherit
}
.fm-form__ta { resize: vertical; line-height: 1.6 }
.fm-form__in:focus, .fm-form__ta:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18) }
.fm-form__hint { color: var(--c-muted); font-size: 13px }
.fm-form__as { margin: 0; color: var(--c-text-muted); font-size: 14px }
.fm-form__as b { color: var(--c-text) }
.fm-form__as i { color: var(--c-accent) }
.fm-form__as--staff { padding: 9px 12px; border-radius: 9px; border: 1px solid rgba(var(--c-accent-rgb), .45); background: rgba(var(--c-accent-rgb), .08); line-height: 1.5 }
.fm-form__note { margin: 4px 0 0; color: var(--c-text-muted); font-size: 13.5px }
.fm-form button[type=submit] { align-self: flex-start; margin-top: 12px }
.fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.fm-gate { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--c-text-muted); font-size: 14.5px }

.fm-msg { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 15px; border-radius: 10px; font-size: 14.5px; line-height: 1.5; color: var(--c-text) }
.fm-msg--ok   { background: rgba(var(--c-success-rgb), .12); border: 1px solid rgba(var(--c-success-rgb), .4) }
.fm-msg--ok i { color: var(--c-success) }
.fm-msg--err  { background: rgba(var(--c-danger-rgb), .12); border: 1px solid rgba(var(--c-danger-rgb), .4) }
.fm-msg--err i { color: var(--c-danger) }
.fm-msg--wait { background: rgba(var(--c-warning-rgb), .1); border: 1px solid rgba(var(--c-warning-rgb), .4) }
.fm-msg--wait i { color: var(--c-warning) }

/* ── tablet / phone ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .fm-layout { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .fm-side { position: static; order: 2; margin-top: 30px; border-top: 1px solid var(--c-border) }
}
@media (max-width: 680px) {
  .fm-hero { padding: 26px 0 24px }
  .fm-grid { grid-template-columns: minmax(0, 1fr) }
  .fm-card { border-right: 0 }
  .fm-form { padding: 14px }
  .fm-row__m { display: block; margin-left: 0 }
  .fm-row__m::before { content: none }
  .fm-tag { margin: 4px 6px 0 0 }
  .fm-citypick select { min-width: 0; width: 100% }
  .fm-citypick { width: 100% }
}