/* dxld markdown stylesheet
 *
 * Copyright (c) 2024 Daniel Gröber <dxld@darkboxed.org>
 * SPDX-License-Identifier: MIT
 */

/* responsive font scaling
 *
 * design intent: respect user settings for body text but harmoniously
 * scale other typographic elements using viewport size.
 */
html {
    /* scaling limits:
       small viewport; large viewport */
    --sv: 370; --lv: 1000; /*[px]*/
    /* note: the akward way we do the math comes from the fact that mul/div
       must have one unitless operand. */

    --user-em: 16; /* correction factor to mul 1px by to get the user's
		      default font size. TODO: update using js */

    /* viewport factor. range: [0px, 1px] */
    --vf: clamp(0px, var(--vf-lin), 1px);
    --vf-lin: calc((100vw - var(--sv)*1px) / ((var(--lv) - var(--sv))));
}

/* for css calc() math debugging: */
/* h1 { font-size: calc(1rem + 1px ) !important; } */

/* define our modular scale */
html {
    --scale: 1.2;
    /* note: can't make --scale depend on --vf as that would yield [px]*[px]
     * below, which is invalid. bummer. instead we fiddle with the base
     * (--s0).
     *
     * this does disconnect the relationship between body text and other
     * measurments based on the modscale, but the compromise seems to work
     * out ok visually.
   */

    --s0: calc((.9rem + .6*var(--vf)*var(--user-em)));
    --s-1: calc(1rem  / var(--scale));
    --s-2: calc(var(--s-1) / var(--scale));
    --s-3: calc(var(--s-2) / var(--scale));
    --s-4: calc(var(--s-3) / var(--scale));
    --s-5: calc(var(--s-4) / var(--scale));
    --s-6: calc(var(--s-5) / var(--scale));
    --s1: calc(var(--s0) * var(--scale));
    --s2: calc(var(--s1) * var(--scale));
    --s3: calc(var(--s2) * var(--scale));
    --s4: calc(var(--s3) * var(--scale));
    --s5: calc(var(--s4) * var(--scale));
    --s6: calc(var(--s5) * var(--scale));

    /* Note: font-size: calc(100%) evaluates based on affected element's
     * inherited font-size, not variable definition site. especially when
     * 100% comes from a variable. */
}

h1 { width: 95%; }
h1 { letter-spacing: .25em; }

h1    { font-size: var(--s2); } /* same size as h2 due to centering */
h2    { font-size: var(--s2); }
h3    { font-size: var(--s1); }
h4    { font-size: 1rem; }
h5    {  }
h6    {  }
p     { font-size: 1rem; }
small, sup { font-size: var(--s-2); }
h1 > small { font-size: var(--s-2); } /* subheading */

/* center heading */
h1 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* align subheading */
h1 > small {
    text-align: right;
    display: block;
    letter-spacing: 0;
}


/*** fonts ***/
body {
    font-family: sans-serif;
    line-height: 1.2;
}
body > p,
body > pre,
ol, ul {
    padding-inline-start: 2ch; padding-left: 2ch; /* modern; fallback */
}
h1, h2, h3 { font-weight: inherit; }
h4, h5, h6 { font-weight: bold; }

h1 { line-height: 1.1; }
h2 { line-height: 1.2; }
h3, h4, h5, h6 { line-height: 1.3; }

h1, h2, h3, h4, h5, h6 {
    font-family: monospace;

    /* indent a bit if header text wraps */
    /* text-indent: -1rem; */
    /* padding-left: 1rem; */ /*TODO: padding or margin better?*/
}
h4 {
    font-weight: bold;
}

/*** spacing ***/
/* See https://imperavi.com/books/ui-typography/elements/headings */
h1, h2, h3, h4 {
    margin-top: 1.25lh;
    margin-bottom: unset; /* 1rlh; */ /* override browser stylesheet */
}
:is(h1, h2, h3, h4, h5, h6) + * {
    margin-top: .75lh;
}

:is(h1, h2, h3, h4, h5, h6) p { margin-top: unset; }
:not(li) > :is(p, pre) { margin-left: 2ch; } /* careful about <p> in <ul> */
table { margin-left: 2ch; }

/* links page needs multiple <p>s in <ul> and consequently more inter item
   spacing for readability */
article li {
    margin-top: 1.25lh;
}

/* code blocks */
pre, code {
    font-family: monospace;
}
pre {
    padding: 1em;
    line-height: 1.2;
    overflow-x: auto;
    max-width: 95%;
}

* { box-sizing: border-box; } /*< saner default */
html { margin: 0; padding: 0; }
body {
    margin: 0 auto 1em;
    --body-padding: .5rem;
    padding: var(--body-padding); /*< all round */

    min-height: 80vh; /*< breathing space when little content */
    max-width: 45rem;
}


/* heading link anchor eyecandy */
:is(h1, h2, h3, h4, h5, h6) > a:empty { /*< only empty anchor link, not regular link */
    opacity: 0;
    text-decoration-line: none;
}
:is(h1, h2, h3, h4, h5, h6):hover > a { opacity: 1; }
:is(h1, h2, h3, h4, h5, h6) > a:empty:before {
    font-size: 80%;
    content: "§" / "";
    padding-right: .4em;
    margin-left: -1em;
}


/* navigation, highlight current page */
nav { font-family: monospace; }
nav a[href$="#"] {
    color: var(--link-current) !important; } /* TODO: visited color overrides this. figure out specificity to do it without important. */
nav a[href$="#"]:before { content: "["; }
nav a[href$="#"]:after { content: "]"; }
nav a[href="glossary.html"]:active:after { content: "ck"; }
/* TODO: "#" jumps, "" reloads */

nav ul[show-in] { display: none; }

/* navigation, display */
nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
nav { min-height: 2lh; } /*< landing heading spacing equal to subnav pages */

nav ul > li + li::before {
  display: inline-block;
  margin: 0 .25em;
  content: "·";
}

img, canvas, video, svg,
iframe, select, textarea {
    max-width: 100%;
}

/* link cards */
body { container-type: inline-size; }
strong > a {
    font-weight: normal;

    display: inline-block;
    margin: .3em -2ch .3em 2ch; /* spacing, overriden by :only-of-type below */

    /* border  */
    padding: .5em; border-radius: .5em; border: .15em solid;
}
strong:only-of-type > a {
    margin: .3em 0 .3em 0; /* spacing */
}
@container (width < 43.5rem) {
    strong > a {
	display: block;
	margin-left: auto; margin-right: auto;
	max-width: 35ch;
	width: fit-content;
    }
}

.jen { /* Jen must have a special place in all our stylesheets. */
    font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive, sans-serif;
}


/* Decoration */
.TODO:before {
    color: red;
    content: "●" / "TODO: ";
}

.DONE:before {
    color: lightgreen;
    content: "●" / "DONE: ";
}

.WARN:before {
    color: gold;
    content: "●" / "WARN: ";
}
.WIP:before {
    color: gold;
    content: "●" / "WIP: ";
}

.THX:before {
    color: orangered;
    content: "♥︎";
}

:is(.TODO, .DONE, .WARN, .THX):before {
    margin-right: .2ch;
}


/* Details box for implementation status */
li > details summary {
    list-style: none;
}
li > details:not([open]) summary::after {
    content: " ▸ (details)";
    color: var(--text-2);
}
li > details[open] summary::after {
    content: " ▾";
}
li > details[open] summary::-webkit-details-marker { display: none }

/* footer */
/* TODO: color to separate from main body */
.footer {
    margin-top: 1em;
}

/*@@ colors @@*/
/*@@ delimits region to hardcode into SVGs for colors */
:root {
    --swatch-1:  oklch(85%   0.09 60);
    --swatch-2:  oklch(90%   0.2  35);
    --swatch-3:  oklch(90%   0.3 35);
    --swatch-4:  oklch(86%   0.32 35); /* TODO: reports of eye strain,
                                          reduce saturation!*/
    --swatch-5:  oklch(77%   0.31 35);
    --swatch-6:  oklch(51%   0.2  35);
    --swatch-7:  oklch(39.5% 0.16 35);
    --swatch-8:  oklch(26%   0.08 35);
    --swatch-9:  oklch(20%   0.08 35);
    --swatch-10: oklch(12%   0.1  35);
}

:root { color-scheme: dark light; }
:root {
    --text-1:    var(--swatch-1);
    --text-2:    var(--swatch-2);
    --link-vist: var(--swatch-3);
    --link:      var(--swatch-4);
    --link-current: oklch(90% 0.20 92);
    --surface-code: oklch(26% 0.08 31.58);
    --surface-2:    oklab(0.16 0.03 0.01); /* oklab(0.2 0.04 0.02); */       /* oklch(26% 0.08 31.58) */ /* var(--swatch-8) */;
    --surface-1:    oklch(12% 0.10 31.58) /* var(--swatch-10) */;
}

/* Light color theme */
/* Still broken on safari mobile. Symptom: SVGs have light theme bg
   color in dark mode. Looks OK tho so screw it. */
@media (not (prefers-color-scheme: dark)) {
    :root { /* :not(:has(body > #theme-override:checked)) */
        --lhue: 104;
        --text-1:    oklch(30%  0.5 var(--lhue));
        --text-2:    oklch(10%  .10 var(--lhue));
        --link:      oklch(52% 0.2123 31);
        --link-vist: oklch(51% 0.19 38);
        --link-current: oklch(30% 0.135 38.04);
        --surface-code: var(--surface-2);
        --surface-2: var(--swatch-1);
        --surface-1: var(--swatch-2);
    }
}

svg, svg a {
    color: var(--text-2);
    background-color: var(--surface-1);
}
/*** colors ***/


body { position: relative; }
label[for=theme-override] {
    position: absolute;
    top: var(--body-padding);
    right: var(--body-padding);
    bottom: unset; left: unset;
}

body:has(#theme-override:checked) {
    color-scheme: dark only;
}

.swatches {
    display: flex;
    padding: 1rem;
    background-color: white;
}
.swatches span {
    padding: 1rem;
    margin: 0;
    font-family: monospace;
}

html a { color: var(--link) }
html a[href]:visited { color: var(--link-vist); }
/*^ [href] for equispecificity as below */
i > a,
a[href*="wikipedia.org"],
a[href*="datatracker.ietf.org"],
a[href*="glossary.html#"],
a[href*="links.html#"]
{
    /* Reference style link */
    color: var(--text-2);
    text-decoration: underline dotted 1px;
}

html { background-color: var(--surface-2); }
body {
    background-color: var(--surface-1); /*background*/
    color: var(--text-1);
}


pre:not(.inline)  { background-color: var(--surface-code); }
p > code { background-color: var(--surface-code); }

/* Quotes */
q { quotes: none; } /*< See https://github.com/whatwg/html/issues/10216 */
blockquote {
    border-left: 3px solid grey;
    margin-left: 4ch;
    padding-left: 1ch;
}

/* URL target */
:target {
    scroll-margin-top: 1.5rem;
}

:target:not(a) { border: 2px solid orange; padding: 4px; }
:target:before { content: "==> "; }

/* TODO:
  - Firefox jumps to top on reload (sometimes?). Chromium is off by a pixel
    or so on every reload which is fun but harmless :)

  - blog article style using font graphics
*/