/**
 * Supporting — front-end styles.
 */

/* ----------------------------------------------------------------
 * Nav tab icon — CSS ::before on the BP-generated <li>.
 *
 * item_css_id = 'supporting-profile-tab'
 *   → resulting <li> id = 'supporting-profile-tab-personal-li'
 * ---------------------------------------------------------------- */

#supporting-profile-tab-personal-li > a::before,
#user-supporting-profile-tab::before,
li[id^="supporting-profile-tab"] > a::before {
	content: "\f164";                            /* fa-thumbs-up */
	font-family: "Font Awesome 6 Free",
				 "Font Awesome 6 Pro",
				 "Font Awesome 5 Free",
				 "Font Awesome 5 Pro",
				 "FontAwesome";
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	display: inline-block;
	margin-right: 6px;
	vertical-align: -1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak: none;
}

body.supporting-force-solid-icon #supporting-profile-tab-personal-li > a::before,
body.supporting-force-solid-icon li[id^="supporting-profile-tab"] > a::before {
	font-weight: 900;
}

.supporting-fa-icon {
	display: inline-block;
	margin-right: 6px;
	color: inherit;
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome";
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------
 * Profile tab body.
 * ---------------------------------------------------------------- */

.supporting-profile-wrap {
	padding: 16px 0;
	margin-top: -40px;
}

.supporting-profile-wrap .supporting-profile-empty {
	color: #6b7280;
	font-style: italic;
	padding: 20px;
	background: #f9fafb;
	border-radius: 6px;
	border: 1px dashed #d1d5db;
	text-align: center;
}

.supporting-profile-wrap .supporting-profile-notice {
	padding: 10px 14px;
	margin-bottom: 16px;
	background: #ecfdf5;
	border-left: 4px solid #10b981;
	color: #065f46;
	font-size: 14px;
	border-radius: 4px;
}

/* ----------------------------------------------------------------
 * Editable view — vertical list of [checkbox + note textarea].
 * ---------------------------------------------------------------- */

.supporting-profile-wrap .supporting-edit-list {
	list-style: none;
	margin: 0 0 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.supporting-profile-wrap .supporting-edit-item {
	margin: 0;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	transition: background-color .15s ease, border-color .15s ease;
}

.supporting-profile-wrap .supporting-edit-item:hover {
	background: #f9fafb;
	border-color: #cbd5e1;
}

.supporting-profile-wrap .supporting-edit-label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
}

.supporting-profile-wrap .supporting-edit-label:hover {
	background: transparent;
	border: 0;
}

.supporting-profile-wrap .supporting-edit-label input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	cursor: pointer;
}

.supporting-profile-wrap .supporting-edit-text {
	flex: 1 1 auto;
	word-break: break-word;
}

/*
 * Per-tag note textarea — 100px starting height, native browser
 * resize handle (triangle) via CSS `resize: vertical`. No JS.
 */
.supporting-profile-wrap .supporting-note-wrap {
	padding-left: 28px;
}

.supporting-profile-wrap .supporting-note-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 100px;
	height: 100px;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.5;
	color: #1f2937;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.supporting-profile-wrap .supporting-note-input:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
	outline: 2px solid transparent;
}

.supporting-profile-wrap .supporting-note-input::placeholder {
	color: #9ca3af;
	font-style: italic;
}

.supporting-profile-wrap .supporting-edit-actions {
	margin-top: 8px;
}

.supporting-profile-wrap .supporting-update-btn {
	min-width: 120px;
}

/* User-specified Update button position — adds a small left/top
 * gap so the button sits visually separated from the last note
 * field above it. */
button.button.button-primary.supporting-update-btn {
	margin: 5px 0 0 15px;
}

/* ----------------------------------------------------------------
 * Edit view: title + visibility radios.
 * ---------------------------------------------------------------- */

.supporting-profile-wrap .supporting-edit-title {
	margin: 0 0 14px 0;
	padding: 12px 14px;
	background: #f8fafc;
	border-left: 3px solid #2271b1;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: #334155;
}

.supporting-profile-wrap .supporting-visibility-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

.supporting-profile-wrap .supporting-visibility-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
	color: #334155;
}

.supporting-profile-wrap .supporting-visibility-option input[type="radio"] {
	margin: 0;
	cursor: pointer;
	accent-color: #2271b1;
}

/* ----------------------------------------------------------------
 * Privacy gate.
 * ---------------------------------------------------------------- */

.supporting-privacy-gate {
	padding: 24px;
	margin: 0;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	text-align: center;
}

.supporting-privacy-gate p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #334155;
}

.supporting-privacy-gate .supporting-auth-link {
	color: #2271b1;
	text-decoration: underline;
	font-weight: 600;
}

.supporting-privacy-gate .supporting-auth-link:hover {
	color: #1e5f92;
}

/* ----------------------------------------------------------------
 * Visitor (read-only) view — vertical list with tag + optional note.
 * ---------------------------------------------------------------- */

.supporting-profile-wrap .supporting-public-title {
	margin: 0 0 18px 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #475569;
	font-style: italic;
}

.supporting-profile-wrap .supporting-public-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.supporting-profile-wrap .supporting-public-listitem {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.supporting-public-item {
	display: inline-block;
	font-size: 17px;
	color: #47752f;
	background: #d1ddc000;
	padding: 6px 15px;
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.3;
}

.supporting-profile-wrap a.supporting-public-item,
.supporting-profile-wrap a.supporting-public-item:hover,
.supporting-profile-wrap a.supporting-public-item:focus,
.supporting-profile-wrap a.supporting-public-item:visited {
	text-decoration: none;
	color: #47752f;
}

.supporting-profile-wrap a.supporting-public-item:hover {
	filter: brightness(0.94);
	transition: filter .15s ease;
}

.supporting-profile-wrap .supporting-public-note {
	margin: 0;
	padding: 10px 14px;
	margin-left: 4px;
	font-size: 14px;
	line-height: 1.55;
	color: #334155;
	background: #f8fafc;
	border-left: 3px solid #cbd5e1;
	border-radius: 3px;
	max-width: 720px;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------
 * Members directory — "Filtered by tag: X" banner.
 * ---------------------------------------------------------------- */

.supporting-filter-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	margin: -20px 0 18px 0;
	background: #eef4fb;
	background-clip: border-box;
	border-left: 4px solid #2271b1;
	color: #1e3a5f;
	font-size: 14px;
	line-height: 1.4;
	border-radius: 4px;
}

.supporting-filter-banner-label {
	flex: 1 1 auto;
}

.supporting-filter-banner-label strong {
	font-weight: 600;
	color: #2271b1;
}

.supporting-filter-banner-clear {
	flex: 0 0 auto;
	color: #2271b1;
	text-decoration: underline;
	font-size: 13px;
}

.supporting-filter-banner-clear:hover {
	color: #1e3a5f;
}

/* ================================================================
 * Unified row component — used by both the [supporting] shortcode
 * AND the public profile view, via Supporting_Shortcode::render_row_inner().
 *
 * Layout:
 *   .supporting-row
 *     .supporting-row-main      ← horizontal: tag link + count pill
 *       a.supporting-row-tag
 *       span.supporting-row-count   ← blue pill, right side
 *     .supporting-row-actions   ← below: support OR status+revoke
 *       button.supporting-btn ...
 * ================================================================ */

/* Wrappers are intentionally minimal — both the shortcode <li> and
 * the public-profile <li> handle vertical spacing themselves. */

.supporting-shortcode {
	margin: 0 0 24px 0;
}

.supporting-shortcode .supporting-shortcode-title {
	margin: 0 0 14px 0;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.3;
}

.supporting-shortcode .supporting-shortcode-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.supporting-shortcode .supporting-shortcode-item {
	margin: 0;
	padding: 0;
}

/* Row container — vertical stack of [tag+count line] then [buttons line]. */
.supporting-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * Tag link + count pill on the same horizontal line.
 *
 * The count pill is pushed to the right via flexbox auto-margin —
 * regardless of how long the tag text is, the pill stays anchored
 * to the right edge of the row container.
 */
.supporting-row-main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/*
 * Tag link — same green pill visual language as the rest of the plugin.
 * Transparent background per the v1.0.3 spec, so the tag reads as
 * green text rather than a chip.
 */
.supporting-row-tag {
	display: inline-block;
	font-size: 17px;
	color: #47752f;
	background: #d1ddc000;
	padding: 6px 15px;
	border-radius: 10px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: filter .15s ease;
}

.supporting-row-tag:hover,
.supporting-row-tag:focus,
.supporting-row-tag:visited {
	color: #47752f;
	text-decoration: none;
}

.supporting-row-tag:hover {
	filter: brightness(0.94);
}

/*
 * Blue supporter-count pill — pushed to the right via auto-margin.
 *
 * Color is the standard "info" blue used elsewhere in the plugin
 * (#2271b1 — WordPress admin's primary). White text on blue is
 * the most legible combination on light page backgrounds.
 */
.supporting-row-count {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-weight: 600;
	color: #2271b1;
	background: #dde0e26e;
	padding: 3px 10px;
	border-radius: 999px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Action area beneath the tag+count line. Inline-flex so the status
 * text and the revoke button sit on the same line. */
.supporting-row-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-left: 15px; /* match the tag-pill's horizontal padding */
	margin-bottom: 20px;
}

/* ----------------------------------------------------------------
 * Support / Revoke buttons.
 * ---------------------------------------------------------------- */

.supporting-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
	font-family: inherit;
}

.supporting-btn i {
	font-size: 13px;
	line-height: 1;
	margin-left: 5px;
}

.supporting-btn[disabled],
.supporting-btn.is-loading {
	opacity: 0.6;
	cursor: progress;
	pointer-events: none;
}

/* Support button — sage-green per v1.0.5 spec, pill shape per v1.1.1. */
button.supporting-btn.supporting-btn-support {
	background: #dfe6d8;
	color: #47752f;
	border-color: #c5d1b5;
	padding: 5px 10px;
	font-size: 15px;
	border-radius: 20px;
}
button.supporting-btn.supporting-btn-support:hover,
button.supporting-btn.supporting-btn-support:focus {
	background: #cfdcc3;
	border-color: #abbf95;
	color: #355723;
}

/* Revoke button — light translucent grey per v1.0.5 spec, pill shape per v1.1.1.
 * The deliberately quiet styling reads as "available but secondary",
 * since revoking is a less common action than supporting. */
button.supporting-btn.supporting-btn-revoke {
	background: #dfdfdf99;
	color: #4b5563;
	border-color: #d1d5db;
	padding: 5px 10px;
	font-size: 15px;
	border-radius: 20px;
}
button.supporting-btn.supporting-btn-revoke:hover,
button.supporting-btn.supporting-btn-revoke:focus {
	background: #cccccc99;
	border-color: #9ca3af;
	color: #1f2937;
}

/* Status text shown alongside the Revoke button. Dark grey per spec. */
.supporting-status {
	font-size: 13px;
	color: #4b5563;
	font-weight: 500;
	font-style: italic;
}

/* On narrow viewports, drop the action-row indent. */
@media (max-width: 520px) {
	.supporting-row-actions {
		padding-left: 0;
	}
	.supporting-row-count {
		margin-left: 0;
	}
}

/* ================================================================
 * Confirm popup (#supporting-popup).
 *
 * Hidden by default; .is-open toggles visibility. The overlay sits
 * fixed across the viewport with a translucent white backdrop
 * (rgba(255,255,255,0.75) per spec — "white transparent opacity").
 * The dialog floats centered with a solid white background.
 * ================================================================ */

.supporting-popup {
	position: fixed;
	inset: 0;
	z-index: 100000;       /* above admin bar (32600), modals etc. */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.supporting-popup.is-open {
	display: flex;
}

.supporting-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.75); /* white-translucent backdrop */
	cursor: pointer;
	animation: supporting-popup-fade-in .15s ease-out;
}

.supporting-popup-dialog {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	width: 100%;
	max-width: 440px;
	padding: 28px 28px 22px 28px;
	box-sizing: border-box;
	animation: supporting-popup-slide-in .18s ease-out;
}

@keyframes supporting-popup-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes supporting-popup-slide-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.supporting-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: #6b7280;
	font-size: 16px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.supporting-popup-close:hover,
.supporting-popup-close:focus {
	background: #f3f4f6;
	color: #111827;
	border-color: #e5e7eb;
}
.supporting-popup-close i {
	font-size: 16px;
	line-height: 1;
}

.supporting-popup-title {
	margin: 0 0 10px 0;
	padding-right: 28px;        /* leave room for close X */
	font-size: 18px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.3;
}

.supporting-popup-body {
	margin: 0 0 22px 0;
	font-size: 14px;
	line-height: 1.55;
	color: #374151;
}

.supporting-popup-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.supporting-popup-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* "No / Cancel" — neutral grey, rounded pill per v1.0.5 spec. */
.supporting-popup-btn-no {
	background: #f3f4f6;
	color: #374151;
	border-color: #e5e7eb;
	border-radius: 25px;
}
.supporting-popup-btn-no:hover,
.supporting-popup-btn-no:focus {
	background: #e5e7eb;
	border-color: #d1d5db;
}

/* Yes button — green confirm per v1.0.5 spec, rounded pill.
 * :hover and :focus grouped so keyboard navigation (Tab to button)
 * shows the same lighter-green feedback a mouse hover would. */
.supporting-popup-btn-yes {
	background: #6bac4e;
	color: #ffffff;
	border-color: #2271b1;
	border-radius: 25px;
}
.supporting-popup-btn-yes:hover,
.supporting-popup-btn-yes:focus {
	background: #8cc175;
	color: #ffffff;
}

/* Variant: revoke confirm — pink, rounded pill per v1.0.5 spec. */
.supporting-popup-btn-yes.is-yes-revoke {
	background: #df579b;
	color: #ffffff;
	border-color: #d63384;
	border-radius: 25px;
}
.supporting-popup-btn-yes.is-yes-revoke:hover,
.supporting-popup-btn-yes.is-yes-revoke:focus {
	background: #c8407f;
	border-color: #b8276b;
	color: #ffffff;
}

/* ----------------------------------------------------------------
 * Mobile.
 * ---------------------------------------------------------------- */

@media (max-width: 520px) {
	.supporting-profile-wrap .supporting-note-wrap {
		padding-left: 0;
	}
	.supporting-profile-wrap .supporting-public-note {
		margin-left: 0;
	}
}

/* =================================================================
 * v1.1.0 — Chart + Cooldown panel
 * =================================================================
 *
 * Both new components sit inside the .supporting-row stack.
 * Their order in the DOM is fixed:
 *
 *   .supporting-row-main
 *   .supporting-public-note          (profile only, optional)
 *   .supporting-row-chart            (NEW — v1.1.0)
 *   .supporting-row-actions          (logged-in viewers)
 *
 * The chart wrapper has no top-margin tied to its sibling — vertical
 * rhythm is handled by the .supporting-row container's gap rules
 * upstream, plus a small explicit margin here.
 * ----------------------------------------------------------------- */

/* ----- Chart -------------------------------------------------- */

.supporting-row-chart {
	width: 100%;
	margin: 10px 0 6px;
}

.supporting-chart {
	width: 100%;
	max-width: 100%;
	background: #ffffff;
	/* v1.1.1 — outer wrapper border + padding removed so the
	 * inner SVG plot frame is the only chart outline, and the
	 * Y-axis labels sit flush with the div's left edge. The
	 * SVG carries its own white <rect> background, so dropping
	 * the wrapper background would also be safe — kept here so
	 * theme-stripped previews still show a clean white slab. */
	border: 0;
	border-radius: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}

.supporting-chart-svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 240px;
}

/* The 3px blue curve. Color + width are also set as SVG attrs
 * (so the chart looks right even with a stripped-down stylesheet),
 * but we duplicate them here so theme overrides via CSS still win. */
.supporting-chart-line {
	stroke: #1e73be;
	stroke-width: 3;
	fill: none;
}

.supporting-chart-bg {
	fill: #ffffff;
}
.supporting-chart-frame {
	stroke: #e3e6ea;
}
.supporting-chart-grid {
	stroke: #eef1f4;
}
.supporting-chart-xtick {
	stroke: #cbd2d9;
}
.supporting-chart-xlabel,
.supporting-chart-ylabel {
	fill: #6b7280;
}
.supporting-chart-today {
	fill: #1e73be;
}

/* ----- Cooldown panel ---------------------------------------- */

.supporting-cooldown {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #f5d6c6;
	background: #fff7f1;
	border-radius: 6px;
	color: #8a3b16;
	font-size: 14px;
	line-height: 1.45;
}

.supporting-cooldown-icon {
	flex: 0 0 auto;
	font-size: 16px;
	margin-top: 2px;
	color: #d96a3a;
}

.supporting-cooldown-text {
	flex: 1 1 auto;
	min-width: 0;
}

.supporting-cooldown-line1 {
	display: inline;
	font-weight: 600;
}

.supporting-cooldown-line2 {
	display: inline;
}

.supporting-cooldown-remaining {
	display: inline-block;
	padding: 0 4px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: #6b2310;
	background: rgba(217, 106, 58, 0.10);
	border-radius: 3px;
	white-space: nowrap;
}

/* Mobile tweaks ----------------------------------------------- */
@media (max-width: 520px) {
	/* .supporting-chart has zero padding at every breakpoint now —
	 * the prior 4px 6px override (v1.1.0) was tied to the outer
	 * border that no longer exists. */
	.supporting-cooldown {
		font-size: 13px;
		padding: 8px 10px;
	}
}

/* =================================================================
 * v1.2.x — Profile-edit checkbox cooldown lock
 * =================================================================
 *
 * When a tag is in 24h cooldown for the profile owner, the checkbox
 * row in the profile-edit form (Supporting tab > Edit) is rendered
 * in a locked state:
 *
 *   - the checkbox itself is disabled (server side via `disabled`
 *     attribute) and visually muted
 *   - the row's tag label is dimmed
 *   - the same `.supporting-cooldown` panel as the front-end appears
 *     under the label, with the live remaining-time counter
 *
 * Server-side enforcement in maybe_handle_save() also strips any
 * locked re-add from the saved row, so even if a user used devtools
 * to re-enable the checkbox, the change wouldn't persist. The CSS
 * is purely UX.
 * ----------------------------------------------------------------- */

.supporting-profile-wrap .supporting-edit-item-cooldown {
	background: #fbfbfb;
	border-color: #e5e7eb;
}

.supporting-profile-wrap .supporting-edit-item-cooldown:hover {
	/* Disable the hover lift used elsewhere — nothing to interact with. */
	background: #fbfbfb;
	border-color: #e5e7eb;
}

.supporting-profile-wrap .supporting-edit-item-cooldown .supporting-edit-label {
	cursor: not-allowed;
}

.supporting-profile-wrap .supporting-edit-item-cooldown .supporting-edit-checkbox {
	cursor: not-allowed;
	/* Light-grey inactive look, per spec. We keep it pixel-snapped
	 * with the same 18×18 footprint so the row layout doesn't shift
	 * when the checkbox swaps in/out of the cooldown state. */
	opacity: .45;
	filter: grayscale(100%);
	accent-color: #b8bcc4;
}

.supporting-profile-wrap .supporting-edit-item-cooldown .supporting-edit-text {
	color: #9ca3af;
	text-decoration: line-through;
	text-decoration-color: #d1d5db;
	text-decoration-thickness: 1px;
}

/* The cooldown panel inside the edit form sits between the label
 * and the note textarea. It already has top-level margin from its
 * own rules, but the parent flex gap (8px) handles spacing here too. */
.supporting-profile-wrap .supporting-edit-item-cooldown .supporting-cooldown {
	margin-left: 28px; /* align with the note textarea below it */
}

@media (max-width: 520px) {
	.supporting-profile-wrap .supporting-edit-item-cooldown .supporting-cooldown {
		margin-left: 0;
	}
}