/* ---- Themes ---- */
body.yotsuba {
  --bg: #ffffee; --fade: #fed6af; --text: #800000; --reply: #f0e0d6; --border: #d9bfb7;
  --link: #0000ee; --hover: #dd0000; --ql: #000080; --title: #800000;
  --th: #eeaa88; --thtext: #800000; --name: #117743; --subject: #cc1105; --green: #789922;
  --hl: #f0c0b0; --side: #e0bfb7; --blist: #bb8866;
  --boxbar: #ffccaa; --boxbartext: #800000; --topbar: #800000; --field: #fff; --fieldtext: #000;
}
body.yotsubab {
  --bg: #eef2ff; --fade: #d1d5ee; --text: #000; --reply: #d6daf0; --border: #b7c5d9;
  --link: #34345c; --hover: #dd0000; --ql: #dd0000; --title: #af0a0f;
  --th: #9988ee; --thtext: #000; --name: #117743; --subject: #0f0c5d; --green: #789922;
  --hl: #d6bad0; --side: #b7c5d9; --blist: #8899aa;
  --boxbar: #c9cde8; --boxbartext: #af0a0f; --topbar: #34345c; --field: #fff; --fieldtext: #000;
}
body.pump {
  --bg: #f1faf2; --fade: #c9ecd0; --text: #10261a; --reply: #d2eed7; --border: #a5d6ae;
  --link: #1f6b3a; --hover: #e0453a; --ql: #c0392b; --title: #0e7a34;
  --th: #9fd6aa; --thtext: #0b3d1c; --name: #117743; --subject: #0b4d8a; --green: #789922;
  --hl: #f3e9a6; --side: #a5d6ae; --blist: #5b8a66;
  --boxbar: #bfe6c7; --boxbartext: #0e7a34; --topbar: #0e7a34; --field: #fff; --fieldtext: #000;
}
body.tomorrow {
  --bg: #1d1f21; --fade: #1d1f21; --text: #c5c8c6; --reply: #282a2e; --border: #111;
  --link: #81a2be; --hover: #5f89ac; --ql: #5f89ac; --title: #c5c8c6;
  --th: #282a2e; --thtext: #c5c8c6; --name: #c5c8c6; --subject: #b294bb; --green: #b5bd68;
  --hl: #3a3d42; --side: #555; --blist: #777;
  --boxbar: #282a2e; --boxbartext: #c5c8c6; --topbar: #373b41; --field: #282a2e; --fieldtext: #c5c8c6;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 5px 0 8px; padding: 0 5px;
  background: var(--bg) linear-gradient(var(--fade), var(--bg) 200px) repeat-x;
  color: var(--text);
  font: 10pt arial, helvetica, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hover); }
hr { border: 0; border-top: 1px solid var(--border); height: 0; margin: 4px 0; clear: both; }
input, textarea, select { font: 10pt arial, helvetica, sans-serif; }
input[type=text], textarea, select {
  background: var(--field); color: var(--fieldtext); border: 1px solid #aaa; padding: 2px 4px; margin: 0; outline: none;
}
input[type=text]:focus, textarea:focus { border-color: #ea8; }

/* ---- Board header ---- */
.boardList { font-size: 9pt; color: var(--blist); }
.boardList .right { float: right; }
.boardBanner { text-align: center; clear: both; }
#bannerCnt { width: 300px; height: 100px; margin: 5px auto; border: 1px solid var(--link); max-width: 100%; overflow: hidden; }
#bannerCnt img { display: block; width: 100%; height: 100%; }
.boardTitle { font: bold 28px tahoma, sans-serif; letter-spacing: -2px; color: var(--title); margin-top: 0; }
hr.abovePostForm { width: 90%; }

#togglePostFormLink { text-align: center; font-size: 22px; font-weight: bold; margin: 4px 0; }
#postForm table { margin: 0 auto 4px; border-spacing: 1px; }
#postForm td.lbl {
  background: var(--th); color: var(--thtext); font-weight: bold; border: 1px solid #000;
  padding: 0 5px; font-size: 10pt; white-space: nowrap;
}
#postForm input[type=text] { width: 244px; }
#postForm .withbtn input[type=text] { width: 190px; }
#postForm textarea { width: 292px; height: 96px; display: block; }
#postForm input[type=submit] { margin-left: 2px; }
#postForm input[type=file] { max-width: 292px; }
.rules { list-style: none; margin: 0 auto; padding: 0; font-size: 11px; max-width: 480px; }
.rules li::before { content: "\2022  "; }
#formError { color: red; font-weight: bold; text-align: center; margin: 3px 0; }

.globalMessage { text-align: center; color: red; margin: 6px 0; }
.globalMessage code { font: bold 10pt monospace; word-break: break-all; }
.globalMessage button { font-size: 11px; margin-left: 4px; }

.navLinks { margin: 2px 0; }
.thread-stats { float: right; margin-right: 5px; }
.updStatus { font-style: italic; margin-left: 4px; }

/* ---- Posts ---- */
.thread { margin: 0; clear: both; }
.postContainer { display: block; }
.post { margin: 2px 0 4px; }
.post.op { display: inline; }
.post.reply {
  display: table; padding: 2px; background: var(--reply);
  border: 1px solid var(--border); border-left: none; border-top: none;
}
.post.highlight { background: var(--hl) !important; }
.sideArrows { color: var(--side); float: left; margin: 0 2px; }
.postInfo { display: block; }
.reply .postInfo { padding: 0 3px; }
.postInfo input[type=checkbox] { margin: 0 3px 0 2px; position: relative; top: 2px; }
.subject { color: var(--subject); font-weight: bold; }
.name { color: var(--name); font-weight: bold; }
.postertrip { color: var(--name); font-weight: normal; }
.capcode, .name.capname { color: #800080; }
.postNum a { color: inherit; }
.postNum a:hover { color: var(--hover); }
.icon { font-size: 11px; cursor: default; }
.backlink { display: inline; padding-left: 5px; font-size: 0.8em; }
.backlink a { color: var(--link); text-decoration: underline; }
.backlink a:hover { color: var(--hover); }

.file { display: block; }
.op .fileText { margin: 0; }
.reply .file { margin-left: 3px; }
.reply .fileText { margin-left: 20px; }
.fileText a { text-decoration: underline; }
.fileThumb { float: left; margin: 3px 20px 5px; }
.fileThumb img { display: block; border: 0; cursor: pointer; }
.fileThumb.expanded { float: none; display: block; }
.fileThumb.expanded img { width: auto; height: auto; max-width: 100%; }

blockquote.postMessage { margin: 1em 40px; overflow-wrap: break-word; white-space: pre-wrap; display: block; }
.reply:has(.fileThumb) { min-width: min(500px, 100%); }
span.quote { color: var(--green); }
.quotelink { color: var(--ql); text-decoration: underline; }
.quotelink:hover { color: var(--hover); }
.summary { color: #707070; margin-top: 10px; display: block; clear: left; }
body.tomorrow .summary { color: #8a8d8b; }

#quote-preview {
  position: absolute; z-index: 10; margin: 0; padding: 3px 6px 6px 3px; max-width: min(700px, 92vw);
  border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
#quote-preview input, #quote-preview .backlink { display: none; }

/* ---- Bottom ---- */
.bottomCtrl { text-align: right; margin: 2px 0; }
.bottomCtrl .stylechanger { margin-left: 12px; }
.pagelist {
  float: left; background: var(--reply); padding: 3px 7px; margin: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pagelist > * { display: inline-block; margin-right: 6px; }
.pagelist strong a { color: var(--text); }
.absBot { clear: both; text-align: center; font-size: 11px; padding-top: 14px; }
.absBot p { margin: 3px 0; }

/* ---- Catalog ---- */
.catalog { text-align: center; padding: 10px 0; }
.cat { display: inline-block; vertical-align: top; width: 180px; max-height: 320px; margin: 0 2px 20px; padding: 5px 0 3px; overflow: hidden; font-size: 11px; }
.cat img { max-width: 150px; max-height: 150px; box-shadow: 0 0 5px rgba(0,0,0,.25); }
.cat .meta { font-size: 10px; margin: 2px 0; }
.cat .teaser { color: var(--text); overflow-wrap: break-word; }
.cat .teaser b { color: var(--subject); }

/* ---- Front page ---- */
#doc { max-width: 750px; margin: 0 auto; }
#hd { text-align: center; padding: 10px 0 14px; }
#hd a { display: inline-flex; align-items: center; gap: 4px; }
#hd .logoText { font: bold 46px tahoma, sans-serif; letter-spacing: -3px; color: var(--title); }
.box-outer { border: 1px solid var(--topbar); margin-bottom: 15px; background: var(--bg); }
.boxbar { background: var(--boxbar); color: var(--boxbartext); padding: 3px 6px; }
.boxbar h2 { margin: 0; font-size: 10pt; font-weight: bold; }
.top-box .boxbar { background: var(--topbar); color: #fff; }
.boxcontent { padding: 8px 10px; }
.boxcontent p { margin: 0 0 8px; }
.boxcontent p:last-child { margin-bottom: 0; }
.columns { display: flex; flex-wrap: wrap; gap: 10px 30px; }
.column { min-width: 150px; }
.column h3 { margin: 0 0 4px; font-size: 10pt; text-decoration: underline; color: var(--title); }
.column ul { list-style: none; margin: 0; padding: 0; }
.column li { margin: 2px 0; }
.pop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; text-align: center; }
.pop .c-board { font-weight: bold; margin-bottom: 4px; }
.pop img { max-width: 150px; max-height: 150px; width: auto; height: auto; }
.pop .noimg { height: 60px; line-height: 60px; color: var(--blist); }
.pop .teaser { font-size: 11px; margin-top: 3px; overflow-wrap: break-word; max-height: 5.4em; overflow: hidden; }
.pop a { color: var(--text); display: block; }
.stats { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 6px; }

@media (max-width: 600px) {
  body { font-size: 12px; }
  .sideArrows { display: none; }
  .post.reply { display: block; }
  .fileThumb { margin: 3px 10px 5px 5px; }
  .fileThumb img { max-width: 125px; height: auto; }
  blockquote.postMessage { margin: 8px 10px; }
  #postForm table, #postForm tbody, #postForm tr, #postForm td { display: block; width: 100%; }
  #postForm input[type=text], #postForm textarea { width: 100%; }
  #postForm .withbtn { display: flex; }
  .boardTitle { font-size: 22px; letter-spacing: -1px; }
  .pop { grid-template-columns: repeat(2, 1fr); }
  .pop img { max-width: 100%; }
}