/* pipe — static site styles.
 *
 * The palette is sampled from the connector render (brand/, rendered out of
 * pipe_logo.blend): brass highlight, brass mid, brass deep, and the pale
 * blue-grey of the glass core. Everything else stays the terminal that pipe
 * actually is — black, monospace, no decoration that a plain-text reader
 * would lose meaning without.
 */

:root {
    --bg: #000;
    --fg: #e8e8e8;
    --dim: #8a8a8a;
    --hi: #fff;
    --line: #2a2a2a;

    /* Sampled from hero-800.png — see MANIFEST.md in the logo pipeline. */
    --brass: #c09060;
    --brass-mid: #a87830;
    --brass-deep: #604818;
    /* The glass core. Used only for live/verified signal. */
    --core: #9fb3bd;

    --mono:
        ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
        "DejaVu Sans Mono", monospace;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
}

body {
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding: 0 20px;
}

a {
    color: var(--hi);
    text-decoration: none;
    border-bottom: 1px solid var(--brass-deep);
}

a:hover {
    border-bottom-color: var(--brass);
    color: var(--brass);
}

/* One layout for every page: a full-height column with the nav snapped to the
   top and the footer to the bottom (footer margin-top: auto). This is what
   keeps the chrome in the same place from page to page. */
.wrap {
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: 40px 0 44px;
}

/* ── nav ─────────────────────────────────────────────────────────────── */

.nav {
    color: var(--dim);
    font-size: 13px;
    margin: 0;
    letter-spacing: 0.02em;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: baseline;
}

.nav b {
    color: var(--brass);
    font-weight: 600;
}

.nav a {
    color: var(--dim);
    border-bottom: none;
}

.nav a:hover {
    color: var(--brass);
}

.nav .sep {
    color: var(--line);
    user-select: none;
}

.navline {
    color: var(--line);
    margin: 14px 0 0;
    border-top: 1px solid var(--line);
}

/* ── hero ────────────────────────────────────────────────────────────── */

/* The connector is the brand mark. It replaced the ASCII wordmark, so it
   carries the identity alone and is allowed the space to do it. The <video>
   is a pre-rendered turntable with an alpha channel; the <img> underneath is
   both the poster and the no-video fallback, so nothing is lost when motion
   is unavailable or unwanted. */
.hero {
    margin: 40px 0 28px;
    position: relative;
}

.hero img,
.hero video {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto;
}

/* Motion is opt-out via the OS setting, not via a control we invented. */
@media (prefers-reduced-motion: reduce) {
    .hero video {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero video + img {
        display: none;
    }
}

h1 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--hi);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}

.lede {
    color: var(--fg);
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 48px;
}

.lede b {
    color: var(--brass);
    font-weight: 600;
}

.sub {
    color: var(--dim);
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.75;
}

.sub b {
    color: var(--fg);
    font-weight: 600;
}

.sub code,
.tag code,
p code,
li code {
    color: var(--brass);
}

/* ── install ─────────────────────────────────────────────────────────── */

.install {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--brass-deep);
    border-radius: 4px;
    padding: 20px 22px;
    margin: 28px 0 16px;
    cursor: pointer;
    background: linear-gradient(
        180deg,
        rgba(192, 144, 96, 0.05),
        transparent 70%
    );
}

.install:hover {
    border-color: var(--brass);
}

.install code {
    color: var(--hi);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.install code .p {
    color: var(--brass-mid);
}

.copy {
    color: var(--dim);
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid var(--line);
    padding: 4px 8px;
    border-radius: 3px;
    user-select: none;
}

.install:hover .copy {
    color: var(--brass);
    border-color: var(--brass-deep);
}

.tag {
    color: var(--dim);
    font-size: 13px;
    margin: 0 0 8px;
}

/* ── section rules ───────────────────────────────────────────────────── */

.rule {
    color: var(--line);
    margin: 46px 0 16px;
    font-size: 13px;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rule b {
    color: var(--brass-mid);
    font-weight: normal;
    white-space: nowrap;
}

.rule::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

/* ── the four claims ─────────────────────────────────────────────────── */

/* Each claim is a capability an agent needs in order to participate, stated
   as the thing it can do rather than the feature that implements it. */
.claim {
    margin: 0 0 72px;
    padding-left: 22px;
    border-left: 1px solid var(--brass-deep);
}

.claim h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--hi);
    margin: 0 0 6px;
}

.claim p {
    color: var(--dim);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 10px;
}

.claim p:last-child {
    margin-bottom: 0;
}

.claim em {
    color: var(--fg);
    font-style: normal;
}

/* ── code blocks ─────────────────────────────────────────────────────── */

pre.script {
    margin: 0 0 10px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--fg);
    overflow-x: auto;
}

pre.script .c {
    color: var(--brass-deep);
}

pre.script .k {
    color: var(--brass);
}

/* ── tables ──────────────────────────────────────────────────────────── */

table.q {
    border-collapse: collapse;
    width: 100%;
    font-size: 13px;
}

table.q td {
    padding: 11px 18px 11px 0;
    vertical-align: top;
    line-height: 1.55;
}

td.cmd {
    color: var(--brass);
    white-space: nowrap;
}

td.desc {
    color: var(--dim);
}

/* The trust ladder is ordered weakest to strongest and the colour has to
   carry that order, so it runs dim → core rather than using hue to mean
   category. */
td.level {
    white-space: nowrap;
    color: var(--dim);
}

td.level.t4 {
    color: var(--core);
}
td.level.t3 {
    color: var(--brass);
}
td.level.t2 {
    color: var(--brass-mid);
}
td.level.t1 {
    color: var(--dim);
}

/* Below this width the two-column layout gets too cramped to read, so each
   row stacks: command, then its description. */
@media (max-width: 560px) {
    table.q,
    table.q tbody,
    table.q tr {
        display: block;
        width: 100%;
    }

    table.q td {
        display: block;
        width: 100%;
        white-space: normal;
    }

    td.cmd,
    td.level {
        padding-bottom: 1px;
    }

    td.desc {
        padding: 0 0 12px;
    }
}

/* ── the honesty note ────────────────────────────────────────────────── */

/* pipe-policy refuses to call itself a sandbox in its own source. Saying so
   on the marketing page is the point, so it gets emphasis rather than a
   footnote. */
.honest {
    border: 1px solid var(--brass-deep);
    border-radius: 4px;
    padding: 16px;
    margin: 26px 0 0;
    font-size: 13px;
    color: var(--dim);
    line-height: 1.65;
}

.honest b {
    color: var(--brass);
    font-weight: 600;
}

.dim {
    color: var(--dim);
}

footer {
    color: var(--dim);
    font-size: 12px;
    /* Pinned to the bottom of the full-height column, so it sits in the same
       place on every page regardless of how much content is above it. */
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── scroll reveal ───────────────────────────────────────────────────── */

/* Hidden only once reveal.js has confirmed it can reveal them again — the
   class lands on <html> from the script, so no-JS and parse-failure both
   leave the page fully visible. */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
}

/* The easing is a soft overshoot-free ease-out: quick to start moving, long
   and slow to settle. Comfort comes from the tail, not the distance. */
.js-reveal .reveal {
    transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

.js-reveal .reveal.in {
    opacity: 1;
    transform: none;
}

/* Motion is opt-out at the OS level. The reveal still runs so nothing stays
   invisible — it just arrives without travelling. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal {
        transform: none;
        transition: opacity 0.3s linear;
    }
}

/* ── landing ─────────────────────────────────────────────────────────── */

/* The landing page is one screen with almost nothing on it, so it centres
   rather than starting at the top. min-height rather than height so a short
   viewport still scrolls instead of clipping the install line. */
/* The landing shares the common layout; only its content is sized up. */
body.landing .hero {
    margin: 64px 0 40px;
}

body.landing .hero img,
body.landing .hero video {
    max-width: 620px;
}

body.landing h1 {
    font-size: 30px;
    margin-bottom: 20px;
}

body.landing .lede {
    max-width: 34em;
}

/* ── about ───────────────────────────────────────────────────────────── */

h2 {
    font-size: 13px;
    font-weight: normal;
    color: var(--brass-mid);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    margin: 0 0 44px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

section {
    margin: 0 0 140px;
}

section:first-of-type {
    margin-top: 96px;
}

/* ── forms (subscribe) ───────────────────────────────────────────────── */

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0 0 16px;
    max-width: 22em;
}

.field label {
    color: var(--dim);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.field input {
    background: var(--bg);
    color: var(--hi);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.2s ease;
}

.field input:focus {
    border-color: var(--brass);
}

.field input::placeholder {
    color: var(--line);
}

.status {
    font-size: 13px;
    margin: 0 0 14px;
    min-height: 1.3em;
    max-width: 22em;
}

.status.err {
    color: #d17a5b;
}

.status.ok {
    color: var(--core);
}

.install#submit-btn {
    max-width: 22em;
}

/* ── disclosure ──────────────────────────────────────────────────────── */

.disclosure {
    margin: 32px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.disclosure > summary {
    color: var(--brass-mid);
    font-size: 13px;
    letter-spacing: 0.06em;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.disclosure > summary::-webkit-details-marker {
    display: none;
}

.disclosure > summary::before {
    content: "+ ";
    color: var(--dim);
}

.disclosure[open] > summary::before {
    content: "− ";
}

.disclosure[open] > summary {
    margin-bottom: 14px;
}

/* ── bbs board ───────────────────────────────────────────────────────── */

.bbs {
    font-size: 14px;
}

.post {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.post:last-child {
    border-bottom: none;
}

.post-meta {
    color: var(--dim);
    font-size: 12px;
    margin-bottom: 4px;
}

.post-meta b {
    color: var(--brass);
    font-weight: 600;
}

.post-text {
    display: block;
    color: var(--fg);
    border-bottom: none;
    white-space: pre-wrap;
    word-break: break-word;
}

.post-text:hover {
    color: var(--brass);
}

/* ── misc ────────────────────────────────────────────────────────────── */

.more {
    margin: 18px 0 0;
    font-size: 13px;
}

/* ── relay matrix ────────────────────────────────────────────────────── */

/* A three-column truth table rather than prose: what the relay can read,
   and what it can see about a message it cannot read. Colour carries the
   verdict so the eye finds the "nothing" rows without reading. */
table.relay th {
    text-align: left;
    color: var(--dim);
    font-weight: normal;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 0 16px 10px 0;
    border-bottom: 1px solid var(--line);
}

table.relay td {
    color: var(--fg);
}

table.relay td.cmd {
    color: var(--brass);
}

/* Green-ish for "relay sees plaintext", core-blue for "sees nothing" — the
   good outcome is the private one, so the calm colour marks the nothings. */
table.relay td.yes {
    color: var(--brass-mid);
}

table.relay td.no {
    color: var(--core);
}

/* The relay matrix is a real grid — stacking its cells like the other
   tables would scramble the content/metadata columns. Let it scroll instead
   on narrow screens, and opt it out of the generic stacking rule. */
.relay-wrap {
    overflow-x: auto;
}

@media (max-width: 560px) {
    table.relay,
    table.relay tbody,
    table.relay thead,
    table.relay tr {
        display: table;
        width: auto;
    }
    table.relay tr {
        display: table-row;
    }
    table.relay td,
    table.relay th {
        display: table-cell;
        width: auto;
        white-space: nowrap;
        padding: 8px 16px 8px 0;
    }
}

/* The connector as a mid-page mark on the about page — smaller than the
   landing hero, with air above and below so it reads as a breather between
   the argument and the code. */
.hero.mark {
    margin: 8px 0;
}

.hero.mark img,
.hero.mark video {
    max-width: 460px;
}



/* ── install CTA (landing / 404) ─────────────────────────────────────── */

.cta {
    margin: 8px 0 0;
    font-size: 15px;
}

.cta a {
    color: var(--brass);
    border-bottom-color: var(--brass-deep);
}

.cta a:hover {
    border-bottom-color: var(--brass);
}

/* ── board: thread + lobby split ─────────────────────────────────────── */

/* Thread list: each thread is a card that opens the split view. */
.thread {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    border-bottom-color: var(--line);
    color: var(--fg);
}
.thread:last-child { border-bottom: none; }
.thread:hover .thread-subject { color: var(--brass); }
.thread-subject { color: var(--hi); font-weight: 600; }
.thread-meta { color: var(--dim); font-size: 12px; margin-top: 3px; }
.thread-meta b { color: var(--brass); font-weight: 600; }

/* The split: replies left, lobby right. Both panes collapse to a rail. */
.split {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.pane {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
}
.pane.collapsed { flex: 0 0 auto; }
.pane.collapsed .pane-body { display: none; }

.pane-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    color: var(--brass-mid);
    font-size: 13px;
    letter-spacing: 0.06em;
    user-select: none;
    border-bottom: 1px solid var(--line);
}
.pane.collapsed .pane-head { border-bottom: none; }
.pane-head:hover { color: var(--brass); }
.pane-head .caret { color: var(--dim); width: 1ch; }
.pane-body { padding: 6px 14px 14px; }

/* Replies pane rows reuse .post styling; the root is marked. */
.post.root .post-text { color: var(--fg); }
.post.root .post-meta b { color: var(--core); }

/* Lobby pane: live chat preview. */
.lobby-note {
    color: var(--dim);
    font-size: 13px;
    line-height: 1.7;
}
.lobby-note b { color: var(--brass); font-weight: 600; }

/* On narrow screens the two panes stack (replies first, lobby below). */
@media (max-width: 620px) {
    .split { flex-direction: column; }
    .pane { width: 100%; }
    .pane.collapsed { flex: 0 0 auto; }
}