/*!
 * Clicker Counter Suite – front-end styles.
 * Everything is scoped under .ccs and uses two-class selectors so theme styles
 * for button/input/table don't leak in.
 */

/* ---------- Tokens ---------- */
.ccs {
	--ccs-ink: #172033;
	--ccs-text: #1e293b;
	--ccs-muted: #586579;
	--ccs-line: #dce3ec;
	--ccs-paper: #f4f7fa;
	--ccs-surface: #ffffff;
	--ccs-soft: #eaeff5;
	--ccs-focus: #2d5bd7;
	--ccs-good: #12805c;
	--ccs-warn: #a86a00;
	--ccs-bad: #c2362f;
	--ccs-dead: #2d5bd7;
	--ccs-device: #1a2435;
	--ccs-device-hi: #2a374d;
	--ccs-device-text: #e8edf3;
	--ccs-device-muted: #9fb0c6;
	--ccs-wheel: #0b111c;
	--ccs-wheel-text: #f3f5f8;
	--ccs-accent: #f5a524;
	--ccs-on-accent: #172033;
	--ccs-radius: 12px;
	--ccs-head-ink: #172033;
	--ccs-head-muted: #586579;
	--ccs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: var(--ccs-max, 880px);
	margin: 0 auto 2em;
	color: var(--ccs-text);
	font-family: var(--ccs-font);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

.ccs *, .ccs *::before, .ccs *::after { box-sizing: border-box; }
.ccs [hidden] { display: none !important; }

.ccs[data-ccs-theme="dark"] {
	--ccs-head-ink: #f3f6fa;
	--ccs-head-muted: #a3b1c4;
	--ccs-text: #e3e9f1;
	--ccs-ink: #f3f6fa;
	--ccs-muted: #a3b1c4;
	--ccs-line: #2f3b50;
	--ccs-paper: #121a27;
	--ccs-surface: #1a2435;
	--ccs-soft: #222e42;
	--ccs-focus: #8fb0ff;
	--ccs-good: #3fbf8f;
	--ccs-warn: #e2a33b;
	--ccs-bad: #ef6a62;
	--ccs-dead: #7f9dff;
	--ccs-device: #0d1420;
	--ccs-device-hi: #1c2738;
}

@media (prefers-color-scheme: dark) {
	.ccs[data-ccs-theme="auto"] {
		--ccs-text: #e3e9f1;
		--ccs-ink: #f3f6fa;
		--ccs-muted: #a3b1c4;
		--ccs-line: #2f3b50;
		--ccs-paper: #121a27;
		--ccs-surface: #1a2435;
		--ccs-soft: #222e42;
		--ccs-focus: #8fb0ff;
		--ccs-good: #3fbf8f;
		--ccs-warn: #e2a33b;
		--ccs-bad: #ef6a62;
		--ccs-dead: #7f9dff;
		--ccs-device: #0d1420;
		--ccs-device-hi: #1c2738;
	}
}

/* ---------- Header (hero-ready) ---------- */
.ccs .ccs-head { margin: 0 0 1.25em; }
.ccs.ccs--align-center .ccs-head { text-align: center; }
.ccs .ccs-head .ccs-title {
	margin: 0 0 .35em;
	padding: 0;
	color: var(--ccs-head-ink);
	font-family: var(--ccs-font);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-transform: none;
	border: 0;
}
.ccs .ccs-head .ccs-sub {
	margin: 0;
	color: var(--ccs-head-muted);
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.55;
	max-width: 62ch;
}
.ccs.ccs--align-center .ccs-head .ccs-sub { margin-left: auto; margin-right: auto; }

/* ---------- App frame ---------- */
.ccs .ccs-app {
	background: var(--ccs-paper);
	border: 1px solid var(--ccs-line);
	border-radius: 24px;
	padding: clamp(12px, 2.6vw, 22px);
}
.ccs .ccs-loading { margin: 0; padding: 2.5em 1em; text-align: center; color: var(--ccs-muted); }
.ccs .ccs-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ccs .ccs-body > * { min-width: 0; }

.ccs .ccs-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Focus */
.ccs button:focus-visible,
.ccs input:focus-visible,
.ccs select:focus-visible,
.ccs textarea:focus-visible,
.ccs summary:focus-visible {
	outline: 3px solid var(--ccs-focus);
	outline-offset: 2px;
}
.ccs .ccs-device button:focus-visible { outline-color: var(--ccs-accent); }

/* ---------- Reset theme button/input styles inside the tool ---------- */
.ccs button {
	font-family: var(--ccs-font);
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	background-image: none;
	min-height: 0;
	min-width: 0;
	margin: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}
.ccs button:disabled { cursor: not-allowed; opacity: .45; }

.ccs .ccs-ico {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}
.ccs .ccs-ico-wrap { display: inline-flex; }

/* ---------- The device (signature element) ---------- */
.ccs .ccs-device {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: clamp(20px, 4.5vw, 34px) clamp(14px, 3vw, 28px);
	border-radius: 22px;
	color: var(--ccs-device-text);
	text-align: center;
	background:
		radial-gradient(130% 120% at 50% -10%, var(--ccs-device-hi) 0%, var(--ccs-device) 62%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .08),
		inset 0 -2px 0 rgba(0, 0, 0, .25),
		0 22px 44px -28px rgba(23, 32, 51, .7);
}
.ccs .ccs-device--compact { gap: 8px; padding-top: 22px; padding-bottom: 22px; }
.ccs .ccs-device__label {
	color: var(--ccs-device-muted);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.ccs .ccs-device__sub { color: var(--ccs-device-muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.ccs .ccs-device__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 4vw, 28px);
	margin-top: 6px;
}
.ccs .ccs-device__controls--sub { margin-top: 0; }

/* Odometer: separate number wheels like a mechanical tally counter */
.ccs .ccs-odo-wrap { display: flex; justify-content: center; max-width: 100%; }
.ccs .ccs-odo {
	display: inline-flex;
	gap: .07em;
	padding: .12em;
	border-radius: .2em;
	background: var(--ccs-wheel);
	box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .08);
	font-size: clamp(54px, 13vw, 108px);
	line-height: 1;
}
.ccs .ccs-odo[data-len="5"] { font-size: clamp(48px, 11vw, 96px); }
.ccs .ccs-odo[data-len="6"] { font-size: clamp(40px, 9.5vw, 84px); }
.ccs .ccs-odo[data-len="7"],
.ccs .ccs-odo[data-len="8"],
.ccs .ccs-odo[data-len="9"],
.ccs .ccs-odo[data-len="10"],
.ccs .ccs-odo[data-len="11"] { font-size: clamp(30px, 7.4vw, 66px); }
.ccs .ccs-odo__d {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: .66em;
	height: 1.16em;
	overflow: hidden;
	border-radius: .07em;
	background: linear-gradient(180deg, #05080e 0%, #1c2638 18%, #2a3549 50%, #1c2638 82%, #05080e 100%);
}
.ccs .ccs-odo__d::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 1px;
	background: rgba(0, 0, 0, .45);
	pointer-events: none;
}
.ccs .ccs-odo__n {
	display: block;
	color: var(--ccs-wheel-text);
	font-family: var(--ccs-font);
	font-size: .84em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.ccs .ccs-odo__d.is-lead .ccs-odo__n { opacity: .28; }
.ccs .ccs-odo__n.roll-up { animation: ccs-roll-up .18s cubic-bezier(.2, .8, .3, 1); }
.ccs .ccs-odo__n.roll-down { animation: ccs-roll-down .18s cubic-bezier(.2, .8, .3, 1); }
@keyframes ccs-roll-up { from { transform: translateY(65%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ccs-roll-down { from { transform: translateY(-65%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Big tactile press button */
.ccs .ccs-press {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: clamp(104px, 24vw, 138px);
	height: clamp(104px, 24vw, 138px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--ccs-on-accent);
	background: var(--ccs-accent);
	background-image: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 55%);
	box-shadow:
		inset 0 -7px 0 rgba(0, 0, 0, .2),
		0 0 0 6px rgba(255, 255, 255, .06),
		0 10px 22px -8px rgba(0, 0, 0, .6);
	font-size: clamp(1.9rem, 6vw, 2.4rem);
	transition: transform .06s ease, box-shadow .06s ease;
}
.ccs .ccs-press:hover { filter: brightness(1.04); background-color: var(--ccs-accent); color: var(--ccs-on-accent); }
.ccs .ccs-press:active:not(:disabled) {
	transform: translateY(4px);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 0 6px rgba(255, 255, 255, .06), 0 4px 10px -6px rgba(0, 0, 0, .6);
}
.ccs .ccs-press .ccs-ico { width: 1em; height: 1em; stroke-width: 2.6; }
.ccs .ccs-press__step { font-size: .95rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ccs .ccs-press--wide {
	width: auto;
	min-width: clamp(150px, 34vw, 210px);
	height: clamp(78px, 18vw, 96px);
	flex-direction: row;
	gap: 10px;
	padding: 0 28px;
	border-radius: 999px;
}
.ccs .ccs-press--wide .ccs-press__step { font-size: 1.3rem; }
.ccs .ccs-press--sm { width: clamp(86px, 20vw, 104px); height: clamp(86px, 20vw, 104px); font-size: 1.8rem; }
.ccs .ccs-press--alt {
	color: #fff;
	background-color: #3f5170;
}
.ccs .ccs-press--alt:hover { background-color: #3f5170; color: #fff; }

/* Round device buttons */
.ccs .ccs-dbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	color: var(--ccs-device-text);
	background: rgba(255, 255, 255, .07);
	box-shadow: none;
	font-size: 1.3rem;
	transition: background-color .12s ease, transform .06s ease;
}
.ccs .ccs-dbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); color: #fff; }
.ccs .ccs-dbtn:active:not(:disabled) { transform: translateY(2px); }
.ccs .ccs-dbtn--wide {
	width: auto;
	height: 64px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: 1.1rem;
	font-weight: 700;
}

/* ---------- Light-area buttons ---------- */
.ccs .ccs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 9px 14px;
	border: 1px solid var(--ccs-line);
	border-radius: 10px;
	color: var(--ccs-text);
	background: var(--ccs-surface);
	box-shadow: none;
	font-size: .92rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .12s ease, border-color .12s ease;
}
.ccs .ccs-btn:hover:not(:disabled) { background: var(--ccs-soft); color: var(--ccs-text); border-color: var(--ccs-line); }
.ccs .ccs-btn--accent { border-color: transparent; color: var(--ccs-on-accent); background: var(--ccs-accent); }
.ccs .ccs-btn--accent:hover:not(:disabled) { color: var(--ccs-on-accent); background: var(--ccs-accent); filter: brightness(1.05); border-color: transparent; }
.ccs .ccs-btn.is-armed,
.ccs .ccs-btn.is-armed:hover { color: #fff; background: var(--ccs-bad); border-color: var(--ccs-bad); }
.ccs .ccs-btn--icon { padding: 8px; border-color: transparent; background: transparent; color: var(--ccs-muted); }
.ccs .ccs-btn--add { justify-self: start; border-style: dashed; }

.ccs .ccs-ibtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ccs-line);
	border-radius: 10px;
	color: var(--ccs-muted);
	background: var(--ccs-surface);
	box-shadow: none;
}
.ccs .ccs-ibtn:hover:not(:disabled) { color: var(--ccs-text); background: var(--ccs-soft); border-color: var(--ccs-line); }
.ccs .ccs-ibtn[aria-pressed="true"] { color: var(--ccs-text); background: var(--ccs-soft); }
.ccs .ccs-ibtn[aria-pressed="false"] { opacity: .65; }

/* ---------- Stats ---------- */
.ccs .ccs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--ccs-line);
	border-radius: var(--ccs-radius);
	background: var(--ccs-surface);
}
.ccs .ccs-stat { margin: 0 -1px -1px 0; padding: 12px 14px; border-right: 1px solid var(--ccs-line); border-bottom: 1px solid var(--ccs-line); background: var(--ccs-surface); }
.ccs .ccs-stat dt { margin: 0; color: var(--ccs-muted); font-size: .82rem; font-weight: 500; }
.ccs .ccs-stat dd {
	margin: 2px 0 0;
	padding: 0;
	color: var(--ccs-ink);
	font-size: 1.2rem;
	font-weight: 750;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}
.ccs .ccs-stats--results .ccs-stat:nth-child(-n+2) dd { font-size: 1.45rem; }
@media (min-width: 640px) { .ccs .ccs-stats--results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Meter & pill ---------- */
.ccs .ccs-meterwrap { width: min(100%, 420px); }
.ccs .ccs-meter {
	height: 8px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, .12);
}
.ccs .ccs-meter__fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--ccs-good);
	transition: width .25s ease;
}
.ccs .ccs-meterwrap[data-state="warn"] .ccs-meter__fill { background: #e2a33b; }
.ccs .ccs-meterwrap[data-state="full"] .ccs-meter__fill { background: #ef6a62; }
.ccs .ccs-meter__label { margin-top: 6px; color: var(--ccs-device-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }

.ccs .ccs-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 99px;
	font-size: .85rem;
	font-weight: 700;
	color: #c9f2e1;
	background: rgba(63, 191, 143, .16);
}
.ccs .ccs-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ccs .ccs-pill[data-state="warn"] { color: #ffd896; background: rgba(226, 163, 59, .18); }
.ccs .ccs-pill[data-state="full"],
.ccs .ccs-pill[data-state="over"] { color: #ffc2bd; background: rgba(239, 106, 98, .2); }

/* ---------- Panels, sections, fields ---------- */
.ccs .ccs-panel {
	margin: 0;
	border: 1px solid var(--ccs-line);
	border-radius: var(--ccs-radius);
	background: var(--ccs-surface);
}
.ccs .ccs-panel__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	color: var(--ccs-ink);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	border-radius: var(--ccs-radius);
}
.ccs .ccs-panel__sum::-webkit-details-marker { display: none; }
.ccs .ccs-panel__sum::after {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid var(--ccs-muted);
	border-bottom: 2px solid var(--ccs-muted);
	transform: rotate(45deg) translateY(-3px);
	transition: transform .15s ease;
}
.ccs .ccs-panel[open] > .ccs-panel__sum::after { transform: rotate(-135deg) translateY(-1px); }
.ccs .ccs-panel__body { padding: 4px 16px 16px; }
.ccs .ccs-panel__body p { margin: 0 0 .75em; color: var(--ccs-text); font-size: .95rem; }

.ccs .ccs-sec { margin: 0; }
.ccs .ccs-sec .ccs-sec__t {
	margin: 6px 0 10px;
	padding: 0;
	color: var(--ccs-ink);
	font-family: var(--ccs-font);
	font-size: 1.05rem;
	font-weight: 750;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	border: 0;
}

.ccs .ccs-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 14px; }
.ccs .ccs-field { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.ccs .ccs-field__label { color: var(--ccs-ink); font-size: .88rem; font-weight: 650; }
.ccs .ccs-field__hint { color: var(--ccs-muted); font-size: .8rem; }
.ccs .ccs-input {
	width: 100%;
	min-height: 42px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--ccs-line);
	border-radius: 9px;
	color: var(--ccs-text);
	background: var(--ccs-surface);
	box-shadow: none;
	font-family: var(--ccs-font);
	font-size: 1rem;
	line-height: 1.3;
}
.ccs .ccs-input:focus { border-color: var(--ccs-focus); }
.ccs .ccs-notes { min-height: 110px; resize: vertical; }
.ccs .ccs-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .95rem; cursor: pointer; }
.ccs .ccs-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ccs-focus); }
.ccs .ccs-inline { display: flex; align-items: flex-end; gap: 6px; }
.ccs .ccs-inline .ccs-field { flex: 1; }

/* Segmented control */
.ccs .ccs-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--ccs-soft);
}
.ccs .ccs-seg__b {
	padding: 8px 14px;
	border: 0;
	border-radius: 9px;
	color: var(--ccs-muted);
	background: transparent;
	box-shadow: none;
	font-size: .9rem;
	font-weight: 650;
}
.ccs .ccs-seg__b:hover { color: var(--ccs-text); background: transparent; }
.ccs .ccs-seg__b[aria-pressed="true"] { color: var(--ccs-ink); background: var(--ccs-surface); box-shadow: 0 1px 2px rgba(23, 32, 51, .15); }
.ccs .ccs-seg--dark { background: rgba(255, 255, 255, .07); }
.ccs .ccs-seg--dark .ccs-seg__b { color: var(--ccs-device-muted); }
.ccs .ccs-seg--dark .ccs-seg__b:hover { color: #fff; }
.ccs .ccs-seg--dark .ccs-seg__b[aria-pressed="true"] { color: var(--ccs-on-accent); background: var(--ccs-accent); box-shadow: none; }

/* ---------- Footer, keys, status ---------- */
.ccs .ccs-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ccs-line);
}
.ccs .ccs-foot__actions, .ccs .ccs-foot__prefs { display: flex; flex-wrap: wrap; gap: 8px; }
.ccs .ccs-keys { margin-top: 12px; }
.ccs .ccs-keys .ccs-panel__sum { font-size: .92rem; }
.ccs .ccs-keys__note { color: var(--ccs-muted); }
.ccs .ccs-keys__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 18px; margin: 0; }
.ccs .ccs-keys__list > div { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.ccs .ccs-keys__list dt { margin: 0; }
.ccs .ccs-keys__list dd { margin: 0; color: var(--ccs-muted); text-align: right; }
.ccs kbd {
	display: inline-block;
	padding: 1px 7px;
	border: 1px solid var(--ccs-line);
	border-bottom-width: 2px;
	border-radius: 6px;
	color: var(--ccs-ink);
	background: var(--ccs-surface);
	font-family: var(--ccs-font);
	font-size: .8rem;
	font-weight: 650;
}
.ccs .ccs-status {
	min-height: 0;
	margin: 0;
	color: var(--ccs-ink);
	font-size: .92rem;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transition: opacity .2s ease;
}
.ccs .ccs-status.is-on {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--ccs-soft);
	opacity: 1;
}

/* ---------- Activity log ---------- */
.ccs .ccs-log { margin: 0; padding: 0; list-style: none; max-height: 300px; overflow-y: auto; border: 1px solid var(--ccs-line); border-radius: var(--ccs-radius); background: var(--ccs-surface); }
.ccs .ccs-log li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: center;
	margin: 0;
	padding: 9px 14px;
	border-bottom: 1px solid var(--ccs-line);
	font-size: .92rem;
}
.ccs .ccs-log li:last-child { border-bottom: 0; }
.ccs .ccs-log li::before { content: none; }
.ccs .ccs-log__time { color: var(--ccs-muted); font-variant-numeric: tabular-nums; }
.ccs .ccs-log__what { font-weight: 650; }
.ccs .ccs-log__meta { color: var(--ccs-muted); font-variant-numeric: tabular-nums; }
.ccs .ccs-log li.is-in .ccs-log__what { color: var(--ccs-good); }
.ccs .ccs-log li.is-out .ccs-log__what { color: var(--ccs-bad); }
.ccs .ccs-log .ccs-log__empty { display: block; color: var(--ccs-muted); text-align: center; padding: 18px; }
.ccs .ccs-empty { margin: 0; padding: 18px; color: var(--ccs-muted); text-align: center; border: 1px dashed var(--ccs-line); border-radius: var(--ccs-radius); }

/* ---------- Tables ---------- */
.ccs .ccs-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ccs-line); border-radius: var(--ccs-radius); background: var(--ccs-surface); }
.ccs .ccs-tablewrap:has(.ccs-empty) { border: 0; background: transparent; }
.ccs .ccs-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.ccs .ccs-table th,
.ccs .ccs-table td {
	padding: 9px 12px;
	border: 0;
	border-bottom: 1px solid var(--ccs-line);
	color: var(--ccs-text);
	background: transparent;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}
.ccs .ccs-table thead th { color: var(--ccs-muted); font-size: .8rem; font-weight: 650; background: var(--ccs-soft); }
.ccs .ccs-table tbody tr:last-child > * { border-bottom: 0; }
.ccs .ccs-table tr.is-best td { background: rgba(18, 128, 92, .09); }
.ccs .ccs-table tr.is-worst td { background: rgba(194, 54, 47, .07); }
.ccs .ccs-table td.is-fast { color: var(--ccs-good); }
.ccs .ccs-table td.is-slow { color: var(--ccs-bad); }

/* ---------- Door counter ---------- */
.ccs .ccs-doors { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ccs .ccs-door { padding: 12px; border: 1px solid var(--ccs-line); border-radius: 16px; background: var(--ccs-surface); }
.ccs .ccs-door__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ccs .ccs-door__head .ccs-input { min-height: 38px; font-weight: 650; }
.ccs .ccs-door__key {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 26px; height: 26px; border-radius: 7px;
	color: var(--ccs-muted); background: var(--ccs-soft);
	font-size: .8rem; font-weight: 700;
}
.ccs .ccs-door__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccs .ccs-door__b {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 96px; padding: 10px;
	border: 0; border-radius: 14px;
	box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .16);
	transition: transform .06s ease;
}
.ccs .ccs-door__b:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16); }
.ccs .ccs-door__b--in, .ccs .ccs-door__b--in:hover { color: var(--ccs-on-accent); background: var(--ccs-accent); }
.ccs .ccs-door__b--out, .ccs .ccs-door__b--out:hover { color: var(--ccs-device-text); background: var(--ccs-device); }
.ccs .ccs-door__lbl { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; font-weight: 700; }
.ccs .ccs-door__n { font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Hourly chart */
.ccs .ccs-chart {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	gap: 3px;
	align-items: end;
	height: 150px;
	padding: 12px 12px 4px;
	border: 1px solid var(--ccs-line);
	border-radius: var(--ccs-radius);
	background: var(--ccs-surface);
}
.ccs .ccs-chart__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.ccs .ccs-chart__bar { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 1px 1px; background: var(--ccs-soft); }
.ccs .ccs-chart__bar.is-on { background: var(--ccs-accent); }
.ccs .ccs-chart__col.is-now .ccs-chart__bar { outline: 2px solid var(--ccs-focus); outline-offset: 1px; }
.ccs .ccs-chart__x { height: 1em; color: var(--ccs-muted); font-size: .7rem; line-height: 1; }

/* ---------- Attendance ---------- */
.ccs .ccs-device--split { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 6vw, 56px); }
.ccs .ccs-device--split > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ccs .ccs-ring {
	--ccs-pct: 0%;
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: clamp(120px, 28vw, 150px); height: clamp(120px, 28vw, 150px);
	border-radius: 50%;
	background: conic-gradient(var(--ccs-accent) var(--ccs-pct), rgba(255, 255, 255, .1) 0);
}
.ccs .ccs-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--ccs-device); }
.ccs .ccs-ring > span { position: relative; }
.ccs .ccs-ring__v { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ccs .ccs-ring__l { color: var(--ccs-device-muted); font-size: .8rem; }
.ccs .ccs-cats { display: grid; gap: 8px; }
.ccs .ccs-cat {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 12px;
	border: 1px solid var(--ccs-line);
	border-radius: 14px;
	background: var(--ccs-surface);
}
.ccs .ccs-cat .ccs-input { min-height: 40px; border-color: transparent; background: transparent; font-weight: 650; padding-left: 4px; }
.ccs .ccs-cat .ccs-input:hover, .ccs .ccs-cat .ccs-input:focus { border-color: var(--ccs-line); }
.ccs .ccs-cat__ctl { display: flex; align-items: center; gap: 8px; }
.ccs .ccs-cat__n { min-width: 3ch; color: var(--ccs-ink); font-size: 1.5rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.ccs .ccs-cat__plus {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 48px; padding: 0;
	border: 0; border-radius: 12px;
	color: var(--ccs-on-accent); background: var(--ccs-accent);
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
	font-size: 1.3rem;
}
.ccs .ccs-cat__plus:hover { color: var(--ccs-on-accent); background: var(--ccs-accent); filter: brightness(1.05); }
.ccs .ccs-cat__plus:active { transform: translateY(2px); }

/* ---------- Golf ---------- */
.ccs .ccs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ccs .ccs-tab {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 9px 14px;
	border: 1px solid var(--ccs-line);
	border-radius: 999px;
	color: var(--ccs-text);
	background: var(--ccs-surface);
	box-shadow: none;
	font-size: .92rem; font-weight: 650;
}
.ccs .ccs-tab:hover { color: var(--ccs-text); background: var(--ccs-soft); border-color: var(--ccs-line); }
.ccs .ccs-tab[aria-pressed="true"] { color: var(--ccs-device-text); background: var(--ccs-device); border-color: var(--ccs-device); }
.ccs .ccs-tab__s { font-variant-numeric: tabular-nums; opacity: .8; }
.ccs .ccs-tab--add { border-style: dashed; color: var(--ccs-muted); }
.ccs .ccs-hole-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ccs .ccs-hole { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ccs .ccs-hole__t { min-width: 6.5ch; color: #fff; font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ccs .ccs-badge {
	padding: 4px 12px;
	border-radius: 99px;
	color: var(--ccs-device-muted);
	background: rgba(255, 255, 255, .07);
	font-size: .88rem; font-weight: 700;
}
.ccs .ccs-badge.is-eagle, .ccs .ccs-badge.is-birdie { color: #c9f2e1; background: rgba(63, 191, 143, .18); }
.ccs .ccs-badge.is-par { color: #fff; }
.ccs .ccs-badge.is-bogey { color: #ffd896; background: rgba(226, 163, 59, .18); }
.ccs .ccs-badge.is-dbl { color: #ffc2bd; background: rgba(239, 106, 98, .2); }
.ccs .ccs-putts { display: flex; align-items: center; gap: 10px; color: var(--ccs-device-muted); font-size: .92rem; font-weight: 600; }
.ccs .ccs-putts__n { min-width: 2ch; color: #fff; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ccs .ccs-mini {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	color: var(--ccs-device-text);
	background: rgba(255, 255, 255, .07);
}
.ccs .ccs-mini:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* Scorecard with traditional golf notation: circles under par, squares over. */
.ccs .ccs-card th, .ccs .ccs-card td { padding: 7px 6px; text-align: center; min-width: 34px; }
.ccs .ccs-card th[scope="row"] { text-align: left; padding-left: 12px; position: sticky; left: 0; z-index: 1; background: var(--ccs-surface); max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.ccs .ccs-card thead th[scope="col"]:first-child { position: sticky; left: 0; z-index: 2; text-align: left; padding-left: 12px; }
.ccs .ccs-card .ccs-sum { font-weight: 800; color: var(--ccs-ink); background: var(--ccs-soft); }
.ccs .ccs-card .ccs-parrow td, .ccs .ccs-card .ccs-parrow th { color: var(--ccs-muted); }
.ccs .ccs-card .is-cur { background: rgba(245, 165, 36, .14); background: color-mix(in srgb, var(--ccs-accent) 16%, transparent); }
.ccs .ccs-card tr.is-active th[scope="row"] { font-weight: 800; color: var(--ccs-ink); }
.ccs .ccs-holebtn {
	width: 28px; height: 28px; padding: 0;
	border: 0; border-radius: 8px;
	color: inherit; background: transparent;
	font-size: .82rem; font-weight: 700;
}
.ccs .ccs-holebtn:hover { color: var(--ccs-ink); background: var(--ccs-surface); }
.ccs .ccs-sc {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	font-weight: 700; line-height: 1;
}
.ccs .ccs-sc.is-birdie { border: 1.5px solid var(--ccs-good); border-radius: 50%; color: var(--ccs-good); }
.ccs .ccs-sc.is-eagle { border: 1.5px solid var(--ccs-good); border-radius: 50%; color: var(--ccs-good); box-shadow: 0 0 0 2px var(--ccs-surface), 0 0 0 3.5px var(--ccs-good); }
.ccs .ccs-sc.is-bogey { border: 1.5px solid var(--ccs-warn); color: var(--ccs-warn); }
.ccs .ccs-sc.is-dbl { border: 1.5px solid var(--ccs-bad); color: var(--ccs-bad); box-shadow: 0 0 0 2px var(--ccs-surface), 0 0 0 3.5px var(--ccs-bad); }
.ccs .ccs-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 10px 0 0; color: var(--ccs-muted); font-size: .85rem; }
.ccs .ccs-legend .ccs-sc { width: 22px; height: 22px; font-size: .78rem; margin-left: 8px; }

/* ---------- Knit ---------- */
.ccs .ccs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 4vw, 40px); width: 100%; }
.ccs .ccs-duo__col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ccs .ccs-device--duo .ccs-odo { font-size: clamp(40px, 9vw, 80px); }
.ccs .ccs-repeat { color: #fff; font-size: 1.05rem; font-weight: 700; }
.ccs .ccs-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px; }
.ccs .ccs-dots span { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ccs .ccs-dots span.is-done { background: var(--ccs-device-muted); }
.ccs .ccs-dots span.is-cur { background: var(--ccs-accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }

/* ---------- Cell counter (Neubauer grid) ---------- */
.ccs .ccs-device--cell { gap: 18px; }
.ccs .ccs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	width: min(100%, 460px);
	padding: 6px;
	border-radius: 10px;
	background: #c7d2df;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
.ccs .ccs-sq { position: relative; aspect-ratio: 1 / 1; }
.ccs .ccs-sq__main {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	width: 100%; height: 100%; padding: 6px;
	border: 0; border-radius: 6px;
	color: var(--ccs-ink);
	background-color: #f7fafc;
	box-shadow: none;
	background-image:
		linear-gradient(to right, rgba(23, 32, 51, .1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(23, 32, 51, .1) 1px, transparent 1px);
	background-size: 25% 25%;
	transition: transform .05s ease, background-color .12s ease;
}
.ccs .ccs-sq--center .ccs-sq__main { background-size: 20% 20%; }
.ccs .ccs-sq--edge-h .ccs-sq__main { background-size: 20% 25%; }
.ccs .ccs-sq--edge-v .ccs-sq__main { background-size: 25% 20%; }
.ccs .ccs-sq__main:hover { color: var(--ccs-ink); background-color: #fff; }
.ccs .ccs-sq__main:active { transform: scale(.97); }
.ccs .ccs-sq__i { position: absolute; top: 6px; left: 8px; color: #6b7a90; font-size: .72rem; font-weight: 700; }
.ccs .ccs-sq__n { font-size: clamp(1.4rem, 5.5vw, 2.1rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ccs .ccs-sq__sub { color: #5b6779; font-size: clamp(.62rem, 2vw, .74rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.ccs .ccs-sq__minus {
	position: absolute; top: 4px; right: 4px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; padding: 0;
	border: 0; border-radius: 50%;
	color: #3a4658;
	background: rgba(23, 32, 51, .08);
	font-size: .8rem;
}
.ccs .ccs-sq__minus:hover { color: #172033; background: rgba(23, 32, 51, .16); }
.ccs .ccs-sq.is-off .ccs-sq__main {
	color: #7b8799;
	background-color: #dfe5ec;
	background-image: repeating-linear-gradient(45deg, rgba(23, 32, 51, .07) 0 6px, transparent 6px 12px);
	background-size: auto;
}
.ccs[data-ccs-mode="l"] .ccs-sq:not(.is-off) .ccs-sq__n { color: var(--ccs-good); }
.ccs[data-ccs-mode="d"] .ccs-sq:not(.is-off) .ccs-sq__n { color: #2d5bd7; }
.ccs[data-ccs-mode="e"] .ccs-sq:not(.is-off) .ccs-sq__main { box-shadow: inset 0 0 0 3px var(--ccs-accent); }
.ccs .ccs-seg--cell { background: rgba(255, 255, 255, .07); }
.ccs .ccs-seg--cell .ccs-seg__b { color: var(--ccs-device-muted); }
.ccs .ccs-seg--cell .ccs-seg__b:hover { color: #fff; }
.ccs .ccs-seg--cell .ccs-seg__b[aria-pressed="true"] { color: var(--ccs-on-accent); background: var(--ccs-accent); box-shadow: none; }
.ccs[data-ccs-mode="d"] .ccs-seg--cell .ccs-seg__b[aria-pressed="true"] { color: #fff; background: #2d5bd7; }
.ccs[data-ccs-mode="l"] .ccs-seg--cell .ccs-seg__b[aria-pressed="true"] { color: #fff; background: #12805c; }
.ccs .ccs-note { color: var(--ccs-muted); font-size: .88rem; }

/* ---------- Lap ---------- */
.ccs .ccs-timebox { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ccs .ccs-clock { color: #fff; font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.1; }
.ccs.is-running .ccs-clock { color: var(--ccs-accent); }

/* ==================================================================
 * Compact size (default) – a single, light card built for hero sections.
 * ================================================================== */
.ccs[data-ccs-size="compact"] { margin-bottom: 0; font-size: 14px; line-height: 1.45; }
.ccs[data-ccs-size="compact"] .ccs-head { margin-bottom: .6em; }
.ccs[data-ccs-size="compact"] .ccs-head .ccs-title { font-size: clamp(1.2rem, 1rem + .9vw, 1.5rem); letter-spacing: -.015em; }
.ccs[data-ccs-size="compact"] .ccs-head .ccs-sub { font-size: .92rem; }

/* Card */
.ccs[data-ccs-size="compact"] .ccs-app {
	padding: 12px;
	border: 1px solid var(--ccs-line);
	border-radius: 18px;
	background: var(--ccs-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 16px 36px -18px rgba(16, 24, 40, .28);
}
.ccs[data-ccs-size="compact"] .ccs-body { gap: 10px; }
.ccs[data-ccs-size="compact"] .ccs-loading { padding: 1.5em 1em; }

/* Display area: light, quiet, with the counter wheels as the focal point */
.ccs[data-ccs-size="compact"] .ccs-device {
	--ccs-focus-in: var(--ccs-focus);
	gap: 8px;
	padding: 14px 12px;
	border: 1px solid var(--ccs-line);
	border-radius: 14px;
	color: var(--ccs-ink);
	background: var(--ccs-paper);
	box-shadow: none;
}
.ccs[data-ccs-size="compact"] .ccs-device button:focus-visible { outline-color: var(--ccs-focus); }
.ccs[data-ccs-size="compact"] .ccs-device--compact { padding: 12px; }
.ccs[data-ccs-size="compact"] .ccs-device__label { color: var(--ccs-muted); font-size: .76rem; font-weight: 600; }
.ccs[data-ccs-size="compact"] .ccs-device__sub { color: var(--ccs-muted); font-size: .78rem; }

.ccs[data-ccs-size="compact"] .ccs-odo,
.ccs[data-ccs-size="compact"] .ccs-odo[data-len] { font-size: clamp(34px, 7vw, 46px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55); border-radius: .16em; }
.ccs[data-ccs-size="compact"] .ccs-odo[data-len="5"] { font-size: clamp(30px, 6.4vw, 42px); }
.ccs[data-ccs-size="compact"] .ccs-odo[data-len="6"] { font-size: clamp(27px, 5.6vw, 37px); }
.ccs[data-ccs-size="compact"] .ccs-odo[data-len="7"], .ccs[data-ccs-size="compact"] .ccs-odo[data-len="8"], .ccs[data-ccs-size="compact"] .ccs-odo[data-len="9"], .ccs[data-ccs-size="compact"] .ccs-odo[data-len="10"], .ccs[data-ccs-size="compact"] .ccs-odo[data-len="11"] { font-size: clamp(22px, 4.6vw, 30px); }
.ccs[data-ccs-size="compact"] .ccs-device--duo .ccs-odo { font-size: clamp(28px, 6vw, 36px); }

.ccs[data-ccs-size="compact"] .ccs-device__controls { gap: 12px; margin-top: 2px; }
.ccs[data-ccs-size="compact"] .ccs-press {
	width: 64px; height: 64px;
	font-size: 1.35rem;
	background-image: none;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14), 0 6px 14px -6px rgba(16, 24, 40, .45);
}
.ccs[data-ccs-size="compact"] .ccs-press:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .14), 0 2px 6px -4px rgba(16, 24, 40, .45); }
.ccs[data-ccs-size="compact"] .ccs-press__step { font-size: .7rem; font-weight: 750; }
.ccs[data-ccs-size="compact"] .ccs-press--wide { width: auto; min-width: 118px; height: 44px; padding: 0 18px; gap: 8px; font-size: 1.05rem; }
.ccs[data-ccs-size="compact"] .ccs-press--wide .ccs-press__step { font-size: .95rem; }
.ccs[data-ccs-size="compact"] .ccs-press--sm { width: 52px; height: 52px; font-size: 1.15rem; }
.ccs[data-ccs-size="compact"] .ccs-press--sm .ccs-press__step { font-size: .64rem; }
.ccs[data-ccs-size="compact"] .ccs-press--alt, .ccs[data-ccs-size="compact"] .ccs-press--alt:hover { color: var(--ccs-surface); background-color: var(--ccs-ink); }

.ccs[data-ccs-size="compact"] .ccs-dbtn {
	width: 36px; height: 36px;
	border: 1px solid var(--ccs-line);
	color: var(--ccs-ink);
	background: var(--ccs-surface);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	font-size: .95rem;
}
.ccs[data-ccs-size="compact"] .ccs-dbtn:hover:not(:disabled) { color: var(--ccs-ink); background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-dbtn--wide { width: auto; height: 44px; padding: 0 14px; gap: 6px; border-radius: 999px; font-size: .92rem; }

.ccs[data-ccs-size="compact"] .ccs-meterwrap { width: min(100%, 260px); }
.ccs[data-ccs-size="compact"] .ccs-meter { height: 5px; background: var(--ccs-line); }
.ccs[data-ccs-size="compact"] .ccs-meter__label { margin-top: 3px; color: var(--ccs-muted); font-size: .74rem; }
.ccs[data-ccs-size="compact"] .ccs-meterwrap[data-state="warn"] .ccs-meter__fill { background: var(--ccs-warn); }
.ccs[data-ccs-size="compact"] .ccs-meterwrap[data-state="full"] .ccs-meter__fill { background: var(--ccs-bad); }
.ccs[data-ccs-size="compact"] .ccs-pill { padding: 2px 9px; font-size: .72rem; color: var(--ccs-good); background: rgba(18, 128, 92, .1); }
.ccs[data-ccs-size="compact"] .ccs-pill[data-state="warn"] { color: var(--ccs-warn); background: rgba(168, 106, 0, .1); }
.ccs[data-ccs-size="compact"] .ccs-pill[data-state="full"], .ccs[data-ccs-size="compact"] .ccs-pill[data-state="over"] { color: var(--ccs-bad); background: rgba(194, 54, 47, .1); }

/* Stats: a slim strip instead of boxes */
.ccs[data-ccs-size="compact"] .ccs-stats {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}
.ccs[data-ccs-size="compact"] .ccs-stat {
	flex: 1 1 0;
	min-width: 64px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-left: 1px solid var(--ccs-line);
	background: transparent;
}
.ccs[data-ccs-size="compact"] .ccs-stat:first-child { border-left: 0; padding-left: 4px; }
.ccs[data-ccs-size="compact"] .ccs-stat dt { font-size: .7rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccs[data-ccs-size="compact"] .ccs-stat dd { font-size: .95rem; font-weight: 700; white-space: nowrap; }
.ccs[data-ccs-size="compact"] .ccs-stats--results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 8px; }
.ccs[data-ccs-size="compact"] .ccs-stats--results .ccs-stat:nth-child(5) { border-left: 0; padding-left: 4px; }
.ccs[data-ccs-size="compact"] .ccs-stats--results .ccs-stat:nth-child(-n+2) dd { font-size: .95rem; }

/* Toolbar + drawer */
.ccs[data-ccs-size="compact"] .ccs-foot {
	flex-wrap: nowrap;
	gap: 6px;
	margin-top: 10px;
	padding-top: 10px;
}
.ccs[data-ccs-size="compact"] .ccs-dtabs { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ccs[data-ccs-size="compact"] .ccs-dtabs::-webkit-scrollbar { display: none; }
.ccs[data-ccs-size="compact"] .ccs-dtab {
	flex: none;
	display: inline-flex; align-items: center; gap: 4px;
	height: 30px; padding: 0 10px;
	border: 1px solid var(--ccs-line);
	border-radius: 999px;
	color: var(--ccs-text);
	background: var(--ccs-surface);
	box-shadow: none;
	font-size: .78rem; font-weight: 650;
}
.ccs[data-ccs-size="compact"] .ccs-dtab::after {
	content: ""; width: 6px; height: 6px; margin-left: 2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px); opacity: .6;
}
.ccs[data-ccs-size="compact"] .ccs-dtab:hover { color: var(--ccs-text); background: var(--ccs-soft); border-color: var(--ccs-line); }
.ccs[data-ccs-size="compact"] .ccs-dtab[aria-expanded="true"] { color: var(--ccs-surface); background: var(--ccs-ink); border-color: var(--ccs-ink); }
.ccs[data-ccs-size="compact"] .ccs-dtab[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.ccs[data-ccs-size="compact"] .ccs-foot__actions, .ccs[data-ccs-size="compact"] .ccs-foot__prefs { flex: none; flex-wrap: nowrap; gap: 4px; }
.ccs[data-ccs-size="compact"] .ccs-btn { height: 30px; padding: 0 10px; border-radius: 8px; font-size: .78rem; }
.ccs[data-ccs-size="compact"] .ccs-btn--iconify { width: 30px; padding: 0; border-color: transparent; background: transparent; color: var(--ccs-muted); }
.ccs[data-ccs-size="compact"] .ccs-btn--iconify:hover:not(:disabled) { color: var(--ccs-ink); background: var(--ccs-soft); border-color: transparent; }
.ccs[data-ccs-size="compact"] .ccs-btn--iconify > span { display: none; }
.ccs[data-ccs-size="compact"] .ccs-btn--accent.ccs-btn--iconify, .ccs[data-ccs-size="compact"] .ccs-btn--accent.ccs-btn--iconify:hover:not(:disabled) { color: var(--ccs-on-accent); background: var(--ccs-accent); }
.ccs[data-ccs-size="compact"] .ccs-btn--iconify.is-armed { width: auto; padding: 0 10px; }
.ccs[data-ccs-size="compact"] .ccs-btn--iconify.is-armed > span { display: inline; }
.ccs[data-ccs-size="compact"] .ccs-btn--accent { height: 30px; }
.ccs[data-ccs-size="compact"] .ccs-ibtn { width: 30px; height: 30px; border-color: transparent; border-radius: 8px; background: transparent; }
.ccs[data-ccs-size="compact"] .ccs-ibtn[aria-pressed="true"] { color: var(--ccs-ink); background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-ibtn[aria-pressed="false"] { opacity: .55; }
.ccs[data-ccs-size="compact"] .ccs-btn--icon { width: 30px; height: 30px; padding: 0; }
.ccs[data-ccs-size="compact"] .ccs-btn--icon.is-armed { width: auto; padding: 0 8px; }
.ccs[data-ccs-size="compact"] .ccs-ico { width: 1.05em; height: 1.05em; }
.ccs[data-ccs-size="compact"] .ccs-foot .ccs-ico { width: 16px; height: 16px; }
.ccs[data-ccs-size="compact"] .ccs-keys-wrap { display: none; }

.ccs[data-ccs-size="compact"] .ccs-drawer {
	margin-top: 10px;
	max-height: 260px;
	overflow: auto;
	padding: 12px;
	border: 1px solid var(--ccs-line);
	border-radius: 12px;
	background: var(--ccs-paper);
	overscroll-behavior: contain;
}
.ccs[data-ccs-size="compact"] .ccs-drawer .ccs-panel__body { padding: 0; }
.ccs[data-ccs-size="compact"] .ccs-drawer .ccs-panel__body p { font-size: .86rem; }
.ccs[data-ccs-size="compact"] .ccs-drawer .ccs-log { max-height: none; }
.ccs[data-ccs-size="compact"] .ccs-drawer .ccs-tablewrap { max-height: none; }

.ccs[data-ccs-size="compact"] .ccs-status.is-on { margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: .8rem; }

/* Forms */
.ccs[data-ccs-size="compact"] .ccs-fields { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.ccs[data-ccs-size="compact"] .ccs-field { gap: 3px; }
.ccs[data-ccs-size="compact"] .ccs-field__label { font-size: .76rem; }
.ccs[data-ccs-size="compact"] .ccs-field__hint { font-size: .72rem; }
.ccs[data-ccs-size="compact"] .ccs-input { min-height: 34px; padding: 5px 9px; border-radius: 8px; font-size: .9rem; }
.ccs[data-ccs-size="compact"] .ccs-check { margin-top: 10px; font-size: .85rem; }
.ccs[data-ccs-size="compact"] .ccs-check input { width: 17px; height: 17px; }
.ccs[data-ccs-size="compact"] .ccs-notes { min-height: 80px; }
.ccs[data-ccs-size="compact"] .ccs-log li { padding: 6px 10px; font-size: .8rem; gap: 8px; }
.ccs[data-ccs-size="compact"] .ccs-table { font-size: .8rem; }
.ccs[data-ccs-size="compact"] .ccs-table th, .ccs[data-ccs-size="compact"] .ccs-table td { padding: 6px 8px; }
.ccs[data-ccs-size="compact"] .ccs-empty { padding: 10px; font-size: .82rem; }
.ccs[data-ccs-size="compact"] .ccs-btn--add { justify-self: center; height: 28px; padding: 0 10px; font-size: .76rem; color: var(--ccs-muted); border-color: var(--ccs-line); }

/* Segmented control on the light display */
.ccs[data-ccs-size="compact"] .ccs-seg { padding: 3px; gap: 2px; border-radius: 10px; background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-seg__b { padding: 4px 9px; border-radius: 7px; font-size: .76rem; }
.ccs[data-ccs-size="compact"] .ccs-seg--dark, .ccs[data-ccs-size="compact"] .ccs-seg--cell { background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-seg--dark .ccs-seg__b, .ccs[data-ccs-size="compact"] .ccs-seg--cell .ccs-seg__b { color: var(--ccs-muted); }
.ccs[data-ccs-size="compact"] .ccs-seg--dark .ccs-seg__b:hover, .ccs[data-ccs-size="compact"] .ccs-seg--cell .ccs-seg__b:hover { color: var(--ccs-ink); }
.ccs[data-ccs-size="compact"] .ccs-seg--dark .ccs-seg__b[aria-pressed="true"] { color: var(--ccs-ink); background: var(--ccs-surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

/* Door */
.ccs[data-ccs-size="compact"] .ccs-doors { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ccs[data-ccs-size="compact"] .ccs-door { padding: 8px; border-radius: 12px; }
.ccs[data-ccs-size="compact"] .ccs-door__head { gap: 6px; margin-bottom: 6px; }
.ccs[data-ccs-size="compact"] .ccs-door__head .ccs-input { min-height: 28px; padding: 3px 7px; font-size: .82rem; }
.ccs[data-ccs-size="compact"] .ccs-door__key { width: 20px; height: 20px; font-size: .68rem; border-radius: 5px; }
.ccs[data-ccs-size="compact"] .ccs-door__row { gap: 6px; }
.ccs[data-ccs-size="compact"] .ccs-door__b { min-height: 52px; padding: 6px; border-radius: 9px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14); }
.ccs[data-ccs-size="compact"] .ccs-door__lbl { font-size: .72rem; }
.ccs[data-ccs-size="compact"] .ccs-door__n { font-size: 1.15rem; }
.ccs[data-ccs-size="compact"] .ccs-chart { height: 100px; padding: 8px 6px 2px; gap: 2px; }
.ccs[data-ccs-size="compact"] .ccs-chart__x { font-size: .62rem; }

/* Attendance */
.ccs[data-ccs-size="compact"] .ccs-device--split { gap: 20px; }
.ccs[data-ccs-size="compact"] .ccs-device--split > div:first-child { gap: 6px; }
.ccs[data-ccs-size="compact"] .ccs-ring { width: 72px; height: 72px; background: conic-gradient(var(--ccs-accent) var(--ccs-pct), var(--ccs-line) 0); }
.ccs[data-ccs-size="compact"] .ccs-ring::before { inset: 6px; background: var(--ccs-paper); }
.ccs[data-ccs-size="compact"] .ccs-ring__v { font-size: 1rem; }
.ccs[data-ccs-size="compact"] .ccs-ring__l { font-size: .6rem; color: var(--ccs-muted); }
.ccs[data-ccs-size="compact"] .ccs-cats { gap: 0; border: 1px solid var(--ccs-line); border-radius: 12px; overflow: hidden; }
.ccs[data-ccs-size="compact"] .ccs-cat { gap: 6px; padding: 4px 6px 4px 10px; border: 0; border-top: 1px solid var(--ccs-line); border-radius: 0; }
.ccs[data-ccs-size="compact"] .ccs-cat:first-child { border-top: 0; }
.ccs[data-ccs-size="compact"] .ccs-cat > .ccs-door__key { display: none; }
.ccs[data-ccs-size="compact"] .ccs-cat .ccs-input { min-height: 30px; padding: 3px 6px; font-size: .86rem; }
.ccs[data-ccs-size="compact"] .ccs-cat { grid-template-columns: minmax(0, 1fr) auto auto; }
.ccs[data-ccs-size="compact"] .ccs-cat__ctl { gap: 6px; }
.ccs[data-ccs-size="compact"] .ccs-cat__n { min-width: 2.5ch; font-size: 1rem; }
.ccs[data-ccs-size="compact"] .ccs-cat__plus { width: 34px; height: 30px; border-radius: 8px; font-size: .95rem; box-shadow: none; }
.ccs[data-ccs-size="compact"] .ccs-cat .ccs-ibtn { width: 30px; height: 30px; border-color: var(--ccs-line); }

/* Golf */
.ccs[data-ccs-size="compact"] .ccs-tabs { gap: 4px; }
.ccs[data-ccs-size="compact"] .ccs-tab { height: 28px; padding: 0 10px; gap: 6px; font-size: .78rem; }
.ccs[data-ccs-size="compact"] .ccs-hole-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.ccs[data-ccs-size="compact"] .ccs-hole { gap: 6px; }
.ccs[data-ccs-size="compact"] .ccs-hole .ccs-dbtn { width: 30px; height: 30px; }
.ccs[data-ccs-size="compact"] .ccs-hole__t { min-width: 5ch; color: var(--ccs-ink); font-size: 1.05rem; }
.ccs[data-ccs-size="compact"] .ccs-badge { padding: 2px 9px; font-size: .72rem; color: var(--ccs-muted); background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-badge.is-eagle, .ccs[data-ccs-size="compact"] .ccs-badge.is-birdie { color: var(--ccs-good); background: rgba(18, 128, 92, .1); }
.ccs[data-ccs-size="compact"] .ccs-badge.is-par { color: var(--ccs-ink); }
.ccs[data-ccs-size="compact"] .ccs-badge.is-bogey { color: var(--ccs-warn); background: rgba(168, 106, 0, .1); }
.ccs[data-ccs-size="compact"] .ccs-badge.is-dbl { color: var(--ccs-bad); background: rgba(194, 54, 47, .1); }
.ccs[data-ccs-size="compact"] .ccs-putts { gap: 6px; color: var(--ccs-muted); font-size: .76rem; }
.ccs[data-ccs-size="compact"] .ccs-putts__n { min-width: 1.5ch; color: var(--ccs-ink); font-size: .9rem; }
.ccs[data-ccs-size="compact"] .ccs-mini { width: 24px; height: 24px; border-color: var(--ccs-line); color: var(--ccs-ink); background: var(--ccs-surface); }
.ccs[data-ccs-size="compact"] .ccs-mini:hover { color: var(--ccs-ink); background: var(--ccs-soft); }
.ccs[data-ccs-size="compact"] .ccs-card th, .ccs[data-ccs-size="compact"] .ccs-card td { min-width: 28px; padding: 5px 4px; }
.ccs[data-ccs-size="compact"] .ccs-sc { width: 22px; height: 22px; font-size: .78rem; }
.ccs[data-ccs-size="compact"] .ccs-holebtn { width: 22px; height: 22px; font-size: .72rem; }
.ccs[data-ccs-size="compact"] .ccs-legend { font-size: .74rem; }

/* Knit */
.ccs[data-ccs-size="compact"] .ccs-duo { gap: 10px; }
.ccs[data-ccs-size="compact"] .ccs-duo__col { gap: 6px; }
.ccs[data-ccs-size="compact"] .ccs-duo__col + .ccs-duo__col { border-left: 1px solid var(--ccs-line); }
.ccs[data-ccs-size="compact"] .ccs-repeat { color: var(--ccs-ink); font-size: .82rem; }
.ccs[data-ccs-size="compact"] .ccs-dots { gap: 4px; }
.ccs[data-ccs-size="compact"] .ccs-dots span { width: 7px; height: 7px; background: var(--ccs-line); }
.ccs[data-ccs-size="compact"] .ccs-dots span.is-done { background: var(--ccs-muted); }
.ccs[data-ccs-size="compact"] .ccs-dots span.is-cur { box-shadow: none; }
.ccs[data-ccs-size="compact"] .ccs-device__controls--sub { display: none; }

/* Cell */
.ccs[data-ccs-size="compact"] .ccs-device--cell { gap: 10px; }
.ccs[data-ccs-size="compact"] .ccs-grid { width: min(100%, 236px); gap: 3px; padding: 3px; border-radius: 8px; box-shadow: none; }
.ccs[data-ccs-size="compact"] .ccs-sq__main { padding: 4px; border-radius: 4px; }
.ccs[data-ccs-size="compact"] .ccs-sq__n { font-size: 1.05rem; }
.ccs[data-ccs-size="compact"] .ccs-sq__sub { display: none; }
.ccs[data-ccs-size="compact"] .ccs-sq__i { top: 3px; left: 5px; font-size: .58rem; }
.ccs[data-ccs-size="compact"] .ccs-sq__minus { top: 2px; right: 2px; width: 18px; height: 18px; }
.ccs[data-ccs-size="compact"] .ccs-sq__minus .ccs-ico { width: 11px; height: 11px; }
.ccs[data-ccs-size="compact"] .ccs-note { font-size: .8rem; }

/* Lap */
.ccs[data-ccs-size="compact"] .ccs-timebox { flex-direction: row; align-items: baseline; gap: 10px; }
.ccs[data-ccs-size="compact"] .ccs-clock { color: var(--ccs-ink); font-size: 1.35rem; }
.ccs[data-ccs-size="compact"].is-running .ccs-clock { color: var(--ccs-ink); }
.ccs[data-ccs-size="compact"].is-running .ccs-timebox::before { content: ""; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--ccs-bad); animation: ccs-blink 1.2s ease-in-out infinite; }
@keyframes ccs-blink { 50% { opacity: .25; } }

.ccs[data-ccs-size="compact"]:fullscreen .ccs-odo { font-size: clamp(64px, 16vw, 160px); }

/* Desktop computers have no vibration motor */
@media (hover: hover) and (pointer: fine) {
	.ccs[data-ccs-size="compact"] .ccs-pref-vib { display: none; }
}

@media (max-width: 420px) {
	.ccs[data-ccs-size="compact"] .ccs-app { padding: 10px; border-radius: 16px; }
	.ccs[data-ccs-size="compact"] .ccs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 0; }
	.ccs[data-ccs-size="compact"] .ccs-stats[data-n="4"], .ccs[data-ccs-size="compact"] .ccs-stats--results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ccs[data-ccs-size="compact"] .ccs-stat, .ccs[data-ccs-size="compact"] .ccs-stat:first-child, .ccs[data-ccs-size="compact"] .ccs-stats--results .ccs-stat:nth-child(5) { padding: 0 4px; border-left: 0; }
	.ccs[data-ccs-size="compact"] .ccs-foot { flex-wrap: wrap; }
	.ccs[data-ccs-size="compact"] .ccs-dtabs { flex-basis: 100%; }
	.ccs[data-ccs-size="compact"] .ccs-foot__actions { flex: 1 1 auto; }
}

/* ---------- Full screen ---------- */
.ccs:fullscreen { max-width: none; margin: 0; padding: clamp(12px, 3vw, 32px); overflow-y: auto; background: var(--ccs-paper); }
.ccs:fullscreen .ccs-app { max-width: 1000px; margin: 0 auto; }
.ccs:fullscreen .ccs-odo { font-size: clamp(64px, 16vw, 160px); }

/* ---------- Small screens ---------- */
@media (max-width: 520px) {
	/* Large size on phones */
	.ccs[data-ccs-size="large"] .ccs-app { border-radius: 18px; }
	.ccs[data-ccs-size="large"] .ccs-device { border-radius: 18px; }
	.ccs[data-ccs-size="large"] .ccs-dbtn { width: 50px; height: 50px; }
	.ccs[data-ccs-size="large"] .ccs-dbtn--wide { height: 58px; padding: 0 16px; }
	.ccs[data-ccs-size="large"] .ccs-press--wide { min-width: 140px; padding: 0 18px; }
	.ccs[data-ccs-size="large"] .ccs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ccs[data-ccs-size="large"] .ccs-stat dd { font-size: 1.05rem; }
	.ccs[data-ccs-size="large"] .ccs-foot { flex-direction: column; align-items: stretch; }
	.ccs[data-ccs-size="large"] .ccs-foot__actions .ccs-btn { flex: 1 1 auto; }
	.ccs[data-ccs-size="large"] .ccs-foot__prefs { justify-content: center; }
	.ccs[data-ccs-size="large"] .ccs-cat { grid-template-columns: minmax(0, 1fr) auto; padding: 10px; }
	.ccs[data-ccs-size="large"] .ccs-cat > .ccs-door__key { display: none; }
	.ccs[data-ccs-size="large"] .ccs-cat__ctl { grid-column: 1 / -1; justify-content: space-between; order: 3; }
	.ccs[data-ccs-size="large"] .ccs-cat > .ccs-btn--icon { order: 2; }
	.ccs[data-ccs-size="large"] .ccs-chart { height: 120px; gap: 2px; padding: 8px 6px 4px; }
	.ccs[data-ccs-size="large"] .ccs-duo { grid-template-columns: 1fr; }
	.ccs[data-ccs-size="large"] .ccs-log li { grid-template-columns: auto 1fr; }
	.ccs[data-ccs-size="large"] .ccs-log__meta { grid-column: 2; }
	.ccs[data-ccs-size="large"] .ccs-keys__list > div { flex-direction: column; gap: 2px; }
	.ccs[data-ccs-size="large"] .ccs-keys__list dd { text-align: left; }
}

/* Touch-only devices have no keyboard, so hide the shortcut list. */
@media (hover: none) and (pointer: coarse) {
	.ccs .ccs-keys-wrap { display: none; }
}

/* ---------- Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
	.ccs *, .ccs *::before, .ccs *::after { animation: none !important; transition: none !important; }
}

@media print {
	.ccs .ccs-foot, .ccs .ccs-keys-wrap, .ccs .ccs-status, .ccs .ccs-panel { display: none !important; }
	.ccs .ccs-device { box-shadow: none; }
}