@charset "UTF-8";

/*==================================================
  Fonts (vendored from priime.dev)
==================================================*/

@font-face {
    font-family: "Inter";
    src: url("/~static/fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/~static/fonts/Inter-Italic-VariableFont_opsz,wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("/~static/fonts/CrimsonPro-VariableFont_wght.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("/~static/fonts/CrimsonPro-Italic-VariableFont_wght.woff2") format("woff2");
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

/*==================================================
  Design tokens
==================================================*/

:root {
    --bg: #f7f7f7;
    --text: #27272a;
    --text-strong: #18181b;
    --text-soft: #3f3f46;
    --muted: #71717a;
    --border: #dedede;
    --underline: #b4b4bb;
    --surface: #ffffff;
    --surface-2: #f0f0f0;
    --code-bg: #e9e9ec;
    --add-bg: #eef6f0;
    --add-fg: #1f6b32;
    --del-bg: #fbeeee;
    --del-fg: #9b2c2c;
    --focus: #2563eb;
    --radius: 0.25rem;
    --measure: 40rem;
    --measure-wide: 72rem;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

/*==================================================
  Base and layout
==================================================*/

* { box-sizing: border-box; }

html {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: subpixel-antialiased;
    color-scheme: light;
}

/* Preamble beside the content from 1280px, stacked above it below. Repository and admin pages
   (`body.wide`) are tables and code, so they get a wider page and column than prose. */
body {
    margin-inline: auto;
    margin-block: 3em 4em;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    font-size: 1.1em;
}

@media (width >= 1280px) {
    body { max-width: 80%; flex-direction: row; gap: 100px; }
    body.wide { max-width: 90%; gap: 72px; }
}

@media (width >= 1600px) {
    body { max-width: 60%; gap: 120px; }
    body.wide { max-width: 80%; gap: 96px; }
}

.content {
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--measure);
}

body.wide .content { max-width: var(--measure-wide); }

strong, b { font-weight: 550; }

a { color: var(--text); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: var(--bg); padding: .5rem .75rem; z-index: 10;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/*==================================================
  Preamble and navigation
==================================================*/

#preamble {
    display: flex;
    flex-direction: column;
    flex: none;
    max-width: 24rem;
    font-size: 0.9em;
}

.preamble-name {
    margin-block-start: 8px;
    color: var(--text-strong);
    font-size: 1.1em;
}

.preamble-summary {
    color: var(--text-soft);
    line-height: 1.3;
    margin-block: 0.6em 0;
}

.preamble-code {
    font-family: var(--mono);
    font-size: 1.2em;
    margin-block: 0.2em 1em;
}

#preamble a,
#preamble button.link {
    text-decoration: none;
    text-underline-offset: 4px;
}

#preamble a:hover,
#preamble button.link:hover,
#preamble [aria-current="page"] {
    text-decoration: underline;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nav-links a {
    color: var(--text-strong);
    font-weight: 550;
}

/* Inside a repository: its name, then its sections, stacked. */
.repo-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    margin-block-start: 1.25em;
}

.repo-links a { color: var(--muted); }
.repo-links a[aria-current="page"] { color: var(--text-strong); }

.repo-links .repo-name {
    font-family: var(--mono);
    font-weight: 550;
    color: var(--text-strong);
    margin-block-end: 0.15em;
}

.account-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-block-end: 1.1em;
    color: var(--muted);
}

.account-links a,
.account-links button.link { color: var(--muted); }
.account-links a.account-name { color: var(--text-soft); }

/*==================================================
  Content typography
==================================================*/

h1, h2, h3, h4 {
    font-family: "Crimson Pro", serif;
    font-weight: 550;
    color: var(--text-strong);
    text-wrap: balance;
}

.content h1 { font-size: 1.75em; line-height: 1.05; margin: 0 0 0.5em; }
.content h2 { font-size: 1.4em; line-height: 1.1; margin: 0 0 0.5em; }
.content h3 { font-size: 1.2em; line-height: 1.2; margin: 0 0 0.35em; }

.content h1.path {
    font-family: var(--mono);
    font-size: 1.15em;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.content p,
.content li {
    font-size: 0.9em;
    line-height: 1.75;
    text-wrap: pretty;
}

.content p { margin: 0 0 1em; }
.content li li, .content li p { font-size: 1em; }

.content a {
    text-decoration: underline;
    text-decoration-color: var(--underline);
    text-underline-offset: 2px;
}
.content a:hover { color: var(--text-strong); text-decoration-color: currentColor; }

.content code {
    font-family: var(--mono);
    font-size: 0.9em;
    background-color: var(--code-bg);
    border-radius: var(--radius);
    padding: 0 4px;
}

.content pre {
    background-color: var(--surface-2);
    border-radius: var(--radius);
    padding: 0.5em 0.75em;
    overflow-x: auto;
    margin: 1em 0;
}
.content pre code { background: transparent; padding: 0; }

.content :where(ul, ol) { padding-left: 1.2em; }

section + section { margin-top: 2.6em; }

.page-intro { margin-bottom: 2.2em; }
.page-intro > :last-child { margin-bottom: 0; }
.home-intro { margin-bottom: 2.8em; }
.lede { max-width: 34rem; }
.description { white-space: pre-wrap; max-width: var(--measure); }

/* A commit message body, as written: monospace, hard wraps kept, long lines still wrapped. */
.content pre.change-body {
    background: none;
    padding: 0;
    margin: 0 0 1em;
    font-family: var(--mono);
    font-size: 0.82em;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.prose h2 { margin-top: 1.8em; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.6em;
}
.section-head h1, .section-head h2 { margin: 0; }
.section-head a { font-size: 0.8em; }

.muted, .meta { color: var(--muted); }
.small, .content .meta { font-size: 0.82em; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.wrap { overflow-wrap: anywhere; }

/*==================================================
  Lists: repositories and changes
==================================================*/

.content :where(.repo-list, .changes, .plain) {
    list-style: none;
    padding: 0;
    margin: 0;
}

.repo-row { margin: 0 0 1.4em; }
.repo-row:last-child { margin-bottom: 0; }
.repo-row p { margin: 0.1em 0 0; }

.content .repo-slug {
    font-family: var(--mono);
    font-size: 1.05em;
    font-weight: 550;
    color: var(--text-strong);
    text-decoration: none;
}
.content .repo-slug:hover { text-decoration: underline; }

/* Two-line rows: ID beside the title, meta under the title. */
.changes > li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9em;
    align-items: baseline;
    margin: 0;
    padding: 0.55em 0;
    border-bottom: 1px solid var(--border);
}
.changes > li:last-child { border-bottom: 0; }

.change-head { display: contents; }
.change-title { overflow-wrap: anywhere; color: var(--text-strong); }

.change-meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
    color: var(--muted);
    font-size: 0.82em;
}

.content .change-id { text-decoration: none; }
.content .change-id:hover { text-decoration: underline; }

.id { font-family: var(--mono); color: var(--muted); }
.id b { color: var(--text-strong); font-weight: 600; }

.bookmark { white-space: nowrap; }

.plain li { margin: 0.4em 0; }

/*==================================================
  Repository details
==================================================*/

.clone code { overflow-wrap: anywhere; }

dl.ids {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15em 0.75em;
    margin: 0 0 0.75em;
    font-size: 0.82em;
}
dl.ids dt { grid-column: 1; color: var(--muted); }
/* Column-pinned so a term with several values (two parents) stacks them under each other. */
dl.ids dd { grid-column: 2; margin: 0; overflow-wrap: anywhere; }
dl.ids code { background: transparent; padding: 0; font-size: 1em; }

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

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

.content th,
.content td {
    text-align: left;
    vertical-align: top;
    font-size: 0.9em;
    line-height: 1.6;
    padding: 0.45em 0.9em 0.45em 0;
    border-bottom: 1px solid var(--border);
}
.content td:last-child, .content th:last-child { padding-right: 0; }
.content th { color: var(--muted); font-weight: 400; font-size: 0.82em; }
.content tr:last-child td { border-bottom: 0; }
.content td.num { text-align: right; }

.content table.tree a.path { font-family: var(--mono); font-size: 0.95em; text-decoration: none; }
.content table.tree a.path:hover { text-decoration: underline; }

/*==================================================
  Badges, buttons, forms, notices
==================================================*/

.badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.75em;
    line-height: 1.5;
    padding: 0 0.35em;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    white-space: nowrap;
}
.badge.accent { color: var(--del-fg); border-color: color-mix(in srgb, var(--del-fg) 40%, transparent); }

.btn, button {
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    background: transparent;
    color: var(--text-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3em 0.7em;
}
.btn:hover, button:hover { background: var(--surface-2); }
.btn.primary, button.primary {
    background: var(--text-strong);
    border-color: var(--text-strong);
    color: var(--bg);
}
.btn.primary:hover, button.primary:hover { opacity: 0.85; }

button.link {
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

form { margin: 1.25em 0 0; }
form.inline { display: inline; margin: 0; }
td form { margin: 0; }
form + p { margin-top: 1em; }

input, textarea, select {
    font: inherit;
    font-size: 0.9em;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.35em 0.55em;
    width: 100%;
}
/* Fields show focus quietly: a darker border instead of the site-wide outline. */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: none;
    border-color: var(--text-strong);
}
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
label { display: block; font-size: 0.82em; color: var(--muted); margin-bottom: 0.25em; }
.field { margin-bottom: 1em; max-width: 28rem; }
label.inline { display: flex; align-items: center; gap: 0.45em; color: var(--text); margin-bottom: 1em; }
label.inline input { width: auto; }

.error, .notice {
    border-radius: var(--radius);
    padding: 0.55em 0.7em;
    margin: 0 0 1.25em;
    font-size: 0.9em;
}
.error {
    color: var(--del-fg);
    background: var(--del-bg);
    border: 1px solid color-mix(in srgb, var(--del-fg) 30%, transparent);
}
.notice {
    color: var(--add-fg);
    background: var(--add-bg);
    border: 1px solid color-mix(in srgb, var(--add-fg) 30%, transparent);
}

.content .empty { color: var(--muted); padding: 0.5em 0; margin: 0; }

.pagination { margin-top: 1.25em; }
.narrow { max-width: 24rem; }

/*==================================================
  Code: diffs and files
==================================================*/

.diff-file { margin-top: 2em; }

/* Files in a diff, each linking to its section below. */
.content table.diff-files { margin: 0.5em 0 0; }
.content table.diff-files td { padding-block: 0.25em; }
.content table.diff-files a.path { font-family: var(--mono); font-size: 0.95em; text-decoration: none; }
.content table.diff-files a.path:hover { text-decoration: underline; }

/* Collapsible files: the head is the toggle; collapsed files say why in the head. */
details.diff-file > summary { cursor: pointer; list-style: none; }
details.diff-file > summary::-webkit-details-marker { display: none; }
details.diff-file > summary::before {
    content: "▸";
    font-family: var(--mono);
    color: var(--muted);
    width: 1ch;
}
details.diff-file[open] > summary::before { content: "▾"; }
.diff-file:target > .file-head .path { background: var(--code-bg); }

.file-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
    margin-bottom: 0.4em;
}
.content .file-head .path {
    font-family: var(--mono);
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

.add-count { color: var(--add-fg); }
.del-count { color: var(--del-fg); }

.code {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.55;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.code .hunk-head { background: var(--surface-2); color: var(--muted); padding: 0.28em 0.7em; }
.code .line { display: flex; gap: 0.7em; padding-right: 0.7em; white-space: pre; width: max-content; min-width: 100%; }
.code .no { color: var(--muted); user-select: none; min-width: 4ch; text-align: right; flex: none; }
.code .marker { user-select: none; flex: none; }
.code .add { background: var(--add-bg); color: var(--add-fg); }
.code .del { background: var(--del-bg); color: var(--del-fg); }

/*==================================================
  Documents: READMEs and markdown files
==================================================*/

.readme { margin-top: 2.6em; max-width: var(--measure); }
.readme > .file-head {
    padding-bottom: 0.4em;
    margin-bottom: 1.2em;
    border-bottom: 1px solid var(--border);
}

.markdown { max-width: var(--measure); overflow-wrap: break-word; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.content .markdown h1 { margin: 1.4em 0 0.5em; }
.content .markdown h2 { margin: 1.6em 0 0.5em; }
.content .markdown :is(h3, h4, h5, h6) { margin: 1.4em 0 0.4em; }
.markdown :is(h5, h6) { font-family: "Crimson Pro", serif; font-weight: 550; font-size: 1em; color: var(--text-strong); }
.markdown img { max-width: 100%; height: auto; }
.markdown pre { font-size: 0.82em; line-height: 1.55; }
.markdown blockquote {
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid var(--border);
    color: var(--text-soft);
}
.markdown blockquote[class^="markdown-alert-"] { border-left-color: var(--focus); }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.content .markdown table { display: block; width: max-content; max-width: 100%; overflow-x: auto; margin: 1em 0; }
.content .markdown th { color: var(--text-strong); font-weight: 550; font-size: 0.9em; }
/* Markdown tables scroll sideways rather than breaking words mid-letter. */
.content .markdown :is(th, td) { overflow-wrap: normal; }
.markdown ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0.2em; }
.markdown li > input[type="checkbox"] { width: auto; margin: 0 0.45em 0 0; vertical-align: middle; }
.markdown .footnote-definition { display: flex; gap: 0.5em; font-size: 0.82em; color: var(--text-soft); }
.markdown .footnote-definition p { margin: 0; }

.content pre.plain-document {
    max-width: var(--measure);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    font-size: 0.82em;
    line-height: 1.55;
}

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

/* Stacked: the preamble collapses to a few compact lines above the content. */
@media (width < 1280px) {
    body { margin-block-start: 2em; }
    #preamble {
        max-width: none;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 1.25em;
        row-gap: 0.5em;
    }
    .preamble-name { margin: 0; }
    .preamble-summary, .preamble-code { display: none; }
    .repo-links {
        flex-direction: row;
        flex-wrap: wrap;
        flex-basis: 100%;
        gap: 8px 12px;
        margin: 0;
    }
    .repo-links .repo-name { margin: 0; }
    /* Collapsed, the account line follows the navigation instead of leading it. */
    .account-links { margin: 0; order: 1; font-size: 0.9em; }
}

@media (width < 600px) {
    body { font-size: 1em; max-width: calc(100% - 2em); }
    .content h1 { font-size: 1.5em; }
    /* On phones nothing re-wraps mid-word: tables, commit bodies, and code keep their lines and
       scroll sideways in their own pane; the page itself never does. */
    .content table { display: block; overflow-x: auto; }
    .content th, .content td { white-space: nowrap; overflow-wrap: normal; padding-right: 0.75em; }
    /* A scrolling table shrinks to its content; folder listings (one body, no header) still span
       the column so sizes line up at the edge. */
    .content table.tree tbody { display: table; width: 100%; }
    .code { font-size: 0.72rem; }
    .content pre.change-body { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
    /* Diff file list: counts before the path, so they are visible without scrolling. */
    .content table.diff-files tbody { display: block; }
    .content table.diff-files tr {
        display: flex;
        align-items: baseline;
        width: max-content;
        min-width: 100%;
        border-bottom: 1px solid var(--border);
    }
    .content table.diff-files tr:last-child { border-bottom: 0; }
    .content table.diff-files td { border-bottom: 0; }
    .content table.diff-files td:nth-child(1) { order: 1; min-width: 5em; }
    .content table.diff-files td:nth-child(3) { order: 2; min-width: 7ch; }
    .content table.diff-files td:nth-child(2) { order: 3; }
    .content table.diff-files td:nth-child(4) { order: 4; }
    .account-links { flex-basis: 100%; }
}

@media print {
    #preamble, .btn, button { display: none; }
    body { display: block; max-width: none; margin: 0; background: #fff; color: #000; }
}