@import url("fonts.css");

:root {
    color-scheme: dark;

    /* Surfaces */
    --page: #111111;
    --bar: #1d1f21;
    --card: #1f1f24;
    --tab: #27292d;
    --inset: #050505;
    --line: #333333;

    /* Divider lines that fade out at both ends */
    --fade-x: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
    --fade-y: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);

    /* Text */
    --text: #f6f6f6;
    --text-body: #9c9da1;
    --text-meta: #8b8c8f;

    /* Accents */
    --red: #d5382f;
    --led-red: #f42d37;
    --led-green: #06c552;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Maison Mono Medium", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radius: 18px;
    --gutter: 16px;
    --max: 1120px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

/* At least as tall as the window, so the footer sits at the bottom of short pages */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background: var(--page);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

h1,
h2,
h3 {
    color: var(--text);
    line-height: 1.2;
    margin: 0;
}

img {
    max-width: 100%;
    display: block;
}

:focus-visible {
    outline: 2px solid var(--led-green);
    outline-offset: 3px;
    border-radius: 6px;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-meta);
}

.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ---------- Top bar ---------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 0;
    padding-top: max(12px, env(safe-area-inset-top));
    background: linear-gradient(var(--page) 70%, transparent);
}

.topbar .wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Status lights either side of the bar */
.led {
    flex: none;
    width: 5px;
    height: 28px;
    border-radius: 3px;
}

.led-red {
    background: var(--led-red);
    box-shadow: 0 0 10px rgba(244, 45, 55, 0.6);
}

.led-green {
    background: var(--led-green);
    box-shadow: 0 0 10px rgba(6, 197, 82, 0.6);
}

.bar {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 6px 0 18px;
    background: var(--bar);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.site-title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--red);
    text-decoration: none;
    white-space: nowrap;
}

/* Dropdown menu, opened by the hamburger button */
.nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: var(--bar);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.nav-links.open {
    display: flex;
}

.nav-links a {
    display: block;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: background 0.15s;
}

.nav-links a:hover {
    background: var(--tab);
}

.nav-links a[aria-current] {
    background: var(--inset);
}

/* "Panel" sits below a divider; the extra class beats the plain link styles.
   The divider is drawn as a separate line in the gap above the link, so the
   link's own highlight on the panel page can't hide it. */
.nav-links .nav-panel {
    position: relative;
    margin-top: 13px;
    color: var(--text-body);
}

.nav-links .nav-panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 1px;
    background: var(--fade-x);
}

.nav-links .nav-panel:hover {
    background: none;
    color: var(--text);
}

/* On the panel page itself, highlight it like the other current links */
.nav-links .nav-panel[aria-current],
.nav-links .nav-panel[aria-current]:hover {
    background: var(--inset);
    color: var(--text);
}

.menu-button {
    display: inline-flex;
    margin-left: auto;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--inset);
    color: var(--text);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.menu-button svg {
    width: 22px;
    height: 22px;
}

.menu-button .icon-close {
    display: none;
}

.menu-button[aria-expanded="true"] .icon-open {
    display: none;
}

.menu-button[aria-expanded="true"] .icon-close {
    display: block;
}

/* ---------- Panels ---------- */

/* main.wrap, not main, so this beats .wrap's padding */
main.wrap {
    flex: 1;
    align-content: start;
    display: grid;
    gap: 20px;
    padding-top: 8px;
    padding-bottom: 24px;
}

.panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 20px 22px;
}

/* Heading tab that hangs from the top edge of the panel */
.panel-tab {
    display: table;
    margin: -1px auto 20px;
    padding: 10px 28px 11px;
    background: var(--tab);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

/* ---------- Buttons ---------- */

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--tab);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.button:hover {
    border-color: #555;
}

.button-primary {
    background: var(--red);
    border-color: var(--red);
}

.button-primary:hover {
    background: #e0463d;
    border-color: #e0463d;
}

/* ---------- Utilities ---------- */

/* Hidden visually but still read by screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Footer ---------- */

footer {
    padding: 8px 0 max(28px, env(safe-area-inset-bottom));
    text-align: center;
}

/* ---------- Desktop ---------- */

@media (min-width: 720px) {
    :root {
        --gutter: 24px;
    }

    /* A compact dropdown under the button rather than full width */
    .nav-links {
        left: auto;
        width: 260px;
    }

    .panel {
        padding: 0 28px 28px;
    }
}

/* Wider screens: use most of the width, with margins that grow with the
   window, up to a cap so lines don't get too long on very wide monitors */
@media (min-width: 960px) {
    :root {
        --gutter: clamp(24px, 4vw, 64px);
        --max: 1680px;
    }
}

/* Scale to the window height on desktop, the same on every page.
   Vertical sizes here (and in each page's own stylesheet) are in rem, and the
   root font size shrinks in proportion when the window is shorter than the
   home page's natural height (--fit-height), so everything scales together and
   keeps its proportions. It never goes above 16px (full size) or below 60%,
   where pages scroll instead. */
@media (min-width: 960px) {
    html {
        --fit-height: 880;
        font-size: clamp(9.6px, calc(100vh * 16 / var(--fit-height)), 16px);
        font-size: clamp(9.6px, calc(100dvh * 16 / var(--fit-height)), 16px);
    }

    /* Top bar */
    .topbar {
        padding: 0.75rem 0;
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }

    .led {
        height: 1.75rem;
    }

    .bar {
        height: 3.5rem;
        border-radius: 1.25rem;
    }

    .menu-button {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 0.875rem;
    }

    .menu-button svg {
        width: 1.375rem;
        height: 1.375rem;
    }

    /* Page layout and panels */
    main.wrap {
        gap: 1.5rem;
        padding-top: 0.5rem;
        padding-bottom: 1.5rem;
    }

    .panel {
        padding: 0 1.75rem 1.75rem;
    }

    .panel-tab {
        margin-bottom: 1.25rem;
        padding: 0.625rem 1.75rem 0.6875rem;
    }

    /* Buttons */
    .buttons {
        gap: 0.625rem;
    }

    .button {
        min-height: 2.75rem;
        padding: 0 1.25rem;
        border-radius: 0.875rem;
    }

    footer {
        padding: 0.5rem 0 max(1.75rem, env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}