/* ChromeOS & Aluminium OS Recovery Downloads
 * Everything is scoped to .crosdl / .crosdl-page and prefixed crosdl- so it
 * cannot affect the rest of the site. Fonts, text and background come from the
 * theme. The accent follows the theme's primary color (block themes, Astra,
 * Kadence, Blocksy, GeneratePress) unless one is set in the plugin settings. */

.crosdl {
	--crosdl-accent: var(--wp--preset--color--primary, var(--ast-global-color-0, var(--global-palette1, var(--theme-palette-color-1, var(--accent, #1a73e8)))));
	--crosdl-accent-text: #fff;
	--crosdl-line: rgba(128, 128, 128, 0.25);
	--crosdl-soft: rgba(128, 128, 128, 0.06);
	--crosdl-muted: 0.7;
	--crosdl-radius: 14px;
	font: inherit;
	color: inherit;
	line-height: 1.55;
	margin: 1.5em 0;
	max-width: 100%;
}
@supports (color: color-mix(in srgb, red, blue)) {
	.crosdl {
		--crosdl-line: color-mix(in srgb, currentColor 16%, transparent);
		--crosdl-soft: color-mix(in srgb, currentColor 4%, transparent);
		--crosdl-tint: color-mix(in srgb, var(--crosdl-accent) 10%, transparent);
	}
}
.crosdl *,
.crosdl *::before,
.crosdl *::after {
	box-sizing: border-box;
}
.crosdl h2,
.crosdl h3 {
	color: inherit;
	letter-spacing: normal;
}
.crosdl code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86em;
	background: var(--crosdl-soft);
	border: 1px solid var(--crosdl-line);
	border-radius: 5px;
	padding: 0.05em 0.35em;
	color: inherit;
	word-break: break-all;
}
.crosdl a { color: var(--crosdl-accent); }
.crosdl .crosdl-icon { width: 1.15em; height: 1.15em; flex: none; }

/* Muted text */
.crosdl .crosdl-loading,
.crosdl .crosdl-count,
.crosdl .crosdl-meta,
.crosdl .crosdl-small,
.crosdl .crosdl-card-meta,
.crosdl .crosdl-file-meta,
.crosdl .crosdl-file-name,
.crosdl .crosdl-hero-lead {
	opacity: var(--crosdl-muted);
}

/* Server-rendered fallback list */
.crosdl .crosdl-ssr-list { columns: 2 300px; font-size: 0.92em; padding-left: 1.2em; }

/* ---------- Hero ---------- */
.crosdl.crosdl-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: 2em;
	padding: 1.6em;
	border: 1px solid var(--crosdl-line);
	border-radius: calc(var(--crosdl-radius) + 6px);
	background: var(--crosdl-tint, var(--crosdl-soft));
}
.crosdl .crosdl-hero-title { font-size: clamp(1.5em, 3vw, 2.1em); line-height: 1.2; margin: 0 0 0.4em; }
.crosdl .crosdl-hero-lead { margin: 0 0 1em; font-size: 1.02em; opacity: 0.8; }
.crosdl .crosdl-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--crosdl-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.crosdl .crosdl-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0 0 1.2em;
	padding: 0;
	font-size: 0.88em;
}
.crosdl .crosdl-stats li {
	margin: 0;
	padding: 0.35em 0.8em;
	border: 1px solid var(--crosdl-line);
	border-radius: 999px;
}
.crosdl .crosdl-hero-actions { margin: 0; }

/* ---------- Toolbar ---------- */
.crosdl .crosdl-head { margin-bottom: 0.8em; }
.crosdl .crosdl-title { margin: 0 0 0.2em; }
.crosdl .crosdl-meta { margin: 0; font-size: 0.9em; }
.crosdl .crosdl-toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	margin-bottom: 0.8em;
}
.crosdl .crosdl-tabs {
	display: inline-flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	gap: 0.25em;
	padding: 0.25em;
	margin: 0;
	border: 1px solid var(--crosdl-line);
	border-radius: 999px;
	align-self: flex-start;
	max-width: 100%;
}
.crosdl .crosdl-tab {
	flex: none;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font: inherit;
	font-size: 0.92em;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 0.55em 1em;
	margin: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	width: auto;
	min-height: 0;
}
.crosdl .crosdl-tab:hover { background: var(--crosdl-soft); color: inherit; }
.crosdl .crosdl-tab.is-active,
.crosdl .crosdl-tab.is-active:hover { background: var(--crosdl-accent); color: var(--crosdl-accent-text); }
.crosdl .crosdl-tab-count { font-size: 0.78em; opacity: 0.75; }
.crosdl .crosdl-controls { display: flex; flex-wrap: wrap; gap: 0.6em; }
.crosdl .crosdl-search,
.crosdl .crosdl-select {
	font: inherit;
	font-size: 0.95em;
	color: inherit;
	background: transparent;
	border: 1px solid var(--crosdl-line);
	border-radius: 10px;
	padding: 0.7em 0.9em;
	margin: 0;
	height: auto;
	min-height: 0;
	box-shadow: none;
	max-width: 100%;
}
.crosdl .crosdl-search { flex: 1 1 280px; min-width: 0; width: auto; }
.crosdl .crosdl-select { flex: 0 1 200px; width: auto; }
.crosdl .crosdl-select option { color: #000; background: #fff; }
.crosdl .crosdl-search:focus,
.crosdl .crosdl-select:focus {
	outline: 2px solid var(--crosdl-accent);
	outline-offset: 1px;
	border-color: transparent;
}
.crosdl .crosdl-check {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.9em;
	margin: 0;
	cursor: pointer;
}
.crosdl .crosdl-check input { margin: 0; accent-color: var(--crosdl-accent); }
.crosdl .crosdl-count { font-size: 0.85em; margin: 0 0 0.8em; }

/* ---------- Cards ---------- */
.crosdl .crosdl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1em;
}
.crosdl .crosdl-card {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	border: 1px solid var(--crosdl-line);
	border-radius: var(--crosdl-radius);
	padding: 1.1em;
	margin: 0;
	min-width: 0;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.crosdl .crosdl-card:hover { border-color: var(--crosdl-accent); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); }
.crosdl .crosdl-card-head { display: flex; gap: 0.75em; align-items: flex-start; }
.crosdl .crosdl-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.4em;
	height: 2.4em;
	border-radius: 10px;
	color: var(--crosdl-accent);
	background: var(--crosdl-tint, var(--crosdl-soft));
}
.crosdl .crosdl-card-icon .crosdl-icon { width: 1.35em; height: 1.35em; }
.crosdl .crosdl-card-icon-lg { width: 3.2em; height: 3.2em; }
.crosdl .crosdl-card-icon-lg .crosdl-icon { width: 1.8em; height: 1.8em; }
.crosdl .crosdl-card-heading { min-width: 0; }
.crosdl .crosdl-card-title {
	font-size: 1.02em;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}
.crosdl .crosdl-card-title a { color: inherit; text-decoration: none; }
.crosdl .crosdl-card-title a:hover { color: var(--crosdl-accent); }
.crosdl .crosdl-card-meta { font-size: 0.84em; margin: 0.15em 0 0; }
.crosdl .crosdl-card-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; }
.crosdl .crosdl-version { font-size: 0.86em; font-weight: 600; }
.crosdl .crosdl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-top: auto;
}
.crosdl .crosdl-link { font-size: 0.88em; font-weight: 500; text-decoration: none; }
.crosdl .crosdl-link:hover { text-decoration: underline; }

/* ---------- Badges ---------- */
.crosdl .crosdl-badge {
	display: inline-block;
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 0.42em 0.62em;
	border-radius: 999px;
	border: 1px solid var(--crosdl-line);
	white-space: nowrap;
	vertical-align: middle;
}
.crosdl .crosdl-type-googlebook { border-color: transparent; background: var(--crosdl-tint, var(--crosdl-soft)); color: var(--crosdl-accent); }
.crosdl .crosdl-type-flex { border-color: transparent; background: rgba(24, 128, 56, 0.12); color: #188038; }
.crosdl .crosdl-ch-stable { border-color: transparent; background: var(--crosdl-accent); color: var(--crosdl-accent-text); }
.crosdl .crosdl-ch-beta,
.crosdl .crosdl-ch-ltc,
.crosdl .crosdl-ch-ltr,
.crosdl .crosdl-ch-lts { border-color: transparent; background: #e37400; color: #fff; }
.crosdl .crosdl-ch-dev,
.crosdl .crosdl-ch-canary { border-color: transparent; background: #8430ce; color: #fff; }
.crosdl .crosdl-aue { border-color: #d93025; color: #d93025; background: transparent; }

/* ---------- Buttons ---------- */
.crosdl .crosdl-btn,
.crosdl .crosdl-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	color: var(--crosdl-accent-text);
	background: var(--crosdl-accent);
	border: 1px solid var(--crosdl-accent);
	border-radius: 10px;
	padding: 0.65em 1.05em;
	margin: 0;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
	width: auto;
	min-height: 0;
	transition: filter 0.15s, transform 0.15s;
}
.crosdl .crosdl-btn:hover,
.crosdl .crosdl-btn:focus {
	color: var(--crosdl-accent-text);
	text-decoration: none;
	filter: brightness(1.08);
}
.crosdl .crosdl-btn:active { transform: translateY(1px); }
.crosdl .crosdl-btn:focus-visible { outline: 2px solid var(--crosdl-accent); outline-offset: 2px; }
.crosdl .crosdl-btn-ghost,
.crosdl .crosdl-btn-ghost:visited,
.crosdl .crosdl-btn-ghost:hover,
.crosdl .crosdl-btn-ghost:focus {
	color: var(--crosdl-accent);
	background: transparent;
	border-color: var(--crosdl-line);
}
.crosdl .crosdl-btn-ghost:hover { border-color: var(--crosdl-accent); filter: none; }
.crosdl .crosdl-btn-lg,
.crosdl .crosdl-btn-lg:visited { font-size: 1.05em; padding: 0.9em 1.6em; border-radius: 12px; }
.crosdl .crosdl-more { text-align: center; margin-top: 1.4em; }

/* ---------- Device page ---------- */
.crosdl .crosdl-back {
	display: inline-block;
	margin-bottom: 1em;
	text-decoration: none;
	font-size: 0.92em;
}
.crosdl .crosdl-back:hover { text-decoration: underline; }
.crosdl .crosdl-device-head { display: flex; gap: 1em; align-items: center; margin-bottom: 1em; }
.crosdl .crosdl-device-title { margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.crosdl .crosdl-h { font-size: 1.1em; margin: 1.6em 0 0.7em; }
.crosdl .crosdl-models,
.crosdl .crosdl-archive,
.crosdl .crosdl-guide,
.crosdl .crosdl-faq-item {
	margin: 0.7em 0;
	border: 1px solid var(--crosdl-line);
	border-radius: var(--crosdl-radius);
	padding: 0.8em 1.1em;
}
.crosdl summary { cursor: pointer; font-weight: 600; }
.crosdl .crosdl-models ul,
.crosdl .crosdl-guide ol,
.crosdl .crosdl-guide-box ol { margin: 0.6em 0 0.2em 1.2em; padding: 0; }
.crosdl .crosdl-guide-box {
	margin: 1.6em 0 0.8em;
	padding: 1.1em 1.3em;
	border-radius: var(--crosdl-radius);
	background: var(--crosdl-tint, var(--crosdl-soft));
}
.crosdl .crosdl-guide-box h3 { font-size: 1.05em; margin: 0 0 0.3em; }
.crosdl .crosdl-guide p,
.crosdl .crosdl-guide-box p { margin: 0.6em 0 0; }
.crosdl .crosdl-small { font-size: 0.85em; }
.crosdl .crosdl-archive .crosdl-files { margin-top: 0.8em; }

.crosdl .crosdl-table-wrap { overflow-x: auto; border: 1px solid var(--crosdl-line); border-radius: var(--crosdl-radius); }
.crosdl .crosdl-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.92em;
	border: 0;
}
.crosdl .crosdl-table th,
.crosdl .crosdl-table td {
	text-align: left;
	padding: 0.6em 0.9em;
	border: 0;
	border-bottom: 1px solid var(--crosdl-line);
	background: transparent;
	vertical-align: middle;
}
.crosdl .crosdl-table tr:last-child th,
.crosdl .crosdl-table tr:last-child td { border-bottom: 0; }
.crosdl .crosdl-table thead th,
.crosdl .crosdl-file-table th { background: var(--crosdl-soft); font-weight: 600; white-space: nowrap; }

.crosdl .crosdl-files { display: flex; flex-direction: column; gap: 0.6em; }
.crosdl .crosdl-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	border: 1px solid var(--crosdl-line);
	border-radius: var(--crosdl-radius);
	padding: 0.9em 1.1em;
}
.crosdl .crosdl-file-info { min-width: 0; flex: 1 1 auto; }
.crosdl .crosdl-file-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; }
.crosdl .crosdl-file-meta { font-size: 0.85em; margin-top: 0.3em; }
.crosdl .crosdl-file-name {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.76em;
	margin-top: 0.2em;
	overflow-wrap: anywhere;
}
.crosdl .crosdl-hashes { display: flex; gap: 0.4em; margin-top: 0.45em; }
.crosdl .crosdl-copy {
	font: inherit;
	font-size: 0.74em;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 1px solid var(--crosdl-line);
	border-radius: 6px;
	padding: 0.3em 0.6em;
	margin: 0;
	cursor: pointer;
	text-transform: none;
	box-shadow: none;
	width: auto;
	min-height: 0;
}
.crosdl .crosdl-copy:hover { border-color: var(--crosdl-accent); color: var(--crosdl-accent); }

.crosdl .crosdl-notice {
	border-left: 3px solid var(--crosdl-accent);
	background: var(--crosdl-soft);
	padding: 0.75em 1em;
	margin: 0.8em 0;
	border-radius: 0 10px 10px 0;
}

/* ---------- FAQ ---------- */
.crosdl.crosdl-faq { margin-top: 2.5em; }
.crosdl.crosdl-faq h2 { margin: 0 0 0.6em; }
.crosdl .crosdl-faq-item p { margin: 0.6em 0 0.1em; }

/* ---------- Download steps ---------- */
.crosdl .crosdl-step-page { max-width: 760px; }
.crosdl .crosdl-steps-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-bottom: 1.2em;
	font-size: 0.88em;
}
.crosdl .crosdl-step {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.9em 0.4em 0.4em;
	border: 1px solid var(--crosdl-line);
	border-radius: 999px;
	opacity: 0.6;
}
.crosdl .crosdl-step b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	border-radius: 50%;
	background: var(--crosdl-soft);
	font-size: 0.9em;
}
.crosdl .crosdl-step.is-done,
.crosdl .crosdl-step.is-current { opacity: 1; }
.crosdl .crosdl-step.is-current { border-color: var(--crosdl-accent); }
.crosdl .crosdl-step.is-current b,
.crosdl .crosdl-step.is-done b { background: var(--crosdl-accent); color: var(--crosdl-accent-text); }
.crosdl .crosdl-step-title { margin: 0 0 0.8em; }
.crosdl .crosdl-countdown {
	text-align: center;
	margin: 1.6em 0;
	padding: 1.6em 1em;
	border: 1px dashed var(--crosdl-line);
	border-radius: var(--crosdl-radius);
}
.crosdl .crosdl-countdown-text { margin: 0; font-size: 1.05em; }
.crosdl .crosdl-countdown-num { font-size: 1.4em; color: var(--crosdl-accent); }
.crosdl .crosdl-countdown .crosdl-small { margin: 0.8em 0 0; }
.crosdl [hidden] { display: none !important; }

/* ---------- Ads ---------- */
.crosdl-ad {
	display: block;
	clear: both;
	margin: 1.8em auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.crosdl-ad-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 0.4em;
}
.crosdl .crosdl-grid-ad { grid-column: 1 / -1; }
.crosdl .crosdl-grid-ad .crosdl-ad { margin: 0.6em auto; }

/* Layout follows the width of the content column, not the screen. */
.crosdl-page { container-type: inline-size; }
@container (max-width: 760px) {
	.crosdl.crosdl-hero { grid-template-columns: 1fr; padding: 1.2em; gap: 1.2em; }
	.crosdl .crosdl-hero-media { order: -1; }
}
@media (max-width: 760px) {
	.crosdl.crosdl-hero { grid-template-columns: 1fr; padding: 1.1em; gap: 1.2em; }
	.crosdl .crosdl-hero-media { order: -1; }
}
@media (max-width: 560px) {
	.crosdl .crosdl-file { flex-direction: column; align-items: stretch; }
	.crosdl .crosdl-file .crosdl-btn { width: 100%; }
	.crosdl .crosdl-grid { grid-template-columns: 1fr; }
	.crosdl .crosdl-select { flex: 1 1 100%; }
	.crosdl .crosdl-device-head { align-items: flex-start; }
}