/* 4cash wears a 4chan board's clothes: Yotsuba B's colours, post boxes, greentext, the post form, the catalog.
   Our own name and banner, never 4chan's logo or marks. A second style, Tomorrow (4chan's dark one), is picked at
   the bottom of every page and remembered in this browser. Bigger type and more air than 4chan, so it stays easy
   to read. */
:root {
  --bg: #eef2ff;
  --bg-top: #d1d5ee;
  --post: #d6daf0;
  --post-line: #b7c5d9;
  --text: #000;
  --muted: #55556b;
  --title: #af0a0f;      /* board title */
  --subject: #0f0c5d;
  --name: #117743;       /* names, tripcodes, "paid" */
  --link: #34345c;
  --link-hover: #dd0000;
  --green: #789922;      /* greentext */
  --red: #d00;           /* quote links, errors, "unclaimed" */
  --label: #9988ee;      /* the post form's label cells */
  --label-text: #000;
  --label-line: #000;
  --field: #fff;
  --field-line: #aaa;
  --btn-top: #fdfdfd;
  --btn-bottom: #e3e3e3;
  --btn-line: #8a8a8a;
  --paper: #fff;
  --sans: arial, helvetica, sans-serif;
  --title-font: Tahoma, Geneva, Verdana, arial, sans-serif;
  --mono: ui-monospace, Consolas, "Courier New", monospace;
  --wrap: 1100px;
  color-scheme: light;
}
:root[data-style="tomorrow"] {
  --bg: #1d1f21;
  --bg-top: #1d1f21;
  --post: #282a2e;
  --post-line: #111;
  --text: #c5c8c6;
  --muted: #8d8f8e;
  --title: #c5c8c6;
  --subject: #b294bb;
  --name: #b5bd68;
  --link: #81a2be;
  --link-hover: #5f89ac;
  --green: #b5bd68;
  --red: #e56b6b;
  --label: #282a2e;
  --label-text: #c5c8c6;
  --label-line: #111;
  --field: #282a2e;
  --field-line: #515151;
  --btn-top: #34373b;
  --btn-bottom: #2a2c30;
  --btn-line: #515151;
  --paper: #232528;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; color: var(--text); font: 15px/1.5 var(--sans); background: var(--bg) linear-gradient(var(--bg-top), var(--bg) 220px) no-repeat; min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--link-hover); outline-offset: 2px; }
[hidden] { display: none !important; }
p { margin: 0 0 10px; }
h1, h2, h3 { margin: 0; font-family: var(--sans); text-wrap: balance; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
hr { border: 0; border-top: 1px solid var(--post-line); margin: 14px 0; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.muted { color: var(--muted); }
.lbl { font-size: 12px; color: var(--muted); }
.center { text-align: center; }
.hand { font-weight: bold; color: var(--name); }

/* [bracketed links], 4chan style */
.bl { white-space: nowrap; }
.bl::before { content: "["; color: var(--muted); margin-right: 1px; }
.bl::after { content: "]"; color: var(--muted); margin-left: 1px; }
.bl a { text-decoration: none; }
.bl a:hover { text-decoration: underline; }

/* ---------- header ---------- */
.boardlist { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 6px 0 0; }
.boardlist a { text-decoration: none; }
.boardlist a:hover { text-decoration: underline; }
.boardlist a[aria-current] { font-weight: bold; color: var(--text); }
.boardlist .sep { margin: 0 3px; }
.boardBanner { text-align: center; padding: 14px 0 0; }
.banner { width: 300px; height: 100px; margin: 0 auto; display: block; }
.banner a { display: block; }
.boardTitle { font: bold 28px/1.2 var(--title-font); letter-spacing: -2px; color: var(--title); margin-top: 10px; }
.boardSubtitle { font-size: 13px; margin-top: 2px; }
.globalMessage { color: var(--red); font-weight: bold; text-align: center; font-size: 13px; margin-top: 8px; }

/* ---------- footer ---------- */
.foot { margin-top: 40px; padding-bottom: 36px; font-size: 12px; color: var(--muted); }
.foot .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.foot .links { display: flex; gap: 6px; flex-wrap: wrap; }
.foot .style select { font: 13px var(--sans); background: var(--field); color: var(--text); border: 1px solid var(--field-line); }
.foot .fine { text-align: center; max-width: 820px; margin: 16px auto 0; line-height: 1.5; }

/* ---------- posts ---------- */
.thread { margin: 0 0 8px; }
.op { padding: 2px 0 6px; overflow: hidden; }
.replyContainer { display: flex; gap: 4px; margin: 4px 0; align-items: flex-start; }
.sideArrows { color: var(--post-line); font-size: 13px; padding-top: 6px; flex: none; user-select: none; }
:root[data-style="tomorrow"] .sideArrows { color: #555; }
.post { background: var(--post); border: 1px solid var(--post-line); border-left: 0; border-top: 0; padding: 8px 16px 12px; min-width: 0; max-width: 100%; }
.post.wide { flex: 1; }
.postInfo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.subject { color: var(--subject); font-weight: bold; }
.name { color: var(--name); font-weight: bold; }
.trip { color: var(--name); font-weight: normal; }
.dateTime, .postNum { color: var(--text); }
.postNum a { text-decoration: none; color: inherit; }
.stickyTag { color: var(--red); font-weight: bold; font-size: 12px; }
.postMessage { margin-top: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.postMessage p:last-child { margin-bottom: 0; }
.quote { color: var(--green); }
.quotelink { color: var(--red); }
.file { font-size: 13px; margin: 2px 0 4px; }
.fileThumb { float: left; margin: 4px 20px 10px 0; }
.fileThumb img, .fileThumb .noimg { width: 160px; height: 160px; object-fit: cover; }
.noimg { display: grid; place-items: center; background: var(--post); border: 1px solid var(--post-line); font: bold 22px var(--title-font); color: var(--muted); }
.clear { clear: both; }

/* ---------- the post form ---------- */
.postForm { border-collapse: separate; border-spacing: 2px; margin: 0 auto; width: min(560px, 100%); }
.postForm th { background: var(--label); color: var(--label-text); border: 1px solid var(--label-line); font-weight: bold; font-size: 14px; text-align: left; padding: 6px 10px; vertical-align: top; white-space: nowrap; width: 1%; }
.postForm td { padding: 0; vertical-align: top; }
.postForm .note { font-size: 12px; color: var(--muted); padding: 4px 2px 6px; display: block; }
.input, .postForm input[type="text"], .postForm textarea {
  width: 100%; font: 15px/1.35 var(--sans); color: var(--text); background: var(--field);
  border: 1px solid var(--field-line); border-radius: 0; padding: 7px 9px;
}
textarea.input, .postForm textarea { min-height: 96px; resize: vertical; }
.input:focus, .postForm input:focus, .postForm textarea:focus { outline: 1px solid var(--link-hover); outline-offset: 0; border-color: var(--link-hover); }
.inline { display: flex; gap: 6px; align-items: stretch; }
.inline .input { flex: 1; min-width: 0; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > label { font-weight: bold; font-size: 14px; }
.hint { font-size: 13px; color: var(--muted); }
.error { color: var(--red); font-weight: bold; font-size: 14px; margin: 8px 0 0; }
.ok { color: var(--name); font-weight: bold; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* buttons: the plain grey button every 4chan form has */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 14px/1.2 var(--sans); color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  padding: 6px 14px; border: 1px solid var(--btn-line); border-radius: 3px; background: linear-gradient(var(--btn-top), var(--btn-bottom));
}
.btn:hover { color: var(--text); border-color: var(--text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.big { font-size: 16px; font-weight: bold; padding: 9px 22px; }
.btn-sm { padding: 3px 10px; font-size: 13px; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--red); }

/* the big link at the top of a board */
.startLink { text-align: center; font: bold 24px var(--sans); margin: 18px 0 6px; }
.startLink a { text-decoration: none; }
.startLink a:hover { text-decoration: underline; }

/* ---------- catalog ---------- */
.catalogBar { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 13px; }
.catalogBar h2 { font-size: 18px; }
.catalogBar button { font: inherit; background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; }
.catalogBar button[aria-pressed="true"] { font-weight: bold; color: var(--text); }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px 12px; }
.cthread { text-align: center; font-size: 13px; color: var(--text); padding: 8px 6px; display: grid; justify-items: center; gap: 6px; align-content: start; }
.cthread:hover { background: var(--post); }
.cthread .cmain { color: var(--text); text-decoration: none; display: grid; justify-items: center; gap: 4px; }
.cthread .cmain:hover { color: var(--text); }
/* the Claim button: green like a poster's name, so it stands out from the grey buttons */
.btn-claim { color: var(--name); border-color: var(--name); font-weight: bold; }
.btn-claim:hover { color: #fff; background: var(--name); border-color: var(--name); }
.claimRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0; }
.cthread .thumb { width: 150px; height: 150px; object-fit: cover; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); display: grid; place-items: center; background: var(--post); font: bold 22px var(--title-font); color: var(--muted); overflow: hidden; }
.cthread .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cthread .meta { font-size: 12px; }
.cthread .teaser { line-height: 1.4; overflow-wrap: anywhere; }
.cthread .teaser b { color: var(--subject); }
.cthread .who { color: var(--name); }

/* ---------- boxes, like a front page's ---------- */
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.box { background: var(--post); border: 1px solid var(--post-line); }
.box > h2 { background: var(--label); color: var(--label-text); border-bottom: 1px solid var(--label-line); margin: 0; padding: 5px 10px; font-size: 15px; }
.box .in { padding: 10px 12px 12px; font-size: 14px; }
.box ul { list-style: none; margin: 0; padding: 0; }
.box li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--post-line); }
.box li:last-child { border-bottom: 0; }
.box ol > li { display: list-item; } /* numbered lists (the rules) are sentences, not label/value rows */

/* ---------- the fee check: who the money is held for and how much ---------- */
.check { position: relative; display: grid; grid-template-columns: 136px 1fr; background: var(--paper); border: 1px dashed var(--post-line); color: var(--text); margin-top: 10px; max-width: 760px; }
:root[data-style="tomorrow"] .check { border-color: #444; }
.check-stub { border-right: 1px dashed var(--post-line); padding: 14px; display: grid; align-content: start; gap: 2px; font-size: 13px; }
.check-stub b { font-size: 14px; }
.check-stub .gap { height: 8px; }
.check-face { position: relative; padding: 14px 18px 12px; display: grid; gap: 12px; min-width: 0; }
.check-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.check-top .bank { font: bold 15px var(--title-font); color: var(--title); letter-spacing: -1px; }
.check-top .date { margin-left: auto; }
.check-line { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px; }
.check-line .lbl { font-size: 11px; line-height: 1.2; }
.check-line .fill { border-bottom: 1px solid var(--post-line); min-width: 0; padding: 0 2px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check .payee { font-size: clamp(20px, 3.6vw, 32px); color: var(--name); font-weight: bold; }
.check .amount { font-size: clamp(18px, 2.8vw, 24px); font-weight: bold; color: var(--text); }
.check-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; font-size: 14px; }
.micr { color: var(--muted); font: 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.check.small { grid-template-columns: 1fr; }
.check.small .check-stub { display: none; }
.check.small .check-bottom { grid-template-columns: 1fr; gap: 8px; }
.stamp { position: absolute; right: 16px; top: 40px; font: bold 13px var(--sans); color: var(--red); border: 2px solid var(--red); padding: 3px 8px; transform: rotate(-4deg); pointer-events: none; background: var(--paper); }
.stamp.is-paid { color: var(--name); border-color: var(--name); }
.stamp.is-demo { color: var(--muted); border-color: var(--muted); }

/* statuses, inline: [Unclaimed] [Claimed] [Demo] */
.tag { font-size: 12px; font-weight: bold; color: var(--red); white-space: nowrap; }
.tag::before { content: "["; }
.tag::after { content: "]"; }
.tag.is-paid { color: var(--name); }
.tag.is-demo { color: var(--muted); }

/* where each fee goes */
.split { display: flex; height: 10px; overflow: hidden; gap: 2px; max-width: 520px; }
.split span { display: block; }
.split .s-owner, .legend .s-owner { background: var(--name); }
.split .s-treasury, .legend .s-treasury { background: var(--post-line); }
:root[data-style="tomorrow"] .split .s-treasury, :root[data-style="tomorrow"] .legend .s-treasury { background: #666; }
.split .s-buyback, .legend .s-buyback { background: var(--title); }
:root[data-style="tomorrow"] .split .s-buyback, :root[data-style="tomorrow"] .legend .s-buyback { background: #cc6666; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* ---------- the rest ---------- */
.panel { background: var(--post); border: 1px solid var(--post-line); border-left: 0; border-top: 0; padding: 12px 16px; margin: 8px 0; }
details.panel summary { cursor: pointer; font-weight: bold; }
.item { padding: 10px 0; border-top: 1px dotted var(--post-line); display: grid; gap: 6px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.empty { border: 1px dashed var(--post-line); padding: 22px; text-align: center; color: var(--muted); }
.empty b { color: var(--text); display: block; font-size: 16px; margin-bottom: 4px; }
.skeleton { background: var(--post); min-height: 120px; animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: 0.5; } }
.addr { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-all; }
.code { font: bold 22px/1 var(--mono); background: var(--paper); border: 1px dashed var(--post-line); padding: 14px; text-align: center; user-select: all; margin: 10px 0; color: var(--text); }
ol.plain { margin: 0 0 10px; padding-left: 22px; }
ol.plain li { margin-bottom: 6px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dotted var(--post-line); font-size: 14px; flex-wrap: wrap; }
.list li:last-child { border-bottom: 0; }
.ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.ledger th { background: var(--label); color: var(--label-text); text-align: left; padding: 5px 8px; border: 1px solid var(--label-line); }
.ledger td { padding: 6px 8px; border-bottom: 1px solid var(--post-line); }
.ledger tr:nth-child(even) td { background: var(--post); }
.table-scroll { overflow-x: auto; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fact .v { font-weight: bold; font-size: 18px; font-variant-numeric: tabular-nums; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--post-line); border-top-color: var(--text); animation: spin 0.8s linear infinite; display: inline-block; vertical-align: -1px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.rules ol { padding-left: 24px; }
.rules li { margin-bottom: 8px; }
.rules h2 { margin: 18px 0 8px; font-size: 17px; color: var(--subject); }
.draftNote { background: var(--paper); border: 1px dashed var(--red); padding: 8px 12px; font-size: 13px; margin: 10px 0; }

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; }
  .postForm, .postForm tbody, .postForm tr, .postForm th, .postForm td { display: block; width: 100%; }
  .postForm th { margin-top: 6px; }
  .check { grid-template-columns: 1fr; }
  .check-stub { display: none; }
  .check-bottom { grid-template-columns: 1fr; }
  .fileThumb { float: none; margin: 6px 0 8px; }
  .boardTitle { font-size: 24px; }
  .sideArrows { display: none; }
  .post { padding: 8px 12px 12px; }
  .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 6px; }
  .cthread .thumb { width: 128px; height: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .spin { animation: none; }
}