/* Forum: the lists, a topic and its posts, the composer, the rules and Carlos's reports, laid out like the
   Portfolio123 forum (Discourse) in the portal's light look. Colors, radii and motion come from app.css
   tokens; gold appears only on the darkest ground (an avatar tone on ink-900). Every rule carries the fm-
   prefix, since every feature stylesheet loads on every page. Nothing scrolls sideways at 375 px: the list
   drops its posters and views columns on phones and shows the original poster beside the title instead. */

.fm-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.fm-narrow {
  max-width: 840px;
  margin-inline: auto;
  width: 100%;
}

/* Latest and Categories (and Carlos's Reports), then search. */
.fm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.fm-bar-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.fm-reports-link,
.fm-rules-link {
  text-decoration: none;
}

.fm-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fm-gate {
  margin: 0;
  max-width: 320px;
}

/* The door (2026-10-31): Research's gate at the reading measure, the lock and the line, then the outline button, which
   wraps under the line when space runs out. */
.fm-door {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 728px;
  padding: 24px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.fm-door-line {
  display: flex;
  flex: 1 1 240px;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 24px;
}

.fm-door-line .icon {
  flex: none;
  margin-top: 2px;
}

.fm-inline {
  display: inline-flex;
  margin: 0;
}

/* The topic list. */
.fm-list {
  table-layout: auto;
}

.fm-list tbody :is(td, th) {
  height: auto;
  padding-block: 14px;
}

.fm-topic-cell {
  width: 100%;
  min-width: 0;
}

.fm-topic-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.fm-op-phone {
  display: none;
  flex: none;
  padding-top: 2px;
}

.fm-topic-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fm-topic-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.fm-topic-link {
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.fm-topic-link:hover {
  text-decoration: underline;
}

.fm-topic-link:visited {
  color: var(--ink-700);
}

/* A topic with posts the reader has not read: the title stands out, as on Discourse. */
.fm-row-unread .fm-topic-link {
  font-weight: 600;
  color: var(--ink-900);
}

.fm-lock {
  display: inline-flex;
  color: var(--ink-500);
}

.fm-new {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-control);
  color: var(--navy-800);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}

.fm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-control);
  background: var(--navy-800);
  color: var(--white);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-decoration: none;
}

.fm-count:hover {
  background: var(--navy-700);
  color: var(--white);
}

.fm-topic-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* A search result's matching post under its title, the word searched for in bold. */
.fm-hit-line {
  display: block;
  margin-top: 6px;
  max-width: 640px;
  overflow-wrap: anywhere;
}

.fm-hit {
  color: var(--ink-900);
  font-weight: 600;
}

/* A category: a square swatch in its token, then the name. */
.fm-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--ink-700);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-decoration: none;
}

.fm-cat:hover {
  color: var(--ink-900);
  text-decoration: underline;
}

.fm-swatch {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--ink-500);
}

.fm-swatch-navy-700 {
  background: var(--navy-700);
}

.fm-swatch-navy-800 {
  background: var(--navy-800);
}

.fm-swatch-navy-900 {
  background: var(--navy-900);
}

.fm-swatch-ink-500 {
  background: var(--ink-500);
}

.fm-swatch-ink-700 {
  background: var(--ink-700);
}

.fm-swatch-ink-900 {
  background: var(--ink-900);
}

.fm-col-posters {
  white-space: nowrap;
}

.fm-col-replies {
  white-space: nowrap;
}

.fm-col-activity {
  min-width: 56px;
}

.fm-replies-icon {
  display: none;
  color: var(--ink-400);
}

.fm-posters {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The original poster first, a little apart from the others. */
.fm-poster-op {
  margin-right: 4px;
}

.fm-more-link {
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Initials circles in six brand tones, from dark to light, so neighbors tell apart; gold only on ink-900. */
.fm-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--navy-800);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fm-avatar-sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
  line-height: 16px;
}

.fm-avatar-md {
  width: 44px;
  height: 44px;
  font-size: 15px;
  line-height: 20px;
}

.fm-avatar-0 {
  background: var(--navy-800);
  color: var(--white);
}

.fm-avatar-1 {
  background: var(--ink-500);
  color: var(--white);
}

.fm-avatar-2 {
  background: var(--ink-200);
  color: var(--navy-800);
}

.fm-avatar-3 {
  background: var(--ink-400);
  color: var(--ink-900);
}

.fm-avatar-4 {
  border-color: var(--ink-300);
  background: var(--white);
  color: var(--navy-800);
}

.fm-avatar-5 {
  background: var(--ink-900);
  color: var(--gold-400);
}

/* Categories: a bar in the category's token down the left of each row, as on Discourse. */
.fm-cats tbody :is(td, th) {
  height: auto;
  padding-block: 16px;
}

.fm-cat-cell {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.fm-swatch-bar {
  width: 4px;
  height: auto;
  min-height: 44px;
}

.fm-cat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fm-cat-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-900);
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
}

.fm-cat-name:hover {
  text-decoration: underline;
}

.fm-col-latest {
  min-width: 0;
}

.fm-cat-latest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-wrap: anywhere;
}

/* A topic. */
.fm-topic {
  max-width: 920px;
  margin-inline: auto;
  width: 100%;
}

.fm-topic-head h1 {
  overflow-wrap: anywhere;
}

.fm-moderate {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--white);
}

.fm-moderate .fold-summary {
  min-height: var(--target);
  padding: 8px 16px;
}

.fm-moderate-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px 16px;
}

.fm-moderate-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.fm-moderate-form > .field {
  flex: 1 1 240px;
}

.fm-posts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-200);
}

.fm-post {
  display: flex;
  gap: 16px;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--ink-200);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

/* The post a link points at (#post-3): a hairline on its left, as Discourse marks it. */
.fm-post:target {
  margin-left: -12px;
  padding-left: 10px;
  border-left: 2px solid var(--navy-800);
}

.fm-post-muted .fm-post-body {
  color: var(--ink-500);
}

.fm-post-side {
  flex: none;
}

.fm-post-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fm-post-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.fm-post-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
}

.fm-name {
  /* A name never reorders the words around it (format characters are stripped from names; this is the backstop). */
  unicode-bidi: isolate;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.fm-staff {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-control);
  background: var(--navy-800);
  color: var(--white);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fm-reply-to {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-500);
  text-decoration: none;
}

.fm-reply-to:hover {
  color: var(--ink-900);
  text-decoration: underline;
}

.fm-post-when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-500);
}

.fm-edited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-500);
}

.fm-permalink {
  color: var(--ink-500);
  text-decoration: none;
}

.fm-permalink:hover {
  text-decoration: underline;
}

.fm-post-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.fm-placeholder {
  margin: 0;
  color: var(--ink-500);
  font-style: italic;
}

/* A rendered body (markdown.ts): calm prose, code in mono, no image wider than the column. */
.fm-md {
  min-width: 0;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.fm-md > :first-child {
  margin-top: 0;
}

.fm-md > :last-child {
  margin-bottom: 0;
}

.fm-md p,
.fm-md ul,
.fm-md ol,
.fm-md blockquote,
.fm-md pre,
.fm-md .fm-md-table {
  margin: 0 0 12px;
}

.fm-md ul,
.fm-md ol {
  padding-left: 24px;
}

.fm-md h3,
.fm-md h4,
.fm-md h5,
.fm-md h6 {
  margin: 20px 0 8px;
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.fm-md h5,
.fm-md h6 {
  font-size: 15px;
  line-height: 22px;
}

.fm-md blockquote {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--ink-300);
  color: var(--ink-700);
}

.fm-md code {
  padding: 1px 4px;
  border-radius: var(--radius-control);
  background: var(--ink-100);
  font-family: var(--font-mono);
  font-size: 13px;
}

.fm-md pre {
  overflow-x: auto;
  padding: 12px 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background: var(--ink-50);
}

.fm-md pre code {
  padding: 0;
  background: transparent;
  white-space: pre;
}

.fm-md hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--ink-200);
}

.fm-md img {
  display: block;
  max-width: 100%;
  height: auto;
}

.fm-md-table {
  overflow-x: auto;
}

.fm-md-table table {
  border-collapse: collapse;
}

.fm-md-table :is(th, td) {
  padding: 6px 12px;
  border: 1px solid var(--ink-200);
  text-align: left;
}

.fm-md-table th {
  background: var(--ink-50);
  font-weight: 600;
}

.fm-md-table .fm-md-center {
  text-align: center;
}

.fm-md-table .fm-md-right {
  text-align: right;
}

.fm-md-muted {
  color: var(--ink-500);
}

/* Images under the body: small tiles that open at full size. */
.fm-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-gallery-link {
  display: block;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.fm-gallery-img {
  display: block;
  width: 160px;
  height: 120px;
  object-fit: cover;
  background: var(--ink-50);
}

/* Heart, the menu and Reply, on the right under the post. */
.fm-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.fm-heart,
.fm-reply-link {
  min-width: var(--target);
  padding: 0 10px;
  border-radius: var(--radius-control);
  color: var(--ink-500);
  text-decoration: none;
}

.fm-heart.btn-sm,
.fm-reply-link.btn-sm {
  padding: 0 10px;
}

.fm-heart:hover,
.fm-reply-link:hover {
  background: var(--ink-100);
  color: var(--navy-800);
}

.fm-heart[aria-pressed="true"] {
  color: var(--navy-800);
}

.fm-heart-count {
  font-variant-numeric: tabular-nums;
}

.fm-heart-static {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--target);
  padding: 0 10px;
  color: var(--ink-500);
  font-size: 14px;
}

/* The post's menu: Report, Edit, Withdraw, Show again, Moderate. */
.fm-menu {
  position: relative;
}

.fm-menu-toggle {
  list-style: none;
  color: var(--ink-500);
}

.fm-menu-toggle::-webkit-details-marker {
  display: none;
}

.fm-menu > .fm-menu-panel {
  top: 48px;
  right: 0;
}

/* The topic's facts under its first post. */
.fm-map {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 4px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-card);
  background: var(--ink-50);
}

.fm-map-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fm-map-item dt {
  color: var(--ink-500);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fm-map-item dd {
  margin: 0;
  color: var(--ink-900);
  font-size: 14px;
  line-height: 28px;
}

.fm-map-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fm-map-num {
  font-family: var(--font-mono);
}

/* The composer at the foot of a topic, framed like Discourse's docked editor: a navy edge on top. */
.fm-reply {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px 24px;
  border: 1px solid var(--ink-200);
  border-top: 3px solid var(--navy-800);
  border-radius: var(--radius-card);
  background: var(--white);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

.fm-reply-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--navy-800);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
}

.fm-composer {
  scroll-margin-top: calc(var(--bar-h) + 16px);
}

.fm-composer-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
  align-items: start;
  gap: 16px;
}

.fm-composer-meta > :only-child {
  grid-column: 1 / -1;
}

.fm-title-field,
.fm-category-field {
  min-width: 0;
}

/* The formatting buttons sit on the message's top edge (shown by forum.js). */
.fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: -8px;
  padding: 2px;
  border: 1px solid var(--ink-300);
  border-bottom: 0;
  border-top-left-radius: var(--radius-control);
  border-top-right-radius: var(--radius-control);
  background: var(--ink-50);
}

.fm-toolbar:not([hidden]) + .input {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.fm-tool {
  color: var(--ink-700);
}

.fm-tool-glyph {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 20px;
}

.fm-body-field textarea {
  min-height: 160px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 22px;
}

.fm-replying {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.fm-replying-icon {
  display: inline-flex;
  color: var(--ink-500);
}

.fm-replying-clear {
  margin-left: auto;
}

.fm-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-card);
  background: var(--white);
}

/* Images: one compact line instead of the large drop area. */
.fm-images-field .file-drop {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 12px 16px;
  text-align: left;
}

.fm-drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fm-attach {
  margin: 0;
  padding: 0;
  border: 0;
}

.fm-attach-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-attach-item .check {
  align-items: center;
}

.fm-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-control);
  background: var(--ink-50);
}

.fm-composer-actions {
  padding-top: 4px;
}

/* Report and moderation pages. */
.fm-quoted {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fm-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 24px;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 24px;
}

/* Hide post: reason, note and the button on one line, every control on the same baseline. */
.fm-hide-form {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
}

/* Silence: the length and the button, the button at its own width. */
.fm-silence-form {
  display: grid;
  grid-template-columns: minmax(0, 240px) auto;
  justify-content: start;
  align-items: end;
  gap: 12px 16px;
}

/* The rules link at the foot of a topic and of Report. */
.fm-page-foot {
  margin: 0;
  color: var(--ink-500);
}

.fm-report-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-report {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fm-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.fm-excerpt {
  margin: 0;
  padding: 12px 16px;
  border-left: 2px solid var(--ink-300);
  background: var(--ink-50);
  color: var(--ink-700);
  overflow-wrap: anywhere;
}

.fm-report-lines {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-report-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.fm-report-actions,
.fm-moderate-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fm-silenced-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

@media (max-width: 767px) {
  .fm-col-posters,
  .fm-col-views,
  .fm-col-latest {
    display: none;
  }

  .fm-op-phone {
    display: inline-flex;
  }

  /* The column names stay for screen readers only: the narrow columns leave the title its room. */
  .fm-list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fm-list tbody tr:first-child :is(td, th) {
    border-top: 1px solid var(--ink-200);
  }

  .fm-replies-icon {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 4px;
  }

  .fm-list .fm-col-activity {
    min-width: 0;
    color: var(--ink-500);
  }

  .fm-topic-link {
    font-size: 16px;
    line-height: 22px;
  }

  .fm-search {
    width: 100%;
  }

  .fm-search .search {
    flex: 1 1 auto;
    width: auto;
  }

  .fm-post {
    gap: 12px;
  }

  .fm-post:target {
    margin-left: -8px;
    padding-left: 6px;
  }

  .fm-avatar-md {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .fm-gallery-img {
    width: 120px;
    height: 90px;
  }

  .fm-map {
    gap: 8px 20px;
    padding: 12px;
  }

  .fm-reply {
    padding: 16px;
  }

  .fm-composer-meta,
  .fm-hide-form {
    grid-template-columns: minmax(0, 1fr);
  }
}