/* ==========================================================================
   SSF-25 Subject & Stream Fit
   Revere Counselling
   ==========================================================================

   >>> TO MATCH YOUR WEBSITE, EDIT ONLY THE THEME BLOCK BELOW. <<<

   The defaults are already set to the same sage palette as the SMP-30, so
   if you have not changed that one, the two tools will look like a matched
   pair with no edits at all.

   Everything after the theme block is layout and should not need changing.
   All selectors are scoped and doubled (.ssf25.ssf25) so your site's own
   styles cannot break the tool.

   No external fonts, images or scripts are loaded, so no third-party server
   ever sees a visitor's IP address.
   ========================================================================== */

.ssf25.ssf25 {

	/* ---- 1. COLOURS -----------------------------------------------------
	   Wired into the Revere design tokens in style.css rather than to fixed
	   hex values, the same way as smp30.css, so the two tools stay a matched
	   pair and both switch with the dark theme.

	   Note there is deliberately no --ink here. The site already defines
	   --ink on :root, so leaving it out lets it inherit, and redefining it
	   in terms of itself would be a circular reference.                    */

	--accent:          var(--laurel);      /* selected answers, bars          */
	--accent-strong:   var(--laurel-deep); /* darker shade, used on hover     */
	--accent-contrast: var(--paper);       /* label on top of the accent      */
	--accent-tint:     var(--laurel-wash); /* soft background wash            */

	--ink-soft:        var(--muted);       /* secondary text                  */

	--surface:         var(--card);        /* panel background                */
	--field:           var(--paper-2);     /* unselected answer background    */
	--rule:            var(--line);        /* hairlines                       */

	--second:          var(--taupe);       /* the runner-up option's bars     */
	--flag:            var(--gold);        /* gentle notice colour            */
	--flag-tint:       var(--paper-2);

	/* ---- 2. TYPE --------------------------------------------------------
	   Fraunces and Karla, the pairing the rest of the site uses. Both are
	   already loaded by the page, so this file still fetches nothing.      */

	--font-ui:      var(--body);
	--font-display: var(--display);

	--display-weight: 600;
	--tracking: -0.01em;

	/* ---- 3. SHAPE -------------------------------------------------------
	   Matched to the site's own radii. Buttons are overridden to the full
	   pill shape at the end of this file, so they match .btn.              */

	--radius:       var(--r-sm);
	--radius-panel: var(--r-md);
	--maxwidth:     var(--wrap-narrow);

	/* ===== END OF THEME BLOCK: no need to edit past this point ===== */

	font-family: var(--font-ui);
	color: var(--ink);
	max-width: var(--maxwidth);
	margin-inline: auto;
	line-height: 1.55;
	font-size: 1rem;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Defensive resets against host themes ---------- */

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

/* !important appears in this reset block only, and only on the properties
   that would structurally break the tool if a host theme forced them:
   a label set to display:block collapses the answer rows, a button set to
   width:100% stretches every control across the page. Specificity alone
   cannot beat a host's !important, so these have to match it. Nothing
   decorative is protected this way. */

.ssf25.ssf25 fieldset {
	border: 0 !important;
	background: none;
	min-width: 0;
	padding: 0;
	margin: 0;
}

.ssf25.ssf25 legend {
	color: inherit;
	padding: 0;
	width: auto;
	max-width: none;
	float: none;
	border: 0;
	background: none;
	font-size: inherit;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	line-height: inherit;
}

.ssf25.ssf25 label {
	color: var(--ink);
	display: flex !important;
	font-weight: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0 !important;
	width: auto !important;
	float: none !important;
}

.ssf25.ssf25 ul,
.ssf25.ssf25 ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ssf25.ssf25 button {
	width: auto !important;
	text-transform: none;
	letter-spacing: normal;
	line-height: 1.4;
	box-shadow: none;
	text-decoration: none;
	font-family: inherit;
}

.ssf25.ssf25 details,
.ssf25.ssf25 summary {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.ssf25.ssf25 h1,
.ssf25.ssf25 h2,
.ssf25.ssf25 h3 {
	color: var(--ink) !important;
	text-transform: none;
	clear: none;
	font-family: var(--font-display);
}

.ssf25.ssf25 p {
	margin: 0 0 1em;
	color: inherit;
}

.ssf25.ssf25 p:last-child {
	margin-bottom: 0;
}

/* ---------- Screens ---------- */

.ssf25.ssf25 .ssf25-screen {
	display: none;
}

.ssf25.ssf25 .ssf25-screen.is-active {
	display: block;
}

.ssf25.ssf25 .ssf25-noscript {
	background: var(--flag-tint);
	border-left: 3px solid var(--flag);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	font-size: 0.95rem;
}

/* ---------- Intro ---------- */

.ssf25.ssf25 .ssf25-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.3rem;
}

.ssf25.ssf25 .ssf25-chip {
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-tint);
	border-radius: 999px;
	padding: 0.34rem 0.85rem;
}

.ssf25.ssf25 .ssf25-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.1rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.08;
	margin: 0 0 0.7rem;
	text-wrap: balance;
}

.ssf25.ssf25 .ssf25-lede {
	font-size: 1.14rem;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 32rem;
	margin-bottom: 2rem;
}

.ssf25.ssf25 .ssf25-facts {
	margin: 0 0 1.6rem;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border-radius: var(--radius-panel);
	overflow: hidden;
}

.ssf25.ssf25 .ssf25-facts li {
	background: var(--surface);
	padding: 1rem 1.15rem 1rem 2.6rem;
	position: relative;
	font-size: 0.97rem;
	line-height: 1.5;
}

.ssf25.ssf25 .ssf25-facts li::before {
	content: "";
	position: absolute;
	left: 1.15rem;
	top: 1.4rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--accent);
}

.ssf25.ssf25 .ssf25-draft {
	font-size: 0.89rem;
	line-height: 1.55;
	color: var(--ink-soft);
	background: var(--field);
	border-radius: var(--radius-panel);
	padding: 0.95rem 1.15rem;
	margin-bottom: 2rem;
	max-width: 34rem;
}

/* ---------- Buttons ---------- */

.ssf25.ssf25 .ssf25-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font: inherit;
	font-weight: 600;
	background: var(--accent);
	color: var(--accent-contrast);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 0.8rem 1.7rem;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.ssf25.ssf25 .ssf25-btn:hover {
	background: var(--accent-strong);
	border-color: var(--accent-strong);
	color: var(--accent-contrast);
}

.ssf25.ssf25 .ssf25-btn:active {
	transform: translateY(1px);
}

.ssf25.ssf25 .ssf25-btn:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.ssf25.ssf25 .ssf25-btn--quiet {
	background: transparent;
	color: var(--accent);
	border-color: var(--rule);
}

.ssf25.ssf25 .ssf25-btn--quiet:hover {
	background: var(--accent-tint);
	border-color: var(--accent);
	color: var(--accent);
}

.ssf25.ssf25 .ssf25-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---------- Curriculum picker ---------- */

.ssf25.ssf25 .ssf25-ask {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.3rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.15;
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.ssf25.ssf25 .ssf25-asknote {
	color: var(--ink-soft);
	max-width: 32rem;
	margin-bottom: 1.7rem;
}

.ssf25.ssf25 .ssf25-choices {
	display: grid;
	gap: 0.55rem;
	max-width: 34rem;
}

.ssf25.ssf25 .ssf25-choice {
	display: block !important;
	width: 100% !important;
	text-align: left;
	font: inherit;
	background: var(--field);
	border: 1px solid transparent;
	border-radius: var(--radius);
	padding: 0.9rem 1.1rem;
	cursor: pointer;
	transition: background 0.13s ease, border-color 0.13s ease;
}

.ssf25.ssf25 .ssf25-choice:hover {
	background: var(--accent-tint);
	border-color: var(--accent);
}

.ssf25.ssf25 .ssf25-choice:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 2px;
}

.ssf25.ssf25 .ssf25-choice-name {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--ink);
}

.ssf25.ssf25 .ssf25-choice-sub {
	display: block;
	font-size: 0.87rem;
	color: var(--ink-soft);
	margin-top: 0.12rem;
}

/* ---------- Progress ---------- */

.ssf25.ssf25 .ssf25-progress {
	display: none;
	margin-bottom: 2.2rem;
}

.ssf25.ssf25 .ssf25-progress.is-on {
	display: block;
}

.ssf25.ssf25 .ssf25-track {
	display: block;
	height: 6px;
	background: var(--field);
	border-radius: 999px;
	overflow: hidden;
}

.ssf25.ssf25 .ssf25-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--accent);
	border-radius: 999px;
	transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ssf25.ssf25 .ssf25-progress-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin-top: 0.55rem;
	font-size: 0.82rem;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
}

.ssf25.ssf25 .ssf25-milestone {
	color: var(--accent);
	font-weight: 600;
}

/* ---------- Question card ---------- */

.ssf25.ssf25 .ssf25-card {
	min-height: 22rem;
}

.ssf25.ssf25 .ssf25-card.is-entering {
	animation: ssf25in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ssf25in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.ssf25.ssf25 .ssf25-qtext {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1rem + 1.6vw, 1.85rem);
	font-weight: var(--display-weight);
	line-height: 1.3;
	letter-spacing: var(--tracking);
	margin: 0 0 1.7rem;
	max-width: 32rem;
}

.ssf25.ssf25 .ssf25-qtext:focus {
	outline: none;
}

.ssf25.ssf25 .ssf25-scale {
	display: grid;
	gap: 0.5rem;
	max-width: 34rem;
}

.ssf25.ssf25 .ssf25-opt {
	display: grid !important;
	grid-template-columns: 2.7rem 1fr auto;
	align-items: center;
	gap: 0.95rem;
	padding: 0.72rem 0.95rem;
	background: var(--field);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: var(--radius);
	transition: background 0.13s ease, border-color 0.13s ease;
}

.ssf25.ssf25 .ssf25-opt:hover {
	background: var(--accent-tint);
	border-color: var(--accent);
}

.ssf25.ssf25 .ssf25-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The answers are stacked vertically, so the size cue runs along the row:
   a bar that lengthens as the answer strengthens, reading as a staircase
   down the left edge. Height is fixed so the rows stay level. */
.ssf25.ssf25 .ssf25-bar {
	flex: none;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--ink-soft);
	opacity: 0.38;
	transition: background 0.13s ease, opacity 0.13s ease;
}

.ssf25.ssf25 .ssf25-opt--1 .ssf25-bar { width: 0.5rem; }
.ssf25.ssf25 .ssf25-opt--2 .ssf25-bar { width: 1.05rem; }
.ssf25.ssf25 .ssf25-opt--3 .ssf25-bar { width: 1.6rem; }
.ssf25.ssf25 .ssf25-opt--4 .ssf25-bar { width: 2.15rem; }
.ssf25.ssf25 .ssf25-opt--5 .ssf25-bar { width: 2.7rem; }

.ssf25.ssf25 .ssf25-optlabel {
	font-size: 0.97rem;
	flex: 1;
	transition: color 0.13s ease;
}

.ssf25.ssf25 .ssf25-key {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ink-soft);
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

.ssf25.ssf25 .ssf25-opt.is-checked {
	background: var(--accent);
	border-color: var(--accent);
}

.ssf25.ssf25 .ssf25-opt.is-checked .ssf25-optlabel {
	color: var(--accent-contrast);
	font-weight: 600;
}

.ssf25.ssf25 .ssf25-opt.is-checked .ssf25-key {
	color: var(--accent-contrast);
}

.ssf25.ssf25 .ssf25-opt.is-checked .ssf25-bar {
	background: var(--accent-contrast);
	opacity: 1;
}

.ssf25.ssf25 .ssf25-opt:has(input:focus-visible) {
	outline: 3px solid var(--ink);
	outline-offset: 1px;
}

.ssf25.ssf25 .ssf25-cardfoot {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.8rem;
	min-height: 2.2rem;
}

.ssf25.ssf25 .ssf25-back {
	font: inherit;
	font-size: 0.88rem;
	background: none;
	border: 0;
	color: var(--ink-soft);
	cursor: pointer;
	padding: 0.4rem 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ssf25.ssf25 .ssf25-back:hover {
	color: var(--accent);
}

.ssf25.ssf25 .ssf25-tip {
	font-size: 0.82rem;
	color: var(--ink-soft);
	margin: 0;
}

@media (hover: none) {
	.ssf25.ssf25 .ssf25-tip,
	.ssf25.ssf25 .ssf25-key {
		display: none;
	}
}

/* ---------- Result ---------- */

.ssf25.ssf25 .ssf25-kicker {
	font-size: 0.77rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 0.6rem;
}

.ssf25.ssf25 .ssf25-headline {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.35rem + 3.1vw, 3.05rem);
	font-weight: var(--display-weight);
	letter-spacing: var(--tracking);
	line-height: 1.05;
	margin: 0 0 0.5rem;
	text-wrap: balance;
}

.ssf25.ssf25 .ssf25-subjects {
	font-family: var(--font-ui);
	font-size: 1.02rem;
	color: var(--ink-soft);
	margin: 0 0 1.5rem;
	max-width: 33rem;
}

.ssf25.ssf25 .ssf25-prose {
	font-family: var(--font-display);
	font-size: 1.13rem;
	line-height: 1.68;
	max-width: 33rem;
	color: var(--ink);
}

.ssf25.ssf25 .ssf25-h {
	font-family: var(--font-ui);
	font-size: 0.79rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ink-soft);
	margin: 2.6rem 0 1.1rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--rule);
}

/* Panels and meters */

.ssf25.ssf25 .ssf25-panel {
	background: var(--field);
	border-radius: var(--radius-panel);
	padding: 1.3rem 1.4rem;
	margin: 0 0 1rem;
}

.ssf25.ssf25 .ssf25-panel-title {
	font-size: 0.94rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

.ssf25.ssf25 .ssf25-panel-note {
	font-size: 0.86rem;
	color: var(--ink-soft);
	margin: 0 0 1.1rem;
}

.ssf25.ssf25 .ssf25-meter {
	display: grid;
	grid-template-columns: minmax(6.5rem, 9.5rem) 1fr auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.42rem 0;
	font-size: 0.87rem;
}

.ssf25.ssf25 .ssf25-meter-label {
	line-height: 1.3;
}

.ssf25.ssf25 .ssf25-meter-track {
	display: block;
	height: 0.62rem;
	background: var(--surface);
	border-radius: 999px;
	overflow: hidden;
}

.ssf25.ssf25 .ssf25-meter-fill {
	display: block;
	height: 100%;
	min-width: 3px;
	width: 0;
	border-radius: 999px;
	background: var(--accent);
	transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.ssf25.ssf25 .ssf25-meter--second .ssf25-meter-fill {
	background: var(--second);
}

.ssf25.ssf25 .ssf25-meter--quiet .ssf25-meter-fill {
	background: var(--ink-soft);
	opacity: 0.45;
}

.ssf25.ssf25 .ssf25-meter-val {
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft);
	font-size: 0.81rem;
	min-width: 2.4rem;
	text-align: right;
}

/* The recommended subject list */

.ssf25.ssf25 .ssf25-slots {
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
	border-radius: var(--radius-panel);
	overflow: hidden;
	max-width: 36rem;
}

.ssf25.ssf25 .ssf25-slot {
	background: var(--surface);
	padding: 0.95rem 1.15rem;
	display: grid;
	grid-template-columns: minmax(7rem, 10rem) 1fr;
	gap: 0.4rem 1.1rem;
	align-items: baseline;
}

.ssf25.ssf25 .ssf25-slot-role {
	font-size: 0.77rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--ink-soft);
}

.ssf25.ssf25 .ssf25-slot-name {
	font-weight: 600;
	font-size: 1.01rem;
}

.ssf25.ssf25 .ssf25-slot-why {
	grid-column: 2;
	font-size: 0.88rem;
	color: var(--ink-soft);
	line-height: 1.5;
}

.ssf25.ssf25 .ssf25-slot--hl .ssf25-slot-name::after {
	content: " HL";
	color: var(--accent);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

@media (max-width: 32rem) {
	.ssf25.ssf25 .ssf25-slot {
		grid-template-columns: 1fr;
	}
	.ssf25.ssf25 .ssf25-slot-why {
		grid-column: 1;
	}
}

/* Callouts */

.ssf25.ssf25 .ssf25-note {
	background: var(--accent-tint);
	border-radius: var(--radius-panel);
	padding: 1.2rem 1.35rem;
	margin: 0 0 0.9rem;
	max-width: 36rem;
	font-size: 0.98rem;
	line-height: 1.6;
}

.ssf25.ssf25 .ssf25-care {
	background: var(--flag-tint);
	border-left: 3px solid var(--flag);
	border-radius: var(--radius);
	padding: 1.15rem 1.35rem;
	margin: 1.5rem 0;
	max-width: 36rem;
	font-size: 0.96rem;
	line-height: 1.6;
}

.ssf25.ssf25 .ssf25-asks {
	max-width: 34rem;
	display: grid;
	gap: 0.8rem;
}

.ssf25.ssf25 .ssf25-asks li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 1rem;
	line-height: 1.55;
}

.ssf25.ssf25 .ssf25-asks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62rem;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--accent);
}

.ssf25.ssf25 .ssf25-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 2.6rem 0 1.3rem;
	padding-top: 1.7rem;
	border-top: 1px solid var(--rule);
}

.ssf25.ssf25 .ssf25-privacy {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 34rem;
}

/* ---------- Motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
	.ssf25.ssf25 * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.ssf25.ssf25 .ssf25-actions,
	.ssf25.ssf25 .ssf25-progress {
		display: none;
	}

	.ssf25.ssf25 {
		max-width: none;
		font-size: 11pt;
	}

	.ssf25.ssf25 .ssf25-panel,
	.ssf25.ssf25 .ssf25-slots,
	.ssf25.ssf25 .ssf25-note,
	.ssf25.ssf25 .ssf25-care {
		break-inside: avoid;
	}
}


/* ==========================================================================
   REVERE COUNSELLING OVERRIDES
   --------------------------------------------------------------------------
   The same house-style adjustments smp30.css carries, so the two tools read
   as a pair. Same selector weight as the rules they replace, so they win by
   coming later.
   ========================================================================== */

/* Buttons take the site's call-to-action look: a gold pill with a dark
   label, the same as .btn--primary. Olive stays the accent for chosen
   answers and the report bars. */
.ssf25.ssf25 .ssf25-btn {
	font-family: var(--body);
	font-size: var(--t-sm);
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
	padding: .8rem 1.6rem;
	background: var(--cta);
	border-color: var(--cta);
	/* Gold is a mid-tone, so the label stays dark in both themes. */
	color: #1B1A16;
	box-shadow: var(--shadow);
	transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ssf25.ssf25 .ssf25-btn:hover {
	background: var(--cta-hover);
	border-color: var(--cta-hover);
	color: #1B1A16;
	box-shadow: var(--shadow-lift);
	transform: translateY(-1px);
}

.ssf25.ssf25 .ssf25-btn:active { transform: translateY(1px); }

/* The quiet variant is the site's .btn--ghost. */
.ssf25.ssf25 .ssf25-btn--quiet {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
	box-shadow: none;
}

.ssf25.ssf25 .ssf25-btn--quiet:hover {
	background: var(--laurel-wash);
	border-color: var(--laurel);
	color: var(--laurel-deep);
	box-shadow: none;
}

/* Same focus ring as every other control on the site. */
.ssf25.ssf25 :focus-visible,
.ssf25.ssf25 .ssf25-btn:focus-visible,
.ssf25.ssf25 .ssf25-choice:focus-visible,
.ssf25.ssf25 .ssf25-opt:has(input:focus-visible) {
	outline: 2px solid var(--laurel);
	outline-offset: 3px;
}

/* Chips pick up the tracking of the site's eyebrow labels. */
.ssf25.ssf25 .ssf25-chip {
	letter-spacing: .12em;
}

.ssf25.ssf25 .ssf25-title { line-height: 1.06; }

/* Report panels take the site's hairline and soft shadow. */
.ssf25.ssf25 .ssf25-panel {
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}

/* In the dark theme --card and --paper-2 resolve to the same colour, which
   would leave the meter tracks invisible inside their panel. */
.ssf25.ssf25 .ssf25-meter-track {
	background: color-mix(in srgb, var(--ink) 9%, transparent);
}