/* TT Tips: front-end styles. Colors and radius come from the settings page (inline CSS variables). */

/* Zero-specificity defaults, so the saved settings always win. */
:where(.tt-tip, .tt-tips-page) {
	--tt-tip-bg: #0b1f3a;
	--tt-tip-bg2: #1d4ed8;
	--tt-tip-text: #ffffff;
	--tt-tip-accent: #38bdf8;
	--tt-tip-muted: #cbd5e1;
	--tt-tip-cbg: #f8fafc;
	--tt-tip-ctext: #0f172a;
	--tt-tip-caccent: #1d4ed8;
	--tt-tip-cborder: #e2e8f0;
	--tt-tip-radius: 16px;
	--tt-tip-maxw: none;
}

.tt-tip,
.tt-tip *,
.tt-tip *::before,
.tt-tip *::after,
.tt-tips-page,
.tt-tips-page *,
.tt-tips-page *::before,
.tt-tips-page *::after {
	box-sizing: border-box;
}

.tt-tip {
	border-radius: var(--tt-tip-radius);
	font-size: 1rem;
	line-height: 1.55;
	margin: 24px 0;
	max-width: var(--tt-tip-maxw);
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* Position when the card is narrower than its column. */
.tt-tip.tt-tip--align-center {
	margin-left: auto;
	margin-right: auto;
}

.tt-tip.tt-tip--align-right {
	margin-left: auto;
	margin-right: 0;
}

.tt-tip p {
	margin: 0;
}

/* ---- Fun (and compact) ---- */
.tt-tip--fun {
	--tt-tip-t: var(--tt-tip-text);
	--tt-tip-a: var(--tt-tip-accent);
	--tt-tip-m: var(--tt-tip-muted);
	--tt-tip-bulb-bg: var(--tt-tip-accent);
	--tt-tip-bulb-fg: var(--tt-tip-bg);
	background: linear-gradient(135deg, var(--tt-tip-bg) 0%, var(--tt-tip-bg2) 100%);
	color: var(--tt-tip-t);
	padding: 24px 26px 18px;
}

.tt-tip--fun::before {
	background: radial-gradient(circle, rgba(56, 189, 248, 0.35) 0%, rgba(56, 189, 248, 0) 70%);
	border-radius: 50%;
	content: "";
	height: 200px;
	pointer-events: none;
	position: absolute;
	right: -60px;
	top: -60px;
	width: 200px;
}

.tt-tip--fun::after {
	border: 2px dashed rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	bottom: -70px;
	content: "";
	height: 160px;
	left: -40px;
	pointer-events: none;
	position: absolute;
	width: 160px;
}

/* ---- Clean ---- */
.tt-tip--clean {
	--tt-tip-t: var(--tt-tip-ctext);
	--tt-tip-a: var(--tt-tip-caccent);
	--tt-tip-m: #64748b;
	--tt-tip-bulb-bg: var(--tt-tip-caccent);
	--tt-tip-bulb-fg: #ffffff;
	background: var(--tt-tip-cbg);
	border: 1px solid var(--tt-tip-cborder);
	border-left: 5px solid var(--tt-tip-caccent);
	color: var(--tt-tip-t);
	padding: 22px 24px 16px;
}

/* ---- Pieces ---- */
.tt-tip__top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
	position: relative;
	z-index: 1;
}

.tt-tip__bulb {
	align-items: center;
	background: var(--tt-tip-bulb-bg);
	border-radius: 50%;
	color: var(--tt-tip-bulb-fg);
	display: inline-flex;
	flex-shrink: 0;
	height: 38px;
	justify-content: center;
	width: 38px;
}

.tt-tip__bulb svg {
	display: block;
	height: 22px;
	width: 22px;
}

.tt-tip__label {
	color: var(--tt-tip-a);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.tt-tip__date {
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--tt-tip-m);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-left: auto;
	padding: 6px 10px;
}

.tt-tip__text {
	color: var(--tt-tip-t);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.45;
	position: relative;
	z-index: 1;
}

.tt-tip__foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 16px;
	position: relative;
	z-index: 1;
}

.tt-tip__topic {
	background: rgba(127, 127, 127, 0.18);
	border-radius: 999px;
	color: var(--tt-tip-t);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
}

.tt-tip .tt-tip__src,
.tt-tip .tt-tip__more,
.tt-tip .tt-tip__tips {
	color: var(--tt-tip-a);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tt-tip .tt-tip__src:hover,
.tt-tip .tt-tip__more:hover,
.tt-tip .tt-tip__tips:hover {
	text-decoration-thickness: 2px;
}

.tt-tip__disc {
	color: var(--tt-tip-m);
	font-size: 12px;
	line-height: 1.5;
	margin-top: 14px;
	position: relative;
	z-index: 1;
}

.tt-tip__test {
	background: #fffbeb;
	border-radius: 8px;
	color: #92400e;
	font-size: 12px;
	font-weight: 700;
	margin-top: 12px;
	padding: 6px 10px;
	position: relative;
	z-index: 1;
}

/* Message only administrators see when no tip is available. */
.tt-tip-empty {
	background: #fffbeb;
	border: 1px dashed #d97706;
	border-radius: 8px;
	color: #92400e;
	font-size: 14px;
	margin: 16px 0;
	padding: 10px 14px;
}

/* ---- Compact (sidebar) ---- */
.tt-tip--compact {
	font-size: 0.95rem;
	margin: 0;
	padding: 18px 18px 14px;
}

.tt-tip--compact .tt-tip__top {
	gap: 8px;
	margin-bottom: 10px;
}

.tt-tip--compact .tt-tip__bulb {
	height: 30px;
	width: 30px;
}

.tt-tip--compact .tt-tip__bulb svg {
	height: 18px;
	width: 18px;
}

.tt-tip--compact .tt-tip__text {
	font-size: 1rem;
	line-height: 1.5;
}

.tt-tip--compact .tt-tip__foot {
	gap: 6px 12px;
	margin-top: 12px;
}

.tt-tip--compact .tt-tip__src,
.tt-tip--compact .tt-tip__more,
.tt-tip--compact .tt-tip__tips {
	font-size: 13px;
}

/* Widgets: no extra outer margin. */
.tt-tip.tt-tip--widget {
	margin: 0;
	max-width: none;
}

@media (max-width: 620px) {
	.tt-tip--fun,
	.tt-tip--clean {
		padding: 20px 18px 14px;
	}

	.tt-tip__text {
		font-size: 1.1rem;
	}
}

/* ---- Tips page ([tt_tips_page]) ---- */
.tt-tips-page [hidden] {
	display: none !important;
}

.tt-tips-page p {
	margin: 0;
}

.tt-tips-page__actions {
	margin: 0 0 8px;
}

.tt-tips-page__btn {
	background: var(--tt-tip-caccent);
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	padding: 12px 22px;
}

.tt-tips-page__btn:hover {
	filter: brightness(1.12);
}

.tt-tips-page__btn:focus-visible,
.tt-tips-chip:focus-visible {
	outline: 3px solid var(--tt-tip-accent);
	outline-offset: 2px;
}

.tt-tips-page .tt-tips-page__title {
	color: var(--tt-tip-bg);
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 40px 0 14px;
}

.tt-tips-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.tt-tips-chip {
	background: #eef2f6;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #0b1f3a;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 7px 14px;
}

.tt-tips-chip:hover {
	border-color: var(--tt-tip-caccent);
}

.tt-tips-chip.is-active {
	background: var(--tt-tip-bg);
	border-color: var(--tt-tip-bg);
	color: #ffffff;
}

.tt-tips-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tt-tips-item {
	border-top: 1px solid #e2e8f0;
	margin: 0;
	padding: 16px 0;
}

.tt-tips-item__text {
	color: #0f172a;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.5;
	margin: 0 0 8px;
}

.tt-tips-item__meta {
	align-items: center;
	color: #64748b;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 6px 14px;
}

.tt-tips-item__topic {
	background: #eef2f6;
	border-radius: 999px;
	color: #0b1f3a;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 10px;
}

.tt-tips-item__meta a {
	color: var(--tt-tip-caccent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tt-tips-page__disc {
	color: #64748b;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 20px;
}