/**
 * Postroute - the shells and the page geometry.
 *
 * Three shells: .page is the centred card the sign-in family uses, .shell is
 * the application someone works in, .site is the public front. What follows
 * is layout - where things sit - and reads every value from theme.css. The
 * objects themselves (button, card, field, table...) are in components.css
 * and are not restyled here.
 *
 * Loaded last, after theme.css and components.css.
 */

/* --- the sign-in card ---------------------------------------------------- */

.page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-4);
    background: var(--ground);
    color: var(--ink);
    font: var(--text-md)/var(--leading-base) var(--font-sans);
}

.foot {
    color: var(--ink-soft);
    font-size: var(--text-sm);
    text-align: center;
}

.foot p {
    margin: 0;
}

/* --- the application shell ------------------------------------------------
   Signing in leads to a real page, not the sign-in card grown a little. The
   centred card is right for a single decision and wrong for a panel someone
   works in. */

.shell {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font: var(--text-md)/var(--leading-base) var(--font-sans);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-6);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.topbar__brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    text-decoration: none;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar__who {
    font-size: var(--text-base);
    color: var(--ink-soft);
}

.shell__body {
    flex: 1;
    display: grid;
    grid-template-columns: var(--width-nav) 1fr;
    align-items: start;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5) var(--space-3);
    border-right: 1px solid var(--line);
    min-height: 100%;
}

.nav__link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--ink-soft);
    text-decoration: none;
}

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

.nav__link--on {
    background: var(--paper);
    color: var(--ink);
    font-weight: var(--weight-semibold);
}

/* The top padding matches the nav's, so the first thing on the page starts on
   the same line as the first thing in the sidebar. They are read as one row and
   were a third of an inch apart. */
.content {
    padding: var(--space-5) var(--space-8) var(--space-12);
    max-width: var(--width-content);
}

.content__head {
    margin-bottom: var(--space-6);
}

.content__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

/* Panels sit side by side where there is room and stack where there is not,
   without a breakpoint deciding it for them. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.shell .list {
    margin-bottom: var(--space-4);
}

/* A list first, actions second: the domain page is opened ten times to look
   at what exists for every once something changes. */
.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.bar__count {
    margin: 0;
    font-size: var(--text-base);
}

.bar__actions {
    display: flex;
    gap: var(--space-2);
}

/* --- the public front ------------------------------------------------------
   Full width, in sections: what this is, what it does, the server, who runs
   it. The same tokens as the application, so the two read as one product. */

.site {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);
    font: var(--text-md)/var(--leading-base) var(--font-sans);
}

.site__header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

/* The three stripes from the logo, as a rule along the top. */
.site__stripe {
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--brand-blue) 0 33.4%,
        var(--brand-yellow) 33.4% 66.7%,
        var(--brand-red) 66.7%
    );
}

.site__inner {
    width: 100%;
    max-width: var(--width-site);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.site__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 4.25rem;
}

.site__brand {
    display: block;
    line-height: 0;
}

.site__logo {
    display: block;
    height: 2.25rem;
    width: auto;
}

.site__main {
    flex: 1;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: var(--height-hero);     /* never shorter than the artwork */
    padding: var(--space-12) 0 var(--space-16);
}

/* The title sits high; the button hangs well below it, where it stood before
   the lede moved to the corner. */
.hero .actions {
    margin-top: var(--space-20);
}

/* The artwork behind the hero: Vlad's blue lines (public/img/hero-lines.png,
   rotated from the file he supplied), as wide as the CONTENT COLUMN (68rem,
   like every section), centred, and as tall as the whole hero including its
   padding - a box only as tall as the text cropped the strokes top and bottom. */
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 0;
    width: 100%;
    max-width: var(--width-site);
    transform: translateX(-50%);
    background: url("../img/hero-lines.png") no-repeat center / 100% auto;
    opacity: var(--opacity-artwork);
    pointer-events: none;
}

.hero > .site__inner {
    position: relative;
    z-index: 1;
}

.hero__title {
    margin: 0 0 var(--space-5);
    font-size: var(--text-5xl);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
}

/* The two-line lede sits in the hero's bottom-right corner, on the column's
   right edge - not on the button's row. The right offset is the column's own
   padding edge: half of what the viewport has beyond 68rem, plus the padding. */
.hero__lede {
    position: absolute;
    right: max(var(--space-6), calc((100% - var(--width-site)) / 2 + var(--space-6)));
    bottom: var(--space-8);
    z-index: 1;
    margin: 0;
    text-align: right;
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--ink-soft);
}

.section {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--line);
}

.section__title {
    margin: 0 0 var(--space-6);
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
}

.section__lede {
    margin: 0 0 var(--space-6);
    max-width: var(--width-prose);
    color: var(--ink-soft);
}

.site__footer {
    padding: var(--space-12) 0 var(--space-10);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

/* Brand and tagline on the left, link columns on the right, a hairline, then
   the identity and the addresses on one bottom row. */
.site__footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(10rem, 1fr));
    gap: var(--space-8);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--line);
}

/* The brand block is as wide as its longest line; the envelope sits behind
   it as a faint watermark, the text written over it. */
.site__brandblock {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;    /* the text lines up with the column titles */
    gap: var(--space-2);
    min-height: 11rem;              /* room for the envelope behind */
    padding-bottom: var(--space-4);
}

.site__brandblock > p {
    position: relative;
    z-index: 1;
}

.site__mark {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: var(--opacity-watermark);
    pointer-events: none;
}

.site__wordmark {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.site__tagline {
    margin: 0;
    max-width: var(--width-prose);
}

.site__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.site__col-title {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.site__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-top: var(--space-6);
}

.site__bottom .identity {
    margin: 0;
}

.site__addresses {
    margin: 0;
}

/* --- one breakpoint: a phone ---------------------------------------------- */

@media (max-width: 46rem) {
    /* the sidebar becomes a row above the content */
    .shell__body {
        grid-template-columns: 1fr;
    }

    .nav {
        flex-direction: row;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: var(--space-2) var(--space-3);
        min-height: 0;
    }

    .content {
        padding: var(--space-5) var(--space-4) var(--space-10);
    }

    .site__inner {
        padding: 0 var(--space-4);
    }

    .hero {
        padding: var(--space-12) 0 var(--space-10);
    }

    .hero__title {
        font-size: var(--text-4xl);
    }

    /* on a phone the lede falls back into the flow, under the button */
    .hero__lede {
        position: static;
        margin: var(--space-6) var(--space-4) 0;
        font-size: var(--text-lg);
        text-align: left;
    }

    .section {
        padding: var(--space-8) 0;
    }

    .site__footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}