/* ==========================================================
 *  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;
}

.game-library .game-series > h3 {

    margin: 0 0 .5rem;

    padding: 0;

    border-left: none;

}

/*
 *  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);
}


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

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

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


/* ==========================================================
 *  Game Library — eza-style Tree
 *  ========================================================== */

.game-library {
    --tree-indent: 2rem;
    --tree-line: var(--border-strong);

    position: relative;

    margin-top: 1rem;
    padding-left: 0;
}


/* ----------------------------------------------------------
 *  The ONE continuous library trunk
 *  ---------------------------------------------------------- */

.game-library::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3.25rem;
    bottom: 0;

    width: 1px;

    background: var(--tree-line);
}


/* ----------------------------------------------------------
 *  Library heading
 *  ---------------------------------------------------------- */

.game-library > h2 {
    position: relative;
    z-index: 1;

    margin-bottom: 1rem;

    background: var(--panel);
}


/* ----------------------------------------------------------
 *  Series
 *  ---------------------------------------------------------- */

.game-library .game-series {
    position: relative;

    margin: 0;
    padding: 0 0 0 var(--tree-indent);

    border: none;
}


/* ----------------------------------------------------------
 *  Series name
 *  ---------------------------------------------------------- */

.game-library .game-series > h3 {
    position: relative;

    margin: 0;
    padding: .15rem 0;

    color: var(--text);

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

    border: none;
}


/* Series branch */

.game-library .game-series > h3::before {
    content: "├──";

    position: absolute;

    left: calc(-1 * var(--tree-indent));
    top: .15rem;

    width: var(--tree-indent);

    color: var(--tree-line);

    white-space: pre;
}


/* Last series uses └── */

.game-library .game-series:last-of-type > h3::before {
    content: "└──";
}


/* ----------------------------------------------------------
 *  Games
 *  ---------------------------------------------------------- */

.game-library .game {
    position: relative;

    margin: 0;
    padding: 0 0 0 var(--tree-indent);

    border: none;
}


/*
 *  Game-level vertical trunk.
 *
 *  This belongs to the series' children, not the library.
 */

.game-library .game:first-of-type::after {
    content: "";

    position: absolute;

    left: calc(-1 * var(--tree-indent) + 1px);
    top: .9rem;
    bottom: 0;

    width: 1px;

    background: var(--tree-line);
}


/*
 *  Game branch.
 */

.game-library .game::before {
    content: "├──";

    position: absolute;

    left: calc(-1 * var(--tree-indent));
    top: .15rem;

    width: var(--tree-indent);

    color: var(--tree-line);

    white-space: pre;
}


/* Last game uses └── */

.game-library .game:last-of-type::before {
    content: "└──";
}


/*
 *  Keep the child trunk continuous between games.
 *
 *  The vertical line is drawn by every game except the last.
 */

.game-library .game:not(:last-of-type)::after {
    content: "";

    position: absolute;

    left: calc(-1 * var(--tree-indent) + 1px);
    top: .9rem;
    bottom: 0;

    width: 1px;

    background: var(--tree-line);
}


/* ----------------------------------------------------------
 *  Game details
 *  ---------------------------------------------------------- */

.game-library .game-details {
    margin: 0;
    padding: 0;

    border: none;
}


/* ----------------------------------------------------------
 *  Game title
 *  ---------------------------------------------------------- */

.game-library .game-details summary {
    list-style: none;

    cursor: pointer;

    margin: 0;
    padding: .15rem 0;

    color: var(--cyan);

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

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

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

.game-library .game-details summary:hover {
    color: var(--pink);
}


/* ----------------------------------------------------------
 *  Metadata
 *  ---------------------------------------------------------- */

/*
 *  Metadata is treated as another tree level.
 *
 *  No box.
 *  No blockquote panel.
 *  Every field gets its own branch.
 */

.game-library .game-details > blockquote {
    position: relative;

    margin: .15rem 0 .5rem;
    padding: .05rem 0 .05rem var(--tree-indent);

    color: var(--text);

    background: transparent;

    border: none;
}


/*
 *  Metadata vertical trunk.
 */

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

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 1px;

    background: var(--tree-line);
}


/*
 *  Each metadata line becomes a tree branch.
 *
 *  This assumes the metadata is represented by separate
 *  paragraphs inside the blockquote.
 */

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

    margin: 0;
    padding: .15rem 0 .15rem var(--tree-indent);
}


/*
 *  Metadata branch connector.
 */

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

    position: absolute;

    left: 0;
    top: .15rem;

    width: var(--tree-indent);

    color: var(--tree-line);

    white-space: pre;
}


/*
 *  Last metadata field gets └──.
 */

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


/* ----------------------------------------------------------
 *  Metadata colours
 *  ---------------------------------------------------------- */

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


/* ----------------------------------------------------------
 *  Remove the old blockquote appearance completely
 *  ---------------------------------------------------------- */

.game-library .game-details > blockquote code {
    background: transparent;
}