/* Prototec Learning stylesheet, served at /style.
   Ported from the Go deploy/static/style.css, adapted to this port's markup
   (yellow page, bordered <fieldset>/<legend> sets, two-column answer grid). */

body {
	background: #ffd;
	text-align: center;
	font-family: "Comic Sans MS", sans-serif;
	font-size: 14pt;
	margin: 1rem;
}

/* Certificates are a full-page SVG; the Go version removes the page margin. */
body.cert,
body.cert svg {
	margin: 0;
	padding: 0;
}
body.cert svg {
	margin-bottom: .3em;
}

h1 {
	text-align: center;
	font-size: 24pt;
	margin: 10pt;
}

h2,
h3,
h4 {
	margin: 0;
	text-align: center;
}
h2 {
	font-size: 20pt;
}
h3 {
	font-size: 16pt;
}
h4 {
	font-size: 12pt;
}

a {
	color: #000;
}

.error {
	font-size: 14pt;
	font-weight: bold;
	color: red;
}

/* Challenge list (Go's <dl> of country/category headings and button rows). */
dl {
	display: inline-block;
	margin: 0;
}
dt {
	text-align: left;
	font-weight: bold;
	font-size: 16pt;
	margin-top: .6em;
}
dd {
	padding-left: 0;
	margin: .2em 0 .2em .5em;
}

/* Subject buttons on the home page and challenge buttons on topic pages. */
.button {
	display: inline-block;
}
/* Home-page subject tiles: the inlined SVG above the name. */
.subject {
	width: 90pt;
}
.subject svg {
	height: 90pt;
	width: auto;
}
button,
.button,
select,
input[type="submit"] {
	border-radius: 4pt;
	background: #eee;
	border: 1pt black solid;
	padding: .5em;
	text-decoration: none;
	font: inherit;
	margin: 0 0 .5em .5em;
}
button:first-child,
.ib button:first-child {
	margin-left: 0;
}
nav a {
	display: inline-block;
	margin: .3em;
	padding: 0;
	border: none;
	background: none;
	color: #000;
	text-decoration: none;
}
nav a p {
	margin: 0;
}

.ib {
	display: inline-block;
	margin-left: 1em;
}
.ib:first-child {
	margin-left: 0;
}

p,
div,
form {
	text-align: center;
}

/* One question set: a bordered box whose title sits in the border. The box
   grows to fit wide answers (e.g. the 70-character Māori big-number input) but
   never shrinks below the original 17em, so the prompt is not squeezed out. */
fieldset {
	display: inline-block;
	vertical-align: top;
	width: max-content;
	min-width: 17em;
	max-width: calc(100vw - 2em);
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	border: 1px solid #000;
	border-radius: 4pt;
	padding: 5pt;
	margin: 5pt;
}
legend {
	font-size: 16pt;
	font-weight: bold;
	padding: 0 .4em;
}
small {
	font-size: .65em;
}

/* Rows are two grid cells: prompt (right, ending in `=` where present) and
   answer, so prompts and answers line up down the sheet. */
ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* The prompt keeps its intrinsic width; the answer may shrink on a narrow
	   viewport (wide inputs get `max-width: 100%` below). */
	grid-template-columns: minmax(min-content, max-content) minmax(0, max-content);
	column-gap: .35em;
	justify-content: center;
	align-items: baseline;
}
li {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	align-items: baseline;
	margin: .15em 0;
}
li > :first-child {
	text-align: right;
}
li > :last-child {
	text-align: left;
}
li sup {
	font-size: inherit;
}

input {
	font: inherit;
	background: #fff;
	padding: .1em .3em;
}
/* `size` inputs are as wide as their character count; cap them at the set's
   width so a 70-character field still fits on a phone. */
input[size] {
	max-width: 100%;
	box-sizing: border-box;
}
input:focus {
	background: #ffc;
}
input[type="search"] {
	border-radius: 0;
}

/* MathML uses the browser's math font by default (a serif face), which does
   not inherit from <body>. Match the rest of the sheet. */
math,
math * {
	font-family: inherit;
}

/* Marking: the answer is bold; only the correction is red. */
li b {
	color: #080;
}
li b s {
	color: #000;
}
li b ins.bad {
	color: #c00;
	text-decoration: none;
}
/* MathML answers do not inherit the bold from the surrounding <b> in every
   browser; force it on the math element and its tokens. */
li b math,
li b math * {
	font-weight: bold;
}

table.info {
	display: inline-table;
	border: 1px black solid;
	border-radius: 4pt;
	margin: auto auto .6em auto;
	background: #fff;
	/* `separate` keeps the border radius; `collapse` squares the corners. */
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
table.info th {
	text-align: right;
	padding: .15em .5em;
}
table.info td {
	text-align: left;
	padding: .15em .5em;
}

/* Timed mode: one question at a time (see question.zig). The box matches Go's
   `div.timed`: white card, black border, and a large question. */
#timed {
	width: 31em;
	max-width: calc(100% - 2em);
	box-sizing: border-box;
	margin: 0 auto;
	padding: 5pt;
	background: #fff;
	border: 1px solid #000;
	border-radius: 4pt;
}
#timedTitle {
	font-size: 20pt;
	margin: 0 0 .3em 0;
}
#timed .timed-q {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: .4em;
	font-size: 40pt;
	line-height: 1.1;
	text-align: center;
	margin: .2em 0 0 0;
}
#timed .timed-q > :first-child,
#timed .timed-q > :last-child {
	text-align: center;
}
/* ID specificity beats `.hidden`, so hide timed rows explicitly. */
#timed .timed-q.hidden {
	display: none;
}
#timed input {
	font-size: 40pt;
}
#timed sup,
#timed sub {
	font-size: 50%;
}
.timed-q {
	list-style: none;
}
.hidden {
	display: none;
}

/* Science questions are full sentences: one per row, left aligned. */
body.science fieldset {
	width: 34em;
}
body.science ol {
	display: block;
	text-align: left;
}
body.science li {
	display: block;
	margin: .3em 0;
}
body.science li > :first-child,
body.science li > :last-child {
	text-align: left;
}

#footer {
	text-align: center;
	padding-top: 1em;
}
#c {
	font-family: Impact, "Comic Sans MS", sans-serif;
}
#fb {
	height: 14pt;
	vertical-align: middle;
}

body.about p,
body.about ul li {
	text-align: justify;
}

@media print {
	ins,
	iframe,
	.noprint {
		display: none !important;
	}
	body,
	html {
		margin: 0;
		padding: 0;
	}
}