/** Digital360 components. */

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

.d360-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--d360-sp-2);
	padding: 0.625rem var(--d360-sp-4);
	min-height: 2.75rem;
	border: 1px solid transparent;
	border-radius: var(--d360-radius-control);
	font: inherit;
	font-size: var(--d360-fs-200);
	font-weight: 560;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--d360-dur) var(--d360-ease),
		border-color var(--d360-dur) var(--d360-ease),
		color var(--d360-dur) var(--d360-ease);
}

.d360-btn--primary {
	background: var(--d360-action);
	color: #fff;
}

.d360-btn--primary:hover {
	background: var(--d360-action-hover);
	color: #fff;
}

.d360-btn--secondary {
	background: var(--d360-surface);
	border-color: var(--d360-border);
	color: var(--d360-ink);
}

.d360-btn--secondary:hover {
	border-color: var(--d360-ink-3);
	color: var(--d360-ink);
}

.d360-btn--ghost {
	background: transparent;
	color: var(--d360-action);
}

.d360-btn--ghost:hover { background: var(--d360-action-tint); }

.d360-btn--lg {
	padding: 0.875rem var(--d360-sp-6);
	min-height: 3.25rem;
	font-size: var(--d360-fs-300);
}

.d360-btn--sm {
	padding: var(--d360-sp-2) var(--d360-sp-3);
	min-height: 2.25rem;
	font-size: var(--d360-fs-100);
}

.d360-btn[disabled],
.d360-btn[aria-disabled="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* -- Card ---------------------------------------------------------------- */

.d360-card {
	background: var(--d360-surface);
	border: 1px solid var(--d360-hairline);
	border-radius: var(--d360-radius-card);
	padding: var(--d360-sp-6);
	box-shadow: var(--d360-shadow-card);
}

.d360-card--interactive {
	transition: box-shadow var(--d360-dur) var(--d360-ease),
		transform var(--d360-dur) var(--d360-ease),
		border-color var(--d360-dur) var(--d360-ease);
}

.d360-card--interactive:hover {
	box-shadow: var(--d360-shadow-lift);
	border-color: var(--d360-border);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.d360-card--interactive:hover { transform: none; }
}

/* -- Score ring ---------------------------------------------------------- */
/* The arrowhead terminal is lifted straight from the logo's final zero, so the
   signature feature and the brand mark resolve to the same shape. */

.d360-ring { display: block; }

.d360-ring__track { stroke: var(--d360-ring-track); }

.d360-ring__from { stop-color: var(--d360-ring-from); }
.d360-ring__to { stop-color: var(--d360-ring-to); }

/* The arc is drawn as one full-circumference dash pulled back by the unearned
   remainder, which is what lets a single offset both size it and animate it. */
.d360-ring__arc {
	stroke-dasharray: var(--d360-ring-circ);
	stroke-dashoffset: var(--d360-ring-offset);
}

.d360-ring__cap { fill: var(--d360-ring-to); }

.d360-ring--animate .d360-ring__arc {
	animation: d360-ring-draw 1000ms var(--d360-ease) both;
}

.d360-ring--animate .d360-ring__cap {
	animation: d360-ring-cap 260ms var(--d360-ease) 820ms both;
}

@keyframes d360-ring-draw {
	from { stroke-dashoffset: var(--d360-ring-circ); }
}

@keyframes d360-ring-cap {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Motion is decoration here: the value is in the DOM either way. */
@media (prefers-reduced-motion: reduce) {
	.d360-ring--animate .d360-ring__arc,
	.d360-ring--animate .d360-ring__cap {
		animation: none;
	}
}

.d360-ring__value {
	font-family: var(--d360-font-mono);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	fill: var(--d360-ink);
}

.d360-ring__label {
	font-family: var(--d360-font-sans);
	font-size: 7px;
	font-weight: 560;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: var(--d360-ink-3);
}

/* -- Category bar -------------------------------------------------------- */

.d360-bar { display: grid; gap: var(--d360-sp-2); }

.d360-bar__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--d360-sp-3);
	font-size: var(--d360-fs-200);
}

.d360-bar__name {
	display: inline-flex;
	align-items: center;
	gap: var(--d360-sp-2);
	font-weight: 540;
}

/* The dot carries topic identity; it always sits beside the topic's name, so
   colour is reinforcement and never the identifier. */
.d360-bar__name::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 2px;
	background: var(--d360-topic, var(--d360-ink-3));
}

.d360-bar__value {
	font-family: var(--d360-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--d360-ink-2);
}

.d360-bar__track {
	position: relative;
	height: 8px;
	border-radius: var(--d360-radius-pill);
	background: var(--d360-hairline);
	overflow: hidden;
}

/* One hue for every bar. The bar encodes magnitude only — colouring it by topic
   adds no information the label does not already carry, and a green or red bar
   would be read as a verdict on the score rather than as an identity. */
.d360-bar__fill {
	height: 100%;
	border-radius: inherit;
	background: var(--d360-action);
}

.d360-bar__note {
	font-size: var(--d360-fs-100);
	color: var(--d360-ink-3);
}

/* -- Delta chip ---------------------------------------------------------- */

.d360-delta {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.125rem var(--d360-sp-2);
	border-radius: var(--d360-radius-pill);
	font-family: var(--d360-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--d360-fs-100);
	font-weight: 500;
}

.d360-delta--up { background: var(--d360-success-tint); color: var(--d360-success); }
.d360-delta--down { background: var(--d360-danger-tint); color: var(--d360-danger); }
.d360-delta--flat { background: var(--d360-hairline); color: var(--d360-ink-2); }

/* -- Level badge --------------------------------------------------------- */

.d360-level {
	display: inline-flex;
	align-items: center;
	gap: var(--d360-sp-2);
	padding: var(--d360-sp-1) var(--d360-sp-3);
	border: 1px solid var(--d360-border);
	border-radius: var(--d360-radius-pill);
	background: var(--d360-surface);
	font-size: var(--d360-fs-100);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.d360-level::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--d360-level-dot, var(--d360-ink-3));
}

.d360-level--foundation { --d360-level-dot: var(--d360-ink-3); }
.d360-level--practitioner { --d360-level-dot: var(--d360-topic-email-marketing); }
.d360-level--optimizer { --d360-level-dot: var(--d360-action); }
.d360-level--strategist { --d360-level-dot: var(--d360-success); }

/* -- Topic tag ----------------------------------------------------------- */

.d360-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--d360-sp-2);
	font-size: var(--d360-fs-100);
	font-weight: 540;
	color: var(--d360-ink-2);
}

.d360-tag::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 2px;
	background: var(--d360-topic, var(--d360-ink-3));
}

/* -- Site chrome --------------------------------------------------------- */

.d360-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--d360-paper) 88%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--d360-hairline);
}

.d360-header__inner {
	display: flex;
	align-items: center;
	gap: var(--d360-sp-6);
	min-height: 4.5rem;
}

/* The nav uses the horizontal lockup, not the stacked one. Stacked, the
   descriptor renders at 3.5px in a normal-height bar — it would need an 87px
   logo to become legible. Side by side it reads at 7px in a 40px logo. */
.d360-header__logo { display: inline-flex; align-items: center; min-width: 0; }

.d360-header__logo svg,
.d360-header__logo img {
	height: 2.5rem;
	width: auto;
	max-width: 100%;
}

@media (max-width: 30rem) {
	.d360-header__logo svg,
	.d360-header__logo img { height: 2.125rem; }
}

.d360-nav {
	display: none;
	align-items: center;
	gap: var(--d360-sp-6);
	margin-inline-start: auto;
}

.d360-nav a {
	color: var(--d360-ink-2);
	font-size: var(--d360-fs-200);
	font-weight: 540;
	text-decoration: none;
}

.d360-nav a:hover { color: var(--d360-ink); }

@media (min-width: 60rem) {
	.d360-nav { display: flex; }
}

.d360-footer {
	margin-top: var(--d360-sp-24);
	padding-block: var(--d360-sp-12);
	border-top: 1px solid var(--d360-hairline);
	color: var(--d360-ink-3);
	font-size: var(--d360-fs-200);
}

.d360-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--d360-sp-3) var(--d360-sp-6);
	align-items: center;
	justify-content: space-between;
}

.d360-footer__line { margin: 0; }
.d360-footer__links { display: flex; flex-wrap: wrap; gap: var(--d360-sp-4); }
.d360-footer__links a { color: var(--d360-ink-2); text-decoration: none; }
.d360-footer__links a:hover { color: var(--d360-ink); text-decoration: underline; }