/*
 * Carrier — experimental research platform.
 * Copyright (c) 2026 Jiahao Yang. All rights reserved.
 * Non-commercial academic use only; see LICENSE. Commercial use requires a licence.
 */

/*
 * The town design language, shared by the public pages (front page, docs,
 * tutorial, updates, login): a light lavender sky, flat isometric scenes,
 * dark sign labels with a pointer tail, raised "blocks" for cards, speech
 * bubbles for tags, and the island's earth edge as the footer.
 *
 * These pages are light only: they render with data-theme="light" and do not
 * load theme.js. Load this file after any older page stylesheet so its rules
 * win.
 */

:root {
    --town-ink: #16161a;
    --town-ink-2: #585e6a;
    --town-ink-3: #5f636c;   /* 5:1 on --town-sky */
    --town-paper: #f9f9fb;
    --town-sky: #f6f4fb;
    --town-sky-2: #efeafa;
    --town-card: #fdfcff;
    --town-inset: #f3f2f7;
    --town-line: rgba(22, 22, 26, 0.08);
    --town-line-2: rgba(22, 22, 26, 0.14);
    --town-purple: #7f5af0;
    --town-purple-ink: #6b47d6;
    --town-amber: #d97706;
    --town-amber-ink: #b45309;
    --town-green: #1a9a65;
    --town-you: #e8703f;
    --town-block-edge: #e2dbf3;
    --town-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body.town-page {
    margin: 0;
    background: var(--town-sky);
    color: var(--town-ink);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
/* theme-light.css paints html[data-theme="light"] body; the town's sky wins over it here */
html[data-theme="light"] body.town-page { background: var(--town-sky); }
body.town-page h1,
body.town-page h2,
body.town-page h3,
body.town-page h4 {
    font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

/* ── Header ── */
.town-header {
    position: relative;
    z-index: 20;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
    height: 76px;
    padding: 0 clamp(20px, 4vw, 56px);
    display: flex;
    align-items: center;
    gap: 36px;
    width: 100%;   /* stays full width even inside a flex-column body */
}
.town-header.over-hero {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.town-mark { display: flex; align-items: center; }
.town-mark img { height: 34px; width: auto; display: block; }
.town-nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.town-header .town-nav a { color: var(--town-ink-2); text-decoration: none; text-underline-offset: 8px; }
.town-nav a:hover { color: var(--town-ink); }
.town-nav a[aria-current="page"] { color: var(--town-ink); font-weight: 600; text-decoration: underline 2px var(--town-purple); }
.town-header-spacer { flex: 1; }
/* .town-header prefix: outranks the hero's own link colour when the header sits over it */
.town-header .town-login {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px;
    background: var(--town-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex: none;
}
.town-header .town-login:hover { background: #2d3140; }
.town-nav a:focus-visible,
.town-login:focus-visible,
.town-mark:focus-visible { outline: 2px solid var(--town-purple); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 720px) {
    .town-header { gap: 14px; height: 64px; }
    .town-header-spacer { display: none; }
    /* The nav takes what room is left and scrolls sideways inside it */
    .town-nav { flex: 1; min-width: 0; gap: 16px; font-size: 13px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .town-nav::-webkit-scrollbar { display: none; }
    .town-mark img { height: 24px; }
    .town-login { padding: 8px 14px; font-size: 12.5px; }
}

/* ── Components ── */

/* A dark sign with a pointer tail, like the labels over the town's buildings */
.town-sign {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-radius: 50px;
    background: var(--town-ink);
    color: #fff;
    font: 700 13px 'Space Grotesk', sans-serif;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px -8px rgba(22, 22, 26, 0.5);
}
.town-sign::after {
    content: '';
    position: absolute;
    left: 22px;
    bottom: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--town-ink);
}
.town-sign i { width: 8px; height: 8px; border-radius: 50%; background: var(--sw, #9b7bff); flex: none; }
.town-sign.small { font-size: 12px; padding: 5px 12px 5px 10px; }

/* A raised block: a card with a solid underside, like the objects in the 3D scene */
.town-block {
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 20px;
    box-shadow: 0 10px 0 var(--town-block-edge), 0 34px 50px -24px rgba(52, 36, 110, 0.34);
}

/* A speech bubble, used for tags */
.town-bubble {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 5px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(22, 22, 26, 0.07), 0 8px 16px -8px rgba(52, 36, 110, 0.28);
    font-size: 12.5px;
    font-weight: 600;
    color: #2d3140;
}
.town-bubble i { width: 16px; height: 16px; border-radius: 50%; background: var(--sw, var(--town-purple)); flex: none; }

/* Avatar dots: human, LLM agent, scripted bot, you */
.town-av {
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
}
.town-av.h { background: var(--town-purple); }
.town-av.ai { background: var(--town-amber); }
.town-av.b { background: var(--town-green); }
.town-av.you { background: var(--town-you); font-size: 7px; }

.town-eyebrow { font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; color: var(--town-purple-ink); }

.town-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 60px;
    border: 0;
    background: var(--town-purple);
    color: #fff;
    font: 600 15px 'Plus Jakarta Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 0 #5b3fc4, 0 18px 30px -12px rgba(127, 90, 240, 0.5);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.town-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #5b3fc4, 0 10px 20px -12px rgba(127, 90, 240, 0.5); }
.town-btn:focus-visible { outline: 2px solid var(--town-purple); outline-offset: 3px; }
.town-btn.ghost { background: var(--town-card); color: var(--town-ink); border: 1px solid var(--town-line-2); box-shadow: none; }

.town-scene svg { display: block; max-width: 100%; height: auto; }

/* ── Footer: the island's earth edge ── */
.town-footer {
    position: relative;
    margin-top: 40px;
    background: linear-gradient(180deg, #a97d55 0%, #845a39 40%, #744d30 100%);
    color: #fbf3e8;
}
.town-footer-edge { background: var(--town-sky); line-height: 0; }
.town-footer-edge svg { width: 100%; height: 70px; display: block; }
.town-footer-inner {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px clamp(20px, 4vw, 40px) 70px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.town-footer-text { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.town-footer-text small { font-size: 13px; color: #f1e2cf; }
.town-footer a { color: #fff; font-weight: 600; text-decoration: none; }
.town-footer a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .town-btn { transition: none; }
}