/* ============================================================================
   components.css — site chrome and shared blocks (public site)
   ----------------------------------------------------------------------------
   Header, mobile drawer, theme toggle, footer, cards, spec rows, accordions
   and the message strip. Loaded on every public page after base.css.
   ========================================================================= */

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
}

/* backdrop-filter is not universal; without it the bar must stay opaque or
   the page scrolls straight through it. */
@supports not (backdrop-filter: blur(4px)) {
    .site-header { background: var(--paper); }
}

/* The dawn hairline that runs along the very top of every page. */
.site-header::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--dawn);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: var(--header-h);
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── Brand ── */

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--ink);
    flex: none;
}

.brand__mark {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--line);
    flex: none;
}

.brand__name {
    font-family: var(--font-display);
    font-size: 1.14rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
}

.brand__name em {
    font-style: normal;
    background: var(--dawn-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Desktop navigation ── */

.nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.nav__link:hover { color: var(--ink); background: var(--accent-wash); }

.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }

.nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .7rem;
    right: .7rem;
    bottom: .18rem;
    height: 2px;
    border-radius: 2px;
    background: var(--dawn);
}

.nav__divider {
    width: 1px;
    height: 20px;
    background: var(--line);
    margin-inline: var(--sp-2);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

/* ── Theme toggle ── */

.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease),
                background var(--fast) var(--ease);
}

.theme-toggle:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: var(--accent-wash);
}

.theme-toggle svg { width: 17px; height: 17px; }

/* One button, two icons: the theme decides which one is showing. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* ── Hamburger ── */

.nav-toggle {
    display: none;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
}

.nav-toggle__box {
    position: relative;
    width: 17px;
    height: 12px;
}

.nav-toggle__box span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.8px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.nav-toggle__box span:nth-child(1) { top: 0; }
.nav-toggle__box span:nth-child(2) { top: 5.1px; }
.nav-toggle__box span:nth-child(3) { top: 10.2px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) {
    transform: translateY(5.1px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) {
    transform: translateY(-5.1px) rotate(-45deg);
}

/* ── Mobile drawer ── */

@media (max-width: 1080px) {
    .nav-toggle { display: grid; }

    .nav {
        position: fixed;
        inset: calc(var(--header-h) + 3px) 0 0 0;
        z-index: 99;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: var(--sp-5) var(--gutter) var(--sp-8);
        background: var(--paper);
        border-top: 1px solid var(--line);
        overflow-y: auto;
        overscroll-behavior: contain;

        /* Closed state. visibility keeps it out of the tab order. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        /* visibility is delayed rather than interpolated: it flips the instant
           the drawer opens, and waits for the fade to finish before hiding on
           close. Putting it in the transition list proper would make the menu
           depend on transitions actually running to become usable at all. */
        transition: opacity var(--fast) var(--ease),
                    transform var(--fast) var(--ease),
                    visibility 0s linear var(--fast);
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity var(--fast) var(--ease),
                    transform var(--fast) var(--ease),
                    visibility 0s linear 0s;
    }

    .nav__link {
        padding: .85rem .25rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        font-size: .95rem;
        letter-spacing: .02em;
    }

    .nav__link[aria-current="page"]::after { left: .25rem; right: auto; width: 1.6rem; bottom: .5rem; }

    .nav__divider { display: none; }

    /* Stops the page behind the drawer scrolling. */
    html.nav-open, body.nav-open { overflow: hidden; }
}

@media (min-width: 1081px) {
    /* The drawer's own attributes must not leak into the desktop bar. */
    .nav { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* ── Auth links in the header ── */

.nav__user {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .5rem .7rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--accent);
    white-space: nowrap;
}

.logout-form { display: inline; }

.logout-btn {
    padding: .5rem .7rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.logout-btn:hover { color: var(--accent); background: var(--accent-wash); }

@media (max-width: 1080px) {
    .nav__user, .logout-btn {
        display: flex;
        width: 100%;
        padding: .85rem .25rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        font-size: .95rem;
        text-align: left;
    }
    .logout-form { display: block; }
}


/* ── Django messages ────────────────────────────────────────────────────── */

.messages {
    max-width: var(--wide);
    margin: var(--sp-5) auto 0;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--sp-3);
}


/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
    margin-top: auto;
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--sp-6);
}

.footer__grid {
    display: grid;
    gap: var(--sp-6) var(--sp-7);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    align-items: start;
}

@media (min-width: 900px) {
    /* The brand column gets the extra room; the three link columns share the rest. */
    .footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
}

.footer__blurb {
    max-width: 34ch;
    margin-top: var(--sp-4);
    font-size: var(--step--1);
    color: var(--ink-muted);
}

.footer__heading {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--sp-3);
}

.footer__list { display: grid; gap: .55rem; }

.footer__list a {
    display: inline-block;
    max-width: 100%;
    font-size: var(--step--1);
    color: var(--ink-muted);
    text-decoration: none;
    /* The contact address is long enough to push a 375px viewport sideways. */
    overflow-wrap: anywhere;
    transition: color var(--fast) var(--ease);
}

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

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-faint);
}


/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
    position: relative;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease),
                border-color var(--slow) var(--ease);
}

.card--hover:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}

.card__title { margin-bottom: var(--sp-3); }

.card__text { color: var(--ink-soft); font-size: var(--step--1); }



/* ── Spec rows ──────────────────────────────────────────────────────────── */

.spec-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 0 var(--sp-7);
    border-top: 1px solid var(--line);
}

.spec {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
}

.spec__key {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    flex: none;
}

.spec__val { text-align: right; font-size: var(--step--1); color: var(--ink); }

.spec__val--accent {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
}


/* ── Accordion (native <details>, no JS) ────────────────────────────────── */

.accordion { border-top: 1px solid var(--line); }

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color var(--fast) var(--ease);
}

.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--accent); }

.accordion__sign {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: .15rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    color: var(--ink-muted);
    transition: transform var(--slow) var(--ease), background var(--fast) var(--ease),
                color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.accordion__item[open] .accordion__sign {
    transform: rotate(45deg);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.accordion__a {
    padding-bottom: var(--sp-5);
    max-width: var(--measure);
    color: var(--ink-soft);
}

.accordion__a > * + * { margin-top: .8em; }


/* ── Figures ────────────────────────────────────────────────────────────── */

.figure {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.figure img { width: 100%; }

.figure figcaption {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The clock's 128x160 screenshots are tiny; scale them up crisply rather than
   letting the browser smooth them into mush. */
.figure--screen img {
    image-rendering: pixelated;
    background: #000;
    max-width: 260px;
    margin-inline: auto;
}


/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
    white-space: nowrap;
}

.table th, .table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.table th {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--surface-2);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--accent-wash); }


/* ── Stat tiles ─────────────────────────────────────────────────────────── */

.stat {
    padding: var(--sp-5);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.stat__label {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.stat__value {
    margin-top: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}


/* ── Shared CTA band ────────────────────────────────────────────────────── */

.cta-band {
    position: relative;
    overflow: hidden;
    background: var(--inverse);
    color: var(--inverse-ink);
    text-align: center;
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
}

.cta-band::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--dawn);
}

/* A soft dawn glow rising from the bottom edge. */
.cta-band::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -55%;
    width: min(120vw, 1000px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(216, 69, 28, .3), transparent 62%);
    pointer-events: none;
}

.cta-band > * { position: relative; z-index: 1; }

.cta-band__title { font-size: var(--step-4); }

.cta-band__sub {
    margin: var(--sp-4) auto 0;
    max-width: 46ch;
    color: color-mix(in srgb, var(--inverse-ink) 78%, transparent);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-6);
}


/* ── Section headers ────────────────────────────────────────────────────── */

.section-head {
    max-width: 62ch;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section-head h2 { margin-bottom: 0; }

.section-head .lead { margin-top: var(--sp-4); }

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head--center .eyebrow { justify-content: center; }
.section-head--center .lead { margin-inline: auto; }