/* The Nest: shared by nest.html, nest-submit.html and nest-admin.html.
Same light palette and three-font system as open-field.html, so the Nest
reads as Peregrine. Sparkline colour is --spark (via currentColor). */
:root {
--bg: #f6f5f1;
--nest-bg: #ffffff;
--surface: #ffffff;
--surface-2: #efede6;
--ink: #1c1b22;
--ink-soft: #4a4855;
--ink-muted: #6b6876;
--line: #e4e1d8;
--accent: #6552e8;
--accent-ink: #4f3ccf;
--accent-pale: #ebe8ff;
--spark: #6552e8;
--up: #1f6f4a;
--down: #9a3b2e;
--shadow: 0 1px 2px rgba(28,27,34,0.06), 0 6px 18px rgba(28,27,34,0.06);
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #111117;
--nest-bg: #1b1b23;
--surface: #1b1b23;
--surface-2: #23232d;
--ink: #f1f0f5;
--ink-soft: #c9c7d3;
--ink-muted: #9a98a6;
--line: #2e2e3a;
--accent: #a599ff;
--accent-ink: #bdb4ff;
--accent-pale: #2a2645;
/* Validated for the dark chart surface (dataviz lightness band + 3:1
contrast on #1b1b23); #a599ff was too light for a data mark. */
--spark: #8f80f2;
--up: #6fcf9d;
--down: #f08c7c;
--shadow: none;
}
}
* { box-sizing: border-box; }
/* Components set display (flex/grid), which would beat the hidden attribute. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; }
a { color: var(--accent-ink); }
.wrap { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
header h1 { font-family: Fraunces, Georgia, serif; font-size: 2.1rem; margin: 0; letter-spacing: -0.01em; }
header p { margin: 4px 0 0; color: var(--ink-soft); }
.demo-note { margin-top: 16px; padding: 8px 12px; border-radius: 8px; background: var(--accent-pale); color: var(--accent-ink); font-size: 0.85rem; }
.tabs { display: flex; gap: 4px; margin: 24px 0 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { border: 0; background: none; padding: 10px 14px; font: 600 0.92rem Inter, sans-serif; color: var(--ink-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.sub { color: var(--ink-muted); font-size: 0.85rem; margin: 0 0 12px; }
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.row { display: grid; grid-template-columns: 28px 44px 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.rank { font: 600 0.85rem "IBM Plex Mono", monospace; color: var(--ink-muted); text-align: right; }
.logo { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font: 700 1.1rem Fraunces, serif; color: var(--ink-soft); overflow: hidden; }
.logo img { width: 100%; height: 100%; object-fit: cover; }
.name { font-weight: 600; text-decoration: none; color: var(--ink); }
.name:hover { text-decoration: underline; }
.tagline { color: var(--ink-soft); font-size: 0.9rem; }
.cat { font-size: 0.75rem; color: var(--ink-muted); }
.cat::first-letter { text-transform: uppercase; }
.trend { display: flex; align-items: center; gap: 10px; color: var(--spark); }
.delta { font: 600 0.8rem "IBM Plex Mono", monospace; min-width: 52px; text-align: right; }
.delta.up { color: var(--up); } .delta.down { color: var(--down); } .delta.new { color: var(--ink-muted); }
.vote { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; font: 600 0.9rem Inter, sans-serif; }
.vote[aria-pressed="true"] { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-ink); }
.vote:disabled { cursor: default; opacity: 0.7; }
.vote .arrow { font-size: 0.7rem; line-height: 1; }
.momentum { font: 600 0.85rem "IBM Plex Mono", monospace; color: var(--ink-soft); min-width: 48px; text-align: right; }
.empty, .error { padding: 32px 16px; text-align: center; color: var(--ink-muted); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 0.8rem; color: var(--ink-muted); }
.legend svg { vertical-align: middle; color: var(--spark); }
footer { margin-top: 32px; font-size: 0.8rem; color: var(--ink-muted); }
@media (max-width: 640px) {
.row { grid-template-columns: 22px 36px 1fr auto; gap: 10px; }
.logo { width: 36px; height: 36px; }
.trend .nest-spark { width: 72px; }
.row .trend { grid-column: 3 / 4; }
.row > :last-child { grid-row: 1 / span 2; grid-column: 4; }
}
/* Header nav (all Nest pages) */
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.topbar nav { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 0.9rem Inter, sans-serif; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #15131f; } }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.danger { color: var(--down); }
/* Forms (nest-submit.html) */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin-top: 24px; }
.card h2 { font: 700 1.2rem Fraunces, Georgia, serif; margin: 0 0 4px; }
.card > p { margin: 0 0 16px; color: var(--ink-soft); font-size: 0.9rem; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 600; font-size: 0.9rem; }
.field .hint { font-size: 0.8rem; color: var(--ink-muted); }
.field input, .field select, .field textarea { font: 400 0.95rem Inter, sans-serif; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field textarea { min-height: 110px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .two { grid-template-columns: 1fr; } }
.notice { padding: 10px 12px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; }
.notice.ok { background: var(--accent-pale); color: var(--accent-ink); }
.notice.bad { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
.status { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 0.75rem Inter, sans-serif; background: var(--surface-2); color: var(--ink-soft); }
.status.scheduled, .status.live { background: var(--accent-pale); color: var(--accent-ink); }
.status.rejected { color: var(--down); }
.simple-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.simple-row:first-child { border-top: 0; }
.meta { font-size: 0.8rem; color: var(--ink-muted); }
/* Admin (nest-admin.html) */
.section-title { font: 700 1.1rem Fraunces, Georgia, serif; margin: 32px 0 8px; }
.review { padding: 14px 16px; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; }
.review-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.review .desc { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.9rem; white-space: pre-line; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.actions input[type=date] { font: 0.9rem Inter, sans-serif; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font: 600 0.8rem "IBM Plex Mono", monospace; color: var(--ink-soft); }
.stats .warn { color: var(--down); }
.votes-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.82rem; }
.votes-table th, .votes-table td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); }
.votes-table th { color: var(--ink-muted); font-weight: 600; }
.votes-table code { font-family: "IBM Plex Mono", monospace; }
.table-scroll { overflow-x: auto; }
/* images/stones/nest.png — the user's own Nest tile (real art), in slate
blue, with a glow in The Nest's purple accent (--accent, #6552e8 light /
#a599ff dark). It was a "Peregrine Slate" blue-grey glow while the tile
was gold; against the blue tile that vanished, and purple both reads and
keeps The Nest apart from Open Field's rufous glow. The glow is its own
layer strictly BEHIND the stone: .nest-tile is a wrapper whose ::before
is a blurred block the size of the opaque stone (the PNG's stone sits
9.15% in from every edge, measured from its alpha), stacked under the
image. The image itself has no filter and no blend mode — drop-shadow on
the img let the glow tint the PNG's semi-transparent edge, and
mix-blend-mode: screen washed the stone out, which read as the glow
sitting on top of the tile. */
.nest-tile { position: relative; display: inline-block; isolation: isolate; width: 72px; height: 72px; flex-shrink: 0; }
/* The tile is the yellow bird-in-a-nest mark (same as the badges, lib/nest-badges.js
mark()): images/stones/nest.png is 612 px with the tile 9.15% in from each
edge and corner radius 9/34 of the tile (26.5%), so the glow block below
matches it exactly. */
.nest-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nest-tile::before { content: ""; position: absolute; inset: 9.15%; z-index: -1; border-radius: 26.5%; background: rgba(101,82,232,0.7); filter: blur(14px); }
@media (prefers-color-scheme: dark) {
.nest-tile::before { background: rgba(160,146,255,1); filter: blur(16px); }
}
.brand { display: flex; align-items: center; gap: 16px; }
@media (max-width: 640px) { .nest-tile { width: 56px; height: 56px; } .nest-tile::before { filter: blur(9px); } }
/* "Boosted" label: a paid boost is shown on every board row and product
page it affects (lib/nest.js BOOST). Deliberately visible: paid
placement must never read as organic rank. */
.boosted { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font: 600 0.7rem Inter, sans-serif; letter-spacing: 0.02em; color: var(--accent-ink); background: var(--accent-pale); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.btn.small { padding: 5px 12px; font-size: 0.82rem; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.subbar { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.subbar .sub { margin: 0; }
.scope { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--surface); }
.scope button { border: 0; background: none; padding: 5px 12px; border-radius: 999px; font: 600 0.8rem Inter, sans-serif; color: var(--ink-muted); cursor: pointer; }
.scope button[aria-pressed="true"] { background: var(--accent-pale); color: var(--accent-ink); }
.actions input:not([type=date]) { font: 0.88rem Inter, sans-serif; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
/* ---------- Peregrine Intelligence site header on the free tools ----------
DESIGN-AUDIT.md §44. The same header, wordmark and nav links as the dark
marketing pages (index.html's header/.nav/.logo rules, values copied), so
a visitor on a free tool can get back to the main site. Namespaced .pi-*
because the free tools already use .logo/.btn/header/.wrap for their own
UI. Two deliberate differences from the marketing header: it isn't sticky
(the tools have their own sticky bars and modals), and its one button is
"Run a brief free" (was "Try Peregrine OS" until §46.7) rather than Sign in + a second CTA, because the Nest has
its own, separate sign-in right below it. Always dark, in both color
schemes, same as the marketing header it mirrors. Keep in sync with the
copy in open-field.html. */
.pi-header { position: relative; z-index: 40; background: #0b0b12; border-bottom: 1px solid rgba(255,255,255,0.14); font-family: Inter, system-ui, sans-serif; }
.pi-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #a599ff 50%, transparent); opacity: 0.35; pointer-events: none; }
.pi-nav { max-width: 1180px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 72px; box-sizing: border-box; }
.pi-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.pi-logo img { width: 28px; height: 28px; display: block; }
.pi-logo-name { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: #ffffff; line-height: 1; }
.pi-links { display: flex; align-items: center; gap: 2rem; }
.pi-links a { position: relative; font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.72); text-decoration: none; transition: color 0.15s; }
.pi-links a:hover { color: #a599ff; }
.pi-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #a599ff; transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.pi-links a:hover::after { transform: scaleX(1); }
.pi-cta { display: flex; align-items: center; gap: 0.75rem; }
.pi-btn { display: inline-flex; align-items: center; justify-content: center; font: 600 0.85rem Inter, sans-serif; border-radius: 6px; padding: 0.6rem 1.15rem; text-decoration: none; white-space: nowrap; background: #6552e8; color: #ffffff; border: 1px solid transparent; transition: filter 0.15s; }
.pi-btn:hover { filter: brightness(1.12); color: #ffffff; }
.pi-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; }
.pi-toggle span { display: block; width: 100%; height: 2px; background: #ffffff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.pi-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pi-toggle.open span:nth-child(2) { opacity: 0; }
.pi-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pi-links a:focus-visible, .pi-btn:focus-visible, .pi-logo:focus-visible, .pi-toggle:focus-visible { outline: 2px solid #a599ff; outline-offset: 2px; }
@media (max-width: 860px) {
.pi-toggle { display: flex; }
.pi-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #0b0b12; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 0.5rem 2rem 1rem; }
.pi-links a { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.pi-links a:last-child { border-bottom: none; }
.pi-links a::after { display: none; }
.pi-links.open { display: flex; }
}
@media (max-width: 560px) {
.pi-nav { padding: 0 1.1rem; gap: 0.5rem; }
.pi-cta { gap: 0.5rem; }
.pi-btn { padding: 0.55rem 0.8rem; font-size: 0.78rem; }
}
/* DESIGN-AUDIT.md §45.4 (2026-10-24): "Services" joined this header's
links. At the old 860px breakpoint the row left ~6px between logo,
links and button, so this header now collapses to the hamburger at
1100px, the same point as the marketing header, reusing its own mobile
rules unchanged. Links never wrap, and the gap tightens below 1240px. */
.pi-links a { white-space: nowrap; }
@media (max-width: 1240px) { .pi-links { gap: 1.4rem; } }
@media (max-width: 1100px) {
.pi-toggle { display: flex; }
.pi-links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #0b0b12; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 0.5rem 2rem 1rem; }
.pi-links a { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.pi-links a:last-child { border-bottom: none; }
.pi-links a::after { display: none; }
.pi-links.open { display: flex; }
}
/* DESIGN-AUDIT.md §46.7: "Run a brief free" is a little wider than the old
label; at 360px and below the row tightens so it still fits at 320px. */
@media (max-width: 360px) {
.pi-nav { padding: 0 0.8rem; gap: 0.4rem; }
.pi-cta { gap: 0.4rem; }
.pi-btn { padding: 0.5rem 0.65rem; font-size: 0.74rem; }
.pi-logo-name { font-size: 1.05rem; }
}