/* arcanewtf — Yotsuba-style imageboard theme.
   Palette and metrics follow 4chan's default (Yotsuba) closely: #FFFFEE page,
   #F0E0D6 replies, #800000 headings, green names, olive greentext, red
   quotelinks, 10pt Arial. No inline styles anywhere — CSP forbids them. */

:root {
  --bg: #ffffee;
  --grad-top: #ffcf9f;
  --post: #f0e0d6;
  --post-border: #d9bfb7;
  --text: #000;
  --heading: #800000;
  --heading-text: #fff;
  --link: #34345c;
  --link-hover: #dd0000;
  --name: #117743;
  --subject: #0f0c5d;
  --greentext: #789922;
  --pinktext: #a8447a;
  --quotelink: #dd0000;
  --muted: #707070;
  --arrows: #b8a49a;
  --field-border: #aaa;
  --warn-bg: #ffe;
  --warn-border: #d9b34a;
  --err-bg: #fdd;
  --err-border: #d88a8a;
  --ok-bg: #dfd;
  --sans: arial, helvetica, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 2rem;
  color: var(--text);
  font-family: var(--sans);
  font-size: 10pt;
  line-height: 1.3;
  background-color: var(--bg);
  /* The peach fade behind the masthead, as on Yotsuba. */
  background-image: linear-gradient(to bottom, var(--grad-top) 0, var(--bg) 130px);
  background-repeat: no-repeat;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code { font-family: var(--mono); font-size: 9pt; }
hr { border: 0; border-top: 1px solid var(--post-border); margin: 8px 0; clear: both; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 4px; top: 4px; background: var(--post); padding: 6px 10px; z-index: 10; }

/* ---- masthead ---- */

.masthead { text-align: center; padding: 14px 8px 2px; }
.logo {
  font-family: Tahoma, var(--sans);
  font-size: 34pt;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--heading);
  line-height: 1;
}
.boardTitle {
  font-family: Tahoma, var(--sans);
  font-size: 20pt;
  font-weight: 700;
  color: var(--heading);
  margin-top: 4px;
}
.boardSub { font-size: 9pt; color: #800; margin-top: 2px; }

/* Bracketed nav, the way every imageboard does it. */
.topnav {
  padding: 4px 8px;
  font-size: 9pt;
  display: flex;
  gap: 4px;
  align-items: baseline;
  flex-wrap: wrap;
}
.topnav .spacer { flex: 1; }
/* [bw / kit / strat / maps / skins] — the board switcher every imageboard has. */
.boardnav { color: var(--muted); }
.boardnav a { color: var(--link); }
.boardnav a.here { color: var(--heading); font-weight: 700; }
.topnav .brackets::before { content: "["; color: var(--muted); }
.topnav .brackets::after { content: "]"; color: var(--muted); }
.modwho { color: var(--muted); }

.banner {
  margin: 6px auto; padding: 5px 8px; max-width: 900px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
}

main { padding: 0 8px; }

/* ---- footer ---- */

.foot {
  margin-top: 20px; padding: 8px;
  border-top: 1px solid var(--post-border);
  text-align: center; font-size: 8.5pt; color: var(--muted);
}
.foot .safety { color: #800; font-weight: 700; }

/* ---- post form (Yotsuba renders this as a table) ---- */

.formwrap { margin: 6px auto; max-width: 620px; }
.formwrap.narrow { max-width: 420px; margin-top: 24px; }
.formwrap h1, .formwrap h2 {
  font-size: 11pt; color: var(--heading); margin: 0 0 4px; text-align: center;
}

.postform { display: table; width: 100%; border-spacing: 1px; }
.postform .row { display: table-row; }
.postform .row > label,
.postform label.block {
  display: table-row;
}
.postform label {
  display: table-row;
}
.postform label > span.lbl {
  display: table-cell;
  background: var(--post);
  border: 1px solid var(--post-border);
  padding: 2px 6px;
  font-weight: 700;
  font-size: 9pt;
  white-space: nowrap;
  width: 1%;
  vertical-align: top;
}
.postform label > input,
.postform label > textarea,
.postform label > select,
.postform label > .cell {
  display: table-cell;
  width: 100%;
}
.postform .actions {
  display: table-row;
}
.postform .actions > .cell {
  display: table-cell;
  padding: 3px 0 0;
  text-align: right;
}
.postform .actions > .lbl {
  display: table-cell; width: 1%;
}

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font-family: var(--sans); font-size: 10pt;
  padding: 1px 3px; margin: 0;
  background: #fff; color: var(--text);
  border: 1px solid var(--field-border);
}
textarea { font-family: var(--sans); resize: vertical; min-height: 6em; }
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible { outline: 2px solid var(--quotelink); outline-offset: 1px; }

button {
  font-family: var(--sans); font-size: 9pt; cursor: pointer;
  padding: 1px 8px;
  background: #f0f0f0; color: var(--text);
  border: 1px solid #999; border-radius: 2px;
}
button:hover:not(:disabled) { background: #e4e4e4; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.submit { font-weight: 700; }
button.danger { color: #800; font-weight: 700; }
button.linkbtn {
  background: none; border: 0; padding: 0; color: var(--link);
  font-size: 9pt; cursor: pointer;
}
button.linkbtn:hover { color: var(--link-hover); text-decoration: underline; }

/* Honeypot: reachable by a naive scraper, invisible to a human. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formerror {
  background: var(--err-bg); border: 1px solid var(--err-border);
  padding: 4px 7px; margin: 0 0 5px; font-weight: 700; color: #800;
  text-align: center;
}
.formnote { color: var(--muted); font-size: 8.5pt; margin: 4px 0 0; }
.hint { color: var(--muted); font-size: 8.5pt; }
.cancel { font-size: 9pt; }
.check { font-weight: 400 !important; }

fieldset.cats { border: 1px solid var(--post-border); background: var(--post); padding: 5px 8px; margin: 0 0 5px; }
fieldset.cats legend { font-size: 9pt; font-weight: 700; color: var(--heading); padding: 0 3px; }
fieldset.cats label { display: block; margin: 2px 0; }
.reportpreview {
  margin: 0 0 8px; padding: 5px 8px;
  background: var(--post); border: 1px solid var(--post-border);
}

/* ---- threads and posts ---- */

.threadblock { margin: 0; padding: 0; }
.threadmeta { font-size: 9pt; margin: 2px 0 4px; color: var(--muted); }
.threadmeta .tag { margin-right: 5px; }
.tag.sticky, .tag.locked, .tag.archived, .tag.warn { color: #800; font-weight: 700; }
.tag.link { color: var(--link); }

/* Reply blocks shrink-wrap to their content — the single most recognisable
   thing about imageboard layout. display:table does it without floats. */
.post {
  display: table;
  background: var(--post);
  border: 1px solid var(--post-border);
  padding: 2px 4px 5px;
  margin: 4px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
/* The OP is not a bubble: no background, no border, full width. */
.post.op {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 2px 0 0;
}
.post:target { background: #f6d6c6; outline: 1px solid var(--quotelink); }
.post.status-held { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.post.status-removed { background: var(--err-bg); border: 1px solid var(--err-border); }

.replies { margin: 0; padding: 0; }
/* The >> gutter marker beside each reply. */
.replyrow { display: flex; align-items: flex-start; gap: 3px; }
.sideArrows { color: var(--arrows); padding-top: 6px; user-select: none; font-size: 10pt; }

.postInfo { font-size: 10pt; }
.postInfo .subject { color: var(--subject); font-weight: 700; }
.postInfo .name { color: var(--name); font-weight: 700; }
.postInfo .trip { color: var(--name); }
.postInfo .capcode { color: #f00; font-weight: 700; }
.postInfo .kit { color: var(--muted); font-size: 8.5pt; }
.postInfo .posterid { color: var(--muted); font-size: 8.5pt; }
.postInfo time { color: var(--text); }
.postInfo .postNum a { color: var(--text); }
.postInfo .postNum a:hover { color: var(--link-hover); }
.postInfo .sagemark { color: var(--muted); font-style: italic; font-size: 8.5pt; }
.postInfo .reportlink, .postInfo .threadlink { font-size: 8.5pt; }
.postInfo .reportlink { color: var(--muted); }
.postInfo .reportlink:hover { color: var(--quotelink); }
.postInfo .reportcount { color: var(--quotelink); font-weight: 700; }

.backlinks { font-size: 8.5pt; color: var(--muted); }
.backlinks a { font-size: 8.5pt; }

/* ---- attachments ---- */

.fileinfo { font-size: 8.5pt; color: var(--muted); margin: 2px 0; }
.fileinfo a { font-size: 8.5pt; }

/* Yotsuba floats the thumbnail left and wraps the post text around it. Stacking
   the image above the text is the single most obvious tell that a board is not
   laid out like an imageboard. */
.filethumb {
  display: block;
  float: left;
  margin: 3px 20px 5px 20px;
  line-height: 0;
}
/* No server-side resizing, so the browser draws the full file small. The width
   and height attributes on the img keep the layout from jumping while it loads;
   these caps override them. Reply thumbnails are smaller than OP thumbnails,
   as on 4chan. */
.filethumb img {
  max-width: 125px;
  max-height: 125px;
  width: auto;
  height: auto;
  border: none;
  background: var(--bg);
}
.post.op .filethumb img { max-width: 250px; max-height: 250px; }
.filethumb:hover img { opacity: 0.85; }

/* Contain the floated thumbnail. Replies are display:table and do this already;
   the OP is a plain block and would otherwise let the image escape its post. */
.post::after { content: ''; display: block; clear: both; }
.filedeleted {
  font-size: 9pt; color: #800; font-weight: 700;
  background: var(--err-bg); border: 1px solid var(--err-border);
  padding: 3px 6px; margin: 3px 0; display: inline-block;
}
.mtsep { font-size: 8pt; color: var(--muted); text-transform: uppercase; margin-left: 6px; }

/* Yotsuba indents the message body ~30px from the post edge. */
.postMessage {
  margin: 6px 0 4px 30px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.post.op .postMessage { margin-left: 30px; }
.postMessage .quote { color: var(--greentext); }
.postMessage .pinktext { color: var(--pinktext); }
.quotelink { color: var(--quotelink); text-decoration: underline; }
.quotelink:hover { color: var(--link-hover); }
.quotelink.you::after { content: " (You)"; color: var(--quotelink); font-weight: 700; }
.deadlink { color: var(--quotelink); text-decoration: line-through; }
.post.mine > .postInfo .postNum::after,
.post.mine .postInfo .postNum::after { content: " (You)"; color: var(--quotelink); font-weight: 700; }

s.spoiler { background: #000; color: #000; text-decoration: none; }
s.spoiler:hover, s.spoiler:focus { color: #fff; }

.flagnote {
  margin: 4px 0 0 30px; font-size: 8.5pt;
  background: var(--warn-bg); border: 1px solid var(--warn-border); padding: 2px 5px;
  display: inline-block;
}

.omitted { font-size: 9pt; color: var(--text); margin: 3px 0 5px 10px; }
.empty { color: var(--muted); font-style: italic; padding: 6px 0; }

.qpreview {
  position: absolute; z-index: 50; max-width: 44rem;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--muted) !important;
  pointer-events: none;
}

.delwrap { margin: 10px 0 0; font-size: 9pt; }
.delwrap h2 { font-size: 10pt; color: var(--heading); margin: 0 0 3px; }
.inline-form { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.inline-form label { display: flex; flex-direction: column; font-size: 8.5pt; color: var(--muted); }
.delok { background: var(--ok-bg); border: 1px solid #7a7; padding: 3px 6px; margin: 0 0 5px; display: inline-block; }

/* ---- front page panels ---- */

.masthead.front .logo { font-size: 44pt; }
.logo { display: inline-block; text-decoration: none; }
.logo:hover { text-decoration: none; color: var(--heading); }

.panel {
  max-width: 1000px;
  margin: 10px auto;
  border: 1px solid var(--post-border);
  background: var(--bg);
}
.panelTitle {
  background: #f6d5b5;
  color: var(--heading);
  font-weight: 700;
  font-size: 11pt;
  padding: 3px 8px;
  border-bottom: 1px solid var(--post-border);
}
.panelTitle.dark { background: var(--heading); color: var(--heading-text); }
.panelClose {
  float: right;
  background: none;
  border: 0;
  color: var(--heading-text);
  font-size: 10pt;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}
.panelClose:hover { background: none; color: #fff; }
.panelBody { padding: 8px 10px; }
.panelBody p { margin: 0 0 8px; }
.introwarn { color: #800; font-weight: 700; }

.boardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 4px 16px; }
.boardcatname {
  font-weight: 700;
  color: var(--heading);
  text-decoration: underline;
  margin-bottom: 2px;
}
.boardlist { list-style: none; margin: 0 0 8px; padding: 0; }
.boardlist li { margin: 1px 0; }
.boardlist a { color: var(--heading); }
.boardlist a:hover { color: var(--link-hover); }
.boardslug { color: var(--muted); font-size: 8.5pt; }

.popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px; }
.popcard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 5px;
  background: var(--post);
  border: 1px solid var(--post-border);
  color: var(--text);
  font-size: 9pt;
}
.popcard:hover { border-color: var(--quotelink); text-decoration: none; }
.popboard { color: var(--heading); font-weight: 700; font-size: 8.5pt; }
.popthumb { line-height: 0; }
.popthumb img { max-width: 100%; max-height: 110px; width: auto; height: auto; }
.popsubject { color: var(--subject); font-size: 9.5pt; }
.popbody { color: var(--text); }
.popmeta { color: var(--muted); font-size: 8pt; }

/* ---- pager + catalog ---- */

.pager { margin: 10px 0; font-size: 10pt; text-align: center; }
.pager a, .pager span { padding: 0 2px; }
.pager a::before, .pager span::before { content: "["; color: var(--muted); }
.pager a::after, .pager span::after { content: "]"; color: var(--muted); }
.pager .current { font-weight: 700; color: var(--text); }

.catnote { font-size: 9pt; color: var(--muted); margin: 4px 0; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 4px; }
.catcard {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--post); border: 1px solid var(--post-border);
  padding: 4px 5px; color: var(--text); min-height: 7.5rem; font-size: 9pt;
}
.catcard:hover { border-color: var(--quotelink); text-decoration: none; }
.catmeta { font-size: 8pt; color: var(--muted); }
.cattime { color: var(--muted); }
.catsubject { color: var(--subject); font-size: 9.5pt; }
.catbody { color: var(--text); }

/* ---- prose + notices ---- */

.prose { max-width: 46rem; margin: 0 auto; }
.prose h1 { font-size: 14pt; color: var(--heading); }
.prose h2 { font-size: 11pt; color: var(--heading); margin-top: 18px; }
.rules { padding-left: 22px; }
.rules li { margin-bottom: 5px; }

.notice {
  max-width: 620px; margin: 12px auto; padding: 8px 12px;
  background: var(--post); border: 1px solid var(--post-border);
}
.notice.error { background: var(--err-bg); border-color: var(--err-border); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.notice h1 { margin: 0 0 6px; font-size: 13pt; color: var(--heading); }

/* ---- moderation ---- */

.modnav {
  padding: 4px 6px; margin-bottom: 8px; font-size: 9pt;
  background: var(--post); border: 1px solid var(--post-border);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.modnav .spacer { flex: 1; }
.modnav form.inline { display: inline; }
.pill { padding: 0 5px; border: 1px solid var(--post-border); background: var(--bg); font-size: 8.5pt; }
.pill.hot { background: #800; color: #fff; border-color: #600; font-weight: 700; }

.queue { margin: 16px 0; }
.queue h2 {
  font-size: 11pt; color: var(--heading);
  border-bottom: 1px solid var(--post-border); padding-bottom: 2px;
}
.queue h2.urgent { color: #d00; }
.qnote { color: var(--muted); font-size: 8.5pt; max-width: 60rem; }

.modtools {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin: 5px 0 0 30px; padding-top: 3px; border-top: 1px dashed var(--post-border);
  font-size: 9pt;
}
.modtools.standalone { border: 1px solid var(--post-border); padding: 6px; background: var(--post); margin-left: 0; }
.modtools label { display: flex; flex-direction: column; font-size: 8.5pt; color: var(--muted); }
.mtlabel { font-size: 8pt; color: var(--muted); text-transform: uppercase; }
.mtlink { font-size: 8.5pt; }

.reportrow { background: var(--post); border: 1px solid var(--post-border); padding: 4px 6px; margin-bottom: 5px; }
.reportrow.urgent { border-left: 3px solid #d00; }
.rrhead { font-size: 9pt; }
.rrcat { font-weight: 700; text-transform: uppercase; font-size: 8pt; color: #d00; margin-right: 5px; }
.rrtime, .rrstatus { color: var(--muted); margin-left: 5px; }
.rrreason { font-size: 9pt; margin: 3px 0; }
.rrbody {
  margin: 3px 0 0; padding: 4px 7px;
  background: var(--bg); border: 1px solid var(--post-border);
  white-space: pre-wrap;
}
.banstate { background: var(--err-bg); border: 1px solid var(--err-border); padding: 5px 8px; font-weight: 700; }

table.grid { width: 100%; border-collapse: collapse; font-size: 9pt; margin-top: 5px; }
table.grid th, table.grid td {
  border: 1px solid var(--post-border); padding: 2px 5px; text-align: left; vertical-align: top;
}
table.grid th { background: var(--post); color: var(--heading); }
.bodycell { max-width: 34rem; }
.healthok { color: var(--name); font-weight: 700; }
.healthbad { color: #d00; font-weight: 700; }

/* ---- small screens ---- */

@media (max-width: 620px) {
  body { background-image: linear-gradient(to bottom, var(--grad-top) 0, var(--bg) 90px); }
  .logo { font-size: 24pt; }
  .boardTitle { font-size: 15pt; }
  .postMessage, .post.op .postMessage { margin-left: 12px; }
  .modtools { margin-left: 12px; }
  .flagnote { margin-left: 12px; }
  .catalog { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
  .qpreview { display: none; }
  .postform label > span.lbl { font-size: 8.5pt; }
}