/* Practice exercise pages (exercises/*.jsp, via include/head2.jsp + base2.jsp):
   light and dark theme on the shared tokens in conju-tokens.css.

   The <conjugation-practice> component keeps its styles in a shadow root and
   hard-codes a few colours there. base2.jsp adds a small sheet to that shadow
   root which reads the --px-* variables below, each with the component's own
   colour as the fallback, so light mode looks exactly as before. */

:root {
	--px-chip-bg: rgb(220, 233, 249);
	--px-chip-img: linear-gradient(rgb(235, 243, 252), rgb(220, 233, 249));
	--px-chip-text: inherit;
	--px-modal-bg: white;
	--px-ink: black;
	--px-good: green;
	--px-tip: rgba(105, 145, 214, .08);
	--px-backdrop: darkgray;
}
:root[data-theme="dark"] {
	--px-chip-bg: var(--t-pc);
	--px-chip-img: none;
	--px-chip-text: var(--t-on-pc);
	--px-modal-bg: var(--cj-surface-2);
	--px-ink: var(--cj-text);
	--px-good: #8fd694;
	--px-tip: rgba(140, 200, 255, .10);
	--px-backdrop: #000;

	/* Material Web parts inside the component (radio buttons, progress bar,
	   icons, ripples) read these. */
	--md-sys-color-on-surface: #e6e1e5;
	--md-sys-color-on-surface-variant: #cac4d0;
	--md-sys-color-surface-container-highest: #36343b;
	--md-sys-color-secondary: #ccc2dc;
	--md-sys-color-outline: #938f99;
	--md-sys-color-shadow: #000;
}

/* An explicit background is load-bearing under a dark system theme. */
html, body {
	background-color: var(--cj-page);
	color: var(--cj-text);
}
header.mdc-top-app-bar {
	background-color: var(--cj-bar);
}
.header-logo {
	display: inline-flex;
	align-items: center;
	margin-right: 8px;
}
.header-logo img {
	display: block;
}
#site-title a, #site-title {
	color: white;
}
.help-icon, #theme-toggle {
	color: white;
}
.practice-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	padding-right: 4px;
}
.practice-actions .help-icon {
	float: none;
	padding: 0;
	font-size: 28px;
	cursor: pointer;
}
#theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
#theme-toggle:hover {
	background-color: rgba(255, 255, 255, .14);
}
#theme-toggle:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}
#theme-toggle .to-light { display: none; }
:root[data-theme="dark"] #theme-toggle .to-light { display: inline; }
:root[data-theme="dark"] #theme-toggle .to-dark { display: none; }

#breadcrumb {
	padding: 10px 12px 0;
	color: var(--cj-text-muted);
}
#breadcrumb a, #breadcrumb a:link, #breadcrumb a:visited {
	color: var(--cj-link);
}
h2 {
	color: var(--cj-text);
	font-weight: 500;
}

/* The component's outer box: page CSS beats its :host rule. */
conjugation-practice {
	background: var(--cj-surface);
	color: var(--cj-text);
	border-color: var(--cj-line-strong) !important;
	border-radius: 14px !important;
	box-shadow: var(--cj-shadow);
}
@media (max-width: 480px) {
	/* a small gutter so the card doesn't touch the screen edges */
	conjugation-practice {
		margin: 0 8px !important;
		padding: 12px !important;
	}
	body h2 {
		padding: 10px 12px;
	}
	/* "LanguageGuide.org &bull; French Grammar" doesn't fit; the globe already links home */
	#site-title #siteLogo,
	#site-title .title-sep {
		display: none;
	}
}
#instructions {
	max-width: 834px;
	margin: 16px auto;
	color: var(--cj-text-muted);
}
#instructions a {
	color: var(--cj-link);
}