/* meta.css - Stylesheet for my knowledgebase.
 * Author: Tristan Williams.
 * License: MIT
 */


/* ------------------------------------------------------------------ */
/* FONTS
 */

@font-face {
    font-family: "OpenMoji";
    src: url("meta.fonts/OpenMoji-color-glyf_colr_0.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+200D, U+20E3, U+FE0F, U+2190-21FF, U+2300-23FF, U+2460-24FF, U+25A0-27BF, U+2B00-2BFF, U+1F000-1F1FF, U+1F200-1F6FF, U+1F900-1FAFF;
}

@font-face {
    font-family: "JetBrains Mono";
    font-weight: 400;
    font-style: normal;
    src: url("meta.fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-weight: 700;
    font-style: normal;
    src: url("meta.fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-weight: 400;
    font-style: italic;
    src: url("meta.fonts/JetBrainsMono-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-weight: 700;
    font-style: italic;
    src: url("meta.fonts/JetBrainsMono-BoldItalic.woff2") format("woff2");
}

@font-face {
    font-family: "EB Garamond";
    src: url("meta.fonts/EBGaramond-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    size-adjust: 125%;
}

@font-face {
    font-family: "Texturina";
    src: url("meta.fonts/Texturina-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 200 300 400 500 600 700 800 900;
    font-style: normal;
    font-display: swap;
    size-adjust: 125%;
}

@font-face {
    font-family: "Texturina";
    src: url("meta.fonts/Texturina-Italic-VariableFont_opsz,wght.ttf") format("truetype");
    font-weight: 100 200 300 400 500 600 700 800 900;
    font-style: italic;
    font-display: swap;
    size-adjust: 125%;
}


/* ------------------------------------------------------------------ */
/* TOKENS
 */

:root {
    /* backgrounds */
    --bg: #0a0900;
    --bg0: #0c0b00;
    --bg1: #0f0d02;
    --bg2: #110f02;
    --bg3: #141103;
    --bg4: #161303;
    --bg5: #181404;

    /* foregrounds */
    --fg: #c6a57b;
    --fg-mid: #96805f;
    --fg-dim: #66553f;

    /* selection */
    --selection: #d81;

    /* links */
    --link-bib: #9a5;
    --link-int: #fb4;
    --link-ext: #7ba5c6;
    --link-ext-seen: #3f5566;
    --link-mailto: #8ba5f6;

    /* description lists */
    --bg-dict: #100b0c;
    --fg-dict: #ffa7c0;

    /* code and status */
    --bg-code: #0b1407;
    --fg-code: #5d9f13;
    --bg-todo: #140b07;
    --fg-todo: #d11;
    --bg-trans: #200b03;
    --fg-trans: #b76800;

    /* warnings and tips */
    --bg-warn: #a22;
    --fg-warn: white;
    --bg-tip: #1e1e04;
    --fg-tip: #ee2;

    /* fonts */
    --font-mono: "OpenMoji", "JetBrains Mono", monospace;
    --font-proportional: "OpenMoji", "Texturina", serif;
    --columns: 120ch;
    --columns-block: 75%;

    /* shadows */
    --shadow-content: 2px 4px 4px #000;
    --shadow-struct: 4px 8px 8px #000;

    /* glow */
    --fg-glow: color-mix(in oklab, currentColor, white 40%);
    --glow: 0px 0px 1px color-mix(in oklab, currentColor, white 6%),
            0px 0px 2px color-mix(in oklab, currentColor, white 12%),
            0px 0px 7px color-mix(in oklab, currentColor, white 25%),
            0px 0px 35px color-mix(in oklab, currentColor, white 50%);
}


/* ------------------------------------------------------------------ */
/* ANIMATIONS
 */

@keyframes target-flash {
    from {
        background-color: var(--fg-glow);
        color: color-mix(in oklab, currentColor, black 75%);
    }
    to {
        background-color: transparent;
        color: currentColor;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    };
    25% {
        opacity: 1;
    }
}


/* ------------------------------------------------------------------ */
/* DOCUMENT
 */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    background-color: var(--bg);
}

body {
    font-family: var(--font-proportional);
    font-size: 1rem;
    line-height: 1.5;
    max-width: calc(var(--columns) + 2.5rem);
    padding: 2.5rem 1.25rem 0.5rem;
    margin: 5rem auto 5rem;
    background-color: var(--bg);
    color: var(--fg);
    overflow-wrap: break-word;
}

::selection {
    background-color: var(--selection);
    color: var(--bg);
}


/* ------------------------------------------------------------------ */
/* ELEMENTS
 */

/* --- headings --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    text-transform: uppercase;
}

h1.title {
    font-family: var(--font-proportional);
    font-size: 3rem;
    text-align: center;
    margin: 0;
}

p.subtitle {
    text-transform: uppercase;
    margin: 0;
    color: var(--fg-mid);
    font-size: 2rem;
    text-align: center;
}

/* --- text --- */

p {
    margin: 1em 0;
    text-align: justify;
}

b {
    color: var(--fg-glow);
    text-shadow: var(--glow);
}

.underline {
    text-decoration: underline;
}

blockquote {
    margin: 0 1.5em 0;
    padding-left: 1em;
    border-left: 5px solid var(--fg-dim);
    font-style: italic;
}

p.verse {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--columns-block);
    text-align: center;
    font-style: italic;
}

hr {
    margin: 2.5em 0 0;
    border: 1px solid var(--fg-dim);
}

/* --- lists --- */

ul, ol {
    padding-left: 2ch;
}

ul {
    list-style-type: square;
}

/* --- dictionary entries --- */

.term {
    color: var(--fg-dict);
    font-weight: 700;
}

dl {
    position: relative;
    border: 2px solid var(--fg-dict);
    color: var(--fg-dict);
    background-color: var(--bg-dict);
    box-shadow: var(--shadow-content);
    padding: 1em;
    max-width: var(--columns-block);
    margin-left: auto;
    margin-right: auto;
}

dl::before {
    content: "🧠";
}

dt {
    font-weight: 800;
}

dt:not(.on, .off, .trans) {
    padding-left: 1ch;
}

dt.on, dt.off, dt.trans {
    margin-left: -1ch;
}

dd {
    margin-left: 3ch;
}

dd:not(:last-of-type) {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 2px solid var(--fg-dict);
}

dd p {
    margin-top: 0;
}

dd p:last-of-type {
    margin-bottom: 0;
}

/* --- code --- */

code, pre, .example {
    font-family: var(--font-mono);
    padding: 0 0.2em 0;
}

code {
    color: var(--fg-code);
    background-color: var(--bg-code);
    border: 1px solid var(--fg-code);
    box-shadow: var(--shadow-content);
}

p code,
li code {
    white-space: nowrap;
}

pre {
    border: 2px solid var(--fg-code);
    background-color: var(--bg-code);
    box-shadow: var(--shadow-content);
    overflow-x: auto;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
}

pre code {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

pre code .linenr {
    display: inline-block;
    background-image: linear-gradient(var(--fg-code), var(--fg-code));
    background-size: calc(110% - 1ch) 100%;
    background-repeat: no-repeat;
    color: var(--bg-code);
    font-weight: bolder;
    text-align: right;
    margin-left: -0.5em;
    padding-left: 0.5em;
    user-select: none;
}

p a.coderef {
    background-color: var(--fg-code);
    color: var(--bg-code);
}

p a.coderef::before {
    content: "";
    padding-left: 0.5em;
}

.code-highlighted {
    background-color: var(--fg-code);
    color: var(--bg-code);
}

pre[class*="src-"] {
    position: relative;
}
pre[class*="src-"]::before {
    position: absolute;
    top: 0; right: 0;
    font-size: 75%;
    font-weight: bolder;
    padding: 0 0.5em;
    color: var(--bg);
    background-color: var(--fg-code);
    user-select: none;
    background-repeat: no-repeat;
    background-position: 0.5em center;
    background-size: 1.25em;
    padding-left: 2em;
}

pre.src.src-css::before {
    content: "CSS";
    background-image: url(soft.css.logo.png);
}

pre.src.src-ebnf::before {
    content: "EBNF";
    background-image: url(entity.w3c.logo.png);
}

pre.src.src-elisp::before,
pre.src.src-emacs-lisp::before {
    content: "Emacs Lisp";
    background-image: url(soft.emacs.logo.png);
}

pre.example {
    background-color: var(--bg);
    border-color: var(--fg-dim);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

pre:has(> code):has(+ pre.example),
.org-src-container:has(+ pre.example) > pre {
    margin-bottom: 4px;
}

pre:has(> code) + pre.example,
.org-src-container + pre.example {
    margin-top: 0;
    background-color: var(--bg-code);
}

label.org-src-name {
    margin-left: auto;
    margin-right: auto;
}

/* --- media --- */

img {
    width: 50%;
    height: auto;
    border: 2px solid var(--fg-dim);
    box-shadow: var(--shadow-content);
}

figure {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

figcaption {
    font-family: var(--font-mono);
    text-align: center;
}

/* --- tables --- */

table {
    margin: 0 auto 0.5em;
    border: 2px solid var(--fg-mid);
    border-collapse: collapse;
    background-color: var(--bg);
    box-shadow: var(--shadow-content);
    font-size: 90%;
}

th, td {
    font-family: var(--font-mono);
    border: 2px solid var(--fg-mid);
    padding: 0 1em 0;
}

th {
    background-color: var(--fg-mid);
    color: var(--bg);
}

.org-left   { text-align: left; }
.org-right  { text-align: right; }
.org-center { text-align: center; }

/* --- warnings and tips ---  */

.WARNING, .TIP {
    font-family: var(--font-mono);
    position: relative;
    border: 2px solid currentColor;
    box-shadow: var(--shadow-content);
    padding: 1em;
    max-width: var(--columns-block);
    margin: 1em auto;
}

.WARNING {
    color: var(--fg-warn);
    background-color: var(--bg-warn);
    border-width: 3px;
}

.TIP {
    color: var(--fg-tip);
    background-color: var(--bg-tip);
}

.WARNING > :first-child,
.TIP > :first-child {
    margin-top: 0;
}

.WARNING > :last-child,
.TIP > :last-child {
    margin-bottom: 0;
}

.WARNING::before {
    content: "🛑";
    animation: blink 1.5s steps(1, end) infinite;
}

.TIP::before { content: "💡"; }

/* --- asides --- */

aside, .ASIDE {
    color: var(--fg-dim);
    font-size: 90%;
    max-width: 50%;
    margin: 1.5em 0 1.5em auto;
    padding-right: 1em;
    text-align: right;
}

/* math */

table.ltx_eqn_table,
table.ltx_eqn_table td {
    border: none;
    background: none;
    box-shadow: none;
    padding-bottom: 1em;
}

.ltx_eqn_table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.ltx_eqn_row { display: table-row; }
.ltx_eqn_cell { display: table-cell; width: auto; }

.ltx_align_left { text-align: left; }
.ltx_align_right { text-align: right; }
.ltx_align_center { text-align: center; }
.ltx_align_baseline { vertical-align: baseline; }

.ltx_td.ltx_align_left,
.ltx_td.ltx_align_right,
.ltx_td.ltx_align_center { white-space: nowrap; }

.ltx_eqn_center_padleft,
.ltx_eqn_center_padright { width: 50%; min-width: 2em; }


/* ------------------------------------------------------------------ */
/* RECIPES
 */

/* --- panel --- */

.outline-2, .outline-3, .outline-4, .outline-5, .outline-6,
#table-of-contents, #footnotes, #postamble {
    border: 2px solid var(--fg-dim);
    border-left-width: 4px;
    background-color: var(--bg1);
    box-shadow: var(--shadow-struct);
}

.outline-2, .outline-3, .outline-4, .outline-5, .outline-6 {
    padding: 0 0.5em 0.5em 2ch;
}

#table-of-contents, #footnotes, #postamble {
    padding: 0.5em 0.5em 0.5em 2ch;
}

/* --- chip --- */

.tag span, .timestamp, .todo, .done, .priority {
    font-family: var(--font-mono);
    font-size: 90%;
    padding: 0 0.5em;
    border: 2px solid #000;
    box-shadow: var(--shadow-content);
    color: var(--bg);
    background-color: var(--fg-mid);
}

/* icon beside block */
dl::before,
.WARNING::before,
.TIP::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    margin-right: 0.4em;
    line-height: 1;
    font-size: 500%;
    user-select: none;
    pointer-events: none;
}


/* ------------------------------------------------------------------ */
/* STRUCTURE
 */

/* --- header --- */

header {
    margin: 0 0 2em;
}

/* --- sections --- */

.outline-2 {
    margin: 2em 0;
}

.outline-3, .outline-4, .outline-5, .outline-6 {
    margin: 2em 0 0.5em;
}

.outline-3 { background-color: var(--bg2); }
.outline-4 { background-color: var(--bg3); }
.outline-5 { background-color: var(--bg4); }
.outline-6 { background-color: var(--bg5); }

.outline-2 h2,
.outline-3 h3,
.outline-4 h4,
.outline-5 h5,
.outline-6 h6 {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* --- table of contents --- */

#table-of-contents {
    margin: 5em 0 2em;
    border-right-width: 1px;
    border-bottom-width: 1px;
}

#table-of-contents h2 {
    margin: 0;
}

#table-of-contents ul {
    list-style: none;
}

/* --- footnotes --- */

#footnotes {
    margin-bottom: 2em;
}

.footpara {
    margin-top: 0;
}

/* --- postamble --- */

#postamble {
    margin-bottom: 0.5em;
}


/* ------------------------------------------------------------------ */
/* LINKS
 */

/* --- external --- */

a {
    font-family: var(--font-mono);
    color: var(--bg);
    background-color: var(--link-ext);
    border: 2px solid #000;
    box-shadow: var(--shadow-content);
    padding: 0 1ch 0 0.1em;
    font-weight: bolder;
    text-decoration: none;
    white-space: nowrap;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    background-color: var(--link-ext-seen);
}

a[href*="://"]::before {
    content: "🌎 ";
    color: #000;
}

/* --- internal --- */

a:not([href*="://"]) {
    background-color: var(--link-int);
}

a:not([href*="://"])::before {
    content: "📙 ";
    color: #000;
}

/* --- mailto --- */

a[href^="mailto"] {
    background-color: var(--link-mailto);
}

a[href^="mailto"]::before {
    content: "📨 ";
    color: #000;
}

/* --- bibliography --- */

a[href*="citeproc_bib_item"] {
    background-color: var(--link-bib);
    color: var(--bg);
    margin-left: 0;
    margin-right: 0;
}

a[href*="citeproc_bib_item"]::before {
    content: "📘 ";
    color: #000;
}

.csl-entry {
    margin-bottom: 1em;
}

/* --- unstyled --- */

#table-of-contents a,
.csl-entry a[id] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
}

#table-of-contents a { color: var(--link-int); }
.csl-entry a[id]     { color: var(--link-ext); }

.csl-entry a[id]::before {
    content: "📘 ";
    color: #000;
}

#table-of-contents a::before,
#footnotes a::before,
a.footref::before {
    content: none;
}

a.footref, a.footnum {
    padding-right: 0.25em;
    padding-left: 0.25em;
}

a.footref {
    font-size: 75%;
}

/* target */

[id] {
    scroll-margin-top: 45vh;
}

:target {
    animation: target-flash 2s ease-out;
}


/* ------------------------------------------------------------------ */
/* INLINE
 */

/* --- tags --- */

.tag {
    margin-left: auto;
}

/* --- timestamps --- */

.timestamp {
    font-weight: bolder;
    margin: 0 0.5em;
}

.timestamp::before {
    content: "📅 ";
}

p:has(> .timestamp-wrapper) {
    font-family: var(--font-mono);
    margin-top: -1em;
}

/* --- keywords --- */

.todo, .done, .priority {
    background-color: var(--fg);
    border-color: currentColor;
    color: var(--fg-todo);
}

.done,
.done + .priority {
    color: var(--fg-code);
}

.todo.INPROGRESS, .todo.ONGOING, .todo.RECUR, .todo.READING,
.todo.INPROGRESS + .priority, .todo.ONGOING + .priority,
.todo.RECUR + .priority, .todo.READING + .priority {
    color: var(--fg-trans);
}

h2 code, h3 code, h4 code, h5 code, h6 code {
    color: currentColor;
    background-color: var(--bg);
    border-color: currentColor;
}

p a code {
    display: inline-block;
    font-size: 75%;
    margin-bottom: 5em;
}

/* --- status --- */

ul:has(> li.on, > li.off, > li.trans) {
    list-style: none;
}

li.on,    dt.on,    dt.on + dd    { color: var(--fg-code); }
li.off,   dt.off,   dt.off + dd   { color: var(--fg-todo); }
li.trans, dt.trans, dt.trans + dd { color: var(--fg-trans); }

dt.off + dd {
    text-decoration: line-through;
}

li.off > code,
li.trans > code {
    color: inherit;
    border-color: currentColor;
    background-color: var(--bg-todo);
}

/* --- redactions --- */

.redact {
    display: inline-block;
    background-color: #000;
    color: #000;
    padding: 0.08em 0.35em;
    margin: 0 -0.15em;
    border-radius: 3px 1px 4px 2px / 2px 4px 1px 3px;
    transform: rotate(-0.4deg);
}

.redact:nth-of-type(4n+1) { padding-right: 0.55em; }
.redact:nth-of-type(4n+2) { padding-left: 0.5em; }
.redact:nth-of-type(4n+3) { padding-right: 0.45em; }
.redact:nth-of-type(4n)   { padding: 0.1em 0.3em 0.06em 0.5em; }

.redact:nth-of-type(5n+1) { transform: rotate(-0.8deg); }
.redact:nth-of-type(5n+2) { transform: rotate(1deg); }
.redact:nth-of-type(5n+3) { transform: rotate(-0.4deg) skewX(-3deg); }
.redact:nth-of-type(5n+4) { transform: rotate(0.6deg) skewX(4deg); }
.redact:nth-of-type(5n)   { transform: rotate(-1.2deg); }

.redact::selection {
    background-color: black;
    color: black;
}