/* nyoron.css — light theme overlay on style.css
   Tokens only. Layout chrome that both themes share is duplicated
   on purpose so either sheet can load alone. */

:root {
	--churu-green: #2db84a;
	--churu-green-dark: #0d6b32;
	--churu-green-mid: #148a38;
	--churu-green-soft: #d4f0c8;
	--churu-green-card: #e8f8e4;
	--churu-ink: #3a2a18;
	--churu-hair: #c45c10;
	--churu-gold: #ffd54a;
	--churu-line: #7bc47a;
	--churu-hover: #14c44a;
	--churu-on-green: #143318;
	--churu-highlight: #c8f0b8;
}

/* -------------------------------------------------------------------------- */
/* Page                                                                        */
/* -------------------------------------------------------------------------- */

html,
body {
	background-color: var(--churu-green-soft) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><text x='6' y='40' font-size='32' fill='%23148a38' fill-opacity='0.12'>☆</text></svg>") !important;
	background-repeat: repeat !important;
	color: var(--churu-ink) !important;
}

hr {
	border: none;
	border-top: 2px dashed var(--churu-line);
	height: 0;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                       */
/* -------------------------------------------------------------------------- */

a,
a:link,
a:visited {
	color: var(--churu-green-dark) !important;
}

a:hover,
a:link:hover,
a:visited:hover,
.intro a.post_no:hover,
.intro a.email:hover span.name {
	color: var(--churu-hover) !important;
}

a.post_no,
.intro a.post_no {
	color: var(--churu-green-dark) !important;
	text-decoration: none;
}

.intro a.email span.name {
	color: var(--churu-green-mid) !important;
}

/* -------------------------------------------------------------------------- */
/* Header / titles                                                             */
/* -------------------------------------------------------------------------- */

header {
	text-align: center;
}

header img.icon,
img.board_image {
	display: block;
	margin: 8px auto;
}

header img.icon {
	max-width: 250px;
	max-height: 250px;
}

header div.subtitle,
h1 {
	color: var(--churu-green-mid) !important;
	text-align: center;
	text-shadow: 1px 1px 0 #f3ffe8;
	letter-spacing: 1px;
}

h2,
span.heading {
	color: var(--churu-green-mid) !important;
}

/* -------------------------------------------------------------------------- */
/* Boardlist (fixed top bar — no nth-child; 4chan X prepends #header-bar)      */
/* -------------------------------------------------------------------------- */

div.boardlist,
div.boardlist.top,
div.boardlist.bottom,
.compact-boardlist {
	background: var(--churu-highlight) !important;
	color: var(--churu-green-dark) !important;
	text-shadow: none !important;
	border-bottom-color: var(--churu-green-mid);
}

.desktop-style div.boardlist:not(.bottom) {
	position: fixed;
	left: 0;
	right: 0;
	margin-top: 0;
	z-index: 36;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
	border-bottom: 1px solid;
	background: var(--churu-highlight) !important;
	color: var(--churu-green-dark) !important;
}

div.boardlist a,
div.boardlist a:link,
div.boardlist a:visited,
.compact-boardlist a {
	color: var(--churu-green-dark) !important;
	text-shadow: none !important;
}

div.boardlist a:hover,
.compact-boardlist a:hover {
	color: var(--churu-hover) !important;
}

div.styles a,
div.styles a:link,
div.styles a:visited {
	color: var(--churu-green-dark) !important;
}

div.styles a.selected {
	background: var(--churu-green);
	color: var(--churu-on-green) !important;
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Posts                                                                       */
/* -------------------------------------------------------------------------- */

div.post.reply {
	background: var(--churu-green-card);
	border: 1px solid var(--churu-line);
	border-radius: 8px;
}

div.post.reply.highlighted {
	background: var(--churu-highlight);
	border-color: var(--churu-green-mid);
}

div.post.reply div.body a,
div.post.reply div.body a:link,
div.post.reply div.body a:visited {
	color: var(--churu-green-dark) !important;
}

.intro span.subject {
	color: var(--churu-hair) !important;
}

.intro span.name {
	color: var(--churu-green-mid) !important;
	font-weight: 700;
}

span.trip {
	color: var(--churu-green) !important;
}

span.quote {
	color: var(--churu-green-dark) !important;
}

span.spoiler {
	background: var(--churu-green-dark);
	color: var(--churu-green-dark);
}

span.spoiler:hover,
div.post.reply div.body span.spoiler:hover a {
	color: var(--churu-green-card);
}

.post-like .like-btn,
.post-like .like-count {
	color: var(--churu-green-mid) !important;
}

.like-count[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Forms / banner / pager                                                      */
/* -------------------------------------------------------------------------- */

form table tr th,
table.modlog tr th,
table.test tr.h th {
	background: var(--churu-green) !important;
	color: var(--churu-on-green) !important;
	font-weight: 700;
	border-color: var(--churu-green-dark);
}

input[type="text"],
textarea,
select,
input[type="password"] {
	background: #f7fff4;
	border: 1px solid var(--churu-line);
	color: var(--churu-ink);
}

input[type="submit"] {
	background: var(--churu-green);
	border: 1px solid var(--churu-green-dark);
	color: var(--churu-on-green);
	font-weight: 700;
	cursor: pointer;
}

input[type="submit"]:hover {
	background: var(--churu-hover);
}

div.banner {
	background: var(--churu-green) !important;
	color: var(--churu-on-green) !important;
	border: 2px solid var(--churu-green-dark);
	font-weight: 700;
}

div.banner a,
div.banner a:link,
div.banner a:visited {
	color: var(--churu-on-green) !important;
}

div.pages {
	color: var(--churu-ink) !important;
	background: var(--churu-green-card) !important;
	border-color: var(--churu-line) !important;
}

div.pages a,
div.pages a.selected {
	color: var(--churu-green-dark) !important;
}

div.report {
	color: var(--churu-ink) !important;
}

/* Index: pager lives inside form[name=postcontrols]. Keep pager + delete
   on one row; do not let stock form { margin-bottom: 4em } open a hole. */
form[name="postcontrols"] {
	margin-bottom: 0;
}

body.active-index #post-moderation-fields {
	float: right;
	margin-top: 8px;
}

body.active-index div.pages {
	float: left;
	margin-top: 8px;
	vertical-align: top;
}

body.active-index .boardlist.bottom {
	clear: both;
}

#updater {
	display: block;
	clear: both;
	margin: 8px 0;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

footer {
	clear: both;
}

footer,
footer p,
footer .unimportant,
footer .unimportant *,
p.unimportant,
.unimportant,
.unimportant * {
	color: var(--churu-ink) !important;
}

footer a,
footer a:link,
footer a:visited,
.unimportant a,
.unimportant a:link,
.unimportant a:visited {
	color: var(--churu-green-dark) !important;
}

footer a:hover,
.unimportant a:hover {
	color: var(--churu-hover) !important;
}

/* Stock #thread-quick-reply is display:none; unhide and park with #thread-links */
body.active-thread #thread-quick-reply {
	display: inline;
	position: static;
	left: auto;
	right: auto;
	width: auto;
	height: auto;
}

/* -------------------------------------------------------------------------- */
/* Options / catalog / leftover watchlist                                      */
/* -------------------------------------------------------------------------- */

#options_div,
#alert_div {
	background: var(--churu-green-card);
	border: 1px solid var(--churu-green-mid);
	color: var(--churu-ink);
}

#watchlist {
	background: var(--churu-green-card);
	border: 2px solid var(--churu-green-mid);
	color: var(--churu-ink);
}

.watch-alert {
	background: var(--churu-gold);
	color: var(--churu-green-mid);
}

.theme-catalog div.thread {
	background: var(--churu-green-card);
	border-color: var(--churu-line);
}

.theme-catalog div.thread:hover {
	background: var(--churu-highlight);
	border-color: var(--churu-green-mid);
}

/* -------------------------------------------------------------------------- */
/* Homepage                                                                    */
/* -------------------------------------------------------------------------- */

div.box-wrap {
	max-width: 720px;
	margin: 24px auto;
	padding: 0 12px;
	color: var(--churu-ink);
}

div.box-wrap a,
div.box-wrap a:link,
div.box-wrap a:visited,
div.ban a,
div.ban a:link,
div.ban a:visited {
	color: var(--churu-green-dark) !important;
}

div.box-wrap a:hover,
div.ban a:hover {
	color: var(--churu-hover) !important;
}

div.box-wrap fieldset {
	background: var(--churu-green-card);
	border: 2px solid var(--churu-green-mid);
	border-radius: 8px;
	color: var(--churu-ink);
}

div.box-wrap fieldset legend {
	color: var(--churu-green-dark);
	font-weight: 700;
}

.boardlinksurl {
	float: none !important;
	display: inline-block !important;
	margin: 4px 14px 4px 0 !important;
}

div.box,
div.mainBox {
	background: var(--churu-green-card) !important;
	border: 1px solid var(--churu-green-mid) !important;
	width: auto !important;
	color: var(--churu-ink) !important;
	border-radius: 8px;
}

div.box h2,
div.mainBox h2 {
	background: var(--churu-green) !important;
	color: var(--churu-on-green) !important;
	padding: 4px 8px;
	margin: 0;
	font-size: 12pt;
}

div.box.image {
	background: transparent !important;
	border: none !important;
	max-height: none !important;
	overflow: visible !important;
}

div.box.image ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

div.box.image li {
	display: inline-block;
	margin: 6px;
	vertical-align: middle;
	max-width: 200px;
}

div.box.image img,
div.box img {
	float: none !important;
	width: auto !important;
	height: auto !important;
	max-width: 200px !important;
	max-height: 140px !important;
	object-fit: contain;
	border-radius: 10px;
}

div.box-wrap > div.ban {
	background: var(--churu-green-card) !important;
	border: 1px solid var(--churu-green-mid) !important;
	max-width: none;
	margin: 12px 0;
	border-radius: 8px;
	color: var(--churu-ink) !important;
}

div.box-wrap > div.ban h2 {
	background: transparent !important;
	color: var(--churu-green-mid) !important;
	font-size: 1em;
}

div.ban p {
	color: var(--churu-ink) !important;
}

.description,
.quoteofnow {
	text-align: center;
	color: var(--churu-ink);
}

.enter-link {
	margin: 18px 0;
	text-align: center;
}

.enter-link a {
	font-size: 2.2em;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------- */
/* Watcher / notification windows (js/watcher.js)                              */
/* -------------------------------------------------------------------------- */

.ny-bar-link a {
	color: var(--churu-green-dark) !important;
}

.ny-badge {
	font-weight: 700;
}

.ny-win {
	position: fixed;
	z-index: 200;
	width: 280px;
	max-width: 280px;
	max-height: 360px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: 6px;
	overflow: hidden;
	background: var(--churu-green-card);
	border: 2px solid var(--churu-green-mid);
	color: var(--churu-ink);
}

.ny-win-bar {
	cursor: move;
	touch-action: none;
	padding: 6px 8px;
	font-weight: 700;
	background: var(--churu-green);
	color: var(--churu-on-green);
	user-select: none;
}

.ny-win-close {
	float: right;
	color: var(--churu-on-green) !important;
	text-decoration: none;
	font-weight: 700;
}

.ny-win-tools {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	padding: 6px 8px;
	border-top: 1px solid var(--churu-green-mid);
	border-bottom: none;
	background: var(--churu-green-soft);
	font-size: 11px;
}

.ny-win-tools a {
	color: var(--churu-green-dark) !important;
	text-decoration: none;
	opacity: 0.85;
}

.ny-win-tools a:hover {
	opacity: 1;
	text-decoration: underline;
}

.ny-win-body {
	overflow: auto;
	padding: 8px 10px;
	flex: 1;
}

.ny-empty {
	opacity: 0.7;
	text-align: center;
	padding: 8px 0;
}

.ny-event,
.ny-watch-row {
	margin: 0 0 8px;
}

.ny-event-time {
	font-size: 10px;
	opacity: 0.75;
}

.ny-watch-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.ny-watch-row a {
	color: var(--churu-green-dark) !important;
}

.ny-watch-alert a {
	color: var(--churu-hair) !important;
	font-weight: 700;
}

.ny-watch-read,
.ny-watch-x {
	font-size: 11px;
	opacity: 0.7;
	text-decoration: none;
	flex-shrink: 0;
}

.ny-watch-read:hover,
.ny-watch-x:hover {
	opacity: 1;
}

.ny-watch-dead a {
	opacity: 0.55;
	text-decoration: line-through;
}

.ny-menu {
	position: relative;
	display: inline-block;
	margin-left: 4px;
}

.ny-menu-toggle {
	text-decoration: none;
	opacity: 0.55;
	padding: 0 3px;
	color: var(--churu-green-dark) !important;
}

.ny-menu-toggle:hover,
.ny-menu.open .ny-menu-toggle {
	opacity: 1;
	color: var(--churu-green-mid) !important;
}

.ny-menu-drop {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 80;
	min-width: 130px;
	padding: 4px 0;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	background: var(--churu-green-card);
	border: 1px solid var(--churu-green-mid);
}

.ny-menu.open .ny-menu-drop {
	display: block;
}

.ny-menu-drop a {
	display: block;
	padding: 4px 10px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--churu-green-dark) !important;
}

.ny-menu-drop a:hover {
	background: var(--churu-highlight);
	color: var(--churu-green-mid) !important;
}

/* -------------------------------------------------------------------------- */
/* Quick reply (stock js/quick-reply.js + js/quick-reply-ny.js)                */
/* -------------------------------------------------------------------------- */

#quick-reply {
	position: fixed;
	z-index: 190;
	width: 360px;
	min-width: 360px;
	max-width: none;
	box-sizing: border-box;
	overflow: visible;
	padding: 0;
	border-radius: 6px !important;
	border: 2px solid var(--churu-green-mid) !important;
	background: var(--churu-green-card) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#quick-reply table {
	width: 100% !important;
	max-width: none !important;
	margin: 0;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	overflow: visible;
	box-sizing: border-box;
}

#quick-reply th,
#quick-reply td {
	margin: 0;
	padding: 3px 6px;
}

#quick-reply th {
	background: var(--churu-green) !important;
	color: var(--churu-on-green) !important;
	border: none !important;
	padding: 6px 8px !important;
	font-weight: 700;
	text-align: left;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

#quick-reply th .handle {
	display: block;
	width: 100%;
	cursor: move;
	touch-action: none;
	user-select: none;
}

#quick-reply th .close-btn {
	float: right;
	padding: 0 5px;
	color: var(--churu-on-green) !important;
	text-decoration: none;
	font-weight: 700;
}

#quick-reply tr td:nth-child(2) {
	white-space: nowrap;
	text-align: right;
	padding-right: 4px;
}

#quick-reply input[type="text"],
#quick-reply select {
	width: 100%;
	padding: 2px;
	font-size: 10pt;
	box-sizing: border-box;
}

#quick-reply td:has(input[name="email"]) {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

#quick-reply input[name="email"] {
	flex: 1;
	width: auto;
	min-width: 0;
}

#quick-reply textarea {
	width: 100%;
	min-width: 280px;
	max-width: none;
	box-sizing: border-box;
	font-size: 10pt;
	resize: both;
}

#quick-reply input,
#quick-reply select,
#quick-reply textarea {
	margin: 0 0 1px 0;
}

#quick-reply input[type="file"] {
	padding: 5px 2px;
}

#quick-reply input[type="submit"] {
	width: auto;
	min-width: 6.5em;
	flex: 0 0 auto;
}

#quick-reply .nonsense {
	display: none;
}