/* ================================================================
   Clock Ring Component — clock-ring.css
   Reusable clock ring display for Nomo webview pages.
   Requires: clock-ring.js
   ================================================================ */

/* ---- Base clock wrapper ---- */
.nomo-clock {
	position: relative;
	aspect-ratio: 1;
}

/* SVG fills the wrapper */
.cr-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---- Info overlay (count + unit centered in ring) ---- */
.cr-info {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	padding-top: 2.5%;
}

/* ---- Count number (Roboto Condensed Bold) ---- */
.cr-count {
	font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
	line-height: 0.78;
	letter-spacing: -0.035em;
	color: var(--text);
	white-space: nowrap;
	max-width: 65%;
}

/* ---- Unit label (system sans-serif) ---- */
.cr-unit {
	font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-weight: 400;
	color: var(--text);
	opacity: 0.65;
	line-height: 1;
	margin-top: 2%;
}


/* ================================================================
   Size Variants
   ================================================================ */

/* ---- Large (ClockOnePage / shared-clock) ---- */
.nomo-clock.large {
	width: 65vw;
	max-width: 270px;
}

.nomo-clock.large .cr-count {
	font-size: min(20vw, 82px);
}

.nomo-clock.large .cr-unit {
	font-size: min(5vw, 20px);
}

/* ---- Small (profile grid, clock lists) ---- */
.nomo-clock.small {
	width: 38vw;
	max-width: 150px;
}

.nomo-clock.small .cr-count {
	font-size: min(12vw, 48px);
}

.nomo-clock.small .cr-unit {
	font-size: min(3vw, 12px);
}


/* ================================================================
   Profile Photo — positioned at bottom-right ON the ring
   Center of the photo circle sits on the ring stroke.
   Ring at r=43 in viewBox 100 → bottom-right (135°) is at ~80.4% from top-left.
   ================================================================ */

.cr-pfp-wrap {
	position: absolute;
	width: 22%;
	height: 22%;
	border-radius: 50%;
	overflow: hidden;
	/* center of pfp on the ring at 135° (bottom-right) */
	left: 80.4%;
	top: 80.4%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	pointer-events: auto;
	z-index: 5;
	border: 3px solid var(--nomo-blue);
	box-sizing: content-box;
}

.cr-pfp {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}