/* Ur/Soy: layout shared by every theme.
 *
 * Colours come from custom properties that each theme-*.css sets on :root;
 * the defaults below are the Yotsuba ones, so the page is readable even if a
 * theme file fails to load.  There is no JavaScript anywhere, so everything
 * interactive (spoilers, hover previews of nothing, etc.) is plain CSS. */

:root {
  --bg: #ffffee;
  --bg-top: #fed6af;
  --fg: #800000;
  --panel: #f0e0d6;
  --panel-border: #d9bfb7;
  --panel-target: #f0c0b0;
  --link: #0000ee;
  --link-hover: #dd0000;
  --quote: #789922;
  --subject: #cc1105;
  --name: #117743;
  --muted: #89776b;
  --rule: #b7c5d9;
  --input-bg: #ffffff;
  --input-fg: #000000;
  --input-border: #aaaaaa;
  --label-bg: #eeaa88;
  --label-fg: #800000;
  --head: #800000;
  --error-bg: #ffd8d8;
  --error-border: #cc4444;
  --ok-bg: #dff3d0;
  --ok-border: #6a9a3a;
  --warn-bg: #fff3c4;
  --warn-border: #c9a227;
  --font: arial, helvetica, sans-serif;
  --head-font: tahoma, verdana, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 8px 24px;
  background: var(--bg);
  background-image: linear-gradient(var(--bg-top), var(--bg) 200px);
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: var(--font);
  font-size: 10pt;
  line-height: 1.35;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 8px 0; clear: both; }
h1, h2, h3, h4 { font-family: var(--head-font); color: var(--head); }
h2 { font-size: 14pt; margin: 14px 0 6px; }
h3 { font-size: 11pt; margin: 14px 0 6px; }
h4 { font-size: 10pt; margin: 8px 0 4px; }
p { margin: 6px 0; }
img { border: 0; }
tt, pre, .mono { font-family: "DejaVu Sans Mono", consolas, monospace; }

input, select, textarea, button {
  font-family: inherit;
  font-size: 10pt;
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  padding: 2px 4px;
  margin: 1px 0;
  max-width: 100%;
}
input[type=checkbox], input[type=radio] { border: 0; padding: 0; vertical-align: -2px; background: none; }
input[type=file] { border: 0; padding: 1px 0; background: none; color: var(--fg); }
input[type=submit], .btn { cursor: pointer; padding: 2px 8px; }
input[type=submit]:hover { border-color: var(--link-hover); }
input.danger, .btn.danger { color: #ffffff; background: #b03030; border-color: #7a1f1f; }
textarea { vertical-align: top; }

/* ---- page furniture ---- */

.boardlist {
  padding: 3px 0;
  font-size: 9pt;
  color: var(--muted);
  overflow: hidden;
}
.boardlist a { text-decoration: none; }
.right { float: right; }
.announce {
  margin: 4px auto;
  padding: 4px 8px;
  text-align: center;
  font-weight: bold;
  color: var(--subject);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.wrap { max-width: 1400px; margin: 0 auto; }
.sitehead, .pagehead { text-align: center; margin: 10px 0 12px; }
.sitetitle { font-size: 28pt; letter-spacing: -2px; margin: 0; }
.sitesub, .pagesub { font-size: 9pt; color: var(--muted); }
.pagetitle { font-size: 20pt; letter-spacing: -1px; margin: 0; text-align: center; }
h2.pagetitle { font-size: 16pt; text-align: left; margin: 10px 0 6px; }
.pagetitle a { color: inherit; text-decoration: none; }
.navlinks { margin: 6px 0; }
.foot {
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 9pt;
  clear: both;
}
.themepick { margin-bottom: 6px; }
.muted { color: var(--muted); }
.small { font-size: 8pt; }
.nowrap { white-space: nowrap; }
.nodisplay { display: none; }

/* ---- messages ---- */

.notice, .errorbox, .okbox, .warnbox {
  margin: 8px auto;
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  max-width: 900px;
}
.errorbox { background: var(--error-bg); border-color: var(--error-border); color: #400000; }
.okbox { background: var(--ok-bg); border-color: var(--ok-border); color: #173300; }
.warnbox { background: var(--warn-bg); border-color: var(--warn-border); color: #3d2f00; }
.errorbox a, .okbox a, .warnbox a { color: #0000aa; }

/* ---- forms ---- */

.postform { margin: 0 auto 10px; display: table; max-width: 100%; }
.postform form { margin: 0; }
.formrow { display: flex; margin: 0 0 2px; gap: 2px; }
.flabel {
  flex: 0 0 110px;
  padding: 3px 5px;
  background: var(--label-bg);
  color: var(--label-fg);
  border: 1px solid var(--panel-border);
  font-weight: bold;
  font-size: 9pt;
}
.flabel:empty { background: none; border-color: transparent; }
.ffield { flex: 1 1 auto; min-width: 0; }
.ffield textarea { width: 100%; min-width: 260px; }
.fhint { font-size: 8pt; color: var(--muted); }
.postform > .fhint { text-align: center; margin: 4px 0; }
.postform .notice { font-size: 9pt; max-width: 520px; }
.postform .multi { display: block; }
.captcha-img { border: 1px solid var(--input-border); background: #ffffff; margin-bottom: 2px; }
.inline-form { display: inline; }
.inline-form input { margin-right: 2px; }

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

.threadbox { margin: 0 0 4px; overflow: hidden; }
.post { margin: 2px 0; }
.post.op { overflow: hidden; }
.post.reply {
  display: table;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-left: 0;
  border-top: 0;
  padding: 3px 8px 4px 6px;
  margin: 4px 0 4px 14px;
  max-width: calc(100% - 14px);
}
.post.reply:target, .post.op:target .post-body { background: var(--panel-target); }
.intro { font-size: 10pt; }
.subject { color: var(--subject); font-weight: bold; }
.pname { color: var(--name); font-weight: bold; }
.trip { color: var(--name); }
.capcode { font-weight: bold; }
.cap-red { color: #cc0000; }
.cap-purple { color: #8a2be2; }
.cap-blue { color: #1e6fd9; }
.cap-green { color: #2e8b2e; }
.cap-orange { color: #d9700a; }
.cap-teal { color: #0f8f8f; }
.cap-pink { color: #d6409f; }
.cap-gray { color: #777777; }
.posterid {
  font-size: 8pt;
  padding: 0 4px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.22);
}
.postno a { color: inherit; text-decoration: none; }
.postno a:hover { color: var(--link-hover); }
.flags { font-size: 8pt; font-weight: bold; color: var(--subject); margin-left: 3px; }
.sage { font-size: 8pt; color: var(--muted); }
.post-links { font-size: 8pt; margin-left: 4px; opacity: 0.55; }
.post-links a { margin-right: 3px; }
.post:hover .post-links { opacity: 1; }
.files { margin: 3px 0; }
.filebox { display: inline-block; vertical-align: top; margin: 2px 14px 4px 0; }
.post.op > .files:not(.multi) { float: left; margin-right: 6px; }
.post.reply > .files:not(.multi) { float: left; }
.fileinfo { font-size: 8pt; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filethumb { display: block; max-width: 100%; height: auto; }
.spoilerbox, .filebox.removed, .filebox.pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 125px;
  height: 125px;
  padding: 6px;
  text-align: center;
  font-size: 9pt;
  font-weight: bold;
  color: #dddddd;
  background: #222222;
  border: 1px solid #000000;
}
a .spoilerbox { text-decoration: none; }
.filebox.removed { background: none; color: var(--muted); border: 1px dashed var(--muted); height: 60px; }
.filebox.pending { background: none; color: var(--muted); border: 1px dashed var(--warn-border); height: 60px; }
span.pending { color: #b07a00; font-weight: bold; }
.post-body {
  margin: 8px 24px 8px 16px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.post.reply .post-body { margin: 6px 16px 4px 12px; }
.banmsg { color: #dd0000; font-weight: bold; margin: 4px 12px; }
.omitted { color: var(--muted); font-size: 9pt; margin: 2px 12px; clear: both; }
.backlinks { font-size: 8pt; color: var(--muted); margin: 2px 12px 0; clear: both; }
.backlinks a { margin-right: 2px; }

/* ---- post markup ---- */

.quote { color: var(--quote); }
.cite { text-decoration: underline; }
.redtext { color: #af0a0f; font-weight: bold; }
.spoiler { background: #000000; color: #000000; }
.spoiler a { color: #000000; }
.spoiler:hover, .spoiler:focus, .spoiler:hover a { color: #ffffff; }
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.codeblock {
  display: block;
  margin: 4px 0;
  padding: 6px 8px;
  background: rgba(127, 127, 127, 0.16);
  border: 1px solid var(--panel-border);
  overflow-x: auto;
  white-space: pre;
  font-size: 9pt;
  max-width: 100%;
}

/* ---- listings ---- */

.pager { margin: 8px 0; }
.catalog { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0; }
.cattile {
  width: 170px;
  max-height: 320px;
  overflow: hidden;
  padding: 4px;
  text-align: center;
  font-size: 9pt;
  overflow-wrap: anywhere;
}
.cattile:hover { background: var(--panel); }
.cattile .filethumb, .cattile .spoilerbox { margin: 0 auto 3px; }
.cattile .filethumb { box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); }
.catmeta { font-size: 8pt; color: var(--muted); }
.catsubj { font-weight: bold; color: var(--subject); }
.frontgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; margin: 12px auto; max-width: 1100px; }
.boardtable, .modtable { border-collapse: collapse; width: 100%; }
.boardtable th, .boardtable td, .modtable th, .modtable td {
  text-align: left;
  padding: 3px 8px;
  border: 1px solid var(--panel-border);
  vertical-align: top;
}
.boardtable th, .modtable th { background: var(--label-bg); color: var(--label-fg); font-size: 9pt; }
.boardtable tr:nth-child(even) td, .modtable tr:nth-child(even) td { background: var(--panel); }
.news-item { margin: 0 0 10px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--panel-border); }
.news-head { margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid var(--panel-border); }

/* ---- staff area ---- */

.modtool { font-size: 8pt; font-weight: bold; color: #b03030; }
.ipinfo { font-size: 8pt; font-family: "DejaVu Sans Mono", consolas, monospace; color: var(--muted); margin-left: 3px; }
.modnav {
  margin: 4px 0 10px;
  padding: 5px 10px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  line-height: 1.8;
  overflow: hidden;
}
.modnav a { margin-right: 10px; text-decoration: none; font-weight: bold; white-space: nowrap; }
.modnav .right a { margin: 0 0 0 10px; font-weight: normal; }
.modnav form { display: inline; }
.modbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; align-items: center; }
.modbar form { margin: 0; }
.modtable { margin: 6px 0 10px; font-size: 9pt; }
.modtable form { margin: 0; }
.modtable td { overflow-wrap: anywhere; }
.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0; }
.modcard { padding: 8px 10px; background: var(--panel); border: 1px solid var(--panel-border); overflow-wrap: anywhere; }
.modcard .filethumb { margin: 4px auto; }
.modcard form { display: inline; }
.stat-num { font-size: 22pt; font-weight: bold; font-family: var(--head-font); color: var(--head); line-height: 1.1; }
.stat { font-size: 9pt; }
.badge {
  display: inline-block;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 8pt;
  font-weight: bold;
  color: #ffffff;
  background: #777777;
  vertical-align: 1px;
}
.badge-hot { background: #cc2222; }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; margin: 6px 0 10px; }
.permgroup { padding: 4px 10px 8px; background: var(--panel); border: 1px solid var(--panel-border); }
.permgroup h4 { margin-top: 2px; border-bottom: 1px solid var(--panel-border); }
.permgroup div { margin: 2px 0; }

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

@media (max-width: 720px) {
  body { padding: 0 4px 16px; font-size: 11pt; }
  .frontgrid { grid-template-columns: minmax(0, 1fr); }
  .formrow { flex-wrap: wrap; }
  .flabel { flex: 1 0 100%; }
  .ffield textarea { min-width: 0; }
  .postform { display: block; }
  .post.reply { margin-left: 2px; max-width: 100%; display: block; }
  .post-body, .post.reply .post-body { margin: 6px 6px 4px; }
  .filethumb { max-width: 45vw; }
  .modtable, .boardtable { display: block; overflow-x: auto; }
  .cattile { width: 46%; }
  input, select, textarea { font-size: 12pt; }
}
.postdate { white-space: nowrap; }