div.wait {
    width: 150px;
    height: 150px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    z-index: 10;
}

td {
    padding: 5px;
}

/* Footer with the links to the privacy statement and contact */
div.footer-links {
    padding: 1rem;
    font-size: 0.9rem;
}

div.footer-links a {
    color: inherit;
    text-decoration: underline;
}

/* Example views on the home page: page types (rows) by example trees (columns) */
div.examples {
    overflow-x: auto;  /* on narrow screens the matrix scrolls sideways instead of overflowing the page */
}

table.examples {
    margin: 0 auto;
}

table.examples th {
    color: inherit;
    font-weight: 600;
    line-height: 1.2;
    padding: 4px 6px;
    vertical-align: bottom;
}

table.examples th.view {
    text-align: right;
}

table.examples th.view {
    vertical-align: middle;
}

/* The tree columns all equally wide, so the icon columns are equally spaced; some room below the tree names */
table.examples th.tree {
    width: 7em;
    padding-bottom: 14px;
    text-align: center;
}

/* Phones: smaller text, narrower columns and two-line row labels, so the whole matrix fits the screen */
@media screen and (max-width: 600px) {
    table.examples {
        font-size: 0.8rem;
        width: 100%;
        table-layout: fixed;  /* the tree columns share the width left by the row labels equally */
    }

    table.examples th.tree {
        width: auto;
    }

    table.examples th:first-child {
        width: 4.8em;  /* the row labels (in two lines) */
    }

    table.examples th,
    table.examples td {
        padding: 3px 4px;
    }

    table.examples th.tree {
        padding-bottom: 10px;
    }

    span.phone-break {
        display: block;  /* the space between the words becomes a line break */
    }
}

table.examples td {
    padding: 4px 6px;
    text-align: center;
}

/* Home page: one box per publication, the name on the left and the buttons on the right (below it on phones) */
div.publication {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
}

div.publication .buttons {
    margin-bottom: 0;
}

span.publication-date {
    font-size: 0.85rem;
    color: #7a7a7a;
}

/* Home page for visitors: the introduction */
p.intro {
    max-width: 36rem;
    margin: 1.5rem auto;
}

/* Forms: the line below a form, e.g. "No account yet? Sign up" */
p.form-footer {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

/* Upload page: the selected files */
ul.selected-files {
    font-size: 0.85rem;
    list-style: disc;
    margin-left: 1.25rem;
}

/* The menu button (phones) in the same colour as the menu items, not Bulma's link colour */
a.navbar-burger {
    color: inherit;
}

/* Phones: slightly smaller buttons, so a publication's three buttons fit on one line */
@media screen and (max-width: 600px) {
    div.publication .button {
        font-size: 0.85rem;
        padding-left: 0.8em;
        padding-right: 0.8em;
    }
}

/* Home page: room between a message (e.g. "You have been logged out") and the title below it */
div.home-messages #notification {
    margin-bottom: 2.5rem;
}

/* Admin page: the users table, and a new temporary password (easy to select and copy) */
table.admin-users td {
    vertical-align: middle;
}

code.new-password {
    font-size: 1.1rem;
    padding: 0.2em 0.5em;
    user-select: all;
}

/* Admin page: the date column on one line, and the buttons stacked, so the publications get more room */
table.admin-users td.last-visit {
    white-space: nowrap;
}

table.admin-users .buttons {
    flex-direction: column;
    align-items: stretch;
}

table.admin-users .buttons form,
table.admin-users .buttons .button {
    width: 100%;
    margin-right: 0;
}

table.admin-users td:last-child {
    width: 10rem;  /* just the stacked buttons */
}

/* Signup: the field only bots fill in; off screen for people (and skipped by the keyboard and screen readers) */
div.form-trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}