/* ---------------------------------------------------------------------------
   Operations Academia: the forum's own chrome (forum.html).

   Everything the list engine and the site's stylesheets do not already draw:
   the room tabs, the "you are posting as" banner, the question card's stats
   column and tag chips, the thread view (vote column, quote block, post
   footer), the compose boxes, the side cards. Built on the tokens in
   assets/v3.css and the classes of assets/oa-list.css and assets/oa-ui.css,
   so the page reads as this site and not as the design canvas it was drawn
   from.

   ANYTHING THAT PAINTS ITS OWN GROUND NAMES ITS OWN INK, in both themes: no
   rule below sets a background without a colour beside it, and every colour
   is a token defined in both themes of v3.css. A rule keyed on the phone
   breakpoint takes a control's SIZE up (rule 0 in
   _MOBILE-STANDARDS.md) and never its shape; rule 13 there is what the
   compose box holds to: a 16px textarea and 42px buttons, measured.

   The class prefix is oa-forum-. Ids the tests hook on are in forum.html and
   assets/oa-forum.js.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------ the layout */

.oa-forum-wrap { padding-bottom: 80px; }

/* THREE COLUMNS (owner, 2026-09-08): the sections down the left, the
   questions in the middle, the room's cards on the right, the arrangement of
   the site the forum was asked to resemble. */
.oa-forum-cols {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

/* ---------------------------------------------------------- the sections */

/* Home, Questions, Unanswered, Tags: a column of links with an icon each,
   the one the reader is in marked by a rail and a firmer ground. `body.v3`
   on the hover rule is load-bearing: a row is an <a>, and `body.v3 a:hover`
   in v3.css is (0,2,2), so without the prefix this (0,2,0) rule lost and the
   row hovered in the link colour with an underline. */
.oa-forum-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  padding: 6px 0 0;
}

.oa-forum-navlink {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px 8px 11px;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.oa-forum-navlink svg { flex: none; }

body.v3 .oa-forum-navlink:hover {
  background-color: var(--bg-3);
  color: var(--ink);
  text-decoration: none;
}

.oa-forum-navlink.is-on,
body.v3 .oa-forum-navlink.is-on:hover {
  border-left-color: var(--brand);
  background-color: var(--bg-3);
  color: var(--ink);
  font-weight: 600;
}

.oa-forum-navlink:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- home */

/* The doors: one per room this account may enter, each a card that is a
   link. The rail is the room's own colour, the one the tab dot and the room
   banner already use, so the three agree about which room is which. */
.oa-forum-homehead h2 {
  margin: 0 0 6px;
  font-size: 26px;
}

.oa-forum-homelede {
  margin: 0 0 20px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.oa-forum-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 18px;
}

.oa-forum-door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 42px;
  padding: 20px 22px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background-color: var(--bg-2);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.oa-forum-door.is-cand { border-left-color: var(--ok); }

body.v3 .oa-forum-door:hover {
  border-color: var(--brand);
  border-left-color: var(--gold);
  color: var(--ink-2);
  text-decoration: none;
}

body.v3 .oa-forum-door.is-cand:hover { border-left-color: var(--ok); }

.oa-forum-door:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.oa-forum-doorname {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.oa-forum-doorname .oa-forum-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--gold);
}

.oa-forum-door.is-cand .oa-forum-doorname .oa-forum-dot { background: var(--ok); }

.oa-forum-doorwho {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.oa-forum-doorgo {
  margin-top: 6px;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
}

/* -------------------------------------------------------- the order bar */

/* Under the heading of a list: the count on the left, the orders on the
   right as one segmented control, the one in force pressed. The Tags page
   draws the same control for its own three orders. */
.oa-forum-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.oa-forum-listbar .oa-forum-n { margin: 0; }

.oa-forum-sorts {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg-2);
  color: var(--ink-2);
  overflow: hidden;
}

.oa-forum-sortpill {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background-color: var(--bg-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.oa-forum-sortpill:last-child { border-right: 0; }

@media (hover: hover) and (pointer: fine) {
  .oa-forum-sortpill:hover:not([aria-pressed='true']) { background-color: var(--bg-3); color: var(--ink); }
}

.oa-forum-sortpill[aria-pressed='true'] {
  background-color: var(--bg-3);
  color: var(--ink);
  font-weight: 600;
}

.oa-forum-sortpill:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* --------------------------------------------------------- the tags page */

.oa-forum-tagsintro {
  margin: 6px 0 16px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

.oa-forum-tagsbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.oa-forum-tagfilter {
  width: 260px;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background-color: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  box-sizing: border-box;
}

.oa-forum-tagfilter:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.oa-forum-tagspage .oa-forum-n { margin: 0 0 12px; }

.oa-forum-taggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.oa-forum-tagcard {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: var(--bg-2);
  color: var(--ink-2);
}

.oa-forum-tagcard-head { display: flex; flex-wrap: wrap; gap: 8px; }

.oa-forum-tagcard-n {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

/* --ink-2, not --mut: the card paints its own ground (--bg-2), and --mut
   was tuned against the page's grounds rather than measured here */
.oa-forum-tagcard-when {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.oa-forum-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.oa-forum-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------ the rooms */

.oa-forum-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--ink-2);
}

.oa-forum-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.oa-forum-tab[aria-selected='true'] {
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.oa-forum-tab .oa-forum-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
}

.oa-forum-tab[data-room='candidates'] .oa-forum-dot { background: var(--ok); }

.oa-forum-tab:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.oa-forum-roomnote {
  margin: 0;
  color: var(--mut);
  font-size: 13.5px;
}

/* the room banner: which room, which season, who you are here */
.oa-forum-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink-2);
  box-shadow: var(--shadow);
  margin: 0 0 22px;
}

.oa-forum-banner.is-open { border-left-color: var(--gold); }

.oa-forum-banner .oa-forum-bt {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: 14.5px;
}

.oa-forum-banner .oa-forum-bs {
  display: block;
  color: var(--mut);
  font-size: 13.5px;
  margin-top: 2px;
}

.oa-forum-banner .oa-forum-as {
  text-align: right;
  color: var(--mut);
  font-size: 13px;
}

/* the archive: a past season, read-only */
.oa-archive-banner {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid var(--warn-line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--ink);
  font-size: 14px;
}

/* a handle, wherever one is printed */
.oa-forum-handle {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
}

.oa-forum-handle.is-me {
  background: var(--ok-soft);
  color: var(--ok);
}

/* ------------------------------------------------------------- the list */

.oa-forum-listhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 4px;
}

.oa-forum-listhead h2 {
  margin: 0;
  font-size: 26px;
}

.oa-forum-listhead .oa-forum-n {
  margin: 4px 0 0;
  color: var(--mut);
  font-size: 14px;
}

/* THE QUESTION CARD, in the Stack Overflow arrangement (owner, 2026-09-05:
   "I want the forum to look like stackoverflow"): a tally column on the left,
   then the title, the first lines, and a footer with the tags on one side and
   who asked on the other.

   The tags sitting UNDER the excerpt is the half that matters, and it is what
   settles the collision the owner reported the same day. Above the title they
   crowded it, and `.oa-label` is `display: inline` site-wide, a Bootstrap
   inheritance where vertical padding does not grow the line, so several chips
   on a row bleed into whatever is above and below. Scoped to this card rather
   than fixed globally, because every other list's badges are measured where
   they are. */
body.v3 .oa-forum-q {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  /* A COLUMN OF AIR BETWEEN THE TALLY AND THE QUESTION (owner, 2026-09-08,
     of a screenshot with the tally circled: "Add more space from e.g. 0 and
     'about'. Have a vertical column of space between the votes/answers/views
     and the question so that it reads nicer."). The numbers are right-aligned
     in their column, 2px in from its edge, and the head carries 6px of its
     own inset, so they stood 8px from the title. The gap is on the GRID
     rather than on the head, so
     the head, the footer and the "Open the thread" strip move together and
     the question keeps one left edge. Inert on a phone, where the card is one
     column and the tally lies above the title. */
  column-gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}

/* "Open the thread" is the engine's own strip, and it stays: it is the one
   thing on the card that says in words what a press does, and it has to reach
   a screen reader as text rather than as a title nobody hears. What it does
   not have to be is a line of its own weight under every question, so on this
   card it is small, muted and tucked against the right, where a reader finds
   it when they look for it and reads past it when they do not. */
/* THE FOOTER IS A SIBLING OF THE HEAD, NOT A CHILD OF IT. The engine draws
   the head as a <button>, and a control inside a button is not markup a
   browser will make focusable, so the tag chips were reachable by pointer and
   by nothing else. Out here they are real links; they take the head's own
   column and its horizontal padding so they sit where they always did. */
body.v3 .oa-forum-q .oa-forum-qfoot {
  grid-column: 2 / -1;
  padding: 0 24px 0 6px;
  margin-top: -10px;
}

body.v3 .oa-forum-q .oa-card-lock {
  grid-column: 2 / -1;
  justify-content: flex-end;
  padding: 0 24px 14px 6px;
  margin-top: -6px;
}

body.v3 .oa-forum-q .oa-card-lock-note { color: var(--mut); font-size: 12.5px; }
/* ROOM TO READ IN (owner, 2026-09-05: "add more space to look nicer"). The
   engine's own head is 12px of air above the title and 22px below; on a
   question card the tally column beside it is 60px tall, so the tight top
   left the two visibly out of step and the rows ran into each other. */
body.v3 .oa-forum-q .oa-card-head { padding: 18px 24px 20px 6px; }

/* the title reads as the link it is */
body.v3 .oa-forum-q .oa-card-title {
  color: var(--brand);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
}

.oa-forum-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 20px 2px 0 14px;
}

/* the views are the quietest of the three: a number, no box, smaller */
.oa-forum-stat.is-views b { font-size: 13px; font-weight: 500; }

/* The number over its word, right against the question. Both lines are one
   nowrap block, which is what stops "0" and "votes" being squeezed onto one
   line by a narrow gutter and reading as one cramped word. */
.oa-forum-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  color: var(--mut);
  font-size: 12px;
  white-space: nowrap;
}

.oa-forum-stat b {
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 600;
}

.oa-forum-stat i { font-style: normal; }

/* A question WITH answers is boxed in the outline; one whose asker has
   ticked an answer is filled and carries the tick, which is how the site the
   owner asked this to resemble says "this one is settled" at a glance. */
.oa-forum-stat.is-answers.has {
  padding: 3px 9px 4px;
  border: 1px solid var(--ok);
  border-radius: 5px;
  color: var(--ok);
}

.oa-forum-stat.is-answers.has b { color: var(--ok); font-size: 15px; }

.oa-forum-stat.is-answers.is-accepted {
  border-color: var(--ok);
  background-color: var(--ok);
  color: var(--on-brand);
}

.oa-forum-stat.is-answers.is-accepted b { color: var(--on-brand); }

.oa-forum-stat.is-answers.is-accepted b::before {
  content: '\2713\00a0';
  font-weight: 700;
}

.oa-forum-qfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 16px;
}

body.v3 .oa-forum-q .oa-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  margin: 0;
}

body.v3 .oa-forum-q .oa-badges .oa-label {
  display: inline-block;
  margin: 0;
}

/* THE CHIPS ARE SMALLER AND LIGHTER THAN THE SITE'S DEFAULT LABEL (owner,
   2026-09-05: "the tags still look cramped, make them smaller"). The base
   `.oa-label` is 700-weight with generous em padding, which is right for one
   badge on a job posting and crowded when four sit in a row under a question.
   Scoped to the forum's own three places, so every other list's labels are
   measured exactly where they were. */
body.v3 .oa-forum-q .oa-badges .oa-label,
body.v3 .oa-forum-thtags .oa-label,
body.v3 .oa-forum-tagcloud a {
  padding: 2px 7px 3px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}

body.v3 .oa-forum-q .oa-card-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  color: var(--mut);
  font-size: 12.5px;
}

.oa-forum-asker { color: var(--brand); }

.oa-forum-when { color: var(--mut); }

.oa-forum-ex {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A TAG CHIP, on a card, in the side cards and on a thread head: brand ink on
   the brand wash, both defined in both themes.

   HOVER IS A STEP, NOT A FLIP (owner, 2026-09-05, of the near-black chip the
   old rule painted: "improve the colour and behaviour"). Filling a small chip
   with --brand inverts it to near-black in light theme and to near-white in
   dark, which reads as a pressed state on something that is only being
   pointed at, and it throws the tag's own colour away at exactly the moment a
   reader is looking at it. So the ground goes one step firmer, the ink stays
   the tag's, and a hairline appears: the same move the site the owner asked
   this to resemble makes. The chip also carries a TITLE saying what pressing
   it does and how many questions carry it this season, which is the useful
   half of the popover there. */
body.v3 .oa-label-tag {
  background-color: var(--brand-soft);
  color: var(--brand);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

body.v3 .oa-label-tag:hover {
  background-color: var(--line-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line);
}

body.v3 .oa-label-tag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --on-gold, NOT --on-brand: --on-brand flips with the theme because --brand
   does, and gold does not. White on the light gold measured 3.10:1, which is
   ordinary label text under AA. */
body.v3 .oa-label-pinned { background-color: var(--gold); color: var(--on-gold); }
body.v3 .oa-label-locked { background-color: var(--bg-3); color: var(--ink-2); border: 1px solid var(--line); }
body.v3 .oa-label-new { background-color: var(--ok); color: var(--on-brand); }

/* ------------------------------------------------------------ the thread */

.oa-forum-crumbs {
  margin: 0 0 10px;
  color: var(--mut);
  font-size: 13.5px;
}

.oa-forum-crumbs a { color: var(--mut); }

.oa-forum-th {
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.oa-forum-th h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.3;
}

.oa-forum-thmeta {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: var(--mut);
  font-size: 13.5px;
}

.oa-forum-thmeta b { color: var(--ink-2); font-weight: 600; }

.oa-forum-thtags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-top: 12px;
}

.oa-forum-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A POST IS GIVEN ROOM (owner, 2026-09-05: "add more space to look nicer.
   See how stackoverflow does it"). 28px of air above and below the words, a
   64px gutter for the vote column so the arrows, the score, the tick and the
   bookmark stand in a column rather than a stack of touching squares, and a
   hairline between one post and the next. */
.oa-forum-post {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}

.oa-forum-post.is-first { border-bottom: 0; padding-top: 22px; }

.oa-forum-post:target { background: var(--brand-soft); border-radius: 12px; padding-left: 8px; padding-right: 8px; }

/* THE ANSWER THE ASKER TICKED. A wash the width of the row and the room's own
   green down its left edge: the same "this one is settled" the boxed count in
   the list says, said again where the words are. The rail is a border on the
   row itself rather than an element, so it cannot overlap the focus ring. */
.oa-forum-post.is-accepted {
  border-left: 3px solid var(--ok);
  background-color: var(--ok-soft);
  border-radius: 0 12px 12px 0;
  padding-left: 14px;
  padding-right: 12px;
}

.oa-forum-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mut);
  font-size: 11.5px;
  text-align: center;
}

.oa-forum-v {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.oa-forum-v[aria-pressed='true'] { background-color: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.oa-forum-v[disabled] { opacity: 0.45; cursor: default; }
.oa-forum-v:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* A HOVER PREVIEW IS FOR A BUTTON THAT IS OFF, and saying so in the SELECTOR
   is the whole fix (owner, 2026-09-08, of an answer voted up from a phone in
   the dark theme: it "makes the vote button turn completely white", and a
   refresh puts the count back).

   `.oa-forum-v:hover:not([disabled])` is (0,3,0) and
   `.oa-forum-v[aria-pressed='true']` is (0,2,0), so on a button that is BOTH
   the hover rule's `color: var(--brand)` beat the pressed rule's
   `var(--on-brand)` -- over the pressed rule's own `var(--brand)` ground. The
   glyph was painted in the colour of the block it sits on. `--brand` is LIGHT
   in the dark theme (#c6ccd4), so what was left was a solid near-white 42px
   square with nothing in it; in the light theme the same bug reads as a dark
   square, which is why it was reported from a phone in dark. It is the trap
   this repository has recorded twice already -- ink taken from one rule and
   ground from another, and a rule beaten by another of higher weight.

   A PHONE IS WHY IT LOOKED PERMANENT. A tap leaves :hover on the thing it
   tapped until something else is tapped, so the state a desktop reader sees
   only while the pointer rests there is the state a phone reader is left in;
   reloading the page is what clears it, which is exactly what was reported.

   Hence the two halves, and they are separate on purpose: the preview stands
   down on a pressed button, so the pressed colours win on SPECIFICITY rather
   than on load order (this file's own rule: a rule that can be beaten by a
   rule of equal weight further down the file is not a rule); and the hover
   rules sit behind the site's own (hover: hover) guard, so a tap leaves no
   hover state to be stuck in at all. */
@media (hover: hover) and (pointer: fine) {
  .oa-forum-v:hover:not([disabled]):not([aria-pressed='true']) {
    border-color: var(--brand);
    color: var(--brand);
  }
  /* a button already on still answers the pointer: one step firmer in the
     same colour, which is the Post button's own idiom, and never a colour
     the glyph on it is also painted in */
  .oa-forum-v[aria-pressed='true']:hover:not([disabled]) {
    background-color: var(--brand-2);
    border-color: var(--brand-2);
  }
}

/* the score between the two arrows is the largest thing in the column, the
   way it is on the site the owner asked this to resemble */
.oa-forum-score {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

/* the tick and the bookmark, under the arrows: 34px targets that read as
   quiet outlines until they are on */
.oa-forum-acc,
.oa-forum-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.oa-forum-acc:focus-visible, .oa-forum-save:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.oa-forum-acc[aria-pressed='true'], .oa-forum-acc.is-on { color: var(--ok); }
.oa-forum-acc.is-on { cursor: default; }
.oa-forum-save[aria-pressed='true'] { color: var(--gold); }

/* THE ARROWS' RULE AGAIN, and the tick had the same defect one notch milder:
   `button.oa-forum-acc:hover` is (0,2,1) and the pressed rule (0,2,0), so a
   ticked answer lost its green to `--ink-2` under the pointer -- and, on a
   phone, for as long as the reader stayed on the thread. The bookmark was
   right only by load order, which is the fragility rather than the fix; both
   keep exactly the look they have today, drawn from a selector that says it. */
@media (hover: hover) and (pointer: fine) {
  button.oa-forum-acc:hover:not([aria-pressed='true']),
  .oa-forum-save:hover:not([aria-pressed='true']) { border-color: var(--line); color: var(--ink-2); }
  button.oa-forum-acc[aria-pressed='true']:hover { border-color: var(--ok); }
  .oa-forum-save[aria-pressed='true']:hover { border-color: var(--line); }
}

.oa-forum-updown { letter-spacing: 0.02em; }

.oa-forum-pbody { min-width: 0; }

.oa-forum-text {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.oa-forum-text p { margin: 0 0 12px; }
.oa-forum-text p:last-child { margin-bottom: 0; }

/* WHAT THE MARKUP DRAWS (2026-09-08, with the formatting toolbar): a
   heading inside a post steps down from the page's own (an h3 at most),
   lists keep their indent, a quoted passage takes a rail in the muted ink,
   code sits on the panel's third ground in a monospace face, and a rule is
   a hairline. Tokens throughout, so both themes are covered. */
.oa-forum-text h3, .oa-forum-text h4, .oa-forum-text h5, .oa-forum-text h6 {
  margin: 18px 0 8px;
  color: var(--ink);
  line-height: 1.3;
  font-weight: 700;
}

.oa-forum-text h3 { font-size: 19px; }
.oa-forum-text h4 { font-size: 17px; }
.oa-forum-text h5 { font-size: 15.5px; }
.oa-forum-text h6 { font-size: 15px; color: var(--ink-2); }
.oa-forum-text > :first-child { margin-top: 0; }
.oa-forum-text > :last-child { margin-bottom: 0; }
.oa-forum-text ul, .oa-forum-text ol { margin: 0 0 12px; padding-left: 26px; }
.oa-forum-text li + li { margin-top: 4px; }
.oa-forum-text li > p { margin-bottom: 6px; }
.oa-forum-text li > ul, .oa-forum-text li > ol { margin: 4px 0 0; }

.oa-forum-text blockquote {
  margin: 0 0 12px;
  padding: 4px 14px;
  border-left: 3px solid var(--line);
  color: var(--ink-2);
}

.oa-forum-text blockquote > :last-child { margin-bottom: 0; }

.oa-forum-text code {
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

.oa-forum-text pre {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--ink);
  overflow: auto;
  font-size: 13.5px;
  line-height: 1.5;
}

.oa-forum-text pre code { padding: 0; border-radius: 0; background: transparent; font-size: inherit; }
.oa-forum-text hr { margin: 14px 0; border: 0; border-top: 1px solid var(--line); }

.oa-forum-removed {
  color: var(--mut);
  font-style: italic;
}

/* a quoted passage: a copy of the words as they stood, headed by who wrote
   them and where */
.oa-forum-quote {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-left: 3px solid var(--line);
  border-radius: 0 10px 10px 0;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 14px;
}

.oa-forum-quote cite {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--mut);
  font-size: 12px;
  font-style: normal;
}

.oa-forum-quote cite a { color: var(--mut); }

.oa-forum-quote p { margin: 0; white-space: pre-wrap; }

.oa-forum-pfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.oa-forum-pacts {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.oa-forum-pacts .oa-forum-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.oa-forum-pacts .oa-forum-act:hover:not([disabled]) { background: var(--bg-3); color: var(--ink); }
.oa-forum-pacts .oa-forum-act:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* A DISABLED CONTROL MUST LOOK DISABLED. Delete on a question somebody has
   answered is drawn and refused, with the reason in its title, so that the
   rule is legible before it is pressed rather than after; drawn at full
   strength and lighting up under the pointer, it read as a live button that
   silently did nothing. The pointer says so too, so the reason in the title
   is what the reader gets when they go looking. */
.oa-forum-pacts .oa-forum-act[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --ink-2, not --mut: this block paints its own ground, and --mut was tuned
   against --bg, --bg-2 and --bg-3 rather than against --brand-soft, where it
   measured 4.44:1 in light theme. */
.oa-forum-who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--ink-2);
  font-size: 12.5px;
}

.oa-forum-who .oa-forum-handle { color: var(--brand); }
.oa-forum-who .oa-forum-handle.is-me { color: var(--ink); }

/* "N Answers" is a heading with a rule under it and the order beside it: the
   answers band. There are no comments under either half, and there is no plan
   for any (owner, 2026-09-05); a thread is a question and the answers to it. */
.oa-forum-answers-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 18px 0 10px;
  border-top: 2px solid var(--line);
  border-bottom: 1px solid var(--line-soft);
}

.oa-forum-answers-h h2 { margin: 0; font-size: 21px; font-weight: 500; }

.oa-forum-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mut);
  font-size: 13px;
}

.oa-forum-sort select {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.oa-forum-sort select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* THE HEADING TAKES FOCUS when a thread is opened, so a reader arriving by
   keyboard or with a screen reader lands on the question rather than at the
   top of the page. It must not be RINGED for it. The ring is the browser
   saying where the keyboard is, and `tabindex="-1"` means nothing can tab
   here: every focus this element ever takes is the script's, so a ring on it
   is always a line around a heading nobody moved to. Chrome matches
   :focus-visible on a programmatic focus, so both have to say so. */
.oa-forum-th h1[tabindex='-1']:focus,
.oa-forum-th h1[tabindex='-1']:focus-visible { outline: none; }

/* ------------------------------------------------------------ composing */

.oa-forum-compose {
  margin-top: 24px;
}

.oa-forum-compose h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 20px;
}

.oa-forum-compose h2 .oa-forum-as { color: var(--mut); font-size: 13px; font-weight: 500; }

.oa-forum-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.oa-forum-editor textarea {
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}

/* THE RING IS THE BRAND, NEVER THE WASH. `outline: none` takes the site-wide
   focus ring away, so whatever replaces it IS the indicator, and --brand-soft
   on a white input measures 1.19:1 against a 3:1 floor: a keyboard reader had
   no way to tell the box was focused. --brand is 10.16:1 on the same ground. */
.oa-forum-editor textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }

/* THE FORMATTING TOOLBAR (owner, 2026-09-08: "add that standard editing
   menu when someone composes a new question", with the Stack Exchange
   toolbar beside it): a row of icon buttons over every box a member writes
   in, in four groups with a hairline between, and at its right end the
   switch for the tips row under it. The icons are inline SVGs drawn in
   currentColor, so they take the theme's ink; every colour here is a token.
   On a phone the buttons grow to 42px targets and wrap to a second row
   (rule 13 in _MOBILE-STANDARDS.md). */
.oa-forum-tb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-3);
  color: var(--ink-2);
}

.oa-forum-tbgroup {
  display: inline-flex;
  gap: 2px;
  padding-right: 8px;
  border-right: 1px solid var(--line-soft);
}

.oa-forum-tbgroup:last-of-type { padding-right: 0; border-right: 0; }

.oa-forum-tbbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: var(--ink-2);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.oa-forum-tbbtn svg { width: 18px; height: 18px; }
.oa-forum-tbbtn:hover { background-color: var(--bg-2); border-color: var(--line); color: var(--ink); }
.oa-forum-tbbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.oa-forum-tbtips {
  margin-left: auto;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background-color: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.oa-forum-tbtips:hover { background-color: var(--bg-2); border-color: var(--line); }
.oa-forum-tbtips:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* the preview under the box: the words as the thread will draw them, shown
   once they carry a mark and put away while they do not */
.oa-forum-preview {
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--line);
  background: var(--bg-2);
  color: var(--ink);
}

.oa-forum-preview-h {
  margin: 0 0 8px;
  color: var(--mut);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The compose bar under a textarea. It used to carry the "how do you know"
   radios on the left with the send button on the right; the radios are gone
   (owner, 2026-09-05), so it aligns to the END: space-between leaves a lone
   child at the START, which would put Post reply under the left edge of the
   box it belongs to. */
.oa-forum-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-3);
  color: var(--ink-2);
}

.oa-forum-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.oa-forum-accept input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }

.oa-forum-guardmsg {
  margin: 8px 0 0;
  color: var(--err);
  font-size: 13.5px;
}

.oa-forum-guardmsg:empty { display: none; }

.oa-forum-msg {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 14px;
}

.oa-forum-msg.is-err { color: var(--err); }

.oa-forum-msg:empty { display: none; }

/* the quote waiting above the reply box */
.oa-forum-quotebox {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 13.5px;
}

/* A LONG ADDRESS IN A QUOTE MUST BREAK. `pre-wrap` wraps at whitespace, and
   an unbroken URL has none: quoted into a post it ran off the card and took
   the whole page sideways with it, which rule 12 of the mobile standards
   refuses. `.oa-forum-text` has carried `overflow-wrap: anywhere` all along;
   the two quote blocks were the ones without it. */
.oa-forum-quotebox p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.oa-forum-quotebox, .oa-forum-quote { min-width: 0; overflow-wrap: anywhere; }
.oa-forum-quote p { overflow-wrap: anywhere; }

.oa-forum-send {
  min-height: 42px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.oa-forum-send:hover:not([disabled]) { background: var(--brand-2); color: var(--on-brand); }
.oa-forum-send[disabled] { opacity: 0.55; cursor: not-allowed; }
.oa-forum-send:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.oa-forum-cancel {
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.oa-forum-cancel:hover { border-color: var(--brand); color: var(--brand); }

/* ------------------------------------------------------------ the ask form

   Laid out the way Stack Exchange lays one out (owner, 2026-09-08): a short
   "writing a good question" note, then ONE bordered card holding the three
   fields, each a bold label with its advice UNDER the label and the box
   under the advice, every field starred, "Required fields" said once at the
   card's head, the tag suggestions a menu OVER the page rather than a list
   in the flow (which pushed the guide box and the buttons down and back
   with every keystroke), and the Post button under the card at its left.
   The brand is not copied: every colour here is a token of v3.css, and the
   buttons keep the site's own pills. */

.oa-forum-ask h1 { margin: 0 0 14px; font-size: 30px; }

.oa-forum-askintro {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.oa-forum-askintro .oa-forum-lede { margin: 0 0 8px; color: var(--ink); font-size: 14.5px; }
.oa-forum-askintro ol { margin: 0; padding-left: 20px; }
.oa-forum-askintro li + li { margin-top: 3px; }

.oa-forum-lede { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; }

.oa-forum-askcard {
  padding: 20px 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow);
}

/* the card's head: where the question goes (the one place the room is said
   while the form is open) at the left, "Required fields" at the right */
.oa-forum-askhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line-soft);
}

.oa-forum-askwhere { flex: 1 1 260px; margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.oa-forum-askwhere strong { color: var(--ink); }
.oa-forum-askreq { margin: 0; color: var(--mut); font-size: 12.5px; line-height: 1.5; white-space: nowrap; }
.oa-forum-req { color: var(--err); font-weight: 700; }

.oa-forum-f { margin: 0 0 22px; }

/* the last field ends the card: the message line after it is empty until
   something is said, and an empty line is display:none, so the card would
   otherwise carry that field's 22px under its own 20px. By TYPE, because
   the message line is the card's last child whatever it shows. */
.oa-forum-askcard > .oa-forum-f:last-of-type { margin-bottom: 0; }
.oa-forum-askcard > .oa-forum-accept { margin-top: 16px; }

.oa-forum-f > label,
.oa-forum-f > .oa-forum-flabel {
  display: block;
  margin: 0 0 2px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

/* the advice sits between the label and the box, where a reader looks
   before typing, in the muted ink the site's hints already use */
.oa-forum-fhint { margin: 0 0 8px; color: var(--mut); font-size: 12.5px; line-height: 1.45; }

.oa-forum-hint { color: var(--mut); font-size: 13px; }
.oa-forum-f .oa-forum-hint { margin: 6px 0 0; }

.oa-forum-f input[type='text'] {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  box-sizing: border-box;
}

.oa-forum-f input[type='text']:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* the tips row under the toolbar, saying what each mark writes: the marks
   in code, then how a paragraph and a bare address read. Put away by the
   toolbar's own switch (the `hidden` attribute, which the site's reset
   makes win over display: flex). */
.oa-forum-fmt {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-3);
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.4;
}

.oa-forum-fmt code {
  padding: 0 4px;
  border-radius: 5px;
  background: var(--bg-2);
  color: var(--ink-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* similar questions, under the title as it is typed */
.oa-forum-similar {
  margin: 10px 0 0;
  padding: 10px 14px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.oa-forum-similar p { margin: 0 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; }
.oa-forum-similar ul { list-style: none; margin: 0; padding: 0; }
.oa-forum-similar li { padding: 4px 0; overflow-wrap: anywhere; }
.oa-forum-similar a { color: var(--brand); }
.oa-forum-similar i { margin-left: 8px; color: var(--mut); font-style: normal; font-size: 12.5px; white-space: nowrap; }

/* the tag picker: chips and an input in one box, the suggestions a menu
   under it */
.oa-forum-tagwrap { position: relative; }

.oa-forum-tagsin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  cursor: text;
}

.oa-forum-tagsin:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

.oa-forum-tagsin input {
  flex: 1 1 120px;
  min-width: 80px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.oa-forum-tagsin input:focus { outline: none; }

/* THE MENU IS OVER THE PAGE, NOT IN IT. Drawn in the flow it moved the
   guide box and the buttons down and back with every keystroke; over the
   page it opens under the box and covers what is below, as a menu does, and
   holds to rules 6 and 10 of _MOBILE-STANDARDS.md: half the screen at most,
   scrolling inside itself, never wider than its box. */
.oa-forum-tagsugg {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.oa-forum-tagsugg:empty { display: none; }

/* above the box when there is more room there (placeSugg measures) */
.oa-forum-tagsugg.is-up { top: auto; bottom: calc(100% + 4px); }

/* an option is highlighted, never focused: the keyboard stays in the box */
.oa-forum-tagsugg [role='option'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.oa-forum-tagsugg li:last-child { border-bottom: 0; }
/* A WASH IS A HOVER, NOT THE HIGHLIGHT. Pointing at a row and moving the
   highlight onto it with the arrows must not look the same: --brand-soft
   behind a row is 1.19:1 against the panel, so the highlighted option is
   RINGED as well, inset so the list does not clip it. */
.oa-forum-tagsugg [role='option']:hover, .oa-forum-tagsugg [role='option'].is-active { background: var(--brand-soft); color: var(--brand); }
.oa-forum-tagsugg [role='option'].is-active { outline: 2px solid var(--brand); outline-offset: -2px; }
.oa-forum-tagsugg i { font-style: normal; color: var(--mut); }

/* the refusal line under the tag box: rendered whether or not it has
   anything to say, so a refusal written into it is announced */
.oa-forum-tagmsg { margin: 8px 0 0; color: var(--err); font-size: 13.5px; }
.oa-forum-tagmsg:empty { margin: 0; }

.oa-forum-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* the buttons under the card, at its left, as the site the owner named
   places them */
.oa-forum-askactions { margin-top: 18px; }

/* ------------------------------------------------------------ side cards */

.oa-forum-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink-2);
  box-shadow: var(--shadow);
}

.oa-forum-card h2 { margin: 0 0 10px; color: var(--ink); font-size: 17px; }

.oa-forum-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.oa-forum-card li + li { margin-top: 6px; }
.oa-forum-card p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.oa-forum-card p + p { margin-top: 8px; }

.oa-forum-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* a tag and the bell that watches it, one unit so they wrap together */
.oa-forum-tagrow {
  display: inline-flex;
  align-items: stretch;
  gap: 2px;
}

/* the ground, the ink and the hover; the SIZE comes from the rule that sizes
   every forum chip (body.v3 .oa-forum-tagcloud a, above), so the side cards
   and the cards in the list stay one size */
.oa-forum-tagchip {
  display: inline-flex;
  align-items: center;
  background-color: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* the same step as a chip anywhere else, never the near-black flip.

   `body.v3` IS LOAD-BEARING: a chip is an <a>, and `body.v3 a:hover` in
   v3.css is (0,2,2) against this rule's (0,2,0), so it won on specificity
   whatever the load order and the chip hovered in --brand-2 WITH AN
   UNDERLINE, which is the one thing a chip must not do. This is the
   "specificity AND load order" trap this repository already records for the
   Leaflet attribution and the sponsor rail: a rule that a rule of equal or
   greater weight can beat is not a rule. */
body.v3 .oa-forum-tagchip:hover {
  background-color: var(--line-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none;
}

.oa-forum-tagchip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* THE COUNT IS QUIETER BY WEIGHT, NOT BY A COLOUR THAT FAILS. --mut measures
   4.44:1 on --brand-soft and 4.04:1 on the hover step, both under the 4.5:1
   floor this site holds every ink to; the token was chosen as "the smallest
   change that clears 4.5:1 everywhere", and everywhere did not include a chip.
   --brand is 8.51:1 and 7.75:1 on the same two grounds. */
.oa-forum-tagchip i { font-style: normal; font-weight: 400; color: var(--brand); margin-left: 7px; }

/* the bell: quiet until it is pressed, then the room's own green, so a
   watched tag is legible at a glance down the card */
.oa-forum-watch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background-color: var(--bg-2);
  color: var(--mut);
  cursor: pointer;
  padding: 0;
}

.oa-forum-watch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.oa-forum-watch[aria-pressed='true'] {
  border-color: var(--ok);
  background-color: var(--ok-soft);
  color: var(--ok);
}

/* the arrows' rule a third time: the bell's preview is for a tag nobody is
   watching, and its pressed colours won today only because they are written
   LOWER in the file. It looks exactly as it did; what changed is that it
   cannot stop looking that way if these two rules are ever reordered, and
   that a tap on a phone leaves no preview behind. */
@media (hover: hover) and (pointer: fine) {
  .oa-forum-watch:hover:not([aria-pressed='true']) { border-color: var(--brand); color: var(--brand); }
}

/* the saved list, and the note under both cards */
.oa-forum-cardnote { margin: 10px 0 0; color: var(--mut); font-size: 12.5px; line-height: 1.5; }
.oa-forum-cardnote a { color: var(--brand); }

.oa-forum-savedrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.4;
}

.oa-forum-savedrow:last-child { border-bottom: 0; }
.oa-forum-savedrow a { color: var(--ink-2); flex: 1 1 auto; }
.oa-forum-savedrow a:hover { color: var(--brand); }
.oa-forum-savedwhat { color: var(--mut); font-size: 12px; white-space: nowrap; }

.oa-forum-unsave {
  flex: none;
  min-width: 26px;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.oa-forum-unsave:hover { background-color: var(--bg-3); color: var(--err); }
.oa-forum-unsave:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* what is new in the tags this reader watches, over the list */
.oa-forum-watchnew {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  border-radius: var(--radius);
  background-color: var(--ok-soft);
  color: var(--ink-2);
}

.oa-forum-watchnew p { margin: 0; font-size: 14px; }
.oa-forum-watchnew strong { color: var(--ink); }

.oa-forum-seasons a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 13.5px; }
.oa-forum-seasons a.is-now { color: var(--ink); font-weight: 600; }

/* the guide panel: the same thirteen rules the pinned thread carries */
.oa-forum-guidepanel summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  padding: 4px 0;
}

.oa-forum-guidepanel .oa-forum-guide-intro,
.oa-forum-guidepanel .oa-forum-note,
.oa-forum-guidepanel .oa-forum-maintainer { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.oa-forum-guidepanel .oa-forum-rules { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.oa-forum-guidepanel .oa-forum-rules li + li { margin-top: 6px; }
.oa-forum-guidepanel strong { color: var(--ink); }

.oa-forum-seedbtn { margin-top: 8px; }

/* the Ask button sits in the list head (never in the engine's action bar,
   which is hidden while the room is empty): a 42px target on every screen */
.oa-forum-askbtn { min-height: 42px; padding: 10px 22px; font-size: 14.5px; }

/* ------------------------------------------------------------- the phone */

@media (max-width: 900px) {
  .oa-forum-cols { grid-template-columns: minmax(0, 1fr); }
  .oa-forum-side { position: static; }
  /* THE SECTIONS BECOME A ROW above the questions: four links sharing the
     width, the one in force marked underneath rather than down its left.
     Each is a 42px target (rule 13). */
  .oa-forum-nav {
    position: static;
    flex-direction: row;
    gap: 4px;
    padding: 0;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .oa-forum-navlink {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 8px 6px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
  }
  .oa-forum-navlink.is-on,
  body.v3 .oa-forum-navlink.is-on:hover { border-left: 0; border-bottom-color: var(--brand); }
}

@media (max-width: 640px) {
  /* THE TALLY LIES ABOVE THE QUESTION on a phone, a row rather than a 104px
     gutter, the same move the vote column makes in a thread (rule 13).

     ONE COLUMN IS NOT ENOUGH ON ITS OWN, and that is how the owner's
     screenshot happened (2026-09-06: "the looks of the forum look really
     bad from a mobile device"). The footer and the "Open the thread" strip
     kept the desktop's `grid-column: 2 / -1`, so the browser minted an
     IMPLICIT second column for them, the explicit one collapsed to 0px, and
     the tally, auto-placed first, sat in it on the title's own row, painted
     over the words. So every part of the card is placed in the one column
     BY NAME, at the specificity of the desktop rules it overrides, and the
     rows follow the DOM: the tally, the head, the footer, then the strip. */
  body.v3 .oa-forum-q { grid-template-columns: minmax(0, 1fr); }
  body.v3 .oa-forum-q .oa-forum-stats,
  body.v3 .oa-forum-q .oa-card-head,
  body.v3 .oa-forum-q .oa-forum-qfoot,
  body.v3 .oa-forum-q .oa-card-lock { grid-column: 1 / -1; }
  body.v3 .oa-forum-q .oa-card-head { padding: 8px 16px 14px; }
  body.v3 .oa-forum-q .oa-card-title { font-size: 16.5px; }
  body.v3 .oa-forum-q .oa-forum-qfoot { padding: 0 16px; margin-top: -4px; }
  /* the strip keeps the desktop's place, small and to the right: at the
     left under the footer it read as a stray line of its own */
  body.v3 .oa-forum-q .oa-card-lock { order: 3; padding: 4px 16px 12px; margin-top: 0; justify-content: flex-end; }
  .oa-forum-stats {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 14px 16px 0;
  }
  .oa-forum-stat { flex-direction: row; align-items: baseline; gap: 4px; }
  .oa-forum-stat b { font-size: 14px; }
  /* ONE picker is not a wall: the live design seats value pickers two per
     row on a phone (rule 4; its bar is a GRID, so a width does nothing
     here), and the forum has exactly one, which at half width truncated its
     own placeholder ("Choose a va…") beside empty space */
  body.v3 #oa-forum-list .oa-filter.oa-pick { grid-column: 1 / -1; }
  /* the headings come down a step: a 26px question title on a 390px screen
     ran to five lines before the words began, under the page's own hero */
  .oa-forum-listhead h2 { font-size: 22px; }
  .oa-forum-th h1 { font-size: 22px; }
  .oa-forum-ask h1 { font-size: 24px; }
  .oa-forum-compose h2 { font-size: 18px; }
  .oa-forum-answers-h h2 { font-size: 19px; }
  /* the guide tick box is a control (rule 3): a 42px row with a 20px box */
  .oa-forum-accept { min-height: 42px; align-items: center; }
  .oa-forum-accept input { width: 20px; height: 20px; margin: 0; }
  .oa-forum-tabs { width: 100%; }
  .oa-forum-tab { flex: 1 1 0; justify-content: center; }
  /* the four sections in one row at 320px: the icon over the word */
  .oa-forum-navlink { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 12.5px; }
  /* the order bar and the tag filter are controls (rule 13): 42px targets,
     the pills sharing the width, a 16px box so iOS does not zoom */
  .oa-forum-sorts { width: 100%; }
  .oa-forum-sortpill { flex: 1 1 0; min-height: 42px; }
  .oa-forum-tagfilter { width: 100%; min-height: 42px; font-size: 16px; }
  .oa-forum-homehead h2 { font-size: 22px; }
  .oa-forum-doors { grid-template-columns: minmax(0, 1fr); }
  .oa-forum-door { padding: 16px 16px 14px; }
  .oa-forum-taggrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .oa-forum-post { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; }
  .oa-forum-post.is-accepted { padding-left: 10px; padding-right: 8px; }
  .oa-forum-vote { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
  /* rule 13: every control the thread offers is a 42px target on a phone.
     The bell and the Saved card's remove are controls too, and both were
     measured under it: the bell had a width and no height, so it took the
     row's own 20px, and the remove sat at its 26px minimum. */
  .oa-forum-acc, .oa-forum-save { width: 42px; height: 42px; }
  .oa-forum-watch { width: 42px; min-height: 42px; }
  .oa-forum-unsave { min-width: 42px; min-height: 42px; }
  .oa-forum-sort select { min-height: 42px; font-size: 16px; }
  .oa-forum-answers-h { align-items: flex-start; flex-direction: column; }
  .oa-forum-pacts .oa-forum-act { min-height: 42px; }
  .oa-forum-send, .oa-forum-cancel, .oa-forum-askbtn { width: 100%; }
  .oa-forum-bar { align-items: stretch; }
  /* the formatting toolbar's buttons are controls (rule 13): 42px targets,
     wrapping to a second row, and the tips switch a row of its own */
  .oa-forum-tb { padding: 4px 6px; gap: 2px 6px; }
  .oa-forum-tbbtn { width: 42px; height: 42px; }
  .oa-forum-tbtips { width: 100%; min-height: 42px; margin-left: 0; text-align: left; }
  /* the ask form on a phone: the card and the note keep a 14px inset, the
     head's two lines stack, and nothing below the card is wider than it */
  .oa-forum-askcard { padding: 16px 14px; }
  .oa-forum-askintro { padding: 12px 14px; }
  .oa-forum-askhead { margin-bottom: 16px; padding-bottom: 12px; }
  .oa-forum-askreq { white-space: normal; }
  .oa-forum-similar i { white-space: normal; margin-left: 6px; }
  .oa-forum-askactions .oa-forum-hint { width: 100%; }
}