/* The wiki: a contents column and the page being read.

   READING WIDTH IS THE WHOLE POINT OF THE LAYOUT. Prose set across a full
   desktop window is unreadable however good it is, so the page column is
   capped near the sixty to eighty characters people actually read at. */

/* ONE COLUMN FIRST, TWO WHEN THERE IS ROOM. The tree comes before the page in
   the markup, so a narrow window reads as contents then page with no reordering,
   and the same markup becomes a sidebar the moment the window can hold one.
   48rem is the width a tablet held upright reports, so a tablet gets the
   sidebar and a phone does not. */
.wiki-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-large);
    align-items: start;
}

@media (min-width: 48rem) {
    .wiki-layout {
        grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    }
}

@media (min-width: 64rem) {
    .wiki-layout {
        grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   The contents
   -------------------------------------------------------------------------- */

.wiki-contents {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}

/* Stays put beside the page while the page scrolls, and scrolls within itself
   when the tree is taller than the window. Only once there is a sidebar to stay
   put in: on a phone it is the top of the document and sticking is meaningless. */
@media (min-width: 48rem) {
    .wiki-contents {
        position: sticky;

        /* Below the header, which is the only thing above it that stays put. */
        top: var(--space-small);

        max-height: calc(100vh - var(--space-large) * 2);
        overflow-y: auto;
    }
}

.wiki-search {
    display: flex;
    gap: var(--space-extra-small);
}

.wiki-search__field {
    flex: 1 1 auto;
    min-width: 0;

    padding: 0.4rem 0.6rem;

    font: inherit;
    color: var(--colour-text-primary);
    background-color: var(--colour-input-background);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-small);
}

.wiki-contents__result-count {
    margin: 0;
    font-size: 0.8rem;
    color: var(--colour-text-secondary);
}

/* -----------------------------------------------------------------------------
   The tree

   A <details> per branch rather than a button and a class to toggle. The browser
   already knows how to open one, reach it from the keyboard and announce whether
   it is open, and a wiki whose contents collapse only when a script has loaded
   would be a worse wiki than one that never collapsed at all.
   -------------------------------------------------------------------------- */

.wiki-contents__group {
    margin: 0;
}

.wiki-contents__section {
    display: flex;
    align-items: center;
    gap: 0.4rem;

    margin: var(--space-small) 0 0.2rem;
    padding: 0.15rem 0;

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--colour-text-secondary);

    cursor: pointer;

    /* The default marker is a filled triangle that no other control on the site
       uses, and it cannot be moved or coloured. Ours is drawn below. */
    list-style: none;
}

.wiki-contents__section::-webkit-details-marker {
    display: none;
}

.wiki-contents__section:hover {
    color: var(--colour-text-primary);
}

/* Drawn from two borders rather than a character, so it needs no font to be
   present and turns with the branch rather than being swapped for a second
   glyph. */
.wiki-contents__section::before {
    content: "";

    flex: 0 0 auto;
    width: 0.36rem;
    height: 0.36rem;
    margin-left: 0.15rem;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(-45deg);
    transform-origin: 60% 60%;
    transition: transform 0.15s ease;
}

.wiki-contents__group[open] > .wiki-contents__section::before {
    transform: rotate(45deg);
}

.wiki-contents__list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    /* Indented against the branch above by a rule rather than by space alone,
       so which pages belong to which section survives a long list. */
    margin-left: 0.45rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--colour-border);
}

.wiki-contents__link {
    display: block;
    padding: 0.3rem 0.5rem;

    font-size: 0.88rem;
    color: var(--colour-text-primary);
    text-decoration: none;

    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.wiki-contents__link:hover {
    background-color: var(--colour-card-background);
    text-decoration: none;
}

/* The page being read. A left edge rather than a fill, so a long contents list
   does not become a column of blocks. */
.wiki-contents__link--current {
    font-weight: 600;
    color: var(--colour-accent);
    border-left-color: var(--colour-accent);
    background-color: var(--colour-card-background);
}

/* The third level: the headings of the page being read. Quieter than the pages
   above them, because they are a way back to a place on a page already open
   rather than somewhere else to go. */
.wiki-contents__headings {
    list-style: none;

    margin: 0.1rem 0 0.3rem 0.35rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--colour-border);

    display: flex;
    flex-direction: column;
}

.wiki-contents__heading-link {
    display: block;
    padding: 0.18rem 0.4rem;

    font-size: 0.8rem;
    color: var(--colour-text-secondary);
    text-decoration: none;

    border-radius: var(--radius-small);
}

.wiki-contents__heading-link:hover {
    color: var(--colour-text-primary);
    background-color: var(--colour-card-background);
    text-decoration: none;
}

.wiki-contents__actions {
    margin-top: var(--space-small);
}

/* -----------------------------------------------------------------------------
   The page
   -------------------------------------------------------------------------- */

.wiki-page {
    /* See the file summary: prose needs a line length, not a window width. */
    max-width: 52rem;
}

.wiki-page__header {
    margin-bottom: var(--space-medium);
    padding-bottom: var(--space-small);
    border-bottom: 1px solid var(--colour-border);
}

.wiki-page__title {
    margin: 0;
    font-family: var(--font-family-heading);
    color: var(--colour-heading-text);
}

.wiki-page__summary {
    margin: 0.3rem 0 0;
    color: var(--colour-text-secondary);
}

.wiki-page__provenance {
    display: flex;
    align-items: center;
    gap: var(--space-small);
    flex-wrap: wrap;

    margin-top: var(--space-small);
    font-size: 0.8rem;
}

/* -----------------------------------------------------------------------------
   Rendered Markdown
      Everything here is written by renderMarkdown() in the wiki module, which
      emits a fixed and very small set of tags. See markdown.php.
   -------------------------------------------------------------------------- */

.wiki-page__body {
    line-height: 1.65;
}

.wiki-page__body > :first-child {
    margin-top: 0;
}

.wiki-heading {
    margin: var(--space-large) 0 var(--space-small);
    font-family: var(--font-family-heading);
    color: var(--colour-heading-text);
}

.wiki-page__body h2.wiki-heading {
    padding-top: var(--space-small);
    border-top: 1px solid var(--colour-border);
}

.wiki-list {
    margin: var(--space-small) 0;
    padding-left: 1.4rem;
}

.wiki-list li {
    margin-bottom: 0.3rem;
}

.wiki-quote {
    margin: var(--space-medium) 0;
    padding: var(--space-small) var(--space-medium);

    color: var(--colour-text-secondary);
    border-left: 3px solid var(--colour-accent);
    background-color: var(--colour-page-background);
}

.wiki-rule {
    margin: var(--space-large) 0;
    border: 0;
    border-top: 1px solid var(--colour-border);
}

.wiki-table {
    margin: var(--space-medium) 0;
}

/* Inline code inside prose, which is most of what this wiki contains. */
.wiki-page__body code {
    padding: 0.1rem 0.3rem;

    font-size: 0.88em;
    background-color: var(--colour-page-background);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-small);
}

/* A fenced block already has its own box, so the inline treatment would give it
   a second border inside the first. */
.wiki-page__body pre.code-block code {
    padding: 0;
    background: none;
    border: 0;
}

/* -----------------------------------------------------------------------------
   Writing a page
   -------------------------------------------------------------------------- */

.wiki-editor {
    /* Markdown is written in columns, and a proportional font makes a table or
       an indented block impossible to line up by eye. */
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    font-size: 0.86rem;
    line-height: 1.55;
    resize: vertical;
}