/* The live build feed (ZERO_TO_ONE_PLAN §6) — the one dark surface in the
   product. DEVELOPMENT_PLAN §3.2 terminal register: near-black #0B0B0C, a
   single cold-blue accent #4D7CFF used ONLY for the active phase and the
   final URL, monospace because monospace means "this is a fact". Motion is
   one thing, once: the pulse on the URL card when the build lands. */

.fe-build { margin-block: 1.1rem 1.6rem; }

.fe-build-term {
    background: #0B0B0C;
    border-radius: 10px;
    padding: 14px 16px;
}

/* The phase spine: eleven quiet words so the feed has a skeleton even when
   nobody reads the lines. The current phase is the only accented thing. */
.fe-phases {
    list-style: none;
    display: flex; flex-wrap: wrap; gap: .3rem .95rem;
    margin: 0 0 .8rem; padding: 0 0 .7rem;
    border-bottom: 1px solid #1C1C1F;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .72rem; letter-spacing: .02em;
    color: #4A4A52;
}
.fe-phases li.is-done { color: #8A8A93; }
.fe-phases li.is-done::before { content: "\2713\00a0"; color: #5C5C66; }
.fe-phases li.is-on { color: #4D7CFF; }

/* The terminal itself. No spinner, no fake lines: a line exists only because
   a receipt exists (§6.2). */
.fe-term {
    max-height: 340px; overflow-y: auto;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .83rem; line-height: 1.6;
    color: #C9C9D1;
    overscroll-behavior: contain;
}
.fe-term-line { white-space: pre-wrap; word-break: break-word; }
.fe-term-line::before { content: "> "; color: #5C5C66; }
.fe-term-dim { color: #6E6E78; }

/* The mid-build note box: quiet, under the feed, never a modal. */
.fe-note { margin-top: .8rem; }
.fe-note input {
    width: 100%;
    background: #121214; color: #C9C9D1;
    border: 1px solid #26262B; border-radius: 7px;
    padding: .5rem .7rem;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .83rem;
}
.fe-note input::placeholder { color: #5C5C66; }
.fe-note input:focus { outline: none; border-color: #3A3A42; }

/* The done state. The URL is the ah-ha; it gets the accent and the one
   animation the page is allowed. */
.fe-live-h { margin: 1.4rem 0 .6rem; font-size: 1.45rem; }
.fe-url-card {
    display: block;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: clamp(1.05rem, 3.4vw, 1.55rem);
    font-weight: 600;
    color: #4D7CFF !important;
    text-decoration: none;
    border: 1px solid #4D7CFF; border-radius: 10px;
    padding: 1rem 1.2rem;
    word-break: break-all;
    animation: fe-pulse 1.4s ease-out 1;
}
.fe-url-card:hover { text-decoration: underline; }
@keyframes fe-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(77, 124, 255, .45); }
    100% { box-shadow: 0 0 0 22px rgba(77, 124, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .fe-url-card { animation: none; }
}

/* The honest failure block: plain words, a link to the receipts, no theatre. */
.fe-build-failed {
    border-left: 3px solid #8A8A93;
    padding-left: 16px; margin-top: 1.2rem;
}

/* After the build: the feed folds into "watch it again" — it is the receipts
   wearing sentences, so the full history stays one click away. */
.fe-again { margin-top: 1.1rem; }
.fe-again > summary {
    cursor: pointer; list-style: none;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .8rem; color: #6E6E78;
}
.fe-again > summary::before { content: "+ "; }
.fe-again[open] > summary::before { content: "\2212 "; }
.fe-again .fe-build-term { margin-top: .6rem; }

/* ── The top strip ─────────────────────────────────────────────────────────
   The whole build log, fixed above ALL page chrome for the duration of the
   build (the founder's ask, and the competitor's signature surface). Pinned
   by the JS, which also pads the body; folded into "watch it again" at done.
   Reduced-motion readers never get this — the in-column #feTerm shows
   instead. */
.fe-term-top {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    background: #0B0B0C; color: #C9C9CF;
    font-family: var(--mono, ui-monospace, monospace);
    font-size: .8rem; line-height: 1.5;
    height: 9rem; overflow-y: auto;
    padding: .7rem 1rem .6rem;
    border-bottom: 1px solid #232327;
}
.fe-term-top .fe-term-line::before { content: "> "; color: #6E6E78; }
.fe-term-top .fe-term-line { white-space: pre-wrap; word-break: break-word; }
.fe-term-top.fe-term-top-folded { position: static; height: auto; max-height: 16rem; }
body.fe-strip-on { padding-top: 9rem; }

/* The mood: one word for "what's it doing", the phase's own label. */
.fe-mood { margin: 1.1rem 0 .4rem; }
.fe-mood-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    background: #4D7CFF; margin-right: .55rem; vertical-align: baseline;
}
.fe-mood-word { font-size: 1.35rem; font-weight: 600; }
.fe-mood-sub { color: #6E6E78; margin: .2rem 0 0; }

/* The single current-action card: the latest receipt line, live cursor. */
.fe-now {
    border: 1px solid var(--line, #E3E1DC); border-radius: 6px;
    background: var(--paper-2, #FBFAF8);
    padding: .8rem 1rem; margin: .8rem 0 1.1rem;
    font-size: .95rem;
}
.fe-cursor {
    display: inline-block; width: .55em; height: 1.05em;
    background: #E08A3C; margin-left: .35rem; vertical-align: text-bottom;
    animation: fe-blink 1.05s steps(1) infinite;
}
@keyframes fe-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .fe-cursor { animation: none; }
}

/* Site + document cards — the everything-panel, still one column. */
.fe-doclist { list-style: none; margin: .6rem 0 0; padding: 0; }
.fe-doclist li {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .3rem 0; border-top: 1px solid var(--line, #E3E1DC);
}
.fe-doclist li:first-child { border-top: 0; }
.fe-doc-body { line-height: 1.65; }
.fe-doc-body h2 { font-size: 1.1rem; margin: 1.1rem 0 .4rem; }
.fe-doc-body h3 { font-size: 1rem; margin: .9rem 0 .3rem; }
.fe-doc-body ul, .fe-doc-body ol { padding-left: 1.2rem; }