/* Grammar styles */
:root {
    /* sizes */
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));    /* 0.131rem */
    --s-4: calc(var(--s-3) / var(--ratio));    /* 0.198rem */
    --s-3: calc(var(--s-2) / var(--ratio));    /* 0.296rem */
    --s-2: calc(var(--s-1) / var(--ratio));    /* 0.444rem */
    --s-1: calc(var(--s0) / var(--ratio));     /* 0.667rem */
    --s0: 1rem;                                /* 1.000rem */
    --s1: calc(var(--s0) * var(--ratio));      /* 1.500rem */
    --s2: calc(var(--s1) * var(--ratio));      /* 2.250rem */
    --s3: calc(var(--s2) * var(--ratio));      /* 3.375rem */
    --s4: calc(var(--s3) * var(--ratio));      /* 5.063rem */
    --s5: calc(var(--s4) * var(--ratio));      /* 7.594rem */

    /* colors */
    --black: #161622;
    --white: #fefefe;
    --lightgrey: #f4f1fa;
 
    --ch: #d3daf9;
    --gr: #131462;
}

html {
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
}

/* centered blocks */
header, main, nav {
    box-sizing: content-box;
    max-width: 60rem;
    margin-inline: auto;
    padding-inline: var(--s0);
}

body {
    padding-inline: 0;
    margin-inline: 0;
    margin-block-start: 0;
    margin-block-end: var(--s5);

    background-color: var(--white);
    color: var(--black);
    font-family: sans-serif;
}

.ribbon {
    background-color: var(--gr);
}

nav {
    display: flex;
    align-items: center;
    margin-block: 0;
    color: var(--lightgrey);
    font-size: var(--s0);
    min-height: var(--s2);
}

nav a,
nav a:hover,
nav a:visited,
nav a:active {
    color: inherit;
    text-decoration: none;
}
nav a:active,
nav a:hover {
    color: var(--white);
}

nav a::before {
    content: "⬅︎";
    margin-inline-end: var(--s-2);
}

h1, h2, h3, h4, h5, h5 {
    font-family: sans-serif;
    line-height: 1.25;
}
h1 {
    font-size: var(--s2);
}
h2 {
    font-size: var(--s1);
}
h3, h4, h5, h6 {
    font-size: var(--s0);
}

/* TOC page */
ul.toc {
    list-style: none;
    font-family: sans-serif;
}

div > ul.toc {
    padding-left: 0;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}

tr:nth-child(odd) {
    background-color: var(--lightgrey);
}

tr:nth-child(even) {
    background-color: var(--white);
}

td {
    vertical-align: top;
    font-family: monospace;
    padding-inline: var(--s-3);
    padding-block: var(--s-2);
    font-size: var(--s0);
    max-width: min-content;
}

/* allow the right hand side to use up as much space as available */
td.rhs {
    width: 100%;
}

a {
    font-weight: normal;
}

/* distinguish EBNF syntax from literals */
.bracket, .paren, .occur, .choicePipe, .rangeDash,
.assign code {
    font-weight: bold;
    color: var(--gr);
}

/* reset font styles for literals */
.string, .char {
    font-weight: normal;
    color: var(--black);
}

/* the margin for brackets and parens is applied from their content */
.chars, .choices, .sequenceItems:has(~ .paren) {
    margin-inline: var(--s-2);
}

/* append caret to opening [ for inverted character class matches */
.complement > .charClass > .bracket.opening::after {
  content: "^";
}

/* having occurrence indicators in extra elements causes them to be placed on
   the next line in edge cases
 */
.optional::after,
.oneOrMore::after,
.zeroOrMore::after {
    font-weight: bold;
    color: var(--gr);
}
.optional::after {
  content: "?";
}
.oneOrMore::after {
  content: "+";
}
.zeroOrMore::after {
  content: "*";
}

/* keep these together in one line */
.charClass, .chars, .choices, .sequences {
    display: inline-block;
}
.charCodeRange {
    white-space: nowrap;
}
.string {
    word-break: keep-all;
}

/* display character codes as characters */
.ch {
    background-color: var(--ch);
    padding-inline: var(--s-2);
    padding-block: var(--s-4);
    border-radius: var(--s-4);
    user-select: none;
    -webkit-user-select: none;
}
/* hide them on grammar listings */
.grammar .ch {
    display: none;
}