/* ==========================================================================
   The page written as a config file.
   Carbonfox for the colours and one typeface, JetBrains Mono. Sections are
   blocks, settings are key = value lines with the meaning as a trailing
   comment, prose is a comment block. A waybar-style bar on top carries the
   workspaces, one per block.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Carbonfox, from nightfox.nvim by way of the Zed port: the editor's
       surfaces, its gutter, and its syntax colours, key for key. */
    --bg: #161616;            /* editor.background */
    --bg-panel: #0c0c0c;      /* title_bar, status_bar, panel */
    --bg-element: #2a2a2a;    /* element.background, the cursorline */
    --bg-selected: #225151;   /* element.selected */
    --border: #353535;
    --border-variant: #535353;

    --fg: #f2f4f8;            /* editor.foreground */
    --fg-bright: #f9fbff;     /* text */
    --fg-2: #b6b8bb;          /* operator, punctuation; prose comments */
    --fg-3: #7b7c7e;          /* editor.line_number; trailing comments */
    --comment: #6e6f70;       /* comment */
    --bright-black: #484848;

    --accent: #3ddbd9;        /* text.accent, number */
    --teal: #08bdba;          /* type, editor.active_line_number */
    --teal-bright: #5ae0df;   /* boolean, constant */
    --cyan: #33b1ff;          /* constructor, variable.parameter */
    --blue: #78a9ff;          /* property */
    --blue-bright: #8cb6ff;   /* function, link_text */
    --magenta: #be95ff;       /* keyword */
    --pink: #ff91c1;          /* keyword.import, preproc */
    --green: #25be6a;         /* string */
    --red: #ee5396;           /* error, function.builtin */

    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --bar-height: 2.25rem;
    --gutter: 3.5rem;
    --fast: 120ms;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--bar-height) + 1.5rem);
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    font-variant-ligatures: contextual;
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

::selection {
    background: var(--bg-selected);
    color: var(--fg-bright);
}

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

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 300;
    padding: 0.5rem 0.75rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    transform: translateY(-300%);
}

.skip-link:focus-visible {
    transform: none;
}

/* --- Bar ----------------------------------------------------------------- */

.bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    height: var(--bar-height);
    padding-inline: 0.75rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--bg-element);
    font-size: 0.8125rem;
}

.workspaces {
    display: flex;
    gap: 0.125rem;
}

.workspaces a {
    display: grid;
    place-items: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding-inline: 0.375rem;
    border-radius: 4px;
    color: var(--fg-3);
    font-variant-numeric: tabular-nums;
    transition: color var(--fast), background var(--fast);
}

.workspaces a:hover {
    color: var(--fg);
    background: var(--bg-element);
    text-decoration: none;
}

.workspaces a[aria-current="true"] {
    color: var(--bg-panel);
    background: var(--accent);
    font-weight: 700;
}

.bar-title {
    color: var(--fg-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-title b {
    color: var(--fg);
    font-weight: 500;
}

.bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-width: 0;
}

.module {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--fg-2);
    white-space: nowrap;
}

.module svg {
    width: 0.9375rem;
    height: 0.9375rem;
}

.module-toggle {
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    color: var(--green);
    transition: background var(--fast);
}

.module-toggle:hover {
    background: var(--bg-element);
}

.module-toggle[aria-pressed="false"] {
    color: var(--fg-3);
}

.module-toggle[aria-pressed="false"] .mark-core {
    display: none;
}

.module-version {
    color: var(--blue);
}

.module-clock {
    color: var(--fg-2);
    font-variant-numeric: tabular-nums;
}

/* --- The file ------------------------------------------------------------ */

.file {
    width: 100%;
    max-width: 100ch;
    margin-inline: auto;
    padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
    counter-reset: line;
}

.line {
    position: relative;
    display: block;
    padding-left: var(--gutter);
    min-height: 1.7em;
    border-radius: 3px;
}

.line::before {
    content: counter(line);
    counter-increment: line;
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    color: var(--bright-black);
    /* The gutter keeps the body size whatever the line itself is set in. */
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
    text-align: right;
    font-variant-numeric: tabular-nums;
    user-select: none;
}

/* Cursorline follows the pointer while the bar module says on. */
.follow .line:hover {
    background: var(--bg-element);
}

.follow .line:hover::before {
    color: var(--teal);
}

.blank {
    height: 1.7em;
}

/* Comments carry the prose, so they stay readable rather than dimmed. */
.c {
    color: var(--fg-2);
}

.c::after {
    content: none;
}

.line.c {
    max-width: calc(var(--gutter) + 78ch);
    text-wrap: pretty;
}

.hash {
    color: var(--comment);
    user-select: none;
}

.line.c strong {
    color: var(--fg);
    font-weight: 600;
}

.line.c a {
    color: var(--blue-bright);
}

.rule {
    color: var(--border);
    overflow: hidden;
    white-space: nowrap;
}

/* Blocks */
.block {
    scroll-margin-top: calc(var(--bar-height) + 1rem);
}

.open {
    font-size: 1.125rem;
    line-height: 1.7;
}

.open .name {
    color: var(--magenta);
    font-weight: 700;
}

.brace {
    color: var(--fg-3);
}

.kv .key,
.bind .key {
    color: var(--blue);
}

.eq {
    color: var(--fg-2);
    padding-inline: 0.5ch;
}

.var {
    color: var(--pink);
}

.str {
    color: var(--green);
}

.num {
    color: var(--accent);
}

.bool {
    color: var(--teal-bright);
}

.off {
    color: var(--red);
}

.kw {
    color: var(--cyan);
}

.kv .c,
.bind .c {
    color: var(--fg-3);
}

/* The body of a block is indented one level, as the file would be. */
.block .kv,
.block .bind,
.block .cmd,
.block .in {
    padding-left: calc(var(--gutter) + 4ch);
}

.block .in.c {
    max-width: calc(var(--gutter) + 4ch + 74ch);
}

.kv,
.bind {
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.kv .c,
.bind .c {
    white-space: normal;
}

/* Key/value rows line up in columns on wide screens. */
@media (min-width: 60rem) {
    .kv {
        display: grid;
        grid-template-columns: 23ch 15ch minmax(0, 1fr);
        gap: 0 1ch;
        white-space: normal;
    }

    .kv .eq {
        display: none;
    }

    .kv .key::after {
        content: ' =';
        color: var(--fg-2);
    }

    .bind {
        display: grid;
        grid-template-columns: 42ch minmax(0, 1fr);
        gap: 0 1ch;
        white-space: normal;
    }
}

/* Commands */
.cmd {
    display: flex;
    align-items: baseline;
    gap: 0.75ch;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.cmd .prompt {
    color: var(--green);
    user-select: none;
}

.cmd code {
    color: var(--fg);
    font-family: inherit;
}

.cmd .c {
    color: var(--fg-3);
}

.copy {
    margin-left: auto;
    padding: 0 0.5ch;
    border-radius: 3px;
    color: var(--comment);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--fast), color var(--fast);
}

.cmd:hover .copy,
.copy:focus-visible,
.copy.copied {
    opacity: 1;
}

.copy:hover,
.copy.copied {
    color: var(--fg);
    background: var(--bg-element);
}

/* Hero: the file header, set large. */
.hero {
    padding-block: 2.5rem 1rem;
}

.hero-title {
    display: flex;
    align-items: center;
    gap: 0.25em;
    color: var(--fg);
    font-size: clamp(3rem, 9vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.hero-title .hash {
    color: var(--bright-black);
    font-weight: 400;
}

.hero-title svg {
    width: 0.62em;
    height: 0.62em;
    color: var(--accent);
    margin-left: 0.15em;
}

.hero .lede {
    color: var(--fg);
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5;
    max-width: calc(var(--gutter) + 56ch);
    margin-top: 1rem;
}

.hero .lede .kw {
    color: var(--accent);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2ch;
    margin-top: 1rem;
}

.hero-actions a {
    color: var(--blue-bright);
}

kbd {
    color: var(--teal);
}

.footer {
    margin-top: 2rem;
    color: var(--fg-3);
}

@media (max-width: 48rem) {
    :root {
        --gutter: 2.5rem;
    }

    .line::before {
        width: 1.75rem;
    }

    .bar {
        grid-template-columns: auto 1fr;
    }

    .bar-title,
    .module-clock,
    .module-version,
    .module-github,
    .module-toggle span {
        display: none;
    }

    .bar-right {
        justify-self: end;
    }

    .block .kv,
    .block .bind,
    .block .cmd,
    .block .in {
        padding-left: calc(var(--gutter) + 2ch);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
    }
}