/* OpenSheaf site styles, on top of the website's notes-base.css and
   theme.css (whose variables they use). */

/* The look of notes-meta.ts on the web, where the HTML export leaves fonts
   and colours to the stylesheets: the base stylesheet's column, margins and
   spacing, headings in the serif of the text in bold (font sizes are
   those of the base stylesheet), and a palette
   on a single hue (blue, 213 degrees): shades from a lightly tinted paper to
   deep ink, for text, headings, links, bullets and code. Every pair meets WCAG AA (text
   about 13:1, links about 8:1, secondary text at least 5:1). */
h1, h2, h3, h4, h5, h6 { font-weight: 700; }

:root {
    --title-family: var(--main-family);
    --color-background: #f8fafc;
    --color-surface: #edf1f5;
    --color-border: #cfd8e2;
    --color-text: #212a36;
    --color-title: #1c3554;
    --color-link: #265082;
    --os-visited: #476385;
    --color-muted: #5e6a78;
    --color-secondary: #5e6a78;
    --os-code-bg: #eef2f6;
    --os-code-border: #cfd8e2;
    --os-heading: #1c3554;
    --os-heading-2: #2d4e76;
    --os-marker: #4375b1;
    --os-rule: #5e88ba;
    --os-chip: #e9eef3;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #151b23;
        --color-surface: #1f2730;
        --color-border: #343f4b;
        --color-text: #d4dbe2;
        --color-title: #b8cfea;
        --color-link: #96bbe9;
        --os-visited: #9fb5d1;
        --color-muted: #929daa;
        --color-secondary: #929daa;
        --os-code-bg: #1e252f;
        --os-code-border: #343f4b;
        --os-heading: #b8cfea;
        --os-heading-2: #a3bcdc;
        --os-marker: #79a4d8;
        --os-rule: #5480b6;
        --os-chip: #212933;
    }
}
:root[data-theme="dark"] {
    --color-background: #151b23;
    --color-surface: #1f2730;
    --color-border: #343f4b;
    --color-text: #d4dbe2;
    --color-title: #b8cfea;
    --color-link: #96bbe9;
    --os-visited: #9fb5d1;
    --color-muted: #929daa;
    --color-secondary: #929daa;
    --os-code-bg: #1e252f;
    --os-code-border: #343f4b;
    --os-heading: #b8cfea;
    --os-heading-2: #a3bcdc;
    --os-marker: #79a4d8;
    --os-rule: #5480b6;
    --os-chip: #212933;
}
@media print {
    :root, :root[data-theme] {
        --color-background: #fff !important;
        --color-text: #000 !important;
        --color-title: #000 !important;
        --color-link: #000 !important;
        --os-visited: #000 !important;
        --color-muted: #333 !important;
        --color-secondary: #333 !important;
        --os-code-bg: #fff !important;
        --os-code-border: #999 !important;
        --os-heading: #000 !important;
        --os-heading-2: #000 !important;
        --os-marker: #000 !important;
        --os-rule: #666 !important;
        --os-chip: #fff !important;
    }
}

/* Code in the ink of the text; syntax colours (highlight.js, for blocks
   with a language) in shades of the same blue, every token at least 4.5:1
   on the code background: commands and keywords deep and bold, keys and
   names medium, strings lighter, numbers and literals lighter still,
   comments grey and italic. */
pre, code, .hljs {
    color: inherit;
    background: transparent;
}
:root {
    --os-hl-command: #1c3554;
    --os-hl-key: #2d4e76;
    --os-hl-string: #2f5f95;
    --os-hl-number: #3c6aa3;
    --os-hl-comment: #5e6a78;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --os-hl-command: #b8cfea;
        --os-hl-key: #a3bcdc;
        --os-hl-string: #96bbe9;
        --os-hl-number: #79a4d8;
        --os-hl-comment: #929daa;
    }
}
:root[data-theme="dark"] {
    --os-hl-command: #b8cfea;
    --os-hl-key: #a3bcdc;
    --os-hl-string: #96bbe9;
    --os-hl-number: #79a4d8;
    --os-hl-comment: #929daa;
}
@media print {
    :root, :root[data-theme] {
        --os-hl-command: #000 !important;
        --os-hl-key: #000 !important;
        --os-hl-string: #000 !important;
        --os-hl-number: #000 !important;
        --os-hl-comment: #444 !important;
    }
}
.hljs * { color: inherit; background: transparent; }
.hljs .hljs-built_in, .hljs .hljs-keyword, .hljs .hljs-selector-tag,
.hljs .hljs-section, .hljs .hljs-title {
    color: var(--os-hl-command);
    font-weight: 600;
}
.hljs .hljs-attr, .hljs .hljs-name, .hljs .hljs-variable,
.hljs .hljs-template-variable, .hljs .hljs-params {
    color: var(--os-hl-key);
}
.hljs .hljs-string, .hljs .hljs-subst, .hljs .hljs-regexp {
    color: var(--os-hl-string);
}
.hljs .hljs-number, .hljs .hljs-literal, .hljs .hljs-symbol,
.hljs .hljs-bullet, .hljs .hljs-meta {
    color: var(--os-hl-number);
}
.hljs .hljs-comment, .hljs .hljs-quote {
    color: var(--os-hl-comment);
    font-style: italic;
}

/* The logo is drawn in black on a transparent background: no image
   background (the site gives images a white one on the dark theme), and
   inverted on the dark theme. */
img[src$="opensheaf-logo.svg"] {
    background-color: transparent !important;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img[src$="opensheaf-logo.svg"] {
        filter: invert(1);
    }
}
:root[data-theme="dark"] img[src$="opensheaf-logo.svg"] {
    filter: invert(1);
}

/* Links in the accent colour, and underlined (the base stylesheet only
   underlines them on hover), so that they never rely on colour alone. */
a:link, a:visited {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.15em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
a:visited {
    color: var(--os-visited);
}
a:hover, a:focus {
    text-decoration-color: currentColor;
}

/* Code blocks (the specification's JSON examples) stand apart from the
   text on a slightly cooler paper with a thin rule. TeXmacs wraps them in
   div.tmweb-code, which highlight.js also styles. */
div.tmweb-code, div.tmweb-code.hljs {
    background: var(--os-code-bg);
    border: 1px solid var(--os-code-border);
    border-radius: 4px;
    padding: 0.6em 0.9em;
    margin: 0.6em 0;
    overflow-x: auto;
}
div.tmweb-code pre.verbatim {
    margin: 0;
    padding: 0;
}

/* A heading present for screen readers and search engines but not shown
   (the home page's title, whose visible form is the logo). */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Structure in shades of the same blue: deep for headings and the run-in
   bold labels of the specification ("Numbering."), medium for list bullets
   and the rule beside the abstract. Links keep their own
   navy and their underline. */
h1, h2 { color: var(--os-heading); }
h3, h4, h5, h6 { color: var(--os-heading-2); }
strong, b { color: var(--os-heading); font-weight: 600; }
a strong, a b { color: inherit; }
li::marker { color: var(--os-marker); }
.notes-abstract {
    border-left: 3px solid var(--os-rule);
    padding-left: 0.9em;
    margin: 1em 0 1.4em;
}
/* Inline verbatim (file names, JSON fields) on a faint chip. */
tt.verbatim {
    background: var(--os-chip);
    border-radius: 3px;
    padding: 0 0.25em;
}
div.tmweb-code tt.verbatim, pre tt.verbatim { background: transparent; padding: 0; }

/* The theme button (resources/theme.js): the half-lit circle of the base
   theme, as one button that switches between light and dark. */
.theme-control .theme-toggle {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.theme-control .theme-toggle::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
.theme-control .theme-toggle:hover {
    color: var(--color-text);
    background: var(--color-surface);
}
.theme-control .theme-toggle:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

/* Less room above the page header: the base stylesheet pads the page by
   3em at the top. */
@media screen {
    body { padding-top: 2em; }
}

/* The theme button floats at the top right corner of the window, above the
   page, and stays there while scrolling; it takes no room in the page. On
   the paper of the page, so that it stays legible over the text below. */
.theme-control {
    position: fixed;
    top: 0.6rem;
    right: 0.8rem;
    z-index: 10;
    margin: 0;
}
.theme-control .theme-toggle {
    width: 34px;
    height: 34px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Alert boxes (GitHub's > [!WARNING] in the Markdown sources). */
div.os-alert {
  border: 1px solid #e3b55f; border-left: 5px solid #d08a1c;
  background: #fff7e8; color: #3a2a0f;
  padding: 0.7em 1em; margin: 1.2em 0; border-radius: 4px;
}
div.os-alert.os-note { border-color: #9cc0e8; border-left-color: #2f6db5; background: #eef5fd; color: #1c3554; }
div.os-alert .os-alert-label { font-weight: bold; color: #8a4b00; }
div.os-alert.os-note .os-alert-label { color: #1c3554; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) div.os-alert { background: #2d2412; color: #f1e3c4; border-color: #8a6420; border-left-color: #d08a1c; }
  :root:not([data-theme="light"]) div.os-alert .os-alert-label { color: #f0b45a; }
}
:root[data-theme="dark"] div.os-alert { background: #2d2412; color: #f1e3c4; border-color: #8a6420; border-left-color: #d08a1c; }
:root[data-theme="dark"] div.os-alert .os-alert-label { color: #f0b45a; }

/* Tables from the Markdown sources: the first row is the header. */
.tmweb-body table tr:first-child td, body table tr:first-child td { font-weight: bold; }
body table td { padding: 0.3em 0.5em; }