@import url(style_cs.1788530058.css);

* {
  box-sizing: border-box;
}

/* every font-size below this point is in rem, relative to this one root
   value — bump --font-size-base in colors.css to rescale the whole forum */
html {
  font-size: var(--font-size-base);
}

/* screen-reader-only utility — used throughout the forum markup (post author
   labels, action link suffixes) to keep text accessible without showing it */
.acchide,
/* "(Íåò àâàòàðà)" fallback text — the placeholder box below replaces it visually */
#viewprofile-next.no-avatar #pa-avatar strong,
/* lore-article tab radios: same clip technique, kept clickable via their
   <label for>, see LORE ARTICLE TEMPLATE below */
.lore-article .lore-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* form-element resets .acchide doesn't need (it's never applied to an <input>) */
.lore-article .lore-tab-input {
  margin: -1px;
  padding: 0;
  border: 0;
}

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* base link style, wherever a more specific component rule doesn't already
   set one (nav, cards, dark-surface menus etc. all style their own anchors) */
a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-heading-hover);
}

#html-header {
  width: 100%;
  max-width: 1082px;
  margin: 0 auto;
  position: relative;
}

/* ---- HERO ---- */
.hero {
  position: relative;
  width: 100%;
  height: 390px;
  overflow: hidden;
  border-bottom: 2px solid var(--color-border);
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

.hero::after {
  /* gentle vignette so overlaid text stays legible on either half */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-bg-rgb), 0.55) 0%, rgba(var(--color-bg-rgb), 0.05) 30%, rgba(var(--color-bg-rgb), 0.05) 70%, rgba(var(--color-bg-rgb), 0.6) 100%);
}

.title-overlay {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.title-overlay h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.71429rem;
  letter-spacing: 5px;
  color: var(--color-text-on-dark);
  line-height: 1;
  text-shadow: 0 2px 8px rgba(var(--color-shadow-rgb), 0.85), 0 0 18px rgba(var(--color-shadow-rgb), 0.6);
}

.title-overlay .subtitle {
  margin-top: calc(1 * var(--base-spacing));
  font-style: italic;
  font-size: 1.14286rem;
  letter-spacing: 2px;
  color: var(--color-accent-light);
  line-height: 1;
  text-shadow: 0 1px 6px rgba(var(--color-shadow-rgb), 0.85);
}

/* ---- NAV RIBBON ---- */
.nav-ribbon {
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 1px solid var(--color-link);
  border-bottom: 3px solid var(--color-border);
  padding: calc(2.25 * var(--base-spacing)) calc(2.5 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  text-align: center;
  position: relative;
}

.nav-primary {
  display: flex;
  justify-content: center;
  gap: calc(3.75 * var(--base-spacing));
  list-style: none;
  margin: 0 0 calc(1.125 * var(--base-spacing));
  padding: 0;
  flex-wrap: wrap;
}

.nav-primary a {
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.85714rem;
  letter-spacing: 2px;
  font-weight: 500;
  padding-bottom: calc(0.375 * var(--base-spacing));
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}

.nav-primary a:hover {
  color: var(--color-accent-hover);
  border-bottom: 1px solid var(--color-accent);
}

.nav-secondary {
  display: flex;
  justify-content: center;
  gap: calc(2.25 * var(--base-spacing));
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.25);
  padding-top: calc(1 * var(--base-spacing));
}

.nav-secondary a {
  text-transform: uppercase;
  color: var(--color-text-on-dark-subtle);
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 400;
}

.nav-secondary a:hover {
  color: var(--color-text-on-dark);
}

/* mobile burger nav — inert/hidden on desktop, activated in the mobile breakpoint */
.nav-mobile {
  display: none;
}

/* collapse toggle — inert on desktop, activated only inside the mobile breakpoint */
.nav-more-checkbox {
  display: none;
}

.nav-more-label {
  display: none;
}

/* ---- STATUS LINE ---- */
.status-line {
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  color: var(--color-text-on-dark);
  text-align: center;
  padding: calc(1.25 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.status-line strong {
  color: var(--color-accent-bright);
}

.note {
  max-width: 1082px;
  margin: calc(2.25 * var(--base-spacing)) auto;
  color: var(--color-neutral-muted);
  font-family: var(--font-fallback);
  font-size: 0.85714rem;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ---- HIGHLIGHTS STRIP (overlaid on hero) ---- */
.highlights {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  background: rgba(var(--color-bg-rgb), 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.4);
}

.highlight-card {
  flex: 1;
  padding: calc(1.25 * var(--base-spacing)) calc(2 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  border-right: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.highlight-card:last-child {
  border-right: none;
}

.highlight-card--wide {
  flex: 1.3;
}

.highlight-card--queue {
  flex: 1.15;
}

.highlight-label {
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 2px;
  color: var(--color-accent);
  margin-bottom: calc(1.25 * var(--base-spacing));
  display: block;
}

/* players */
.players-row {
  display: flex;
  gap: calc(1.25 * var(--base-spacing));
}

.player {
  text-align: center;
  flex: 1;
}

.player .av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin: 0 auto calc(0.5 * var(--base-spacing));
  background: linear-gradient(145deg, var(--color-text-muted), var(--color-text));
  border: 2px solid var(--color-accent);
}

.player .name {
  font-size: 0.71429rem;
  color: var(--color-text-cream);
  line-height: 1.15;
}

/* best post / episode */
.post-title,
.episode-title {
  font-family: var(--font-heading);
  font-size: 0.92857rem;
  color: var(--color-text-on-dark);
  margin: 0 0 calc(0.375 * var(--base-spacing));
}

.post-excerpt,
.episode-desc {
  font-size: 0.85714rem;
  color: var(--color-text-on-dark-subtle);
  font-style: italic;
  line-height: 1.3;
  margin: 0 0 calc(0.5 * var(--base-spacing));
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.highlight-link {
  font-size: 0.85714rem;
  color: var(--color-accent-hover);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.highlight-link:hover {
  color: var(--color-text-on-dark);
}

/* ---- QUEST QUEUE (compact, inside overlay) ---- */
.quest-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quest-mini li {
  display: flex;
  flex-direction: column;
  padding: calc(0.375 * var(--base-spacing)) 0;
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.15);
}

.quest-mini li:last-child {
  border-bottom: none;
}

.q-name {
  font-size: 0.82143rem;
  color: var(--color-text-on-dark);
  font-style: italic;
  line-height: 1.2;
}

.q-meta {
  font-size: 0.71429rem;
  color: var(--color-text-on-dark-subtle);
  letter-spacing: 0.2px;
}

/* keep our header block from inheriting forum body font defaults */
#html-header,
#html-header * {
  font-family: var(--font-body);
  box-sizing: border-box;
}

#html-header .nav-primary a,
#html-header .nav-secondary a,
#html-header .title-overlay h1,
#html-header .highlight-label {
  font-family: var(--font-heading);
}

/* ============ PAGE-WIDE UNIFICATION ============ */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
}

/* .punbb already wraps everything below the header in the real markup —
   turning it into one continuous parchment panel instead of per-section defaults */
.punbb {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1082px;
  margin: 0 auto;
  background: url(https://forumstatic.ru/files/001c/c7/56/37302.jpg);
  background-position: 0 -169px;
  background-color: #1e170f;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  box-shadow: 0 10px 34px rgba(var(--color-shadow-rgb), 0.5);
  padding-bottom: calc(3 * var(--base-spacing));
  overflow: hidden;
}

/* pull navlinks/ulinks above html-header visually — DOM order unchanged, only
   flex `order` reshuffles paint order; all other children stay at default
   order 0 so they keep their normal relative sequence */

/* strip the platform's default panel chrome so everything reads as one paper surface */
.punbb .section {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  font-family: var(--font-body);
  color: var(--color-text);
  background: rgb(15 11 9 / 93%);
  backdrop-filter: blur(2px);
}

.punbb .crumbs,
.punbb .crumbs strong {
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.punbb .crumbs {
  color: var(--color-text-on-dark-muted);
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(var(--color-border-rgb), 0.3);
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: calc(1 * var(--base-spacing)) calc(3 * var(--base-spacing));
}

/* "you are here" label reads as the anchor point, brighter than the trail around it */
.punbb .crumbs strong {
  color: var(--color-text-on-dark);
}

/* chevron separators sit quiet so the eye lands on labels and links, not dividers */
.punbb .crumbs em {
  color: rgba(var(--color-accent-rgb), 0.5);
  font-style: normal;
}

.punbb .crumbs a,
.punbb .crumbs span {
  color: var(--color-accent);
  text-decoration: none;
}

.punbb .crumbs a:hover {
  color: var(--color-accent-bright);
  text-decoration: underline;
}

.punbb #pun-main {
  background: var(--color-panel-bg-alt);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.punbb #pun-main>h1 {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  margin: 0;
  text-align: center;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

.punbb #pun-main>h1 span {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  color: var(--color-text-on-dark);
  text-transform: uppercase;
}

/* "Ôîðóì" label — redundant under our header on index */
.punbb #pun-index #pun-main>h1 {
  display: none;
}

/* pagination + new-topic/new-poll toolbar merged into the h1 banner row */
.punbb #pun-main>h1+.linkst {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--color-text-on-dark-muted);
}

.punbb #pun-main>h1+.linkst .pagelink strong {
  color: var(--color-accent-bright);
}

/* drop the parchment-page button chrome — on the banner these read as native
   header controls, pinned flush to the far right edge */
.punbb #pun-main>h1+.linkst .postlink {
  margin-left: auto;
  gap: 0;
}

.punbb #pun-main>h1+.linkst .postlink a {
  background: none;
  border: none;
  border-radius: 0;
  padding: calc(0.25 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--color-text-on-dark-muted);
}

.punbb #pun-main>h1+.linkst .postlink span+span {
  border-left: 1px solid rgba(var(--color-accent-rgb), 0.4);
}

.punbb #pun-main>h1+.linkst .postlink a:hover {
  color: var(--color-accent-bright);
}

.punbb #pun-stats {
  border: none;
  box-shadow: none;
  font-family: var(--font-body);
  color: var(--color-text);
  backdrop-filter: blur(2px);
  background: var(--color-panel-bg-alt);
  width: 100%;
  box-sizing: border-box;
  padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
}

.punbb #pun-stats h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.25 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.92857rem;
  letter-spacing: 2px;
  color: var(--color-heading);
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  margin: 0 calc(-2 * var(--base-spacing));
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

.punbb #pun-stats h2 span {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  color: var(--color-text-on-dark);
  text-transform: uppercase;
}

.punbb #pun-stats ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--base-spacing)) calc(3 * var(--base-spacing));
  font-size: 0.89286rem;
  color: var(--color-text-muted);
}

#pun-stats .statscon,
#pun-stats ul.container {
  background: transparent;
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(var(--color-highlight-rgb), 0.3);
  padding: calc(1.625 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
}

#pun-stats ul.container li {
  padding: calc(0.25 * var(--base-spacing)) calc(0.75 * var(--base-spacing));
  border-radius: 2px;
  transition: background 0.15s;
}

#pun-stats ul.container li:hover {
  background: rgba(var(--color-border-rgb), 0.08);
}

#pun-stats li,
#pun-stats span {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: 0.92857rem;
}

.punbb #pun-stats strong {
  font-family: var(--font-body);
  color: var(--color-heading);
  font-size: 0.92857rem;
  font-weight: 600;
}

.punbb #pun-stats a {
  color: var(--color-link);
  text-decoration: none;
}

.punbb #pun-stats a:hover {
  color: var(--color-heading);
}

.punbb #pun-about {
  border: none;
  box-shadow: none;
  font-family: var(--font-body);
  color: var(--color-text);
  background: rgb(15 11 9 / 93%);
  backdrop-filter: blur(2px);
  padding: calc(1.5 * var(--base-spacing)) calc(3 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  text-align: center;
}

.punbb #pun-about a {
  font-family: var(--font-body);
  color: var(--color-link);
  text-decoration: none;
  font-size: 0.85714rem;
  letter-spacing: 0.5px;
}

.punbb #pun-about a:hover {
  color: var(--color-heading);
}

#pun-about .item1 {
  padding-left: 0;
}

/* ============ FORUM BODY (category + listing) ============ */
/* .forum (topic listing inside a forum, on viewforum pages) reuses this same
   row/table layout — its content differs (topics not forums, no h3 wrapper, plain
   byuser instead of lastpost), so only the shared structural rules below are
   extended to it; markup-specific rules follow in their own TOPIC LISTING block */
.category,
.forum {
  font-family: var(--font-body);
  margin: 0 0 calc(0.5 * var(--base-spacing));
}

.category h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.25 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  margin: 0;
  text-align: center;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

.category h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(3 * var(--base-spacing));
  right: calc(3 * var(--base-spacing));
  height: 1px;
  background: rgba(var(--color-accent-light-rgb), 0.5);
}

.category h2::after {
  right: calc(3 * var(--base-spacing));
}

.category h2 span {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  color: var(--color-text-on-dark);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  padding: 0 calc(3 * var(--base-spacing));
}

.category .catleft,
.category .catright {
  display: none;
}

.category .container,
.forum .container {
  border-top: none;
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(var(--color-highlight-rgb), 0.3);
}

.category table,
.forum table {
  width: 100%;
  border-collapse: collapse;
}

.category thead,
.forum thead {
  display: none;
}

.category tbody tr {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  padding: calc(1.625 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3);
  border-left: 5px solid transparent;
  /* default = read state */
  transition: background 0.15s;
}

/* no description/tags line here (unlike .category), so a plain wrapping flex
   row lays tcl/tc2/tc3/tcr out directly — no need for .category's
   force-wrap-then-absolutely-position-the-second-line trick */
.forum tbody tr {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: calc(1.625 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3);
  border-left: 5px solid transparent;
  transition: background 0.15s;
}

.category tbody tr:last-child,
.forum tbody tr:last-child {
  border-bottom: none;
}

.category tbody tr:hover,
.forum tbody tr:hover {
  background: rgba(var(--color-border-rgb), 0.08);
}

/* unread state — sole indicator is this border + tint, no dedicated dot/icon.
   fallback selectors: confirm real class name on live site and narrow this */
.category tbody tr.inew,
.category tbody tr.isnew,
.category tbody tr.unread,
.forum tbody tr.inew,
.forum tbody tr.isnew,
.forum tbody tr.unread {
  border-left: 5px solid var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.1);
  box-shadow: inset calc(0.5 * var(--base-spacing)) 0 calc(1 * var(--base-spacing)) calc(-0.5 * var(--base-spacing)) rgba(var(--color-accent-rgb), 0.5);
}

/* ---- LINE 1: icon + title + description + tags — full width, forces the wrap ---- */
.category td.tcl {
  display: flex;
  align-items: flex-start;
  gap: calc(1.25 * var(--base-spacing));
  flex: 0 1 auto;
  width: 100%;
  padding: 0;
}

.forum td.tcl {
  display: flex;
  align-items: center;
  gap: calc(1.25 * var(--base-spacing));
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
}

.category .intd,
.forum .intd {
  display: flex;
  align-items: flex-start;
  gap: calc(1.25 * var(--base-spacing));
  width: 100%;
}

/* no dedicated new/read icon — the row's left border (see tr.inew above) is the only indicator */
.category .icon,
.forum .icon {
  display: none;
}

.category .tclcon,
.forum .tclcon {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.96429rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  text-align: justify;
}

.category .tclcon h3 {
  margin: 0 0 calc(0.375 * var(--base-spacing));
  font-size: 1.14286rem;
  min-width: 0;
}

/* ellipsis has to live on the link, not the h3 — the h3 is a flex item now
   (see .forum-meta-row h3), and flex containers don't truncate their own text */
.category .tclcon h3 a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-heading);
  color: var(--color-heading);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.category .tclcon h3 a:hover {
  color: var(--color-heading-hover);
}

/* description links rendered as compact pill tags — the last-post avatar link
   also lives inside .tclcon (forum-meta-row is nested there), so it's excluded
   here rather than picking up pill margin/border/background too */
.category .forum-links {
  margin-top: calc(2 * var(--base-spacing));
}

.category .forum-links a {
  display: inline-block;
  font-style: normal;
  text-transform: uppercase;
  font-size: 0.71429rem;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  text-decoration: none;
  background: rgba(var(--color-border-rgb), 0.12);
  border: 1px solid rgba(var(--color-border-rgb), 0.3);
  border-radius: 10px;
  padding: calc(0.25 * var(--base-spacing)) calc(1.125 * var(--base-spacing));
  margin: calc(0.75 * var(--base-spacing)) calc(0.5 * var(--base-spacing)) 0 0;
}

.category .forum-links a:hover {
  background: rgba(var(--color-accent-rgb), 0.25);
  color: var(--color-heading);
}

/* ---- LINE 2: counts + last-post — footer JS wraps tc2/tc3/tcr together with
   h3 into .forum-meta-row, so they flex-position off the title itself instead
   of relying on fixed pixel offsets ---- */
.category .forum-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(0.5 * var(--base-spacing)) calc(1.75 * var(--base-spacing));
  margin: calc(0.375 * var(--base-spacing)) 0 calc(0.75 * var(--base-spacing));
}

/* title now lives inside the same flex row as the counts (JS moved h3 in here) —
   let it fill whatever width tc2/tc3/tcr don't take, truncating instead of wrapping */
.category .forum-meta-row h3 {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  margin: 0 0 calc(0.375 * var(--base-spacing));
}

.category .forum-meta-row td.tc2,
.category .forum-meta-row td.tc3 {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--base-spacing));
  width: auto;
  padding-right: calc(1.75 * var(--base-spacing));
  border-right: 1px solid rgba(var(--color-border-rgb), 0.3);
  font-size: 0.82143rem;
  color: var(--color-text);
  white-space: nowrap;
}

.category .forum-meta-row td.tc2::after {
  content: " òåì";
  color: var(--color-link);
  font-size: 0.75rem;
}

.category .forum-meta-row td.tc3::after {
  content: " ñîîáù.";
  color: var(--color-link);
  font-size: 0.75rem;
}

/* avatar | link+timestamp layout — br between lastpost-link and .lastpost is
   forum-generated markup we can't touch, so it's hidden and grid auto-placement
   (row-major, sparse) drops the link into col2/row1 and .lastpost into col2/row2
   on its own once the avatar claims col1 across both rows */
.category .forum-meta-row td.tcr,
.forum td.tcr {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(1 * var(--base-spacing));
  font-size: 0.82143rem;
  color: var(--color-text-muted);
  text-align: left;
}

.category .forum-meta-row td.tcr {
  width: 220px;
  min-width: 220px;
}

.category .forum-meta-row td.tcr br,
.forum td.tcr br {
  display: none;
}

.category .forum-meta-row td.tcr .user-avatar,
.forum td.tcr .user-avatar {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: stretch;
}

/* .forum (topic listing) — plain in-flow flex columns, no position:absolute
   trick: the single-line title + byuser here doesn't need the two-line
   force-wrap that .category's description/tags block requires */
.forum td.tc2,
.forum td.tc3 {
  flex: 0 0 auto;
  width: 72px;
  padding: 0 calc(1 * var(--base-spacing));
  border-right: 1px solid rgba(var(--color-border-rgb), 0.3);
  text-align: center;
  font-size: 0.82143rem;
  color: var(--color-text);
  white-space: nowrap;
}

.forum td.tcr {
  flex: 0 0 auto;
  width: 220px;
}

.category .user-avatar,
.forum .user-avatar {
  position: relative;
  flex: 0 0 auto;
}

.punbb .user-avatar {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  float: none !important;
}

.punbb .user-avatar .isonline {
  top: -1px !important;
  right: -1px !important;
}

/* extra.css (uncontrolled, loaded on the live forum) targets this exact
   selector — .punbb .user-avatar .avatar-image — at 3-class specificity, so
   !important is needed throughout to keep our plain square instead of its
   36px/opacity/float version */
.category .avatar-image,
.forum .avatar-image,
.usertable .avatar-image {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  float: none !important;
}

/* last-post avatar sized to match the two stacked text rows beside it —
   height:100%/aspect-ratio on an auto-sized grid track is circular (column
   width depends on avatar width, which depends on a row height not known
   until column widths are settled) and collapses the avatar to 0&#215;0, so this
   uses a fixed square instead */
.category .forum-meta-row td.tcr .avatar-image,
.forum td.tcr .avatar-image {
  width: 35px !important;
  height: 35px !important;
}

.category .isonline,
.forum .isonline,
.usertable .isonline {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-status-online);
  border: 1px solid var(--color-panel-bg);
}

.category .lastpost-link {
  color: var(--color-heading);
  text-decoration: none;
  font-style: italic;
  margin: 0 !important;
}

.category .lastpost {
  display: block;
  font-size: 0.71429rem;
  color: var(--color-link);
  margin-top: calc(0.125 * var(--base-spacing));
}

/* ============ TOPIC LISTING (.forum markup-specific) ============ */
.forum h2 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(1.25 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  margin: 0;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

.forum h2 .item1 {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  color: var(--color-text-on-dark);
  text-transform: uppercase;
}

.forum h2 .item2 {
  font-family: var(--font-body);
  font-size: 0.78571rem;
  letter-spacing: 0.3px;
  color: var(--color-text-on-dark-subtle);
}

.forum .tclcon a {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  color: var(--color-heading);
  text-decoration: none;
  letter-spacing: 0.5px;
}

.forum .tclcon a:hover {
  color: var(--color-heading-hover);
}

.forum .tclcon .byuser {
  font-size: 0.78571rem;
  font-style: italic;
  color: var(--color-link);
}

.forum td.tcr a {
  color: var(--color-heading);
  text-decoration: none;
  font-style: italic;
}

.forum td.tcr .byuser {
  display: block;
  margin-top: calc(0.125 * var(--base-spacing));
  font-size: 0.71429rem;
  color: var(--color-link);
}

/* ============ PAGE TOOLBAR (pagelink / postlink / modmenu) ============ */
/* shared by the topic listing (.linkst/.linksb around .forum) and the topic
   view (.linkst/.linksb around #topic_t1) — same markup on both pages */
.punbb .linkst {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(1 * var(--base-spacing)) calc(2 * var(--base-spacing));
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  font-size: 0.85714rem;
  color: var(--color-text-muted);
}

.punbb .linksb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(1 * var(--base-spacing)) calc(2 * var(--base-spacing));
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  font-size: 0.85714rem;
  color: var(--color-text-muted);
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

.punbb .pagelink strong {
  color: var(--color-heading);
}

/* .linksb markup order differs from .linkst (postlink, pagelink, subscribelink) —
   reorder visually to match .linkst's pagelink-then-postlink order */
.punbb .linksb .pagelink {
  order: 1;
  flex-grow: 1;
}

.punbb .linksb .postlink {
  order: 2;
}

.punbb .linksb .subscribelink {
  order: 3;
}

.punbb .postlink {
  display: flex;
  gap: calc(1 * var(--base-spacing));
}

.punbb .postlink a,
.punbb .subscribelink a {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  text-decoration: none;
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border: 1px solid var(--color-accent);
  border-radius: calc(0.5 * var(--base-spacing));
  padding: calc(0.5 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
}

.punbb .postlink a:hover,
.punbb .subscribelink a:hover {
  border-color: var(--color-accent-hover);
  color: var(--color-accent-bright);
}

.punbb .modmenu {
  padding: calc(1.25 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  font-size: 0.78571rem;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(0.5 * var(--base-spacing)) calc(2 * var(--base-spacing));
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

.punbb .modmenu a {
  color: var(--color-link);
}

.punbb .modmenu a:hover {
  color: var(--color-heading);
}

.punbb .modmenu select {
  color: var(--color-link);
  font-family: var(--font-body);
  font-size: 0.78571rem;
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.375 * var(--base-spacing));
  padding: calc(0.25 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
}

/* top fade removed — .status-line at the end of the header now handles
   the dark-to-cream transition directly, no overlay needed */
#html-header+#pun-break1 {
  padding: 0 !important;
}

/* dark tone continues from the header's greeting bar, through the divider and
   breadcrumb, down to the category header — cream only starts below it */
.punbb #pun-break1,
.punbb #pun-break2 {
  background: var(--color-banner-bg) !important;
}

.punbb #pun-break1 hr,
.punbb #pun-break2 hr {
  border: none;
  border-top: 1px solid rgba(var(--color-accent-light-rgb), 0.3);
  margin: 0 calc(2.5 * var(--base-spacing));
}

/* ============ NATIVE FORUM MENU (#pun-navlinks) ============ */
/* Single-row bar. Public links (Ôîðóì/Ó÷àñòíèêè/Íàãðàäû/Ïîèñê) plus Ñîîáùåíèÿ
   stay inline on the bar; the rest of the account-specific stuff — status
   greeting, #pun-ulinks quick links, profile/admin/logout — is relocated by
   the footer script into a dropdown anchored to the user's avatar
   (.user-menu), built in forms/footer.html because #pun-navlinks doesn't
   exist yet when forms/header.html runs. #pun-status/#pun-ulinks are left
   empty afterwards, so they're just hidden outright rather than styled as rows.
   `order` reshuffles paint order above html-header — DOM order stays unchanged. */
#pun-status,
#pun-ulinks,
#pun-title,
.divider {
  display: none !important;
}

.punbb #pun-navlinks {
  order: -1;
  display: flex;
  align-items: center;
  background: var(--color-banner-bg) !important;
  border: none !important;
  border-top: 1px solid var(--color-accent) !important;
  border-bottom: 1px solid var(--color-accent) !important;
  margin: 0 !important;
  padding: calc(1.25 * var(--base-spacing)) calc(3 * var(--base-spacing));
  /* also serves as the containing block for .user-menu-panel's absolute
     positioning (.user-menu itself no longer has position:relative) — that
     way the panel's `right: 0` aligns with this bar's own right edge, which
     is the forum body's right edge, rather than the narrower trigger button */
  position: relative;
  /* .section's backdrop-filter (below) makes this its own stacking context,
     which traps .user-menu-panel's z-index inside it — needs a z-index of
     its own, above .highlights' 3, so the dropdown isn't painted under the hero */
  z-index: 10;
}

#pun-navlinks h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  margin: 0;
}

/* nowrap, no scrollbar — the bar only ever carries a handful of short public
   links (account links live in the avatar menu instead), so it has room to
   breathe at any zoom level without needing to wrap or scroll */
#pun-navlinks ul.container {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: 0;
  gap: calc(1.75 * var(--base-spacing));
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#pun-navlinks li {
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
  flex: 0 0 auto;
  white-space: nowrap;
}

#pun-navlinks a {
  display: inline-block;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.92857rem;
  letter-spacing: 1px;
  font-weight: 600;
  transition: color 0.2s;
}

#pun-navlinks a:hover {
  color: var(--color-accent-hover);
}

#pun-navlinks li.isactive a {
  color: var(--color-accent-bright);
}

/* unread-count badge — bare font-fallback digits read better than the
   uppercase heading face used for the link text around it. Base look is
   shared everywhere a bubble appears (main bar, icon-only link, dropdown
   panel); each context below only overrides its own placement. */
.bubble {
  display: inline-block;
  min-width: 14px;
  padding: 0 calc(0.375 * var(--base-spacing));
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-banner-bg);
  font-family: var(--font-fallback);
  font-size: 0.64286rem;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  vertical-align: middle;
}

#pun-navlinks ul.container .bubble {
  margin-left: calc(0.5 * var(--base-spacing));
}

/* icons carry the row on their own scannable weight and double as the visual
   language reused for the same links once they're relocated into .user-menu-panel */
#pun-navlinks a::before {
  display: inline-block;
  margin-right: calc(0.5 * var(--base-spacing));
  font: normal 900 12px "Font Awesome 6 Free";
  color: var(--color-accent);
  vertical-align: -1px;
  transition: color 0.2s;
}

#pun-navlinks a:hover::before {
  color: var(--color-accent-hover);
}

#pun-navlinks li.isactive a::before {
  color: var(--color-accent-bright);
}

#navindex a::before {
  content: "\f70e";
  /* fa-scroll */
}

#navuserlist a::before {
  content: "\f0c0";
  /* fa-users */
}

#navawards a::before {
  content: "\f521";
  /* fa-crown */
}

#navsearch a::before {
  content: "\f002";
  /* fa-magnifying-glass */
}

#navprofile a::before {
  content: "\f007";
  /* fa-user */
}

#navpm a::before {
  content: "\f0e0";
  /* fa-envelope */
}

#navadmin a::before {
  content: "\f505";
  /* fa-user-shield */
}

#navlogout a::before {
  content: "\f2f5";
  /* fa-right-from-bracket */
}

#navlogin a::before {
  content: "\f2f6";
  /* fa-right-to-bracket */
}

#navregister a::before {
  content: "\f234";
  /* fa-user-plus */
}

/* ---- fixed items pinned after the public links: a messages icon for a
   signed-in user, or a sign-up button for a guest, then the avatar menu ---- */
.nav-icon-link,
.nav-cta {
  flex: 0 0 auto;
  margin-left: calc(1.5 * var(--base-spacing));
}

.user-menu {
  /* no position:relative of its own — .user-menu-panel's containing block is
     #pun-navlinks instead (already position:relative, see above), so the
     panel's `right: 0` lands flush with the nav bar's own right edge (i.e.
     the forum body's right edge) rather than trailing the trigger button's
     narrower box */
  flex: 0 0 auto;
  margin-left: calc(1.5 * var(--base-spacing));
}

/* always icon-only, regardless of viewport — the label stays for assistive
   tech via the same visually-hidden clip used elsewhere, never shown visually */
#pun-navlinks .nav-icon-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: calc(4 * var(--base-spacing));
  height: calc(4 * var(--base-spacing));
  border-radius: 4px;
}

#pun-navlinks .nav-icon-link a:hover {
  background: rgba(var(--color-accent-rgb), 0.12);
}

#pun-navlinks .nav-icon-link a::before {
  margin-right: 0;
  font-size: 1rem;
}

#pun-navlinks .nav-icon-link a span:not(.bubble) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#pun-navlinks .nav-icon-link .bubble {
  position: absolute;
  top: 0;
  right: 0;
  margin-left: 0;
}

/* guest sign-up CTA — the one filled, high-contrast element in the bar */
#pun-navlinks .nav-cta a {
  display: inline-flex;
  align-items: center;
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 0.85714rem;
  font-weight: 600;
  padding: calc(0.5 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  border-radius: 3px;
  background: var(--color-accent);
  color: var(--color-banner-bg);
}

#pun-navlinks .nav-cta a:hover {
  background: var(--color-accent-hover);
}

#pun-navlinks .nav-cta a::before,
#pun-navlinks .nav-cta a:hover::before {
  color: var(--color-banner-bg);
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: calc(0.75 * var(--base-spacing));
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: calc(0.25 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
  cursor: pointer;
  font: inherit;
}

/* greeting stays visible on the bar itself rather than tucked away in the
   dropdown — only last-visit + the upgrade CTA are dropdown-only */
.user-menu-trigger .item1 {
  font-family: var(--font-heading);
  font-size: 0.85714rem;
  letter-spacing: 0.5px;
  color: var(--color-text-on-dark);
  white-space: nowrap;
}

.user-menu-trigger .item1 strong {
  color: var(--color-accent-bright);
  font-weight: 600;
}

.user-menu-trigger:hover,
.user-menu-trigger:focus-visible {
  border-color: rgba(var(--color-accent-rgb), 0.5);
  outline: none;
}

.user-menu-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-accent-light);
  transition: transform 0.2s;
}

.user-menu.open .user-menu-trigger::after {
  transform: rotate(180deg);
}

.status-avatar {
  flex: 0 0 auto;
  width: calc(4 * var(--base-spacing));
  height: calc(4 * var(--base-spacing));
  border-radius: 4px;
  border: 1px solid var(--color-accent);
  background-color: var(--color-surface-raised);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* guest trigger has no photo — a centered glyph stands in for one */
.status-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-avatar--placeholder::before {
  font: normal 900 14px "Font Awesome 6 Free";
  color: var(--color-accent);
  content: "\f007";
  /* fa-user */
}

.user-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  max-width: calc(100vw - 3 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-dark) 100%);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 10px 24px rgba(var(--color-shadow-rgb), 0.5);
  padding: calc(1.5 * var(--base-spacing)) 0;
  z-index: 30;
}

.user-menu.open .user-menu-panel {
  display: block;
}

.user-menu-header {
  padding: 0 calc(1.5 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  margin-bottom: calc(1.25 * var(--base-spacing));
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

.user-menu-header .item2 {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-on-dark-subtle);
}

/* guest-only: item2 is a plain sentence with inline links ("Âîéäèòå èëè
   çàðåãèñòðèðóéòåñü"), not a menu row — keep it flowing as text rather than
   picking up the block/row treatment #pun-navlinks .user-menu-group a uses */
#pun-navlinks .user-menu-header .item2 a {
  text-transform: none;
  color: var(--color-accent-light);
}

#pun-navlinks .user-menu-header .item2 a:hover {
  color: var(--color-accent-bright);
}

/* «Óëó÷øèòü àêêàóíò» — its own group at the bottom of the menu now (moved
   there in forms/footer.html), not the header — so it needs the header's old
   horizontal inset back, since .user-menu-group itself has none (rows get
   theirs from their own link padding instead, which this button doesn't use) */
.user-menu-group.user-menu-group--upgrade {
  padding-left: calc(1.5 * var(--base-spacing));
  padding-right: calc(1.5 * var(--base-spacing));
}

.user-menu-group--upgrade .item4 {
  display: block;
}

/* #pun-navlinks needed to out-specificity #pun-navlinks .user-menu-group a's
   generic full-width row styling — this is a pill button, not a row */
#pun-navlinks .user-menu-group--upgrade .item4 a {
  display: inline-block;
  padding: calc(0.375 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  color: var(--color-accent-light);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.71429rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
  width: 100%;
}

#pun-navlinks .user-menu-group--upgrade .item4 a:hover {
  color: var(--color-banner-bg);
  background: var(--color-accent);
}

.user-menu-group {
  display: flex;
  flex-direction: column;
  padding: calc(0.5 * var(--base-spacing)) 0;
}

.user-menu-group+.user-menu-group {
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

/* overrides the ribbon-style nav link look for its dropdown-row context —
   needs the #pun-navlinks ancestor to out-specificity the base `#pun-navlinks a` rule.
   Scoped to .user-menu-group (not the whole panel) so .user-menu-header's item2
   sentence links keep flowing as inline text instead of becoming menu rows.
   .profiles-flyout gets the same row treatment — it's a second pane of this
   same menu, not a different component (see below). */
#pun-navlinks .user-menu-group li,
#pun-navlinks .profiles-flyout li {
  flex: none;
  white-space: normal;
}

#pun-navlinks .user-menu-group a,
#pun-navlinks .profiles-flyout a {
  display: flex;
  align-items: center;
  text-transform: none;
  font-size: 0.89286rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-cream);
  padding: calc(0.5 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
}

#pun-navlinks .user-menu-group a:hover,
#pun-navlinks .profiles-flyout a:hover {
  background: rgba(var(--color-accent-rgb), 0.12);
  color: var(--color-accent-bright);
}

#pun-navlinks .user-menu-group a::before,
#pun-navlinks .profiles-flyout a::before {
  width: 14px;
  margin-right: calc(1 * var(--base-spacing));
  font-size: 0.78571rem;
  text-align: center;
}

.user-menu-group--logout a {
  color: var(--color-heading-hover);
}

/* ---- profiles panel: account switching + autopost cycle, from
   scripts/accounts.js. Always shown as a second pane attached to the left
   edge of the main dropdown (opens/closes together with it — no toggle of
   its own), so the main dropdown itself never grows with the account count;
   the account list also scrolls internally rather than growing the pane
   further. Below 640px there's no room for two panes side by side, so this
   one drops under the main panel instead (see the media query below). ---- */
.profiles-flyout {
  position: absolute;
  top: -2px;
  /* stretches to match .user-menu-panel's own (auto) height exactly — an
     absolutely positioned box with top+bottom both set resolves its height
     against the containing block's resolved height instead of its content,
     so the pane can never grow taller than the main menu next to it */
  bottom: -1px;
  right: 100%;
  display: flex;
  flex-direction: column;
  width: 220px;
  max-width: calc(100vw - 3 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-dark) 100%);
  border: 1px solid var(--color-border);
  /* a visible seam, not a gap — reads as a second pane of the same menu
     rather than a floating popup of its own */
  border-right: 1px solid rgba(var(--color-accent-rgb), 0.3);
  border-top: 2px solid var(--color-accent);
  padding-bottom: var(--base-spacing);
}

.profiles-flyout-header {
  flex: 0 0 auto;
  padding: calc(1.5 * var(--base-spacing)) calc(1.5 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  margin-bottom: calc(0.5 * var(--base-spacing));
  border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.3);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  color: var(--color-accent-light);
}

/* the one part of the pane allowed to scroll — everything else above/below
   it (header, walk-all trigger, autorun toggle) stays put. min-height:0
   overrides the flex default of min-height:auto, which would otherwise
   refuse to shrink this below its content and defeat the scroll entirely */
.profiles-account-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* #pun-navlinks needed here (not just .profiles-walk-row) — otherwise the
   base #pun-navlinks li reset (padding/margin: 0, same specificity weight
   via its #id) wins and silently drops this row's spacing */
#pun-navlinks .profiles-walk-row {
  flex: 0 0 auto;
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.2);
  margin-top: calc(0.5 * var(--base-spacing));
  padding-top: calc(0.5 * var(--base-spacing));
}

/* narrow screen: the menu goes full-width and the two panes become an even
   50/50 split of ONE box (instead of two boxes seamed together at a fixed
   220px) — .profiles-flyout stays absolutely positioned (still the mechanism
   capping it to .user-menu-main's height, see the comment on .profiles-flyout
   above), just re-anchored to the left half instead of parked outside the
   panel's left edge; .user-menu-main is pushed into the right half with a
   plain margin, still in normal flow so it's what actually sizes the panel */
@media (max-width: 640px) {
  .user-menu-panel {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  .user-menu-main {
    margin-left: 50%;
  }

  .profiles-flyout {
    left: 0;
    right: auto;
    width: 50%;
    max-width: none;
    background: none;
    border: none;
    border-right: 1px solid rgba(var(--color-accent-rgb), 0.3);
    padding-bottom: 0;
  }
}

/* ---- account rows + inline add form, inside .profiles-account-list ---- */
.account-row {
  display: flex;
  align-items: center;
}

.account-row-link {
  flex: 1 1 auto;
  min-width: 0;
}

.account-row-link::before {
  content: "\f007";
  /* fa-user */
}

.account-row--current .account-row-link {
  color: var(--color-accent-bright);
}

.account-row--current .account-row-link::after {
  content: "\f00c";
  /* fa-check */
  font: normal 900 10px "Font Awesome 6 Free";
  margin-left: auto;
  color: var(--color-accent-bright);
}

.account-username {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-remove {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: calc(0.25 * var(--base-spacing)) calc(0.75 * var(--base-spacing));
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}

.account-row:hover .account-remove,
.account-row:focus-within .account-remove {
  opacity: 1;
}

@media (hover: none) {
  .account-remove {
    opacity: 1;
  }
}

.account-remove::before {
  content: "\f00d";
  /* fa-xmark */
  font: normal 900 11px "Font Awesome 6 Free";
  color: var(--color-text-on-dark-subtle);
}

.account-remove:hover::before {
  color: var(--color-accent-bright);
}

/* #pun-navlinks needed here — see the note on .profiles-walk-row above.
   flex: 0 0 auto — this sits directly in .profiles-flyout's flex column now
   (pinned outside the scrollable list so it's always reachable), and would
   otherwise shrink along with the flexible .profiles-account-list above it. */
#pun-navlinks .account-add-form {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: calc(0.5 * var(--base-spacing)) calc(1.5 * var(--base-spacing)) 0;
  margin-top: calc(0.25 * var(--base-spacing));
  border-top: 1px solid rgba(var(--color-accent-rgb), 0.2);
}

.account-add-title {
  display: block;
  margin-bottom: calc(0.5 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.71429rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-on-dark-subtle);
}

.account-add-form form {
  display: flex;
  flex-direction: column;
  gap: calc(0.5 * var(--base-spacing));
}

.account-add-input {
  width: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: calc(0.5 * var(--base-spacing)) calc(0.75 * var(--base-spacing));
  font-family: var(--font-body);
  font-size: 0.85714rem;
  color: var(--color-text-cream);
}

.account-add-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.account-add-confirm {
  font-family: var(--font-heading);
  font-size: 0.71429rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: calc(0.5 * var(--base-spacing)) 0;
  border-radius: 3px;
  cursor: pointer;
  background: var(--color-accent);
  color: var(--color-banner-bg);
  border: 1px solid var(--color-accent);
}

.account-add-confirm:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* ---- walk-all trigger + autorun toggle, inside .profiles-flyout ---- */
.walk-all-link::before {
  content: "\f4d7";
  /* fa-route */
}

/* #pun-navlinks needed here — see the note on .profiles-walk-row above */
#pun-navlinks .walk-autorun-row {
  flex: 0 0 auto;
  padding: calc(0.5 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
}

.walk-autorun-row label {
  display: flex;
  align-items: center;
  gap: calc(0.75 * var(--base-spacing));
  font-size: 0.78571rem;
  color: var(--color-text-on-dark-subtle);
  cursor: pointer;
}

.walk-autorun-row input[type="checkbox"] {
  accent-color: var(--color-accent);
}

/* ---- progress toast for the account-cycle run, from scripts/accounts.js ---- */
.accounts-toast {
  position: fixed;
  right: calc(2 * var(--base-spacing));
  top: calc(2 * var(--base-spacing));
  z-index: 10000;
  min-width: 220px;
  max-width: 280px;
  background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-dark) 100%);
  border: 1px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 10px 24px rgba(var(--color-shadow-rgb), 0.5);
  padding: calc(1.5 * var(--base-spacing));
  font-family: var(--font-body);
  font-size: 0.78571rem;
  color: var(--color-text-on-dark-subtle);
}

.accounts-toast-title {
  font-family: var(--font-heading);
  color: var(--color-accent-light);
  font-size: 0.85714rem;
  letter-spacing: 0.5px;
  margin-bottom: calc(0.75 * var(--base-spacing));
}

.accounts-toast-status {
  margin-bottom: calc(0.5 * var(--base-spacing));
}

.accounts-toast-note {
  margin-bottom: calc(1 * var(--base-spacing));
  font-size: 0.71429rem;
  opacity: 0.6;
  font-style: italic;
}

.accounts-toast-note:empty {
  display: none;
}

.accounts-toast-bar {
  height: 4px;
  background: rgba(var(--color-highlight-rgb), 0.08);
  overflow: hidden;
}

.accounts-toast-fill {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.accounts-toast--success .accounts-toast-fill {
  background: var(--color-status-online);
}

.accounts-toast--success .accounts-toast-title {
  color: var(--color-status-online);
}

.user-menu-panel .bubble {
  margin-left: auto;
}

/* the bar's content fits desktop width with zero spare room, so any
   narrowing at all — a real narrow viewport or the effective shrink from
   browser zoom — needs to drop straight to icon-only rather than leaving a
   dead zone where text nav still shows but no longer fits */
@media (max-width: 1040px) {

  /* scoped to ul.container's own links only — .nav-cta and .nav-icon-link
     sit outside it and manage their own label visibility unconditionally */
  #pun-navlinks ul.container a span:not(.bubble),
  .user-menu-trigger .item1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #pun-navlinks ul.container a::before {
    margin-right: 0;
  }

  #pun-navlinks ul.container {
    gap: calc(1.25 * var(--base-spacing));
  }
}

/* ============ TOPIC / POSTS ============ */
#topic_t1.topic {
  padding: 0 0 calc(3 * var(--base-spacing));
}

#topic_t1.topic>h2 {
  display: none;
}

.topic .post {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* ---- post meta bar: number, permalink date, share ---- */
.topic .post h3 {
  margin: 0;
  padding: calc(0.75 * var(--base-spacing)) calc(3 * var(--base-spacing));
  background: rgba(var(--color-border-rgb), 0.12);
  border-bottom: 1px dashed rgba(var(--color-border-rgb), 0.3);
  box-sizing: border-box;
  padding-left: calc(212px + (3 * var(--base-spacing)));
}

.topic .post h3 span {
  display: flex;
  align-items: center;
  gap: calc(1.5 * var(--base-spacing));
}

.topic .post h3 strong {
  order: 3;
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
}

.topic .post h3 a.permalink {
  order: 1;
  flex: 1;
  font-size: 0.82143rem;
  color: var(--color-heading);
  text-decoration: none;
}

.topic .post h3 a.permalink:hover {
  color: var(--color-heading-hover);
}

.topic .post h3 a.sharelink {
  order: 2;
  font-size: 0.78571rem;
  color: var(--color-link);
  text-decoration: none;
}

.topic .post h3 a.sharelink:hover {
  color: var(--color-heading-hover);
}

/* ---- profile (left) + post body (right), clearly split surfaces ---- */
.topic .post .container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--color-panel-bg-alt);
}

.post-author {
  position: relative;
  align-self: flex-start;
  flex: 0 0 calc(180px + 4 * var(--base-spacing));
  width: calc(180px + 4 * var(--base-spacing));
  padding: calc(2.5 * var(--base-spacing)) calc(2 * var(--base-spacing));
  /* --pa-user-bg lets a per-user custom field (color or image) override the sidebar backdrop */
  /* neutral tone blended from a bright highlight + the gold accent, so card text/borders
     stay legible and on-theme over any per-user card background */
  --pa-neutral: color-mix(in srgb, rgb(var(--color-highlight-rgb)) 70%, var(--color-accent) 30%);
  background-color: rgba(var(--color-border-rgb), 0.18);
  background-image: url(https://forumstatic.ru/files/001c/c7/56/49004.jpg);
  background-size: auto;
  border: 2px solid var(--color-accent);
  border-top: 0;
  border-left: 0;
  text-align: center;
  overflow: hidden;
  top: -27.5px;
}

/* dark scrim over any custom background so text stays readable regardless of the chosen color/image */
.post-author::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(var(--color-bg-rgb), 0.6);
  backdrop-filter: blur(2px);
  margin: var(--base-spacing);
  border: 1px solid rgba(var(--color-accent-rgb), 0.2);
  border-radius: calc(.5 * var(--base-spacing));
}

.post-author ul {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* real avatar, when present */
.post-author .pa-avatar img {
  position: relative;
  z-index: 2;
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  margin: 0 auto calc(1 * var(--base-spacing));
  border: 2px solid var(--pa-neutral);
  border-radius: calc(0.5 * var(--base-spacing));
}

/* placeholder avatar block when the author has none set */
.post-author.no-avatar::before {
  content: "";
  position: relative;
  z-index: 2;
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto calc(1 * var(--base-spacing));
  background: linear-gradient(145deg, var(--color-text-muted), var(--color-text));
  border: 2px solid var(--pa-neutral);
  border-radius: calc(0.5 * var(--base-spacing));
}

.post-author li {
  padding: calc(0.25 * var(--base-spacing)) 0;
  font-size: 0.82143rem;
  line-height: 1.4;
  color: var(--pa-neutral);
}

.post-author .pa-posts,
.post-author .pa-respect,
.post-author .pa-fld2,
.post-author .pa-fld1,
.post-author .pa-fld3 {
  box-sizing: border-box;
  margin-bottom: calc(1 * var(--base-spacing));
  padding: calc(1 * var(--base-spacing)) calc(0.5 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
  background: rgba(var(--color-bg-rgb), 0.15);
  border: 1px solid color-mix(in srgb, var(--pa-neutral) 35%, transparent);
  border-radius: calc(0.5 * var(--base-spacing));
}

.post-author .pa-posts,
.post-author .pa-respect,
.post-author .pa-fld2,
.post-author .pa-fld1 {
  float: left;
  width: calc(25% - 0.75 * var(--base-spacing));
}

.post-author .pa-fld3 {
  clear: both;
  width: 100%;
}

.post-author .pa-posts .fld-name,
.post-author .pa-respect .fld-name,
.post-author .pa-fld2 .fld-name,
.post-author .pa-fld1 .fld-name {
  display: block;
  font-size: 0;
}

.post-author .pa-posts .fld-name::before,
.post-author .pa-respect .fld-name a::before,
.post-author .pa-fld2 .fld-name::before,
.post-author .pa-fld1 .fld-name::before {
  font: normal 900 10px "Font Awesome 6 Free";
  color: color-mix(in srgb, var(--pa-neutral) 85%, transparent);
}

.post-author .pa-posts .fld-name::before {
  content: "\f075";
  /* fa-comment */
}

.post-author .pa-respect .fld-name a {
  display: inline-block;
  font-size: 0;
}

.post-author .pa-respect .fld-name a::before {
  content: "\f005";
  /* fa-star */
}

.post-author .pa-fld2 .fld-name::before {
  content: "\f5ad";
  /* fa-pen-nib */
}

.post-author .pa-fld1 .fld-name::before {
  content: "\f51e";
  /* fa-coins */
}

.post-author .pa-posts {
  clear: left;
}

.post-author .pa-posts,
.post-author .pa-respect,
.post-author .pa-fld2 {
  margin-right: calc(1 * var(--base-spacing));
}

.post-author .pa-positive {
  clear: both;
}

.post-author .fld-name {
  color: var(--pa-neutral);
  font-weight: 500;
}

.post-author .pa-author {
  border-top: none;
  padding-top: 0;
}

.post-author .pa-author a {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: color-mix(in srgb, var(--pa-neutral) 100%, white 20%);
  text-decoration: none;
}

.post-author .pa-author a:hover {
  color: color-mix(in srgb, var(--pa-neutral) 80%, transparent);
}

.post-author .flag-i {
  display: inline-block;
  width: 16px;
  height: 11px;
  vertical-align: middle;
  background-size: cover;
}

.post-author .pa-title {
  display: block;
  width: 95%;
  margin: calc(0.5 * var(--base-spacing)) auto calc(1.5 * var(--base-spacing));
  padding-top: calc(0.5 * var(--base-spacing));
  border-top: 1px solid color-mix(in srgb, var(--pa-neutral) 40%, transparent);
  font-family: var(--font-heading);
  font-size: 0.71429rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pa-neutral);
}

.post-author .pa-ip a,
.post-author .pa-invites a,
.post-author .pa-respect a,
.post-author .pa-positive a {
  color: var(--pa-neutral);
  text-decoration: none;
}

.post-author .pa-ip a:hover,
.post-author .pa-invites a:hover,
.post-author .pa-respect a:hover,
.post-author .pa-positive a:hover {
  color: color-mix(in srgb, var(--pa-neutral) 100%, white 20%);
}

.post-author .pa-online {
  clear: both;
}

.post-author .pa-online strong {
  color: color-mix(in srgb, var(--pa-neutral) 100%, white 20%);
  font-weight: 600;
}

.post-author .pa-ua,
.post-author .pa-gifts,
.post-author .pa-awards,
#viewprofile-next #pa-ua {
  display: none;
}

/* ---- post body (right) ---- */
.post-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.post-box {
  flex: 1 1 auto;
}

.post-content {
  padding: calc(2.5 * var(--base-spacing)) calc(3 * var(--base-spacing));
  font-size: 1.14286rem;
  line-height: 1.7;
  letter-spacing: 0.1px;
  color: var(--color-text);
  font-variant-ligatures: common-ligatures;
}

.post-content p {
  margin: 0 0 calc(1.5 * var(--base-spacing));
}

.post-content p:last-child {
  margin-bottom: 0;
}

/* ---- quote / code / spoiler blocks inside post content ---- */
.post-content .quote-box,
.post-content .code-box {
  position: relative;
  margin: calc(1.5 * var(--base-spacing)) 0;
  padding: calc(1.25 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  background: rgba(var(--color-border-rgb), 0.18);
  border-left: 3px solid var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(var(--color-highlight-rgb), 0.3);
}

.post-content .code-box .legend {
  display: block;
  margin-bottom: calc(0.75 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
}

.post-content .code-box .scrollbox {
  overflow-y: auto;
}

.post-content .code-box pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85714rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.post-content .quote-box blockquote {
  margin: 0;
  font-style: italic;
  color: var(--color-text-muted);
}

/* .quote-main is also used bare, as a decorative wrapper around any block — not only attributed speech */
.post-content .quote-main {
  padding-top: calc(1.75 * var(--base-spacing));
  padding-left: calc(3.5 * var(--base-spacing));
}

.post-content .quote-main::before {
  content: "\201C";
  position: absolute;
  top: calc(-0.25 * var(--base-spacing));
  left: calc(1 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 2.28571rem;
  line-height: 1;
  color: var(--color-accent-light);
  opacity: 0.6;
}

/* spoiler trigger's inline onclick toggles .visible on itself and on the sibling blockquote */
.post-content .spoiler-box>div:first-child {
  position: relative;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
  padding-right: calc(2.5 * var(--base-spacing));
}

.post-content .spoiler-box>div:first-child::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(2.25 * var(--base-spacing));
  height: calc(2.25 * var(--base-spacing));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64286rem;
  color: var(--color-banner-bg);
  background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent));
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb), 0.3);
  transition: transform 0.2s;
}

.post-content .spoiler-box>div:first-child.visible::after {
  content: "\f068";
  transform: translateY(-50%) rotate(180deg);
}

.post-content .spoiler-box blockquote {
  display: none;
  margin-top: calc(1 * var(--base-spacing));
  padding-top: calc(1 * var(--base-spacing));
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

.post-content .spoiler-box blockquote.visible {
  display: block;
}

.post-rating {
  padding: calc(1 * var(--base-spacing)) calc(3 * var(--base-spacing));
  text-align: right;
  font-size: 0.78571rem;
  color: var(--color-text-muted);
}

.post-rating a {
  color: var(--color-link);
  text-decoration: none;
}

.post-box .clearer {
  display: none;
}

.post-links {
  flex: 0 0 100%;
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
  padding: calc(1 * var(--base-spacing)) calc(3 * var(--base-spacing));
  background: rgba(var(--color-border-rgb), 0.12);
}

.post-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(0.5 * var(--base-spacing)) calc(2 * var(--base-spacing));
}

.post-links ul:has(.pl-edit) li.pl-edit {
  margin-left: auto;
}

.post-links ul:not(:has(.pl-edit)) li.pl-quote {
  margin-left: auto;
}

.post-links a {
  font-size: 0.78571rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
}

.post-links a:hover {
  color: var(--color-heading);
}

/* ============ REUSABLE BUTTON ============ */
.button {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85714rem;
  letter-spacing: 1px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border: 1px solid var(--color-accent);
  border-radius: calc(0.5 * var(--base-spacing));
  padding: calc(0.75 * var(--base-spacing)) calc(2 * var(--base-spacing));
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.button:hover {
  border-color: var(--color-accent-hover);
  box-shadow: 0 4px 10px rgba(var(--color-shadow-rgb), 0.35), 0 0 0 1px rgba(var(--color-accent-rgb), 0.2);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(var(--color-shadow-rgb), 0.3);
}

/* ============ REUSABLE FORM FIELDS (generic inputs/selects) ============ */
/* excludes .modmenu's own select, which already carries a complete compact style of
   its own — kept as the sole rule touching that element rather than layering a second */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"] {
  font-family: var(--font-body);
  font-size: 0.92857rem;
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.5 * var(--base-spacing));
  padding: calc(0.75 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  box-sizing: border-box;
}

select:not(.modmenu *) {
  font-family: var(--font-body);
  font-size: 0.92857rem;
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.5 * var(--base-spacing));
  padding: calc(0.625 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  box-sizing: border-box;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:not(.modmenu *):focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.25);
}

/* ============ QUICK REPLY / POST FORM ============ */
/* on the messages-compose forms (compose_message.html, send_message.html)
   #post-form sits right after fieldset#post-new's floated, width:100% legend
   (see .formal legend below) instead of after .formal's own plain heading —
   without clearing that float, this box's own new BFC (from overflow:hidden)
   has zero width left to lay out in and its whole content collapses to a
   0px-wide, 1000px+-tall sliver. `clear` is a no-op on the topic quick-reply,
   which has no floated sibling above it. */
#post-form {
  clear: both;
  margin: calc(3 * var(--base-spacing)) 0 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(var(--color-shadow-rgb), 0.25);
  overflow: hidden;
}

#post-form>h2 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.25 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  text-align: center;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

#post-form>h2 span {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  color: var(--color-text-on-dark);
  text-transform: uppercase;
}

#post-form form.container {
  background: var(--color-panel-bg-alt);
}

#post-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

#post-form legend {
  width: 100%;
  float: left;
  padding: calc(0.75 * var(--base-spacing)) calc(3 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
  background: rgba(var(--color-border-rgb), 0.12);
  border-bottom: 1px dashed rgba(var(--color-border-rgb), 0.3);
  box-sizing: border-box;
}

#post-form .fs-box {
  clear: both;
  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing));
}

/* ---- preview panel ---- */
#post-preview .post-box {
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.5 * var(--base-spacing));
}

#post-preview .post-content {
  padding: calc(2 * var(--base-spacing));
  font-size: 1.07143rem;
  line-height: 1.6;
  color: var(--color-text);
}

/* ---- toolbar: icon buttons in Font Awesome ---- */
/* the toolbar is a <table> of cells that never wraps and, at a fixed width, leaves the
   row clumped on the left with dead space to the right. Rebuild it as a wrapping flex
   row whose cells grow to fill the full width (matching the platform's own
   `#form-buttons table {width:99%}` intent) and wrap onto another line once they hit
   their minimum size, instead of overflowing or disappearing.
   `display: flex` is set explicitly on the <td> itself (not left to `table` &#8594; `flex`
   "unboxing") because WebKit doesn't reliably blockify a bare table-cell inside a flex
   container — leaving it as table-cell there renders as a stray, misaligned box. */
#form-buttons table,
#tags>table {
  display: block;
  border-collapse: collapse;
  margin-bottom: calc(1.5 * var(--base-spacing));
}

#form-buttons tbody,
#tags>table tbody {
  display: block;
}

#form-buttons tr,
#tags>table tr {
  display: flex;
  flex-wrap: wrap;
}

#form-buttons td,
#tags>table td {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 32px;
  height: 32px;
  cursor: pointer;
  border-radius: calc(0.375 * var(--base-spacing));
  background: none !important;
  transition: background 0.15s;
}

#form-buttons td:hover,
#tags>table td:hover {
  background: rgba(var(--color-accent-rgb), 0.18) !important;
}

#form-buttons td img,
#tags>table td img {
  /* !important: extra.css (loaded after this stylesheet) sets its own fixed
     `height:26px` on this exact selector and wins ties on cascade order — without
     this, the invisible click target is pinned to a 26px sliver instead of covering
     the full (now 32-40px) button, so only the icon's immediate area is clickable */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  cursor: pointer;
}

#form-buttons td::before,
#tags>table td::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1rem;
  color: var(--color-heading);
}

#button-font::before {
  content: "\f031";
}

#button-size::before {
  content: "\f034";
}

#button-bold::before {
  content: "\f032";
}

#button-italic::before {
  content: "\f033";
}

#button-underline::before {
  content: "\f0cd";
}

#button-strike::before {
  content: "\f0cc";
}

#button-left::before {
  content: "\f036";
}

#button-center::before {
  content: "\f037";
}

#button-right::before {
  content: "\f038";
}

#button-link::before {
  content: "\f0c1";
}

#button-spoiler::before {
  content: "\f070";
}

#button-image::before {
  content: "\f03e";
}

#button-video::before {
  content: "\f03d";
}

#button-hide::before {
  content: "\f023";
}

#button-quote::before {
  content: "\f10e";
}

#button-code::before {
  content: "\f121";
}

#button-color::before {
  content: "\f53f";
}

#button-table::before {
  content: "\f0ce";
}

#button-smile::before {
  content: "\f118";
}

#button-keyboard::before {
  content: "\f11c";
}

#button-addition::before {
  content: "\f141";
}

#button-files_rusff::before {
  content: "\f0c6";
}

#button-graffiti_rusff::before {
  content: "\f1fc";
}

/* ---- message textarea ---- */
#post-form .resizable-textarea {
  position: relative;
}

textarea {
  width: 100%;
  min-height: 180px;
  padding: calc(1.25 * var(--base-spacing));
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.5 * var(--base-spacing));
  resize: vertical;
  box-sizing: border-box;
}

textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.25);
}

.grippie {
  height: var(--base-spacing);
  background: rgba(var(--color-border-rgb), 0.15);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 calc(0.5 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
  cursor: ns-resize;
}

/* ---- dropdown panels (font/size/color/table/smilies/etc) ---- */
/* extra.css positions these `position:absolute; top:43px; right:6px` relative to the
   nearest positioned ancestor — #tags wraps every one of them, so it must be the
   positioning context itself, or they fall back to .punbb (position:relative, far up
   the tree) and render pinned near the top of the whole forum panel instead of under
   the toolbar */
#tags {
  position: relative;
}

#post-form .container[id$="-area"] {
  /* extra.css's `top:43px` was calibrated to the platform's original (taller,
     unstyled) toolbar row — our own toolbar sits flush against #tags's top edge
     (see #form-buttons td sizing above), so re-anchor with a small fixed gap
     instead of inheriting a now-mismatched offset */
  top: calc(0.5 * var(--base-spacing));
  margin: 0;
  padding: calc(1.5 * var(--base-spacing));
  background: var(--color-panel-bg);
  border: 1px solid var(--color-border);
  border-radius: calc(0.5 * var(--base-spacing));
  box-shadow: 0 4px 12px rgba(var(--color-shadow-rgb), 0.25);
}

/* extra.css's `right:6px` pins every panel to the toolbar's right edge regardless of
   which button opened it. #tags has no toolbar of its own (the icon row lives in the
   sibling #form-buttons), so each panel is repinned by `left` to line up under its own
   trigger button instead. The 23 buttons are flex items that grow to fill the row
   evenly (see #form-buttons td), so each one's column is a fixed *fraction* of the row
   width, not a fixed px offset — button N's column starts at N/23 of the row. */
#font-area {
  left: 0;
  right: auto;
}

#size-area {
  left: calc(1 / 23 * 100%);
  right: auto;
}

#spoiler-area {
  left: calc(10 / 23 * 100%);
  right: auto;
}

#image-area {
  left: calc(11 / 23 * 100%);
  right: auto;
}

#video-area {
  left: calc(12 / 23 * 100%);
  right: auto;
}

#color-area {
  left: calc(16 / 23 * 100%);
  right: auto;
}

#table-area {
  left: calc(17 / 23 * 100%);
  right: auto;
}

#smilies-area {
  left: calc(18 / 23 * 100%);
  right: auto;
}

#keyboard-area {
  left: calc(19 / 23 * 100%);
  right: auto;
}

#addition-area {
  left: calc(20 / 23 * 100%);
  right: auto;
}

/* ---- submit row ---- */
#post-form .formsubmit {
  clear: both;
  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing));
  display: flex;
  gap: calc(1.5 * var(--base-spacing));
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

/* ============ USERLIST (search form + member table) ============ */
.formal,
.usertable {
  margin: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 14px rgba(var(--color-shadow-rgb), 0.25);
  overflow: hidden;
}

.formal>h2,
.usertable>h2 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.25 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  text-align: center;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
}

.formal>h2 span,
.usertable>h2 span {
  font-family: var(--font-heading);
  font-size: 1.07143rem;
  letter-spacing: 3px;
  color: var(--color-text-on-dark);
  text-transform: uppercase;
}

.formal form.container,
.usertable .container {
  background: var(--color-panel-bg-alt);
}

/* ---- search / sort form ---- */
.formal p {
  margin: 0;
}

.formal fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.formal legend {
  width: 100%;
  float: left;
  padding: calc(0.75 * var(--base-spacing)) calc(3 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
  background: rgba(var(--color-border-rgb), 0.12);
  border-bottom: 1px dashed rgba(var(--color-border-rgb), 0.3);
  box-sizing: border-box;
}

.formal .fs-box {
  clear: both;
  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing));
}

.formal .fs-box.inline {
  display: flex;
  flex-wrap: wrap;
  gap: calc(2 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
}

.formal .inputfield,
.formal .selectfield {
  margin: 0;
}

.inputfield,
.selectfield,
.datafield,
.radiofield {
  margin-bottom: calc(2 * var(--base-spacing)) !important;
}

.inputfield br,
.selectfield br {
  display: none;
}

.formal .inputfield label,
.formal .selectfield label {
  display: block;
  margin-bottom: calc(0.5 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
}

.formal .inputfield .input,
.formal .selectfield .input {
  display: block;
}

.formal .inputfield input[type="text"] {
  width: 220px;
}

.formal .selectfield select {
  min-width: 180px;
}

.formal .infofield {
  flex-basis: 100%;
  margin: calc(1 * var(--base-spacing)) 0 0;
  font-size: 0.82143rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ---- radio buttons + labels (site-wide, not just .formal) ----
   custom circle replaces the native control everywhere on the forum. Where
   the forum wraps options as <fieldset class="radiofield"><span class="radio">
   <input><label></span><br>...</fieldset> (privacy/personal profile fields),
   the <br> between options is the forum's own spacing mechanism — dropped in
   favour of margin on .radio so spacing stays consistent regardless of how a
   label wraps. */
.radiofield br {
  display: none;
}

.radiofield .radio {
  display: flex;
  align-items: flex-start;
  gap: calc(1 * var(--base-spacing));
  margin-bottom: calc(1 * var(--base-spacing));
}

.radiofield .radio:last-child {
  margin-bottom: 0;
}

input[type="radio"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: calc(0.2 * var(--base-spacing)) 0 0;
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-panel-bg-alt);
  cursor: pointer;
}

input[type="radio"]:hover {
  border-color: var(--color-accent);
}

input[type="radio"]:checked {
  border-color: var(--color-accent);
  background: radial-gradient(circle, var(--color-accent) 0 5px, var(--color-panel-bg-alt) 6px);
}

input[type="radio"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

input[type="radio"]+label,
input[type="radio"]~label {
  font-size: 0.89286rem;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}

input[type="radio"]:checked+label,
input[type="radio"]:checked~label {
  color: var(--color-heading);
}

/* ---- checkboxes + labels ----
   markup: <p class="checkfield"><span class="input"><input type="checkbox">
   </span><label>...</label></p> — the label sits outside the input's own
   wrapper span (unlike .radiofield, where label is a direct sibling), so
   pairing needs :has() rather than a sibling combinator. Scoped to
   .checkfield rather than made bare like input[type="radio"] above, since
   .walk-autorun-row already has its own (dark-surface, native accent-color)
   checkbox that a bare rule would otherwise clobber. */
.checkfield {
  display: flex;
  align-items: flex-start;
  gap: calc(1 * var(--base-spacing));
}

.checkfield input[type="checkbox"],
#profilenav #OnOff_Notify {
  flex: none;
  width: 16px;
  height: 16px;
  margin: calc(0.2 * var(--base-spacing)) 0 0;
  appearance: none;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background-color: var(--color-panel-bg-alt);
  cursor: pointer;
}

.checkfield input[type="checkbox"]:hover,
#profilenav #OnOff_Notify:hover {
  border-color: var(--color-accent);
}

.checkfield input[type="checkbox"]:checked,
#profilenav #OnOff_Notify:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
  color: var(--color-panel-bg-alt);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 5.5-6.5' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.checkfield input[type="checkbox"]:focus-visible,
#profilenav #OnOff_Notify:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.checkfield label,
#profilenav .inp2 label {
  font-size: 0.89286rem;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}

.checkfield:has(input:checked) label,
#profilenav .inp2:has(#OnOff_Notify:checked) label {
  color: var(--color-heading);
}

/* ---- generic native range slider skin (default HTML <input type="range">,
   themed for reuse anywhere a real slider is needed) ---- */
input[type="range"] {
  appearance: none;
  width: 100%;
  height: 6px;
  margin: calc(0.4 * var(--base-spacing)) 0;
  background: var(--color-panel-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.25);
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  background: transparent;
  border: none;
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.25);
  cursor: pointer;
}

input[type="range"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- PM notification settings, reparented into the sidebar ----
   #notify-settings/#volSlider are injected by the third-party pm_notify.js
   (loaded by the forum, not ours to edit) and moved here from the content
   column by forms/footer.html. Its drag math reads #volSlider's and
   .thumb's *width* (plus .thumb's raw offsetWidth) once at startup, before
   the move runs, so width/padding/border-width on the track and thumb stay
   untouched below — only color, height, radius, shadow and layout change. */
#profilenav #notify-settings {
  margin: 0;
}

#profilenav .inp2 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(0.5 * var(--base-spacing)) calc(0.75 * var(--base-spacing));
}

#profilenav .inp2 label {
  flex: 1 1 0%;
  min-width: 0;
}

#profilenav #volume-set {
  flex: 0 0 100%;
  float: none;
  font-size: 0.82143rem;
  color: var(--color-text);
}

#profilenav #volSlider {
  display: block;
  float: none;
  height: 6px;
  margin-top: calc(0.5 * var(--base-spacing));
  background: var(--color-panel-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  box-shadow: none;
}

#profilenav #volSlider .before {
  height: 100%;
  border: none;
  border-radius: 3px 0 0 3px;
  background: var(--color-accent);
}

#profilenav #volSlider .thumb {
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.25), 0 1px 2px rgba(var(--color-shadow-rgb), 0.4);
}

.formal .formsubmit {
  clear: both;
  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing));
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

/* ---- messages-compose specifics (compose_message.html, send_message.html) ---- */
/* subject is a message title, not a short filter/search value — the generic
   220px .inputfield width above reads as cramped next to the full-width
   textarea below it */
#post-new .inputfield input.longinput {
  width: 100%;
  max-width: 480px;
}

/* the submit row here ships as a bare <p> with inline float layout instead
   of the reusable .formsubmit class — reproduce the same framing structurally */
#post-form>p {
  clear: both;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(1.5 * var(--base-spacing));
  padding: calc(2 * var(--base-spacing)) calc(3 * var(--base-spacing)) !important;
  margin: 0;
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
}

#post-form>p>span {
  float: none !important;
}

#post-form>p>span:first-child {
  display: flex;
  gap: calc(1.5 * var(--base-spacing));
}

#post-form>p>.checkfield {
  margin-left: auto;
}

/* ---- section nav sidebar (profile editing tabs, message folders/actions) ----
   #profilenav is one or more h2+ul groups the forum renders as the first
   child of .formal's .container, before the section's own form/fieldsets
   (profile editing) or standalone form (messages). Grid puts it in a left
   column spanning every implicit row the sibling content creates — the
   "span 999" is a deliberate overshoot, grid clamps it to the rows that
   actually exist. */
.formal .container:has(> #profilenav) {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  align-items: start;
}

.formal .container:has(> #profilenav)>#profilenav {
  grid-column: 1;
  grid-row: 1 / span 999;
  align-self: stretch;
  position: sticky;
  top: calc(2 * var(--base-spacing));
  padding: calc(2 * var(--base-spacing)) calc(1.5 * var(--base-spacing)) calc(2 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  background: rgba(var(--color-border-rgb), 0.06);
  border-right: 1px solid rgba(var(--color-border-rgb), 0.2);
}

.formal .container:has(> #profilenav)> :not(#profilenav) {
  grid-column: 2;
}

#profilenav h2 {
  margin: 0 0 calc(0.75 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-heading);
}

#profilenav h2:not(:first-child) {
  margin-top: calc(1.5 * var(--base-spacing));
}

#profilenav ul {
  margin: 0 0 calc(1.5 * var(--base-spacing));
  padding: 0;
  list-style: none;
  border-left: 2px solid rgba(var(--color-border-rgb), 0.3);
}

#profilenav li {
  margin: 0;
}

#profilenav a {
  display: block;
  padding: calc(0.6 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 0.89286rem;
  color: var(--color-text);
  text-decoration: none;
}

#profilenav a:hover {
  color: var(--color-heading-hover);
  border-left-color: rgba(var(--color-accent-rgb), 0.5);
}

#profilenav li.isactive a {
  color: var(--color-heading);
  font-weight: 600;
  border-left-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.08);
}

/* mobile: no room for two columns — nav becomes a horizontal scrollable
   tab strip stacked above the content instead of a left sidebar */
@media (max-width: 640px) {
  .formal .container:has(> #profilenav) {
    display: block;
  }

  .formal .container:has(> #profilenav)>#profilenav {
    position: static;
    padding: calc(1.5 * var(--base-spacing)) calc(2 * var(--base-spacing));
    border-right: none;
    border-bottom: 1px solid rgba(var(--color-border-rgb), 0.2);
  }

  #profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: calc(0.5 * var(--base-spacing));
    border-left: none;
    padding-bottom: calc(1 * var(--base-spacing));
  }

  #profilenav a {
    margin-left: 0;
    padding: calc(0.5 * var(--base-spacing)) var(--base-spacing);
    border: 1px solid rgba(var(--color-border-rgb), 0.3);
    border-radius: calc(0.5 * var(--base-spacing));
  }

  #profilenav li.isactive a {
    border-left-color: transparent;
    border-bottom-color: var(--color-accent);
  }
}

/* ---- member table ---- */
.usertable .container {
  overflow-x: auto;
}

.usertable table {
  width: 100%;
  border-collapse: collapse;
}

.usertable thead th {
  font-family: var(--font-heading);
  font-size: 0.78571rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-text-on-dark);
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border-bottom: 2px solid var(--color-accent);
  padding: calc(1 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  white-space: nowrap;
}

.usertable th.tc3 {
  text-align: center;
}

.usertable tbody tr {
  border-bottom: 1px solid rgba(var(--color-border-rgb), 0.3);
  transition: background 0.15s;
}

.usertable tbody tr:last-child {
  border-bottom: none;
}

.usertable tbody tr:hover {
  background: rgba(var(--color-border-rgb), 0.08);
}

.usertable td {
  padding: calc(1.25 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  font-size: 0.89286rem;
  color: var(--color-text);
  vertical-align: middle;
}

.usertable td.username {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--base-spacing));
  white-space: nowrap;
}

.usertable .usersname a {
  font-family: var(--font-heading);
  color: var(--color-heading);
  text-decoration: none;
  letter-spacing: 0.3px;
}

.usertable .usersname a:hover {
  color: var(--color-heading-hover);
}

.usertable td.tc2,
.usertable td.tc3 {
  color: var(--color-text-muted);
}

.usertable td.tc3 {
  text-align: center;
}

/* ============ SCROLL NAV (jump to top / bottom) ============ */
.scroll-nav {
  position: fixed;
  right: calc(3 * var(--base-spacing));
  bottom: calc(3 * var(--base-spacing));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--base-spacing));
}

.scroll-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(5 * var(--base-spacing));
  height: calc(5 * var(--base-spacing));
  background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(var(--color-shadow-rgb), 0.3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, border-color 0.2s;
}

.scroll-nav-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-nav-btn::before {
  font: normal 900 16px "Font Awesome 6 Free";
  color: var(--color-accent);
  transition: color 0.2s;
}

.scroll-nav-btn:hover {
  border-color: var(--color-accent-hover);
}

.scroll-nav-btn:hover::before {
  color: var(--color-accent-bright);
}

.scroll-nav-btn:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.scroll-nav-btn--up::before {
  content: "\f102";
  /* fa-angles-up */
}

.scroll-nav-btn--down::before {
  content: "\f103";
  /* fa-angles-down */
}

/* ============ MOBILE (&#8804;640px) ============ */
@media (max-width: 640px) {
  .hero {
    height: auto;
    overflow: visible;
  }

  .hero img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
  }

  .hero::after {
    height: 200px;
    bottom: auto;
  }

  .title-overlay {
    top: 10px;
  }

  .title-overlay h1 {
    font-size: 1.71429rem;
    letter-spacing: 2px;
  }

  .title-overlay .subtitle {
    font-size: 0.85714rem;
    margin-top: calc(0.5 * var(--base-spacing));
  }

  /* the 4-card overlay is too cramped on a short mobile hero — pull it out of the
     image entirely and let it run as a solid strip below, stacked not side-by-side */
  .highlights {
    position: static;
    flex-direction: column;
    background: var(--color-surface-raised);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 2px solid var(--color-border);
  }

  .highlight-card {
    border-right: none;
    border-bottom: 1px solid rgba(var(--color-accent-rgb), 0.2);
    padding: calc(1.25 * var(--base-spacing)) calc(2 * var(--base-spacing));
  }

  .highlight-card:last-child {
    border-bottom: none;
  }

  .players-row {
    justify-content: flex-start;
    gap: calc(2 * var(--base-spacing));
  }

  .post-excerpt,
  .episode-desc {
    -webkit-line-clamp: 2;
  }

  /* replace the desktop two-row nav entirely with the burger nav on mobile */
  .nav-ribbon>.nav-primary,
  .nav-ribbon>.nav-more-checkbox,
  .nav-ribbon>.nav-more-label,
  .nav-ribbon>.nav-secondary {
    display: none !important;
  }

  .nav-ribbon {
    padding: calc(1.25 * var(--base-spacing)) calc(2 * var(--base-spacing));
  }

  .nav-mobile {
    display: flex;
    align-items: center;
    gap: calc(2 * var(--base-spacing));
    position: relative;
  }

  .nav-mobile-link {
    font-family: var(--font-heading);
    font-size: 0.78571rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    text-decoration: none;
  }

  .nav-mobile-link:hover {
    color: var(--color-accent-hover);
  }

  .nav-mobile-home {
    margin-right: auto;
  }

  .nav-burger-checkbox {
    display: none;
  }

  .nav-burger-label {
    margin-left: auto;
    font-size: 1.28571rem;
    line-height: 1;
    color: var(--color-text-on-dark);
    cursor: pointer;
    padding: calc(0.25 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
  }

  .burger-icon-close {
    display: none;
  }

  .nav-burger-checkbox:checked~.nav-burger-label .burger-icon {
    display: none;
  }

  .nav-burger-checkbox:checked~.nav-burger-label .burger-icon-close {
    display: inline;
  }

  /* dropdown floats over the content below rather than pushing the page down */
  .nav-burger-panel {
    display: none;
    flex-direction: column;
    gap: calc(1.375 * var(--base-spacing));
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;
    background: linear-gradient(180deg, var(--color-banner-bg) 0%, var(--color-banner-bg-dark) 100%);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    padding: calc(2 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
    z-index: 20;
    box-shadow: 0 10px 24px rgba(var(--color-shadow-rgb), 0.5);
  }

  .nav-burger-panel a {
    font-size: 0.89286rem;
    letter-spacing: 0.5px;
    color: var(--color-text-cream);
    text-decoration: none;
  }

  .nav-burger-panel a:hover {
    color: var(--color-accent-bright);
  }

  .nav-burger-panel hr {
    border: none;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.3);
    margin: calc(0.375 * var(--base-spacing)) 0;
  }

  .nav-burger-checkbox:checked~.nav-burger-panel {
    display: flex;
  }

  .status-line {
    font-size: 0.89286rem;
    padding: calc(1.125 * var(--base-spacing)) calc(1.75 * var(--base-spacing));
  }

  #pun-navlinks {
    padding: calc(1 * var(--base-spacing)) calc(1.75 * var(--base-spacing));
  }

  #pun-navlinks a {
    font-size: 0.71429rem;
  }

  .status-avatar {
    width: calc(3.5 * var(--base-spacing));
    height: calc(3.5 * var(--base-spacing));
  }

  .punbb {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }

  /* !important here: #pun-crumbs2's own padding shorthand is set at desktop
     width, so a normal-weight override can never win regardless of specificity */
  .punbb .crumbs,
  #pun-crumbs2 {
    padding-left: calc(1.75 * var(--base-spacing)) !important;
    padding-right: calc(1.75 * var(--base-spacing)) !important;
  }

  /* specificity must match the base .punbb #pun-stats / .punbb #pun-about rules
     (which set the full padding shorthand) or this override silently loses */
  .punbb #pun-stats,
  .punbb #pun-about {
    padding-left: calc(1.75 * var(--base-spacing));
    padding-right: calc(1.75 * var(--base-spacing));
  }

  /* the desktop "counts next to title" trick relies on fixed pixel offsets that
     only work at desktop widths — abandon it here and fall back to simple stacked flow */
  .category tbody tr {
    flex-wrap: wrap;
    padding: calc(1.5 * var(--base-spacing)) calc(1.75 * var(--base-spacing));
  }

  .category .tclcon {
    max-width: 100%;
  }

  .category .tclcon h3 {
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .category .forum-meta-row {
    margin-top: calc(0.75 * var(--base-spacing));
  }

  .category .forum-meta-row td.tc2 {
    padding-right: calc(1.25 * var(--base-spacing));
  }

  .category .forum-meta-row td.tc3 {
    padding: 0 calc(1.25 * var(--base-spacing));
  }

  .category .forum-meta-row td.tcr {
    flex: 1 1 100%;
    padding-top: calc(1 * var(--base-spacing));
    border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
  }

  /* the overlaid title/toolbar row has no room to share a line at mobile widths —
     drop the overlay and stack the toolbar back under the title */
  .punbb #pun-main>h1 {
    padding: calc(1.25 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
  }

  .punbb #pun-main>h1 span {
    font-size: 0.92857rem;
    letter-spacing: 2px;
  }

  .punbb #pun-main>h1+.linkst {
    grid-row: 2;
    position: static;
    z-index: auto;
    justify-content: center;
    text-align: center;
    padding: calc(1 * var(--base-spacing)) calc(1.5 * var(--base-spacing));
    border-bottom: 1px dashed rgba(var(--color-border-rgb), 0.3);
    color: var(--color-text-muted);
  }

  .punbb #pun-main>h1+.linkst .pagelink strong {
    color: var(--color-heading);
  }

  /* buttons are off the banner and back on the panel background here — restore
     the normal button chrome instead of the flush-embedded header treatment */
  .punbb #pun-main>h1+.linkst .postlink {
    margin-left: 0;
    justify-content: center;
    gap: calc(1 * var(--base-spacing));
  }

  .punbb #pun-main>h1+.linkst .postlink a {
    background: linear-gradient(180deg, var(--color-banner-bg-light) 0%, var(--color-banner-bg) 100%);
    border: 1px solid var(--color-accent);
    border-radius: calc(0.5 * var(--base-spacing));
    padding: calc(0.5 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
    font-size: 0.78571rem;
    color: var(--color-text-on-dark);
  }

  .punbb #pun-main>h1+.linkst .postlink span+span {
    border-left: none;
  }

  /* profile sidebar stacks above the post body instead of sitting beside it */
  .topic .post {
    margin: calc(2 * var(--base-spacing)) 0 0;
  }

  .topic .post .container {
    flex-direction: column;
  }

  .post-author {
    display: grid;
    grid-template-columns: 64px repeat(4, minmax(0, max-content));
    justify-content: start;
    gap: calc(0.25 * var(--base-spacing)) calc(0.5 * var(--base-spacing));
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    border-right: none;
    border-bottom: 2px solid var(--color-accent);
    padding: calc(0.75 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
    text-align: left;
    top: 0;
  }

  /* dissolve the list box so its li's become grid items of .post-author directly,
     letting them be placed explicitly instead of stacking in DOM order */
  .post-author ul {
    display: contents;
  }

  .post-author li {
    padding: calc(0.125 * var(--base-spacing)) 0;
  }

  /* row 1-2: username, title stacked plainly beside the avatar (no badge/pill) */
  .post-author .pa-author {
    grid-column: 2 / 6;
    grid-row: 1;
  }

  .post-author .pa-title {
    grid-column: 2 / 6;
    grid-row: 2;
    width: auto;
    margin: 0;
    border-top: none;
    padding-top: 0;
  }

  /* avatar (real or placeholder) sits beside username + title */
  .post-author .pa-avatar,
  .post-author.no-avatar::before {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
  }

  .post-author .pa-avatar img,
  .post-author.no-avatar::before {
    width: 64px;
    height: 64px;
    margin: 0;
  }

  /* fld3 doesn't fit this compact layout */
  .post-author .pa-fld3 {
    display: none;
  }

  /* icon stats: no fixed column assigned, so they auto-flow side by side across
     all 5 columns and wrap onto another row on their own, whichever/however many
     of them exist for this user */
  .post-author .pa-posts,
  .post-author .pa-respect,
  .post-author .pa-fld2,
  .post-author .pa-fld1,
  .post-author .pa-positive {
    order: 1;
    width: auto;
    margin: 0;
    padding: calc(0.5 * var(--base-spacing)) calc(0.5 * var(--base-spacing)) calc(0.375 * var(--base-spacing));
    clear: none;
    float: none;
  }

  .post-author .pa-positive {
    box-sizing: border-box;
    background: rgba(var(--color-bg-rgb), 0.15);
    border: 1px solid color-mix(in srgb, var(--pa-neutral) 35%, transparent);
    border-radius: calc(0.5 * var(--base-spacing));
  }

  .post-author .pa-positive .fld-name {
    display: block;
    font-size: 0;
  }

  .post-author .pa-positive .fld-name a::before {
    font: normal 900 10px "Font Awesome 6 Free";
    color: color-mix(in srgb, var(--pa-neutral) 85%, transparent);
    content: "\f164";
    /* fa-thumbs-up */
  }

  /* everything else keeps stacking below, one full-width row each, after the icon stats */
  .post-author .pa-reg,
  .post-author .pa-invites,
  .post-author .pa-online,
  .post-author .pa-time-visit,
  .post-author .pa-ip {
    order: 2;
    grid-column: 1 / -1;
    width: auto;
    margin: 0;
  }

  .post-links {
    flex-basis: 100%;
    margin-left: 0;
  }

  .post-content,
  .post-rating,
  .post-links {
    padding-left: calc(2 * var(--base-spacing));
    padding-right: calc(2 * var(--base-spacing));
  }

  #post-form legend,
  #post-form .fs-box,
  #post-form .formsubmit,
  #post-form>p {
    padding-left: calc(1.75 * var(--base-spacing));
    padding-right: calc(1.75 * var(--base-spacing));
  }

  #post-form .formsubmit,
  #post-form>p {
    flex-direction: column;
    align-items: stretch;
  }

  /* auto-margin push only makes sense inline, next to the buttons row — stacked
     column layout already puts it on its own line */
  #post-form>p>.checkfield {
    margin-left: 0;
  }

  /* submit + preview stack full-width instead of sitting side by side */
  #post-form>p>span:first-child {
    flex-direction: column;
    align-items: stretch;
  }

  #post-form>p>span:first-child .button {
    width: 100%;
    text-align: center;
  }

  /* the fixed 32px-per-button offsets used to line panels up with their desktop
     toolbar column don't hold once the toolbar wraps onto multiple lines — drop
     back into normal flow, directly under the toolbar, instead */
  #post-form .container[id$="-area"] {
    position: static !important;
    margin-top: calc(1 * var(--base-spacing));
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* bigger tap targets than the 32px desktop row */
  #form-buttons td,
  #tags>table td {
    flex-basis: 40px;
    height: 40px;
  }

  #form-buttons td::before,
  #tags>table td::before {
    font-size: 1.14286rem;
  }

  /* ---- userlist ---- */
  .formal .fs-box.inline {
    flex-direction: column;
  }

  .formal .inputfield input[type="text"],
  .formal .selectfield select {
    width: 100%;
  }

  .usertable td.username {
    white-space: normal;
  }

  .scroll-nav {
    right: calc(1.5 * var(--base-spacing));
    bottom: calc(1.5 * var(--base-spacing));
  }

  .scroll-nav-btn {
    width: calc(4.5 * var(--base-spacing));
    height: calc(4.5 * var(--base-spacing));
  }

  /* below ~1082px the parchment panel runs edge-to-edge, so there's no dark
     margin for the buttons to float in — they sit over live content instead.
     Ease that with the same translucent-blur treatment already used for
     overlays on the hero (.highlights), instead of a solid opaque block. */
  .scroll-nav-btn {
    background: rgba(var(--color-bg-rgb), 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

#pun-index #pun-main h1,
.usertable h2,
.forum h2,
.topic h2,
.translatelink,
#pun-live-rusff {
  display: none !important;
}

/* ============ PROFILE VIEW PAGE (#viewprofile) ============ */
/* markup: #viewprofile-next > #profilenav (section tabs) + #viewprofile >
   .container > ul > table > tr > td#profile-left / td#profile-right, each
   li a flat "<span>label:</span> <strong>value</strong>" pair — li's aren't
   grouped into rows in the DOM, and which optional fields (óâàæåíèå,
   ïîçèòèâ, custom fld1-3) exist varies per user. So the stat cards on the
   right just flex-wrap and grow to fill the row, sizing and wrapping
   themselves however many of them are present. */

/* stays on the parchment surface #pun-main already sets — no background of its own */
#viewprofile-next {
  padding: calc(2 * var(--base-spacing)) calc(2.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
}

/* section tabs (Äîïîëíèòåëüíî/Çàãðóçêè/Óïðàâëåíèå) not part of the preview
   card — every other profile.php?section=* page (and messages.php) shows
   this same #profilenav as a real sidebar, see the block in the .formal
   section above */
#viewprofile-next #profilenav {
  display: none;
}

/* the <ul><table><tr><td> nesting is legacy markup structure only — a real
   <table> keeps sizing its cells via internal table layout even once
   display is overridden, which is unreliable to fight with CSS. Dissolving
   the whole chain with display:contents (same technique already used for
   .post-author ul below) removes it from the render tree entirely, so
   #profile-left/#profile-right end up as plain flex items of .container. */
#viewprofile ul,
#viewprofile table,
#viewprofile table tbody,
#viewprofile table tr {
  display: contents;
}

/* mobile-first: stacked column. The side-by-side layout only switches on at
   860px (below) — relying on flex-wrap to find that point on its own falls
   apart in between, where #profile-right's grid content is still wider than
   the space left beside the avatar, so it wraps anyway but leaves the
   now-empty flex-basis gap behind it. */
#viewprofile .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(2 * var(--base-spacing));
}

#viewprofile li {
  list-style: none;
  margin: 0;
}

/* ---- left column: portrait + name ---- */
#profile-left {
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--base-spacing);
  justify-content: center;
}

#profile-name {
  font-family: var(--font-heading);
  font-size: 1.28571rem;
  letter-spacing: 1px;
  color: var(--color-heading);
}

#profile-title {
  margin-top: calc(0.5 * var(--base-spacing));
  margin-bottom: calc(1.5 * var(--base-spacing));
  font-style: italic;
  font-size: 0.85714rem;
  color: var(--color-text-muted);
}

#profile-title strong {
  font-weight: 400;
}

#pa-avatar {
  margin-bottom: calc(1.25 * var(--base-spacing));
  max-width: 180px;
}

/* fixed, compact size regardless of how wide the column is — the avatar
   shouldn't grow just because there's room next to it */
#pa-avatar img {
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  border: 2px solid var(--color-accent);
  border-radius: calc(0.5 * var(--base-spacing));
  box-shadow: 0 calc(0.5 * var(--base-spacing)) calc(2 * var(--base-spacing)) rgba(var(--color-shadow-rgb), 0.5);
}

/* no avatar set — same gradient placeholder block .post-author uses for the same case */
#viewprofile-next.no-avatar #pa-avatar::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background: linear-gradient(145deg, var(--color-text-muted), var(--color-text));
  border: 2px solid var(--color-accent);
  border-radius: calc(0.5 * var(--base-spacing));
}

#pa-online {
  font-size: 0.78571rem;
  letter-spacing: 0.3px;
  color: var(--color-text-muted);
}

#pa-online::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: calc(0.5 * var(--base-spacing));
  border-radius: 50%;
  background: var(--color-status-online);
}

#pa-edit {
  margin-top: calc(0.5 * var(--base-spacing));
}

#pa-edit a {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-link);
  text-decoration: none;
}

#pa-edit a:hover {
  color: var(--color-heading-hover);
}

/* ---- right column: stat cards ---- */
#profile-right {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: calc(1.25 * var(--base-spacing));
  flex: 1 1 auto;
}

#profile-right li strong {
  padding-left: 0 !important;
}

/* side-by-side layout kicks in once there's room for the fixed-width avatar
   column plus a useful multi-column stat grid next to it */

@media (min-width: 320px) {

  #profile-right,
  #profile-left {
    width: 100% !important;
    text-align: center;
  }
}

@media (min-width: 600px) {
  #viewprofile .container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: calc(3 * var(--base-spacing));
  }

  #profile-left {
    flex: 0 0 200px;
    width: 200px;
  }

  #profile-right {
    width: 70% !important;
  }

  /* forces its own line below the left/right row instead of sitting beside it */
  #profile-gifts {
    flex-basis: 100%;
    width: 100%;
  }
}


#profile-right>li {
  flex-grow: 1;
  box-sizing: border-box;
  background: rgba(var(--color-border-rgb), 0.08);
  border: 1px solid rgba(var(--color-border-rgb), 0.35);
  border-radius: calc(0.5 * var(--base-spacing));
  padding: calc(1 * var(--base-spacing)) calc(1.25 * var(--base-spacing));
  text-align: center;
}

#profile-right>li>span {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.71429rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-bottom: calc(0.5 * var(--base-spacing));
}

#profile-right>li>strong {
  display: block;
  font-size: 0.92857rem;
  font-weight: 600;
  color: var(--color-text);
}

#profile-right>li a {
  color: var(--color-link);
  text-decoration: none;
}

#profile-right>li a:hover {
  color: var(--color-heading-hover);
}

/* custom "àç" character field — wider, left-aligned bio block instead of a centered stat */
#pa-fld3 {
  text-align: left;
}

#pa-fld3>strong {
  font-weight: 400;
  line-height: 1.4;
}

#profile-gifts {
  width: 100%;
  margin-top: calc(2 * var(--base-spacing));
  padding-top: calc(1.5 * var(--base-spacing));
  border-top: 1px dashed rgba(var(--color-border-rgb), 0.3);
  text-align: center;
  font-size: 0.85714rem;
  color: var(--color-text-muted);
}

#profile-gifts a {
  color: var(--color-link);
  text-decoration: none;
}

#profile-gifts a:hover {
  color: var(--color-heading-hover);
}

@media (max-width: 640px) {
  #viewprofile-next {
    padding: calc(2 * var(--base-spacing)) calc(1.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  }

}

/* ============ LORE ARTICLE TEMPLATE (articles/*.html) ============
   Shared styling for the "<Country> — lore article" embeds posted in
   articles/*.html. One file per country; each only sets --lc-accent inline
   on its <article> and swaps its own content — every class below is meant to
   be reused verbatim. Colors are in colors.css (--lc-* vars); this section
   is layout/typography only, plus the CSS-only radio tabs (no JS needed).

   Tab wiring is purely structural (nth-of-type pairing between the hidden
   radios, their <label>s, and the panels), not id-based, so it works
   unmodified for any tab count up to 6 and needs no per-country renaming —
   article files still need matching input id / label[for] pairs (label
   semantics require it), but the ids can stay whatever the template ships
   with (e.g. tab-zemli, tab-vlast, ...) since nothing here reads them. */

.lore-article {
  width: 100%;
  background: var(--lc-paper);
  color: var(--lc-ink);
  font-family: var(--font-body);
  line-height: 1.55;
  padding: calc(3 * var(--base-spacing)) calc(4 * var(--base-spacing));
  box-sizing: border-box;
}

.lore-article * { box-sizing: border-box; }

.lore-article .lore-badge {
  display: inline-block;
  font-family: var(--font-heading);
  color: var(--lc-accent);
  border: 1px solid var(--lc-accent);
  border-radius: 3px;
  padding: calc(0.25 * var(--base-spacing)) calc(1 * var(--base-spacing));
  font-size: 0.89143rem;
  font-weight: 600;
  margin: 0 0 calc(1.5 * var(--base-spacing));
}

.lore-article h1 {
  font-family: var(--font-heading);
  font-size: 1.82857rem;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 calc(0.5 * var(--base-spacing));
}

.lore-article .lore-tagline {
  font-size: 1.05143rem;
  font-style: italic;
  opacity: 0.75;
  margin: 0 0 calc(1.5 * var(--base-spacing));
}

.lore-article .lore-inspiration {
  font-size: 0.89143rem;
  font-style: italic;
  opacity: 0.6;
}

.lore-article .lore-intro {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: calc(4 * var(--base-spacing));
  align-items: start;
  margin: 0 0 calc(3 * var(--base-spacing));
  padding-bottom: calc(3 * var(--base-spacing));
  border-bottom: 1px solid var(--lc-paper-deep);
}

.lore-article .lore-aside {
  display: grid;
  gap: calc(2 * var(--base-spacing));
}

.lore-article .lore-illustration {
  border: 1px dashed var(--lc-ink);
  background: var(--lc-paper-deep);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.6;
  font-style: italic;
  font-size: 0.97143rem;
  padding: calc(1.5 * var(--base-spacing));
}

.lore-article .lore-facts {
  margin: 0;
  border-top: 1px solid var(--lc-paper-deep);
  padding-top: calc(1.5 * var(--base-spacing));
  display: grid;
  gap: calc(1 * var(--base-spacing));
}

.lore-article .lore-facts dt {
  font-size: 0.82286rem;
  color: var(--lc-accent);
  font-weight: 600;
  margin: 0 0 calc(0.25 * var(--base-spacing));
}

.lore-article .lore-facts dd {
  margin: 0;
  font-size: 1.00571rem;
}

.lore-article section {
  margin: 0 0 calc(3 * var(--base-spacing));
  scroll-margin-top: calc(2 * var(--base-spacing));
}

.lore-article section:last-child { margin-bottom: 0; }

.lore-article .lore-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  margin: 0 0 calc(3 * var(--base-spacing));
  padding-bottom: calc(1.5 * var(--base-spacing));
  border-bottom: 1px solid var(--lc-paper-deep);
}

.lore-article .lore-tab {
  font-family: var(--font-heading);
  color: var(--lc-ink);
  opacity: 0.6;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.00571rem;
  padding-bottom: calc(0.5 * var(--base-spacing));
  border-bottom: 2px solid transparent;
}

.lore-article .lore-tab:hover { opacity: 0.85; }

.lore-article .lore-panel { display: none; }

/* show only the panel whose position matches the checked tab — see the
   file-level comment above for why this is positional, not id-based */
.lore-article .lore-tab-input:nth-of-type(1):checked ~ .lore-panels .lore-panel:nth-of-type(1),
.lore-article .lore-tab-input:nth-of-type(2):checked ~ .lore-panels .lore-panel:nth-of-type(2),
.lore-article .lore-tab-input:nth-of-type(3):checked ~ .lore-panels .lore-panel:nth-of-type(3),
.lore-article .lore-tab-input:nth-of-type(4):checked ~ .lore-panels .lore-panel:nth-of-type(4),
.lore-article .lore-tab-input:nth-of-type(5):checked ~ .lore-panels .lore-panel:nth-of-type(5),
.lore-article .lore-tab-input:nth-of-type(6):checked ~ .lore-panels .lore-panel:nth-of-type(6) {
  display: block;
}

.lore-article .lore-tab-input:nth-of-type(1):checked ~ .lore-tabs .lore-tab:nth-of-type(1),
.lore-article .lore-tab-input:nth-of-type(2):checked ~ .lore-tabs .lore-tab:nth-of-type(2),
.lore-article .lore-tab-input:nth-of-type(3):checked ~ .lore-tabs .lore-tab:nth-of-type(3),
.lore-article .lore-tab-input:nth-of-type(4):checked ~ .lore-tabs .lore-tab:nth-of-type(4),
.lore-article .lore-tab-input:nth-of-type(5):checked ~ .lore-tabs .lore-tab:nth-of-type(5),
.lore-article .lore-tab-input:nth-of-type(6):checked ~ .lore-tabs .lore-tab:nth-of-type(6) {
  opacity: 1;
  color: var(--lc-accent);
  border-bottom-color: var(--lc-accent);
}

.lore-article .lore-tab-input:nth-of-type(1):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(1),
.lore-article .lore-tab-input:nth-of-type(2):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(2),
.lore-article .lore-tab-input:nth-of-type(3):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(3),
.lore-article .lore-tab-input:nth-of-type(4):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(4),
.lore-article .lore-tab-input:nth-of-type(5):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(5),
.lore-article .lore-tab-input:nth-of-type(6):focus-visible ~ .lore-tabs .lore-tab:nth-of-type(6) {
  outline: 2px solid var(--lc-accent);
  outline-offset: 3px;
}

.lore-article h2 {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--base-spacing));
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 calc(1.5 * var(--base-spacing));
}

/* generic seal mark — a ring with a dot, not a letter, so it needs no
   per-section content and copies to any new country article as-is */
.lore-article h2 .lore-seal {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--lc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lore-article h2 .lore-seal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lc-accent);
}

.lore-article p {
  margin: 0 0 calc(1.5 * var(--base-spacing));
}

.lore-article p:last-child { margin-bottom: 0; }

.lore-article .lore-callout {
  border-left: 3px solid var(--lc-accent);
  padding: calc(0.5 * var(--base-spacing)) 0 calc(0.5 * var(--base-spacing)) calc(2 * var(--base-spacing));
  margin: calc(2 * var(--base-spacing)) 0;
  font-style: italic;
}

.lore-article .lore-thesis {
  margin: calc(3 * var(--base-spacing)) 0 0;
  padding: calc(2 * var(--base-spacing)) calc(2.5 * var(--base-spacing));
  border-left: 3px solid var(--lc-accent);
  border-radius: 0 4px 4px 0;
  background: var(--lc-paper-deep);
  font-style: italic;
  font-size: 1.14286rem;
}

.lore-article .lore-card:nth-child(4n+1) { --lc-card-accent: var(--lc-sub-1); }
.lore-article .lore-card:nth-child(4n+2) { --lc-card-accent: var(--lc-sub-2); }
.lore-article .lore-card:nth-child(4n+3) { --lc-card-accent: var(--lc-sub-3); }
.lore-article .lore-card:nth-child(4n+4) { --lc-card-accent: var(--lc-sub-4); }

.lore-article .lore-card {
  background: var(--lc-paper-deep);
  border-top: 3px solid var(--lc-card-accent, var(--lc-sub-1));
  border-radius: 4px;
  padding: calc(1.5 * var(--base-spacing));
}

.lore-article .lore-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05143rem;
  font-weight: 700;
  color: var(--lc-card-accent, var(--lc-sub-1));
  margin: 0 0 calc(0.5 * var(--base-spacing));
}

.lore-article .lore-card p {
  font-size: 0.97143rem;
  max-width: none;
}

/* appearance variants, independent of the accent-cycling above — used where
   a card's contrast is fixed by meaning (e.g. a muted/received-wisdom card
   next to an accent-highlighted/actual-truth one) rather than picked from
   the palette cycle */
.lore-article .lore-card--muted {
  background: rgba(var(--color-border-rgb), 0.08);
  border: 1px dashed rgba(var(--color-border-rgb), 0.6);
}

.lore-article .lore-card--muted h3 {
  color: var(--lc-ink);
  opacity: 0.8;
}

.lore-article .lore-card--muted p { opacity: 0.85; }

.lore-article .lore-card--accent {
  border: 2px solid var(--lc-accent);
}

.lore-article .lore-card--accent h3 { color: var(--lc-accent); }

.lore-article .lore-stances {
  list-style: none;
  margin: calc(2 * var(--base-spacing)) 0 0;
  padding: 0;
  display: grid;
  gap: calc(1 * var(--base-spacing));
}

.lore-article .lore-stances li {
  padding-left: calc(1.5 * var(--base-spacing));
  border-left: 1px solid var(--lc-paper-deep);
  font-size: 1.00571rem;
}

.lore-article .lore-subhead {
  font-family: var(--font-heading);
  font-size: 1.08571rem;
  font-weight: 700;
  color: var(--lc-accent);
  margin: calc(3 * var(--base-spacing)) 0 calc(1.5 * var(--base-spacing));
  padding-top: calc(2 * var(--base-spacing));
  border-top: 1px solid var(--lc-paper-deep);
}

.lore-article .lore-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: calc(2 * var(--base-spacing));
  margin: calc(2 * var(--base-spacing)) 0 calc(2.5 * var(--base-spacing));
}

.lore-article .lore-cardgrid--two {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lore-article .lore-cardgrid--three {
  grid-template-columns: repeat(3, 1fr);
}

.lore-article .lore-card-head {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--base-spacing));
  margin: 0 0 calc(0.5 * var(--base-spacing));
}

.lore-article .lore-card-head h3 { margin: 0; }

.lore-article .lore-card-icon {
  font-size: 1.25714rem;
  color: var(--lc-card-accent, var(--lc-sub-1));
}

@media (max-width: 720px) {
  .lore-article { padding: calc(2 * var(--base-spacing)) calc(2 * var(--base-spacing)); }
  .lore-article .lore-intro { grid-template-columns: 1fr; }
  .lore-article .lore-aside { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .lore-article .lore-cardgrid--three { grid-template-columns: 1fr; }
}

@media (max-width: 920px) and (min-width: 721px) {
  .lore-article .lore-cardgrid--three { grid-template-columns: repeat(2, 1fr); }
}