@charset "UTF-8";

/*
Lobsters doesn't use CSS features until the "Widely available" Baseline standard:
https://web-platform-dx.github.io/web-features/

But I make an unprincipled exception for :has because it solves so many big problems.
*/

:root {
	/* common color scheme */
	--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));

	/* dimensions */
	--comment-controls-height: 1.2lh;
}

/* 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.filtered {
	border: 1.5px dotted;
	font-style: italic;
}
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);
}

.hat {
	width: min-content;
	border-bottom: 6px solid var(--color-hat-brim-stroke);
	border-radius: 0px 0px 4px 4px;
	padding: 1px 8px;
	vertical-align: super;
	white-space: nowrap;
}
.hat .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;
}

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

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;
	color: var(--color-fg-link);
	cursor: pointer;
	outline: none;
	padding: 0;
	text-decoration: underline;
}
.byline input[type="submit"].link_post {
	color: var(--color-fg-contrast-4-5);
	text-decoration: none;
}

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;
}

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);
}

summary {
	cursor: pointer;
}

#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: transparent url("/assets/logo-transparent-e4f2f8b4.svg") no-repeat 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;
}

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;
	margin-bottom: 1rem;
}
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;
}

.message .voters {
	font-size: 20px;
}

.notifications li {
	margin-bottom: 1lh;
}

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

.upvoter:before {
	content: "\25b2";
	color: transparent;
	font-size: 1.2rem;
	-webkit-text-stroke: 1px var(--color-fg-contrast-4-5);
}
.upvoted .upvoter:before, .upvoter:hover:before {
	color: var(--color-fg-accent);
	-webkit-text-stroke: 1px var(--color-fg-accent);
}
.upvoter {
	color: var(--color-fg-contrast-4-5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
	text-decoration: none;
	font-size: 9.5pt;
}
.upvoter:focus { outline: none; } /* don't outline after upvote click */
.upvoter:focus-visible { outline: 2px solid var(--color-fg-link); } /* do outline when tabbing */

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("/assets/merge-8392ca4a.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;
	text-align: center;
}
li .comment_folder:before {
	content: "[−]";
}
li .comment_folder_button:checked ~ .comment .comment_folder:before {
	content: "[+]";
}
/* folding a comment hides the text and voters, but #c_abc123 anchors override */
li .comment_folder_button:checked ~ div.comment:not(:target) div.comment_text {
	display: none;
}
li .comment_folder_button:checked ~ div.comment:not(:target) div.voters .upvoter {
	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;
	border-left: 1px dotted var(--color-fg-shape);
	top: 0.5em;
	left: 1em;
	bottom: 0;
}
li .comment_parent_tree_line.score_shown {
	top: 3.6lh;
}
li .comment_siblings_tree_line {
	position: absolute;
	left: -1em;
	border-left: 1px dotted var(--color-fg-shape);
	top: 0;
	bottom: 0;
}
li:last-child > .comment_siblings_tree_line {
	border-left-color: var(--color-bg);
}

.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;
}
.comment.replied .flagger,
.comment.flagged .comment_replier {
	color: var(--color-fg);
	cursor: default;
	pointer-events: none;
	text-decoration: line-through;
}
.comment.replied .flagger {
	color: var(--color-fg-contrast-4-5);
}
/* 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;
}
.controls {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: start;
	margin-top: 1rem;
}
.controls .buttons, .controls .hats, .controls .markdown_help summary {
	height: var(--comment-controls-height);
}

div.comment_text blockquote,
.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,
.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,
.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;
}



.controls details {
	margin-left: auto;
}
#story_box .markdown_help summary {
	width: calc(7em + 610px);
}
.markdown_help summary {
	color: var(--color-fg-contrast-4-5);
	font-size: 9pt;
	text-align: right;
}
.controls .markdown_help[open] summary {
	margin-top: calc(var(--comment-controls-height) * -1);
}

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 form {
	margin-left: 40px;
	max-width: 700px;
}

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

.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;
}
.mod_activities {
	padding: 0;
}
.mod_activities li ul {
	list-style-type: none;
	padding: 0;
}
.mod_activities .moderation {
	list-style: '🕮';
}
.mod_activities .mod_note {
	list-style: '🔑';
}

/* 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,
.mod_activities li:nth-child(even) {
	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,
.mod_activities li:nth-child(odd) {
	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;
}

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;
}

.row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.labelled_grid {
	display: grid;
	grid-template-columns: minmax(10rem, min-content) 1fr;
	word-break: break-word;
	column-gap: 1rem;
	row-gap: 12px;
}

.labelled_grid textarea,
.labelled_grid input[type="text"],
.labelled_grid input[type="password"],
.labelled_grid input[type="email"] {
	width: 100%;
	box-sizing: border-box;
}
.labelled_grid input[type="text"],
.labelled_grid input[type="password"] {
	height: 1.5rlh;
}

.labelled_grid input[type="checkbox"] {
	margin: 0;
	vertical-align: middle;
	width: min-content;
}

.labelled_grid input[type="radio"] {
	margin: 0;
	vertical-align: middle;
}

.labelled_grid select {
	margin: 0;
}

.labelled_grid > p {
	grid-column: 1 / -1;
}

section + section {
	margin-top: 2rem;
}

section section + section {
	margin-top: 1.5rem;
}

span.hint {
	margin-left: 0.25rem;
}

div.hint {
	margin-top: 0.25rem;
}

.user-stats p {
	margin-top: 1em;
}

.user-stats br {
	line-height: 2em;
}

.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;
	}
	.labelled_grid > label:after {
		content: ':';
	}

	.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 0 -0.5rem;
		padding-left: 0;
	}
	ol.comments1 > li.comments_subtree {
		margin-left: 0;
	}

	li .comment_siblings_tree_line {
		border-left: transparent;
	}

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

	div.comment_form_container {
		margin-left: 0;
	}

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

	/* explicitly reset color when not upvoted, since previously-upvoted arrow
	 * will still be triggering :hover until next tap */
	div.voters .upvoter:hover:before {
		color: transparent;
		-webkit-text-stroke: 1px var(--color-fg-contrast-4-5);
	}
	.upvoted div.voters .upvoter:before {
		color: var(--color-fg-accent);
		-webkit-text-stroke: 1px 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#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;
	}


	.labelled_grid {
		grid-template-columns: minmax(5rem, min-content) 1fr;
	}

	/* For the mobile view of the grid, we want most things to be full-width */
	.labelled_grid > * {
		grid-column: 1 / -1;
	}

	/*
	   Checkbox controls, however, should appear inline. For these, we want to put
	   the label in column 1, and the control (or its container) in column 2.
	*/
	.labelled_grid	label.for_checkbox {
		grid-column: 1;
	}

	.labelled_grid > input[type="checkbox"],
	.labelled_grid > *:has(input[type="checkbox"]) {
		grid-column: 2;
	}

	/* Add a colon to the label for checkboxes, as in the desktop view */
	.labelled_grid	label.for_checkbox:after {
		content: ":";
	}

	/* Force hints onto the next line, with no indent */
	.labelled_grid input[type="checkbox"]:has(+ .hint) {
		display: block;
	}
	.labelled_grid input[type="checkbox"] + .hint {
		margin-left: 0;
	}
}
@media print {
	.comment_folder,
	.comment_form {
		display: none;
	}
}