/*
 * The Workbench hub (/tools). Loaded after ai-visibility-landing.css, whose
 * .geol-* rules (creative set A: Navy hero, Maven Pro, cards, steps, end band)
 * the hub is built on; this file adds only the hub's own pieces, scoped to .wbh.
 *
 * Colours are the landing's variables, so light and dark follow it.
 *
 * 2026-10-14 (issue #1199)
 */

/* ---------------------------------------------------------------------------
   The example client report in the hero
   --------------------------------------------------------------------------- */

.wbh-mock {
	position: relative;
	font-family: var(--gl-display);
}

.wbh .wbh-mock .geol-window-body {
	padding: 20px 22px 22px;
}

.wbh-mock-title {
	margin-bottom: 14px !important;
	color: var(--gl-navy);
	font-size: 16px;
	font-weight: 800;
}

.wbh-mock-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.wbh-mock-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 14px;
	border-radius: 14px;
	background: #F5F8FA;
	color: var(--gl-small);
	font-size: 12px;
	font-weight: 700;
}

.wbh .wbh-mock-tile .geol-ring,
.wbh .wbh-mock-tile .geol-ring svg {
	width: 64px;
	height: 64px;
}

.wbh .wbh-mock-tile .geol-ring .geol-score-track {
	stroke: #EAF7FE;
	stroke-width: 7;
}

.wbh .wbh-mock-tile .geol-ring .geol-score-arc {
	stroke-width: 7;
}

.wbh .wbh-mock-tile .geol-ring b {
	color: var(--gl-navy);
	font-size: 20px;
}

.wbh-mock-big {
	color: var(--gl-navy);
	font-size: 34px;
	font-weight: 800;
	line-height: 64px;
}

.wbh-mock-big small {
	font-size: 13px;
	color: var(--gl-small);
}

/* The composition's one Amber accent. */
.wbh-amber {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--gl-amber);
	color: var(--gl-navy);
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}

.wbh-mock-chart {
	padding: 12px 14px 4px;
	border-radius: 14px;
	background: #F5F8FA;
}

.wbh-mock-chart-head {
	display: flex;
	justify-content: space-between;
	color: var(--gl-small);
	font-size: 12px;
	font-weight: 700;
}

.wbh-mock-chart-head b {
	color: var(--gl-navy);
	font-size: 15px;
}

.wbh-mock-chart-head small,
.wbh-up {
	color: #12936A;
	font-weight: 800;
}

.wbh-mock-chart svg {
	display: block;
	width: 100%;
	height: 70px;
}

.wbh-line {
	fill: none;
	stroke: #0DA9EF;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.wbh-mock-rows p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px !important;
	color: var(--gl-ink);
	font-size: 13px;
	font-weight: 600;
}

.wbh-mock-rows .sci {
	color: var(--gl-deep);
	font-size: 16px;
}

.wbh-mock-rows span {
	flex: 1;
}

.wbh-mock-rows b {
	color: var(--gl-navy);
	font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Numbers: what the tools have done, counted
   --------------------------------------------------------------------------- */

.wbh-stats {
	padding: 30px 0;
	border-bottom: 1px solid var(--gl-line);
	background: var(--gl-page);
}

.wbh-stats ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbh-stats li {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wbh-stat-icon,
.wbh-mine-icon,
.wbh-tool-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--gl-tint);
	color: var(--gl-deep);
	font-size: 22px;
	line-height: 1;
}

.dark-theme .wbh-stat-icon,
.dark-theme .wbh-tool-icon {
	color: var(--gl-sky);
}

.wbh-stats b {
	display: block;
	font-family: var(--gl-display);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.05;
	color: var(--gl-strong);
}

.wbh-stats small {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--gl-muted);
}

/* ---------------------------------------------------------------------------
   The member's own numbers
   --------------------------------------------------------------------------- */

.wbh .wbh-mine-section {
	padding: 56px 0 8px;
}

.wbh-mine {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 1fr;
	gap: 18px;
}

.wbh .wbh-mine-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	overflow: hidden;
	color: var(--gl-text);
}

a.wbh-mine-card:hover {
	border-color: var(--gl-sky);
}

.wbh-mine-card b {
	margin-top: 10px;
	font-family: var(--gl-display);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	color: var(--gl-strong);
}

.wbh-mine-card b small {
	font-size: 15px;
	color: var(--gl-muted);
}

.wbh-mine-card > span:not(.wbh-mine-icon) {
	font-size: 14px;
	color: var(--gl-muted);
}

.wbh-mine-line {
	position: absolute;
	right: 22px;
	bottom: 22px;
	width: 46%;
	height: 64px;
}

.wbh-tint-sky { background: #E2F2FC; color: #0B4F7C; }
.wbh-tint-teal { background: #E3F8EF; color: #0B5D43; }
.wbh-tint-indigo { background: #ECEBFD; color: #3F3A9E; }
.wbh-tint-amber { background: #FFF3DC; color: #7A4B00; }

.dark-theme .wbh-tint-sky { background: rgba(63, 169, 230, .16); color: #8CD0F5; }
.dark-theme .wbh-tint-teal { background: rgba(54, 214, 157, .16); color: #7CEBC1; }
.dark-theme .wbh-tint-indigo { background: rgba(124, 116, 240, .18); color: #B9B4FA; }
.dark-theme .wbh-tint-amber { background: rgba(245, 165, 36, .16); color: #FFCB73; }

/* ---------------------------------------------------------------------------
   The tools
   --------------------------------------------------------------------------- */

.wbh-tools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.wbh .wbh-tool {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.wbh-tool-art {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 190px;
	background: var(--gl-tint);
	border-bottom: 1px solid var(--gl-line);
}

.wbh-tool-art img {
	max-height: 160px;
	width: auto;
}

.wbh-tool-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px 28px 28px;
}

.wbh-tool-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px !important;
}

.wbh-tool-icon {
	width: 44px;
	height: 44px;
	font-size: 20px;
}

.wbh .wbh-tool h3 a {
	color: var(--gl-strong);
}

.wbh .wbh-tool h3 a:hover {
	color: var(--gl-link);
}

.wbh-ticks {
	margin: 18px 0 24px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--gl-text);
}

.wbh-ticks li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}

.wbh-ticks .fas {
	color: var(--gl-sky);
	font-size: 13px;
}

.wbh-tool .geol-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* Coming next: muted, not links. */
.wbh-next {
	margin-top: 56px;
}

.wbh-next-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.wbh-next-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border: 1px dashed var(--gl-line);
	border-radius: 16px;
	background: var(--gl-card);
}

.wbh-next-card img {
	flex: 0 0 auto;
	opacity: .85;
}

.wbh-next-card > span:nth-child(2) {
	flex: 1;
}

.wbh-next-card b {
	display: block;
	font-family: var(--gl-display);
	font-size: 17px;
	color: var(--gl-strong);
}

.wbh-next-card small {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	color: var(--gl-muted);
}

/* ---------------------------------------------------------------------------
   Narrower screens
   --------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.wbh-mine {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wbh-mine-wide {
		grid-column: span 2;
	}
}

@media (max-width: 767.98px) {
	.wbh-tools,
	.wbh-next-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575.98px) {
	.wbh-mine {
		grid-template-columns: minmax(0, 1fr);
	}

	.wbh-mine-wide {
		grid-column: auto;
	}

	.wbh-mine-line {
		position: static;
		width: 100%;
		margin-top: 8px;
	}
}