/ gives us the toggle
without any JS; the summary is styled as an inline chip and the
agent list flows below when expanded. */
.mood-weather-strip .mood-chip-details {
display: inline-block;
}
.mood-weather-strip .mood-chip-details > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
user-select: none;
}
/* Hide the default ▶ marker in WebKit + Blink. */
.mood-weather-strip .mood-chip-details > summary::-webkit-details-marker {
display: none;
}
.mood-weather-strip .mood-chip-details > summary strong {
font-weight: 600;
}
.mood-weather-strip .mood-chip-details[open] > summary::after {
content: " ▾";
color: inherit;
opacity: 0.8;
}
.mood-weather-strip .mood-chip-details:not([open]) > summary::after {
content: " ▸";
color: inherit;
opacity: 0.6;
}
.mood-weather-strip .mood-chip-details[open] {
/* Take the full row when expanded so the agent list wraps cleanly
under the mood chip instead of cramming next to the next mood. */
display: block;
width: 100%;
}
.mood-agent-list {
margin-top: 0.4rem;
margin-left: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
/* v0.99.1 — agent chips inside the mood-weather expanders (and
reusable elsewhere). Eight-color rotation keyed by the index of
the agent within its grouping; subtle backgrounds so a long list
still reads cleanly. */
.chip.agent-chip {
text-decoration: none;
transition: filter 0.12s ease;
}
.chip.agent-chip:hover {
filter: brightness(1.15);
}
.chip.agent-chip.agent-color-0 { background: rgba(91,157,255,0.18); border-color: #5b9dff; }
.chip.agent-chip.agent-color-1 { background: rgba(74,222,128,0.18); border-color: #4ade80; }
.chip.agent-chip.agent-color-2 { background: rgba(251,146,60,0.20); border-color: #fb923c; }
.chip.agent-chip.agent-color-3 { background: rgba(167,139,250,0.20); border-color: #a78bfa; }
.chip.agent-chip.agent-color-4 { background: rgba(34,211,238,0.18); border-color: #22d3ee; }
.chip.agent-chip.agent-color-5 { background: rgba(244,114,182,0.20); border-color: #f472b6; }
.chip.agent-chip.agent-color-6 { background: rgba(250,204,21,0.20); border-color: #facc15; }
.chip.agent-chip.agent-color-7 { background: rgba(239,91,91,0.20); border-color: #ef5b5b; }
.right-now-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 0.75rem;
}
.right-now-row > .card {
margin-bottom: 0;
}
.right-now-list {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
}
.right-now-list li {
padding: 0.35rem 0;
border-bottom: 1px dashed var(--border);
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: baseline;
}
.right-now-list li:last-child {
border-bottom: none;
}
@media (max-width: 720px) {
.right-now-row {
grid-template-columns: 1fr;
}
}
/* v0.101.0 (BEACONS) — intergalactic board cards. Stacked list of
beacons, each a small slightly-tilted card. The glyph is the
source world's "letterhead" — operator-picked emoji or short
string. Era stamp + author + body + tag. Echoes get a thin
border accent so the operator sees at-a-glance "this was
amplified, not authored." */
.beacon-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.beacon-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 0.85rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
transition: border-color 0.15s ease;
}
.beacon-card:hover { border-color: var(--accent, #5b9dff); }
.beacon-card-echo {
border-left: 3px solid rgba(192, 132, 252, 0.55); /* jewel-tone accent */
}
.beacon-card-header {
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
}
.beacon-glyph {
font-size: 1.35rem;
line-height: 1;
}
.beacon-source-world strong { color: var(--text); }
.beacon-stamp { margin-left: auto; font-variant-numeric: tabular-nums; }
.beacon-author { color: var(--text-soft, #d1d5db); font-size: 0.92rem; }
.beacon-text {
margin: 0;
font-size: 1.02rem;
line-height: 1.45;
color: var(--text);
}
.beacon-card-footer {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 0.25rem;
}
.beacon-tag {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.78rem;
background: rgba(91, 157, 255, 0.10);
border: 1px solid rgba(91, 157, 255, 0.25);
color: var(--accent);
padding: 0.15rem 0.55rem;
border-radius: 999px;
}
/* v0.101.3 ux patch — inline style attributes moved out of the
intergalactic-board template per the ux-reviewer's "let CSS
handle CSS" note. */
.beacon-page-note { font-size: 0.8rem; }
.beacon-empty-list { margin-left: 1.25rem; }
.beacon-redact-reason { margin-right: 0.5rem; }
/* ============================================================
v0.101.x — Sunday fun round 1 — visual delight
============================================================ */
/* Item 1 — Dream-journal drift entrance. Pure CSS staggered
fade-up on first render. Respects prefers-reduced-motion. */
@keyframes dreamDrift {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.dream-feed .dream-row {
animation: dreamDrift 380ms ease-out both;
}
.dream-feed .dream-row:nth-child(1) { animation-delay: 0ms; }
.dream-feed .dream-row:nth-child(2) { animation-delay: 80ms; }
.dream-feed .dream-row:nth-child(3) { animation-delay: 160ms; }
.dream-feed .dream-row:nth-child(4) { animation-delay: 240ms; }
.dream-feed .dream-row:nth-child(5) { animation-delay: 320ms; }
.dream-feed .dream-row:nth-child(6) { animation-delay: 400ms; }
.dream-feed .dream-row:nth-child(7) { animation-delay: 480ms; }
.dream-feed .dream-row:nth-child(8) { animation-delay: 560ms; }
.dream-feed .dream-row:nth-child(n+9) { animation-delay: 640ms; }
@media (prefers-reduced-motion: reduce) {
.dream-feed .dream-row { animation: none; }
}
/* Item 3 — Beacon glyph constellation hover. JS adds
.glyph-constellation-pulse to sibling cards from the same
source-world on hover; the glyph throbs gently. */
@keyframes glyphConstellationPulse {
0% { transform: scale(1); text-shadow: none; }
50% { transform: scale(1.18); text-shadow: 0 0 12px rgba(192, 132, 252, 0.7); }
100% { transform: scale(1); text-shadow: none; }
}
.beacon-card .beacon-glyph {
transition: transform 200ms ease-out;
display: inline-block;
}
.beacon-card.glyph-constellation-pulse .beacon-glyph {
animation: glyphConstellationPulse 900ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.beacon-card.glyph-constellation-pulse .beacon-glyph { animation: none; }
}
/* Item 4 — Live-feed heartbeat pulse. A small dot in the top-
right corner fades on each page load (and now, since v0.432.0,
on each polling-fetch tick via the .is-pulsing toggle in
live-feed-poll.js — the meta-refresh's visible heartbeat
without the focus-trash).
v0.432.1 (audit BLOCKING) — animation lives on .is-pulsing
instead of the bare class. Pre-fix the bare-class binding
only fired on element insertion, so the JS toggle was a
no-op and the dot was silent on every post-load tick. */
.live-heartbeat {
position: fixed;
top: 4.5rem;
right: 1.25rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent, #5b9dff);
box-shadow: 0 0 8px rgba(91, 157, 255, 0.6);
opacity: 0;
pointer-events: none;
}
/* Initial-load pulse — fires once at element-insertion time
so the operator sees the first heartbeat without the JS
needing to fire. The polling shim then toggles .is-pulsing
on subsequent ticks (same animation, re-applied). */
.live-heartbeat {
animation: heartbeatPulse 1400ms ease-out;
}
.live-heartbeat.is-pulsing {
animation: heartbeatPulse 1400ms ease-out;
}
@keyframes heartbeatPulse {
0% { opacity: 0; transform: scale(0.6); }
20% { opacity: 0.95; transform: scale(1.0); }
100% { opacity: 0; transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
.live-heartbeat { display: none; }
}
/* v0.92 audit fix — mood-board grid styles. Pre-fix the template
at templates/mood-board.html referenced .mood-board-grid /
.mood-board-tile / .tile-placeholder but no CSS rule existed:
auto-curated tiles (which always start image-less + caption-only
until the image-gen pipeline back-fills) rendered as unstyled
divs that read as "the page is broken." The placeholder treatment
below makes "image pending" a deliberate visual state. */
.mood-board-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
.mood-board-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.mood-board-tile:hover {
border-color: var(--accent, #5b9dff);
}
.mood-board-tile figure {
margin: 0;
display: flex;
flex-direction: column;
}
.mood-board-tile img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
.mood-board-tile .tile-placeholder {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
45deg,
rgba(148, 163, 184, 0.05),
rgba(148, 163, 184, 0.05) 10px,
rgba(148, 163, 184, 0.10) 10px,
rgba(148, 163, 184, 0.10) 20px
);
border-bottom: 1px dashed var(--border);
}
.mood-board-tile figcaption {
padding: 0.6rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
}
.mood-board-tile figcaption strong {
font-weight: 600;
font-size: 0.78rem;
color: var(--muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* v0.92 audit fix — .chip.research-only was used on live-feed.html
+ mood-board.html headers but had no CSS. Now reads as a quieter
muted-dashed chip to signal "this is research / experimental"
without overpowering the page title. */
.chip.research-only {
background: transparent;
color: var(--muted, #94a3b8);
border: 1px dashed rgba(148, 163, 184, 0.45);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.setup-card {
border-left: 3px solid var(--accent);
margin-bottom: 1rem;
}
.setup-card h2 {
margin: 0 0 0.4rem 0;
font-size: 1.05rem;
}
.setup-steps {
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
}
.setup-steps li {
display: flex;
gap: 0.6rem;
align-items: baseline;
padding: 0.35rem 0;
}
.setup-steps li.done {
color: var(--muted);
}
.setup-step-marker {
display: inline-block;
min-width: 1.4rem;
font-weight: 500;
}
.setup-steps li.done .setup-step-marker {
color: var(--success);
}
/* v0.29.x tile — per-area accent applied via .tile.t-. The
--accent local variable defaults to the global accent so any tile
without an area class still works (e.g. settings sub-pages that
reuse this component). Adds a left stripe in the area color, plus a
subtle hover lift. */
.tile {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1rem 1rem 1rem 1.15rem;
color: var(--text);
position: relative;
overflow: hidden;
transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.tile::before {
content: '';
position: absolute; top: 0; left: 0; bottom: 0;
width: 3px;
background: var(--tile-accent, var(--accent));
border-radius: 12px 0 0 12px;
transition: width 150ms ease;
}
.tile:hover {
border-color: var(--tile-accent, var(--accent));
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
text-decoration: none;
}
.tile:hover::before { width: 4px; }
.tile h3 {
margin: 0 0 0.3rem;
font-size: 1.02rem; font-weight: 650;
letter-spacing: -0.005em;
}
.tile p { margin: 0; color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
/* Per-area accent assignments — each shorthand maps the dashboard
tile's class to its semantic palette color. Keeps templates clean
(one extra class on each tile) without inline styles. */
.tile.t-agency { --tile-accent: var(--c-agency); }
.tile.t-agents { --tile-accent: var(--c-agents); }
.tile.t-projects { --tile-accent: var(--c-projects); }
.tile.t-watchers { --tile-accent: var(--c-watchers); }
.tile.t-personas { --tile-accent: var(--c-personas); }
.tile.t-skills { --tile-accent: var(--c-skills); }
.tile.t-runs { --tile-accent: var(--c-runs); }
.tile.t-workflows { --tile-accent: var(--c-workflows); }
.tile.t-chats { --tile-accent: var(--c-chats); }
.tile.t-usage { --tile-accent: var(--c-usage); }
.tile.t-approvals { --tile-accent: var(--c-approvals); }
.tile.t-settings { --tile-accent: var(--c-settings); }
.tile.t-workspaces { --tile-accent: var(--c-projects); }
.tile.t-data { --tile-accent: var(--c-settings); }
/* PR 1 — system health tile shares the slate accent with t-data and
t-settings; all three are observation surfaces. */
.tile.t-system { --tile-accent: var(--c-settings); }
/* PR 1 — /sites/{slug}/system health page. Mirrors the .status-strip
pattern from solana/hub.html: monospace chips per subsystem with a
label on the left. v0.104 — added subsystem accents + a vertical
meta block (display name + one-line description) so the operator
immediately knows what each row covers. */
.system-strips {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.system-strip {
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
border-left: 3px solid var(--strip-accent, var(--c-settings));
padding-left: 0.85rem;
}
.system-strip .strip-meta {
display: flex;
flex-direction: column;
min-width: 13rem;
gap: 0.15rem;
}
.system-strip .strip-label {
font-weight: 600;
color: var(--strip-accent, var(--text, #e2e8f0));
}
.system-strip .strip-desc {
font-size: 0.78rem;
color: var(--muted, #94a3b8);
font-style: italic;
line-height: 1.25;
}
.system-strip .strip-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
}
/* Per-subsystem accent. Reuses the existing --c-* palette so we stay
inside the codebase's color vocabulary. */
.system-strip[data-subsystem="FEELING_ALIVE"] { --strip-accent: var(--c-agency); }
.system-strip[data-subsystem="TRAVEL"] { --strip-accent: var(--c-watchers); }
.system-strip[data-subsystem="SOLANA"] { --strip-accent: var(--c-projects); }
.system-strip[data-subsystem="RUN_EXECUTOR"] { --strip-accent: var(--c-runs); }
.system-strip[data-subsystem="LIFE_JOURNEY"] { --strip-accent: var(--c-agents); }
.system-strip[data-subsystem="MEMORY_DURABILITY"] { --strip-accent: var(--c-skills); }
.system-strip[data-subsystem="FEDERATION_TRUST"] { --strip-accent: var(--c-personas); }
/* v0.107.1 (ux audit) — federation-trust admin page rules replacing
the inline style attributes the ux-reviewer flagged. */
.federation-strip { margin-top: 1rem; }
.revoke-reason { width: 16rem; }
/* v0.109.0 (PR A) — Mirror Hour rendering. The dossier-vs-paragraph
structure IS the surface; keep both visible.
.mirror-hour-quote — blockquote style for the agent's monthly paragraph.
.mirror-hour-dossier — inline (uncollapsed) detail rendering for the
dossier the agent reacted to; subtle indent +
muted color so it reads as supporting context
rather than competing for the eye.
.mirror-hour-quote-card — recap pull-quote container.
v0.113.1 (audit) — accent flipped from --c-skills (purple, duplicates
the Memory Durability strip accent) to --c-agency (violet, the FA
family color). Mirror Hour is a Feeling Alive feature, not a
memory-durability one; the semantic accent should match. */
.mirror-hour-quote {
border-left: 3px solid var(--c-agency, #c084fc);
padding-left: 0.85rem;
margin: 0.5rem 0;
font-style: italic;
color: var(--text, #e2e8f0);
}
.mirror-hour-quote p { margin: 0; }
.mirror-hour-dossier {
margin-top: 0.4rem;
padding-left: 0.85rem;
border-left: 2px dotted var(--muted, #94a3b8);
}
.mirror-hour-dossier .label {
font-weight: 600;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.05em;
display: block;
margin-bottom: 0.2rem;
}
.mirror-hour-dossier pre {
margin: 0;
white-space: pre-wrap;
font-family: inherit;
}
.mirror-hour-quote-card {
border-left: 4px solid var(--c-agency, #c084fc);
}
.mirror-hour-quote-meta { margin-bottom: 0.5rem; }
.mirror-hour-entry { margin-bottom: 1rem; }
.mirror-hour-entry:last-child { margin-bottom: 0; }
.system-strip[data-subsystem="ECONOMY"] { --strip-accent: var(--c-usage); }
.badge {
display: inline-block;
padding: 0.1rem 0.45rem;
border-radius: 999px;
font-size: 0.7rem;
background: var(--accent-strong);
color: white;
text-transform: uppercase;
margin-left: 0.5rem;
letter-spacing: 0.05em;
}
.permissions h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.perm-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.perm-list li {
background: var(--surface-2);
border: 1px solid var(--border);
padding: 0.2rem 0.55rem;
border-radius: 4px;
font-family: ui-monospace, monospace;
font-size: 0.8rem;
color: var(--muted);
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
/* Breadcrumbs + page header */
.breadcrumbs {
color: var(--muted);
font-size: 0.85rem;
margin-bottom: 0.5rem;
}
.breadcrumbs .sep { margin: 0 0.4rem; opacity: 0.6; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent); }
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0 0 0.25rem; }
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
/* Cards */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
padding: 1.25rem 1.25rem 1rem;
margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; font-size: 1.05rem; }
/* Buttons */
.btn {
display: inline-block;
padding: 0.5rem 0.9rem;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
font: inherit;
cursor: pointer;
text-decoration: none;
line-height: 1.2;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: white; }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.secondary { background: transparent; }
.btn.danger { background: transparent; color: var(--danger); border-color: rgba(239, 91, 91, 0.4); }
.btn.danger:hover { background: rgba(239, 91, 91, 0.12); border-color: var(--danger); }
/* v0.81 (Wave 2 #14) — runs/list bulk-action bar.
Sits above the table; sticky so the operator can scroll a long
list and the bar follows. Picks up the same border palette as
`.card` so it reads as part of the same section. */
.bulk-action-bar {
position: sticky;
top: 0.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.45rem 0.75rem;
margin: 0 0 0.4rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
z-index: 5;
}
.bulk-action-count {
color: var(--muted);
font-size: 0.9rem;
}
.bulk-check-col {
width: 2rem;
text-align: center;
}
/* v0.81 (Wave 2 #16) — recipes page list rows. Title + summary +
"read the walkthrough" CTA stacked, separated by a hairline so
six rows scan as a list without feeling cramped. */
.recipe-list {
list-style: none;
padding: 0;
margin: 0;
}
.recipe-row {
padding: 0.85rem 0;
border-bottom: 1px solid var(--border);
}
.recipe-row:last-child { border-bottom: 0; }
.recipe-title {
margin: 0 0 0.3rem;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.recipe-time { font-weight: normal; }
.recipe-summary {
margin: 0 0 0.6rem;
color: var(--text-soft);
line-height: 1.55;
}
.recipe-actions { margin: 0; }
/* v0.81 (Wave 2 #17) — agents/detail deep-verb strip + sticky TOC.
Deep-verb strip is a horizontal-rule-flanked link row right under
the page header; always-on links to Inbox / Journal / Memories /
Hologram / Scope / Personality so an empty-state operator can still
discover them. */
.agent-deep-verbs {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
padding: 0.45rem 0;
margin: 0.4rem 0 0.8rem;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
font-size: 0.85rem;
}
.agent-deep-verbs a { color: var(--text-soft); }
.agent-deep-verbs a:hover { color: var(--accent); }
/* Sticky in-page TOC for long detail pages. Sits just below the
header; sticks at the top of the viewport once scrolled past.
Paired with `scroll-margin-top: 80px` on targeted section.card[id]
so anchor clicks land the section below the sticky strip. */
.page-toc {
position: sticky;
top: 0.5rem;
z-index: 5;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
margin-bottom: 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.85rem;
}
.page-toc a {
color: var(--text-soft);
padding: 0.15rem 0.4rem;
border-radius: 4px;
}
.page-toc a:hover { color: var(--accent); background: var(--surface-2); }
section.card[id] { scroll-margin-top: 80px; }
/* v0.81 (Wave 2 #19) — run-completion banner. v0.82 moved inside