/* Text smoothing (v182) is set once on <html> in style.css, which every
   boards page loads before this file. Nothing to repeat here. */

/* =====================================================================
   boards.css — Haki-Arena Boards
   ---------------------------------------------------------------------
   A recreation of naruto-boards.site's layout in Haki-Arena's own palette.

   EVERY box and font size below was MEASURED on naruto-boards.site on
   2026-09-09 with getBoundingClientRect(), rects taken relative to the
   776px layout wrapper. The numbers are recorded in REF_BOARDS.json and
   pinned by diff_boards.js — do not "tidy" them.

     frame            775 wide
     top strip        775x31  @1,1
     nav row          775x33  @1,42   six buttons 93x20 on a 93px pitch,
                                      first at x=109 (x=108 inside the frame)
     panel header     246x14  @y74    x = 10 / 265 / 520  (255px pitch)
     panel body       237x144 @y88    + a 9x144 edge, so 246 total
     panel list row   228x13          inset 9px, 13px pitch
     section bar      755x16  @11,245
     category bar     735x27  @21
     column header    733x23
     forum row        733x48 / 733x51
     topic row        733x39  (sticky 53)
     post block       733x193, author column 123 wide, avatar 75x75
     legend strip     775x80
     footer           775x28

   THE RECOLOUR. naruto-boards draws nearly everything with background
   images hosted on imgur (~20 of them). Those become CSS-drawn surfaces
   here, at identical box sizes, using the tokens style.css already
   defines — no new colours were invented:

     reference                     -> ours
     orange page frame #f4b005     -> --page      (the sea; style.css does
                                      the same swap for naruto-arena)
     blue side panels              -> --side / --side-2  (Straw Hat red)
     blue bars and column heads    -> --head      (deep marine navy)
     white content surface         -> --panel     (parchment)
     row striping                  -> --panel-3 / --panel-4
     grey descriptions #596973     -> --muted
     title links (black underline) -> --head, hover --red
     profile links #280092         -> --red

   Font sizes and weights are the reference's exactly: 12/700 titles,
   11/400 body and cells, 10/400 last-action, 10/700 profile links,
   10px panel text, 9px panel dates, 8px/700 bottom links.
   ===================================================================== */

/* ---------------------------------------------------------------------
   DEFENCE AGAINST THE GAME'S STYLESHEET
   ---------------------------------------------------------------------
   style.css loads first, because boards.css recolours using its :root
   tokens. That also means every BARE class name it defines can reach into
   these pages. It bit once: the game's level badge is

     .lvl { position: relative; display: inline-block; width: 75px; ... }

   and it landed on the profile page's <tr class="lvl">, turning a table row
   into an inline-block and collapsing the statistics table's first column
   from 366px to 49px. diff_boards.js caught it; nothing else would have.

   Two rules follow from that. Every boards class is prefixed `bd-`, and the
   structural properties tables depend on are pinned here so no bare rule in
   style.css can take them away again. A declared property of ours always
   wins on specificity — it is the ones we DON'T declare that leak.
   --------------------------------------------------------------------- */
.bd table    { border-collapse: collapse; }
.bd tr       { display: table-row; position: static; float: none; }
.bd td,
.bd th       { display: table-cell; position: static; float: none; }
.bd colgroup { display: table-column-group; }
.bd col      { display: table-column; }

/* ---------------------------------------------------------------------
   FRAME
   --------------------------------------------------------------------- */
/* The page pattern behind the 775px strip. The reference puts it on <body>:
   background-color #f4b005 with a 96x96 tile repeating both ways. style.css
   gives our body a fixed gradient (measured off naruto-arena), so the tile
   is layered ON TOP of that ground rather than replacing it — an empty link
   changes nothing, and a filled one tiles over our blue exactly the way the
   reference tiles over its orange. Scoped to a boards page by .bd-page,
   which the frame adds to <html>, so the game keeps its own backdrop. */
.has-art-boards_bg_page body.bd-page {
  background-image: var(--asset-boards-bg, none);
  background-repeat: repeat;
  /* NOT background-attachment: fixed. style.css uses `fixed` for the game's
     gradient and I carried it over here — but a 96x96 tile fixed to the
     viewport has to be re-rasterised across the whole page on every scroll,
     and on the forum index (2600px tall) that wedged Chrome hard enough to
     stop answering screenshot requests. The reference just repeats it, which
     scrolls with the page and composites once. */
  background-attachment: scroll;
}
/* =====================================================================
   THE BOARDS' OWN SURFACES — white, not the game's cream
   ---------------------------------------------------------------------
   Every background on the reference's forum index, enumerated 2026-09-10
   (17 surfaces; everything not listed is transparent and shows #layout's
   white). Each entry is: element :: image :: the image's average colour.

     body                e7XRT22.gif 96x96   #f6b618  repeat  <- page pattern
     div#layout          (no image)          #ffffff          <- WHITE
     div#top             hjfgpKy.jpg 775x31  #3198da  repeat
     div#topnav          (nothing)                            <- WHITE
     div#controlpanel_top   dGgvU3w.jpg 246x14  #ccb04d
     div#forumactivity_top  DzAblW5.jpg 246x14  #ccb04f
     div#newtopics_top      TOS99qY.jpg 246x14  #ccad40
     div.boxleft         qbAMyMa.jpg 237x144 #2a9fe9  repeat
     div.boxright        SKn1hjN.jpg 9x144   #3299db  repeat
     li (feed row)       y9UcaJ6.gif 6x6     #ffcc01  no-repeat
     div.contenttop      mjy3q2k.jpg 756x16  #f1ab0a  repeat
     div.contentmiddle   Zzy15bN.gif 757x1403 #edebe6 repeat-y  <- 35% pure
                                                        white: a watermark
                                                        on WHITE
     div.header          T6iJbnj.gif 59x40   #24a3f4  repeat
     tr.altcolor_2       J75eKPG.gif 59x40   #fbfbfb  repeat  <- 88% white
     tr.altcolor_1       2HsnkeS.gif 59x40   #ececec  repeat  <- flat grey
     div.contentbottom   KdtV9qj.gif 11x12   #fcfcfc  no-repeat
     div#help            rkLQeWu.jpg 775x60  #f4f4f4  no-repeat 0 100%
     div#footer          Zj3eTYy.png 775x28  #2c9de3  repeat

   table.profileinfo and table.reply both use the SAME #fbfbfb tile as
   tr.altcolor_2, and table.navigation's buttons use the #ececec one.

   So the reference's content is WHITE — a near-white tile over a white
   #layout, with one grey alternating row. The boards were built on the
   game's cream --panel family, which is why the middle read as cream
   rather than white. These four tokens are the boards' own surfaces and
   leave the game's palette untouched. */
:root {
  --bd-white:   #ffffff;   /* #layout, and anything transparent over it */
  --bd-surface: #fbfbfb;   /* the near-white content tile */
  --bd-rowalt:  #ececec;   /* the one grey alternating row */
  --bd-foot:    #f4f4f4;   /* the legend block */
}

.bd {
  width: 775px;
  margin: 10px auto 0;
  /* div#layout is white for its WHOLE height on the reference, not just
     behind the content block — which is what puts white behind the nav row
     and behind the three top panels. Ours left the strip transparent, so the
     page pattern showed through in both places. */
  background: var(--bd-white);
  /* the reference's layout wrapper is 776 wide with its 775 strip inset by 1,
     so every y below sits 1px down. Matching it keeps REF_BOARDS.json exact
     instead of carrying a 1px deviation on every single row. */
  /* v296: that 1px is theirs as a BLACK border (#layout: 1px solid #000,
     read 2026-09-28); ours was 1px of white padding — the one 1px white row
     in the frame, owner's ask "remove the 1px white". Same geometry, their colour. */
  border-top: 1px solid #000;
  font: 11px/1.35 Arial, Verdana, Helvetica, sans-serif;  /* the reference's stack */
  color: var(--ink);
  text-align: left;
}
/* The reference's one link rule is
     a:link, a:visited, a:hover, a:active {
       font: 700 12px Arial, Verdana, Helvetica, sans-serif;
       text-decoration: underline; color: #000 }
   — bold, underlined, BLACK, and identical on hover, so a link there is
   distinguished from body text by weight and underline rather than by colour.
   #000 recolours to --ink, the same substitution the body text uses. Ours were
   400-weight in --head, which read as a different family of element entirely.
   table.profileinfo overrides only the size (11px), which .bd-prof a does. */
.bd a,
.bd a:hover { color: var(--ink); text-decoration: underline; font-weight: 700; font-size: 12px; }
.bd-prof a,
.bd-prof a:hover { font-size: 11px; }

/* v258: THE "ANIMATION" ON "view today's ...". There is no animation and
   never was — the text GROWS on hover. `.bd a:hover` above re-declares
   font-size: 12px, and it out-specifies the container rules that give the
   sidebar its 8-10px text (`.bd a:hover` is 0,2,1; `.bd-box .cp` is 0,2,0),
   so every link in the three top panels jumped to 12px under the cursor and
   snapped back.

   The reference does not do this. Measured on naruto-boards.site
   2026-09-21, out of its own stylesheet: its generic rule is
   `a:active, a:hover, a:link, a:visited { font: 700 12px ... }` — all four
   states in one declaration — and every link with a size of its own repeats
   that shape, e.g. `a.bottomlink:active, :hover, :link, :visited
   { font: 700 8px ...; letter-spacing: 1px; text-transform: uppercase }`.
   Computed size of their "view today's replies" link, hovered or not: 8px.

   So the size is pinned for :hover here too, the same way theirs is. */
/* v259 CORRECTION, and v258 had it exactly backwards. THE PANEL'S LINKS WERE
   NEVER TAKING THE PANEL'S SIZE. `.bd a` above declares font-size DIRECTLY on
   the anchor; `.bd-box .cp` sets it on the PARENT and the anchor only
   inherits — and a direct declaration beats inheritance at any specificity,
   so "- Control Panel" has been 12px the whole time while the text beside it
   was 10. Measured in the browser 2026-09-21 on exactly these rules: link at
   rest **12px**, container says **8px**.

   So v258's `:hover`-only pins made it WORSE: the link sat at 12px and
   dropped to 8px under the cursor — it shrank when you pointed at it, which
   is what the owner reported as "some kind of minimize". And the 2px
   reduction never reached the links at all.

   Both states, declared on the anchor, the way the reference does it for
   every link that has a size of its own (`a.bottomlink:active, :hover,
   :link, :visited { font: 700 8px … }`, read off naruto-boards.site the
   same day). */
.bd-box .who a, .bd-box .who a:hover,
.bd-box .cp a, .bd-box .cp a:hover,
.bd-box .lg a, .bd-box .lg a:hover { font-size: var(--bd-panel-fs); }
.bd-box .feed li a, .bd-box .feed li a:hover { font-size: 10px; }
.bd-box .feed li a.d, .bd-box .feed li a.d:hover { font-size: 9px; }
.bd-box a.bottomlink, .bd-box a.bottomlink:hover { font-size: 8px; }

/* top strip — the reference's "THE OFFICIAL NARUTO-ARENA FORUM - JOIN NOW!" */
/* div#top on the reference: 775x31, its art repeating. Art carries the
   whole strip, so once it exists our gradient and border come off — the
   .has-art-* flag applyAssetLinkOverrides() sets does that below. */
.bd-top {
  height: 31px; line-height: 31px;
  background: linear-gradient(var(--side), var(--side-2));
  color: var(--side-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--side-2); border-bottom: none;
}
.bd-top a { color: var(--side-ink); text-decoration: none; }
.bd-top a:hover { text-decoration: underline; color: var(--side-ink); }

/* nav row — six 93x20 buttons on a 93px pitch, first at x=108 */
.bd-nav {
  height: 33px;
  background: linear-gradient(var(--navy-top), var(--navy-bot));
  border: 1px solid var(--head); border-top: none;
  position: relative;
}
/* buttons sit 10px down inside the 33px row: row top 32 + 10 = y 42 */
.bd-nav .bd-navrow { position: absolute; left: 108px; top: 10px; display: flex; }
.bd-nav .bd-btn {
  width: 93px; height: 20px; line-height: 20px;
  display: block; text-align: center;
  font-size: 8px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  color: var(--side-ink);
  background: linear-gradient(var(--side), var(--side-2));
  border: 1px solid var(--panel-2); box-sizing: border-box;
}
.bd-nav .bd-btn + .bd-btn { border-left: none; }
.bd-nav .bd-btn:hover { filter: brightness(1.08); color: var(--side-ink); text-decoration: none; }

/* ---------------------------------------------------------------------
   THE THREE TOP PANELS  (login / latest activity / new topics)
   header 246x14, body 237x144 + 9x144 edge, at x 9 / 264 / 519 inside the frame
   --------------------------------------------------------------------- */
/* the reference puts a 9px spacer between the nav row and the panels
   (its .topboxes is literally a 775x9 element) */
.bd-boxes { position: relative; height: 158px; margin-top: 9px; }  /* 14 header + 144 body */
.bd-box { position: absolute; top: 0; width: 246px; }
.bd-box.b1 { left: 9px; }
.bd-box.b2 { left: 264px; }
.bd-box.b3 { left: 519px; }
.bd-box .hd {
  height: 14px; line-height: 14px;
  background: var(--side-2); color: var(--side-ink);
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 0 6px; box-sizing: border-box;
}
.bd-box .bd-body {
  height: 144px; width: 237px; box-sizing: border-box;
  background: var(--side); color: var(--side-ink);
  border: 1px solid var(--side-2); border-right: none;
  padding: 6px 8px; overflow: hidden;
  float: left;
}
/* the 9x144 strip down the right of each panel — a scroll rail on the
   reference; here it is just the panel edge, same 9px so the 246 total holds */
.bd-box .bd-edge {
  width: 9px; height: 144px; float: left;
  background: linear-gradient(var(--side-2), var(--side));
  border: 1px solid var(--side-2); border-left: none; box-sizing: border-box;
}
.bd-box a { color: var(--side-ink); }
.bd-box a:hover { color: #fff; }

/* login panel */
/* v258: 8px, down 2px from 10px, on the owner's instruction (2026-09-21) —
   the "Control Panel" link and the rest of the text in that panel. NOT a
   parity change: naruto-boards.site's own sidebar panel body computes to
   11px (measured 2026-09-21), so this is deliberately smaller than theirs.
   The activity and new-topic feeds beside it are left at 10px because their
   rows sit on a measured 13px pitch. One custom property so the three rules
   and the :hover pins above cannot drift apart. */
/* v296: 9px — "make the text inside control panel on forum 1px bigger"
   (owner, 2026-09-28). Theirs measured 10px that day (welcome line and the
   five links, Arial); still deliberately 1px under it, on instruction. */
.bd { --bd-panel-fs: 9px; }
.bd-box .who { font-size: var(--bd-panel-fs); font-weight: 700; margin-bottom: 4px; }
.bd-box .who .lo { font-weight: 400; }
.bd-box .cp { font-size: var(--bd-panel-fs); line-height: 15px; }
.bd-box .cp a { display: block; text-decoration: none; }
.bd-box .cp a:hover { text-decoration: underline; }
.bd-box .lg { font-size: var(--bd-panel-fs); }
.bd-box .lg input {
  width: 100%; box-sizing: border-box; margin: 2px 0 4px;
  font: 10px Arial, sans-serif; padding: 2px 3px;
  background: var(--panel-hi); border: 1px solid var(--side-2); color: var(--ink);
}
.bd-box .lg button {
  font: 700 9px Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--side-2); color: var(--head);
}

/* activity / new-topics lists — 228x13 rows on a 13px pitch, inset 9px */
.bd-box .feed { list-style: none; margin: 0; padding: 0; }
.bd-box .feed li {
  width: 228px; height: 13px; line-height: 13px;
  overflow: hidden; white-space: nowrap;
  font-size: 10px;
}
.bd-box .feed li .t { text-decoration: underline; }
.bd-box .feed li .d { font-size: 9px; opacity: .85; }
.bd-box .bottomlink {
  display: block; text-align: right; margin-top: 4px;
  font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
   CONTENT  (755 wide at x=10 inside the frame)
   --------------------------------------------------------------------- */
.bd-content {
  width: 755px; margin: 13px 0 0 10px;
  /* div.contentmiddle is a watermark that is 35% pure white over a white
     #layout — so the content area is white, not the game's cream */
  background: var(--bd-white);
  /* an OUTSET ring rather than a border: a 1px border would eat into the 755
     and leave every child 753 wide, which is what diff_boards.js flagged on
     the section bar. */
  box-shadow: 0 0 0 1px var(--line);
  box-sizing: border-box;
  padding-bottom: 10px;
}
/* The 755x16 section bar. The reference builds it as div.contenttop (755x16,
   a tiled background) wrapping div.breadcrumb, whose declarations are, verbatim:
     text-align: center; text-transform: uppercase;
     font: 700 11px Arial, Verdana, Helvetica, sans-serif;
     letter-spacing: 0.5px; word-spacing: 0.5px;
     text-decoration: none; color: #fff;
   — including for a:link/:visited/:hover/:active, so its crumb links are NOT
   underlined and do not change on hover. (Read from its stylesheet 2026-09-09;
   letter-spacing used to be .04em here, which is 0.44px at 11px.) */
/* div.contenttop on the reference: a 755x16 box carrying 756x16 art,
   repeating. The art is one pixel wider than the box on the reference too. */
.bd-sectionbar {
  height: 16px; line-height: 16px;
  background: linear-gradient(var(--head), #08283d);
  color: #fff; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; word-spacing: 0.5px;
}
.bd-sectionbar a,
.bd-sectionbar a:hover { color: #fff; text-decoration: none; font-weight: 700; }
/* the two ornaments flanking the trail are 19x12 IMAGES on the reference
   (zwAk0D6.gif and C2VnhrB.gif), not text glyphs */
.bd .bd-orn { width: 19px; height: 12px; vertical-align: middle; }
/* The reference's two ornaments are exact horizontal mirrors of one another,
   so one file serves both ends and the right-hand one is flipped here. If a
   separate right-hand file is ever supplied, drop this rule. */
.bd .bd-orn.right { transform: scaleX(-1); }
/* the 755x12 thin strips that top and tail a block on the reference */
.bd-strip { height: 12px; background: var(--panel-2); border-top: 1px solid var(--line); }

/* The intro line. The reference is div.padding_b (padding-bottom 10) wrapping
   p.center, and `p { padding-top: 5px }` is a global there — so the text block
   is 736 wide at x=20 (the contentmiddle padding box), 5px of space above it,
   12.67 of line, and the 10px below is what separates it from the first strap.
   Ours used to be 755 wide at x=10 with 10px of padding all round and the
   frame's 1.35 line-height, which made it 34.84 tall against 17.67. */
.bd-intro {
  width: 736px; margin-left: 10px; box-sizing: border-box;
  font-size: 11px; line-height: 12.67px; padding: 5px 0 0; text-align: center;
}
.bd-intro a { font-weight: 700; }

/* ---------------------------------------------------------------------
   TABLES — the forum list, topic list and post list all share this
   735x27 category bar + 733-wide rows at x=21 (11 inside .bd-content)
   --------------------------------------------------------------------- */
/* The reference's div.header, verbatim: width 734px; height 26px;
   border-top/left/right: 1px solid #fff — so 736x27 outer, sitting at x=20,
   flush with div.contentmiddle's 736-wide inner box. Its floated children are
   h3.header_title 403px and three divs of 55/55/180, each height 16 with
   padding 5px 3px 3px 6px and a 1px right border, i.e. rendered outer widths
   of 414 / 65 / 65 / 190 = 734. Ours had the action column at 132, which is
   58px short, and the bar 1px narrow. (Measured 2026-09-09.) */
.bd-cat { margin: 11px 0 0 10px; width: 736px; }
/* v296: THE CELL BORDERS. "have category, topic, post, last action be
   separated by a 1px black border, just like naruto boards" (owner,
   2026-09-28). Read on naruto-boards.site that day: div.header has a 1px
   WHITE border top/left/right and none below; inside it h3.header_title
   carries 1px solid #1c1917 on all four sides and each count cell on top,
   right and bottom — so every cell is boxed in near-black, 26 tall, with
   padding 5px 3px 3px 6px. The title link is 12px bold underlined white;
   the counts 11px/400 centred. */
.bd-catbar, .bd-colhead {
  height: 27px; width: 736px; box-sizing: border-box;
  background: linear-gradient(var(--head), #08283d);
  border: 1px solid #fff; border-bottom: 0;
  display: flex; align-items: stretch;
  color: #fff;
}
.bd-colhead { margin-left: 10px; }
.bd-catbar h2, .bd-colhead .t {
  margin: 0; padding: 5px 3px 3px 6px; flex: 1; box-sizing: border-box;
  border: 1px solid var(--bd-cellline);
  font: 700 12px Arial, Verdana, Helvetica, sans-serif; letter-spacing: normal;
  text-decoration: underline;
  color: #fff; white-space: nowrap; overflow: hidden;
}
.bd-catbar h2 a, .bd-colhead .t a { color: #fff; text-decoration: underline; font-size: 12px; }
.bd-catbar h2 a:hover, .bd-colhead .t a:hover { text-decoration: underline; color: #fff; font-size: 12px; }
.bd-catbar .col, .bd-colhead .col {
  width: 65px; box-sizing: border-box; padding: 5px 3px 3px 6px;
  border: 1px solid var(--bd-cellline); border-left: 0;
  font: 400 11px Arial, Verdana, Helvetica, sans-serif; text-align: center;
}
/* v297: Last Action is 140, not their 190 — the owner's call (2026-09-28
   08:12: "leave less space for last action, add it to the topic name").
   140 = the longest date this site prints ("September 30, 2026 23:59",
   127px of 10px Arial) + 8 + 3 padding + the 1px line. The 50px go to the
   title cell (464). One property, so the bar and the rows cannot differ. */
.bd { --bd-actw: 140px; }
.bd-catbar .col.action, .bd-colhead .col.action { width: var(--bd-actw); }
.bd { --bd-cellline: #1c1917; }

/* table.container (forum rows), table.altlisting (topic rows) and
   table.reply (posts) all declare the same box on the reference:
     width: 734px; margin-left: 1px; border: none solid solid 1px #1c1917
   which puts them at x=21 with 732-wide rows at x=22 — 1px wider and 1px
   right of where ours were, and now aligned with the strap above them. */
/* v297: THE GRID UNDER THE BAR. Read 2026-09-28 off naruto-boards.site
   (index and a forum, logged in): table.container is 734 wide with a 1px
   #1c1917 line down each side and NONE across; each row is followed by
   tr.spacer, a 1px #000 line; the title cell is 412 and each count cell
   (td.info1 58 + padding 3 + a 1px #1c1917 LEFT border = 65, td.info2 190)
   starts a vertical line exactly under the bar's own — 603.5 / 668.5 /
   733.5 against the bar's 604.5 / 669.5 / 734.5 cell edges. Ours had
   collapsed cream borders on every side, and a 132px Last Action cell under
   a 190px heading, which is why Topics and Posts did not line up. */
.bd-table { width: 734px; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  border-left: 1px solid var(--bd-cellline); border-right: 1px solid var(--bd-cellline); }
.bd-table td { border: 0; border-bottom: 1px solid #000; box-sizing: border-box;
  vertical-align: middle; font-size: 11px; }
/* striping: the reference alternates two row images */
/* The reference stripes whole ROWS, and only ONE of the two is tinted:
   tr.altcolor_2 is the #fbfbfb near-white tile and tr.altcolor_1 the flat
   #ececec grey. Ours had two cream tints on the CELLS, which is both the
   wrong surface and the wrong element. */
.bd-table tr:nth-child(odd)  { background: var(--bd-surface); }
.bd-table tr:nth-child(even) { background: var(--bd-rowalt); }
.bd-table td { background: none; }

.bd-table td.icon  { width: 47px; text-align: center; padding: 0; }
.bd-table td.main  { padding: 5px 8px; }
/* the reference renders a 12px title in a 13px line box (measured 119x13 and
   203x13), and the subline the same. Without this ours ran 42px tall against
   the reference's 39. */
.bd-table td.num   { width: 65px; text-align: center; padding: 3px; border-left: 1px solid var(--bd-cellline); }
.bd-table td.act   { width: var(--bd-actw); padding: 3px 3px 3px 8px; font-size: 10px; border-left: 1px solid var(--bd-cellline); }
/* a Helpful Links row: one cell across (theirs: td.fulltitle, no counts) */
.bd-table td.main.full { padding: 5px 8px; }

/* forum rows are 48 or 51 tall; topic rows 39 */
.bd-table.forums tr td { height: 48px; }
.bd-table.forums tr.tall td { height: 51px; }
.bd-table.topics tr td { height: 39px; }
.bd-table.topics tr.sticky td { height: 53px; }

.bd-title { font-size: 12px; font-weight: 700; line-height: 13px; text-decoration: underline; }
.bd-desc  { font-size: 11px; font-weight: 400; line-height: 13px; color: var(--muted); margin-top: 2px; }
.bd-sub   { font-size: 11px; font-weight: 400; line-height: 13px; }
.bd-act   { font-size: 10px; }
.bd-act .by { display: block; }
/* also scoped, for the same reason as .bd-action */
.bd .bd-profilelink { font-size: 10px; font-weight: 700; color: var(--red); text-decoration: none; }
.bd .bd-profilelink:hover { text-decoration: underline; color: var(--red-d); }
.bd-empty { font-size: 10px; text-align: center; color: var(--muted); }

/* an h3 strap — "Users browsing this Forum", "Subforums", "Topic: ..." */
/* The strap. Measured from the reference's own declarations 2026-09-09:
     div.header     { width: 734px; height: 26px;
                      border-top/left/right: 1px solid #fff;   <- see below
                      background-image: <a 59x40 tile> }
     div.header h3  { width: 723px; height: 16px;
                      padding: 5px 3px 3px 6px;
                      border: 1px solid #1c1917;
                      font: 700 11px Arial…; color: #fff; text-align: left }
   so the visible bar is 734x26 sitting at x=21, with div.header's 1px white
   border showing as one pixel of page background above and beside it. That
   border is white on a white content panel — invisible — so it is not drawn
   here; what it does contribute is 1px, which is why margin-top is 11 and not
   10 (the 10 comes from the previous table's margin-bottom, and collapses).
   Ours was 733x25 at x=20 with the text vertically centred by a 25px
   line-height; the reference pins the content box at 16px and lets the 5px
   top padding place the text. */
.bd-strap {
  width: 734px; height: 26px; box-sizing: border-box;
  margin: 11px 0 0 11px;
  padding: 5px 3px 3px 6px; line-height: normal;
  border: 1px solid var(--line);
  background: linear-gradient(var(--head), #08283d);
  color: #fff; font-size: 11px; font-weight: 700; text-align: left;
}
.bd-strapbody {
  width: 734px; margin-left: 11px; box-sizing: border-box;
  background: var(--bd-surface); border: 1px solid var(--line);
  font-size: 11px; padding: 6px 8px;
}

/* The column-header row above a topic list. There is no separate short bar
   for this on the reference: it is the SAME div.header as a category bar —
   736x27 at x=20, with the title as h3.header_title (403px) and the three
   counts as 55/55/180 floated divs. Ours was 733x23, which is where the
   3px-narrow, 4px-short heading came from. Measured on its logged-in forum
   page 2026-09-09. */
/* v296: drawn by the .bd-catbar, .bd-colhead rule above — one shape. */

/* ---------------------------------------------------------------------
   POSTS — 733x193 block, 123px author column, 75x75 avatar
   --------------------------------------------------------------------- */
.bd-postbar {
  height: 27px; line-height: 27px; width: 736px; box-sizing: border-box;
  margin: 11px 0 0 10px;
  background: linear-gradient(var(--head), #08283d);
  border: 1px solid var(--head);
  color: #fff; font-size: 11px; font-weight: 400; padding: 0 8px;
}
.bd-post { width: 734px; margin-left: 11px; border-collapse: collapse; table-layout: fixed; }
.bd-post td { border: 1px solid var(--line); vertical-align: top; font-size: 11px; }
.bd-post td.author {
  width: 123px; background: var(--bd-rowalt); padding: 6px; text-align: left;
}
.bd-post td.body { background: var(--bd-surface); padding: 8px 10px; line-height: 1.5; }
.bd-post .nm { font-size: 12px; font-weight: 700; text-decoration: underline; }
.bd-post .rk { font-size: 10px; color: var(--muted); margin: 1px 0 5px; }
.bd-post .meta { font-size: 10px; margin-top: 4px; }
.bd-post .meta b { font-weight: 700; }
.bd-post .sig {
  margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line);
  font-size: 10px; color: var(--muted);
}

/* pagination — the reference's 18x18 / 26x18 / 56x18 chips */
.bd-pages { margin: 8px 0 0 10px; display: flex; gap: 3px; align-items: center; }
.bd-pages .pg {
  height: 18px; line-height: 18px; min-width: 18px; box-sizing: border-box;
  padding: 0 4px; text-align: center; font-size: 9px; font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--head); text-decoration: none;
}
.bd-pages .pg.wide { width: 56px; }
.bd-pages .pg.on { background: var(--head); color: #fff; border-color: var(--head); }
.bd-pages .lbl { font-size: 10px; color: var(--muted); margin-right: 4px; }

/* A 71x20 action button (NEW TOPIC / POST REPLY on the reference, where the
   rule is `table.navigation td a { font: 700 10px …; text-decoration: none }`
   — bold, small, and NOT underlined). Scoped `.bd .bd-action` so it outranks
   the blanket `.bd a` above: at one class it was losing, and the 12px bold
   that rule hands out wrapped "POST REPLY" onto two lines. */
.bd .bd-action {
  display: inline-block; width: 71px; height: 20px; line-height: 20px;
  text-align: center; font-size: 8px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; box-sizing: border-box;
  background: linear-gradient(var(--side), var(--side-2));
  border: 1px solid var(--side-2); color: var(--side-ink);
}
.bd .bd-action:hover { filter: brightness(1.08); color: var(--side-ink); text-decoration: none; }

/* ---------------------------------------------------------------------
   WHO'S ONLINE / legend / footer
   --------------------------------------------------------------------- */
.bd-online { font-size: 11px; padding: 8px 12px; }
.bd-online .ranks { text-align: center; margin-top: 6px; }
.bd-online .rank4 { font-weight: 700; }
.bd-online .rank3 { font-weight: 700; text-decoration: underline; }
.bd-online .rank2 { text-decoration: underline; }
.bd-online .rank1 { font-weight: 400; }

/* div#help on the reference: a 775x80 box whose 775x60 art is drawn
   no-repeat at `0 100%` — i.e. flush to the BOTTOM, leaving the top 20px as
   page background. That offset is the rule, not a rounding: the art is 60
   tall and the box is 80. */
.bd-legend {
  width: 775px; height: 80px; box-sizing: border-box;
  background: var(--bd-foot); border: 1px solid var(--line);
  margin-top: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 30px;
  font-size: 11px;
}
.bd-legend .item { display: flex; align-items: center; gap: 10px; }
.bd-legend .item i { font-style: normal; color: var(--muted); }

/* div#footer on the reference: 775x28, art repeating */
.bd-footer {
  width: 775px; height: 28px; line-height: 28px; box-sizing: border-box;
  background: linear-gradient(var(--head), #08283d);
  color: var(--side-ink); text-align: center;
  font-size: 10px; margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   PLACEHOLDER IMAGE WELLS
   ---------------------------------------------------------------------
   Every image is registered in ASSET_LINKS with an empty value, so
   applyAssetLinkOverrides() gives it no src and the browser makes no
   request (that is the whole point of data-asset — see assetlinks.js).
   Until real art is pasted in, the element renders as a well AT THE
   REFERENCE'S EXACT SIZE. The moment a link is filled, src appears, the
   :not([src]) rule stops matching and the art shows with no border.
   --------------------------------------------------------------------- */
.bd img[data-asset] { display: inline-block; vertical-align: middle; }
.bd img[data-asset]:not([src]) {
  background: var(--placeholder);
  border: 1px dashed var(--line);
  box-sizing: border-box;
}
/* the measured sizes, one class per distinct image box */
.bd .ph-nav      { width: 93px;  height: 20px; }
.bd .ph-forum    { width: 35px;  height: 35px; }
.bd .ph-topic    { width: 16px;  height: 16px; }
.bd .ph-bullet   { width: 17px;  height: 9px;  }
.bd .ph-pagesicn { width: 12px;  height: 11px; }
.bd .ph-warn     { width: 9px;   height: 11px; }
/* 12x11, not 13x9: the supplied padlock was traced from the reference and
   its own header says 12x11, which beats my earlier eyeball of the rendered
   icon. Same story for the feed bullet — 6x6, not 8x5. */
.bd .ph-lock     { width: 12px;  height: 11px; }
.bd .ph-arrowsm  { width: 6px;   height: 6px;  }
/* the 9x9 marker the reference puts before a side-panel heading, and the
   17x9 "no new posts" counterpart to ph-bullet */
.bd .ph-marker   { width: 9px;   height: 9px;  }
.bd .ph-rowold   { width: 17px;  height: 9px;  }
.bd .ph-panelarw { width: 19px;  height: 12px; }
.bd .ph-viewarw  { width: 17px;  height: 9px;  }
.bd .ph-avatar   { width: 75px;  height: 75px; object-fit: cover; }
.bd .ph-btn      { width: 71px;  height: 20px; }

/* ---------------------------------------------------------------------
   PROFILE  (/boards/profile/<name>)
   ---------------------------------------------------------------------
   MEASURED on naruto-boards.site 2026-09-09, this time from the reference's
   OWN rules rather than from a screenshot: the profile page is client-
   rendered behind a login, so the markup came out of its page bundle and
   the geometry out of document.styleSheets, then the whole table was
   re-created inside the reference's live stylesheet and measured. Verbatim:

     table.profileinfo      width 734; margin: 0 0 10px 1px;
                            border: none solid solid 1px #1c1917  (no top);
                            background-image: a 59x40 tile
     table.profileinfo td   font-size 11px; padding 5px; width 50%;
                            vertical-align middle; NO BORDER AT ALL
     td.battle              width 33%
     td.profile_avatar      text-align center; padding-top 10px
     td.profile_avatar div  padding 10px 0
     div.levelBackground    75x14 + 1px solid #000, background #393939
     div.levelFill          height 14, position absolute, a 1x14 repeat-x gif
     div.levelNumber        position absolute, width 75, centred,
                            bold 11px Arial, #fff
     img.rank               20x20, no rule of its own (natural size)
     .lock300580            overflow hidden; max-height 300; max-width 580

   Which resolves to these rendered boxes (border-spacing computes to 0, so
   the cells are flush and the only lines on the table are its own edges):

     table                  734 x auto      cell         366 x 23
     avatar cell            366 x 140       site-rank row      27
     level row              366 x 45        battle cell  244 x 23
     signature cell         733 x auto      level bar     77 x 16

   The two borders our version used to draw — one around every cell, and a
   1px --line grid — do not exist on the reference. Removing them is most of
   what made ours look "pretty different".

   RECOLOUR: the 59x40 tile becomes --panel-3 (the same substitution the
   rest of this file makes for the reference's tiled panels); #1c1917
   becomes --line; the XP bar keeps the game's own colours, because it IS
   the game's component — .lvl/.fill/.num live in css/style.css and are
   reused here rather than re-declared.
   --------------------------------------------------------------------- */
.bd table.bd-prof {
  /* margin-left 11, not 1: the reference's `margin-left: 1px` is measured from
     the inside of div.contentmiddle, which is already inset 10px. Ours sat at
     x=11 against the reference's x=21 — a 10px shift that also left the tables
     out of line with their own straps. */
  width: 734px; margin: 0 0 10px 11px;
  /* the reference leaves border-collapse at its default and border-spacing
     computes to 0; .bd table forces collapse for every other table on the
     boards, so this one opts back out to keep the 366+366 = 732 + 2 border
     arithmetic the reference produces */
  border-collapse: separate; border-spacing: 0;
  /* border-box: the reference's 734 is the OUTER width — its rows measure
     732.67 and its cells 366.33, i.e. 734 minus the table's own two 1px
     side borders. Content-box here made every cell 367. */
  box-sizing: border-box;
  border: 1px solid var(--line); border-top: 0;
  /* table.profileinfo carries the #fbfbfb tile on the reference */
  background: var(--bd-surface);
}
.bd-prof td {
  /* the whole font shorthand, not just the size: the reference's family list
     is what sets the line box, and a 23px row is 5+5 padding over an 11px
     Arial line. Inheriting the boards' own family made every row 25. */
  width: 50%; padding: 5px; border: 0; box-sizing: border-box;
  font: 11px Arial, Verdana, Helvetica, sans-serif;
  /* the reference leaves line-height at `normal`, which on real Arial at
     11px computes to a 12.67px line box and gives its 22.67px (= 23) rows.
     Pinning the number instead of the keyword is deliberate: `normal` is a
     font metric, so a machine that substitutes Arial (most Linux boxes, and
     the headless Chromium this repo's diff harness runs) lands on 12 and
     every row comes out 1px short — which then multiplies by the row count
     and moves the whole table. This makes the row height the same
     everywhere, which is the thing being matched. */
  line-height: 12.67px;
  vertical-align: middle; background: none;
}
/* style.css sets a blanket `img { display: block }` for the game, and as
   blocks these images each claimed a line of their own — which is what made
   the Site rank row 48px tall instead of 27 and the Level row 54 instead of
   45. On the reference they are ordinary inline images on the baseline.
   (.bd .bd-avatar below is two classes, so the avatar keeps inline-block.) */
.bd-prof img { display: inline; vertical-align: baseline; }

/* labels are <u> on the reference, not <b> — underlined, not bold — and the
   username/crew name is an inline <h4>, which is where the bold sits */
.bd-prof u  { text-decoration: underline; }
.bd-prof h4 { display: inline; font: 700 11px Arial, Verdana, Helvetica, sans-serif; margin: 0; }
/* "E-mail:: n/a" — we do not publish addresses either, so the row is the
   same permanent n/a it is there */
.bd-prof .nothing { display: inline; letter-spacing: 1px; color: var(--muted); }
.bd-prof td.av-cell { text-align: center; padding-top: 10px; vertical-align: middle; }
.bd-prof td.av-cell div { padding: 10px 0; }
.bd-prof td.battle { width: 33%; }
/* the 20x20 game rank badge sits on the baseline with no margin */
.bd-prof img.rank { width: 20px; height: 20px; vertical-align: baseline; }
/* the 11x14 site-role badge */
.bd-prof img.siterank { width: 11px; height: 14px; vertical-align: baseline; }
/* a signature is clipped, never allowed to stretch the page */
.bd-prof .siglock { overflow: hidden; max-height: 300px; max-width: 580px; }
/* a hard 75x75 box: a non-square upload is cropped, never stretched */
.bd .bd-avatar { width: 75px; height: 75px; object-fit: cover; display: inline-block; }
.bd .bd-avatar:not([src]) { background: var(--placeholder); border: 1px dashed var(--line); }


/* =====================================================================
   SUPPLIED ART — the layout assets recreated from naruto-boards.site
   ---------------------------------------------------------------------
   Everything here is inert until ASSET_LINKS carries a URL for the file:
   applyAssetLinkOverrides() publishes each one as var(--asset-boards-…)
   AND adds a .has-art-<file> class to <html>, so a rule can both use the
   art and drop the CSS decoration it replaces. With no link, none of these
   rules match and the boards look exactly as they did.

   Every repeat / position / box below is the reference's own, read off the
   element each asset replaces (2026-09-09):

     body                   96x96 tile, repeat
     div#top               775x31, repeat
     div#footer            775x28, repeat
     div#help              775x60 art, NO-REPEAT at 0 100% in a 775x80 box
     div.contenttop        756x16, repeat, in a 755x16 box
     tr.altcolor_1 / _2     59x40 tiles, repeat  (the two row patterns)
     div#controlpanel_top  246x14, repeat        (and the other two panels)
     div.boxleft           237x144, repeat
     div.boxright            9x144, repeat
     #topnav img            85x20, padding 0 4px -> a 93x20 box, centred,
                            over #layout's WHITE background (#topnav itself
                            has no background at all)
   ===================================================================== */

/* ---- the top strip, footer, legend and section bar ----

   FOUR of these assets carry their own label painted into the picture — the
   top strip, the footer, and each of the three panel headings — which was
   only obvious once the art was applied to the live page: our text sat on
   top of the art's text and both smeared together. So the rule for those is
   the same one .skinned uses on a button: the art replaces the label.

   `color: transparent` rather than removing the text, so the anchor stays
   clickable and a screen reader still reads it. The section bar is the
   opposite case: its crumb trail changes per page, so there the art is a
   background and our text stays visible, exactly as the reference draws its
   breadcrumb over div.contenttop's tile. */
.has-art-boards_top .bd-top {
  /* the art is layered OVER our gradient, not swapped for it: a background
     shorthand that replaces the gradient leaves the bar EMPTY whenever the
     image cannot be fetched — slow network, an imgur outage, or a sandbox
     with no route to it. Two layers means a failed image degrades to the
     CSS chrome we drew before the art existed. */
  background: var(--asset-boards-top) repeat,
              linear-gradient(var(--side), var(--side-2));
  border: 0;
}
.has-art-boards_top .bd-top,
.has-art-boards_top .bd-top a,
.has-art-boards_top .bd-top a:hover { color: transparent; }
.has-art-boards_footer .bd-footer {
  background: var(--asset-boards-footer) repeat,
              linear-gradient(var(--head), #08283d);
  color: transparent;
}
.has-art-boards_legend .bd-legend {
  background: var(--asset-boards-legend) no-repeat 0 100%,
              var(--bd-foot);
  border: 0;
}
.has-art-boards_sectionbar .bd-sectionbar {
  background: var(--asset-boards-sectionbar) repeat,
              linear-gradient(var(--head), #08283d);
}

/* ---- the three side panels ---- */
/* Each of the three 246x14 headings has its own label painted in — they are
   three different pictures for that reason — so the heading text and its
   9x9 marker both come off when the art is there. */
.has-art-boards_panel_head_1 .bd-box.b1 .hd { background: var(--asset-boards-head1) repeat, var(--side-2); color: transparent; }
.has-art-boards_panel_head_2 .bd-box.b2 .hd { background: var(--asset-boards-head2) repeat, var(--side-2); color: transparent; }
.has-art-boards_panel_head_3 .bd-box.b3 .hd { background: var(--asset-boards-head3) repeat, var(--side-2); color: transparent; }
.has-art-boards_panel_head_1 .bd-box.b1 .hd .ph-marker,
.has-art-boards_panel_head_2 .bd-box.b2 .hd .ph-marker,
.has-art-boards_panel_head_3 .bd-box.b3 .hd .ph-marker { display: none; }
.has-art-boards_panel_body .bd-box .bd-body {
  background: var(--asset-boards-panelbody) repeat, var(--side);
  border: 0;
}
.has-art-boards_panel_edge .bd-box .bd-edge {
  background: var(--asset-boards-paneledge) repeat, var(--side-2);
  border: 0;
}

/* ---- the two supplied 59x40 tiles ----

   Settled by sampling both the art and the reference's own tiles rather
   than by reasoning about their names. The reference has exactly three
   59x40 tiles by colour:

     #fbfbfb (88% white)  table.profileinfo, table.reply, tr.altcolor_2
     #ececec (flat grey)  tr.altcolor_1, table.navigation's buttons
     #24a3f4 (blue)       div.header, div.inlineheader

   backgroundpattern_1 averages #ececec — the SAME value as the reference's
   grey row tile, to the byte. backgroundpattern_2 averages #aa3229, which
   is the blue bar tile recoloured to our red.

   So pattern_1 is one alternating ROW, not the whole table, and there is
   no art for the other row because on the reference that row is already
   near-white — which is why the middle of the page reads as white. An
   earlier pass here put pattern_1 on the whole table and turned every row
   grey. ---- */
.has-art-boards_row_1 .bd-table tr:nth-child(even) {
  background: var(--asset-boards-row1) repeat, var(--bd-rowalt);
}
.has-art-boards_row_1 .bd-table td { background: none; }   /* v297: the grid lines stay with the art on */
.has-art-boards_row_2 .bd-strap,
.has-art-boards_row_2 .bd-catbar,
.has-art-boards_row_2 .bd-postbar,
.has-art-boards_row_2 .bd-colhead {
  background: var(--asset-boards-row2) repeat,
              linear-gradient(var(--head), #08283d);
}

/* the 450x1 rule the reference lays between listing rows, repeated across */
/* v297: no picture between listing rows — theirs is tr.spacer, a 1px #000
   line, which the cells' own bottom border now draws (read 2026-09-28). The
   450x1 rule stays the signature's (below the post text). */

/* ---- the six nav buttons.
   These already arrive through data-skin, which sets the background-image
   inline and adds .skinned — so no var(--asset-…) is needed. What was
   missing is a rule for what .skinned should LOOK like on a boards button:
   nothing stripped our gradient, border or text label, so real art would
   have appeared underneath our own drawn button.

   Measured on the reference: #topnav is 765x23 + `padding: 10px 5px 0`
   (= 775x33) with NO background of its own, so the buttons sit on
   #layout's white. Each is an <img> with natural size 85x20 and
   `padding: 0 4px`, rendering a 93x20 box on a 93px pitch — which is the
   93x20 diff_boards.js pins. The art is 85 wide, the box is 93.

   The strip whitens on has-art-boards_nav_1: art on the buttons over our
   own coloured strip is the one combination that would look wrong, and
   white is the reference's answer. ---- */
.has-art-boards_nav_1 .bd-nav {
  background: #fff;
  border-color: var(--line);
}
.bd-nav .bd-btn.skinned {
  /* the 85x20 picture centred in the 93x20 box — what the reference's 4px
     of horizontal padding produces. applyButtonSkins() sets the image as an
     inline background-image, so it lands on the FIRST layer; naming our own
     gradient as the second keeps a recognisable button if that image never
     arrives (the label is painted into the art, so it is transparent either
     way and a bare box would otherwise be invisible on the white strip). */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85px 20px;
  /* NO background-color. The art is 85 wide in a 93-wide box, so a colour
     here paints the 4px either side of every button — which showed up as
     red bands between them. On the reference those 4px are the strip's own
     white, because #topnav has no background at all. (This is the fallback
     I added for a never-arriving image; a blank white button is the right
     failure, a red band between every button is not.) */
  border: 0; box-shadow: none;
  /* the label is painted into the art; keep the text for screen readers and
     for the no-art case rather than removing it from the DOM */
  color: transparent;
}

/* ---- the spinner, where a boards page is waiting on the API ---- */
.bd-spinner {
  width: 20px; height: 20px; display: inline-block; vertical-align: middle;
  background: var(--asset-boards-loading, none) no-repeat center/20px 20px;
}

/* =====================================================================
   v266 — THE FORM PARTS, as the reference's stylesheet declares them.
   Read 2026-09-23 from naruto-boards.site's /_next/static/css/8a7734bb04ee72d9.css
   and measured on its live pages (change-signature, change-avatar,
   change-password, create-topic, a topic's reply box), logged in, DPR 1.25.
   Every writing page is built from these, through js/boards.js.
   ===================================================================== */

/* div.container_c2 — the hint box under a bar: 722 + 5+5 padding + 1+1
   border = 734, no top border, 10 below. Theirs tiles a 59x40 near-white. */
.bd-hint {
  width: 734px; margin: 0 0 10px 11px; box-sizing: border-box;
  padding: 5px; border: 1px solid var(--line); border-top: 0;
  background: var(--bd-surface); font-size: 11px; line-height: normal;
}
/* the bar right under another part sits flush: their div.header is
   preceded by a 10px margin-bottom, which ours reproduces as the strap's
   own 11 (10 + the white 1px border) — so a bar straight after a hint box
   or a post table takes no second margin */
.bd-hint + .bd-strap, .bd-hint + .bd-postbar { margin-top: 1px; }

/* div.reply div.h3 — "Posted on" left (8px in, 3px down), a 360px cell of
   71x20 buttons right, floated right, 1px apart */
.bd .bd-postbar { display: flex; align-items: flex-start; padding: 0 2px 0 8px; line-height: normal;
  font-weight: 700; }
.bd .bd-postbar .l { flex: 1; padding-top: 5px; white-space: nowrap; overflow: hidden; }
.bd .bd-postbar .r { width: 360px; display: flex; flex-direction: row-reverse; gap: 1px; padding-top: 2px; }
.bd .bd-postbar .ph-postmark { width: 13px; height: 9px; vertical-align: 0; }
.bd .bd-barbtn { flex: none; }

/* table.reply: 734 wide, no top border, 10 below, td padding 5; the author
   cell 150 (122.4 rendered — the 600px post container wins the rest), 10px;
   the post container 600, the number on top 11px bold right, the text at
   least 160 tall, the signature 30px down under a 450x1 rule at 25px and
   clipped to 580x300 (their .lock300580). */
.bd .bd-post { margin-bottom: 10px; }
.bd .bd-post td.author { padding: 5px; font-size: 10px; }
.bd .bd-post td.author .bd-avatar { padding: 5px 0; box-sizing: content-box; }
.bd .bd-post td.body { padding: 5px; line-height: normal; }
.bd .bd-postc { width: 600px; max-width: 100%; overflow-x: auto; }
.bd .bd-postc .num { text-align: right; font-size: 11px; }
.bd .bd-postc .txt { padding: 5px 0 5px 5px; min-height: 160px; box-sizing: content-box;
  font-size: 11px; color: #000; overflow-wrap: anywhere; }
.bd .bd-post .sig {
  margin: 0; border: 0; padding-top: 30px; font-size: 11px; color: inherit;
  background: linear-gradient(var(--line), var(--line)) no-repeat 0 25px / 450px 1px;
  max-height: 300px; max-width: 580px; overflow: hidden;
}
.has-art-boards_line .bd .bd-post .sig {
  background: var(--asset-boards-line) no-repeat 0 25px / 450px 1px;
}
.bd .bd-post i.none { opacity: .8; }

/* the editor: table.reply > td padding 5 0 5 5 > center — two 280px button
   rows (padding 6) either side of the textarea. Buttons: 10px, padding 3,
   1px black border, white on the bar colour, 4px apart; greyed while busy. */
.bd .bd-editor td { padding: 5px 0 5px 5px; text-align: center; background: var(--bd-surface); }
.bd .bd-edwrap.wide { margin-left: 81px; width: 564px; position: relative; }
.bd .bd-btnrow { width: 280px; padding: 6px; margin: 0 auto; text-align: center; box-sizing: content-box; }
.bd .bd-editbtn {
  padding: 3px; margin-left: 4px; font: 10px Arial, sans-serif; line-height: normal;
  background: var(--head); color: #fff; border: 1px solid #000; cursor: pointer;
}
.bd .bd-editbtn.busy { opacity: .6; cursor: default; }
.bd .bd-ta {
  font: 12px Arial, Verdana, Helvetica, sans-serif; padding: 0 2px;
  border: 1px solid #000; margin-bottom: 5px; outline: 0; resize: vertical;
  max-width: 100%; box-sizing: content-box;
}
.bd .bd-formmsg { text-align: center; color: var(--red); margin: 0; padding: 5px 0 10px; font-size: 11px; }
.bd .bd-formmsg.ok { color: var(--green); }
.bd .bd-formmsg:empty { padding: 5px 0 10px; }
/* the create-topic title field: a 270px centred column, the label 6px above */
.bd .bd-titlefield { text-align: center; width: 270px; margin: 0 auto; }
.bd .bd-titlefield .lbl { padding: 0 0 6px 3px; font-weight: 700; }
.bd .bd-titlefield input { width: 255px; outline: 0; font: 12px Arial, sans-serif; border: 1px solid #000;
  padding: 1px 2px; box-sizing: content-box; }

/* div.modcontrols / table.modcontrols — white, 1px border, no top border */
.bd .bd-modcontrols { width: 734px; margin: 0 0 10px 11px; box-sizing: border-box;
  border: 1px solid var(--line); border-top: 0; background: #fff; }
.bd div.bd-modcontrols { height: 141px; }
.bd div.bd-modcontrols .c { text-align: center; padding: 10px; }
.bd div.bd-modcontrols .c img { width: 75px; height: 75px; }
.bd div.bd-modcontrols .c input { border: 1px solid #000; margin-left: 10px; width: 200px; padding: 1px 2px;
  box-sizing: content-box; font: 12px Arial, sans-serif; }
.bd table.bd-modcontrols { border-collapse: separate; border-spacing: 0; }
.bd table.bd-modcontrols td { padding: 5px; font-size: 11px; }
.bd table.bd-modcontrols td input { border: 1px solid #000; font: 12px Arial, sans-serif; padding: 1px 2px; box-sizing: content-box; }
.bd .bd-btnline { width: 734px; margin-left: 11px; }

/* table.max + table.navigation — pages, floated right; a left cell for the
   NEW TOPIC button or the "closed" line */
.bd .bd-max { width: 735px; margin: 0 0 10px 10px; border-collapse: collapse; }
.bd .bd-max td.l { vertical-align: middle; font-size: 11px; }
.bd .bd-max td.r { text-align: right; }
.bd .bd-navtable { border: 1px solid #000; border-collapse: separate; border-spacing: 0; display: inline-table; }
.bd .bd-navtable td { font-size: 10px; border-left: 1px solid #000; padding: 0; background: var(--bd-rowalt); }
.bd .bd-navtable td:first-child { border-left: 0; }
.bd .bd-navtable td.pages span { display: block; height: 15px; padding: 2px 2px 0; border: 1px solid #fff; }
.bd .bd-navtable td.curr { background: #dbdbdb; }
.bd .bd-navtable td a, .bd .bd-navtable td.curr b {
  display: block; height: 15px; width: 17px; padding-top: 2px; text-align: center;
  border: 1px solid #fff; font: 700 10px Arial, sans-serif; text-decoration: none; color: var(--head);
}
.bd .bd-navtable td.imgs a { width: 25px; }
.bd .bd-navtable td a:hover { background: #fff; }

/* the three tags the boards editor adds (bbcode.js) */
.bd .bb-center { text-align: center; }
.bd .bb-quote { margin: 4px 0 6px; padding: 5px 8px; border: 1px solid var(--line); background: var(--bd-rowalt); }
.bd .bb-quote .bb-qh { font-weight: 700; margin-bottom: 3px; }
.bd .bb-spoiler summary { cursor: pointer; font-weight: 700; }
/* div.header div.h3 img { float: left; margin-top: -2px } — the bar's icon */
.bd .bd-strap .ph-topic { float: left; margin-top: -2px; }

/* =====================================================================
   v296 — THE REFERENCE'S TYPE, EVERYWHERE ON THE BOARDS.
   "use the font they used, everywhere on the forum. Also copy font style
   (size, format [bold, underline, italic], positioning)" — owner,
   2026-09-28. Read that day off naruto-boards.site's own stylesheet (every
   rule that sets a font: REF_V296_2026-09-28.json → fonts) and checked
   against the computed style of each text on its index, a forum, a topic,
   a profile and change-signature, logged in. Family is Arial everywhere
   except three Verdana rules: a.bottomlink, a.profilelink and the feed
   dates. Colours are not part of this; ours stay ours.
   Where ours already matched, nothing here touches it.
   ===================================================================== */
/* Login / Control Panel — div.controlpanel: the line is regular, the name
   inside it is <b>; "(logout)" is a plain span; the five links are
   #controlpanel li a { 10px Arial 400, no underline }. Size stays the
   owner's --bd-panel-fs (see above). */
.bd-box .who { font-weight: 400; }
.bd-box .who > span { font-weight: 700; }
.bd-box .who a.lo, .bd-box .who a.lo:hover { font-weight: 400; text-decoration: none; }
.bd-box .cp a { font-weight: 400; text-decoration: none; }
.bd-box .cp a:hover { font-weight: 400; }
/* ul.quickbox li a { 10px Arial 400 underline, letter-spacing 1px } and
   ul.quickbox li span { 9px Verdana italic } — the two feeds */
.bd-box .feed li a.t, .bd-box .feed li a.t:hover {
  font: 400 10px Arial, Verdana, Helvetica, sans-serif; letter-spacing: 1px; text-decoration: underline;
}
.bd-box .feed li .d { font: italic 400 9px Verdana, Arial, Helvetica, sans-serif; }
/* a.bottomlink { 700 8px Verdana, letter-spacing 1px, uppercase } */
.bd-box a.bottomlink, .bd-box a.bottomlink:hover {
  font: 700 8px Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase;
}
/* the crumb trail's links are the trail's own size: div.breadcrumb a
   { 700 11px, no underline, letter-spacing .5px } — ours were 12px */
.bd-sectionbar a, .bd-sectionbar a:hover {
  font: 700 11px Arial, Verdana, Helvetica, sans-serif; letter-spacing: 0.5px; word-spacing: 0.5px;
}
/* a.profilelink { 700 10px Verdana, no underline } */
.bd .bd-profilelink, .bd .bd-profilelink:hover {
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: 700;
}
/* the four rank classes, names and labels alike:
   rank4 700 no underline · rank3 700 underline · rank2 400 underline ·
   rank1 400 none — all 11px Arial. A name in Who's Online / "users
   browsing" was 12px bold underlined whatever its rank. */
.bd a.rank4, .bd a.rank4:hover, .bd .rank4 { font: 700 11px Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }
.bd a.rank3, .bd a.rank3:hover, .bd .rank3 { font: 700 11px Arial, Verdana, Helvetica, sans-serif; text-decoration: underline; }
.bd a.rank2, .bd a.rank2:hover, .bd .rank2 { font: 400 11px Arial, Verdana, Helvetica, sans-serif; text-decoration: underline; }
.bd a.rank1, .bd a.rank1:hover, .bd .rank1 { font: 400 11px Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }
/* the legend's "(last 24h)" is an <i> and stays italic there */
.bd-legend .item i { font-style: italic; }
/* ul.sitemap li a { 400 12px, no underline } */
.bd .bd-sitemap a, .bd .bd-sitemap a:hover { font: 400 12px Arial, Verdana, Helvetica, sans-serif; text-decoration: none; }

/* v296: the Announcements box rows — td.title_icon_small (24 + 7 left)
   and td.title_title (padding 5): h4 title, "- N hits" in .small (11px
   400), then the "posted on" line as a block of 11px (2013 reference,
   read 2026-09-28) */
.bd .bd-ann td.icon { width: 24px; padding-left: 7px; }
.bd .bd-ann td.main { padding: 5px; }
.bd .bd-ann .hits { font: 400 11px Arial, Verdana, Helvetica, sans-serif; }
.bd .bd-ann .bd-sub { display: block; font-size: 11px; padding-top: 2px; }
/* the Forum Rank List: ul.modlist { margin-left: 20px } */
.bd .bd-modlist { margin: 4px 0 0 20px; padding: 0; }
.bd .bd-modlist li { font-size: 11px; line-height: normal; }