/* common color scheme */

:root {
	--color-bg: rgb(var(--base-bg));
	--color-bg-50: rgb(var(--base-bg) / 50%);

	--color-fg: rgb(var(--base-fg) / var(--opacity-fg)); /* primary text */
	--color-fg-contrast-13: rgb(var(--base-fg) / var(--opacity-fg-contrast-13));
	--color-fg-contrast-10: rgb(var(--base-fg) / var(--opacity-fg-contrast-10));
	--color-fg-contrast-7-5: rgb(var(--base-fg) / var(--opacity-fg-contrast-7-5));
	--color-fg-contrast-6: rgb(var(--base-fg) / var(--opacity-fg-contrast-6));
	--color-fg-contrast-5: rgb(var(--base-fg) / var(--opacity-fg-contrast-5));
	--color-fg-contrast-4-5: rgb(var(--base-fg) / var(--opacity-fg-contrast-4-5));

	--color-fg-gradient-lit: rgb(var(--base-fg) / var(--opacity-gradient-lit));
	--color-fg-gradient-shadowed: rgb(var(--base-fg) / var(--opacity-gradient-shadowed));

	--base-light: 255 255 255;
	--color-light-25: rgb(var(--base-light) / 25%);

	--base-shadow: 0 0 0;
	--color-shadow: rgb(var(--base-shadow));
	--color-shadow-80: rgb(var(--base-shadow) / var(--opacity-shadow-80));
	--color-shadow-25: rgb(var(--base-shadow) / var(--opacity-shadow-25));
	--color-shadow-10: rgb(var(--base-shadow) / var(--opacity-shadow-10));
}

/* generics */

html {
	/* force a vertical scrollbar to avoid page-shifting */
	overflow-y: scroll;

	/* avoid automatic resizing of some text elements on phones in landscape */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body, textarea, input, button {
	font-family: "helvetica neue", arial, sans-serif;
	font-size: 10pt;
	color: var(--color-fg);
	line-height: 1.45em;
}

body {
	background-color: var(--color-bg);
	margin: 0 auto;
	padding-bottom: 2em;
}

a {
	color: var(--color-fg-link);
	cursor: pointer;
}

li.story div.details span.link a:visited {
	color: var(--color-fg-link-visited);
}

h1 {
	font-size: 12pt;
	font-weight: bold;
	margin: 0.5em 0 1em 0;
	padding: 0;
}
h2 {
	font-size: 11pt;
}

.clear {
	clear: both;
}

a.tag {
	background-color: var(--color-tag-bg);
	border: 1px solid var(--color-tag-border);
	border-radius: 5px;
	color: var(--color-fg-contrast-10);
	font-size: 8pt;
	margin-left: 0.25em;
	padding: 0px 0.4em 1px 0.4em;
	text-decoration: none;
	white-space: nowrap;
}
a.tag_is_media {
	background-color: var(--color-tag-media-bg);
	border-color: var(--color-tag-media-border);
	color: var(--color-fg-contrast-10);
}
a.tag_meta {
	background-color: var(--color-tag-meta-bg);
	border-color: var(--color-tag-meta-border);
}
a.tag_announce, a.tag_ask, a.tag_show, a.tag_interview {
	background-color: var(--color-lobsters-tag-special-bg);
	border-color: var(--color-lobsters-tag-special-border);
	color: var(--color-fg-contrast-10);
}

span.hat {
	border-bottom: 6px solid var(--color-hat-brim-stroke);
	border-radius: 0px 0px 4px 4px;
	padding: 1px 8px;
	vertical-align: super;
	white-space: nowrap;
}
span.hat span.crown {
	background-color: var(--color-hat-crown-fill);
	border: 1px solid var(--color-hat-crown-stroke);
	border-bottom: 0;
	border-radius: 5px 5px 0px 0px;
	font-size: 8pt;
	padding: 3px 5px 2px 5px;
	text-decoration: none;
	vertical-align: text-top;
}

span.hat span.crown, span.hat a {
	color: var(--color-fg-contrast-6);
	text-decoration: none;
}
span.hat_openbsd_developer span.crown {
	font-family: comic sans ms, comic sans, comic neue, sans-serif;
	font-size: 7pt;
}
span.hat_sysop {
	border-color: var(--color-lobsters-hat-sysop-brim-stroke);
	color: var(--color-fg-contrast-10);
}
span.hat_sysop span.crown {
	background-color: var(--color-lobsters-hat-sysop-crown-fill);
}

span.na {
	color: var(--color-fg-contrast-5);
	font-style: italic;
}

div.shorten_first_p p:first-child {
	margin-top: 0.5em;
}

hr {
	/* make it lighter than the browser's default */
	border: none;
	height: 1px;
	background-color: var(--color-fg-shape);
}
pre {
	overflow-x: auto;
}

/* default form styling */

input,
button,
select,
textarea {
	color: var(--color-fg-contrast-10);
	background-color: var(--color-box-bg);
	padding: 3px 5px;
}
textarea {
	resize: vertical;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
textarea {
	border: 1px solid var(--color-box-border);
}
input:focus, textarea:focus {
	outline-style: solid;
	outline-width: 2px;
}
input[type="checkbox"] {
	margin-top: 0.5em;
}
select {
	border: 1px solid var(--color-box-border);
}
input:focus,
textarea:focus {
	border-color: var(--color-box-border-focus);
	color: var(--color-fg);
	outline: 0;
}
textarea::placeholder {
	color: var(--color-fg-contrast-7-5);
}
.link_post {
	display: inline;
}
input[type="submit"].link_post {
	background: none;
	border: none;
	padding: 0;
	color: var(--color-fg-link);
	text-decoration: underline;
	cursor: pointer;
}

input[type="submit"]:focus,
button:focus {
	border-color: var(--color-box-border-focus);
	outline: 1px solid var(--color-box-border-focus);
}

/* these must be separate */
::-webkit-input-placeholder {
	color: var(--color-fg-contrast-5);
	font-style: italic;
}
:-moz-placeholder {
	color: var(--color-fg-contrast-5);
	font-style: italic;
}

form.disowner-form {
	display: inline;
	button {
		background: none;
		border: none;
		padding: 0;
		color: var(--color-fg-contrast-4-5);
		text-decoration: none;
		cursor: pointer;
		outline: none;
		&:not(.disable):hover {
			color: var(--color-fg-contrast-4-5);
		}
	}
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
a.button {
	background-color: var(--color-button-bg);
	border-bottom-color: var(--color-fg-shape);
	border: 1px solid var(--color-box-border);
	color: var(--color-fg);
	cursor: pointer;
	display: inline-block;
	line-height: 18px;
	padding: 2px 10px 2px 10px;
	text-align: center;
	text-decoration: none;
}
button:first-child,
input[type="button"]:first-child,
input[type="reset"]:first-child,
input[type="submit"]:first-child {
	margin-left: 0;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	color: var(--color-fg-contrast-10);
	text-decoration: none;
	background-color: var(--color-button-bg-shaded);
}

select {
	margin-top: 3px;
	min-width: 100px;
}
select:focus {
	border-color: var(--color-box-border-focus);
	color: var(--color-fg);
	outline: 0;
}
select::-moz-focus-inner {
	border: 0;
	outline: 0;
}

input:disabled,
textarea:disabled,
button:disabled {
	background-color: var(--color-box-bg-shaded);
	color: var(--color-fg-contrast-5);
}

a.button,
button.deletion,
input.deletion {
	color: var(--color-fg-negative);
	border: 1px solid var(--color-fg-negative);
}

#qrsvg {
	background-color: white;
	display: inline-block;
	padding: 5%;
}

.totp_code::-webkit-inner-spin-button,
.totp_code::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}


/* header */

header {
	font-weight: bold;
	line-height: 18px;
}

#logo {
	background-position: center;
	flex: 0 0 16px; /* width; no padding l/r */
	float: left;
	display: block;
	width: 16px;
	height: 16px;
	padding: 1px;
	margin-left: 4px;
	margin-right: 11px;
	position: relative;
}
#logo {
	background: transparent url(logo-transparent.svg) no-repeat center;
}

header#nav .navholder {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: clip;
	position: relative; /* context for nav gradients */
	width: 100%;
}
header#nav {
	box-sizing: border-box;
	display: flex;
	padding: 0.5rem 0.5rem 0 0.5rem;
}
header#nav nav.links {
	display: flex;
	width: 100%
}
header#nav a, header#subnav a, header#subnav input[type="submit"] {
	color: var(--color-fg-contrast-6);
	font-weight: bold;
	margin: 0 0.25rem;
	text-decoration: none;
}
header#subnav {
	box-sizing: border-box;
	min-height: 2em;
	line-height: 1em;
	padding: 0.5rem 0.25rem;
	text-align: right;
	width: 100%;
}
header#subnav a.current_page:last-child {
	margin-right: 0.375rem;
}
header a.current_page {
	border-bottom: 0.25em solid var(--color-fg-accent);
	padding: 0 0.25rem 0.25rem;
}
header#nav #logo, header#nav #logo ~ a {
	margin-left: 0;
}
header#nav a:last-child {
	margin-right: 0;
}
header .inbox_unread {
	color: var(--color-fg-accent);
}

#inside {
	margin: 0.5rem 0;
}

/* footer */

footer {
	box-sizing: border-box;
	display: flex;
	padding: 2em 0.5em;
	justify-content: space-between;
	width: 100%;
}
footer a {
	color: var(--color-fg-contrast-4-5);
}
footer nav a {
	padding-left: 0.75em;
	text-decoration: none;
}


/* other specifics */
div#gravatar {
	border: 2px solid var(--color-box-bg);
	border-radius: 100% 100%;
	box-shadow: 0 1px 4px var(--color-shadow-80);
	float: right;
	height: 100px;
	width: 100px;
}
div#gravatar img {
	border-radius: 50px;
	height: 100px;
	width: 100px;
}

/* stories */

ol.stories,
ol.comments,
ol.category_tags {
	padding: 0;
	list-style: none;
	margin: 0;
}

ol.comments {
	margin-left: 20px;
	margin-bottom: 0em;
	padding-left: 6px;
}
ol.comments1 {
	margin-left: -40px;
	padding-left: 0;
}
ol.comments.comments1 {
	border-left-color: transparent;
}
ol.comments1 > li.comments_subtree {
	margin-left: 11px;
}
ol.comments1 > li.comments_subtree > ol.comments {
	margin-left: 0;
	padding-left: 0;
}

div.voters {
	float: left;
	margin-top: 0px;
	width: 40px;
}

div.voters div.score {
	color: var(--color-fg-contrast-4-5);
	font-size: 9pt;
	margin-top: 1px;
	margin-bottom: -3px;
	text-align: center;
}

li.story div.voters div.score {
	font-size: 9.5pt;
	margin-top: 2px;
}

div.voters .upvoter {
	border-color: transparent transparent var(--color-fg-shape) transparent;
	border-style: solid;
	border-width: 6px;
	text-decoration: none;
	width: 0px;
	height: 0;
	margin-bottom: 0px;
	margin-left: 14px;
	padding: 0;
	display: block;
}

div.voters .upvoter:hover,
.upvoted div.voters .upvoter {
	border-bottom-color: var(--color-fg-accent);
}

div.voters .upvoter {
	border-bottom-width: 11px;
}

li.story {
	clear: both;
}
ol.stories li.story div.story_liner {
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	word-break: break-word;
}
.comment {
	clear: both;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	position: relative;
}

.comment a {
	color: var(--color-fg-contrast-7-5);
}

ol.stories li:first-child div.story_liner {
	padding-top: 0.5em;
}
li div.details {
	padding-top: 0.1em;
}

/*
Stories with negative scores are dimmed by decreasing their opacity.
However, if the flag or archive dropdowns have an opacity set, it creates a "stacking context",
which overides the Z index, so the drop down appears under textareas, making them unclickable.
Thus, the selector for opacity must not target those divs or any of their direct parents.
We must also becareful to apply to only children and not any of the parents.
Otherwise it will double apply, resulting in invidual elements being darker.

We'd like to write the following selector to express that directly, but can't until Firefox
supports it:  https://caniuse.com/?search=%3Ahas
.negative_1 *:not(.dropdown_parent, :has(*)) { ... }
*/
.negative_1 *:not(div, .dropdown_parent, .dropdown_parent > div *, .comments_label, .link, .tags, img),
.negative_1 .score {
  opacity: 0.7;
  }

.negative_3 *:not(div, .dropdown_parent, .dropdown_parent > div *, .comments_label, .link, .tags, img),
.negative_3 .score {
  opacity: 0.6;
}

.negative_5 *:not(div, .dropdown_parent, .dropdown_parent > div *, .comments_label, .link, .tags, img),
.negative_5 .score {
  opacity: 0.5;
}

.comment.bad *:not(div, .dropdown_parent, .dropdown_parent *) {
  opacity: 0.7;
}

.comment:target, li:target, p:target, div:target, span:target {
	background-color: var(--color-bg-target);
	border-radius: 8px;
}

.showing-user-comment {
	background-color: var(--color-bg-target);
	border-radius: 8px;
	padding: 3px;
}

li .link {
	font-weight: bold;
	vertical-align: middle;
}

li .link a {
	font-size: 11.5pt;
	text-decoration: none;
}

li.story .description_present {
	color: var(--color-fg-contrast-5);
	padding-left: 0.25em;
	text-decoration: none;
	vertical-align: middle;
}

li.story a.tag {
	vertical-align: middle;
}

li .tags {
	margin-right: 0.25em;
}

li .domain {
	color: var(--color-fg-contrast-4-5);
	font-style: italic;
	font-size: 9pt;
	text-decoration: none;
	vertical-align: middle;
}

.merge {
	background: url(merge.svg) no-repeat;
	width: 0.6875lh;
	height: 1lh;
	display: inline-block;
	vertical-align: middle;
}

li input.comment_folder_button {
	display: none;
}
li .comment_folder {
	display: inline-block;
	font-size: 9pt;
	color: var(--color-fg-contrast-4-5);
	letter-spacing: 0.1em;
	width: 1.5em;
 	cursor: pointer;
	float: left;
	text-align: center;
	margin-left: -4px;
}
li .comment_folder.comment_folder_inline {
	display: none;
	color: inherit;
	width: 1.4em;
	float: none;
	text-align: left;
	margin: 0;
}
li .comment_folder.comment_folder_inline.force_inline {
	display: inline-block;
}
li .comment_folder:before {
	content: "[-]";
}
li .comment_folder_button:checked ~ .comment .comment_folder:before {
	content: "[+]";
}
li .comment_folder_button:checked ~ div.comment div.comment_text {
 	display: none;
}
li .comment_folder_button:checked ~ div.comment div.voters {
	visibility: hidden;
	margin-bottom: -15px;
}
li .comment_folder_button:checked ~ ol.comments ol,
li .comment_folder_button:checked ~ ol.comments div.comment,
li .comment_folder_button:checked ~ ol.comments li {
 	display: none;
}

li.comments_subtree {
	position: relative;
}

li .comment_parent_tree_line {
	position: absolute;
	left: 30px;
	border-left: 1px dotted var(--color-fg-shape);
	top: 30px;
	bottom: 0;
}

li .comment_parent_tree_line.score_shown {
	top: 44px;
}
li .comment_parent_tree_line.can_flag {
	top: 56px;
}
li .comment_parent_tree_line.no_children {
	border-left-color: transparent;
}
li .comment_siblings_tree_line {
	position: absolute;
	left: 4px;
	border-left: 1px dotted var(--color-fg-shape);
	top: 2em;
	bottom: 0;
}
li:last-child > .comment_siblings_tree_line {
	border-left-color: transparent;
}

/* try to force a highlighted comment to stay visible */
div.comment:target div.comment_text,
div.comment:target div.voters {
	display: block !important;
}

.thread_summary {
	color: var(--color-fg-contrast-4-5);
	font-size: 9.5pt;
	/* .comment_folder (-4px margin-left + 1.5em width) + .voters (30px width) */
	margin-left: calc(-4px + 1.5em + 30px);
}
li .byline {
	color: var(--color-fg-contrast-4-5);
	font-size: 9.5pt;
}
li .byline > img.avatar {
	margin-bottom: -5px;
}
li .byline img.avatar {
	border-radius: 8px;
	height: 16px;
	margin-bottom: 2px;
	margin-right: 2px;
	vertical-align: middle;
	width: 16px;
}
li.story .byline {
	margin-top: 1px;
}
.byline a {
	color: var(--color-fg-contrast-4-5);
	text-decoration: none;
}
/* preserve selection made elsewhere when clicking */
li .byline a.comment_replier {
	user-select: none;
}
span.new_user, a.new_user,
li .byline a.new_user {
	color: var(--color-fg-affirmative);
}
span.inactive_user, a.inactive_user,
li .byline a.inactive_user,
.inactive_tag {
	color: var(--color-fg-contrast-5);
	text-decoration: line-through;
}
span.user_is_author, a.user_is_author,
li .byline a.user_is_author {
	color: var(--color-fg-author);
}
li .byline a.story_has_suggestions {
	color: var(--color-lobsters-fg-has-suggestions);
}

.last_read_newest {
	border-bottom: 2px solid var(--color-fg-shape);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	margin: 1em 0 1em 32px; /* matching div.detail */
}

li.story.hidden *:not(div, .dropdown_parent, .dropdown_parent > div *, .comments_label, .link, .tags, img),
li.story.hidden .score {
	opacity: 0.25;
}

ol.show_hidden li.story.hidden {
	opacity: 1.0 !important;
}
li.story.saved a.saver {
	color: var(--color-fg-affirmative);
}

li.story.deleted {
	opacity: var(--opacity-deleted);
}
li.story.deleted a {
	color: var(--color-fg-contrast-5) !important;
}

li div.details {
	margin-left: 32px;
}
div.story_content {
	margin-bottom: 1em;
}
ol.stories.list div.story_content {
	color: var(--color-fg-contrast-6);
	max-height: 2.6em;
	margin: 0.25em 40px 0.25em 0;
	overflow: hidden;
	text-overflow: clip;
}

div.morelink {
	float: left;
}

div.morelink,
div.page_link_buttons {
	margin-top: 1.5em;
}
div.morelink a {
	color: var(--color-fg-contrast-7-5);
	font-weight: bold;
	text-decoration: none;
}
div.page_link_buttons {
	font-weight: bold;
	margin-top: 2em;
}
div.page_link_buttons a,
div.page_link_buttons span {
	border: 1px solid var(--color-box-border);
	background-color: var(--color-button-bg);
	color: var(--color-fg-contrast-7-5);
	padding: 0.25em 0.5em;
	font-weight: bold;
	text-decoration: none;
	margin-left: 0.5em;
}
div.page_link_buttons a.cur,
div.page_link_buttons span {
	background-color: transparent;
	border-color: transparent;
	margin-left: 0.25em;
	padding-right: 0.25em;
}


div.story_text {
	margin-bottom: 1.5em;
	max-width: 700px;
	word-wrap: break-word;
}
div.story_text p {
	margin: 0.75em 0;
}

div#collapsed_story_text {
	display: none;
}
a#story_text_expander {
	display: block;
}

div.comment_text {
	font-size: 10.5pt;
	max-width: 700px;
	word-wrap: break-word;
	overflow: hidden;
}

div.comment_text blockquote,
div.markdown_help blockquote,
div.story_text blockquote {
	font-style: italic;
	margin: 0.25em 0 0 0.5em;
	padding: 0 0 0 1em;
	border-left: 2px solid var(--color-fg-contrast-5);
}

/* un-italicize italics inside a blockquote */
div.comment_text blockquote em, 
div.markdown_help blockquote em, 
div.story_text blockquote em {
	font-style: normal
}

div#collapsed_story_text div.story_text blockquote {
	font-style: normal;
}
div.comment_text pre,
div.markdown_help pre {
	margin-left: 1em;
}
div.comment_text ol {
	margin: 0;
	padding: 0 1.5em;
}
div.comment_text ol li {
	padding: 0 !important;
	margin: 0 !important;
}

div.comment_text p {
	margin: 0.5em 0;
}
div.comment_text p:first-child {
	margin-top: 0.3em;
}

div.comment_text code {
	line-height: 1.2em;
}

.dropdown_parent {
	position: relative;
}

.comments_subtree .dropdown_parent > #flag_dropdown {
	position: absolute;
	left: 0.25rem;
}

#flag_dropdown, .archive-dropdown {
	position: absolute;
	left: -0.125rem;
	width: 100px;
	border: 1px solid var(--color-box-border);
	border-bottom: 0;
	z-index: 15;
}
#flag_dropdown a, .archive-dropdown a {
	background-color: var(--color-box-bg);
	border-bottom: 1px solid var(--color-box-border);
	color: var(--color-fg-contrast-10);
	display: block;
	font-size: 9pt;
	padding: 3px;
	text-decoration: underline;
}
#flag_dropdown a:hover, .archive-dropdown a:hover {
	background-color: var(--color-box-bg-shaded);
}
#flag_dropdown a.cancel-reason {
	background-color: var(--color-box-bg-shaded);
	font-size: 8pt;
}

#modal_backdrop {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
}

/* archive; dropdown styling is with #flag_dropdown to match it */
.archive_button {
	display: none;
}
.archive_button:not(:checked) ~ .archive-dropdown {
	display: none;
}
.archive_button ~ label{
	cursor: pointer;
}



.markdown_help {
	background-color: var(--color-box-bg-shaded);
	border: 1px solid var(--color-box-border);
	padding: 0 1em;
	margin-top: 0.5em;
	display: none;
}

div.markdown_help_label {
	float: right;
	font-size: 9pt;
	line-height: 2em;
	color: var(--color-fg-contrast-4-5);
	text-decoration: underline;
	cursor: pointer;
}

.comment .preview {
	padding-left: 17px;
}

div#story_preview {
	margin-top: 2em;
	margin-left: 3.5em;
}

div#story_box input#story_url {
	width: 512px;
}
div#story_box button#story_fetch_title {
	height: 27px;
	padding-top: 1px;
	padding-bottom: 1px;
	width: 84px;
}
div#story_box input#story_title,
div#story_box input#story_moderation_reason,
div#story_box input#story_merge_story_short_id,
div#domain_box input[type=text] {
	width: 600px;
}
#story_box .url-updated,
#story_box .title-reminder,
#story_box .title-reminder-thanks
{
	display: none;
}
#story_box details ul {
	padding-left: 1em;
}
.slide-down {
	display: block !important;
	transition: height .5s ease !important;
}
div#story_box #story_tags {
	width: 624px;
}
div#story_box textarea {
	width: 600px;
}

div.comment_form_container {
	margin-left: -11px;
}

div.comment_form_container form {
	margin-left: 40px;
	max-width: 700px;
}

div.comment_form_container textarea {
	box-sizing: border-box;
	width: 100%;
}

span.comment_unread {
	color: var(--color-fg-accent);
	font-weight: 600;
	cursor: pointer;
}

/* trees */

.tree,
.tree ul {
	margin: 0 0 0 0.5em;
	padding: 0;
	list-style: none;
	position: relative;
}

.tree ul {
	margin-left: 0.5em;
}

.tree:before,
.tree ul:before {
	border-left: 1px solid var(--color-fg-shape);
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	width: 0;
}

.tree li {
	margin: 0;
	padding: 0 1.1em;
	position: relative;
}

.tree li:before {
	border-top: 1px solid var(--color-fg-shape);
	content: "";
	display: block;
	height: 0;
	left: 0;
	margin-top: -1px;
	position: absolute;
	top: 0.8em;
	width: 8px;
}

.tree li:last-child:before {
	background-color: var(--color-bg);
	border-left: 0;
	bottom: 0;
	height: auto;
}

li.noparent:before,
ul.noparent:before {
	border-top: 0 !important;
	border-left: 0 !important;
}

ul.user_tree {
	color: var(--color-fg-contrast-4-5);
}

/* /~:username/standing */
/* https://codepen.io/sosuke/pen/Pjoqqp */
.unwarned {
	filter: invert(36%) sepia(52%) saturate(0%) hue-rotate(292deg) brightness(96%) contrast(85%);
}
.warned, .jaccuse {
	filter: invert(13%) sepia(85%) saturate(4911%) hue-rotate(356deg) brightness(78%) contrast(95%);
}
table.standing tr td { vertical-align: top; }
table.standing td:first-child { text-align: right }
td.warned div, td.unwarned div {
	display: inline-block;
	height: 1em;
	line-height: 1em;
	text-align: center;
	width: 1em;
}

/* /mod dashbaord */

.mod {
	color: var(--color-fg-accent);
}
.modmodlog .mod td:first-child {
	border-left: 2pt solid var(--color-fg-accent);
}
.nominal {
	color: var(--color-fg-accent);
	font-size: 2em;
	text-align: center;
}

/* data tables */

table.data th {
	background-color: var(--color-table-header-bg);
	border-bottom: 1px solid var(--color-table-header-border);
	border-top: 1px solid var(--color-table-header-border);
	text-align: left;
}
table.data th img {
	margin-bottom: 5px;
}

table.data th.r, table.data td.r {
	text-align: right;
	padding-right: 3px;
}

table.data th,
table.data td {
	padding: 0.25em 0.5em;
}

table.data tr.bold td {
	font-weight: bold;
}

table.data.zebra tr:nth-child(even) td {
	background-color: var(--color-table-row-bg-even);
	border-bottom: 1px solid var(--color-table-row-border);
}
table.data.zebra tr:nth-child(odd) td {
	background-color: var(--color-table-row-bg-odd);
	border-bottom: 1px solid var(--color-table-row-border);
}
table.data tr.nobottom td {
	border-bottom: 0px;
	padding-bottom: 0px;
}
table.data tr.nobottom td.wrap {
	overflow-wrap: anywhere;
}
table.data.tall td {
	vertical-align: top;
}

table.data td p:first-child {
	margin-top: 0;
}
table.data td p:last-child {
	margin-bottom: 0;
}
table.data pre {
	overflow-x: scroll;
	max-width: 800px;
}
table.moderations tr > td:nth-child(1) {
	white-space: nowrap;
}

/* boxes */

.box label {
	display: block;
	float: left;
	margin-bottom: 4px;
}

.box label.required {
	font-weight: bold;
}
.box img {
	vertical-align: middle;
}
.box label,
.box > span,
.box select,
.box br {
	line-height: 2em;
}
.box br {
	clear: left;
}
.box .boxline {
	clear: both;
	margin-bottom: 0.5em;
}
.box p {
	margin-top: 1em;
}

.box textarea {
	margin-bottom: 4px;
	width: 75%;
}

.box label {
	width: 7em;
	line-height: 2em;
	vertical-align: middle;
}
.box div.d {
	margin-left: 7em;
}

.box input.normal,
.box label.normal {
	display: inline;
	float: none;
	vertical-align: middle;
}

.box span.d label,
.box td label,
.box div.d label {
	display: inline;
	float: none;
	vertical-align: baseline;
}

.box span.d a.tag {
	vertical-align: middle;
}

.hint {
	color: var(--color-fg-contrast-5);
	font-style: italic;
}
.hint.indent {
	margin-left: 12em;
}

.box.wide label {
	width: 12em;
}
.box.wide div.d {
	margin-left: 12em;
}

.display-block {
	display: block;
}

/* for flash_notices() and flash_errors() */

div.flash-error,
div.flash-notice,
div.flash-success,
div.user-stats {
	position: relative;
	padding: 7px 15px;
	margin-bottom: 18px;
	border-color: var(--color-shadow-10) var(--color-shadow-10) var(--color-shadow-25);
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 var(--color-light-25);
}
div.flash-error a,
div.flash-notice a,
div.flash-success a {
	font-weight: bold;
	color: var(--color-fg-contrast-13);
}
div.flash-error .similar a,
div.flash-notice .similar a,
div.flash-success .similar a,
div.user-stats a {
	font-weight: normal;
}
div.flash-error div,
div.flash-notice div,
div.flash-success div {
	margin-top: 5px;
	margin-bottom: 2px;
	line-height: 28px;
}
div.flash-error {
	background-color: var(--color-flash-bg-error);
}
div.flash-success {
	background-color: var(--color-flash-bg-success);
}
div.flash-notice {
	background-color: var(--color-flash-bg-notice);
}
div.user-stats {
	background-color: var(--color-box-bg-shaded);
}

div.flash-error h2,
div.flash-notice h2,
div.flash-success h2,
div.user-stats h2 {
	font-size: 1.25em;
	margin: 0;
}

/* Using #story_holder for precedence over TomSelect's vendored CSS  */

#story_holder .ts-control {
	background-color: var(--color-box-bg);
	border: 1px solid var(--color-box-border);
	border-radius: 0px;
	box-shadow: none;
	box-sizing: border-box;
	margin-bottom: 2px;
	padding: 2px 0 0px 5px;
	/* supposed to be inherited from body, but TS overwrites */
	font-family: "helvetica neue", arial, sans-serif;
	font-size: 13.33px;
	color: var(--color-fg);
	line-height: 1.5rem;
}

#story_holder .ts-control:focus-within {
	border-color: var(--color-box-border-focus)
}

#story_holder .ts-control .data-ts-item { /* item already selected by user*/
	color: var(--color-fgcontrast-10);
	line-height: 13px;
	margin: 3px 5px 3px 0;
	padding: 3px 0.5rem 3px 1rem !important;
	position: relative;
	cursor: default;
}

#story_holder .ts-control .data-ts-item a {
	display: block;
	position: absolute;
	height: 13px;
	padding: 2px;
	left: 0px;
	margin-left: 0;
	/*
	For a decade, select2 had the `x` to remove a tag on the left. TomSelect puts it
	on the right, so we hide that and insert an`x` on the left with `a::after` below.
	*/
	visibility: hidden;
}

#story_holder .ts-control .data-ts-item a::after {
	content: "\2715";
	display: block;
	position: absolute;
	color: grey;
	font-size: 10px;
	outline: none;
	padding-right: 3px;
	top: 0px;
	width: 12px;
	cursor: pointer;
	visibility: visible;
}

#story_holder .ts-dropdown {
	position: relative;
	width: 100%;
	background: #fff;
	background-color: var(--color-box-bg);
	border-color: var(--color-box-border-focus);
	border-radius: 0 0 4px 4px;
	border-top: 1px solid #aaa;
	box-shadow: 0 4px rgb(0 0 0 / 15%);
	margin: 0px;
	padding: 0px;
	z-index: 999;
}

#story_holder .ts-dropdown .ts-dropdown-content .active {
	background: var(--color-bg-accent);
	color: var(--color-box-bg);
}

#story_holder .ts-dropdown-content {
	max-height: 200px;
	padding: 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
}

#story_holder .ts-dropdown .option {
	color: var(--color-fg);
	font-family: "helvetica neue", arial, sans-serif;
	line-height: 80%;
	margin: 0px;
	padding: 7px 7px 8px;
	cursor: pointer;
}

/* pushover */
input[type="submit"].link_post.pushover_button {
	box-sizing: border-box;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QAJQCeAPHNVUx7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wEPAh02ee0QVwAAACZpVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVAgb24gYSBNYWOV5F9bAAABqElEQVQ4y62TvUtbURjGf+fek2vQpMF2ED9QkfpR6VLaDoIEF0UKWQRBQ+yQP6GDU0Xw4y/obOgg6dDSJVS61MlBcXFQB6M1BsF+IES9NnrzcRy8xpvrBwH7bOflfc553+d5jsCF9tiRDwgBEaDXLi8B80AiGQ2Yzn7hIo8Cce5HOBkNfLo6aA7ydAVkgLjdez3BrS8rRbBJEmyU+AyBVVDE1i1SJ6psEmHvfOLktj0SjL/2snKQx8wpNg+LBJt0RjoN+j6bqOvN/ZotWAldtYK5gWpmV84YbPUw2ePlb7bI73+Kep+OLFONkGarXcK7l16+7+V57BW8qJMs7Ob5k4VQm4fVXzlyquyGiHRYBcC+WWQxnSP63AAgtn7O0FNJ9xOd0W+nbkF7pbsytXxOQw30N0t2MgX6Wzy8qtMJL5zy81jdsETaIXnjLL7trkLqGl+2svxI5/mwZt1l6ZJmJ6yEGqkYbveQOioQ2yiz7TbMa0DCWRnuMPBXaXzcsJx23YWEZmc7fJkqxdgzg8xZka/bFhVE2hSuKL+nMswko4GJ//KZxEO/8wVmfpjJTWeCTQAAAABJRU5ErkJggg==) 2px 2px no-repeat, linear-gradient(var(--color-fg-gradient-lit), var(--color-fg-gradient-shadowed));
	border: 1px solid var(--color-box-border);
	border-radius: 3px;
	color: var(--color-fg);
	display: inline-block;
	font: 11px/18px "Helvetica Neue",Arial,sans-serif;
	font-weight: bold;
	cursor: pointer;
	height: 22px;
	padding-left: 20px;
	padding-right: 5px;
	overflow: hidden;
	text-shadow: 0px 1px 0px var(--color-bg-50);
	text-decoration: none;
	vertical-align: middle;
}

/* search */

.searchresults summary .heading {
	font-weight: bold;
	font-size: 11pt; /* h2 */
}
.searchresults summary {
	margin: 1em 0;
}
.search_parse dd {
	margin-bottom: 0.5em;
}
.searchq {
	background: var(--color-box-bg-shaded);
	border-radius: 4px;
	font-family: monospace;
	padding: 2px;
}


@media screen and (min-width: 481px) {
	body {
		max-width: 900px;
		padding-bottom: 2em;
	}

	header#nav {
		margin: 1em 0 0.5rem 0;
		padding: 5px 10px;
	}
	header#nav nav.links {
		flex-flow: row wrap;
		justify-content: start;
	}
	header#nav nav.links > .corner {
		display: inline;
		margin-left: auto;
	}
	header#nav nav.corner {
		display: none;
	}
	header#subnav a:last-child {
		margin-right: 0.5rem;
	}

	div#inside {
		margin-left: calc(
			10px +   /* header#nav padding-left */
			18px +   /* #logo width + padding l/r */
			0.25rem + /* header#nav a margin-right for logo */
			0.25rem   /* header#nav a margin-left for first link in header#nav */
		);
		margin-right: 10px; /* header#nav padding-right */
	}

	/* hang voters into left margin to center under logo */
	ol.stories,
	#inside > ol.comments {
		/* .voters width + .voters padding-right */
		margin-left: -32px;
	}
	ol.stories div.voters,
	#inside > ol.comments div.voters {
		width: 30px;
	}
	ol.stories .upvoter,
	#inside > ol.comments .upvoter {
		margin-left: 9px;
	}

	.help {
		margin-top: 2em;
	}


	div#story_box .actions {
		margin-left: 7em;
		width: 610px;
	}
	#story_holder .ts-control {
		display: inline-block;
		position: absolute;
		width: 611px;
	}
}

@media only screen and (max-width: 480px) {
	html {
		-webkit-text-size-adjust: none;
	}

	header#nav .corner .inbox {
		font-size: 18px;
		vertical-align: bottom;
	}
	header#nav .corner .inbox .inbox_unread {
		font-size: 10pt;
	}
	header#nav {
		background-color: var(--color-box-bg-shaded);
		border-bottom: 1px solid var(--color-box-border);
		flex-flow: row nowrap;
		height: 44px;
		min-width: 100%;
		padding-top: 0.75rem;
	}
	header#nav nav.links {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: clip;
	}

	header#nav .navholder:before, header#nav .navholder:after {
		content: "";
		height: 100%;
		pointer-events: none;
		position: absolute;
		top: 0px;
		width: 2em;
		z-index: 1;
	}
	header#nav .navholder:before {
		background: linear-gradient(to right, var(--color-box-bg-shaded), transparent);
		left: -1em;
	}
	header#nav .navholder:after {
		right: 0px;
		background: linear-gradient(to right, transparent, var(--color-box-bg-shaded));
	}
	header#nav nav.links > .corner {
		display: none;
	}
	header#nav nav.corner {
		display: block;
	}
	header#subnav {
		background-color: var(--color-box-bg-shaded);
	}
	header#subnav a:last-child {
		margin-right: 0.75rem;
	}

	header#nav .user {
		display: inline;
		margin-top: 0.25em;
		clear: both;
	}

	header#nav a {
		padding-right: 0.25em;
		padding-left: 0;
	}
	div#inside {
		margin: 0.5rem;
	}

	.comment {
		padding-left: 0;
	}

	.comment .preview {
		padding-left: 25px;
	}

	ol.comments { margin-left: 10px }
	ol.stories,
	div#inside > ol.comments {
		margin: 0 0.5rem 0 -0.5rem;
		padding-left: 0;
	}
	ol.comments1 > li.comments_subtree {
		margin-left: 0;
	}

	li .comment_folder {
		display: none;
	}
	li .comment_folder.comment_folder_inline {
		display: inline-block;
	}

	li .comment_parent_tree_line,
	li .comment_siblings_tree_line {
		border-left-color: transparent;
	}

	div.voters {
		margin-left: 0.25em;
		margin-top: 0px;
		width: 30px;
	}
	div.voters a.upvoter {
		margin-top: -5px;
	}

	div.comment_form_container {
		margin-left: 0;
	}

	div.comment_form_container form {
		margin-left: 35px;
	}

	div.voters a.upvoter {
		margin-left: 6px;
		border-width: 9px;
	}

	/* explicitly reset color when not upvoted, since previously-upvoted arrow
	 * will still be triggering :hover until next tap */
	div.voters .upvoter:hover {
		border-bottom-color: var(--color-fg-shape);
	}
	.upvoted div.voters .upvoter {
		border-bottom-color: var(--color-fg-accent);
	}

	ol.stories.list {
		margin-top: 0;
	}

	ol.stories.list li.story {
		display: table;
	}
	ol.stories.list li.story div.story_liner {
		background-color: var(--color-mobile-story-liner-bg);
		display: table-cell;
		padding-top: 0.5em;
		padding-bottom: 0.75em;
		width: 100%;
	}
	ol.stories.list li.story .mobile_comments {
		display: table-cell !important;
		font-size: 11pt;
		min-width: 40px;
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
	}
	ol.stories.list li.story .mobile_comments span:before {
		border-style: solid;
		border-width: 0px 6px 3px 0px;
		border-color: var(--color-mobile-story-comments-bubble-fill);
		border-bottom-right-radius: 13px;
		bottom: -10px;
		content: "";
		display: block;
		height: 7px;
		left: 4px;
		position: absolute;
		width: 5.4px;
		z-index: 10;
	}
	ol.stories.list li.story .mobile_comments span:after {
		border-bottom-right-radius: 10px;
		border-color: var(--color-mobile-story-comments-bubble-fill);
		border-style: solid;
		border-width: 0px 3px 3px 0px;
		bottom: -10px;
		content: "";
		display: block;
		height: 7px;
		left: 5px;
		position: absolute;
		width: 10px;
		z-index: 10;
	}
	ol.stories.list li.story .mobile_comments span {
		background-color: var(--color-mobile-story-comments-bubble-fill);
		border: 1px solid var(--color-mobile-story-comments-bubble-fill);
		border-radius: 5px;
		color: var(--color-fg);
		display: block;
		font-size: 9pt;
		margin: 0 0.5em;
		padding: 2px;
		position: relative;
		text-align: center;
	}
	ol.stories.list li.story .mobile_comments:active span,
	ol.stories.list li.story .mobile_comments:focus span {
		outline: 0;
	}
	ol.stories.list li.story .mobile_comments.zero span {
		background-color: var(--color-mobile-story-comments-bubble-fill-zero);
		color: var(--color-fg-contrast-4-5);
	}
	ol.stories.list li.story .mobile_comments.zero span,
	ol.stories.list li.story .mobile_comments.zero span:before,
	ol.stories.list li.story .mobile_comments.zero span:after {
		border-color: var(--color-mobile-story-comments-bubble-fill-zero);
	}
	ol.stories.list li.story .comments_label {
		display: none;
	}

	li div.details {
		margin: 0 0 0 36px;
	}
	div.story_content {
		margin: 0 0 0 28px;
	}
	div.morelink {
		margin-left: 28px;
		float: none;
	}
	li.story div.byline {
		font-size: 10pt;
	}

	div.box label,
	div.boxline label {
		display: block;
		width: 100% !important;
	}
	div.box div.d,
	div.box.wide div.d {
		margin-left: 0;
	}

	div.boxline textarea,
	div.boxline input[type="text"],
	div.comment textarea {
		max-width: 90%;
	}

	div.markdown_help_label {
		display: none;
	}
	div.markdown_help_label_mobile {
		display: inline !important;
		margin-right: 2em;
	}

	div#story_box input,
	div#story_box button,
	div#story_box textarea,
	div#story_box #story_tagsa,
	div.actions {
		margin: 0 !important;
	}

	div#story_box #story_tags {
		min-width: 305px !important;
	}

	div#gravatar {
		float: none;
	}

	div#user_about {
		margin-left: 0;
	}

	#story_holder .ts-wrapper .multi {
		margin-left: 0rem;
	}

	footer nav {
          text-align: right;
	}
	.indent {
		margin-left: 2em;
	}
}
@media print {
	.comment_folder,
	.comment_form {
		display: none;
	}
}
