/* ── buttons ──
   Every button on the site is one of the kinds below (docs/buttons.md). This
   sheet loads before main.css, like a framework: the kinds own the look, and a
   page's own class on a button only places it (margins, width, position).
   A new button picks a kind and its modifiers; it never gets its own colours,
   borders, hover or active state.

   .btn            the main button (the post button): blue, text and/or glyph
     .btn-secondary  grey (discard changes, account options, like/dislike)
     .btn-danger     red      .btn-success  green     .btn-warning  yellow
     .btn-select     the light picker with a caret ("who should see this?")
   .btn-nav        translucent white over a blue gradient bar (the header, the
                   me container, framed panel and page header bars); glyph
                   outline at rest, filled while active (the page fills it)
   .btn-action     a post's like / comment / share: glyph and text, glyph fills
                   while active
   .btn-link       text only, link coloured (a comment's like and reply)
   .btn-profile    dark glyph button over a profile's picture or banner
   .btn-tool       a composer's emoji / sticker / upload glyph
   .btn-remove     the small red × on an attachment's corner
   .btn-summary    the profile scroll summary's bar buttons
   .btn-more       the three dots on posts, comments and replies
   .btn-glyph      a bare glyph on a blue bar (the mini chat's expand, the
                   chat's rooms, the scrobbles' refresh)
   .btn-delete     the small × that deletes a status update

   Sizes (.btn and .btn-nav): .btn-lg, .btn-sm, .btn-mini; .btn-icon makes a
   glyph-only square of the same height; .btn-block fills the row.
   .btn-action.btn-lg is a shortcut row's bigger, full-strength action (the
   phone's "write post / photo or video" bar).
   States: .is-active (or aria-current="page", aria-expanded="true" where it
   applies) and :disabled / [aria-disabled="true"] / .is-disabled. */

:where(.btn, .btn-nav, .btn-action, .btn-link, .btn-profile, .btn-tool, .btn-remove, .btn-summary, .btn-more, .btn-glyph, .btn-delete) {
	box-sizing: border-box;
	margin: 0;
	font-family: inherit;
	text-transform: lowercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

:where(.btn, .btn-nav, .btn-action, .btn-link, .btn-profile, .btn-tool, .btn-remove, .btn-summary, .btn-more, .btn-glyph, .btn-delete):is(:disabled, .is-disabled, [aria-disabled="true"]) {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

:where(.btn, .btn-nav, .btn-action, .btn-link, .btn-profile, .btn-tool, .btn-remove, .btn-summary, .btn-more, .btn-glyph, .btn-delete):focus-visible {
	outline: 1px dotted var(--text-link, #3b5998);
	outline-offset: 2px;
}

:where(.btn, .btn-nav, .btn-action, .btn-link, .btn-profile, .btn-tool, .btn-remove, .btn-summary, .btn-more, .btn-glyph, .btn-delete)[hidden] {
	display: none !important;
}

/* ── .btn: the main button and its recolours ── */
.btn {
	--btn-h: 32px;
	--btn-pad: 16px;
	--btn-font: 12px;
	--btn-glyph: 14px;
	--btn-bg: linear-gradient(#4267b2, #2a4a8f);
	--btn-bg-hover: linear-gradient(#5474c5, #3b5aa0);
	--btn-bg-active: linear-gradient(#2a4a8f, #1e3a6f);
	--btn-border: #29487d;
	--btn-color: #fff;
	--btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--btn-h);
	padding: 0 var(--btn-pad);
	border: 1px solid var(--btn-border);
	background: var(--btn-bg);
	color: var(--btn-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	text-shadow: var(--btn-text-shadow);
	font-size: var(--btn-font);
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
}

.btn:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	background: var(--btn-bg-hover);
	color: var(--btn-color);
	text-decoration: none;
}

.btn:active:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	background: var(--btn-bg-active);
	transform: scale(0.98);
}

.btn i {
	font-size: var(--btn-glyph);
	line-height: 1;
}

/* A sheet picture in a glyph's place (the RSS icon of real feed links,
   docs/buttons.md), at the glyph's size. Descendant selectors: the image
   loader wraps every <img> in a span. */
.btn img.btn-picture-glyph {
	width: calc(var(--btn-glyph) + 2px);
	height: calc(var(--btn-glyph) + 2px);
	flex-shrink: 0;
	object-fit: contain;
	-webkit-user-drag: none;
	pointer-events: none;
}

.btn-secondary {
	--btn-bg: linear-gradient(var(--surface-subtle, #f7f7f7), #e1e2e5);
	--btn-bg-hover: linear-gradient(var(--bg-container, #fff), var(--line-soft, #e5e5e5));
	--btn-bg-active: linear-gradient(var(--line-soft, #e5e5e5), #d5d7db);
	--btn-border: var(--line-strong, #ccc);
	--btn-color: #4b4f56;
	--btn-text-shadow: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	border-color: #999;
}

/* A grey toggle that is switched on reads as the main button (a chosen
   pronoun, a chosen branch). */
.btn-secondary.is-active {
	--btn-bg: linear-gradient(#4267b2, #2a4a8f);
	--btn-bg-hover: linear-gradient(#5474c5, #3b5aa0);
	--btn-border: #29487d;
	--btn-color: #fff;
	--btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-danger {
	--btn-bg: linear-gradient(#e0245e, #b8173f);
	--btn-bg-hover: linear-gradient(#ea4174, #c81d48);
	--btn-bg-active: linear-gradient(#b8173f, #961233);
	--btn-border: #a3162f;
}

.btn-success {
	--btn-bg: linear-gradient(#4a9d5f, #2d8b4a);
	--btn-bg-hover: linear-gradient(#5aad6f, #3d9b5a);
	--btn-bg-active: linear-gradient(#2d8b4a, #236f3a);
	--btn-border: #267a3d;
}

.btn-warning {
	--btn-bg: linear-gradient(#f0db4f, #d4be2a);
	--btn-bg-hover: linear-gradient(#fce86b, #e0c93a);
	--btn-bg-active: linear-gradient(#d4be2a, #b9a520);
	--btn-border: #c4b025;
	--btn-color: #333;
	--btn-text-shadow: none;
}

/* The picker beside the post button ("who should see this?"): light, with
   its glyph, label and .btn-caret spread across. */
.btn-select {
	--btn-pad: 10px;
	--btn-bg: linear-gradient(var(--bg-input, #fff), var(--bg-message, #f2f2f2));
	--btn-bg-hover: linear-gradient(var(--bg-message, #f2f2f2), var(--line-soft, #e5e5e5));
	--btn-bg-active: var(--bg-message, #f2f2f2);
	--btn-border: var(--border-primary, #bdc7d8);
	--btn-color: var(--text-muted, #4b4f56);
	--btn-text-shadow: none;
	justify-content: space-between;
	gap: 8px;
	min-width: 100px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}

.btn-select[aria-expanded="true"],
.btn-select.is-active {
	background: var(--btn-bg-hover);
}

.btn-caret {
	font-size: 10px !important;
	opacity: 0.7;
}

/* ── .btn-nav: chrome on a blue bar ──
   The header's buttons are the reference. On a framed panel's or page
   header's bar use .btn-nav.btn-mini; .btn-icon for glyph only. */
.btn-nav {
	--btn-h: 28px;
	--btn-pad: 12px;
	--btn-font: 11px;
	--btn-glyph: 14px;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: var(--btn-h);
	padding: 0 var(--btn-pad);
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%);
	color: var(--text-header, #fff);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
	font-size: var(--btn-font);
	font-weight: bold;
	line-height: 1.2;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.btn-nav.btn-mini {
	gap: 4px;
}

.btn-nav i {
	font-size: var(--btn-glyph);
	line-height: 1;
}

.btn-nav:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	color: var(--text-header, #fff);
	text-decoration: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.12) 100%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-nav:active:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-nav:is(.is-active, .header-link-active, [aria-current="page"]),
.btn-nav:is(.is-active, .header-link-active, [aria-current="page"]):hover {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── sizes, shared by .btn and .btn-nav ──
   After both kinds, so a size outranks the kind's own default. */
.btn-lg {
	--btn-h: 38px;
	--btn-pad: 20px;
	--btn-font: 13px;
	--btn-glyph: 15px;
}

.btn-sm {
	--btn-h: 26px;
	--btn-pad: 10px;
	--btn-font: 11px;
	--btn-glyph: 13px;
	gap: 4px;
}

.btn-mini {
	--btn-h: 20px;
	--btn-pad: 8px;
	--btn-font: 10px;
	--btn-glyph: 11px;
	gap: 3px;
}

.btn-icon {
	width: var(--btn-h);
	min-width: var(--btn-h);
	padding: 0;
}

.btn-block {
	display: flex;
	width: 100%;
}

/* ── .btn-action: a post's like, comment and share ── */
.btn-action {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border: 0;
	background: none;
	color: var(--text-muted, #65676b);
	font-size: 13px;
	font-weight: 600;
	opacity: 0.6;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.btn-action i {
	font-size: 18px;
}

.btn-action:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	opacity: 1;
}

.btn-action.is-active {
	color: var(--text-sidebar-username, #3b5998);
	opacity: 1;
}

.btn-action.is-active:hover {
	filter: brightness(1.2);
}

/* The bigger one: a shortcut that starts something, at full strength so it
   never reads as switched off. */
.btn-action.btn-lg {
	gap: 7px;
	color: #7f838a;
	font-weight: bold;
	opacity: 1;
}

.btn-action.btn-lg i {
	font-size: 20px;
	color: #a3a7ae;
}

.btn-action.btn-lg:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	color: var(--text-link, #3b5998);
}

.btn-action.btn-lg:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) i {
	color: inherit;
}

/* ── .btn-link: a button that reads as a text link ── */
.btn-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--text-link, #3b5998);
	font-size: inherit;
	font-weight: inherit;
	white-space: normal;
}

.btn-link i {
	font-size: 1.1em;
}

.btn-link:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	text-decoration: underline;
}

.btn-link.is-active {
	font-weight: bold;
}

/* ── .btn-profile: over a profile's picture or banner ──
   The page places it (top/right); this is only its face. */
.btn-profile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 16px;
	transition: background 0.2s ease;
}

.btn-profile:hover:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-profile[aria-expanded="true"] {
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
}

/* ── .btn-tool: a composer's glyph ── */
.btn-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--text-muted, #90949c);
	font-size: 18px;
	opacity: 0.7;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.btn-tool i {
	font-size: 18px;
}

.btn-tool:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	color: #666;
	opacity: 1;
}

.btn-tool.is-active,
.btn-tool[aria-expanded="true"] {
	color: var(--color-primary, #3b5998);
	opacity: 1;
}

/* A tool that ends something (log out): its glyph turns red on hover. */
.btn-tool.is-danger:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	color: #e41e3f;
}

/* ── .btn-remove: the × on an attachment ──
   Sits in its attachment's top right corner; .is-inline puts it in the flow
   (a poll option's row). */
.btn-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid var(--bg-container, #fff);
	background: #ff4444;
	color: #fff;
	font-size: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease;
}

.btn-remove i {
	font-size: 10px;
}

.btn-remove:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	background: #cc0000;
}

.btn-remove.is-inline {
	position: static;
}

/* ── .btn-summary: the profile scroll summary's bar ── */
.btn-summary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	align-self: stretch;
	min-width: 0;
	min-height: 26px;
	padding: 0 10px;
	border: 0;
	background: none;
	color: var(--text-primary, #1d2129);
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

.btn-summary i {
	font-size: 17px;
}

.btn-summary:hover:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-summary[aria-expanded="true"] {
	background: var(--bg-button-secondary, linear-gradient(to bottom, #f7f7f7, #e8e8e8));
}

/* A glyph-only summary button is boxed so it reads as a button. */
.btn-summary.btn-icon {
	align-self: center;
	width: 30px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--border-primary, #bdc7d8);
	background: linear-gradient(to bottom, var(--bg-container, #fff), var(--bg-message, #f2f2f2));
}

.btn-summary.btn-icon:hover:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-summary.btn-icon[aria-expanded="true"] {
	background: var(--bg-button-secondary, linear-gradient(to bottom, #f7f7f7, #e8e8e8));
}

/* ── .btn-more: the three dots ── */
.btn-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 1px solid transparent;
	background: none;
	color: #65676b;
	font-size: 18px;
	line-height: 1;
	opacity: 0.6;
	transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn-more:hover:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-more:focus-visible,
.btn-more[aria-expanded="true"] {
	opacity: 1;
	color: var(--text-primary, #1d2129);
	background: var(--bg-sidebar-item-hover, #f2f2f5);
	border-color: var(--border-primary, #bdc7d8);
	outline: none;
}

/* ── .btn-glyph: a bare glyph on a blue bar ──
   No box: a faded white glyph that turns full white on hover and while on. */
.btn-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 5px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 1;
	transition: color 0.15s ease;
}

.btn-glyph:hover:not(:disabled, .is-disabled, [aria-disabled="true"]),
.btn-glyph.is-active,
.btn-glyph[aria-expanded="true"] {
	color: #fff;
}

/* ── .btn-delete: the × beside a status update; hover turns the glyph red ── */
.btn-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #a8adb6;
	font-size: 12px;
	line-height: 1;
	opacity: 0.65;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.btn-delete i {
	pointer-events: none;
}

.btn-delete:hover:not(:disabled, .is-disabled, [aria-disabled="true"]) {
	opacity: 1;
	color: #e0245e;
}