/*
 * 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 documentation page in the town design language (public/assets/css/town.css).
 *
 * The guide's own markup is left alone: this file restyles the classes it
 * already uses (rail, section labels, tables, callouts, code) and is loaded
 * last so it wins over the page's inline stylesheet at equal specificity.
 */

/* Old page tokens, remapped for a light lavender page. The muted and green
   values are darkened so text drawn in them keeps a 4.5:1 contrast. */
body.town-page {
    --text-primary: var(--town-ink);
    --text-secondary: #585e6a;
    --text-muted: #5f6470;
    --border-light: var(--town-line);
    --border-color: var(--town-line-2);
    --bg-secondary: var(--town-card);
    --bg-tertiary: var(--town-inset);
    --color-highlight: var(--town-purple-ink);
    --color-tertiary: #157a51;
    --docs-prose: #2d3140;
    --docs-edge: 0 6px 0 var(--town-block-edge), 0 22px 36px -22px rgba(52, 36, 110, 0.3);
}

/* theme-light.css paints html[data-theme="light"] body, which outranks town.css's body.town-page. */
html[data-theme="light"] body.town-page { background: var(--town-sky); }

.docs-content a { color: var(--town-purple-ink); }
.docs-content a:hover { color: #5236b8; }

/* Keep keyboard focus visible everywhere on the page. */
.town-page .docs-layout a:focus-visible,
.town-page .docs-layout button:focus-visible,
.town-page .docs-tab:focus-visible,
.town-page .sidebar-toggle:focus-visible {
    outline: 2px solid var(--town-purple);
    outline-offset: 2px;
}

/* Per-tree accents: the dot/bar colour, and a darker ink for text drawn in it. */
.docs-layout[data-tree="experiments"] { --tree-ink: #6b47d6; }
.docs-layout[data-tree="annotator"]   { --tree-ink: #157a51; }
.docs-layout[data-tree="workspaces"]  { --tree-ink: #b45309; }

/* ── Title area ── */
.docs-title {
    position: relative;
    box-sizing: border-box;
    max-width: 1264px;
    margin: 0 auto;
    padding: 40px 32px 56px;
}
.docs-title h1 {
    margin-top: 22px;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--town-ink);
}
.docs-title-cloud {
    position: absolute;
    right: 32px;
    top: 6px;
    pointer-events: none;
}

/* The tree tabs, restyled as pills */
.docs-tabs,
.docs-tabs:hover {
    position: static;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    background: none;
    border: 0;
}
.docs-tab {
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13.5px;
    font-weight: 600;
    background: #fff;
    color: #2d3140;
    box-shadow: 0 2px 0 rgba(22, 22, 26, 0.07);
}
.docs-tab:hover { color: var(--town-ink); background: #fff; }
.docs-tab.active,
.docs-tab.active:hover { background: var(--town-ink); color: #fff; }

/* ── Layout ── */
.docs-layout {
    max-width: 1264px;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 64px;
    padding: 0 32px 80px;
    align-items: start;
}
.docs-content {
    --measure: 52rem;
    padding: 0 0 2rem;
}

/* ── Contents: a raised white block ── */
.docs-sidebar {
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    box-sizing: border-box;
    padding: 18px 14px;
    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);
    /* room for the underside, which the scroll box would otherwise clip */
    margin-bottom: 10px;
}
.sidebar-label {
    margin: 0;
    padding: 0 12px 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.chapter-row {
    padding: 8px 12px;
    border-radius: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #2d3140;
}
.chapter-row:hover { color: var(--town-ink); background: var(--town-sky); }
.chapter-row.here { color: var(--town-ink); background: #f1ecff; font-weight: 700; }
.chapter-dot { display: none; }
.chapter-count {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #6e6887;
}
.chapter-pages,
.rail-sections { border-left-color: var(--town-line); }
.chapter-pages a,
.rail-sections a {
    color: #585e6a;
    font-size: 13px;
}
.rail-sections a { font-size: 12.5px; }
.chapter-pages a:hover,
.rail-sections a:hover { color: var(--town-ink); background: var(--town-sky); }
.chapter-pages > a.here,
.rail-sections a.reading {
    color: var(--tree-ink, var(--town-purple-ink));
    border-left-color: var(--tree-accent, var(--town-purple));
    background: none;
    font-weight: 600;
}

/* ── Page header (chapter, page title, tick rail) ── */
.page-head { margin-bottom: 3rem; }
.page-chapter {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.4px;
    color: var(--tree-ink, var(--town-purple-ink));
}
.page-counter,
.page-stats { color: #585e6a; }
.docs-hero h1,
.page-head .docs-hero h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--town-ink);
}
.docs-hero .lead { color: var(--docs-prose); font-size: 17px; line-height: 1.75; }
.tick-rail a { background: var(--town-block-edge); }
.tick-rail a:hover { background: rgba(var(--tree-accent-rgb, 127, 90, 240), 0.6); }
.tick-rail a.read { background: rgba(var(--tree-accent-rgb, 127, 90, 240), 0.4); }

/* ── Sections ── */
.docs-section {
    margin-bottom: 72px;
    scroll-margin-top: 1.5rem;
}

/* The chapter eyebrow over each section: a small muted label with a colour dot */
.docs-page .section-label,
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font: 600 12px 'Plus Jakarta Sans', sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--town-ink-3);
}
.section-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tree-accent, #9b7bff);
    flex: none;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--town-ink);
    margin-bottom: 18px;
}

.docs-section p,
.docs-section ul,
.docs-section ol,
.section-text {
    color: var(--docs-prose);
    font-size: 16px;
    line-height: 1.75;
}
.docs-section h3 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--town-ink);
    margin-top: 2.5rem;
}
.docs-section h4 {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--town-ink);
}
.docs-section li > strong:first-child,
.docs-section strong { color: var(--town-ink); }
.docs-section hr { border-top: 1px solid var(--town-line-2); }
.docs-section figcaption { color: #585e6a; font-size: 13px; }

/* Links */
.xref {
    color: var(--town-purple-ink);
    border-bottom-color: rgba(107, 71, 214, 0.4);
}
.xref:hover { border-bottom-color: var(--town-purple-ink); }

/* ── Code, in a muted inset style ── */
.docs-section :not(pre) > code,
.key-settings code,
.concept-note code,
.guide-step-text code {
    background: var(--town-inset);
    color: #3d3852;
    border: 1px solid var(--town-line);
    padding: 0.08rem 0.36rem;
    border-radius: 6px;
}
.docs-section pre,
[data-theme="light"] .docs-section pre {
    background: var(--town-inset);
    border: 1px solid var(--town-line);
    border-radius: 14px;
    color: #2d3140;
}
.code-block,
[data-theme="light"] .code-block {
    background: var(--town-inset);
    border: 1px solid var(--town-line);
    border-radius: 14px;
}
[data-theme="light"] .code-header { background: rgba(22, 22, 26, 0.03); }
[data-theme="light"] .code-body { color: #2d3140; }
[data-theme="light"] .code-lang,
[data-theme="light"] .code-copy { color: #585e6a; }

/* ── Tables, set in raised blocks with a lavender header row ── */
.docs-section table {
    margin: 1.5rem 0 2.5rem;
    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);
    font-size: 14px;
}
.docs-section thead th {
    padding: 12px 20px;
    background: var(--town-sky);
    border-bottom: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #5f6470;
}
.docs-section tbody td {
    padding: 14px 20px;
    border-bottom: 0;
    border-top: 1px solid rgba(22, 22, 26, 0.06);
    color: #585e6a;
    line-height: 1.6;
}
.docs-section tbody tr:first-child td { border-top: 0; }
.docs-section tbody tr:hover { background: rgba(127, 90, 240, 0.03); }
.docs-section tbody td:first-child { color: var(--town-ink); font-weight: 600; }
.docs-section tbody td em { color: #2d3140; }

.param-table thead th { color: #5f6470; }
.param-table .param-field { color: var(--town-purple-ink); }
.concepts-table thead th { color: #5f6470; background: var(--town-sky); }

/* ── Callouts ── */
/* Amber: chapter-end notes and the overview's callout */
.chapter-end-note,
.docs-section p.docs-callout {
    padding: 16px 20px;
    border: 0;
    border-radius: 16px;
    background: #fff8ec;
    box-shadow: 0 4px 0 #f5e3bd;
    color: #585e6a;
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.7;
}
.docs-callout .callout-lead { color: var(--town-amber-ink); }

/* Lavender: quotes, notes and key settings */
.docs-section blockquote,
.concept-note,
.key-settings {
    border: 0;
    border-radius: 16px;
    background: #f1ecff;
    box-shadow: 0 4px 0 var(--town-block-edge);
    color: #2d3140;
}
.docs-section blockquote { padding: 16px 20px; font-size: 15px; }
.docs-section blockquote em { color: #585e6a; }
.concept-note { padding: 12px 16px; color: #585e6a; }
.key-settings-title { color: var(--town-purple-ink); }

/* White raised cards: walkthroughs, examples, reference and feature cards */
.walkthrough,
.example-card,
.ref-card,
.axis-card,
.guide-feature,
.hierarchy-tree,
.quick-start-steps li,
.journey-step {
    background: var(--town-card);
    border: 1px solid rgba(22, 22, 26, 0.06);
    box-shadow: var(--docs-edge);
}
.walkthrough { border-radius: 18px; padding: 18px 20px; margin: 1.75rem 0; }
.example-card,
.ref-card,
.axis-card,
.hierarchy-tree { border-radius: 20px; }
.guide-feature,
.quick-start-steps li { border-radius: 16px; }
.example-card:hover,
.example-card.open,
.guide-feature:hover,
.quick-start-steps li:hover { border-color: rgba(22, 22, 26, 0.06); }
.ref-card:hover,
.axis-card:hover {
    border-color: rgba(22, 22, 26, 0.06);
    transform: translateY(-2px);
    box-shadow: var(--docs-edge);
}
.walkthrough .walkthrough-figure,
.tut-figure,
.media-container {
    border: 1px solid var(--town-line);
    border-radius: 12px;
    background: var(--town-inset);
}
.walkthrough .clip-toggle { color: #585e6a; }

/* ── The four systems: the chambers figure (public/assets/js/town/docs-chambers.js) ── */
.docs-section figure.docs-chambers-figure { margin: 1.25rem 0 1.5rem; }
.docs-chambers {
    position: relative;
    aspect-ratio: 1100 / 520;
    border-radius: 22px;
    background: var(--town-sky-2);
    overflow: hidden;
}
.docs-chambers .chambers-still,
.docs-chambers .chambers-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.docs-chambers .chambers-stage canvas { display: block; width: 100%; height: 100%; }
/* The still image (labels drawn in) shows until the scene draws; the live labels after. */
.docs-chambers.is-live .chambers-still { display: none; }
.docs-chambers .chambers-tag {
    display: none;
    position: absolute;
    transform: translate(-50%, -100%);
    padding: 3px 10px;
    border-radius: 99px;
    background: #16161a;
    color: #fff;
    font: 600 12.5px/1.4 'Plus Jakarta Sans', sans-serif;
    white-space: nowrap;
    pointer-events: none;
}
.docs-chambers.is-live .chambers-tag { display: block; }
.docs-chambers .chambers-tag[data-below] { transform: translate(-50%, 20%); }
.docs-chambers .chambers-tag small { margin-left: 6px; font-weight: 500; font-size: 11.5px; opacity: 0.75; }
@media (max-width: 640px) {
    .docs-chambers .chambers-tag { padding: 2px 7px; font-size: 10.5px; }
    .docs-chambers .chambers-tag small { display: none; }
    /* Over the roofs, not above them, so the first label stays inside the frame. */
    .docs-chambers .chambers-tag[data-anchor="chamber1"],
    .docs-chambers .chambers-tag[data-anchor="chamber2"],
    .docs-chambers .chambers-tag[data-anchor="chamber3"] { transform: translate(-50%, 10%); }
}

/* ── Overview: the two parts, as cards ── */
.docs-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin: 1.25rem 0 2rem;
}
.docs-section .docs-parts p {
    margin: 0;
    padding: 22px 24px;
    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);
    font-size: 14.5px;
    line-height: 1.7;
    color: #585e6a;
}
.docs-parts strong {
    display: block;
    margin-bottom: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.3;
}

/* ── Overview: the three kinds of non-human participant, as cards ── */
.docs-section ul.docs-kinds {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.docs-kinds li {
    position: relative;
    min-height: 110px;
    margin: 0;
    padding: 18px 22px 18px 150px;
    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);
    font-size: 14.5px;
    line-height: 1.7;
    color: #585e6a;
}
.kind-pic {
    display: block;
    position: absolute;
    left: 12px;
    top: 18px;
    width: 120px;
    height: 110px;
    border-radius: 14px;
    background: var(--town-sky);
}
.kind-pic svg { display: block; }

/* ── Previous / next ── */
.page-nav {
    border-top: 0;
    padding-top: 0;
}
.page-nav a,
.page-nav .page-nav-end {
    border: 1px solid rgba(22, 22, 26, 0.06);
    border-radius: 16px;
    background: var(--town-card);
    box-shadow: 0 10px 0 var(--town-block-edge), 0 34px 50px -24px rgba(52, 36, 110, 0.34);
    padding: 14px 20px;
}
.page-nav a:hover { border-color: rgba(22, 22, 26, 0.06); transform: translateY(-1px); }
.page-nav .next.crosses { border-color: rgba(22, 22, 26, 0.06); }
.page-nav .page-nav-end {
    background: none;
    box-shadow: none;
    border: 1px dashed var(--town-line-2);
    color: #585e6a;
}
.page-nav-dir {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #5f6470;
    margin-bottom: 4px;
}
.page-nav-chapter { color: var(--tree-ink, var(--town-purple-ink)); letter-spacing: 1.2px; }
.page-nav-title { font-size: 16px; font-weight: 700; color: var(--town-ink); }

/* ── Mobile ── */
.sidebar-toggle {
    background: var(--town-ink);
    color: #fff;
    border: 0;
    box-shadow: 0 8px 18px -8px rgba(22, 22, 26, 0.5);
}
.sidebar-toggle:hover { background: #2d3140; color: #fff; }

@media (max-width: 1180px) and (min-width: 901px) {
    .docs-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
    .docs-title { padding: 24px 20px 36px; }
    .docs-title h1 { font-size: 36px; }
    .docs-title-cloud { display: none; }
    /* The drawer is fixed, so the content takes the single column. */
    .docs-layout { grid-template-columns: minmax(0, 1fr); padding: 0 20px 40px; gap: 0; }
    .docs-sidebar {
        top: 0;
        max-height: 100vh;
        margin: 0;
        border-radius: 0 20px 20px 0;
        border: 0;
        padding: 2rem 14px;
        background: var(--town-card);
    }
    .sidebar-overlay { background: rgba(22, 22, 26, 0.4); }
    .section-title { font-size: 26px; }
    .docs-hero h1,
    .page-head .docs-hero h1 { font-size: 28px; }
    .docs-parts { grid-template-columns: minmax(0, 1fr); }
    .docs-kinds li { padding: 16px 18px; }
    .kind-pic { position: static; margin: 0 0 12px -4px; }
    /* The drop shadow's underside would widen scrolling tables; keep it tight. */
    .docs-section table { box-shadow: 0 6px 0 var(--town-block-edge); }
}