/* wicket.moonlight.pm: the admin console's look. Graphite ground, no
   hue in the interface (white is the only emphasis), the logo's orange on
   the logo alone. Sofia Sans Semi Condensed for reading and display,
   JetBrains Mono for everything typed at a machine. Dark only, like the
   console. */

@font-face {
    font-family: "Sofia Sans Semi Condensed";
    src: url("/fonts/SofiaSansSemiCondensed.woff2") format("woff2");
    font-weight: 1 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --ground: #0d0d0e;
    --raised: #18181b;
    --code-ground: #121214;
    --ink: #ededee;
    --muted: #a8abb1;
    --faint: #8c9097;
    --line: #232326;
    --rule: #2f2f33;
    --bright: #ffffff;
    --mark: #ea984f;
    --sans: "Sofia Sans Semi Condensed", "Arial Narrow", Arial, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --measure: 46rem;
    --wide: 72rem;
    --page: 80rem;
    --header: 3.5rem;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.1875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--bright);
    text-decoration-color: var(--faint);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

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

a:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--bright);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--bright);
    color: var(--ground);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    font-weight: 700;
}

[id] {
    scroll-margin-top: calc(var(--header) + 1rem);
}

strong { font-weight: 700; color: var(--bright); }

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

code {
    font-size: 0.8em;
    background: var(--raised);
    padding: 0.1em 0.32em;
    border-radius: 4px;
    overflow-wrap: break-word;
}

pre {
    font-size: 0.8rem;
    line-height: 1.65;
    margin: 1rem 0 1.25rem;
    padding: 0.95rem 1.15rem;
    background: var(--code-ground);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
    tab-size: 4;
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    overflow-wrap: normal;
}

pre .comment { color: var(--faint); }

.mark {
    display: block;
    flex: none;
    width: auto;
}

.skip {
    position: absolute;
    left: 1rem;
    top: -3rem;
    padding: 0.4rem 0.8rem;
    background: var(--ink);
    color: var(--ground);
    z-index: 20;
}

.skip:focus { top: 0.5rem; }

/* Site header and footer */

header.site {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--header);
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

header.site nav {
    max-width: var(--page);
    height: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    font-size: 1.0625rem;
}

header.site nav a {
    color: var(--muted);
    text-decoration: none;
    padding: 0.75rem 0;
}

header.site nav a:hover,
header.site nav a[aria-current] {
    color: var(--bright);
}

header.site nav a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--bright);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.45em;
}

header.site .brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
    color: var(--bright);
}

header.site .brand .mark {
    height: 1.85rem;
}

header.site .brand span {
    font-weight: 750;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

footer.site {
    border-top: 1px solid var(--line);
    margin-top: 5rem;
}

footer.site div {
    max-width: var(--page);
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    font-size: 0.95rem;
    color: var(--muted);
}

footer.site p { margin: 0; }

.principles {
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

/* Home */

.home {
    max-width: calc(var(--measure) + 3rem);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.home section {
    margin-top: 4.5rem;
}

.home h2 {
    font-size: 2.25rem;
    font-weight: 750;
    letter-spacing: -0.005em;
    line-height: 1.05;
    margin: 0 0 1.1rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--rule);
}

.intro {
    padding: 4.5rem 0 0.5rem;
}

.intro .title {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.4rem;
}

.intro .title .mark {
    height: 6rem;
}

.intro h1 {
    font-size: 6rem;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--bright);
}

.intro h1.plain {
    font-size: 2.75rem;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.lede {
    font-size: 1.45rem;
    line-height: 1.45;
    margin: 0 0 1.25rem;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    font-size: 1rem;
    color: var(--muted);
    margin: 0;
}

.facts a {
    font-weight: 650;
    padding: 0.2rem 0;
}

/* Screens from the design boards. The first runs wider than the text. */

.shot {
    margin: 2rem 0 0;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--raised);
}

.shot figcaption {
    margin-top: 0.6rem;
    font-size: 0.98rem;
    color: var(--muted);
}

.shot + .shot {
    margin-top: 2.75rem;
}

.shot.wide {
    width: min(var(--wide), calc(100vw - 3rem));
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 3rem;
}

/* What runs on a host */

.table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
}

.parts {
    width: 100%;
    border-collapse: collapse;
}

.parts thead th {
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    text-align: left;
    padding: 0 1rem 0.5rem 0;
    border-bottom: 1px solid var(--rule);
}

.parts tbody th,
.parts td {
    vertical-align: top;
    padding: 0.75rem 1rem 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.parts tbody th {
    text-align: left;
    width: 10rem;
    font-weight: 700;
    color: var(--bright);
}

.parts tbody th code {
    background: none;
    padding: 0;
    font-size: 0.92rem;
    font-weight: 600;
}

.parts .where {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--faint);
}

/* What works */

.features {
    margin: 0;
}

.features > div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0 1.25rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.features dt {
    font-weight: 700;
    color: var(--bright);
}

.features dd {
    margin: 0;
}

.more {
    margin-top: 1rem;
    color: var(--muted);
}

#status ul {
    padding-left: 1.25rem;
}

#status li {
    margin: 0.3rem 0;
}

/* Manual */

.manual {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 3rem;
}

.contents {
    position: sticky;
    top: var(--header);
    align-self: start;
    max-height: calc(100vh - var(--header));
    overflow-y: auto;
    padding: 2rem 0.5rem 2rem 0;
    font-size: 0.98rem;
    line-height: 1.35;
}

.contents-title {
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 0.75rem;
}

.toc,
.toc ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc > li {
    margin-bottom: 0.9rem;
}

.toc > li > a {
    font-weight: 700;
    color: var(--ink);
}

.toc ol {
    margin-top: 0.2rem;
}

.toc a {
    display: flex;
    gap: 0.5rem;
    padding: 0.12rem 0;
    color: var(--muted);
    text-decoration: none;
}

.toc a:hover {
    color: var(--bright);
}

.toc .number {
    flex: none;
    min-width: 2.1rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.toc code {
    font-size: 0.85em;
    background: none;
    padding: 0;
}

.manual-body {
    min-width: 0;
    max-width: var(--measure);
    padding: 2rem 0;
}

.manual-head h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
    margin: 0.5rem 0 1rem;
    color: var(--bright);
}

.manual-head p {
    color: var(--muted);
    margin: 0 0 1rem;
}

.contents-inline {
    display: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
}

.contents-inline summary {
    cursor: pointer;
    font-weight: 700;
    padding: 0.35rem 0;
}

.contents-inline .toc {
    margin-top: 0.75rem;
}

.chapter h2 {
    font-size: 2.35rem;
    font-weight: 750;
    letter-spacing: -0.005em;
    line-height: 1.05;
    margin: 3.75rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 2px solid var(--rule);
}

.chapter h3 {
    font-size: 1.5rem;
    margin: 2.5rem 0 0.75rem;
}

.chapter h4 {
    font-size: 1.25rem;
    margin: 2rem 0 0.6rem;
}

.chapter h5,
.chapter h6 {
    font-size: 1.1rem;
    margin: 1.5rem 0 0.5rem;
}

.chapter :is(h2, h3, h4) code {
    background: none;
    padding: 0;
    font-size: 0.8em;
}

.chapter .number {
    color: var(--faint);
    font-weight: 500;
    margin-right: 0.5em;
    font-variant-numeric: tabular-nums;
}

.chapter h2 .number {
    color: var(--muted);
    font-weight: 650;
}

.chapter img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.25rem 0;
    border-radius: 8px;
}

.anchor {
    margin-left: 0.4em;
    color: var(--faint);
    text-decoration: none;
    font-weight: 400;
    opacity: 0;
}

h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
.anchor:focus-visible {
    opacity: 1;
}

.chapter ul,
.chapter ol {
    padding-left: 1.4rem;
}

.chapter li {
    margin: 0.25rem 0;
}

.chapter li > pre {
    margin: 0.5rem 0 0.75rem;
}

.chapter blockquote {
    margin: 1rem 0;
    padding: 0.1rem 0 0.1rem 1rem;
    border-left: 3px solid var(--rule);
    color: var(--muted);
}

.chapter table {
    border-collapse: collapse;
    width: 100%;
    font-size: 1.02rem;
    line-height: 1.4;
}

.chapter th,
.chapter td {
    text-align: left;
    vertical-align: top;
    padding: 0.45rem 0.75rem 0.45rem 0;
    border-bottom: 1px solid var(--line);
}

.chapter th {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
}

.chapter td code {
    font-size: 0.8em;
}

@media (min-width: 40rem) {
    .chapter td:first-child code {
        white-space: nowrap;
    }
}

/* Narrow screens: contents fold into the page; 16px gutters. */

@media (max-width: 60rem) {
    .manual {
        display: block;
        padding: 0 1rem;
    }

    .contents {
        display: none;
    }

    .contents-inline {
        display: block;
    }
}

@media (max-width: 40rem) {
    body {
        font-size: 1.0625rem;
    }

    header.site nav {
        padding: 0 1rem;
        gap: 1.1rem;
    }

    .home {
        padding: 0 1rem;
    }

    .intro {
        padding-top: 2.75rem;
    }

    .intro .title .mark {
        height: 4.25rem;
    }

    .intro h1 {
        font-size: 4.25rem;
    }

    .lede {
        font-size: 1.2rem;
    }

    .home h2 {
        font-size: 1.9rem;
    }

    .shot.wide {
        width: calc(100vw - 2rem);
    }

    .features > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .parts tbody th {
        width: 7.5rem;
    }

    pre {
        font-size: 0.76rem;
        padding: 0.75rem 0.85rem;
    }

    .home pre,
    .home pre code {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    footer.site div {
        padding: 1.25rem 1rem;
    }
}