/* ==========================================================================
   SVT Visual Kit 1.0.0
   Everything is scoped under .svt so it cannot leak into Rehub's own styles.

   RETHEME THE WHOLE KIT BY EDITING THE TOKENS BELOW. Nothing further down
   hard-codes a colour, a radius or a space value.
   ========================================================================== */

.svt {
	/* colour ------------------------------------------------------------ */
	--svt-ink:      #12222b;   /* headings, values                          */
	--svt-body:     #4a5c66;   /* secondary text                            */
	--svt-rule:     #dbe4e8;   /* hairlines, track                          */
	--svt-surface:  #f4f8f9;   /* panel fill                                */
	--svt-accent:   #0d7d8c;   /* primary — a filtered blue-green           */
	--svt-accent-2: #3ab5c2;   /* fill gradient tail                        */
	--svt-warn:     #b8862c;   /* mid band                                  */
	--svt-bad:      #b04a3e;   /* low band                                  */
	--svt-good:     #1f7a54;   /* pros                                      */

	/* form -------------------------------------------------------------- */
	--svt-radius:   3px;
	--svt-gap:      1rem;
	--svt-pad:      1.15rem;
	--svt-bar-h:    9px;

	color: var(--svt-body);
	font-variant-numeric: tabular-nums;   /* columns of numbers line up     */
	margin: 1.6rem 0;
}

.svt *,
.svt *::before,
.svt *::after { box-sizing: border-box; }

.svt .svt-h {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--svt-ink);
	margin: 0 0 .9rem;
}

/* icons ------------------------------------------------------------------ */

.svt-i {
	width: 20px; height: 20px;
	flex: 0 0 auto;
	vertical-align: -.18em;
}
.svt-i--sm { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Score bar
   Signature device: the track carries a hairline tick scale and the fill ends
   in a hard 2px cap, so it reads as a measurement level rather than a
   generic progress bar.
   -------------------------------------------------------------------------- */

.svt-score { margin: 0 0 .95rem; }
.svt-score:last-child { margin-bottom: 0; }

.svt-score__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .38rem;
}

.svt-score__label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .93rem;
	font-weight: 600;
	color: var(--svt-ink);
	line-height: 1.3;
}
.svt-score__label .svt-i { color: var(--svt-accent); }

.svt-score__val {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--svt-ink);
	line-height: 1;
	white-space: nowrap;
}
.svt-score__max {
	font-size: .74rem;
	font-weight: 500;
	color: var(--svt-body);
	opacity: .8;
}

.svt-score__note {
	margin: .35rem 0 0;
	font-size: .84rem;
	line-height: 1.45;
}

.svt-bar {
	position: relative;
	height: var(--svt-bar-h);
	background: var(--svt-rule);
	border-radius: var(--svt-radius);
	overflow: hidden;
}

/* graduated ticks at every 10% — the gauge reference */
.svt-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		to right,
		rgba(255, 255, 255, .85) 0 1px,
		transparent 1px 10%
	);
	pointer-events: none;
}

.svt-bar__fill {
	display: block;
	height: 100%;
	border-radius: var(--svt-radius) 0 0 var(--svt-radius);
	background: linear-gradient(90deg, var(--svt-accent), var(--svt-accent-2));
	box-shadow: inset -2px 0 0 var(--svt-ink);   /* the level cap */
	transition: width .5s cubic-bezier(.2, .7, .2, 1);
}

.svt-score--mid  .svt-bar__fill { background: linear-gradient(90deg, #9a6d1f, var(--svt-warn)); }
.svt-score--low  .svt-bar__fill { background: linear-gradient(90deg, #8f3a30, var(--svt-bad)); }

@media (prefers-reduced-motion: reduce) {
	.svt-bar__fill { transition: none; }
}

/* --------------------------------------------------------------------------
   Social panel
   -------------------------------------------------------------------------- */

.svt-social__intro {
	margin: 0 0 .9rem;
	font-size: .95rem;
	line-height: 1.55;
}

.svt-social__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--svt-gap);
}

.svt-social__item {
	border: 1px solid var(--svt-rule);
	border-radius: var(--svt-radius);
	padding: .85rem .9rem;
	background: #fff;
}

.svt-social__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .45rem;
}

.svt-social__src {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--svt-body);
}
.svt-social__src .svt-i { color: var(--svt-ink); opacity: .75; }

.svt-social__score {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--svt-ink);
	line-height: 1;
}

.svt-social__sum {
	margin: .5rem 0 0;
	font-size: .85rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Spec grid
   -------------------------------------------------------------------------- */

.svt-specs { --svt-specs-cols: 2; }

.svt-specs__grid {
	display: grid;
	grid-template-columns: repeat(var(--svt-specs-cols), minmax(0, 1fr));
	gap: 0 calc(var(--svt-gap) * 2);
	margin: 0;
}

.svt-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .9rem;
	padding: .62rem 0;
	border-bottom: 1px solid var(--svt-rule);
}

.svt-specs__row dt {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--svt-body);
	margin: 0;
}
.svt-specs__row dt .svt-i { color: var(--svt-accent); opacity: .85; }

.svt-specs__row dd {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
	color: var(--svt-ink);
	text-align: right;
}

@media (max-width: 640px) {
	.svt-specs__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Pros / cons
   -------------------------------------------------------------------------- */

.svt-pc {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--svt-gap);
}

.svt-pc__col {
	background: var(--svt-surface);
	border-radius: var(--svt-radius);
	border-left: 3px solid var(--svt-rule);
	padding: var(--svt-pad);
}
.svt-pc__col--pro { border-left-color: var(--svt-good); }
.svt-pc__col--con { border-left-color: var(--svt-bad); }

.svt-pc__title {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .6rem;
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--svt-ink);
}
.svt-pc__col--pro .svt-pc__title .svt-i { color: var(--svt-good); }
.svt-pc__col--con .svt-pc__title .svt-i { color: var(--svt-bad); }

.svt-pc ul { margin: 0; padding: 0; list-style: none; }
.svt-pc li {
	position: relative;
	padding: .3rem 0 .3rem .95rem;
	font-size: .9rem;
	line-height: 1.5;
}
.svt-pc li::before {
	content: "";
	position: absolute;
	left: 0; top: .82em;
	width: 5px; height: 1px;
	background: currentColor;
	opacity: .5;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.svt-badges { display: flex; flex-wrap: wrap; gap: .5rem; }

.svt-badge {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem;
	border: 1px solid var(--svt-rule);
	border-radius: var(--svt-radius);
	background: #fff;
	font-size: .8rem;
	font-weight: 600;
	color: var(--svt-ink);
	line-height: 1.35;
}
.svt-badge .svt-i { color: var(--svt-accent); }

/* --------------------------------------------------------------------------
   Stat tiles
   -------------------------------------------------------------------------- */

.svt-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--svt-rule);
	border: 1px solid var(--svt-rule);
	border-radius: var(--svt-radius);
	overflow: hidden;
}

.svt-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .18rem;
	padding: var(--svt-pad);
	background: #fff;
}

.svt-stat__i {
	width: 18px; height: 18px;
	color: var(--svt-accent);
	margin-bottom: .3rem;
}

.svt-stat__v {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.05;
	color: var(--svt-ink);
	letter-spacing: -.01em;
}

.svt-stat__l {
	font-size: .76rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--svt-body);
}

/* --------------------------------------------------------------------------
   Notes / verdict callout
   -------------------------------------------------------------------------- */

.svt-note {
	display: flex;
	gap: .85rem;
	padding: var(--svt-pad);
	border-radius: var(--svt-radius);
	border-left: 3px solid var(--svt-accent);
	background: var(--svt-surface);
}

.svt-note__i { color: var(--svt-accent); padding-top: .1rem; }
.svt-note__t { display: block; color: var(--svt-ink); margin-bottom: .2rem; }
.svt-note__body > p { margin: 0 0 .5rem; font-size: .93rem; line-height: 1.6; }
.svt-note__body > p:last-child { margin-bottom: 0; }

.svt-note--warn    { border-left-color: var(--svt-warn); }
.svt-note--warn    .svt-note__i { color: var(--svt-warn); }
.svt-note--good    { border-left-color: var(--svt-good); }
.svt-note--good    .svt-note__i { color: var(--svt-good); }
.svt-note--verdict { border-left-color: var(--svt-ink); background: var(--svt-ink); }
.svt-note--verdict,
.svt-note--verdict .svt-note__body { color: #d8e4e8; }
.svt-note--verdict .svt-note__t,
.svt-note--verdict .svt-note__i { color: #fff; }

/* --------------------------------------------------------------------------
   Accessibility floor
   -------------------------------------------------------------------------- */

.svt a:focus-visible,
.svt button:focus-visible {
	outline: 2px solid var(--svt-accent);
	outline-offset: 2px;
}