@font-face { font-display:swap; font-family:'Atkinson Hyperlegible Next Variable'; font-style:normal; font-weight:125 950; font-stretch:75% 125%; src:url('/assets/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2') format("woff2-variations"); }
/*
@font-face { font-display:swap; font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:400; src:url('/assets/fonts/atkinson-hyperlegible-next-v7-latin-regular.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:'Atkinson Hyperlegible Next'; font-style:italic; font-weight:400; src:url('/assets/fonts/atkinson-hyperlegible-next-v7-latin-italic.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:'Atkinson Hyperlegible Next'; font-style:normal; font-weight:700; src:url('/assets/fonts/atkinson-hyperlegible-next-v7-latin-700.woff2') format('woff2'); }
*/
@font-face { font-display:swap; font-family:'Charis'; font-style:normal; font-weight:700; src:url('/assets/fonts/charis-sil-v2-latin-700.woff2'); }
@font-face { font-display:swap; font-family:'Atkinson Hyperlegible Mono'; font-style:normal; font-weight:400; src:url('/assets/fonts/atkinson-hyperlegible-mono-v8-latin-regular.woff2') format('woff2'); }
@font-face { font-display:swap; font-family:'Caveat Brush'; font-style:normal; font-weight:400; src:url('/assets/fonts/caveat-brush-v12-latin-regular.woff2') format('woff2'); }

/*
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation:auto;
  }
}
*/

@layer reset {
  *, *::before, *::after { box-sizing:border-box; }
  * { margin:0; padding:0; }
  body { line-height:1.5; }
  img, picture, video, canvas, svg { display:block; max-inline-size:100%; }
  img { height:auto; }
  input, button, textarea, select { font:inherit; letter-spacing:inherit; word-spacing:inherit; color:currentColor; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap:break-word; }
  ol, ul { list-style:none; }
	table {	border-collapse:collapse;	border-spacing:0;	width:100%; }
	audio { width:100%; }
	article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display:block; }
}

:root {
	--font-family:'Atkinson Hyperlegible Next Variable', sans-serif;
	--font-family-headings:'Charis', serif;
	--font-family-mono:'Atkinson Hyperlegible Mono', serif;
	--font-family-callout:'Caveat Brush', sans-serif;
	--font-size-smaller:.8rem;
	--font-size-mini:.6rem;
	--line-height:1.4;
	--color-text:#012c33;
	--color-text-underline:#506c71;
	--color-text-light:#f7f7f7;
	--color-text-light-underline:#8e8e8e;
	--color-brand:#26a1a1;
	--color-brand-darker:#1a7070;
	--color-secondary:#68c64a;
	--color-secondary-darker:#316520;
	--color-alert:#d1747a;
	--color-alert-darker:#b43c44;
	--color-bg:#e6e6e6;
	--color-bg-box:#eee;
	--color-bg-highlight:var(--color-text-light);
	--color-border-nav:#4d6b70;
	--color-border-nav-light:#a0adaf;
	--width-textcolumn:600px;
}

a { color:currentColor; text-underline-offset:3px; text-decoration-color:var(--color-text-underline); }
a[href^="#"] { text-decoration-style:dashed; }
a:focus-visible { outline-offset:0.25em; outline-width:0.25em; outline-color:currentColor; }
a[href].external::after, a[href^="http"]:not(:where([href^="#"], [href^="mailto:"], .noicon))::after { background-position:center right; background-repeat:no-repeat; background-size:.7em .8em; padding-right:1em; background-image:url("data:image/svg+xml,%3csvg width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1408 928v320q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h704q14 0 23 9t9 23v64q0 14-9 23t-23 9H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113V928q0-14 9-23t23-9h64q14 0 23 9t9 23zm384-864v512q0 26-19 45t-45 19-45-19l-176-176-652 652q-10 10-23 10t-23-10L695 983q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45 45-19h512q26 0 45 19t19 45z' fill='%23012c33'/%3e%3c/svg%3e"); content:''; }
a[href^="/reference/glossary/"]:not([href="/reference/glossary/"]) { text-decoration-style:dashed; background:var(--color-bg-highlight); border-radius:.5em; padding:.2em .3em;
	&:after { background-position:top right; background-repeat:no-repeat; background-size:1em 1em; padding-left:.2em; padding-right:1em; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128' fill='none' stroke='%23012c33' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ctitle%3Ehelp%3C/title%3E%3Cpath d='M64 87a5 5 90 010 12 5 5 90 010-12M49 40a18 18 90 1119 28q-4 0-4 4v8m0-65a1 1 0 000 98 1 1 0 000-98'/%3E%3C/svg%3E"); content:''; }
}
.withicon { display:flex; gap:.5em;
	a .sustyicon { height:1.3rem; width:1.3rem; stroke-width:6; flex-shrink:0; }
}

html{ scroll-behavior: smooth; }
body { background:var(--color-bg); color:var(--color-text); line-height:var(--line-height); }
html, button, input, select, textarea { font:normal 400 18px var(--font-family); }
button { border:0; background:inherit; color:currentColor; }

.visuallyhidden:not(:focus):not(:active) { clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }

h1, h2, h3, h4 { font-family:var(--font-family-headings); font-weight:700; }
h1.regularfont, h2.regularfont, h3.regularfont, h4.regularfont { font-family:var(--font-family); font-size:inherit; font-weight:550; }
h1 { line-height:1.2; padding-top:2rem; padding-bottom:2rem; }
h2:not(:first-child) { padding-top:2rem; }
h3:not(:first-child) { padding-top:1rem; }
blockquote { font-family:var(--font-family-mono); font-size:80%; line-height:1.2; padding-left:2rem; padding-right:2rem; }
.sustyicon { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.sustyicon-solid { fill:currentColor; stroke:currentColor; }
hr { width:100%; border:none; border-bottom:1px solid var(--color-brand); padding-top:1rem; margin-bottom:1rem; }
strong { font-weight:550; }

dialog { box-shadow:none; padding:0; margin:0; border:none; overflow-x:clip; overflow-y:auto; height:100dvh; max-height:100%; overscroll-behavior:contain; }
dialog.modal-meta { z-index:1000; width:500px; padding:1rem; background:#e6e6e6; inset:0 0 0 auto; }
dialog.modal-menu { z-index:2000; inset:0 auto 0 0; }
dialog.modal-panopto { z-index:3000; width:100%; min-width:100%; }
dialog::backdrop { background-color:rgba(1, 44, 51, .6); pointer-events: none; }
	dialog button.close { border:none; width:4rem; top:0; position:fixed; }
	dialog.modal-meta button.close { right:0; background:transparent; color:var(--color-text);
		svg { width:4rem; height:4rem; padding:1rem; stroke-width:10; }
	}
	dialog.modal-menu button.close { bottom:0; left:0; background:var(--color-text); color:var(--color-bg-highlight); }
html:has(dialog[open]:modal) { overflow:hidden; scrollbar-gutter:stable; }

form.form-scorecard { display:block; background:var(--color-bg-box); padding:1rem; border:1px dashed var(--color-text);
	img { float:right; width:8rem; height:4rem; }
	img + * { margin-top:0; }
	fieldset { border:none; display:flex; flex-wrap:wrap;
		legend { flex-basis:100%; font-weight:550; }
		div { flex-basis:30%; flex-grow:1; margin-top:0; }
	}
	input[type="submit"] { border:none; background:var(--color-text); color:var(--color-bg-highlight); padding:.3rem 3rem .2rem; margin-left:50%; width:50%; text-align:center; }
}

@media (min-width: 400px) {
main { min-height:calc(100vh - 12.4rem); padding-left:4rem; }
}

header {
	#topbar { display:flex; flex-wrap:wrap;
		& > a { display:block; margin:1rem;
			img { width:220px; max-width:100%; height:auto; }
		}
		.breadcrumb { padding:0 1rem 1rem; font-size:.8rem; opacity:.6; width:100%;
			a { text-decoration:none; margin-right:.5rem;
				&:hover { text-decoration:underline; }
			}
			a::before { content:'> '; }
		}
	}
	#mainmenu { width:100%; display:flex; justify-content:space-between; background:var(--color-text); color:var(--color-bg-highlight);
		& > button, & > a, & button.close { width:4rem;
			svg { width:4rem; height:4rem; padding:1rem; stroke-width:10; }
		}
		& > button, & button.close { flex-grow:1; bottom:unset; left:unset; }
		& > a { border-left:1px solid var(--color-border-nav); }
		dialog.modal-menu { width:100%; background:var(--color-text); color:var(--color-bg-highlight); order:1;
			.interactivemenu { border-right-width:1.5rem; margin-left:3.5rem; margin-top:3.5rem;
				li { display:flex; flex-wrap:wrap;
					&.section:first-child { border-top:1px solid var(--color-border-nav); }
					&:not(.section) { background:var(--color-bg); color:var(--color-text); }
					a { flex-grow:1; flex-shrink:1; flex-basis:50%; display:block; padding:.5rem 1rem; border-bottom:1px solid var(--color-border-nav-light); text-decoration:none;
						&:hover { text-decoration:underline; text-decoration-color:var(--color-text-underline); }
					}
					&.current > a { font-weight:550; background:var(--color-bg-highlight); }
					&.section > a { background:var(--color-text); color:white; padding-top:1rem; padding-bottom:1rem; border-bottom:1px solid var(--color-border-nav); text-decoration-color:var(--color-text-light-underline); }
					&.level1 > a { padding-left:2rem; }
					&.level2 > a { padding-left:3.5rem; font-size:.8rem; }
					button { flex-basis:3rem; flex-grow:0; border-left:1px solid var(--color-border-nav-light); border-bottom:1px solid var(--color-border-nav-light); vertical-align:bottom; font-size:2rem; font-weight:200; color:var(--color-text-underline); }
					&.section > button { background:var(--color-text); color:var(--color-text-light-underline); border-color:var(--color-border-nav); }
					ul { flex-basis:100%; }
				}
			}
		}
	}
}

@media (min-width: 400px) {
header {
	#topbar { padding-left:4rem; flex-wrap:nowrap;
		.breadcrumb { padding-top:1rem; width:auto; }
	}
	#mainmenu { width:unset; position:relative; display:block;
		& > button, & > a, & button.close { position:fixed; left:0; }
		& > button, & button.close { display:flex; top:0; bottom:0; cursor:pointer;
			&[aria-expanded="true"] { width:2rem; }
		}
		& > a { bottom:0; border-left:unset; border-top:1px solid var(--color-border-nav);
			&.prev { bottom:4rem; }
		}
		dialog.modal-menu { width:40%; min-width:300px; order:1; border:10px solid var(--color-text);
			.interactivemenu { border-right-width:1.5rem; margin-left:3.5rem; margin-top:3.5rem;
				li { display:flex; flex-wrap:wrap;
					&.section:first-child { border-top:1px solid var(--color-border-nav); }
					&:not(.section) { background:var(--color-bg); color:var(--color-text); }
					a { flex-grow:1; flex-shrink:1; flex-basis:50%; display:block; padding:.5rem 1rem; border-bottom:1px solid var(--color-border-nav-light); text-decoration:none;
						&:hover { text-decoration:underline; text-decoration-color:var(--color-text-underline); }
					}
					&.current > a { font-weight:550; background:var(--color-bg-highlight); }
					&.section > a { background:var(--color-text); color:white; padding-top:1rem; padding-bottom:1rem; border-bottom:1px solid var(--color-border-nav); text-decoration-color:var(--color-text-light-underline); }
					&.level1 > a { padding-left:2rem; }
					&.level2 > a { padding-left:3.5rem; font-size:.8rem; }
					button { flex-basis:3rem; flex-grow:0; border-left:1px solid var(--color-border-nav-light); border-bottom:1px solid var(--color-border-nav-light); vertical-align:bottom; font-size:2rem; font-weight:200; color:var(--color-text-underline); }
					&.section > button { background:var(--color-text); color:var(--color-text-light-underline); border-color:var(--color-border-nav); }
					ul { flex-basis:100%; }
				}
			}
		}
	}
}
}

footer { background:white; margin:4rem 0 0; text-align:center; padding:1.3rem; color:var(--color-text-underline);
	a { text-decoration-color:var(--color-text-underline); }
	.logos { display:flex; gap:1rem 0; flex-wrap:wrap; padding:1rem 0 2rem; justify-content:center;
		a.jargonfree { margin-right:2rem; }
		a:after { display:none !important; }
			img { height:100px; width:auto; }
			.kone img { height:70px; margin:10px 20px; }
			.tuni img { height:80px; margin:3px 0 17px 20px; }
			.worldcc img { height:80px; margin:10px 20px 0 30px; }
	}
}

.content { padding:1rem;
	&.column {
		& > * { max-width:var(--width-textcolumn); margin-left:auto; margin-right:auto; }
	}
	* + * { margin-top:1rem; }
	.scope { padding-right:4rem; position:relative;
		.scopeicon { width:3rem; position:absolute; top:0; right:0; padding-top:2rem; line-height:1;
			svg { width:2rem; height:2rem; position:absolute; top:0; right:.5rem; }
			span { font-size:var(--font-size-mini); display:block; text-align:center; margin-top:0; }
		}
	}
	aside.crosslink { position:relative; font-size:var(--font-size-smaller); line-height:1.2; padding-left:15vw; padding-top:.5rem;
		svg { width:1.5rem; height:1.5rem; position:absolute; top:0; left:calc(15vw - 2rem); stroke-width:6; }
	}
	ul { list-style:disc; }
	ol { list-style:decimal; }
	.checkboxbullets { list-style-type:"\2610  "; }
		li { margin-left:1.2rem; }
		.dense li { margin-top:0; }
	.footnotes li + li { margin-top:1rem; }
	table:not(.colourscheme) {
		tr {
			th, td { border:1px solid var(--color-text); padding:.2rem .5rem; vertical-align:top; background:white; }
			th { background:var(--color-text); color:var(--color-bg); text-align:left; }
		}
		.terminologytable & th:first-child { border-bottom:5px solid var(--color-alert); color:var(--color-alert); }
		.terminologytable & th:last-child { border-bottom:5px solid var(--color-secondary); color:var(--color-secondary); }
		.terminologytable & td { background:var(--color-bg-box); }
	}
	table.fullwidth { max-width:100%; }
	figure { background:var(--color-bg-box);
		img { width:100%; max-width:100%; }
		figcaption { padding:0 1rem 1rem; font-style:italic; position:relative;
			button { position:absolute; bottom:1rem; right:1rem; background:var(--color-text); color:var(--color-bg-highlight); padding:.3rem .5rem; }
		}
	}
	.block-wide { max-width:100%; }
}

.logo {
	& > div { display:flex;
		div { padding:.7em; background:white; color:var(--color-text);
			.text & { background:var(--color-text); color:var(--color-bg-highlight); }
			.highlight & { background:var(--color-bg-highlight); }
			&:first-child { width:4.5em; height:4.2em; padding:.5em .5em .5em .8em;
				svg { stroke:currentColor; width:4em; height:4em; stroke-width:3; }
			}
			&:last-child { margin-top:0; padding-left:.25em; font-family:var(--font-family-callout); line-height:1; font-size:120%;
				span { display:block; letter-spacing:.2px;
					span { display:inline; letter-spacing:.4px; font-weight:bold; }
				}
			}
		}
	}
}

/* expanders */
.expander { cursor:pointer; }
	.expander button { border:none; }
	.expander:not(.verticalmenu) button { all:inherit;width:100%; }
		.expander.simple button:not([aria-expanded="true"]) { text-decoration:dashed underline; }
		.sc-box .expander button::after { display:block; content:'+ Read more…'; background:var(--color-bg-highlight); color:var(--color-text); margin: 1rem -1rem -1rem; line-height:1; padding:.5rem; text-align:right; border-top:1px dashed currentColor; text-decoration:underline; }
		.expander button[aria-expanded="true"]::after { display:none; }
		.expander button * { pointer-events:none; }
		.expander.simple button:not([aria-expanded="true"]) h2,
		.expander.simple button:not([aria-expanded="true"]) h3,
		.expander.simple button:not([aria-expanded="true"]) h4 { font-size:1rem; font-family:var(--font-family); font-weight:normal; }
		.expander.simple div { border-left:1px solid var(--color-text); padding-left:1rem; }

.sc-compass, .sc-pen { display:flex; gap:1rem; padding:1rem 0; background:var(--color-bg-highlight); padding-left:1rem; padding-right:1rem;
	&.sc-compass { border-right:10px solid var(--color-secondary); }
	&.sc-pen { background:transparent; padding:0; gap:.5rem; }
	div.mascot { flex-basis:15%; flex-grow:0; margin-top:0;
		img { width:100%; height:auto; }
	}
	&.sc-pen div.mascot { margin-top:1rem; padding-right:.5rem; }
	div.callout { flex-basis:75%; flex-grow:1; margin-top:0; }
	&.sc-pen div.callout { background:var(--color-bg-highlight); padding:1rem; border:1px solid var(--color-brand); border-radius:1rem; }
	&.sc-compass div.callout > strong:first-child,
	&.sc-compass div.callout > p:first-child strong { font-family:var(--font-family-callout); font-weight:400; font-size:140%; line-height:1.2; }
}

.sc-box { border:1px solid var(--color-brand); padding:1rem; position:relative; background:var(--color-bg-box);
	.expander button::after { border-top:1px dashed var(--color-brand); }
	&.sc-box-warning { border:none; border-left:10px solid var(--color-alert); padding:.5rem 1rem; }
	&.sc-box-note { border:none; border-left:10px solid var(--color-secondary); padding:.5rem 1rem; }
	.sustyicon { width:4rem; height:4rem; float:right; margin-left:1rem; margin-bottom:1rem; }
	&.sc-box-glossary .sustyicon { width:1.5rem; height:1.5rem; float:left; margin: -.2rem .5rem 0 0; stroke-width:6; }
	.sustyicon + * { margin-top:0rem; padding-top:0; }
	&.sc-box-glossary {
		p:not(:first-child, :last-child) { font-size:var(--font-size-smaller); padding-left:2.1rem; }
		p:last-child { text-align:right; }
	}
}

.sc-takeaways { border-right:10px solid var(--color-secondary); padding:1rem; position:relative; background:var(--color-bg-box);
	.mascot { float:right;
		img { width:8rem; height:4rem; }
	}
	.mascot + * { padding-top:4.5rem; }
}

.sc-link { padding:0; background:var(--color-bg-box); position:relative;
	img { border:1px solid var(--color-bg); }
	img { filter:grayscale(100%); }
	&:hover img { filter:none; }
	& > div { padding:1rem; }
	.body { display:flex; gap:1rem; border:1px dashed var(--color-text);
		div:first-child { flex-basis:30%; flex-shrink:0; }
		div:last-child { margin-top:0;
			* + * { margin-top:0; }
			a { font-weight:450; }
			a::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; }
		}
	}
}

.sc-next { margin:2rem 0;
	a { text-decoration:none; display:flex; background:var(--color-text); color:var(--color-bg-highlight); text-decoration:underline; text-decoration-color:var(--color-text-light-underline);
		span:nth-child(1) { flex-grow:1; padding:.7rem 1rem .5rem; }
		span:nth-child(2) { flex-grow:0; margin:0;
			svg { width:4rem; height:4rem; padding:1rem; stroke-width:10; border-left:1px solid var(--color-border-nav); }
		}
	}
}

.sc-imagegallery { max-width:800px !important; background:var(--color-bg-box);
	figure[hidden] { display:none; }
	figure { display:flex;
		img { flex-basis:600px; }
		figcaption { flex-basis:200px; }
	}
}

jf-minigame2 { display:block; border:1px dashed var(--color-text); background:var(--color-bg-box); position:relative;
	* + * { margin-top:0 !important; }
	& > * { padding:1rem; margin:0; }
	.title { padding-bottom:0; font-family:var(--font-family); font-size:inherit; font-weight:550; }
	button { border:1px solid; background-color:var(--color-text); color:var(--color-text-light); padding:.2rem .5rem; display:block; margin:0 0 0 auto; }
	button[disabled] { background-color:lightgrey; color:var(--color-text-light); }
	.a11ybutton { position:absolute; transform:scale(0);
		&:focus { transform:unset; top:0; right:0; font-size:var(--font-size-smaller); }
	}
	.minigame {
		.result {
			.feedback { font-weight:550; margin-top:2rem; margin-bottom:.5rem; }
		}
	}
	.minigame[data-minigame="buttons"] {
		.interactive { display:flex; gap:1rem;
			button { flex-grow:1; border:none;
				&.selectedanswer { outline:3px solid var(--color-text); outline-offset:1px; }
				&[disabled] { background:var(--color-alert); color:var(--color-text);
					&.true { background:var(--color-secondary); }
				}
			}
		}
	}
	.minigame[data-minigame="highlightwords"] {
		.interactive { font-family:monospace; line-height:2; padding:.5rem; background:white;
			.word { padding:.3rem 0; }
			[data-status="play"] & .word { cursor:crosshair; }
			[data-status="play"] & .word:not(.highlighted):hover { background:#ddd; }
			.highlighted { background:yellow; }
			[data-status="result"] & .highlighted { background:lightgrey; }
			.wanted { text-decoration:underline var(--color-alert) wavy; }
			.highlighted.wanted { background:var(--color-secondary); }
			/* [data-status="result"] & .wanted:not(.highlighted) { background:lightcoral; } */
		}
		button { margin:1rem 1rem 1rem auto; }
	}
}

jf-minigame { display:block; border:1px dashed var(--color-text); background:var(--color-bg-box);
	* + * { margin-top:0 !important; }
	& > * { padding:1rem; margin:0; }
	.title { padding-bottom:0; }
	button { border:1px solid; background-color:var(--color-text); color:var(--color-text-light); padding:.2rem .5rem; display:block; margin:0 0 0 auto; }
	button[disabled] { background-color:lightgrey; color:var(--color-text-light); }
	button[data-action="reset"] { border:none; background:transparent; color:var(--color-text); text-decoration:underline dashed; font-size:var(--font-size-smaller); }
	.minigame[data-minigame="multiplechoice"] {
		fieldset { padding:0 1rem 1rem; margin-bottom:1rem; }
	}
	.minigame[data-minigame="clicktohighlight"] { padding:0;
		.cta, .interactive { border-bottom:1px dashed var(--color-text); }
		.interactive { font-family:monospace; line-height:2; padding:1rem;
			.word { padding:.3rem 0; }
			[data-status="play"] & .word { cursor:crosshair; }
			[data-status="play"] & .word:not(.highlighted):hover { background:#ddd; }
			.highlighted { background:yellow; }
			[data-status="result"] & .highlighted { background:lightgrey; }
			.wanted { text-decoration:underline red wavy; }
			.highlighted.wanted { background:lightgreen; }
			/* [data-status="result"] & .wanted:not(.highlighted) { background:lightcoral; } */
		}
		.result { padding:1rem;
			.feedback { font-size:120%; font-weight:bold; }
			table {
				tr {
					th { text-align:left; }
					td:first-child { text-decoration:underline red wavy; }
					&.found td:first-child { background:lightgreen; }
				}
			}
		}
	}
}

.scorecard-form, .scorecard-table {
	button { border:1px solid; background-color:var(--color-text); color:var(--color-text-light); padding:.2rem .5rem; display:block; margin:0 0 0 auto; }
	button[disabled] { background-color:lightgrey; color:var(--color-text-light); }
}
.scorecard-form {
	fieldset { padding:0 1rem 1rem; margin-bottom:1rem;
		legend { font-weight:550; }
		& > div { display:flex; gap:.5rem; margin-top:0; }
			label { flex-grow:1; }
			input { margin-top:.8rem; }
	}
}
.scorecard-table {
	.result { background:var(--color-brand); color:var(--color-text); }
	.scorecard-suggestion {
		p { margin-top:0; }
	}
}

.footnotes { font-size:80%;
	hr { display:none; }
}

.modal-meta {
	#modal-content { margin-top:3rem;
		& > * + * { margin-top:1rem; }
		li { margin-left:1rem; padding-left:.5rem; }
		ul li { list-style:disc; }
		ol li { list-style:decimal; }
	}
}

jf-panopto { display:block; background:var(--color-bg-box); position:relative; text-align:left; width:100%;
	.placeholder { position:relative;
		img { width:100%; max-width:100%; border:1px solid var(--color-text); opacity:.3; }
		& > a, & > button { position:absolute; bottom:calc(33% + 1.5rem); text-decoration:none; background:var(--color-text); color:var(--color-bg); padding:.5rem 1rem .5rem 2.5rem; line-height:1;
			strong { font-weight:normal; text-decoration:underline; text-decoration-style:dashed; text-align:center; display:block; text-underline-offset:3px; text-decoration-color:var(--color-text-light-underline); }
			span { margin-top:0 !important; font-size:var(--font-size-smaller); }
			svg { display:block; position:absolute; top:-.25rem; height:1.5rem; width:1.5rem; left:.5rem; background:var(--color-text); color:var(--color-bg-highlight); }
		}
		& > a { right:1rem; }
		& > button { left:1rem; text-align:center; }
		.cookienote { position:absolute; bottom:1px; left:1px; right:1px; padding:.2rem .5rem; font-size:var(--font-size-smaller); color:var(--color-text-underline); background:var(--color-bg); text-align:center; }
		&.embedded { position:relative; width:100%; height:0; padding-bottom:56.25%;
			iframe { border:1px solid #464646; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; }
		}
	}
	& > span { display:block; padding:0 1rem 1rem; font-style:italic; line-height:var(--line-height); }
}