/* SPDX-License-Identifier: MIT */
/* SPDX-FileCopyrightText: 2024-2026 Katalin Rebhan <me@dblsaiko.net> */
/* Adapted for kumardamani.net */

:root {
    --button-border: color-mix(in oklab, ButtonFace, CanvasText 10%);
    --extlink-icon: url('extlink.svg');

    /* base font size is 16px, which is 12pt */
    --font-size-px-mul: calc(1rem / 16);
    --font-size-pt-mul: calc(1rem / 12);

    /* fonts we use */
    --shell-ff: system-ui, ui-sans-serif, sans-serif;
    --shell-fs: 1rem;
    --shell-font: var(--shell-fs) var(--shell-ff);

    --body-ff: var(--shell-ff);
    --body-fs: 1rem;
    --body-font: var(--body-fs) var(--body-ff);

    --mono-ff: ui-monospace, monospace;
    --mono-fs: calc(13 * var(--font-size-px-mul)); /* according to Safari */
    --mono-font: var(--mono-fs) var(--mono-ff);

    /* some extra lengths */
    --elem-spacing: 0.5rem;
    --navbar-extra: 0.15rem;
    --border-size: 0.15rem;
    --text-skip: 0.2em;
}

@media not (pointer: coarse) {
    :root {
        /* on displays with a non-coarse pointer (i.e. desktop computers),
           shrink the shell font a bit because we can get away with it */
        --shell-fs: calc(10 * var(--font-size-pt-mul));
    }
}

html {
    max-width: 800px;
    height: min(100%, 600px);
    /* importantly, we never set font-size on the html element, so we can use
       rem later to refer to the browser's default which might be modified by
       the user. */
    font-family: var(--body-ff);
    display: flex;
    flex-direction: column;
    color-scheme: light dark;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    background: Canvas;
}

body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

pre, xmp, plaintext, listing, tt, code, kbd, samp {
    font: var(--mono-font);
}

header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    margin: 0 0 var(--elem-spacing) 0;
    font: var(--shell-font);
}

header > nav {
    display: flex;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    flex-grow: 1;
    overflow-x: auto;
    padding: 0 calc(var(--elem-spacing) + .1rem);
    border-bottom: var(--border-size) solid var(--button-border);
}

header > nav > ul {
    display: contents;
}

header > nav a:link {
    text-decoration: unset;
    color: unset;
}

header > nav a:visited {
    color: unset;
}

header > nav li {
    display: inline;
    padding: 0 calc(var(--elem-spacing) + var(--navbar-extra));
    margin: 0 calc(-1 * var(--navbar-extra));
}

header > nav li.current {
    background-color: ButtonFace;
    color: ButtonText;
}

header > nav li.hidden {
    font-style: italic;
}

.banner {
    font-size: 1.5em;
    font-weight: unset;
    margin: 0 var(--elem-spacing) 0 0;
}

main {
    flex-grow: 1;
    text-wrap-style: pretty;
}

main > :first-child {
    margin-top: 0;
}

main > :last-child {
    margin-bottom: 0;
}

hr {
    /* Fixes <hr> collapsing to width 0 inside of a flex container */
    margin-left: 0;
    margin-right: 0;
    align-self: stretch;

    /* Same style as navbar */
    border: 0;
    border-bottom: var(--border-size) solid var(--button-border);
}

pre {
    overflow: auto;
}

blockquote {
    display: block;
    margin-inline-start: var(--elem-spacing);
    margin-inline-end: 0;
    border-inline-start: var(--border-size) solid;
    padding-inline-start: var(--text-skip);
}

/* Safari does not like font-size: 1rem + clip-path mixed units (FB22092644).
   Hope we never have to combine both! */
.biglist > li .description > a.extlink::after {
    font-size: unset;
}

a.extlink::after {
    padding-right: 0.5em;
    color: CanvasText;
    background-color: currentcolor;
    mask: var(--extlink-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    clip-path: polygon(
        calc(50% - 0.25em) calc(50% - 0.25em),
        calc(50% + 0.25em) calc(50% - 0.25em),
        calc(50% + 0.25em) calc(50% + 0.25em),
        calc(50% - 0.25em) calc(50% + 0.25em)
    );
    content: "";
    vertical-align: super;
    line-height: 0;
    font-size: 1rem;
}

.biglist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
    padding: 0;
}

.biglist > li {
    display: block;
}

.biglist > li > h2 {
    float: left;
    margin: 0;
    font-size: unset;
}

.biglist > li > h2::after {
    color: GrayText;
    content: "—";
    font-weight: initial;
    margin: 0 var(--text-skip);
}

.biglist > li .description {
    display: inline;
    margin: 0;
}

.biglist > li .source {
    float: right;
    margin: 0;
}

.biglist > li .source::before {
    color: GrayText;
    content: "—";
    margin: 0 var(--text-skip);
}

article {
    hyphens: auto;
}

article > p, article > blockquote {
    text-align: justify;
}

article > :first-child {
    margin-top: 0;
}

article > :last-child {
    margin-bottom: 0;
}

article > nav li {
    display: contents;
}

article > nav ol {
    display: grid;
    column-gap: var(--text-skip);
    grid-template-columns: 0 1fr;
}

article > nav > ol {
    overflow: auto;
}

article > nav ol {
    grid-column: 2;
}

article > nav .prefix {
    user-select: none;
    grid-column: 1;
    justify-self: end;
}

article > nav a {
    grid-column: 2;
    justify-self: start;
}

footer {
    display: grid;
    /* equal flexible side tracks keep the middle track truly centered */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    font: var(--shell-font);
}

footer > .updated {
    grid-column: 2;
    text-align: center;
}

footer > .logs {
    grid-column: 3;
    justify-self: end;
}

@media (pointer: coarse) {
    /* on touch devices, stack the footer entries instead of squeezing
       the logs link into the narrow side track */
    footer {
        grid-template-columns: auto;
        justify-content: center;
        justify-items: center;
    }

    footer > .updated,
    footer > .logs {
        grid-column: 1;
        justify-self: center;
    }
}

footer > ul {
    display: contents;
}

footer > ul > li {
    display: inline;
    font: var(--shell-font);
}

footer > ul > li:not(:last-child)::after {
    color: GrayText;
    content: "—";
    font-weight: initial;
    margin: 0 var(--text-skip);
    padding: 0;
}

.motb {
    font-style: italic;
    color: GrayText;
    white-space: pre-wrap;
}

.tooltip {
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
}

th, td {
    padding: 0;
    border: 0 solid transparent;
    background-clip: padding-box;
}

tr > td + td {
    border-left-width: 1.5em;
}

tr + tr > td {
    border-top-width: 0.2em;
}

/* --- additions for kumardamani.net --- */

/* publication date under post titles */
.date {
    color: GrayText;
    font: var(--shell-font);
    margin-top: 0;
}

figure {
    margin: 1em 0;
    text-align: center;
}

figcaption {
    color: GrayText;
    margin-top: 0.3em;
}

img {
    max-width: 100%;
    height: auto;
}

p > img:only-child {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

pre {
    padding: 0.5em;
    border: 1px solid var(--button-border);
}

details {
    margin: 1em 0;
}

summary {
    cursor: pointer;
}