/* Colors, from the app's theme (client/src/misc/theme.ts). Teal is the only brand color: in the app, indigo means a
   scheduling conflict, and red and yellow mean hard and soft requirements, so the guide keeps them for those. */
:root {
    --sl-hard: #d32f2f;
    --sl-soft: #ffa000;
    --sl-conflict: #273ba0;
    --sl-ink: #1f2a2e;
    --sl-paper: #ffffff;
    /* 4.3:1 on white, too faint for text; used for brand marks only */
    --sl-teal: #00897b;
    /* 6.6:1 on white: links, the active nav item and focus rings */
    --sl-teal-deep: #00695c;
    --sl-gridline: #dce5e3;
    --sl-period: #eef6f5;
}

:root > * {
    --md-primary-fg-color: var(--sl-teal);
    --md-primary-fg-color--light: #4db6ac;
    --md-primary-fg-color--dark: var(--sl-teal-deep);
    --md-accent-fg-color: var(--sl-teal-deep);
    --md-accent-fg-color--transparent: #00695c1a;
    --md-typeset-a-color: var(--sl-teal-deep);
    --md-default-fg-color: var(--sl-ink);
}

/* Header: white like the app's own top bar, with one gridline instead of the solid teal bar. */
.md-header {
    background-color: var(--sl-paper);
    color: var(--sl-ink);
    box-shadow: none;
    border-bottom: 1px solid var(--sl-gridline);
}

.md-header--shadow {
    box-shadow: none;
}

.md-search__form {
    background-color: var(--sl-period);
    border: 1px solid var(--sl-gridline);
}

.md-search__form:hover {
    background-color: var(--sl-period);
}

.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
    color: var(--sl-ink);
}

.md-search__input::placeholder {
    opacity: 0.65;
}

.md-source {
    color: var(--sl-teal-deep);
}

/* Wider pages, so screenshots have room. Prose stays at a readable measure (see below). */
.md-grid {
    max-width: 80rem;
}

/* Type: a 17px body and a clear step between heading levels. Sizes are in em of the body so they follow
   Material's root size, which grows on wide screens. */
.md-typeset {
    font-size: 0.85rem;
    line-height: 1.6;
}

.md-typeset h1 {
    font-size: 2.12em;
    font-weight: 700;
    color: var(--sl-ink);
}

.md-typeset h2 {
    font-size: 1.53em;
    font-weight: 700;
}

.md-typeset h3 {
    font-size: 1.24em;
    font-weight: 600;
}

.md-typeset h4 {
    font-size: 1em;
    font-weight: 700;
    margin-top: 1.6em;
}

/* Prose at about 68 characters a line; screenshots, side-by-side figures and tables use the full width. */
.md-typeset > p:not(:has(img)),
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4,
.md-typeset > .admonition,
.md-typeset > details {
    max-width: 68ch;
}

/* Heading spacing separates sections; the --- rules between them only add noise. */
.md-typeset hr {
    display: none;
}

/* Callouts: a tinted panel with a rule in the callout's color, at body size so tips and warnings aren't the smallest
   text on the page. */
.md-typeset .admonition,
.md-typeset details {
    font-size: 1em;
    background-color: var(--sl-period);
    border-width: 0 0 0 3px;
    border-radius: 4px;
    box-shadow: none;
}

/* Tables: smaller text, gridline rules and a tinted header row. Material already scrolls a wide table sideways. */
.md-typeset table:not([class]) {
    font-size: 0.88em;
    border: 1px solid var(--sl-gridline);
    border-radius: 6px;
    box-shadow: none;
}

.md-typeset table:not([class]) th {
    background-color: var(--sl-period);
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
    border-top: 1px solid var(--sl-gridline);
    padding: 0.7em 1em;
}

/* Screenshots: centered on their own line with a quiet frame, so a caption written on the next line starts below. */
.md-typeset img {
    display: block;
}

.md-typeset p img {
    margin: 0 auto;
    max-width: 100%;
    border: 1px solid var(--sl-gridline);
    border-radius: 6px;
}

.md-typeset img.medium {
    max-width: min(100%, 480px);
}

.md-typeset img.small {
    max-width: min(100%, 320px);
}

/* Variants of one thing, shown side by side. Wraps to a column on narrow screens. */
.md-typeset .figure-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
}

.md-typeset .figure-row > p {
    flex: 1 1 180px;
    max-width: 280px;
    margin: 0;
}

/* The caption is the text that shares the image's paragraph. */
.md-typeset p:has(img) {
    text-align: center;
    font-size: 0.88em;
    color: var(--md-default-fg-color--light);
}

.md-typeset p:has(img) strong {
    font-weight: 500;
    color: inherit;
}

/* Chips: a dot in the app's color beside the word for a hard requirement, a soft requirement or a scheduling conflict.
   The text keeps its usual color, so it stays readable whatever the dot's color. */
.md-typeset .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0 0.55em;
    border: 1px solid var(--sl-gridline);
    border-radius: 999px;
    white-space: nowrap;
}

.md-typeset .chip::before {
    content: '';
    width: 0.65em;
    height: 0.65em;
    border-radius: 50%;
    background-color: var(--chip-color);
}

.md-typeset .chip.hard {
    --chip-color: var(--sl-hard);
}

.md-typeset .chip.soft {
    --chip-color: var(--sl-soft);
}

.md-typeset .chip.conflict {
    --chip-color: var(--sl-conflict);
}

:focus-visible {
    outline: 2px solid var(--sl-teal-deep);
    outline-offset: 2px;
}