/*
 * Feuille de style reprise de Lobsters : https://github.com/lobsters/lobsters (commit ab6fe24)
 * Fichiers d'origine : app/assets/stylesheets/application.css, light-normal.css, dark-normal.css
 * Modifications de Sandel (retraits, fusion des palettes, quelques règles ajoutées à la fin) :
 * voir le fichier NOTICE. Les blocs repris n'ont pas été modifiés.
 *
 * Licence de Lobsters, reproduite sans modification :
 *
 * Copyright (c) 2012-2019
 * Created by joshua stein <jcs@jcs.org>
 * For full list of contributors run `git log --format='%aN <%aE>' | sort -u`
 *
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 * 3. The name of the author may not be used to endorse or promote products
 *    derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
 * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
 * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
 * IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT,
 * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
 * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/*
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 */
	--font-size-default: 1rem;
	--font-size-tags: 0.66rem;

	--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-accent: currentColor;
	--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;
	--input-outline-width: 2px;
}

/* palette claire (par défaut) */
:root {
	/* monochrome */
	--base-bg: 254 254 254;
	--base-fg: 51 51 51;

	--opacity-fg: 100%; /* primary text */
	--opacity-fg-contrast-13: 94%;
	--opacity-fg-contrast-10: 84%;
	--opacity-fg-contrast-7-5: 75%;
	--opacity-fg-contrast-6: 67%;
	--opacity-fg-contrast-5: 63%;
	--opacity-fg-contrast-4-5: 59%;

	--opacity-gradient-lit: 0%;
	--opacity-gradient-shadowed: 13%;

	--opacity-shadow-80: 80%;
	--opacity-shadow-25: 25%;
	--opacity-shadow-10: 10%;

	--opacity-deleted: 0.6;

	/* backgrounds and foregrounds */
	--color-bg-accent: rgb(172 19 13);
	--color-bg-target: rgb(255 252 215);

	--color-fg-link: rgb(28 89 209);
	--color-fg-link-visited: rgb(95 134 212);
	--color-fg-accent: rgb(172 19 13); /* red as in lobste.rs */
	--color-fg-negative: rgb(139 0 0); /* red as in warning */
	--color-fg-affirmative: rgb(0 128 0);
	--color-fg-author: rgb(96 129 189);
	--color-fg-shape: rgb(187 187 187);

	/* elements */
	--color-box-bg: #fff;
	--color-box-bg-shaded: #eee;
	--color-box-border: #ccc;
	--color-box-border-focus: #808080;

	--color-button-bg: #fafafa;
	--color-button-bg-shaded: #e6e6e6;

	--color-table-header-bg: #eaeaea;
	--color-table-header-border: #cacaca;
	--color-table-row-bg-even: #f8f8f8;
	--color-table-row-bg-odd: #f5f5f5;
	--color-table-row-border: #eaeaea;

	--color-tag-bg: #fffcd7;
	--color-tag-border: #d5d458;
	--color-tag-media-bg: #ddebf9;
	--color-tag-media-border: #b2ccf0;
	--color-tag-meta-bg: #e0e0e0;
	--color-tag-meta-border: #c8c8c8;

	--color-hat-crown-fill: #ddd;
	--color-hat-crown-stroke: #eee;
	--color-hat-brim-stroke: #bbb;

	--color-flash-bg-error: #fdcfcc;
	--color-flash-bg-success: #dff0d8;
	--color-flash-bg-notice: #cce6ee;

	--color-lobsters-fg-has-suggestions: #bd6060;

	--color-lobsters-tag-special-bg: #f9ddde;
	--color-lobsters-tag-special-border: #f0b2b8;

	--color-lobsters-hat-sysop-crown-fill: #ddc7c7;
	--color-lobsters-hat-sysop-brim-stroke: #bbb2b2;

	/* mobile */
	--color-mobile-story-comments-bubble-fill: #ccc;
	--color-mobile-story-comments-bubble-fill-zero: #d8d8d8;
}

/* palette sombre, selon le système */
@media (prefers-color-scheme: dark) {
	:root {
		/* monochrome */
		--base-bg: 12 12 12;
		--base-fg: 255 255 255;

		--opacity-fg: 87%; /* primary text */
		--opacity-fg-contrast-13: 87%;
		--opacity-fg-contrast-10: 87%;
		--opacity-fg-contrast-7-5: 77%;
		--opacity-fg-contrast-6: 69%;
		--opacity-fg-contrast-5: 64%;
		--opacity-fg-contrast-4-5: 61%;

		--opacity-gradient-lit: 13%;
		--opacity-gradient-shadowed: 3%;

		--opacity-shadow-80: 80%;
		--opacity-shadow-25: 25%;
		--opacity-shadow-10: 10%;

		--opacity-deleted: 0.6;

		/* backgrounds and foregrounds */
		--color-bg-accent: rgb(253 78 72);
		--color-bg-target: rgb(61 53 11);

		--color-fg-link: rgb(138 177 255);
		--color-fg-link-visited: rgb(79 138 255);
		--color-fg-accent: rgb(207 54 49); /* red as in lobste.rs */
		--color-fg-negative: rgb(190 45 45); /* red as in warning */
		--color-fg-affirmative: rgb(42 180 42);
		--color-fg-author: rgb(80 112 177);
		--color-fg-shape: rgb(80 80 80);

		/* elements */
		--color-box-bg: #141414;
		--color-box-bg-shaded: #202020;
		--color-box-border: #303030;
		--color-box-border-focus: #808080;

		--color-button-bg: #181818;
		--color-button-bg-shaded: #242424;

		--color-table-header-bg: #262626;
		--color-table-header-border: #404040;
		--color-table-row-bg-even: #181818;
		--color-table-row-bg-odd: #1b1b1b;
		--color-table-row-border: #262626;

		--color-tag-bg: #3b320d;
		--color-tag-border: #665501;
		--color-tag-media-bg: #15293d;
		--color-tag-media-border: #214669;
		--color-tag-meta-bg: #2c2c2c;
		--color-tag-meta-border: #484848;

		--color-hat-crown-fill: #3b3b3b;
		--color-hat-crown-stroke: #202020;
		--color-hat-brim-stroke: #2a2a2a;

		--color-flash-bg-error: #451714;
		--color-flash-bg-success: #273820;
		--color-flash-bg-notice: #142e36;

		--color-lobsters-fg-has-suggestions: #df7171;

		--color-lobsters-tag-special-bg: #3b1719;
		--color-lobsters-tag-special-border: #611a21;

		--color-lobsters-hat-sysop-crown-fill: #3e2f2f;
		--color-lobsters-hat-sysop-brim-stroke: #2c2222;

		/* mobile */
		--color-mobile-story-comments-bubble-fill: #282828;
		--color-mobile-story-comments-bubble-fill-zero: #1c1c1c;
	}
}

/* generics */

html {
	font-size: var(--font-size-default);
	/* 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;
}

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

body {
	background-color: var(--color-bg);
	max-width: 60rem;
	margin: 1.25rem auto 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

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

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

h1 {
	margin: 0.5em 0 1em 0;
}

.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: var(--font-size-tags);
	margin-left: 0.25em;
	padding: 0px 0.4em 1px 0.4em;
	text-decoration: none;
	white-space: nowrap;
}

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 */

a.button,
input,
button,
select,
textarea {
	color: var(--color-fg-contrast-10);
	font: inherit;
	background-color: var(--color-box-bg);
	padding: 3px 5px;
	margin: var(--input-outline-width);
}

input:focus,
button:focus,
select:focus,
textarea:focus {
	outline: var(--input-outline-width) solid var(--color-box-border-focus);
	border-color: transparent;
	color: var(--color-fg);
}

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[type="checkbox"] {
	margin-top: 0.5em;
}

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 {
	border: 1px solid var(--color-box-border);
	margin-top: 3px;
	min-width: 100px;
}

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;
	overflow-wrap: break-word;
}

/* Remove style from button to so it will look like a link */
input.btn-link:hover,
input.btn-link {
	border: 0;
	margin: 0;
	padding: 0;
	background-color: inherit;
	color: var(--color-fg-contrast-4-5);
	line-height: 1;
}

input.btn-link:focus-visible {
	outline: auto;
}

.sr-only,
#aria-announce {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border-width: 0;
}

/* Site Header */

#header {
	font-weight: bold;
	padding: 0 0.6rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

#header ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 0.5rem;
}

#logout .btn-link,
#header a {
	text-decoration: none;
	color: var(--color-fg-contrast-6);
}

#header a[aria-current=page] {
	text-decoration: underline 0.25rem var(--color-fg-accent);
	text-underline-offset: 0.4rem;
}

#header .push-right {
	margin-left: auto;
}

#header-top {
	display: flex;
	gap: 0.25rem;
}

#header-top nav {
	flex: 1;
	margin-left: 0.2rem;
}

/* Main */

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

/* 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;
	text-align: center;
	width: 40px;
}

.voters button {
	background: transparent;
	padding: 0;
}

.upvoter:before {
	content: "\25b3";
	font-size: 1.2rem;
	font-family: system-ui, monospace, sans-serif;
}

button.upvoter:before {
	margin-bottom: 0.3rem;
}

.upvoter:hover:before,
.upvoted .upvoter:before {
	content: "\25b2";
	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;
	border: none;
}

.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;
	overflow-wrap: break-word;
}

.comment {
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	position: relative;
}

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

ol.stories li:first-child div.story_liner {
	padding-top: 0;
}

li div.details {
	padding-top: 0.1em;
}

li div.details {
	margin-left: 32px;
}

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

.comments_subtree:target {
	background: transparent;
	border-radius: 0;
}

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

li .link a {
	text-decoration: none;
}

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

li .tags {
	margin-right: 0.25em;
	display: inline-block;
	vertical-align: middle;
	padding: 0;
}

li .tags li {
	display: inline-block;
}

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

li.comments_subtree {
	clear: both;
	position: relative;
}

li .byline {
	color: var(--color-fg-contrast-4-5);
}

li.story .byline {
	margin-top: 1px;
}

.byline a {
	color: var(--color-fg-contrast-4-5);
	text-decoration: none;
}

.details input:hover,
.details input:focus-visible,
.details summary:hover,
.details summary:focus-visible,
.details a:hover:not(details *),
.details a:focus-visible:not(details *) {
	position: relative;
	z-index: 10;
	background: var(--color-bg);
	box-shadow: 0 0 0 0.25rem var(--color-bg);
}

li .byline form {
	display: inline-block;
}

nav.morelink {
	float: left;
}

nav.morelink {
	margin-top: 1.5em;
}

#page-link-buttons,
#page-link-buttons a,
nav.morelink a {
	color: var(--color-fg-contrast-7-5);
	font-weight: bold;
	text-decoration: none;
}

nav.morelink a[rel="prev"]::before {
	content: "<< "/"";
}

nav.morelink a[rel="next"]::after {
	content: " >>"/"";
}

div.story_text {
	margin-bottom: 1.5em;
	max-width: 45rem;
	overflow-wrap: break-word;
}

div.story_text p {
	margin: 0.75em 0;
}

div.comment_text {
	max-width: 45rem;
	overflow-wrap: break-word;
	overflow: hidden;
}

.controls {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
	justify-content: start;
	margin-top: 1rem;
}

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

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

/* 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.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;
}

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

.labelled_grid {
	display: grid;
	grid-template-columns: minmax(10rem, min-content) 1fr;
	overflow-wrap: 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.8rem;
}

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

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

/* 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.flash-error h2,
div.flash-notice h2,
div.flash-success h2,
div.user-stats h2 {
	margin: 0;
}

/* Ajouts propres à Sandel (pas dans Lobsters), sous AGPL-3.0-only comme le reste de Sandel :
   SPDX-License-Identifier: AGPL-3.0-only */
#header ul { flex-wrap: wrap; }
#inside { margin-left: 0.6rem; margin-right: 0.6rem; }
form.i { display: inline; margin: 0; }
nav.morelink { margin-right: 1.5em; }
ul.tree { margin-left: 0; }
footer { margin-top: auto; }

/* Pas de barre de défilement permanente (Lobsters en impose une) et pas de défilement quand la page
   est courte : le pied de page est poussé en bas en comptant les marges verticales du body
   (1.25rem en haut, 2rem en bas), sans quoi la page dépasse toujours l'écran de 3.25rem. */
html { overflow-y: auto; }
body { min-height: calc(100vh - 3.25rem); min-height: calc(100dvh - 3.25rem); }

input[type="url"], input[type="search"], input[type="number"], input[type="text"], select { max-width: 100%; }

/*
 * Vue mobile : reprise du bloc @media (max-width: 480px) de Lobsters, limité aux règles qui concernent
 * notre balisage (sans boîte de réception, bulles de commentaires ni éditeur de soumission).
 */
@media only screen and (max-width: 480px) {
	html {
		-webkit-text-size-adjust: none;
	}

	body {
		margin: 0;
		min-height: 100vh;
		min-height: 100dvh;
	}

	#header {
		padding: 0;
		background-color: var(--color-box-bg-shaded);
		gap: 0;
	}

	#header-top {
		border-bottom: 1px solid var(--color-box-border);
		padding: 0 0.5rem;
	}

	#header-top nav {
		position: relative;
		overflow: hidden;
	}

	#header-top ul {
		overflow-x: auto;
		padding: 0.65rem 0;
	}

	#header-top a[aria-current=page] {
		text-underline-offset: 0.8rem;
	}

	#header-top li:first-child {
		margin-left: 0.25rem;
	}

	#header-top li:last-child {
		margin-right: 0.5rem;
	}

	#inside {
		margin: 0 0.5rem;
	}

	legend,
	form label:not(:has(> input[type="radio"])),
	.profile label {
		font-weight: bold;
	}

	.comment {
		padding-left: 0;
	}

	ol.comments { margin-left: 10px }

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

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

	li div.details {
		margin: 0 0 0 36px;
	}

	nav.morelink {
		margin-left: 28px;
		float: none;
	}

	footer nav {
		text-align: right;
	}

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

	.controls {
		flex-flow: column;
	}

	/* Ajouts Sandel : une liste de liens ou un en-tête trop large défile dans son cadre, pas dans la page */
	#header-top ul { flex-wrap: nowrap; }
	#header-top li { white-space: nowrap; }
	table.data { display: block; overflow-x: auto; }
	footer { flex-direction: column; gap: 0.5em; align-items: flex-end; }
}