/* ==========================================================
 *  PSU Planted — TUI Theme v3
 *  ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=IBM+Plex+Mono:wght@400;500&display=swap');


/* ==========================================================
 *  Variables
 *  ========================================================== */

:root {
    --body-max-width: 920px;

    /* Original palette */
    --bg: #1e2024;
    --panel: #25272d;
    --panel-alt: #292b31;

    --text: #e8e8ea;
    --muted: #969aa3;
    --dim: #626670;

    --lavender: #b99cff;
    --lavender-bright: #cbb7ff;
    --pink: #e6a8ff;

    --cyan: #87dfff;
    --amber: #ffca72;

    --border: #4a4d55;
    --border-strong: #626670;

    --mono: "Share Tech Mono", "IBM Plex Mono", monospace;
}


/* ==========================================================
 *  Base
 *  ========================================================== */

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

html {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    line-height: 1.6;
}

body {
    max-width: var(--body-max-width);
    min-height: calc(100vh - 3rem);

    margin: 1.5rem auto;
    padding: 0;

    background: var(--panel);

    border: 1px solid var(--border-strong);

    color: var(--text);
}

article {
    padding-bottom: 1rem;
}

footer {
    display: none;
}


/* ==========================================================
 *  Site Frame
 *  ========================================================== */

header {
    margin: 0;
    padding: 1rem 1.25rem .9rem;

    border-bottom: 1px solid var(--border-strong);

    background: var(--panel);
}

main {
    padding: 1rem 1.25rem 2rem;
}


/* ==========================================================
 *  Site Header
 *  ========================================================== */

header h1 {
    margin: 0;

    color: var(--text);

    font-family: var(--mono);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: .04em;

    text-align: left;
}

header h1::before {
    content: "> ";
    color: var(--lavender);
}

header p {
    margin: .1rem 0 .65rem;

    color: var(--muted);

    font-family: var(--mono);
    font-size: .9rem;

    text-align: left;
}


/* ==========================================================
 *  Navigation
 *  ========================================================== */

header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 0;

    /*
     *  Prose can put literal "|" characters between links.
     *  font-size: 0 hides those text nodes while the links
     *  restore their own font size.
     */
    font-size: 0;

    text-align: center;
}

header nav a {
    display: inline-block;

    padding: .15rem .35rem;

    color: var(--muted);

    font-family: var(--mono);
    font-size: .9rem;
    text-decoration: none;

    transition:
    color .12s ease,
    background .12s ease;
}

header nav a::before {
    content: "[";

    color: var(--border-strong);
}

header nav a::after {
    content: "]";

    color: var(--border-strong);
}

header nav a:hover {
    color: var(--lavender-bright);

    background: rgba(185, 156, 255, .06);
}

header nav a:hover::before,
header nav a:hover::after {
    color: var(--lavender);
}


/* ==========================================================
 *  Typography
 *  ========================================================== */

p,
li {
    color: var(--text);
}

strong {
    color: var(--amber);
}

code,
pre {
    font-family: var(--mono);
}

.md {
    font-family: var(--mono);
}


/* ==========================================================
 *  Markdown Headings
 *  ========================================================== */

/*
 *  Do not change the Markdown heading hierarchy just for CSS.
 *
 *  h1 = real Markdown "# Heading"
 *  h2 = major section
 *  h3 = subsection
 *  h4 = minor subsection
 *
 *  The prose page title is generated separately by prose.sh.
 */

.md h1 {
    margin: .5rem 0 1rem;
    padding: .1rem 0 .1rem .75rem;

    color: var(--lavender-bright);

    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: .025em;

    border-left: 2px solid var(--lavender);
}


/*
 *  Major section heading
 */

.md h2 {
    margin: 2.25rem 0 .9rem;
    padding: .1rem 0 .1rem .7rem;

    color: var(--lavender-bright);

    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: .025em;

    border-left: 2px solid var(--lavender);

    text-align: left;
}


/*
 *  Subsection
 */

.md h3 {
    margin: 1.5rem 0 .7rem;
    padding: .05rem 0 .05rem .65rem;

    color: var(--text);

    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 400;

    border-left: 2px solid var(--border-strong);

    text-align: left;
}


/*
 *  Minor subsection
 */

.md h4 {
    margin: 1rem 0 .35rem;

    color: var(--text);

    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 400;
}

.md h4:hover {
    color: var(--cyan);
}

/*
 *  Hardware type labels
 *
 *  Bold-only paragraphs immediately following an h3
 *  act as labels for the hardware entries below them.
 */

.md h4 + p:has(> strong:only-child) {
    margin-top: 1.25rem;
    margin-bottom: 0;

    color: var(--amber);
    font-family: var(--mono);
    font-weight: 500;
}

.md p:has(> strong:only-child) + h4 {
    margin-top: .4rem;
}


/* ==========================================================
 *  Heading Anchors
 *  ========================================================== */

.anchor {
    visibility: hidden;

    color: var(--dim);
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
    visibility: visible;
}


/* ==========================================================
 *  Links
 *  ========================================================== */

a {
    color: var(--lavender);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: color .12s ease;
}

a:visited {
    color: var(--lavender);
}

a:hover {
    color: var(--pink);
}


/* ==========================================================
 *  Horizontal Rules
 *  ========================================================== */

hr {
    height: 1px;

    margin: 1.25rem 0;

    border: none;
    border-top: 1px solid var(--border);
}

.md > hr:first-of-type {
    margin-top: .5rem;
    margin-bottom: 1rem;
    border-top-color: var(--dim);
}


/* ==========================================================
 *  Blockquotes
 *  ========================================================== */

blockquote {
    margin: 1rem 0;
    padding: .65rem .9rem;

    background: var(--panel-alt);

    /*
     *  Normal blockquotes KEEP their purple line.
     */
    border-left: 2px solid var(--lavender);
}

blockquote strong {
    color: var(--amber);
}


/* ==========================================================
 *  Lists
 *  ========================================================== */

ul,
ol {
    padding-left: 1.35rem;
}

li {
    margin: .15rem 0;
}

li::marker {
    color: var(--lavender);
}


/* ==========================================================
 *  Details / Collapsible Sections
 *  ========================================================== */

details {
    margin: .5rem 0;

    padding-left: .7rem;

    border-left: 1px solid var(--border);
}

summary {
    cursor: pointer;

    padding: .15rem 0;

    color: var(--muted);

    font-family: var(--mono);

    transition: color .1s ease;
}

summary:hover {
    color: var(--lavender-bright);
}

details[open] {
    border-left-color: var(--border-strong);
}


/* ==========================================================
 *  Inline Code
 *  ========================================================== */

code {
    padding: .08rem .3rem;

    color: var(--amber);

    background: #202125;

    border: 1px solid var(--border);
    border-radius: 0;
}

pre {
    margin: 1rem 0;
    padding: .9rem 1rem;

    overflow-x: auto;

    color: var(--text);

    background: #202125;

    border: 1px solid var(--border);
    border-left: 2px solid var(--amber);
}


/* ==========================================================
 *  Tables
 *  ========================================================== */

table {
    width: fit-content !important;
    max-width: 100%;

    border-collapse: collapse;

    margin: 1rem 0;

    background: var(--panel-alt);

    border: 1px solid var(--border);
}

th,
td {
    padding: .45rem .7rem;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    text-align: left;
}

th:last-child,
td:last-child {
    border-right: none;
}

tr:last-child td {
    border-bottom: none;
}

th {
    color: var(--lavender-bright);

    font-family: var(--mono);
    font-weight: 400;

    background: rgba(185, 156, 255, .04);
}


/* ==========================================================
 *  Game Tree
 *  ========================================================== */

.game {
    position: relative;

    margin: 0;
    padding: 0 0 0 1.5rem;

    border-left: 1px solid var(--border);
}


/*
 *  The game anchor is invisible and does not affect layout.
 */

.game > a[id] {
    display: block;

    height: 0;
}


/*
 *  Draw the tree connector leading to the game.
 */

.game > details::before {
    content: "├──";

    position: absolute;
    left: -.05rem;
    top: .15rem;

    color: var(--dim);

    white-space: pre;
}


/*
 *  Game title
 *
 *  The <summary> is the clickable game node.
 */

.game > details {
    margin: 0;
    padding: 0;

    border: none;
}

.game > details > summary {
    display: block;

    margin: 0;
    padding: .15rem 0;

    color: var(--text);

    cursor: pointer;

    list-style: none;
}

.game > details > summary::-webkit-details-marker {
    display: none;
}

.game > details > summary::marker {
    display: none;
}

.game > details > summary:hover {
    color: var(--cyan);
}


/*
 *  Metadata tree
 */

.game > details[open] {
    padding-bottom: .35rem;
}

.game > details > blockquote {
    position: relative;

    margin: 0;
    padding: .1rem 0 .1rem 1.5rem;

    background: transparent;

    border: none;
}


/*
 *  Vertical line running alongside the metadata.
 */

.game > details > blockquote::before {
    content: "";

    position: absolute;
    left: .35rem;
    top: 0;
    bottom: 0;

    border-left: 1px solid var(--border);
}


/*
 *  Each metadata field is a separate tree node.
 */

.game > details > blockquote > p {
    position: relative;

    margin: 0;

    padding: .05rem 0;

    color: var(--muted);
}


/*
 *  Connector for each metadata field.
 */

.game > details > blockquote > p::before {
    content: "├──";

    position: absolute;
    left: -1.15rem;

    color: var(--dim);
}


/*
 *  Last metadata field gets the terminating branch.
 */

.game > details > blockquote > p:last-child::before {
    content: "└──";
}


/*
 *  Metadata labels
 */

.game > details > blockquote strong {
    color: var(--amber);
    font-weight: 400;
}


/*
 *  Empty metadata values remain visible.
 */

.game > details > blockquote > p:has(strong) {
    min-height: 1.6em;
}


/* ==========================================================
 *  Technical / Metadata Feel
 *  ========================================================== */

.md strong {
    color: var(--amber);
}

.md h1 strong,
.md h2 strong,
.md h3 strong,
.md h4 strong {
    color: inherit;
}


/* ==========================================================
 *  Homepage
 *  ========================================================== */

#blog header h1 {
text-align: center;
}

#blog main {
padding-top: 1rem;
}

#blog article {
padding-bottom: .5rem;
}

/* Remove the separator below the article description */
#post header hr {
display: none;
}

/*
 *  Homepage intro becomes an interface panel rather
 *  than a floating paragraph.
 */

#blog article > blockquote:first-child {
margin: 0 0 1.25rem;

padding: .7rem .9rem;

border: 1px solid var(--border);
border-left: 2px solid var(--lavender);

background: var(--panel-alt);
}

#blog article > hr {
margin: 1.25rem 0;
}


/* ==========================================================
 *  Homepage Post List
 *  ========================================================== */

#blog article > ul {
margin: 0;
padding: 0;

list-style: none;
}

#blog article > ul li {
display: flex;
align-items: baseline;

gap: 1rem;

margin: 0;
padding: .45rem .6rem;

border-left: 1px solid transparent;
}

#blog article > ul li:hover {
border-left-color: var(--lavender);

background: rgba(185, 156, 255, .035);
}

#blog article > ul li::marker {
display: none;
}

#blog article > ul li a {
text-decoration: none;
}


/* ==========================================================
 *  Selection
 *  ========================================================== */

::selection {
    color: #1e2024;
    background: var(--lavender);
}


/* ==========================================================
 *  Scrollbar
 *  ========================================================== */

html {
    scrollbar-width: thin;
    scrollbar-color: var(--lavender) transparent;
}


/* ==========================================================
 *  Responsive
 *  ========================================================== */

@media (max-width: 700px) {
    body {
        min-height: 100vh;

        margin: 0;

        border-left: none;
        border-right: none;
    }

    header,
    main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #blog article > ul li {
    display: block;
    }
}

@media (max-width: 480px) {
    header {
        padding-top: 1rem;
        padding-bottom: .85rem;
    }

    header h1 {
        font-size: 1.4rem;
    }

    header p {
        font-size: .8rem;
    }

    main {
        padding-top: 1rem;
    }

    .md h1 {
        font-size: 1.3rem;
    }

    .md h2 {
        font-size: 1.15rem;
    }

    .md h3 {
        font-size: 1rem;
    }

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}