/*
 * Locate2u Mesh — documentation site styles.
 *
 * Every colour, font, radius, and shadow comes from /brand/brand.css.
 * If something feels missing, add it to the source-of-truth in
 * loc-mesh/design/brand/tokens/colors_and_type.css and re-sync — don't
 * invent a local one-off here.
 */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--l2u-font-sans);
    color: var(--l2u-text-body);
    background: var(--l2u-cream);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

/* ============================================================
   Nav
   ============================================================ */

.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-6);
    height: 76px;
    padding: 0 var(--l2u-s-20);
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    border-bottom: 1px solid var(--l2u-dark-border);
}

/* ---- Brand lockup ------------------------------------------------------
   Canonical "inline" lockup (design/brand/source → MeshLockup):
   [Locate2u wordmark] · [mesh mark] mesh. Shared by the nav and footer.
   The logo-classic art places the wordmark high in its frame, so we nudge it
   down (~15.5% of its own height) to optically line up with the "mesh" text. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-3);
    color: var(--fg-on-dark);
}

.brand-lockup__logo {
    width: auto;
    align-self: center;
    transform: translateY(15.5%);
}

.brand-lockup__sep {
    width: 1px;
    align-self: center;
    background: var(--l2u-dark-border-strong);
}

.brand-lockup__mesh {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
}

.brand-lockup__product {
    font-family: var(--l2u-font-mono);
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--fg-on-dark);
}

.nav__logo { height: 22px; }
.nav__mark { height: 21px; width: 21px; }
.nav__product { font-size: 16px; }
.nav .brand-lockup__sep { height: 18px; }

.nav__links {
    display: flex;
    gap: var(--l2u-s-7);
}

.nav__links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--l2u-on-dark-78);
    transition: color .15s;
}

.nav__links a:hover { color: var(--fg-on-dark); }

.nav__cta {
    display: flex;
    align-items: center;
    gap: var(--l2u-s-3);
}

/* ---- Nav search --------------------------------------------------------
   The compact sibling of the hero box. Same .search wrapper and the same
   script drives both; only the input chrome differs. */

.nav__search {
    display: flex;
    align-items: center;
    gap: var(--l2u-s-2);
    width: 100%;
    height: 36px;
    padding: 0 var(--l2u-s-3);
    background: var(--l2u-dark-fill);
    border: 1px solid var(--l2u-dark-border-strong);
    border-radius: var(--l2u-r-pill);
    color: var(--l2u-on-dark-45);
    transition: border-color .15s, background .15s;
}

.nav__search:focus-within {
    background: var(--l2u-dark-fill-strong);
    border-color: var(--l2u-on-dark-45);
}

.nav__search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--l2u-font-sans);
    font-size: 13px;
    color: var(--fg-on-dark);
}
.nav__search input::placeholder { color: var(--l2u-on-dark-45); }

.search--nav {
    width: 220px;
    flex: 0 1 220px;
}

/* Sign in sits beside Register as a quiet text link, so the filled button
   carries the one primary action. Matches public-landing's .link-mute — the
   two surfaces share a nav and must not drift apart visually. */
.link-mute {
    font-size: 14px;
    font-weight: 500;
    color: var(--l2u-on-dark-78);
    white-space: nowrap;
    transition: color .15s;
}

.link-mute:hover { color: var(--fg-on-dark); }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    border-radius: var(--l2u-r-pill);
    font-family: var(--l2u-font-sans);
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s, box-shadow .15s, background .15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn--sm {
    padding: var(--l2u-s-2) var(--l2u-s-4);
    font-size: 13px;
    height: 36px;
}

.btn--lg {
    padding: var(--l2u-s-3) var(--l2u-s-6);
    font-size: 15px;
    height: 48px;
}

.btn--primary {
    background: var(--l2u-primary);
    color: var(--fg-on-dark);
}
.btn--primary:hover {
    transform: translateY(-1px);
}
.btn--primary.btn--glow {
    box-shadow: var(--l2u-shadow-cta-blue);
}

/* ============================================================
   Pills + status dots
   ============================================================ */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    padding: var(--l2u-s-2) var(--l2u-s-3);
    border-radius: var(--l2u-r-pill);
    font-size: 11px;
    width: fit-content;
}

.pill--dark {
    background: var(--l2u-dark-fill);
    border: 1px solid var(--l2u-dark-border-strong);
    color: var(--l2u-on-dark-9);
}

/* brand.css hard-codes .l2u-mono { color: navy }. Where a mono span is nested
   inside a dark panel (rather than carrying the panel class itself), that navy
   wins and the text disappears. Re-inherit the panel's light colour. */
.pill--dark .l2u-mono,
.code-panel__route .l2u-mono {
    color: inherit;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-text-mute-2);
    flex-shrink: 0;
}
.status-dot--success { background: var(--l2u-success); }

@keyframes l2u-pulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50%      { box-shadow: 0 0 0 4px rgba(45, 210, 122, 0); opacity: 0.7; }
}
.status-dot--pulse {
    color: var(--l2u-success);
    animation: l2u-pulse 1.6s infinite ease-in-out;
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
    position: relative;
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-20) var(--l2u-s-20) calc(var(--l2u-s-20) + var(--l2u-s-12));
}

/* ⚠️ No `overflow: hidden` on .hero. The search results panel is anchored to
   the search box and is taller than the space left below it, so clipping the
   hero cuts the results list off mid-result. Nothing needs the clip: the only
   absolutely-positioned child is .hero__bg, which is pinned to inset: 0 and
   so cannot spill in the first place. */

.hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, transparent, var(--l2u-dark-blue) 70%),
        radial-gradient(circle at 1px 1px, rgba(79,139,255,0.18) 1px, transparent 1.5px) 0 0 / 40px 40px;
    opacity: 0.6;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--l2u-s-5);
}

.hero__title {
    margin: 0;
    font-family: var(--l2u-font-sans);
    font-weight: 900;
    font-size: 64px;
    line-height: 68px;
    letter-spacing: -2px;
    color: var(--fg-on-dark);
}

.hero__lead {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
    color: var(--l2u-on-dark-7);
    max-width: 600px;
}

.hero__search {
    display: flex;
    align-items: center;
    gap: var(--l2u-s-3);
    width: 100%;
    max-width: 520px;
    margin-top: var(--l2u-s-3);
    padding: 0 var(--l2u-s-5);
    height: 52px;
    background: var(--l2u-dark-fill);
    border: 1px solid var(--l2u-dark-border-strong);
    border-radius: var(--l2u-r-pill);
    color: var(--l2u-on-dark-45);
}

.hero__search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--l2u-font-sans);
    font-size: 15px;
    color: var(--fg-on-dark);
}
.hero__search input::placeholder { color: var(--l2u-on-dark-45); }

/* ---- Search results ----------------------------------------------------
   The panel is absolutely positioned so opening it does not shove the page
   below it downwards. .search is the positioning context and also the
   "click outside to close" boundary search.js tests against. */

.search {
    position: relative;
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search__key {
    font-family: var(--l2u-font-mono);
    font-size: 11px;
    line-height: 1;
    padding: 4px 7px;
    border-radius: var(--l2u-r-xs);
    background: var(--l2u-dark-fill-strong);
    border: 1px solid var(--l2u-dark-border-strong);
    color: var(--l2u-on-dark-45);
}

.search__panel {
    position: absolute;
    top: calc(100% + var(--l2u-s-2));
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--l2u-s-3);
    text-align: left;
    background: var(--l2u-dark-blue);
    border: 1px solid var(--l2u-dark-border-strong);
    border-radius: var(--l2u-r-xl);
    box-shadow: var(--l2u-shadow-toast);
}

/* The nav box is 220px, which is too narrow to read a result in. The panel
   breaks out of that width and hangs from the right edge so it stays inside
   the viewport rather than pushing past it. */
.search--nav .search__panel {
    left: auto;
    right: 0;
    width: 420px;
}

.search__status {
    margin: 0 0 var(--l2u-s-2);
    padding: 0 var(--l2u-s-3);
    font-size: 12px;
    color: var(--l2u-on-dark-45);
}

.search__results {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search__result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--l2u-s-3);
    border-radius: var(--l2u-r-sm);
    cursor: pointer;
}

/* Hover and keyboard selection are the same state deliberately — the
   highlight a mouse user sees is the one Arrow keys move. */
.search__result:hover,
.search__result.is-active {
    background: var(--l2u-dark-fill-strong);
}

.search__result-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--fg-on-dark);
}

.search__result-excerpt {
    font-size: 13px;
    line-height: 19px;
    color: var(--l2u-on-dark-5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pagefind wraps matched terms in <mark>. The browser default is black text
   on yellow, which is unreadable on the dark panel. */
.search__result-excerpt mark {
    background: transparent;
    color: var(--fg-on-dark);
    font-weight: 500;
}

/* ============================================================
   Section heads + doc-section cards
   ============================================================ */

.sections {
    padding: calc(var(--l2u-s-20) + var(--l2u-s-12)) var(--l2u-s-20);
    max-width: 1280px;
    margin: 0 auto;
}

.section__head {
    max-width: 760px;
    margin-bottom: var(--l2u-s-12);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
}

.section__head .l2u-eyebrow { margin: 0; }
.section__head h2 { margin: 0; }
.section__head .l2u-lead { margin: 0; }

.sections__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--l2u-s-5);
}

.doc-card {
    background: var(--l2u-white);
    border: 1px solid var(--l2u-border);
    border-radius: var(--l2u-r-2xl);
    padding: var(--l2u-s-7);
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
    box-shadow: var(--l2u-shadow-card);
    transition: transform .15s, box-shadow .2s;
}
.doc-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(15,31,56,0.06), 0 14px 32px rgba(15,31,56,0.10);
}

.doc-card__icon {
    width: 44px; height: 44px;
    border-radius: var(--l2u-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-card__title { margin: 0; }
.doc-card__body  { margin: 0; flex: 1; }

.doc-card__link {
    color: var(--l2u-primary);
    letter-spacing: 1px;
    font-size: 11px;
}

/* ============================================================
   Quickstart band
   ============================================================ */

.quickstart {
    background: var(--l2u-cream-2);
    border-top: 1px solid var(--l2u-border);
    border-bottom: 1px solid var(--l2u-border);
    padding: calc(var(--l2u-s-20)) var(--l2u-s-20);
}

.quickstart__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--l2u-s-16);
    align-items: center;
}

.quickstart__copy {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
}
.quickstart__copy .l2u-eyebrow { margin: 0; }
.quickstart__copy h2 { margin: 0; }
.quickstart__copy .l2u-lead { margin: 0; }

.quickstart__steps {
    list-style: none;
    margin: var(--l2u-s-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
}

.quickstart__steps li {
    display: flex;
    align-items: center;
    gap: var(--l2u-s-3);
}

.quickstart__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-primary);
    color: var(--fg-on-dark);
    font-family: var(--l2u-font-mono);
    font-size: 12px;
    flex-shrink: 0;
}

/* ============================================================
   Code panel
   ============================================================ */

.code-panel {
    background: var(--l2u-dark-blue);
    border: 1px solid var(--l2u-dark-border-strong);
    border-radius: var(--l2u-r-xl);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.40);
}

.code-panel__head {
    padding: var(--l2u-s-3) var(--l2u-s-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--l2u-dark-border);
}

.code-panel__route {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-3);
    font-size: 11px;
    color: var(--l2u-on-dark-7);
    letter-spacing: 1.2px;
}

.code-panel__dot {
    width: 8px; height: 8px;
    border-radius: var(--l2u-r-pill);
    background: var(--l2u-primary);
}

.code-panel__status {
    display: inline-flex;
    align-items: center;
    gap: var(--l2u-s-2);
    font-size: 10px;
    color: var(--l2u-on-dark-5);
}

.code-panel__body {
    margin: 0;
    padding: var(--l2u-s-5) var(--l2u-s-6);
    font-family: var(--l2u-font-mono);
    font-size: 13px;
    line-height: 22px;
    color: var(--l2u-on-dark-78);
    overflow-x: auto;
}

.code-panel__foot {
    border-top: 1px solid var(--l2u-dark-border);
    padding: var(--l2u-s-3) var(--l2u-s-5);
    display: flex;
    gap: var(--l2u-s-3);
    align-items: center;
    font-size: 11px;
    color: var(--l2u-on-dark-5);
}

.code-panel__arrow { color: var(--l2u-primary); }

/* Syntax tokens */
.c-cmt { color: var(--l2u-on-dark-4); }
.c-kw  { color: var(--l2u-primary); }
.c-str { color: #7DD3A3; }
.c-num { color: #F6C77C; }

/* ============================================================
   CTA band
   ============================================================ */

.cta-band {
    background: var(--l2u-bluish-grey);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-16) var(--l2u-s-20);
}

.cta-band__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--l2u-s-12);
}

.cta-band__title {
    margin: var(--l2u-s-3) 0 0;
    font-family: var(--l2u-font-sans);
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.8px;
    color: var(--fg-on-dark);
    max-width: 760px;
}

/* ============================================================
   Footer
   ============================================================ */

.foot {
    background: var(--l2u-dark-blue);
    color: var(--fg-on-dark);
    padding: var(--l2u-s-16) var(--l2u-s-20) var(--l2u-s-12);
}

.foot__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--l2u-s-12);
}

.foot__brand {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-4);
}

.foot__lockup { align-self: flex-start; }
.foot__logo { height: 22px; }
.foot__mark { height: 20px; width: 20px; }
.foot__product { font-size: 16px; }
.foot .brand-lockup__sep { height: 17px; }

.foot__tagline {
    color: var(--l2u-on-dark-7);
    max-width: 320px;
}

.foot__env {
    color: var(--l2u-on-dark-45);
}

.foot__cols {
    display: contents;
}

.foot__col {
    display: flex;
    flex-direction: column;
    gap: var(--l2u-s-3);
}

.foot__col p { margin: 0 0 var(--l2u-s-2); }

.foot__col a {
    color: var(--l2u-on-dark-7);
    font-size: 14px;
    transition: color .15s;
}
.foot__col a:hover { color: var(--fg-on-dark); }

.foot__copyright {
    max-width: 1280px;
    margin: var(--l2u-s-12) auto 0;
    color: var(--l2u-on-dark-4);
    padding-top: var(--l2u-s-6);
    border-top: 1px solid var(--l2u-dark-border);
}

/* ============================================================
   Responsive — narrow viewports collapse columns
   ============================================================ */

@media (max-width: 960px) {
    .nav { padding: 0 var(--l2u-s-6); }
    .nav__links { display: none; }
    .hero { padding: var(--l2u-s-12) var(--l2u-s-6) calc(var(--l2u-s-16)); }
    .hero__title { font-size: 44px; line-height: 48px; letter-spacing: -1.4px; }
    .sections { padding: var(--l2u-s-16) var(--l2u-s-6); }
    .sections__grid { grid-template-columns: 1fr; }
    .quickstart { padding: var(--l2u-s-16) var(--l2u-s-6); }
    .quickstart__inner { grid-template-columns: 1fr; gap: var(--l2u-s-12); }
    .cta-band { padding: var(--l2u-s-12) var(--l2u-s-6); }
    .cta-band__inner { flex-direction: column; align-items: flex-start; gap: var(--l2u-s-6); }
    .cta-band__title { font-size: 28px; line-height: 36px; }
    .foot { padding: var(--l2u-s-12) var(--l2u-s-6); }
    .foot__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 540px) {
    .foot__inner { grid-template-columns: 1fr; }
    .hero__title { font-size: 36px; line-height: 40px; }
}