/*
 * Reading Time Estimator – Public Styles
 * Author: Sehrish Anam
 *
 * Design philosophy:
 *   – CSS custom properties for easy theming
 *   – Minimal footprint, no !important abuse
 *   – Accessible: respects prefers-reduced-motion
 *   – Zero external dependencies
 * ================================================== */

/* ── Custom Properties ───────────────────────────── */
:root {
	--nvrtp-color:           #6366f1;
	--nvrtp-color-bg:        rgba(99, 102, 241, 0.12);
	--nvrtp-bar-height:      5px;
	--nvrtp-bar-z:           9999;
	--nvrtp-badge-gap:       6px;
	--nvrtp-badge-radius:    6px;
	--nvrtp-badge-font-size: 0.8125rem; /* 13px at 16px base */
	--nvrtp-badge-color:     currentColor;
	--nvrtp-badge-bg:        transparent;
	--nvrtp-transition-dur:  0.2s;
}


/* ── Progress Bar ────────────────────────────────── */
#nvrtp-progress-bar {
	position:   fixed;
	left:       0;
	width:      100%;
	height:     var(--nvrtp-bar-height);
	background: var(--nvrtp-color-bg);
	z-index:    var(--nvrtp-bar-z);
	/* JS sets data-position="top|bottom" */
}

/* Make hover area bigger for easier interaction */
#nvrtp-progress-bar::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	bottom: -8px;
}

#nvrtp-progress-bar[data-position="top"] {
	top: 0;
}

#nvrtp-progress-bar[data-position="bottom"] {
	bottom: 0;
}

#nvrtp-progress-bar__fill {
	height:     100%;
	width:      var(--nvrtp-progress, 0%);
	background: var(--nvrtp-color);
	transition: width var(--nvrtp-transition-dur) linear;
	transform-origin: left center;
	will-change: width;
}

/* Tooltip */
#nvrtp-progress-bar__tooltip {
	position:        fixed;
	background:      rgba(17, 24, 39, 0.95);
	color:           #fff;
	font-size:       0.6875rem;
	padding:         4px 8px;
	border-radius:   4px;
	white-space:     nowrap;
	pointer-events:  none;
	opacity:         0;
	transform:       translate(-50%, 0);
	transition:      opacity 0.15s ease;
	backdrop-filter: blur(4px);
	z-index:         10001;
	box-shadow:      0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Reading Time Badge ──────────────────────────── */
.nvrtp-badge {
	display:     inline-flex;
	align-items: center;
	gap:         var(--nvrtp-badge-gap);
	font-size:   var(--nvrtp-badge-font-size);
	font-weight: 500;
	color:       var(--nvrtp-badge-color);
	background:  var(--nvrtp-badge-bg);
	border-radius: var(--nvrtp-badge-radius);
	line-height: 1.4;
	/* Create a full-width row between title and content */
	display:     flex;
	margin-bottom: 1.25em;
	opacity:     0.75;
	transition:  opacity var(--nvrtp-transition-dur) ease;
}

.nvrtp-badge:hover {
	opacity: 1;
}

/* Badge after content */
.nvrtp-badge + * .nvrtp-badge,
* + .nvrtp-badge {
	margin-top:    1em;
	margin-bottom: 0;
}

.nvrtp-badge__icon {
	display:     inline-flex;
	align-items: center;
	color:       var(--nvrtp-color);
	flex-shrink: 0;
}

.nvrtp-badge__icon svg {
	display: block;
}

.nvrtp-badge__label {
	letter-spacing: 0.01em;
}

/* AI-adjusted note */
.nvrtp-badge__ai-note {
	font-size:     0.75em;
	opacity:       0.6;
	margin-left:   4px;
	font-style:    italic;
	font-weight:   400;
	border:        1px solid currentColor;
	border-radius: 3px;
	padding:       0 4px;
	line-height:   1.5;
	align-self:    center;
}

/* ── Accessibility: Reduced Motion ───────────────── */
@media (prefers-reduced-motion: reduce) {
	#nvrtp-progress-bar__fill {
		transition: none;
	}

	#nvrtp-progress-bar__tooltip {
		transition: none;
	}
}

/* ── Dark mode ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	#nvrtp-progress-bar__tooltip {
		background: rgba(243, 244, 246, 0.9);
		color:      #111827;
	}
}

/* ── Print ───────────────────────────────────────── */
@media print {
	#nvrtp-progress-bar {
		display: none;
	}
}