/* French conjugation pages — 2026-10 refresh with a dark theme.

   Successor to conju1.css (production) / conju.css (old local). A new filename
   rather than an edit, so browsers that cached conju1.css pick this up at once.

   Every colour is a token on :root. The dark theme only overrides tokens, plus
   the few things a token swap cannot express (photo banners, the per-page
   pastel list headers, which each page sets inline with !important).

   The theme is chosen by /french/grammar/scripts/conju-theme.js, which sets
   <html data-theme="light|dark"> before first paint: the visitor's saved choice
   if any, else the system setting. Without that script the page is light. */

/* Colour tokens (--cj-*, --t-*, --md-sys-color-*) live in conju-tokens.css,
   which css2.jsp loads before this file. */

/* ---------------- Base ---------------- */

/* An explicit background is load-bearing: without it the browser paints its own
   canvas under a dark system theme and the light-mode text becomes unreadable. */
html, body {
	background-color: var(--cj-page);
	color: var(--cj-text);
}
body {
	text-align: center;
	font-family: Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
/* :link/:visited, not just `a`: marker4.css (loaded by some pages) sets navy
   a:link and purple a:visited, which outrank a bare `a` and vanish on dark. */
a, a:link, a:visited {
	color: var(--cj-link);
}
a:active {
	color: var(--cj-accent-hover);
}
h1, h2, h3 {
	color: var(--cj-text);
	font-weight: 500;
	letter-spacing: -.01em;
}
hr {
	border: 0;
	border-top: 1px solid var(--cj-line);
	max-width: 920px;
	margin: 40px auto 16px;
}
p {
	line-height: 1.75;
}

/* ---------------- Top app bar ---------------- */

header.lg {
	position: absolute;
	z-index: 22;
	background-color: var(--cj-bar);
}
#site-title a {
	color: white;
	text-decoration: none;
}
#menu {
	position: absolute;
	z-index: 1001;
}
/* Same transparent white globe as the vocabulary pages (/images/wiki/globe.png). */
.header-logo {
	display: inline-flex;
	align-items: center;
}
.header-logo img {
	display: block;
}
/* An embedded document (e.g. an <object> SVG) whose colour scheme
   differs from the page's gets an opaque canvas painted behind it, which showed
   as a white square on the dark bar. The SVGs are light documents, so keep the
   embedding elements light too and they stay transparent. */
object {
	color-scheme: light;
}
.mdc-top-app-bar__section--align-end {
	padding-right: 8px;
}
#theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: white;
	cursor: pointer;
	transition: background-color .15s;
}
#theme-toggle:hover {
	background-color: rgba(255, 255, 255, .14);
}
#theme-toggle:focus-visible {
	outline: 2px solid white;
	outline-offset: 2px;
}
/* Show the icon for the theme you would switch TO. */
#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; }

/* ---------------- Page layout ---------------- */

:root {
	--cj-layout-top: 64px;   /* space under the top bar */
	--cj-nav-gap: 28px;      /* sidebar's own top margin */
}
.clearfix {
	text-align: left;
	align-items: flex-start;
	gap: 28px;
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	margin-top: var(--cj-layout-top);
	padding: 0 16px;
	box-sizing: border-box;
}
#primaryContent {
	line-height: 1.7;
	flex-grow: 2;
	margin: 10px 0;
	max-width: 800px;
	min-width: 0;
	text-align: left;
	display: inline;
}
.row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}
.page-nav {
	display: flex;
	justify-content: space-between;
}
.base {
	padding-bottom: 16px;
	text-align: center;
	color: var(--cj-text-muted);
}
.bold, #current, #current_nav {
	font-weight: bold;
}
.verb_header {
	padding: 6px;
}
h5 {
	margin: 0 0 4px;
	padding: 4px 10px 10px;
	font-size: 120%;
	font-weight: normal;
}

/* ---------------- Sidebar ---------------- */

#interiorNavigation {
	flex-shrink: 0;
	text-align: left;
	padding: 12px 10px;
	margin-top: var(--cj-nav-gap);
	background: var(--cj-surface);
	border: 1px solid var(--cj-line);
	border-radius: var(--cj-radius);
	box-shadow: var(--cj-shadow);
	/* Sticks exactly where it starts (layout top + its own margin), so it never
	   drifts up before settling. Capped to the window so a short screen can
	   still scroll the menu itself. */
	position: sticky;
	top: calc(var(--cj-layout-top) + var(--cj-nav-gap));
	max-height: calc(100vh - var(--cj-layout-top) - var(--cj-nav-gap) - 16px);
	overflow-y: auto;
	box-sizing: border-box;
}
#interiorNavigation ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#interiorNavigation li {
	margin: 1px 0;
	line-height: 1.4;
}
#interiorNavigation li a,
#interiorNavigation li#current_nav,
#interiorNavigation li#current {
	display: block;
	padding: 6px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--cj-text);
	font-size: 15px;
}
#interiorNavigation li a:hover {
	background: var(--cj-hover);
	color: var(--cj-accent);
}
#interiorNavigation li#current_nav,
#interiorNavigation li#current {
	background: var(--cj-current-bg);
	color: var(--cj-current-text);
	font-weight: 600;
}
.catsubtitle {
	display: block;
	padding: 12px 12px 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--cj-text-muted);
}
#interiorNavigation li:first-child .catsubtitle {
	padding-top: 2px;
}

/* ---------------- Intro note & banners ---------------- */

.description-container {
	background: var(--cj-surface);
	border: 1px solid var(--cj-line) !important;
	border-radius: var(--cj-radius) !important;
	box-shadow: var(--cj-shadow);
	padding: 12px 16px !important;
}
:root[data-theme="dark"] .description-container img {
	filter: invert(1) hue-rotate(180deg);
}

/* Banner: a Material 3 tonal container in the page's palette. The pages still
   carry their old inline photo rule (background-image), hence !important. */
.header-page {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--t-pc) !important;
	background-image: none !important;
	color: var(--t-on-pc);
	padding: 22px 32px 28px;
	margin: 20px 0 32px;
	border-radius: 28px;
}
.header-page h1, .header-page h2, .header-page h3, .header-page p {
	color: var(--t-on-pc);
	position: relative;
}
.header-page h1, .header-page h2 {
	font-size: 32px;
	line-height: 40px;
	font-weight: 400;
	letter-spacing: 0;
	margin: 6px 0 10px;
}
.header-page p {
	margin: 0;
	max-width: 560px;
}
.header-page a, .header-page a:link, .header-page a:visited {
	color: var(--t-on-pc);
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* Two soft decorative shapes, after M3's expressive containers: a large circle
   in primary and a rounded square in tertiary, both low-opacity and behind the
   text (z-index -1 inside the isolated banner). */
.header-page::before,
.header-page::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
.header-page::before {
	width: 240px;
	height: 240px;
	right: -60px;
	top: -110px;
	border-radius: 50%;
	background: var(--t-p);
	opacity: .14;
}
.header-page::after {
	width: 130px;
	height: 130px;
	right: 130px;
	bottom: -80px;
	border-radius: 44px;
	transform: rotate(20deg);
	background: var(--t-ter);
	opacity: .16;
}

/* Each tense group gets its own pair of Material 3 Expressive shapes, drawn as
   SVG masks so they take the page palette colour in light and dark mode.
   Present regular keeps the circle + rounded square above. Shapes generated by
   a script (polar curves): burst = 12-point soft star, cookie = 7 scallops,
   clover = 4 leaves, sparkle = 4-point star. --shape-turn varies the angle per
   page so neighbouring pages in a group don't look identical. */
:root {
	--shape-burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 97.5 52.1 91.9 53.7 86.7 54.8 84.0 56.0 83.2 57.4 82.8 58.8 82.4 60.2 82.5 61.8 84.2 64.2 88.1 67.8 92.2 72.0 93.3 75.0 90.1 75.5 84.4 74.1 79.4 72.5 76.5 72.2 75.1 73.0 74.0 74.0 73.0 75.1 72.2 76.5 72.5 79.4 74.1 84.4 75.5 90.1 75.0 93.3 72.0 92.2 67.8 88.1 64.2 84.2 61.8 82.5 60.2 82.4 58.8 82.8 57.4 83.2 56.0 84.0 54.8 86.7 53.7 91.9 52.1 97.5 50.0 100.0 47.9 97.5 46.3 91.9 45.2 86.7 44.0 84.0 42.6 83.2 41.2 82.8 39.8 82.4 38.2 82.5 35.8 84.2 32.2 88.1 28.0 92.2 25.0 93.3 24.5 90.1 25.9 84.4 27.5 79.4 27.8 76.5 27.0 75.1 26.0 74.0 24.9 73.0 23.5 72.2 20.6 72.5 15.6 74.1 9.9 75.5 6.7 75.0 7.8 72.0 11.9 67.8 15.8 64.2 17.5 61.8 17.6 60.2 17.2 58.8 16.8 57.4 16.0 56.0 13.3 54.8 8.1 53.7 2.5 52.1 0.0 50.0 2.5 47.9 8.1 46.3 13.3 45.2 16.0 44.0 16.8 42.6 17.2 41.2 17.6 39.8 17.5 38.2 15.8 35.8 11.9 32.2 7.8 28.0 6.7 25.0 9.9 24.5 15.6 25.9 20.6 27.5 23.5 27.8 24.9 27.0 26.0 26.0 27.0 24.9 27.8 23.5 27.5 20.6 25.9 15.6 24.5 9.9 25.0 6.7 28.0 7.8 32.2 11.9 35.8 15.8 38.2 17.5 39.8 17.6 41.2 17.2 42.6 16.8 44.0 16.0 45.2 13.3 46.3 8.1 47.9 2.5 50.0 0.0 52.1 2.5 53.7 8.1 54.8 13.3 56.0 16.0 57.4 16.8 58.8 17.2 60.2 17.6 61.8 17.5 64.2 15.8 67.8 11.9 72.0 7.8 75.0 6.7 75.5 9.9 74.1 15.6 72.5 20.6 72.2 23.5 73.0 24.9 74.0 26.0 75.1 27.0 76.5 27.8 79.4 27.5 84.4 25.9 90.1 24.5 93.3 25.0 92.2 28.0 88.1 32.2 84.2 35.8 82.5 38.2 82.4 39.8 82.8 41.2 83.2 42.6 84.0 44.0 86.7 45.2 91.9 46.3 97.5 47.9Z'/%3E%3C/svg%3E");
	--shape-cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 99.7 52.6 98.7 55.1 97.2 57.5 95.4 59.7 93.4 61.6 91.5 63.5 89.8 65.3 88.4 67.1 87.5 69.1 86.8 71.3 86.5 73.7 86.2 76.3 85.9 79.1 85.4 81.9 84.5 84.5 83.2 86.9 81.5 88.9 79.3 90.3 76.7 91.2 74.0 91.6 71.2 91.5 68.4 91.3 65.7 90.9 63.2 90.7 60.9 90.7 58.7 91.1 56.6 91.9 54.5 93.1 52.3 94.5 50.0 96.0 47.5 97.4 44.9 98.4 42.2 99.0 39.6 98.9 37.1 98.2 34.8 96.8 32.7 95.0 31.0 92.8 29.4 90.4 28.0 88.1 26.6 86.0 25.2 84.1 23.6 82.6 21.7 81.5 19.5 80.5 17.0 79.7 14.4 78.8 11.8 77.8 9.3 76.4 7.2 74.7 5.5 72.7 4.4 70.3 3.9 67.7 4.0 64.9 4.6 62.2 5.4 59.5 6.4 56.9 7.2 54.5 7.8 52.2 8.0 50.0 7.8 47.8 7.2 45.5 6.4 43.1 5.4 40.5 4.6 37.8 4.0 35.1 3.9 32.3 4.4 29.7 5.5 27.3 7.2 25.3 9.3 23.6 11.8 22.2 14.4 21.2 17.0 20.3 19.5 19.5 21.7 18.5 23.6 17.4 25.2 15.9 26.6 14.0 28.0 11.9 29.4 9.6 31.0 7.2 32.7 5.0 34.8 3.2 37.1 1.8 39.6 1.1 42.2 1.0 44.9 1.6 47.5 2.6 50.0 4.0 52.3 5.5 54.5 6.9 56.6 8.1 58.7 8.9 60.9 9.3 63.2 9.3 65.7 9.1 68.4 8.7 71.2 8.5 74.0 8.4 76.7 8.8 79.3 9.7 81.5 11.1 83.2 13.1 84.5 15.5 85.4 18.1 85.9 20.9 86.2 23.7 86.5 26.3 86.8 28.7 87.5 30.9 88.4 32.9 89.8 34.7 91.5 36.5 93.4 38.4 95.4 40.3 97.2 42.5 98.7 44.9 99.7 47.4Z'/%3E%3C/svg%3E");
	--shape-clover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 99.9 52.2 99.7 54.3 99.2 56.5 98.7 58.6 97.9 60.6 97.0 62.6 96.0 64.5 94.8 66.3 93.4 68.0 91.9 69.6 90.3 71.0 88.6 72.3 86.7 73.4 84.7 74.3 82.6 75.0 80.3 75.5 77.8 75.5 74.0 74.0 75.5 77.8 75.5 80.3 75.0 82.6 74.3 84.7 73.4 86.7 72.3 88.6 71.0 90.3 69.6 91.9 68.0 93.4 66.3 94.8 64.5 96.0 62.6 97.0 60.6 97.9 58.6 98.7 56.5 99.2 54.3 99.7 52.2 99.9 50.0 100.0 47.8 99.9 45.7 99.7 43.5 99.2 41.4 98.7 39.4 97.9 37.4 97.0 35.5 96.0 33.7 94.8 32.0 93.4 30.4 91.9 29.0 90.3 27.7 88.6 26.6 86.7 25.7 84.7 25.0 82.6 24.5 80.3 24.5 77.8 26.0 74.0 22.2 75.5 19.7 75.5 17.4 75.0 15.3 74.3 13.3 73.4 11.4 72.3 9.7 71.0 8.1 69.6 6.6 68.0 5.2 66.3 4.0 64.5 3.0 62.6 2.1 60.6 1.3 58.6 0.8 56.5 0.3 54.3 0.1 52.2 0.0 50.0 0.1 47.8 0.3 45.7 0.8 43.5 1.3 41.4 2.1 39.4 3.0 37.4 4.0 35.5 5.2 33.7 6.6 32.0 8.1 30.4 9.7 29.0 11.4 27.7 13.3 26.6 15.3 25.7 17.4 25.0 19.7 24.5 22.2 24.5 26.0 26.0 24.5 22.2 24.5 19.7 25.0 17.4 25.7 15.3 26.6 13.3 27.7 11.4 29.0 9.7 30.4 8.1 32.0 6.6 33.7 5.2 35.5 4.0 37.4 3.0 39.4 2.1 41.4 1.3 43.5 0.8 45.7 0.3 47.8 0.1 50.0 0.0 52.2 0.1 54.3 0.3 56.5 0.8 58.6 1.3 60.6 2.1 62.6 3.0 64.5 4.0 66.3 5.2 68.0 6.6 69.6 8.1 71.0 9.7 72.3 11.4 73.4 13.3 74.3 15.3 75.0 17.4 75.5 19.7 75.5 22.2 74.0 26.0 77.8 24.5 80.3 24.5 82.6 25.0 84.7 25.7 86.7 26.6 88.6 27.7 90.3 29.0 91.9 30.4 93.4 32.0 94.8 33.7 96.0 35.5 97.0 37.4 97.9 39.4 98.7 41.4 99.2 43.5 99.7 45.7 99.9 47.8Z'/%3E%3C/svg%3E");
	--shape-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100.0 50.0 99.6 52.2 98.3 54.2 96.2 56.1 93.6 57.7 90.6 59.0 87.3 60.0 84.1 60.7 81.0 61.3 78.2 61.7 75.8 62.0 73.8 62.4 72.2 62.8 70.9 63.3 70.0 64.0 69.1 64.7 68.4 65.4 67.7 66.2 67.0 67.0 66.2 67.7 65.4 68.4 64.7 69.1 64.0 70.0 63.3 70.9 62.8 72.2 62.4 73.8 62.0 75.8 61.7 78.2 61.3 81.0 60.7 84.1 60.0 87.3 59.0 90.6 57.7 93.6 56.1 96.2 54.2 98.3 52.2 99.6 50.0 100.0 47.8 99.6 45.8 98.3 43.9 96.2 42.3 93.6 41.0 90.6 40.0 87.3 39.3 84.1 38.7 81.0 38.3 78.2 38.0 75.8 37.6 73.8 37.2 72.2 36.7 70.9 36.0 70.0 35.3 69.1 34.6 68.4 33.8 67.7 33.0 67.0 32.3 66.2 31.6 65.4 30.9 64.7 30.0 64.0 29.1 63.3 27.8 62.8 26.2 62.4 24.2 62.0 21.8 61.7 19.0 61.3 15.9 60.7 12.7 60.0 9.4 59.0 6.4 57.7 3.8 56.1 1.7 54.2 0.4 52.2 0.0 50.0 0.4 47.8 1.7 45.8 3.8 43.9 6.4 42.3 9.4 41.0 12.7 40.0 15.9 39.3 19.0 38.7 21.8 38.3 24.2 38.0 26.2 37.6 27.8 37.2 29.1 36.7 30.0 36.0 30.9 35.3 31.6 34.6 32.3 33.8 33.0 33.0 33.8 32.3 34.6 31.6 35.3 30.9 36.0 30.0 36.7 29.1 37.2 27.8 37.6 26.2 38.0 24.2 38.3 21.8 38.7 19.0 39.3 15.9 40.0 12.7 41.0 9.4 42.3 6.4 43.9 3.8 45.8 1.7 47.8 0.4 50.0 0.0 52.2 0.4 54.2 1.7 56.1 3.8 57.7 6.4 59.0 9.4 60.0 12.7 60.7 15.9 61.3 19.0 61.7 21.8 62.0 24.2 62.4 26.2 62.8 27.8 63.3 29.1 64.0 30.0 64.7 30.9 65.4 31.6 66.2 32.3 67.0 33.0 67.7 33.8 68.4 34.6 69.1 35.3 70.0 36.0 70.9 36.7 72.2 37.2 73.8 37.6 75.8 38.0 78.2 38.3 81.0 38.7 84.1 39.3 87.3 40.0 90.6 41.0 93.6 42.3 96.2 43.9 98.3 45.8 99.6 47.8Z'/%3E%3C/svg%3E");
	--shape-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M10.0 100.0 10.0 50.0 10.3 44.8 11.4 39.6 13.0 34.7 15.4 30.0 18.3 25.6 21.7 21.7 25.6 18.3 30.0 15.4 34.7 13.0 39.6 11.4 44.8 10.3 50.0 10.0 55.2 10.3 60.4 11.4 65.3 13.0 70.0 15.4 74.4 18.3 78.3 21.7 81.7 25.6 84.6 30.0 87.0 34.7 88.6 39.6 89.7 44.8 90.0 50.0 90.0 100.0Z'/%3E%3C/svg%3E");
	--shape-pill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M70.0 10.0 72.6 10.2 75.2 10.7 77.7 11.5 80.0 12.7 82.2 14.1 84.1 15.9 85.9 17.8 87.3 20.0 88.5 22.3 89.3 24.8 89.8 27.4 90.0 30.0 89.8 32.6 89.3 35.2 88.5 37.7 87.3 40.0 85.9 42.2 84.1 44.1 82.2 45.9 80.0 47.3 77.7 48.5 75.2 49.3 72.6 49.8 70.0 50.0 30.0 50.0 27.4 49.8 24.8 49.3 22.3 48.5 20.0 47.3 17.8 45.9 15.9 44.1 14.1 42.2 12.7 40.0 11.5 37.7 10.7 35.2 10.2 32.6 10.0 30.0 10.2 27.4 10.7 24.8 11.5 22.3 12.7 20.0 14.1 17.8 15.9 15.9 17.8 14.1 20.0 12.7 22.3 11.5 24.8 10.7 27.4 10.2 30.0 10.0Z'/%3E%3C/svg%3E");
	--shape-turn: 0deg;
}
:root[data-palette="type1"], :root[data-palette="imperfect"], :root[data-palette="subjunctive"] { --shape-turn: 20deg; }
:root[data-palette="type2"], :root[data-palette="passe-simple"] { --shape-turn: 40deg; }
:root[data-palette="type3"] { --shape-turn: 60deg; }

:is([data-palette="ootw"], [data-palette="type1"], [data-palette="type2"], [data-palette="type3"],
	[data-palette="passe-compose"], [data-palette="imperfect"], [data-palette="passe-simple"],
	[data-palette="future"], [data-palette="subjunctive"]) .header-page::before,
:is([data-palette="ootw"], [data-palette="type1"], [data-palette="type2"], [data-palette="type3"],
	[data-palette="passe-compose"], [data-palette="imperfect"], [data-palette="passe-simple"],
	[data-palette="future"], [data-palette="subjunctive"]) .header-page::after {
	border-radius: 0;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Present irregular: burst + cookie, irregular edges for irregular verbs. */
:is([data-palette="ootw"], [data-palette="type1"], [data-palette="type2"], [data-palette="type3"]) .header-page::before {
	-webkit-mask-image: var(--shape-burst);
	mask-image: var(--shape-burst);
	width: 250px;
	height: 250px;
	right: -60px;
	top: -100px;
	transform: rotate(var(--shape-turn));
}
:is([data-palette="ootw"], [data-palette="type1"], [data-palette="type2"], [data-palette="type3"]) .header-page::after {
	-webkit-mask-image: var(--shape-cookie);
	mask-image: var(--shape-cookie);
	width: 140px;
	height: 140px;
	right: 150px;
	bottom: -80px;
	transform: rotate(calc(var(--shape-turn) * -1));
}

/* Past tenses: an arch (a doorway, looking back) + a pill. */
:is([data-palette="passe-compose"], [data-palette="imperfect"], [data-palette="passe-simple"]) .header-page::before {
	-webkit-mask-image: var(--shape-arch);
	mask-image: var(--shape-arch);
	/* anchored to the bottom so the dome shows on short banners too */
	width: 140px;
	height: 150px;
	right: 40px;
	top: auto;
	bottom: -70px;
	transform: none;
}
:is([data-palette="passe-compose"], [data-palette="imperfect"], [data-palette="passe-simple"]) .header-page::after {
	-webkit-mask-image: var(--shape-pill);
	mask-image: var(--shape-pill);
	width: 190px;
	height: 190px;
	right: -60px;
	top: -70px;
	bottom: auto;
	transform: rotate(calc(-30deg + var(--shape-turn)));
}

/* Future & mood: a clover + a sparkle, for what may come. */
:is([data-palette="future"], [data-palette="subjunctive"]) .header-page::before {
	-webkit-mask-image: var(--shape-clover);
	mask-image: var(--shape-clover);
	width: 230px;
	height: 230px;
	right: -50px;
	top: -90px;
	transform: rotate(calc(45deg + var(--shape-turn)));
}
:is([data-palette="future"], [data-palette="subjunctive"]) .header-page::after {
	-webkit-mask-image: var(--shape-sparkle);
	mask-image: var(--shape-sparkle);
	width: 110px;
	height: 110px;
	right: 175px;
	bottom: -30px;
	transform: rotate(var(--shape-turn));
	opacity: .2;
}

/* ---------------- Conjugation tables ---------------- */

.conjugation-table-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.conjugation-table {
	display: flex;
	flex-direction: column;
	width: 200px;
	line-height: 1.8;
	background: var(--cj-surface);
	border: 1px solid var(--cj-line);
	border-radius: 12px;
	box-shadow: var(--cj-shadow);
	overflow: hidden;
}
.verb {
	text-align: center;
	font-size: 130%;
	padding: 4px 0;
	background: var(--cj-surface-2);
	font-weight: 500;
}
.conjugation {
	display: flex;
	border-top: 1px solid var(--cj-line);
	gap: 6px;
	padding: 1px 0;
}
.conjugation div {
	width: 50%;
}
.conjugation div:first-child {
	text-align: right;
	font-style: italic;
	color: var(--cj-text-muted);
}
/* :root raises specificity over /applets/verbs6.css, which some older copies of
   these pages load after this file and which repaints .audio the old blue. */
:root .audio {
	color: var(--cj-accent);
	cursor: pointer;
}
:root .verb:hover, :root .conjugation:hover {
	background-color: var(--cj-hover);
	background-image: none;
}
/* The word being played: the audio script (grammar-with-sound.js) adds
   .selected while it plays. */
:root .audio.selected,
:root a.hover.selected {
	background-color: var(--cj-hover);
	background-image: none;
	border-radius: 4px;
}
/* A few paragraphs still carry <font color="#000000">. Presentational
   attributes lose to any CSS rule, so this restores the theme text colour. */
#primaryContent font[color] {
	color: inherit;
}
.bottom-border {
	border-bottom: 1px solid var(--cj-line) !important;
}

/* Tables some pages draw by hand (passé composé, future & conditional). */
#primaryContent table:not(.verb_list) td,
#primaryContent table:not(.verb_list) th {
	border-color: var(--cj-line) !important;
}
:root[data-theme="dark"] .tense {
	border-color: rgba(140, 200, 255, .16) !important;
}
:root[data-theme="dark"] .conditional {
	border-color: rgba(120, 220, 190, .16) !important;
}

/* ---------------- "Verbs of this type" lists ---------------- */

.header {
	text-align: center;
	padding: 7px 5px;
	font-size: 115%;
	font-weight: 500;
	box-sizing: border-box;
	border-radius: 12px 12px 0 0;
	width: 230px;
	box-shadow: none;
}
/* Some pages set their own pastel in a later <style> with !important, so equal
   specificity would lose; :root lifts this above them. */
:root .header {
	background: var(--t-pc) !important;
	color: var(--t-on-pc);
	box-shadow: none;
}
/* /applets/verbs6.css (still loaded by the old local reverbs.jsp, after this
   file) repaints the list with a grey gradient and #DDD border, which is
   unreadable in dark mode; :root outranks it. */
:root .verb_list {
	background: var(--cj-surface);
	border-color: var(--cj-line);
}
:root .header {
	font-size: 115%;
}
:root .conjugation-table,
:root .conjugation {
	border-color: var(--cj-line);
}
:root .examples,
:root .verb_list td .examples {
	color: var(--cj-accent);
}
.verb_list {
	background: var(--cj-surface);
	border-radius: 0 0 12px 12px;
	width: 230px;
	padding: 6px;
	border: 1px solid var(--cj-line);
	border-top: 0;
	box-shadow: var(--cj-shadow);
}
/* The same class also marks the plain word tables inside the content column
   (e.g. "changer, manger..."); those keep all four corners. */
.content-column .verb_list {
	border-top: 1px solid var(--cj-line);
	border-radius: 12px;
}
.verb_list td {
	padding: 2px 4px;
	vertical-align: top;
}
.definition {
	font-style: italic;
	color: var(--cj-text-muted);
}
.examples {
	width: 24px;
}
.hover, .infinitive {
	cursor: pointer;
}
.infinitive {
	text-align: right;
}
a.hover, a.hover_title, .examples,
:root .examples .material-symbols-outlined {
	color: var(--cj-accent);
}
a.hover:hover, a.hover_title:hover, .examples:hover,
:root .examples:hover .material-symbols-outlined {
	color: var(--cj-accent-hover);
}
.examples .material-symbols-outlined {
	font-size: 20px;
	vertical-align: middle;
}

/* ---------------- Example-sentence popup ---------------- */

.popUpStyle {
	background: var(--cj-popup-bg);
	color: var(--cj-popup-text);
	padding: 10px 14px;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	visibility: hidden;
	position: absolute;
	text-align: left;
	line-height: 1.55;
	max-width: 360px;
	z-index: 50;
}
.popUpStyle b {
	color: inherit;
}
.popUpStyle i, .popUpStyle em {
	color: var(--cj-popup-em);
}

/* ---------------- Practice, challenges, page nav ---------------- */

practice-launcher {
	margin-top: 20px;
	margin-bottom: 10px;
}
.card {
	background-color: #735EAB;
	border-radius: 48px;
	display: inline-block;
	color: white;
	margin-top: 12px;
}
.card:hover {
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	background-color: #826DBA;
}
.card-state {
	padding: 14px 24px;
	border-radius: 48px;
}
.card-state:hover {
	opacity: .92;
}
.card-container {
	display: flex;
	gap: 20px;
	align-items: center;
}
.card-and-reward {
	display: flex;
}
.trophy {
	font-size: 340%;
	padding-top: 16px;
	margin-left: 10px;
}

/* Previous / next, from includes/conju-pager.jsp. It sits after the two-column
   layout, so it spans the same width as the page. */
.conju-pager {
	max-width: 960px;
	margin: 8px auto 0;
	padding: 0 16px;
	box-sizing: border-box;
	text-align: left;
}
.nav-spacer {
	flex: 1;
}
.nav-row {
	display: flex;
	gap: 20px;
	margin-top: 32px;
}
.nav-row a {
	flex: 1;
	text-decoration: none;
	color: var(--cj-text);
}
.nav-card {
	background: var(--cj-surface);
	border: 1px solid var(--cj-line);
	border-radius: var(--cj-radius);
	box-shadow: var(--cj-shadow);
	display: flex;
	align-items: center;
	padding: 12px 20px;
	flex-direction: column;
	justify-content: center;
	color: var(--cj-text-muted);
	transition: border-color .15s, background-color .15s;
}
.nav-card:hover {
	background-color: var(--cj-hover);
	border-color: var(--cj-accent);
}
.nav-card.left {
	align-items: flex-start;
}
/* old stylesheets define bare .left/.right widths (verbs6.css: .left { width: 10% }) */
:root .nav-card.left,
:root .nav-card.right {
	width: auto;
	float: none;
}
.nav-card.right {
	align-items: flex-end;
}
.center {
	display: flex;
	align-items: center;
}
.next-page-title {
	padding: 0 24px;
	font-size: 130%;
	color: var(--cj-text);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------- Misc carried over from conju1.css ---------------- */

#buttonControl {
	position: fixed;
	top: 10px;
	left: calc(50% - 110px);
	width: 220px;
	background-color: var(--cj-surface);
	z-index: 1000;
	box-shadow: 0 2px 4px rgb(0 0 0 / 50%);
}
.menu {
	display: none;
}
#menu-opener, #menu-closer {
	display: none;
	cursor: pointer;
}
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 19;
	transition: 1s;
}
:root[data-theme="dark"] img[src*="triumph.svg"],
:root[data-theme="dark"] object[data*="triumph.svg"] {
	filter: invert(1) hue-rotate(180deg);
}

/* ---------------- "Click to enable sound" notice ----------------
   Shown by includes/conju-audio.jsp when the browser blocks autoplay; replaces
   the old full-screen "Launch Audio" button. Hidden on the first click/key. */
.conju-click-message {
	position: fixed;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: calc(100vw - 32px);
	box-sizing: border-box;
	padding: 10px 18px;
	border-radius: 24px;
	/* primary, not the container colour: it has to stand out from the banner */
	background: var(--t-p);
	color: var(--t-on-p);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
	font-size: 15px;
	line-height: 1.4;
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease, visibility 0s linear 0s;
	cursor: pointer;
}
.conju-click-message.hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.conju-click-message .material-symbols-outlined {
	font-size: 22px;
}
.conju-click-message .mobile-msg {
	display: none;
}
@media (pointer: coarse) {
	.conju-click-message .desktop-msg { display: none; }
	.conju-click-message .mobile-msg { display: inline; }
}

/* ---------------- Touch screens ----------------
   Fingers need bigger targets than a mouse: the example-sentence icons were
   20px square. Only for coarse pointers, so the desktop layout is unchanged. */
@media (pointer: coarse) {
	.verb_list .examples {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 36px;
	}
	.verb_list td {
		vertical-align: middle;
	}
	.base a {
		display: inline-block;
		padding: 10px 6px;
	}
	.pc-examples .audio,
	.verb_list a.audio,
	.verb_list a.hover {
		display: inline-block;
		padding: 6px 0;
	}
}

/* ---------------- Small screens ---------------- */

@media (max-width: 640px) {
	.clearfix {
		flex-direction: column;
		margin-top: 70px;
	}
	#interiorNavigation {
		margin-top: 10px;
		position: static;
	}
	#primaryContent {
		margin-top: -10px;
	}
}

@media (max-width: 550px) {
	.menu {
		display: block;
	}
	#menu-opener {
		display: block;
	}
	#menu-closer {
		display: none;
	}
	#interiorNavigation {
		display: none;
		border-radius: 0 var(--cj-radius) var(--cj-radius) 0;
		z-index: 1000;
		position: absolute;
		top: 48px;
		left: 0;
		margin: 0;
		background-color: var(--cj-surface);
	}
	.header-page {
		border-radius: 24px;
		margin: 0 0 20px;
		padding: 18px 22px 22px;
	}
	.header-page h1, .header-page h2 {
		font-size: 26px;
		line-height: 32px;
	}
	.row {
		flex-direction: column;
	}
	.other {
		margin-top: 20px;
	}
	.next-page-title {
		font-size: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.nav-row {
		gap: 10px;
		flex-direction: column;
	}
}