/* FF Careers Data widgets — shared styles (Salary Explorer + Skills Demand Explorer).
   Light-only by design: the FF site has no dark mode.
   Palette validated 2026-07-07 (dataviz validator): series #006caa on #ffffff,
   ordinal ramp #7db8da/#5ba6cd/#0d84c4/#006caa/#00466e, accent pair +#c7791a. */

.ffcw {
	--ffcw-series: #006caa;
	--ffcw-series-light: #7db8da;
	--ffcw-track: #ddebf4;
	--ffcw-ink: #1a1a1a;
	--ffcw-ink-2: #555;
	--ffcw-ink-3: #757575;
	--ffcw-hairline: #e3e3e3;
	--ffcw-surface: #fff;
	--ffcw-wash: #f5f8fa;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ffcw-ink);
	margin: 0 0 32px;
}
.ffcw * { box-sizing: border-box; }

/* ── filter row (one row, above everything it scopes) ── */
.ffcw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	padding: 14px;
	border: 1px solid var(--ffcw-hairline);
	border-radius: 12px;
	margin: 0 0 20px;
}
.ffcw-filters__field { display: flex; flex-direction: column; gap: 4px; }
.ffcw-filters__field label { font-size: 0.8em; font-weight: 600; color: var(--ffcw-ink-2); }
.ffcw-filters select {
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: var(--ffcw-surface);
	font-size: 0.9em;
	min-width: 170px;
	color: var(--ffcw-ink);
}
.ffcw-filters__reset {
	padding: 8px 14px;
	border: 1px solid #ccc;
	border-radius: 8px;
	background: #f6f8fa;
	color: #24292f;
	cursor: pointer;
	font-size: 0.9em;
}
.ffcw-filters__reset:hover { background: #eef1f4; }

/* ── stat tiles ── */
.ffcw-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.ffcw-tile {
	flex: 1 1 150px;
	border: 1px solid var(--ffcw-hairline);
	border-radius: 12px;
	padding: 14px 16px;
	background: var(--ffcw-surface);
}
.ffcw-tile__label { font-size: 0.8em; color: var(--ffcw-ink-2); margin: 0 0 2px; }
.ffcw-tile__value { font-size: 1.7em; font-weight: 600; color: var(--ffcw-ink); }
.ffcw-tile__sub { font-size: 0.78em; color: var(--ffcw-ink-3); margin-top: 2px; }

/* ── chart cards ── */
.ffcw-card {
	border: 1px solid var(--ffcw-hairline);
	border-radius: 12px;
	padding: 18px;
	margin: 0 0 20px;
	background: var(--ffcw-surface);
}
.ffcw-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 4px; }
.ffcw-card__title { font-size: 1.05em; font-weight: 700; margin: 0; }
.ffcw-card__sub { font-size: 0.82em; color: var(--ffcw-ink-3); margin: 0 0 14px; }
.ffcw-card__toggle {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.82em;
	color: var(--ffcw-series);
	cursor: pointer;
	text-decoration: underline;
}

/* ── horizontal bar rows ── */
.ffcw-row { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; gap: 10px; align-items: center; padding: 5px 0; }
.ffcw-row__label { font-size: 0.88em; color: var(--ffcw-ink-2); text-align: right; overflow-wrap: break-word; }
.ffcw-row--dim .ffcw-row__bar-fill, .ffcw-row--dim .ffcw-range__span { opacity: 0.35; }
.ffcw-row--hot .ffcw-row__label { color: var(--ffcw-ink); font-weight: 600; }
.ffcw-row__bar { position: relative; height: 16px; }
.ffcw-row__bar-fill {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: var(--ffcw-series);
	border-radius: 0 4px 4px 0; /* rounded data-end, square at the baseline */
	min-width: 2px;
}
.ffcw-row__value {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8em;
	color: var(--ffcw-ink-2);
	white-space: nowrap;
	padding: 0 4px;
	margin-left: 4px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 4px;
}

/* ── salary range rows (p25–p75 span + median tick) ── */
.ffcw-range { position: relative; height: 16px; }
.ffcw-range__track { position: absolute; left: 0; right: 0; top: 6px; height: 4px; background: var(--ffcw-track); border-radius: 2px; }
.ffcw-range__span { position: absolute; top: 0; height: 16px; background: var(--ffcw-series-light); border-radius: 4px; }
.ffcw-range__median { position: absolute; top: -3px; width: 4px; height: 22px; background: var(--ffcw-series); border-radius: 2px; box-shadow: 0 0 0 2px var(--ffcw-surface); }

/* hover/focus lift + hit target */
.ffcw-hit { position: absolute; inset: -6px 0; cursor: default; }
.ffcw-row:hover .ffcw-row__bar-fill, .ffcw-hit:focus ~ .ffcw-row__bar-fill { filter: brightness(1.15); }
.ffcw-hit:focus { outline: 2px solid var(--ffcw-series); outline-offset: 2px; }

/* ── tooltip ── */
/* Appended to <body>, OUTSIDE .ffcw — never use the .ffcw-scoped CSS variables
   here (they resolve to nothing at body level: transparent-box bug, 2026-07-19) */
.ffcw-tip {
	position: absolute;
	z-index: 99999;
	background: #1a1a1a;
	color: #fff;
	border-radius: 8px;
	padding: 8px 11px;
	font-size: 0.8em;
	line-height: 1.4;
	pointer-events: none;
	max-width: 260px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.ffcw-tip strong { font-size: 1.15em; }

/* ── tabs (skills groups) ── */
.ffcw-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ffcw-tab {
	padding: 7px 14px;
	border: 1px solid #ccc;
	border-radius: 20px;
	background: var(--ffcw-surface);
	color: var(--ffcw-ink-2);
	font-size: 0.88em;
	cursor: pointer;
}
.ffcw-tab[aria-selected="true"] { background: var(--ffcw-series); border-color: var(--ffcw-series); color: #fff; font-weight: 600; }

/* ── table view ── */
.ffcw-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
.ffcw-table th, .ffcw-table td { padding: 7px 10px; border-bottom: 1px solid var(--ffcw-hairline); text-align: left; }
.ffcw-table td.num, .ffcw-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ffcw-table th { color: var(--ffcw-ink-2); font-weight: 600; }

/* ── notices & footer ── */
.ffcw-note { font-size: 0.82em; color: var(--ffcw-ink-3); font-style: italic; margin: 10px 0 0; }
.ffcw-empty { padding: 14px; background: var(--ffcw-wash); border-radius: 8px; font-size: 0.9em; color: var(--ffcw-ink-2); }
.ffcw-method {
	font-size: 0.82em;
	color: var(--ffcw-ink-3);
	border-top: 1px solid var(--ffcw-hairline);
	padding-top: 12px;
	margin-top: 4px;
}

/* ── training finder ── */
.fftf-step { margin: 0 0 16px; }
.fftf-step__label { font-size: 0.88em; font-weight: 600; color: var(--ffcw-ink-2); margin: 0 0 6px; }
.fftf-step__options { display: flex; gap: 8px; flex-wrap: wrap; }
.fftf-step select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; background: var(--ffcw-surface); font-size: 0.9em; min-width: 200px; color: var(--ffcw-ink); }
.fftf-step .ffcw-tab[aria-pressed="true"] { background: var(--ffcw-series); border-color: var(--ffcw-series); color: #fff; font-weight: 600; }
.fftf-courses { list-style: none; margin: 0; padding: 0; }
.fftf-course { padding: 10px 0; border-bottom: 1px solid var(--ffcw-hairline); }
.fftf-course:last-child { border-bottom: none; }
.fftf-course a { color: var(--ffcw-series); }
.fftf-provider { color: var(--ffcw-ink-2); font-size: 0.92em; }
.fftf-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.fftf-cred { font-size: 0.78em; font-weight: 700; color: var(--ffcw-ink-2); border: 1px solid var(--ffcw-hairline); border-radius: 6px; padding: 1px 7px; }
.fftf-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fftf-chip { font-size: 0.75em; color: var(--ffcw-ink-3); background: var(--ffcw-wash); border-radius: 6px; padding: 2px 8px; }
.fftf-where { font-size: 0.78em; color: var(--ffcw-ink-3); }
.fftf-dir-toggle { display: block; margin: 0 0 20px; font-size: 0.95em; }
.fftf-featured { border-color: var(--ffcw-series); border-width: 2px; }
.fftf-featured__flag { display: inline-block; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--ffcw-series); border-radius: 6px; padding: 3px 9px; margin: 0 0 10px; }
.ffcw input[type="search"] { padding: 8px 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 0.9em; min-width: 200px; }

@media (max-width: 640px) {
	.ffcw-filters select { min-width: 0; width: 100%; }
	.ffcw-filters__field { flex: 1 1 100%; }
	.ffcw-row { grid-template-columns: 1fr; gap: 2px; }
	.ffcw-row__label { text-align: left; }
	.ffcw-tile { flex: 1 1 45%; }
}