/* GTA6 Board owns only the board context and conversation surface.
   The active Portal theme owns the page, header, drawer, typography, theme and footer. */

.board-page {
  --board-conversation-base: var(--color-night);
  --board-accent: #9aa7b3;
  --board-primary: #536b7b;
  --board-primary-hover: #607b8d;
  --board-positive: #78958d;
  --board-negative: #ad7e84;
  --board-danger: #944e54;
  --board-danger-hover: #a85b61;
  --board-screen: linear-gradient(135deg, rgba(7, 21, 38, 0.99), rgba(13, 47, 71, 0.97));
  --board-scanlines: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
  --board-screen-border: rgba(154, 167, 179, 0.34);
  --board-screen-text: rgba(244, 248, 251, 0.94);
  --board-screen-muted: rgba(190, 205, 216, 0.72);
  --board-screen-field: rgba(3, 14, 25, 0.72);
}
html[data-theme="light"] .board-page {
  --board-conversation-base: var(--color-paper);
  --board-accent: #536371;
  --board-primary: #4d6575;
  --board-primary-hover: #405867;
  --board-positive: #52736b;
  --board-negative: #8f5d64;
  --board-danger: #984c53;
  --board-danger-hover: #873f46;
  --board-screen: linear-gradient(135deg, rgba(226, 241, 244, 0.99), rgba(203, 226, 232, 0.97));
  --board-scanlines: repeating-linear-gradient(180deg, rgba(14, 63, 72, 0.025) 0 1px, transparent 1px 5px);
  --board-screen-border: rgba(83, 99, 113, 0.34);
  --board-screen-text: rgba(16, 32, 47, 0.94);
  --board-screen-muted: rgba(45, 67, 82, 0.72);
  --board-screen-field: rgba(255, 255, 255, 0.68);
}

.board-main {
  flex: 1;
  width: 100%;
  min-height: 60vh;
  padding: 1rem 0.75rem 3rem;
  color: var(--text-strong);
}

.board-frame {
  width: min(100%, 52rem);
  margin: 0 auto;
}

.board-main button,
.board-main input,
.board-main textarea { font: inherit; }

.board-main button { -webkit-tap-highlight-color: transparent; }
.board-main a { color: inherit; }
.board-main :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

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

.board-context {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem 1rem;
  border-bottom: 1px solid var(--border-hair);
}

.board-context h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.01em;
}

.board-kicker {
  margin: 0 0 0.2rem;
  color: var(--board-accent);
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.compose-button,
.primary-button {
  min-height: max(2.75rem, 44px);
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #fff;
  background: var(--board-primary);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.7rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.compose-button:hover,
.primary-button:hover { background: var(--board-primary-hover); transform: translateY(-1px); }
.compose-button:active,
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: 0.58; cursor: wait; }

.board-back {
  min-height: max(2.75rem, 44px);
  display: inline-flex;
  align-items: center;
  color: var(--board-accent);
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
}

.topic-index,
.thread-shell,
.not-found { width: 100%; }
.topic-list,
.reply-list { margin: 0; padding: 0; list-style: none; }
.topic-list { display: grid; gap: 0.7rem; padding-top: 0.85rem; }
.topic-list-item { position: relative; min-width: 0; }

.topic-item {
  min-height: 6rem;
  padding: 0.95rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "meta";
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.topic-item:hover {
  transform: translateY(-0.18rem);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}
.topic-item--with-image {
  grid-template-columns: minmax(0, 1fr) 5.5rem;
  grid-template-areas: "copy image" "meta image";
  column-gap: 0.85rem;
}
.topic-copy { grid-area: copy; min-width: 0; }
.topic-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 850;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.topic-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 700;
}
.topic-count { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.topic-count b { color: var(--board-accent); }
.comment-mark {
  width: 0.75rem;
  height: 0.75rem;
  display: inline-block;
  background: currentColor;
  clip-path: polygon(8% 8%, 92% 8%, 92% 72%, 50% 72%, 25% 94%, 25% 72%, 8% 72%);
}
.comment-mark--empty { opacity: 0.35; }
.topic-image {
  grid-area: image;
  align-self: stretch;
  min-height: 4.2rem;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 0.7rem;
}
.topic-thumb { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

.thread-shell { position: relative; display: grid; gap: 0.75rem; }
.thread-shell > .board-back { width: max-content; margin-left: 0.25rem; }
.thread-head {
  padding: 0 0.25rem 1.1rem;
  border-bottom: 1px solid var(--border-hair);
}
.thread-head h1 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.thread-actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 1rem; }
.thread-count { margin: 0; color: var(--text-muted); font-size: 0.75rem; font-weight: 750; }

.pane {
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.conversation {
  min-width: 0;
  display: grid;
  background: var(--surface-card), var(--board-conversation-base);
}
.reply { min-width: 0; position: relative; }
.reply-list { min-width: 0; display: grid; }
.reply-entry { padding: 0.75rem 1rem 1rem; }
.reply-entry--moderatable { position: relative; }
.reply-entry--moderatable > .reply-head { padding-right: calc(max(2.75rem, 44px) + 0.5rem); }
.conversation .reply-entry { border-top: 1px solid var(--border-hair); }
.conversation > .reply-origin,
.conversation > .board-paper__sheet > .reply-origin { position: relative; padding: 1.15rem 1rem 1.3rem; border-top: 0; }

.reply-origin > p { margin: 0.4rem 0 0; font-size: 1.02rem; line-height: 1.8; }
.reply--landed > .reply-entry { background: color-mix(in srgb, var(--board-accent) 8%, transparent); box-shadow: inset 0.18rem 0 var(--board-accent); }
.reply-head { min-height: 2.2rem; display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 0.4rem 0.75rem; }
.reply-head-primary { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.reply-head-side { display: flex; align-items: center; white-space: nowrap; }
.reply-no,
.reply-quote-no { color: var(--board-accent); font-family: var(--font-num); font-weight: 900; font-variant-numeric: tabular-nums; }
.display-name { color: var(--text-strong); font-size: 0.78rem; font-weight: 850; }
.reply-head time,
.reply-quote-head time,
.poster-id { color: var(--text-muted); font-family: var(--font-en); font-size: 0.68rem; font-weight: 700; }
.poster-id { white-space: nowrap; }
.reply-head-side > .report-control { flex: 0 0 auto; }
.reply-head-side > .report-control > summary { min-width: max(2.75rem, 44px); }
.reply-entry > p { margin: 0; font-size: 0.95rem; line-height: 1.75; overflow-wrap: anywhere; user-select: text; }
.reply-media { margin: 0.8rem 0 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.reply-media img { width: 100%; height: auto; display: block; }
.reply-hidden-message { color: var(--text-muted); font-style: italic; }
.reported-content { min-height: max(3.25rem, 52px); margin-top: 0.35rem; padding: 0.75rem 0.85rem; display: flex; align-items: center; color: #c7cbd2; background: #090b0f; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 0.76rem; font-weight: 750; }

.reply-foot {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: max-content 4.75rem minmax(0, 1fr);
  align-items: start;
  column-gap: 0.15rem;
}
.reply-foot > .reply-composer { grid-column: 1; }
.reply-foot > .reply-thread { grid-column: 2; }
.reply-foot > .reaction-bar { grid-column: 3; justify-self: end; }
.reply-foot > .reply-composer[open],
.reply-foot > .reply-thread[open],
.reply-foot > .reaction-bar--error { grid-column: 1 / -1; width: 100%; }
.reply-foot > details[open] { display: grid; grid-template-columns: 1fr; }
.reply-foot > details[open] > summary { justify-self: start; }
.report-control > summary {
  min-width: max(2.75rem, 44px);
  min-height: max(2.75rem, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  list-style: none;
  cursor: pointer;
}
.report-control > summary::-webkit-details-marker { display: none; }
.report-mark {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.report-form { margin: 0; padding: 0; }
.report-form fieldset { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; border: 0; }
.report-form legend { width: 100%; margin-bottom: 0.45rem; color: var(--text-muted); font-size: 0.7rem; font-weight: 750; }
.report-form label { min-height: max(2.75rem, 44px); display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; }
.report-form input[type="radio"] { width: 1rem; min-height: 1rem; margin: 0; }
.report-form button { min-height: max(2.75rem, 44px); margin-top: 0.55rem; padding: 0 0.8rem; color: var(--text-strong); background: transparent; border: 1px solid var(--border-strong); border-radius: 0.6rem; font-weight: 800; cursor: pointer; }
.report-result { margin: 0.55rem 0 0; color: var(--text-muted); font-size: 0.74rem; }
.report-result:empty { display: none; }
.reply-button,
.reply-thread > summary {
  min-height: max(2.75rem, 44px);
  padding-inline: 0.45rem;
  width: max-content;
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.reply-button { gap: 0.32rem; color: var(--board-accent); }
.reply-mark {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reply-thread > summary { color: var(--text-muted); }
.reply-button::-webkit-details-marker,
.reply-thread > summary::-webkit-details-marker { display: none; }
.reply-thread > summary::after { content: "▾"; margin-left: 0.3rem; }
.reply-thread[open] > summary::after { content: "▴"; }
.reply-anchor { color: var(--board-accent); font-weight: 850; text-decoration: none; }
a.reply-anchor:hover { text-decoration: underline; text-underline-offset: 0.2rem; }
.reply-quotes {
  margin: 0.1rem 0 0.3rem;
  padding: 0.2rem 0 0.2rem 0.85rem;
  display: grid;
  gap: 0.75rem;
  list-style: none;
  border-left: 1px solid var(--border-strong);
}
.reply-quote { min-width: 0; display: grid; gap: 0.25rem; }
.reply-quote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.reply-quote p { margin: 0; font-size: 0.88rem; line-height: 1.7; overflow-wrap: anywhere; user-select: text; }

.reaction-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; }
.reaction { margin: 0; }
.reaction-button {
  min-width: max(2.75rem, 44px);
  min-height: max(2.75rem, 44px);
  padding: 0 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  font-size: 0.7rem;
  font-weight: 750;
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, transform 100ms ease;
}
.reaction-button:active { transform: translateY(1px) scale(0.92); }
.reaction-button--up[aria-pressed="true"] {
  color: var(--board-positive);
  background: color-mix(in srgb, var(--board-positive) 16%, transparent);
}
.reaction-button--down[aria-pressed="true"] {
  color: var(--board-negative);
  background: color-mix(in srgb, var(--board-negative) 16%, transparent);
}
.reaction-mark { width: 0.82rem; height: 0.82rem; display: block; fill: currentColor; }
.reaction-button--down .reaction-mark { rotate: 180deg; }
.reaction-note,
.form-result,
.moderation-notice {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.8rem;
  color: var(--reaction-dislike);
  background: color-mix(in srgb, var(--reaction-dislike) 9%, var(--surface-card));
  border-left: 0.2rem solid var(--reaction-dislike);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.5;
}
.reaction-note:empty,
.form-result:empty { display: none; }

.reply-composer--root { padding: 1.1rem 1rem 1.25rem; border-top: 1px solid var(--border-hair); }
.reply-form { margin-top: 0.4rem; padding: 0.9rem; background: var(--surface-panel); border: 1px solid var(--border-hair); border-radius: var(--radius-md); }
.reply-composer--root .reply-form { margin: 0; padding: 0; background: transparent; border: 0; }
.form-target { margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 850; }
.field-label { display: block; }
.field-label > span:not(.visually-hidden) { margin-bottom: 0.35rem; display: flex; gap: 0.4rem; color: var(--text-strong); font-size: 0.75rem; font-weight: 850; }
.field-label > span small { color: var(--reaction-dislike); }
.board-main input,
.board-main textarea,
.compose-dialog input,
.compose-dialog textarea,
.reply-dialog input,
.reply-dialog textarea {
  width: 100%;
  color: var(--text-strong);
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  outline: 0;
}
.board-main input,
.compose-dialog input,
.reply-dialog input { min-height: max(2.75rem, 44px); padding: 0.6rem 0.7rem; }
.board-main textarea,
.compose-dialog textarea,
.reply-dialog textarea { min-height: 7rem; padding: 0.65rem 0.7rem; line-height: 1.65; resize: vertical; }
.board-main input::placeholder,
.board-main textarea::placeholder,
.compose-dialog input::placeholder,
.compose-dialog textarea::placeholder,
.reply-dialog input::placeholder,
.reply-dialog textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
.reply-submit { margin-top: 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.reply-submit--modal { justify-content: flex-end; }
.reply-cancel,
.close-composer,
.confirm-back {
  min-height: max(2.75rem, 44px);
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  color: var(--board-accent);
  background: transparent;
  border: 0;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  cursor: pointer;
}

.not-found { margin-top: 0.85rem; padding: 2rem 1.25rem; background: var(--surface-card); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.not-found p { margin: 0 0 0.4rem; color: var(--reaction-dislike); font-weight: 900; }
.not-found h1 { margin: 0; font-family: var(--font-display); font-size: 1.8rem; }
.not-found a { min-height: max(2.75rem, 44px); margin-top: 1rem; display: inline-flex; align-items: center; color: var(--text-link); font-weight: 850; }

.compose-dialog,
.confirm-dialog,
.reply-dialog,
.report-dialog,
.moderation-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  inset: 0;
  overflow: auto;
  color: var(--text-strong);
  background: var(--surface-page);
  border: 0;
}
.compose-dialog::backdrop,
.confirm-dialog::backdrop,
.reply-dialog::backdrop,
.report-dialog::backdrop,
.moderation-dialog::backdrop { background: rgba(4, 5, 7, 0.86); }
.compose-form,
.confirm-shell {
  width: min(calc(100% - 1.5rem), 48rem);
  margin: max(1rem, env(safe-area-inset-top)) auto max(1rem, env(safe-area-inset-bottom));
  padding: 1.1rem;
  display: grid;
  gap: 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}
.composer-head,
.confirm-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-hair); }
.composer-head h2,
.confirm-head h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.confirm-head p,
.discard-note { margin: 0; color: var(--text-muted); font-size: 0.72rem; }
.close-composer-wrap { display: flex; align-items: center; gap: 0.6rem; }
.close-composer.is-discard { color: #fff; background: var(--board-danger); border-radius: 0.6rem; text-decoration: none; }
.field-label--body textarea { min-height: 13rem; }
.image-picker { min-height: 5rem; padding: 0.75rem; position: relative; display: grid; align-content: center; gap: 0.3rem; background: var(--surface-input); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); cursor: pointer; }
.image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-picker-action { display: grid; gap: 0.2rem; color: var(--board-accent); font-weight: 900; }
.image-picker-action small,
.image-picker-name { color: var(--text-muted); font-size: 0.7rem; font-weight: 600; }
.image-picker.has-error .image-picker-name { color: var(--reaction-dislike); font-weight: 850; }
.composer-submit { display: flex; justify-content: flex-end; }
.confirm-shell { min-height: calc(100dvh - 2rem); align-content: center; background: transparent; border: 0; box-shadow: none; }
.confirm-preview { display: grid; }
.confirm-paper { display: grid; background: var(--surface-card); border: 1px solid var(--border-hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.confirm-subject { margin: 0; padding: 1.15rem 1rem 0.8rem; font-family: var(--font-display); font-size: 1.5rem; }
.confirm-body { padding: 1rem; }
.confirm-subject + .confirm-body { padding-top: 0; }
.confirm-body p { margin: 0; line-height: 1.8; white-space: pre-wrap; user-select: text; }
.confirm-quote { margin: 1rem 1rem 0; padding-left: 0.8rem; border-left: 0.14rem solid var(--board-accent); }
.confirm-quote p { margin: 0.25rem 0 0; color: var(--text-muted); line-height: 1.7; }
.confirm-preview-image { margin: 1rem 0 0; overflow: hidden; border-radius: var(--radius-md); }
.confirm-preview-image img { width: 100%; max-height: 24rem; display: block; object-fit: contain; }
.confirm-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.composer-open,
.confirm-open,
.reply-open,
.report-open,
.moderation-open { overflow: hidden; }
[aria-busy] .primary-button { opacity: 0.65; transform: translateY(1px); }
.moderation-form { margin: 0; }
.moderation-form--topic,
.moderation-form--origin,
.moderation-form--reply { position: absolute; z-index: 3; top: 0.5rem; right: 0.5rem; }
.thread-shell > .moderation-form--topic { top: 1.35rem; right: 0; }
.topic-hide-button {
  width: max(2.75rem, 44px);
  height: max(2.75rem, 44px);
  padding: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--board-danger);
  border: 1px solid color-mix(in srgb, var(--board-danger) 72%, #000);
  border-radius: 0.4rem;
  box-shadow: 0 0.35rem 0.8rem rgba(7, 21, 38, 0.24);
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.topic-hide-button:hover { background: var(--board-danger-hover); }
.topic-hide-button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.reply-dialog,
.report-dialog,
.moderation-dialog { display: grid; place-items: center; }
.reply-dialog:not([open]),
.report-dialog:not([open]),
.moderation-dialog:not([open]) { display: none; }
.reply-sheet,
.report-sheet,
.moderation-confirm {
  width: min(calc(100% - 1.5rem), 28rem);
  padding: 1.25rem;
  display: grid;
  gap: 0.85rem;
  background: var(--surface-card), var(--board-conversation-base);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}
.reply-sheet { width: min(calc(100% - 1.5rem), 32rem); }
.reply-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.reply-dialog-head h2,
.report-sheet h2,
.moderation-confirm h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.reply-context { padding: 0.8rem 0 0.8rem 0.85rem; display: grid; gap: 0.35rem; border-left: 0.14rem solid var(--board-accent); }
.reply-context-head { color: var(--board-accent); font-size: 0.75rem; font-weight: 850; }
.reply-context > p { max-height: 7rem; margin: 0; overflow: auto; color: var(--text-muted); font-size: 0.84rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply-sheet .reply-form { margin: 0; padding: 0; background: transparent; border: 0; }
.report-sheet > p,
.moderation-confirm > p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.report-sheet > .confirm-back { justify-self: start; }
.moderation-confirm {
  width: min(calc(100% - 1.5rem), 28rem);
  padding: 1.25rem;
  display: grid;
  gap: 0.85rem;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}
.moderation-confirm h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; }
.moderation-confirm p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.moderation-confirm-button {
  min-height: max(2.75rem, 44px);
  padding: 0 1rem;
  color: #fff;
  background: var(--board-danger);
  border: 0;
  border-radius: 0.65rem;
  font-weight: 900;
  cursor: pointer;
}

/* Portalトップの受信端末が、そのまま人の会話ログへ広がった面。 */
.board-frame,
.compose-dialog,
.confirm-dialog,
.reply-dialog,
.report-dialog,
.moderation-dialog {
  font-family: "M PLUS 1 Code", var(--font-mono);
  font-feature-settings: normal;
}
.board-context h1,
.thread-head h1,
.composer-head h2,
.confirm-head h2,
.reply-dialog-head h2,
.report-sheet h2,
.moderation-confirm h2,
.confirm-subject {
  font-family: "M PLUS 1 Code", var(--font-mono);
  font-weight: 600;
  letter-spacing: 0;
}
.topic-item,
.conversation,
.compose-form,
.confirm-paper,
.reply-sheet,
.report-sheet,
.moderation-confirm {
  color: var(--board-screen-text);
  background: var(--board-scanlines), var(--board-screen);
  border-color: var(--board-screen-border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0.75rem 1.75rem rgba(3, 10, 18, 0.22);
}
.topic-item:hover {
  background: var(--board-scanlines), var(--board-screen);
  border-color: var(--board-accent);
}
.conversation .reply-entry {
  border-top-color: color-mix(in srgb, var(--board-accent) 18%, transparent);
}
.reply-entry > p,
.reply-quote p,
.confirm-body p,
.reply-context > p {
  color: var(--board-screen-text);
  font-family: "M PLUS 1 Code", var(--font-mono);
  font-weight: 400;
}
.topic-meta,
.thread-count,
.reply-head time,
.reply-quote-head time,
.poster-id,
.reply-thread > summary,
.reaction-button:not([aria-pressed="true"]),
.report-control > summary,
.form-target,
.reply-context > p,
.confirm-quote p,
.report-sheet > p,
.moderation-confirm > p {
  color: var(--board-screen-muted);
}
.display-name,
.topic-title,
.field-label > span:not(.visually-hidden) {
  color: var(--board-screen-text);
}
.reply-no,
.reply-quote-no,
.reply-button,
.reply-anchor,
.reply-context-head {
  color: var(--board-accent);
}
.board-main input,
.board-main textarea,
.compose-dialog input,
.compose-dialog textarea,
.reply-dialog input,
.reply-dialog textarea {
  color: var(--board-screen-text);
  background: var(--board-screen-field);
  border-color: var(--board-screen-border);
  font-family: "M PLUS 1 Code", var(--font-mono);
  caret-color: var(--board-accent);
}
.board-main input::placeholder,
.board-main textarea::placeholder,
.compose-dialog input::placeholder,
.compose-dialog textarea::placeholder,
.reply-dialog input::placeholder,
.reply-dialog textarea::placeholder {
  color: var(--board-screen-muted);
}
.reply-form,
.reply-composer--root .reply-form {
  color: var(--board-screen-text);
}
.reply-quotes {
  border-left-color: color-mix(in srgb, var(--board-accent) 42%, transparent);
}
.reply-context,
.confirm-quote {
  border-left-color: var(--board-accent);
}

@media (prefers-reduced-motion: reduce) {
  .board-main *,
  .compose-dialog *,
  .confirm-dialog *,
  .reply-dialog *,
  .report-dialog *,
  .moderation-dialog * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

@media (min-width: 768px) {
  .board-main { padding: 1.5rem max(1.5rem, calc((100vw - var(--max-page)) / 2 + 1rem)) 4rem; }
  .board-context { padding-block: 1rem 1.25rem; }
  .board-context h1 { font-size: 2rem; }
  .topic-list { gap: 0.9rem; padding-top: 1.1rem; }
  .topic-item { min-height: 7rem; padding: 1.1rem 1.2rem; }
  .topic-item--with-image { grid-template-columns: minmax(0, 1fr) 8rem; }
  .topic-title { font-size: 1.15rem; }
  .thread-head h1 { font-size: 2.1rem; }
  .reply-entry { padding-inline: 1.25rem; }
  .conversation > .reply-origin,
  .conversation > .board-paper__sheet > .reply-origin { padding: 1.4rem 1.25rem 1.55rem; }
  .compose-form { padding: 1.4rem; }
}

/* ── コットン紙 ────────────────────────────────────────────────
   映像ではなく、人の言葉が残り、書き足される媒体。
   一覧は独立した紙片、会話は一枚の長い紙。質感は全面で共有する一枚の素材から得る。 */
.board-page {
  --paper: #131b23;
  --paper-raised: #18222c;
  --paper-ink: rgba(244, 241, 232, 0.94);
  --paper-muted: rgba(220, 215, 202, 0.62);
  --paper-rule: rgba(244, 241, 232, 0.11);
  --paper-field: rgba(5, 10, 15, 0.24);
  --paper-shadow: 0 0.7rem 1.8rem rgba(0, 0, 0, 0.24);
  --paper-texture: url("../assets/cotton-paper.webp");
}
html[data-theme="light"] .board-page {
  --paper: #eee7d9;
  --paper-raised: #f4ede0;
  --paper-ink: rgba(24, 31, 39, 0.92);
  --paper-muted: rgba(42, 51, 60, 0.7);
  --paper-rule: rgba(24, 31, 39, 0.12);
  --paper-field: rgba(255, 255, 255, 0.26);
  --paper-shadow: 0 0.65rem 1.6rem rgba(31, 27, 21, 0.12);
}

.board-frame,
.compose-dialog,
.confirm-dialog,
.reply-dialog,
.report-dialog,
.moderation-dialog {
  font-family: "M PLUS 1 Code", var(--font-mono);
  font-feature-settings: normal;
}
.board-context { padding-bottom: 0.65rem; border-bottom: 0; }
.board-context h1,
.thread-head h1,
.composer-head h2,
.confirm-head h2,
.reply-dialog-head h2,
.report-sheet h2,
.moderation-confirm h2,
.confirm-subject {
  font-family: "M PLUS 1 Code", var(--font-mono);
  font-weight: 600;
  letter-spacing: 0;
}
.board-context h1 { font-size: 1.15rem; }
.board-kicker { margin-bottom: 0.1rem; color: var(--text-muted); font-size: 0.6rem; letter-spacing: 0.24em; }
.thread-head { padding-bottom: 0.6rem; border-bottom: 0; }
.thread-head h1 { font-size: 1.5rem; font-weight: 600; }
.thread-count, .board-back { font-weight: 500; }

/* 一覧: 一件ずつ手に取れる独立した投稿紙 */
.topic-index .topic-list { gap: 0.8rem; padding-top: 0.5rem; }
.topic-index .topic-item {
  min-height: 6rem;
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  border: 1px solid var(--paper-rule);
  border-radius: 0.35rem;
  box-shadow: var(--paper-shadow);
  transform: none;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.topic-index .topic-item:hover,
.topic-index .topic-item:focus-visible {
  color: var(--paper-ink);
  background-color: var(--paper-raised);
  background-image: var(--paper-texture);
  border-color: color-mix(in srgb, var(--paper-ink) 22%, transparent);
  box-shadow: 0 0.9rem 2rem rgba(0, 0, 0, 0.2);
  transform: translateY(-0.12rem);
}
.topic-index .topic-title { color: var(--paper-ink); font-weight: 500; }
.topic-index .topic-meta { color: var(--paper-muted); font-weight: 500; }
.topic-index .topic-count b { color: var(--paper-ink); font-weight: 600; }
.topic-index .topic-image { border-radius: 0.2rem; filter: saturate(0.88) contrast(0.96); }

/* 詳細: 返信が追記されていく一枚の長い紙 */
.conversation.board-paper {
  display: block;
  color: var(--paper-ink);
  background: var(--paper);
  border: 1px solid var(--paper-rule);
  border-radius: 0.4rem;
  box-shadow: var(--paper-shadow);
}
.board-paper__sheet {
  min-width: 0;
  overflow: hidden;
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  border-radius: inherit;
}
.board-paper .reply-entry,
.board-paper .reply-composer--root { background: transparent; }
.board-paper .reply-entry,
.board-paper .reply-composer--root { border-top-color: var(--paper-rule); }
.board-paper .reply--landed > .reply-entry { background: color-mix(in srgb, var(--paper-ink) 4%, transparent); box-shadow: inset 0.16rem 0 var(--paper-muted); }
.board-paper .reply-entry > p,
.board-paper .reply-quote p { color: var(--paper-ink); font-weight: 400; }
.board-paper .display-name,
.board-paper .field-label > span:not(.visually-hidden) { color: var(--paper-ink); font-weight: 600; }
.board-paper .reply-no,
.board-paper .reply-quote-no,
.board-paper .reply-button,
.board-paper .reply-anchor,
.board-paper .reply-context-head { color: var(--paper-muted); font-weight: 600; }
.board-paper .reply-head time,
.board-paper .reply-quote-head time,
.board-paper .poster-id,
.board-paper .reply-thread > summary,
.board-paper .reaction-button:not([aria-pressed="true"]),
.board-paper .report-control > summary,
.board-paper .form-target { color: var(--paper-muted); font-weight: 500; }
.board-paper .reply-quotes { border-left-color: var(--paper-rule); }
.board-paper input,
.board-paper textarea {
  color: var(--paper-ink);
  background: var(--paper-field);
  border-color: var(--paper-rule);
  caret-color: var(--paper-ink);
}
.board-paper input::placeholder,
.board-paper textarea::placeholder { color: var(--paper-muted); }
.board-paper .reply-form { color: var(--paper-ink); }
.board-paper .reply-cancel { color: var(--paper-muted); font-weight: 500; text-decoration: none; }
.board-paper .reaction-button--up[aria-pressed="true"] { color: var(--board-positive); background: color-mix(in srgb, var(--board-positive) 10%, transparent); }
.board-paper .reaction-button--down[aria-pressed="true"] { color: var(--board-negative); background: color-mix(in srgb, var(--board-negative) 10%, transparent); }

/* 入力・確認も同じ紙の文法。操作は材質を真似ず、意味が読める静かなキー */
.compose-form,
.confirm-paper,
.reply-sheet,
.report-sheet,
.moderation-confirm {
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  border-color: var(--paper-rule);
  border-radius: 0.4rem;
  box-shadow: var(--paper-shadow);
}
.compose-dialog input,
.compose-dialog textarea,
.reply-dialog input,
.reply-dialog textarea {
  color: var(--paper-ink);
  background: var(--paper-field);
  border-color: var(--paper-rule);
  caret-color: var(--paper-ink);
}
.compose-dialog input::placeholder,
.compose-dialog textarea::placeholder,
.reply-dialog input::placeholder,
.reply-dialog textarea::placeholder { color: var(--paper-muted); }
.compose-form .field-label > span:not(.visually-hidden),
.reply-sheet .field-label > span:not(.visually-hidden) { color: var(--paper-ink); font-weight: 600; }

.compose-button,
.primary-button {
  min-height: max(2.75rem, 44px);
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.board-paper .primary-button,
.compose-form .primary-button,
.reply-sheet .primary-button,
.confirm-shell .primary-button { color: var(--paper-ink); border-color: color-mix(in srgb, var(--paper-ink) 34%, transparent); }
.compose-button:hover,
.primary-button:hover { background: color-mix(in srgb, currentColor 7%, transparent); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .topic-index .topic-item:hover,
  .topic-index .topic-item:focus-visible { transform: none; }
}
@media (min-width: 768px) {
  .board-context h1 { font-size: 1.25rem; }
  .thread-head h1 { font-size: 1.75rem; }
}