:root {
  --c-bg: #fdfdfc;
  --c-surface: #f8f8f7;
  --c-surface-alt: #f1f0ee;
  --c-border: #dcd8d0;
  --c-text: #282215;
  --c-text-secondary: #72664f;
  --c-text-muted: #72664f;
  --c-accent: #b88d3d;
  --c-accent-alt: #42b5bd;
  --c-on-accent: #0f172a;
  --c-on-surface: #282215;
  --c-on-bg: #282215;
  --c-danger: #d6371f;
  --c-success: #16a34a;
  --c-warn: #d97706;

  --font-body: Verdana, Geneva, sans-serif;
  --font-heading: Oswald, Impact, sans-serif;
  --font-mono: Courier New, monospace;
  --font-size-base: 12px;
  --font-weight-heading: 700;

  --card-radius: 0px;
  --button-radius: 0px;
  --card-border: 1px solid #333333;
  --card-shadow: none;
  --avatar-radius: 0;

  --pad-y: 8px;
  --pad-x: 14px;

  --content-max: 1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.55;
  font-size: var(--font-size-base);
}
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.p-pageWrapper { max-width: var(--content-max); margin: 0 auto; padding: 0 16px; }

/* ─── Header / Nav ─── */
.p-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: 12px 0; }
.p-header-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; max-width: var(--content-max); margin: 0 auto; padding: 0 16px; }
.p-header-logo strong { font-size: 22px; font-family: var(--font-heading); color: var(--c-accent); font-weight: var(--font-weight-heading); }
.p-header-logo-tagline { color: var(--c-text-muted); font-size: 13px; margin-left: 8px; }
.p-nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.p-nav-list a { font-weight: 500; color: var(--c-text); }
.p-header-search { margin-left: auto; }
.p-header-search input { padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--button-radius); background: var(--c-bg); color: var(--c-text); }
.p-header-account .button { display: inline-block; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--button-radius); background: var(--c-surface); color: var(--c-text); margin-left: 6px; }
.p-header-account .button--primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }

/* ─── Breadcrumbs ─── */
.p-breadcrumbs { list-style: none; padding: 8px 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--c-text-muted); }
.p-breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 8px; color: var(--c-border); }

/* ─── Body grid ─── */
.p-body-main { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 16px 0 32px; }
@media (max-width: 900px) { .p-body-main { grid-template-columns: 1fr; } }

/* ─── Title ─── */
.p-title { padding: var(--pad-y) var(--pad-x); background: var(--c-surface); border: var(--card-border); border-radius: var(--card-radius); }
.p-title-value { margin: 0; font-family: var(--font-heading); font-size: 24px; line-height: 1.3; font-weight: var(--font-weight-heading); color: var(--c-text); }

/* ─── Block / card ─── */
.block { background: var(--c-surface); border: var(--card-border); margin-top: 16px; border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); }
.block-header { padding: 10px 16px; background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); font-weight: 600; font-family: var(--font-heading); }
.block-body { padding: var(--pad-y) var(--pad-x); }

/* ─── Forum index (node-list) ─── */
.node-list { list-style: none; padding: 0; margin: 0; }
.node--forum { padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
.node--forum:last-child { border-bottom: 0; }
/* Three-column layout per forum row: icon | main (title+desc+stats) | latest. Without
   this, icon/main/stats stack vertically because <div class="node-body"> has no
   display rule of its own. */
.node-body { display: flex; align-items: flex-start; gap: 16px; }
.node-icon { flex: 0 0 32px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.node-iconHolder { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 30%, transparent); display: block; }
.node-main { flex: 1 1 auto; min-width: 0; }
.node-stats { flex: 0 0 280px; text-align: right; font-size: 12px; color: var(--c-text-muted); display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.node-stats-avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: block; }
.node-stats-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.node-extra { flex: 1 1 auto; min-width: 0; text-align: right; }
.node-extra a { color: var(--c-accent); }
.node-extra-row { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; }
.node-extra-user { color: var(--c-text); font-weight: 500; }
.node-title a { font-weight: 600; font-size: 16px; color: var(--c-accent); }
.node-description { color: var(--c-text-muted); font-size: 13px; margin-top: 4px; }
.node-meta { display: flex; gap: 16px; font-size: 12px; color: var(--c-text-muted); margin-top: 6px; }
/* dl/dt/dd inside node-meta — without inline display these break to separate
   lines and the "Threads / 4" label+value pair zigzags vertically. Same shape
   as .message-userExtras dl below. */
.node-meta dl, .node-statsMeta { display: inline-flex; gap: 4px; margin: 0; }
.node-meta dt { font-weight: 600; }
.node-meta dd { margin: 0; }
.pairs { display: inline-flex; gap: 4px; margin: 0; }
.pairs dt { font-weight: 600; }
.pairs dd { margin: 0; }
.pairs--justified { justify-content: space-between; min-width: 70px; }
@media (max-width: 720px) {
  .node-body { flex-direction: column; gap: 8px; }
  .node-stats { flex: 1 1 auto; text-align: left; }
}

/* ─── Thread listing ─── */
.structItem { display: grid; grid-template-columns: 1fr 100px 160px; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--c-border); align-items: center; }
.structItem-title a { font-weight: 600; color: var(--c-accent); }
.structItem-minor { color: var(--c-text-muted); font-size: 12px; margin-top: 4px; }
.structItem-parts { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; }
.structItem-parts li::after { content: "·"; margin-left: 8px; color: var(--c-border); }
.structItem-parts li:last-child::after { content: ""; }

/* ─── Post block ─── */
.message { background: var(--c-surface); border: var(--card-border); margin-top: 12px; border-radius: var(--card-radius); overflow: hidden; position: relative; }
/* OP gets dramatic visual prominence across all messageStyle variants:
   - 6px accent top stripe (visible regardless of cardStyle border treatment)
   - "ORIGINAL POST" corner label inside the box (overflow:hidden safe)
   - Tinted user-cell background
   - Larger body font + tighter line-height
   - Subtle accent shadow */
.message--op { border-color: var(--c-accent); border-top: 6px solid var(--c-accent) !important; margin-top: 22px; box-shadow: 0 2px 0 color-mix(in srgb, var(--c-accent) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--c-accent) 12%, transparent); }
.message--op .message-cell--user { background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-alt)); }
.message--op .message-body { font-size: 1.06em; line-height: 1.72; }
.message--op .message-cell--main { position: relative; }
.message--op .message-cell--main::before { content: "ORIGINAL POST · #1"; position: absolute; top: 8px; right: 12px; font-size: 9px; font-weight: 800; letter-spacing: 0.14em; color: var(--c-accent); padding: 3px 7px; background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface)); border-radius: 3px; z-index: 1; pointer-events: none; }
/* Replies de-emphasized so OP wins by contrast, not just absolute size */
.message:not(.message--op) { opacity: 0.97; }
.message:not(.message--op) .message-body { font-size: 0.97em; }
.message-inner { display: grid; grid-template-columns: 200px 1fr; }
@media (max-width: 720px) { .message-inner { grid-template-columns: 1fr; } }
.message-cell--user { background: var(--c-surface-alt); padding: 16px; border-right: 1px solid var(--c-border); min-width: 0; }
.message-cell--main { padding: var(--pad-y) var(--pad-x); min-width: 0; }
/* Wordweaver display names are 1–3 words. Narrow user-columns used to wrap
 * them one word per line because <a> only breaks at spaces. overflow-wrap
 * makes long single words break gracefully; line-height tightens the stack
 * so two-line names don't push the avatar block down. */
.message-name { line-height: 1.18; overflow-wrap: break-word; word-break: normal; }
.message-name a { font-weight: 600; font-size: 15px; color: var(--c-accent); overflow-wrap: break-word; }
.userTitle { color: var(--c-text-muted); font-size: 12px; margin: 2px 0 8px; font-weight: normal; overflow-wrap: break-word; }
.message-userExtras dl { display: flex; gap: 6px; font-size: 12px; color: var(--c-text-muted); margin: 2px 0; }
.message-userExtras dt { font-weight: 600; }
.message-userExtras dd { margin: 0; }
.avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--avatar-radius); }
.avatar img { display: block; width: 100%; height: 100%; border-radius: var(--avatar-radius); object-fit: cover; }
.avatar--m { width: 48px; height: 48px; font-weight: 700; font-size: 22px; }
.avatar--xxl { width: 96px; height: 96px; font-weight: 700; font-size: 40px; }
.avatar-initial { line-height: 1; }
.message-attribution { color: var(--c-text-muted); font-size: 12px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--c-border); display: flex; justify-content: space-between; }
.message-attribution-main, .message-attribution-opposite { list-style: none; padding: 0; margin: 0; }
.message-permalink time { color: var(--c-text-muted); }
.bbWrapper { line-height: 1.65; }
.bbWrapper p { margin: 0 0 1em; }
.bbWrapper table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 14px; }
.bbWrapper th, .bbWrapper td { border: 1px solid var(--c-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.bbWrapper th { background: var(--c-surface-alt); font-weight: 600; }
.bbWrapper a { color: var(--c-accent); }

/* ─── CTAs ─── */
.forum-reply-cta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.forum-cta-inline { display: inline-block; padding: 8px 14px; background: var(--c-success); color: #fff; border-radius: var(--button-radius); font-weight: 600; }
.forum-cta-inline:hover { filter: brightness(0.92); text-decoration: none; }
.forum-reply-cta-block { margin: 12px 0 0; }
.forum-reply-cta-button { display: inline-block; padding: 8px 14px; background: var(--c-accent); color: #fff; border-radius: var(--button-radius); font-weight: 600; text-decoration: none; font-size: 13px; }
.forum-reply-cta-button:hover { filter: brightness(0.92); text-decoration: none; }
.forum-reply-cta-bonus { font-weight: 400; opacity: 0.85; margin-left: 6px; }

.actionBar { display: flex; gap: 12px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 12px; color: var(--c-text-muted); justify-content: space-between; }
.actionBar-action { color: var(--c-text-muted); }

/* ─── Sidebar ─── */
.block--sidebar { background: var(--c-surface); }
.sidebar-operators { list-style: none; padding: 0; margin: 0; }
.sidebar-operator { padding: 10px; border-bottom: 1px solid var(--c-border); }
.sidebar-operator-link { display: flex; gap: 10px; align-items: center; }
.sidebar-operator-rank { font-weight: 700; color: var(--c-accent); width: 24px; }
.sidebar-operator-name { font-weight: 600; color: var(--c-text); }
.sidebar-operator-badge { display: block; font-size: 11px; color: var(--c-text-muted); }
.sidebar-operator-bonus { display: block; font-size: 12px; }
.sidebar-disclosure { font-size: 11px; color: var(--c-text-muted); margin: 8px 12px; }

.block--rg { background: var(--c-surface-alt); }
.rg-age { font-weight: 700; margin-top: 8px; color: var(--c-text); }

/* ─── Footer ─── */
.p-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 24px 0; margin-top: 32px; font-size: 13px; color: var(--c-text-muted); }
.p-footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 16px; }
.p-footer-rg { background: var(--c-surface-alt); padding: 12px 16px; border-radius: var(--card-radius); color: var(--c-text); margin-bottom: 12px; }
.p-footer-affiliate { padding: 8px 0; font-size: 12px; }
.p-footer-links { padding: 8px 0; }
.p-footer-links a { color: var(--c-text-muted); }
.p-footer-copy { padding: 8px 0; font-size: 12px; }

/* ─── Member profile ─── */
.memberHeader { display: flex; gap: 24px; padding: 24px; background: var(--c-surface); border: var(--card-border); border-radius: var(--card-radius); }
.memberHeader-stats { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 24px; flex-wrap: wrap; }
.memberHeader-stats dl { display: flex; gap: 6px; font-size: 13px; }
.memberHeader-stats dt { color: var(--c-text-muted); font-weight: normal; }
.memberHeader-stats dd { margin: 0; font-weight: 600; }
.memberRecentItems { list-style: none; padding: 0; margin: 0; }
.memberRecentItem { padding: 8px 0; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; }
.memberRecentItem-date { color: var(--c-text-muted); font-size: 12px; }

/* ─── About / author page ─── */
.about-page { display: grid; grid-template-columns: 200px 1fr; gap: 32px; padding: 32px; background: var(--c-surface); border: var(--card-border); border-radius: var(--card-radius); }
@media (max-width: 720px) { .about-page { grid-template-columns: 1fr; } }
.about-headshot img { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: var(--avatar-radius); object-fit: cover; }
.about-headshot-fallback { width: 100%; aspect-ratio: 1/1; border-radius: var(--avatar-radius); background: var(--c-accent); color: var(--c-on-accent); display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 700; font-family: var(--font-heading); }
.about-name { font-family: var(--font-heading); font-size: 32px; font-weight: var(--font-weight-heading); margin: 0 0 4px; color: var(--c-text); }
.about-role { color: var(--c-text-secondary); font-size: 16px; margin-bottom: 16px; }
.about-credentials { list-style: none; padding: 0; margin: 16px 0; }
.about-credentials li { padding: 6px 0; padding-left: 20px; position: relative; color: var(--c-text-secondary); font-size: 14px; }
.about-credentials li::before { content: "✓"; position: absolute; left: 0; color: var(--c-success); font-weight: 700; }
.about-bio { font-size: 16px; line-height: 1.7; }
.about-bio p { margin: 0 0 1em; }
.about-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.about-tag { display: inline-block; padding: 4px 10px; background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: 999px; font-size: 12px; color: var(--c-text-secondary); }

.tagItem { display: inline-block; padding: 2px 8px; background: var(--c-surface-alt); border-radius: 12px; font-size: 11px; margin-right: 4px; color: var(--c-text-secondary); }

/* spin-19723 variant overrides — header=stamp-frame nav=stencil sb=right density=airy row=rating-bar msg=card-elevated quote=speech-bubble card=double-line div=dotted */
.p-header { padding: 24px; background: var(--c-surface); }
.p-header .p-header-inner { border: 2px double var(--c-accent); padding: 18px 24px; position: relative; }
.p-header .p-header-inner::before, .p-header .p-header-inner::after { content: ""; position: absolute; left: 6px; right: 6px; height: 1px; background: var(--c-accent); opacity: 0.3; }
.p-header .p-header-inner::before { top: 4px; }
.p-header .p-header-inner::after { bottom: 4px; }
.p-header .p-header-logo strong { font-family: var(--font-heading, Georgia, serif); font-size: 30px; text-transform: uppercase; letter-spacing: 0.12em; text-align: center; display: block; }
.p-header .p-header-logo-tagline { display: block; text-align: center; font-style: italic; opacity: 0.7; }
.p-nav { padding: 12px 24px; background: color-mix(in srgb, var(--c-text) 6%, var(--c-surface)); border-bottom: 1px solid var(--c-border); }
.p-nav-list { gap: 24px; }
.p-nav-list a { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }
.p-nav-list a::before { content: "["; opacity: 0.5; margin-right: 4px; }
.p-nav-list a::after { content: "]"; opacity: 0.5; margin-left: 4px; }
.p-nav-list a.is-active { color: var(--c-accent); }

.block-body { padding: 24px 32px; line-height: 1.85; letter-spacing: 0.01em; }
.structItem { padding: 22px 26px; }
.message-cell { padding: 28px 32px; }
.block-header { padding: 18px 28px; }
.p-body-main { gap: 24px; padding: 24px 0 40px; }
.block { margin-bottom: 20px; }
/* row variant=rating-bar */

.structItem-titleInline { font-weight: 600; color: var(--c-text); }
.structItem-byInline, .structItem-statInline, .structItem-timeInline { font-size: 12px; color: var(--c-text-muted); }
.structItem--card { display: block; padding: 18px 22px; border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 88%, var(--c-text)); }
.structItem--card .structItem-cardTitle { font-size: 18px; font-weight: 700; color: var(--c-text); text-decoration: none; }
.structItem--card .structItem-cardMeta { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }
.structItem--card .structItem-cardBody { color: var(--c-text-muted); margin: 10px 0 12px; line-height: 1.5; }
.structItem--card .structItem-cardFoot { display: flex; gap: 16px; font-size: 12px; color: var(--c-text-muted); }
.structItem--card .structItem-cardStat { display: inline-flex; gap: 4px; }

.structItem--qa { display: grid; grid-template-columns: 80px 80px 80px 1fr; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 88%, var(--c-text)); }
.structItem--qa .qa-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 10px; border-radius: 4px; background: color-mix(in srgb, var(--c-surface) 96%, var(--c-text)); }
.structItem--qa .qa-stat strong { font-size: 18px; line-height: 1; color: var(--c-text); }
.structItem--qa .qa-stat span { font-size: 11px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.structItem--qa .qa-stat--score { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.structItem--qa .qa-stat--answers.qa-has-answers { background: color-mix(in srgb, var(--c-accent-alt) 16%, transparent); color: var(--c-accent-alt); }
.structItem--qa .qa-main .qa-title { display: block; font-weight: 600; color: var(--c-text); text-decoration: none; }
.structItem--qa .qa-main .qa-meta { font-size: 12px; color: var(--c-text-muted); margin-top: 4px; }

.structItem--chat { display: grid; grid-template-columns: 140px 1fr 80px; gap: 14px; align-items: center; padding: 8px 14px; border-bottom: 1px dashed color-mix(in srgb, var(--c-surface) 88%, var(--c-text)); font-size: 13px; }
.structItem--chat .chat-channel { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; color: var(--c-accent); text-decoration: none; }
.structItem--chat .chat-msg { color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.structItem--chat .chat-msg strong { color: var(--c-text); font-weight: 600; }
.structItem--chat .chat-time { font-size: 11px; color: var(--c-text-muted); text-align: right; }

.structItem--dense { display: grid; grid-template-columns: 1.6fr 0.8fr 0.6fr 0.6fr 0.6fr; gap: 12px; align-items: center; padding: 6px 12px; border-bottom: 1px solid color-mix(in srgb, var(--c-surface) 88%, var(--c-text)); font-size: 13px; }
.structItem--dense:nth-child(odd) { background: color-mix(in srgb, var(--c-surface) 96%, var(--c-text)); }
.structItem--dense a.structItem-titleInline { color: var(--c-text); text-decoration: none; }
.structItem--dense a.structItem-titleInline:hover { color: var(--c-accent); }

.structItem--preview .structItem-snippet { color: var(--c-text-muted); font-size: 13px; line-height: 1.5; margin: 6px 0 4px; padding-left: 0; }

/* Markup-passthrough decorations: visible even though the row markup
   stays three-col. These are turned on by body class via skin. */
.p-body--row-icon-first .structItem-cell--main::before { content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 12px; vertical-align: middle; border-radius: 6px; background: linear-gradient(135deg, var(--c-accent), var(--c-accent-alt)); }
.p-body--row-stat-badge .structItem-cell--meta dl { background: color-mix(in srgb, var(--c-accent) 9%, transparent); border-radius: 999px; padding: 2px 10px; display: inline-flex; gap: 6px; margin: 0 4px; }
.p-body--row-avatar-stack .structItem-cell--latest::before { content: ""; display: inline-block; width: 64px; height: 22px; margin-right: 8px; vertical-align: middle; background: radial-gradient(circle at 11px 11px, var(--c-accent) 9px, transparent 10px), radial-gradient(circle at 27px 11px, var(--c-accent-alt) 9px, transparent 10px), radial-gradient(circle at 43px 11px, var(--c-text-muted) 9px, transparent 10px); }
.p-body--row-rating-bar .structItem-cell--main .structItem-title::after { content: " ★ ★ ★ ★ ☆"; color: var(--c-accent-alt); font-size: 11px; margin-left: 6px; letter-spacing: 1px; }


.p-body--row-rating-bar .node-title a::after { content: " ★ ★ ★ ★ ☆"; color: var(--c-accent-alt); font-size: 11px; margin-left: 8px; letter-spacing: 1px; }
.p-body--row-rating-bar .node-meta::before { content: "Rated · "; opacity: 0.6; font-size: 11px; }
.p-body--msg-card-elevated .p-body-main { gap: 28px; }
.p-body--msg-card-elevated .block--messages .block-body { padding: 20px 4px; }
.p-body--msg-card-elevated .message { background: var(--c-surface); border: 0; border-radius: 14px; margin-top: 22px; padding: 0; box-shadow: 0 3px 6px color-mix(in srgb, var(--c-text) 10%, transparent), 0 10px 30px color-mix(in srgb, var(--c-text) 8%, transparent); overflow: hidden; transform: translateZ(0); }
.p-body--msg-card-elevated .message--op { box-shadow: 0 6px 18px color-mix(in srgb, var(--c-accent) 28%, transparent), 0 18px 48px color-mix(in srgb, var(--c-accent) 14%, transparent); border-top: 0 !important; }
.p-body--msg-card-elevated .message-inner { grid-template-columns: 200px 1fr; padding: 0; }
.p-body--msg-card-elevated .message-cell--user { background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent) 12%, var(--c-surface)) 0%, color-mix(in srgb, var(--c-accent) 4%, var(--c-surface)) 100%); padding: 24px 18px; border-right: 0; text-align: center; }
.p-body--msg-card-elevated .message-cell--user .message-avatar .avatar--m { width: 72px; height: 72px; margin: 0 auto 10px; box-shadow: 0 2px 6px color-mix(in srgb, var(--c-text) 15%, transparent); }
.p-body--msg-card-elevated .message-cell--main { padding: 28px 32px; }
.p-body--msg-card-elevated .message-body { font-size: 15px; line-height: 1.7; }
.p-body--quote-speech-bubble blockquote { background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)); border: 1px solid var(--c-border); border-radius: 12px; padding: 12px 16px; margin: 12px 0 12px 24px; position: relative; font-style: normal; }
.p-body--quote-speech-bubble blockquote::before { content: ""; position: absolute; left: -10px; top: 14px; width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent var(--c-border) transparent transparent; }
.p-body--quote-speech-bubble blockquote::after { content: ""; position: absolute; left: -8px; top: 15px; width: 0; height: 0; border-style: solid; border-width: 7px 9px 7px 0; border-color: transparent color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)) transparent transparent; }
.p-body--card-double-line .block, .p-body--card-double-line .message { background: var(--c-surface); border: 1px solid var(--c-text) !important; box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 4px var(--c-text); margin: 6px 4px; border-radius: 0 !important; }
.p-body--card-double-line .block + .block, .p-body--card-double-line .message + .message { margin-top: 16px; }
.p-body--card-double-line .block-header { border-bottom: 3px double var(--c-text); padding: 10px 14px; }
.p-body--div-dotted .structItem, .p-body--div-dotted .node--forum { border-bottom: 2px dotted color-mix(in srgb, var(--c-accent) 50%, var(--c-border)) !important; }
.p-body--div-dotted .block-header { border-bottom: 2px dotted color-mix(in srgb, var(--c-accent) 50%, var(--c-border)); }

@media (max-width: 768px) {
  .p-nav-list { flex-wrap: wrap; gap: 4px; }
  .p-body { display: block; }
  .p-body-main, .p-body-content { width: 100%; max-width: 100%; }
  .p-body-sidebar { width: 100%; margin-top: 24px; }
  .message-inner { display: block; }
  .message-cell--user { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--ink, #000) 10%, transparent); }
  .message-cell--main { width: 100%; padding: 16px; }
  .message-body { overflow-x: auto; }
  .message-body table { display: block; overflow-x: auto; max-width: 100%; }
  .structItem { display: block; }
  .structItem--card .structItem-cardFoot { flex-wrap: wrap; gap: 6px 14px; }
  .structItem--qa { display: block; padding: 12px 14px; }
  .structItem--qa .qa-stat { display: inline-flex; flex-direction: row; align-items: baseline; gap: 4px; padding: 2px 8px; margin: 0 6px 8px 0; vertical-align: middle; }
  .structItem--qa .qa-stat strong { font-size: 14px; }
  .structItem--qa .qa-stat span { font-size: 10px; }
  .structItem--qa .qa-main { display: block; margin-top: 6px; }
  .structItem--dense { display: block; padding: 8px 12px; }
  .structItem--chat { display: block; padding: 10px 14px; }
  .structItem--chat .chat-channel { display: block; margin-bottom: 4px; }
  .structItem--chat .chat-msg { display: block; white-space: normal; overflow: visible; text-overflow: clip; margin-bottom: 4px; }
  .structItem--chat .chat-time { display: block; text-align: left; }
}

/* ── Long-post layout: text wraps under the avatar column ────────────
   Originally a 2-col CSS grid that locked the post body to a narrow
   right column even when the avatar sidebar was mostly empty — left
   long OPs cramped into ~500px of horizontal space below the stats.
   Float the avatar block and let the body reclaim the gutter once
   past the stats height. Caps responsiveness via the existing 720px
   breakpoint (mobile already collapses to one column). */
.message-inner { display: block !important; padding: 0 !important; }
.message-cell--user {
  float: left;
  width: 200px;
  box-sizing: border-box;
  background: var(--c-surface-alt);
  padding: 16px;
  border-right: 1px solid var(--c-border);
  /* Gutter between the floated avatar column and the wrapping post body —
     matches the body's own right padding so the post sits centered between
     the column and the card edge. Without this the text butts right against
     the column border. */
  margin-right: var(--pad-x);
  min-height: 0;
}
.message-cell--main {
  display: block !important;
  padding: var(--pad-y) var(--pad-x);
  overflow: visible;        /* allow wrap under the avatar */
  min-width: 0;
}
.message-inner::after { content: ""; display: table; clear: both; }
@media (max-width: 720px) {
  .message-cell--user { float: none; width: auto; border-right: 0; border-bottom: 1px solid var(--c-border); }
}

/* OP message keeps its accent treatment but inherits the new float */
.message--op .message-cell--user {
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-alt));
}

/* ── leanbackplayer-style widgets + featured hero ── */

.top-posters .top-poster { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--c-border); font-size: 13px; }
.top-posters .top-poster:last-child { border-bottom: 0; }
.top-poster-rank { font-family: Oswald, sans-serif; font-weight: 700; color: var(--c-accent); text-align: center; }
.top-poster-count { font-size: 12px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.pairs--justified { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; margin: 0; font-size: 13px; border-bottom: 1px dotted var(--c-border); }
.pairs--justified:last-child { border-bottom: 0; }
.pairs--justified dt { color: var(--c-text-muted); margin: 0; }
.pairs--justified dd { margin: 0; font-weight: 600; }

/* ── featured hero (themed: row 1 casino-gold · row 2 sports-blue) ── */
.featured-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 24px; }
.featured-hero a {
  display: block;
  position: relative;
  padding: 26px 22px 22px;
  min-height: 140px;
  border-radius: var(--card-radius);
  background: var(--c-surface);
  border: var(--card-border);
  color: var(--c-text) !important;
  text-decoration: none !important;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.featured-hero a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
}
.featured-hero a.fh--casino { background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-border)); }
.featured-hero a.fh--casino::before { background: var(--c-accent); }
.featured-hero a.fh--casino .featured-hero-eyebrow { color: var(--c-accent); }
.featured-hero a.fh--casino:hover { border-color: var(--c-accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-accent) 18%, transparent); transform: translateY(-2px); }

.featured-hero a.fh--sports { background: color-mix(in srgb, var(--c-accent-alt) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-accent-alt) 35%, var(--c-border)); }
.featured-hero a.fh--sports::before { background: var(--c-accent-alt); }
.featured-hero a.fh--sports .featured-hero-eyebrow { color: var(--c-accent-alt); }
.featured-hero a.fh--sports:hover { border-color: var(--c-accent-alt); box-shadow: 0 8px 24px color-mix(in srgb, var(--c-accent-alt) 22%, transparent); transform: translateY(-2px); }

.featured-hero-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.featured-hero-title {
  display: block;
  font-family: Oswald, sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--c-text);
  margin-bottom: 10px;
}
.featured-hero-meta { font-size: 12px; color: var(--c-text-muted); }
@media (max-width: 900px) { .featured-hero { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .featured-hero { grid-template-columns: 1fr; } }

/* ── 2026-05-13 mobile UX pass ────────────────────────────────────
   Fixes from QA audit:
   1. Tap targets — header nav links, search button, inline usernames
      were 13–22px tall (below WCAG 44/48px minimum). Bump padding +
      hit area while keeping the existing visual weight.
   2. Money pages (/forums/crypto-casino-central.1/ and
      /forums/sports-betting-central.10/) had cramped featured cards,
      tight node-list rows, and operator-ranking cards that wrapped
      awkwardly on 360px viewports. Loosen layout, enlarge tap zones,
      tighten typographic hierarchy below 720px.
   3. Help pages — new /help/* routes need readable body width on
      mobile (no sidebar collapse weirdness). */

/* 1) Tap-target hit areas */
@media (max-width: 768px) {
  .p-nav-list { gap: 0; }
  .p-nav-list a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }
  .p-header-search { width: 100%; margin-left: 0; }
  .p-header-search input {
    flex: 1 1 auto;
    min-height: 44px;
    font-size: 16px; /* prevents iOS Safari zoom-on-focus */
  }
  .p-header-search button {
    min-width: 48px;
    min-height: 48px;
    font-size: 20px;
    line-height: 1;
  }
  .p-header-account .button {
    min-height: 44px;
    line-height: 44px;
    padding: 0 14px;
    margin-left: 8px;
  }
  .p-header-inner { gap: 12px; }
  .node-stats-avatar { width: 44px; height: 44px; flex: 0 0 44px; }
  .top-poster a, .memberRecentItem a { display: inline-block; padding: 4px 0; min-height: 32px; line-height: 1.4; }
}

/* 2) Money-page layout — looser cards, larger touch zones, better hierarchy */
@media (max-width: 720px) {
  .featured-hero { gap: 10px; margin: 12px 0 18px; }
  .featured-hero a { padding: 18px 16px 16px; min-height: 0; }

  .sidebar-operator { padding: 14px 10px; min-height: 56px; }
  .sidebar-operator-link { align-items: center; gap: 14px; }
  .sidebar-operator-rank { font-size: 18px; width: 28px; flex: 0 0 28px; }
  .sidebar-operator-name { font-size: 15px; }

  /* In-thread / in-forum ranking cards (the "Top 10" editorial layer
     on the two money pages). They're built with .node--forum +
     accent border classes; bump inner padding so the row is
     comfortably tappable + the column structure stays readable. */
  .node--forum { padding: 16px; }
  .node-body { gap: 12px; }
  .node-title a { font-size: 17px; line-height: 1.35; }
  .node-description { font-size: 14px; line-height: 1.5; margin-top: 6px; }
  .node-meta { font-size: 13px; gap: 12px; }
  .node-stats { font-size: 13px; gap: 12px; padding-top: 8px; border-top: 1px dotted var(--c-border); }

  /* Comparison tables inside money-page editorial — let them scroll
     horizontally on narrow screens instead of overflowing the page. */
  .message-body table, .help-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    font-size: 14px;
  }

  /* Editorial intro cards on money pages */
  .block-body { padding: 14px 16px; }
  .block-header h2, .block-header h3 { font-size: 16px; line-height: 1.35; }
  .p-title-value { font-size: 22px; line-height: 1.25; }
}

/* 3) Help-page readability */
.help-page { padding: 18px 20px; line-height: 1.6; }
.help-page h2 { font-size: 17px; margin: 1.4em 0 0.4em; color: var(--c-accent); }
.help-page p { margin: 0 0 1em; }
.help-page a { color: var(--c-accent); }
@media (max-width: 720px) {
  .help-page { padding: 14px 16px; font-size: 15px; }
  .help-page h2 { font-size: 16px; }
}

/* Footer link list: gives each footer link a real tap zone on mobile */
@media (max-width: 768px) {
  .p-footer-links { line-height: 2; }
  .p-footer-links a { display: inline-block; padding: 4px 6px; min-height: 32px; }
}