/* Board (thread list), thread (posts) and the reply and new-thread forms.
   The look follows docs/mockups/Board.dc.html and Thread.dc.html.

   Mobile first: the rules outside a media query lay the page out for a phone; the
   min-width blocks at the end add the desktop columns. Everything tapped is at least
   44 px tall, form fields use 16 px text (smaller makes an iPhone zoom the page). The
   only motion is a hover fading in and a button lifting a pixel, and site.css turns it
   off for anyone whose device asks for less motion.

   Every color, font, corner radius, shadow and gradient is a custom property from
   site.css, so a community's theme can change them. A value with no variable yet gets
   one there first.

   THE BUTTONS HAVE AN ORDER. One main action on a page (Reply, New thread, Save) is
   "forum-button primary": the accent with weight and a colored shadow. Other actions
   are plain "forum-button": a quiet raised button. The actions under a post (Report,
   Edit, Quote) are text only until pointed at. */

.forum-page { display: flex; flex-direction: column; gap: 14px; margin-top: -12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.forum-page a:focus-visible, .forum-button:focus-visible, .forum-field:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip);
}

/* Breadcrumb and page heading */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head-main { flex: 1 1 360px; min-width: 0; }
.page-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: var(--tight); overflow-wrap: anywhere; }
.page-sub { margin: 6px 0 0; color: var(--muted); }
.page-sub.small { font-size: 14px; }

/* Buttons and fields */
.forum-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--button-line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); box-shadow: var(--elev-1);
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease), background-color var(--ease), color var(--ease);
}
.forum-button:hover { border-color: var(--control-line); box-shadow: var(--elev-2); transform: translateY(-1px); }
.forum-button:active { box-shadow: var(--elev-1); transform: none; }
.forum-button:disabled, .forum-button:disabled:hover { box-shadow: none; transform: none; }
/* The main action: the accent under a gradient that gives it weight, and a shadow of its own color. */
.forum-button.primary { border-color: transparent; background: var(--primary-fill), var(--accent); color: var(--on-accent); box-shadow: var(--primary-shadow); }
.forum-button.primary:hover { border-color: transparent; box-shadow: var(--primary-shadow), var(--elev-2); }
.forum-button.small { padding: 0 12px; font-size: 14px; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; }
/* A box to type in. Its border is strong enough to see where to type (3 to 1), and it
   takes a ring of the accent while the keyboard is in it. */
.forum-field {
  display: block; width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--field-line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.forum-field:focus { border-color: var(--accent); box-shadow: var(--field-glow); }
textarea.forum-field { resize: vertical; line-height: 1.5; }

/* The row above and below a list: the pager on one side, an action on the other */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }

/* Numbered pages */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.pager-status { margin-right: 6px; color: var(--muted); }
.pager-gap { color: var(--muted); }
.pager a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 8px;
  border: 1px solid var(--button-line); border-radius: var(--radius-small);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--elev-1);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.pager a:hover { border-color: var(--control-line); box-shadow: var(--elev-2); }
.pager a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 600; }
.pager a.pager-step { padding: 0 12px; font-weight: 600; }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.jump .forum-field { width: 84px; padding: 0 10px; }

/* Thread list. On a phone each thread is a stack of lines: the title, who started it,
   then the counts and the last post. */
.thread-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 10px 16px 4px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: var(--surface-alt); }
.thread-row.pinned { background: var(--surface-alt); }
.thread-row.pinned:hover { background: var(--surface-head); }
.thread-main { position: relative; flex: 1 1 100%; min-width: 0; padding: 4px 0; }
.thread-title { font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.thread-title:hover { text-decoration: underline; }
/* The whole title block is the link's tap area, not just its letters. */
.thread-title::after { content: ""; position: absolute; inset: 0; }
.thread-by { margin-top: 2px; font-size: 13px; color: var(--muted); }
/* The little "Pages 1 2 3" links are too small to tap: phones use the title, the last
   post link and the thread's own page numbers. They appear from tablet width up. */
.thread-pages { display: none; }
.thread-counts { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--muted); }
.thread-counts span + span::before { content: "· "; }
/* The latest post: the poster's avatar (Shared/LastPosters), then who and when. */
.thread-last {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; color: var(--muted); text-decoration: none;
}
.thread-last-text { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; overflow-wrap: anywhere; }
.thread-last strong { color: var(--ink); font-weight: 600; }
.thread-last:hover strong { text-decoration: underline; }
.tag {
  display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: var(--radius-round);
  background: var(--band); color: var(--ink); font-size: 12px; font-weight: 600; vertical-align: middle;
}
.tag.strong { background: var(--ink); color: var(--on-ink); }

/* Posts. On a phone the user card lies across the top of the post. */
.posts { display: flex; flex-direction: column; gap: 16px; }
/* A post is a card. "scroll-margin-top" is the air above a post a link jumped to; the
   sticky header's own height is kept clear by scroll-padding-top on the page (site.css). */
.post {
  display: flex; flex-wrap: wrap; overflow: hidden; scroll-margin-top: 12px;
  border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--elev-2);
}
/* The post a link jumped to is ringed with the accent and lifted. */
.post:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--elev-3); }
.post-author {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 12px 16px;
  background: var(--panel-fill); color: var(--muted); font-size: 13px;
}
/* An avatar has a ring of the surface and a soft shadow, so it sits on the card, not in it. */
.avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: var(--radius-round);
  background: var(--band); color: var(--ink); box-shadow: var(--avatar-ring);
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
}
.post-author-name { color: var(--ink); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.post-main { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; padding: 4px 16px 14px; }
.post-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 13px;
}
.post-meta a { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 44px; min-height: 44px; color: var(--muted); }
.post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: auto; padding-top: 16px; }
/* Under a post the actions are quiet: text only, until pointed at or reached by keyboard. */
.post-actions .forum-button { border-color: transparent; background: none; box-shadow: none; color: var(--muted); }
.post-actions .forum-button:hover { border-color: transparent; background: var(--band); box-shadow: none; color: var(--ink); transform: none; }

/* What a member wrote, as PostRendering returns it. The element carries a second class
   for the post's format, and each format's styles hang off its own class, so the two
   never restyle each other: "md-post" (a Markdown post, styled here) or "rf-post" (a post
   made in the editor, styled in editor.css along with the editor itself). */
.post-body { margin-top: 14px; }
.post-edited { white-space: nowrap; }

/* A Markdown post. Long words and addresses wrap; a wide code block scrolls inside its
   own box, never the page. */
.md-post { line-height: 1.55; overflow-wrap: anywhere; }
.md-post > :first-child { margin-top: 0; }
.md-post > :last-child { margin-bottom: 0; }
.md-post p, .md-post ul, .md-post ol, .md-post pre { margin: 12px 0 0; }
.md-post ul, .md-post ol { padding-left: 24px; }
.md-post li + li { margin-top: 4px; }
.md-post h3, .md-post h4, .md-post h5, .md-post h6 { margin: 18px 0 0; font-family: inherit; font-size: 17px; line-height: 1.3; letter-spacing: 0; }
.md-post h4, .md-post h5, .md-post h6 { font-size: 15px; }
.md-post hr { margin: 16px 0 0; border: 0; border-top: 1px solid var(--line); }
.md-post blockquote {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-small);
  background: var(--band); color: var(--ink); font-size: 14px;
}
.md-post blockquote > :first-child { margin-top: 0; }
.md-post code { padding: 1px 5px; border-radius: var(--radius-chip); background: var(--band); font-family: var(--font-mono); font-size: 13px; }
.md-post pre { max-width: 100%; padding: 12px 14px; border-radius: var(--radius-small); background: var(--band); overflow-x: auto; }
.md-post pre code { padding: 0; background: none; overflow-wrap: normal; }
.md-post a { color: var(--accent); }
/* A link an add-on made from the text, such as a call sign. */
.md-post a.linked { font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
.md-post a.linked:hover { text-decoration: underline; }

/* Quick reply, new thread and edit. A box of its own rather than a .card: a card clips
   what is inside it, which would stop the editor's toolbar from staying in view while a
   long post scrolls. */
.compose { padding: 16px; border: 1px solid var(--card-line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--elev-2); }
/* The label above the editor ("Quick reply"), written by the _Editor partial. */
.compose .rf-field-label { display: block; margin-bottom: 10px; font-family: var(--font-heading); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.compose .forum-field + .rf-field, .compose .preview + .rf-field { margin-top: 14px; }
.compose-foot .buttons { margin-left: auto; }
/* A form that only works with the editor is put away where scripts are off; the page says why. */
@media (scripting: none) { .needs-script { display: none; } }
.compose-title { margin: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.compose-label { display: block; margin-top: 14px; font-weight: 600; }
.compose-label:first-child { margin-top: 0; }
.compose .forum-field { margin-top: 10px; }
.compose-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.compose-foot .muted { font-size: 13px; }
.note { margin: 0; color: var(--muted); }
.sign-in-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-weight: 600; }
.forum-error { margin: 10px 0 0; color: var(--danger); font-weight: 600; }
.preview { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--control-line); border-radius: var(--radius-small); }
.preview-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.preview .post-body { margin-top: 8px; }
.preview + .forum-error, .forum-error + .rf-field, .forum-error + .compose-label { margin-top: 12px; }

/* Tablet and up: room for the desktop columns. */
@media (min-width: 768px) {
  .forum-page { gap: 16px; margin-top: -8px; }
  .page-title { font-size: 30px; }

  /* Thread list: title, counts and last post side by side. */
  .thread-row { gap: 8px 20px; padding: 14px 22px; }
  .thread-main { flex: 1 1 340px; padding: 0; }
  .thread-title::after { content: none; }
  .thread-pages { display: inline; }
  .thread-pages a { color: var(--accent); }
  .thread-counts { flex: 0 0 110px; display: block; }
  .thread-counts span { display: block; }
  .thread-counts span + span::before { content: none; }
  .thread-last { flex: 0 1 216px; gap: 10px; min-width: 0; min-height: 0; }
  .thread-last-text { display: block; }
  .thread-last strong, .thread-last time { display: block; }
  .thread-last-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  /* Posts: the user card stands beside the post. */
  .posts { gap: 16px; }
  .post-author { flex: 0 0 196px; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; padding: 20px; }
  .avatar { width: 64px; height: 64px; font-size: 22px; }
  .post-author-name { margin-top: 4px; }
  .post-main { flex: 999 1 420px; padding: 8px 24px 16px; }

  .compose { padding: 18px 20px 20px; }
}

/* A mouse can hit a smaller page number, as in the mockup. Touch screens keep 44 px. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .pager a { min-width: 36px; height: 36px; }
  .crumbs a { min-height: 0; }
  .post-meta a { min-height: 36px; }
}