/* Shared by the checker and the course pages: Among the Stones look. */
/* Among the Stones look: Noto Serif body, bold uppercase Noto Sans headings,
   italic uppercase small text, dotted rules, one yellow mark. */
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("fonts/NotoNaskhArabic.ttf"); font-display: swap; }

:root {
  --bg: #fff; --text: #222; --head: #111; --muted: #6b6b6b; --field: #fafafa;
  --rule: #111; --rule-row: #ddd; --highlight: #F4E28A; --on-highlight: #111; --err: #9b1c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1914; --text: #d4d4d4; --head: #e8e8e8; --muted: #aaa; --field: #24201a;
    --rule: #555; --rule-row: #3a3a3a; --err: #f2b8b5; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 100%/1.6 "Noto Serif", Georgia, serif; }
@media (min-width: 37.5em) { body { font-size: 1.125em; } }
main { max-width: 40rem; margin: 0 auto; padding-block: 1rem 1rem;
       padding-left: max(16px, env(safe-area-inset-left, 0px));
       padding-right: max(16px, env(safe-area-inset-right, 0px)); }

header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.site-title { font: 700 1.375em/1.2 "Noto Sans", Arial, sans-serif; letter-spacing: 2px;
              text-transform: uppercase; color: var(--head); margin: 0; }
mark { background: var(--highlight); color: var(--on-highlight); padding: .05em .05em; border-radius: 5px; }
.small { font: italic 400 .8125em/1.4 "Noto Sans", Arial, sans-serif; text-transform: uppercase;
         letter-spacing: .02em; color: var(--muted); }

/* Button groups and the site menu */
.seg { display: inline-flex; gap: 1rem; }
.seg button { border: 0; background: none; padding: .15em 0; cursor: pointer; color: var(--muted);
              font: 700 .875em "Noto Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px;
              border-bottom: 2px solid transparent; }
.seg button[aria-pressed="true"] { color: var(--head); border-bottom-color: var(--head); }
.seg.minor button { font-size: .75em; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }

nav.modes { margin: .35rem 0 .4rem; }

/* Site menu: links styled like the button groups */
nav.modes a { color: var(--muted); text-decoration: none; padding: .15em 0;
              font: 700 .75em "Noto Sans", Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px;
              border-bottom: 2px solid transparent; }
nav.modes a[aria-current="page"] { color: var(--head); border-bottom-color: var(--head); }
nav.modes a:hover, .seg button:hover { color: var(--head); }
.site-title a { color: inherit; text-decoration: none; }
.intro { font-style: italic; font-size: .875em; line-height: 1.45; margin: .3rem 0 .1rem; }