/*
 * Claim Clock game.
 *
 * The clock strip is the one bold element: a single bar whose segments grow with
 * the weeks each decision added, so a messy claim looks messy. Segment color
 * repeats the grade named in the text, so color never carries meaning alone.
 * Button colors use !important because themes style buttons at high specificity.
 */

.icc {
	--icc-ink: #1a1a1a;
	--icc-muted: #5f6368;
	--icc-line: #d8dde3;
	--icc-navy: #1f3a5f;
	--icc-navy-dark: #14283f;
	--icc-soft: #eaf0f7;
	--icc-strong: #2f7d5b;
	--icc-fair: #c49a2c;
	--icc-weak: #b4472e;
	--icc-display: Georgia, 'Iowan Old Style', 'Apple Garamond', serif;

	width: 100%;
	max-width: 720px;
	margin: 2rem auto;
	color: var(--icc-ink);
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	line-height: 1.5;
}

.icc *,
.icc *::before,
.icc *::after {
	box-sizing: border-box;
}

.icc h2,
.icc h3,
.icc p {
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing: normal;
	text-transform: none;
}

.icc h2:focus {
	outline: none;
}

.icc .icc__title,
.icc .icc__score {
	font-family: var(--icc-display);
	font-size: clamp(2rem, 7vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--icc-navy);
	margin-bottom: 0.5rem;
}

.icc .icc__heading {
	font-family: var(--icc-display);
	font-size: clamp(1.75rem, 6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.12;
	color: var(--icc-navy);
}

.icc .icc__lede {
	font-size: 1.125rem;
}

.icc .icc__role {
	font-weight: 600;
	margin-top: 0.25rem;
}

.icc .icc__file {
	margin: 0.5rem 0 0;
	padding-left: 1.125rem;
	font-size: 0.9375rem;
}

.icc__file li {
	margin: 0 0 0.25rem;
}

/* Pickers */

.icc__claims {
	display: grid;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.icc .icc__pick {
	margin: 0;
	padding: 0.875rem 1rem;
	border: 1px solid var(--icc-navy) !important;
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none;
	color: var(--icc-ink) !important;
	font: inherit;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.icc__pick-title,
.icc__pick-text {
	display: block;
}

.icc__pick-title {
	font-family: var(--icc-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--icc-navy);
}

.icc__pick-text {
	font-size: 0.9375rem;
}

/* Meters and clock */

.icc .icc__meters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
}

.icc__meter dt {
	color: var(--icc-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.icc .icc__meter dt {
	margin: 0 !important;
	padding: 0;
}

/* Themes indent dd, which pushes the meters off a phone screen. */
.icc .icc__meter dd {
	margin: 0 !important;
	padding: 0;
	font-family: var(--icc-display);
	font-size: clamp(1.0625rem, 4vw, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--icc-navy);
}

.icc__strip {
	display: flex;
	gap: 2px;
	height: 16px;
	margin: 0.625rem 0 1.125rem;
	background: var(--icc-soft);
}

.icc__seg {
	flex-basis: 0;
	min-width: 4px;
	transition: flex-grow 250ms ease;
}

.icc__seg.is-strong {
	background: var(--icc-strong);
}

.icc__seg.is-fair {
	background: var(--icc-fair);
}

.icc__seg.is-weak {
	background: var(--icc-weak);
}

/* Decisions */

.icc .icc__question {
	font-family: var(--icc-display);
	font-size: clamp(1.25rem, 4.5vw, 1.5rem);
	font-weight: 400;
	line-height: 1.4;
}

.icc__choices {
	margin-top: 1rem;
}

.icc .icc__choice {
	display: block;
	width: 100%;
	min-height: 44px;
	margin: 0 0 0.5rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--icc-line) !important;
	border-radius: 4px;
	background: #fff !important;
	box-shadow: none;
	color: var(--icc-ink) !important;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.icc .icc__verdict {
	font-family: var(--icc-display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 0.25rem;
}

.icc .icc__verdict.is-strong {
	color: #246147;
}

.icc .icc__verdict.is-fair {
	color: #7a5a12;
}

.icc .icc__verdict.is-weak {
	color: #9c3a23;
}

.icc .icc__result {
	font-size: 1.0625rem;
	font-weight: 600;
}

.icc .icc__note {
	font-size: 0.9375rem;
	margin-top: 0.25rem;
}

.icc .icc__ref {
	color: var(--icc-muted);
	font-size: 0.8125rem;
	margin-top: 0.125rem;
}

.icc .icc__next {
	margin-top: 1rem !important;
}

/* Buttons */

.icc .icc__btn:not(.icc__choice):not(.icc__pick) {
	display: inline-block;
	min-height: 44px;
	margin: 0;
	padding: 0.625rem 1rem;
	border: 1px solid var(--icc-navy) !important;
	border-radius: 4px;
	box-shadow: none;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.icc .icc__btn:focus-visible {
	outline: 3px solid var(--icc-navy);
	outline-offset: 2px;
}

.icc .icc__btn--primary {
	background: var(--icc-navy) !important;
	color: #fff !important;
}

.icc .icc__btn--secondary {
	background: #fff !important;
	color: var(--icc-navy) !important;
}

@media (hover: hover) {
	.icc .icc__choice:hover,
	.icc .icc__pick:hover,
	.icc .icc__btn--secondary:hover {
		background: var(--icc-soft) !important;
		border-color: var(--icc-navy) !important;
	}

	.icc .icc__btn--primary:hover {
		background: var(--icc-navy-dark) !important;
	}
}

/* Results */

.icc .icc__compare {
	font-weight: 600;
}

.icc .icc__tally {
	color: var(--icc-muted);
	font-size: 0.9375rem;
}

.icc .icc__subhead {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-top: 1rem;
}

.icc__item {
	margin-top: 0.625rem;
	padding-left: 0.75rem;
	border-left: 3px solid var(--icc-weak);
}

.icc__item.is-fair {
	border-left-color: var(--icc-fair);
}

.icc .icc__tag {
	font-size: 0.9375rem;
	font-weight: 600;
}

.icc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.icc .icc__disclaimer {
	color: var(--icc-muted);
	font-size: 0.8125rem;
	margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.icc__seg {
		transition: none;
	}
}