/* Bannister Labs site.
   Layout, palette, and typography carried over from bannister.us (the owner's
   weblog, site-bannister.us): centered content column, single-line header with
   monospace wordmark + right nav under a hairline rule, light gray paper,
   near-black text, minima-style blue links, Helvetica Neue stack. */
:root {
    --bg: #f7f7f7;             /* bannister.us body background */
    --panel: #ffffff;          /* stat cards, host chips, code blocks */
    --border: #dddddd;         /* hairline rules (header, cards, blocks) */
    --text: #111111;           /* body + heading text */
    --muted: #555555;          /* meta, labels, footer */
    --accent: #2a7ae2;         /* bannister.us link blue */
    --accent-visited: #1756a9;
    --up: #1e8e3e;             /* host up (semantic; deepened for light bg) */
    --down: #d93025;           /* host down */
    --col: 50rem;              /* content column width (bannister.us ~50em) */
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* Typography from bannister.us: Helvetica Neue stack, 400 weight,
       1.5 line-height, kerning enabled. Size stays 18px — bannister.us
       renders visually similar at this size. */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    background: var(--bg);
    color: var(--text);
}

/* Centered content column, bannister.us .wrapper */
.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--col);
}

h1,
h2 {
    color: var(--text);
    font-weight: 600;
}

a {
    color: var(--accent);
    text-decoration: none;
}

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

a:hover {
    color: var(--text);
    text-decoration: underline;
}

/* Header: wordmark left, nav right, hairline rule (bannister.us) */
header {
    border-bottom: 1px solid var(--border);
    display: block;
}

.site-title {
    font-family: "Monaco", "Inconsolata", "Andale Mono", "Lucida Console",
        "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
    color: #828282;
}

.site-title a {
    color: #666;
    text-decoration: none;
}

nav.site {
    float: right;
    line-height: 40px;
}

nav.site a {
    margin-right: 1em;
}

nav.site .page-link {
    color: var(--text);
    text-decoration: none;
}

nav.site .page-link:hover {
    text-decoration: underline;
}

nav.site .page-link.active {
    color: var(--text);
    font-weight: 600;
}

main {
    margin: 0.3rem 0.6rem;
    padding: 1em 0;
}

main p {
    margin-block: 0.6em;
}

/* Status summary cards */
.totals {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}

.stat {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    min-width: 8rem;
}

.stat .value {
    font-size: 1.5rem;
    font-weight: 700;
}

.stat .label {
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Host groups */
.group {
    margin-bottom: 1.5rem;
}

.group h2 {
    margin-bottom: 0.25rem;
}

.group .meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.hosts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.host {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.3rem 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.9rem;
}

.host .meta {
    color: var(--muted);
}

.dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

.dot.up {
    background: var(--up);
}

.dot.down {
    background: var(--down);
}

.warn {
    background: #fff7dc;
    border: 1px solid #e0c35c;
    border-radius: 0.35rem;
    padding: 0.5rem 0.75rem;
}

/* Inline code and code blocks (markdown pages) */
code {
    font-family: "Monaco", "Inconsolata", "Andale Mono", "Lucida Console",
        "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    font-size: 0.85em;
    background: #eeeeee;
    padding: 0.05em 0.3em;
    border-radius: 3px;
}

pre {
    background: #eeeeee;
    border: 1px solid var(--border);
    padding: 0.6em 0.8em;
    overflow-x: auto;
}

pre code {
    background: none;
    padding: 0;
}

/* Project graphic in the /projects/ list; the project pages' own navigation
   bar carries its styles inline (see scripts/render-project-graphics.py). */
.project-graphic {
    display: inline-block;
    vertical-align: middle;
    /* Vertical margin keeps the graphics of consecutive list items apart
       (the icon is taller than the line box, so without it they meet). */
    margin: 0.4em 0.45em 0.4em 0;
}

.project-graphic svg {
    display: block;
    /* Same size as the graphic in the project navigation bar (rem, so it does
       not depend on the surrounding font size). */
    width: 1.9rem;
    height: 1.9rem;
}

/* Tables (markdown) — minimal, per the project-pages conventions and
   bannister.us: hairline rules, left-aligned, light header row. */
table {
    border-collapse: collapse;
    margin: 1em 0;
}

thead th {
    text-align: left;
    border-bottom: 1px solid #999;
    padding: 0.1em 0.6em;
}

tbody td {
    text-align: left;
    border-bottom: 1px solid #ccc;
    padding: 0.1em 0.6em;
}

footer {
    color: var(--muted);
    font-size: 0.8rem;
}

footer .wrapper {
    padding: 0.75rem 0 1.25rem;
}

/* Diagrams: as wide as needed and centered on the page, independent of the
   text column. .mermaid spans the full viewport (centered on the page) via
   the classic breakout margin; the svg keeps mermaid's own sizing — width
   100% capped by its natural max-width — so a chart renders at natural size
   when the viewport is wide enough and scales down only to fit, always
   horizontally centered. */
/* Clip only at the viewport (html); body must NOT clip. */
html {
    overflow-x: hidden;
}

.mermaid {
    margin-inline: calc(50% - 50vw); /* expand to viewport width, page-centered */
    overflow-x: auto;
    text-align: center;
    opacity: 0;
    /* hidden until mermaid renders */
    transition: opacity .25s ease;
}

.mermaid.rendered {
    opacity: 1;
}

.mermaid svg {
    width: 100%;
    height: auto;
}

/* Never flash the raw diagram source */
pre code.language-mermaid {
    display: none;
}

/* Narrow screens: nav drops below the wordmark (bannister.us) */
@media (max-width: 40rem) {
    nav.site {
        float: none;
        line-height: 2;
    }

    .site-title {
        display: block;
    }

    nav.site a {
        display: inline-block;
        margin-right: 0.6em;
    }
}