...
* --------------------------------------------------------------------------- */
.entity-card {
display: flex;
flex-direction: column;
gap: 4px;
border-radius: 6px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 11%);
color: #fff;
font-family: var(--entity-font-body);
}
.entity-card__name {
font-family: var(--entity-font-heading);
font-weight: 700;
font-size: 1em;
color: #fff;
}
.entity-card__role {
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
}
.entity-card__greeting {
font-style: italic;
font-size: 0.8em;
color: hsl(var(--entity-hue), var(--entity-saturation), 90%);
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Outfit swatch — color-only block for palettes/style guides
*
* --------------------------------------------------------------------------- */
.outfit-swatch {
width: 40px;
height: 40px;
border-radius: 4px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 50%);
display: inline-block;
}
/* ---------------------------------------------------------------------------
* Entity avatar wrapper — clips to circle, consistent sizing
* 
...
* --------------------------------------------------------------------------- */
.outfit-transition {
transition: all var(--entity-duration) var(--entity-easing);
}.application-containment {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
isolation: isolate;
}
/* center container - panels slide over this */
.content-containment {
position: relative;
z-index: 1;
height: 100%;
overflow: auto;
overflow-x: hidden;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.content-containment.left-open {
transform: translateX(var(--panel-width, 280px));
}
.content-containment.right-open {
transform: translateX(calc(-1 * var(--panel-width, 280px)));
}
.content-containment.both-open {
transform: translateX(calc(var(--panel-width, 280px) - var(--panel-width, 280px)));
}
/* panel containers */
.panel-containment {
position: absolute;
top: 0;
bottom: 0;
width: var(--panel-width, 280px);
min-width: var(--panel-min-width, 200px);
max-width: var(--panel-max-width, 85vw);
z-index: 20;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
width 0.1s ease;
will-change: transform;
overflow: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
background: var(--panel-bg, #fff);
box-shadow: var(--panel-shadow, 2px 0 10px rgba(0,0,0,0.15));
}
.panel-handle {
position: absolute;
top: 0;
bottom: 0;
width: 8px;
cursor: col-resize;
z-index: 25;
}
.panel-handle:hover {
background: rgba(0, 0, 0, 0.05);
}
.panel-handle:active {
background: rgba(0, 0, 0, 0.1);
}
/* LEFT PANELS */
.panel-containment.left {
left: 0;
transform: translateX(-100%);
}
.panel-handle.left {
right: 0;
}
.panel-containment.left.open {
transform: translateX(0);
}
/* RIGHT PANELS */
.panel-containment.right {
right: 0;
transform: translateX(100%);
}
.panel-handle.right {
left: 0;
}
.panel-containment.right.open {
transform: translateX(0);
}
/* Panel header */
.panel-header {
position: sticky;
top: 0;
z-index: 5;
background: inherit;
padding: var(--panel-padding, 16px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s ease;
}
.panel-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.panel-close:focus-visible {
outline: 2px solid var(--focus-color, #0066cc);
outline-offset: 2px;
}
/* History navigation */
.panel-nav {
display: flex;
gap: 4px;
}
.panel-nav button {
width: 28px;
height: 28px;
border: none;
background: transparent;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s, background 0.2s;
}
.panel-nav button:hover:not(:disabled) {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
}
.panel-nav button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* back-to-top link */
.back-to-top {
position: absolute;
bottom: 16px;
right: 16px;
display: none;
padding: 8px 12px;
font-size: var(--font-sm);
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 16px;
text-decoration: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10;
}
.back-to-top.show {
display: flex;
align-items: center;
gap: 4px;
opacity: 0.8;
}
.back-to-top:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Mobile optimizations */
@media (max-width: 768px) {
:root {
--panel-width: 85vw;
--panel-min-width: 280px;
--panel-max-width: 85vw;
}
.panel-handle {
display: none;
}
.back-to-top {
bottom: 24px;
right: 24px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.content-containment,
.panel-containment,
.back-to-top {
transition: none;
}
}
/* Focus management for accessibility */
.panel-containment:focus-within {
z-index: 22;
}
/* Print styles */
@media print {
.panel-containment,
.back-to-top {
display: none !important;
}
.content-containment {
transform: none !important;
}
}
.spirit-row-model { font-size: 12px; }
.spirit-row-harness { font-size: 12px; }
.spirit-row-runtime { font-size: 12px; }
.svg-icon {
width: 1em;
height: 1em;
}
.svg-icon-small {
padding: 4px;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: var(--text-color);
}
.svg-icon circle {
stroke: var(--text-color);
stroke-width: 1;
}
.hamburger path{
fill: var(--highlight-text-color);
}
.app-version{
font-size: var(--font-body);
bottom: 0;
right: 0;
left: 0;
margin: 3px;
}
.full-height{
align-items: stretch;
flex-direction: column;
}
.font-size-tiny{
font-size: var(--font-sm);
}
.glow-dark {
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.21);
-moz-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.21);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.2);
}
.category-divider{
font-size: var(--font-sm);
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.21);
-moz-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.21);
box-shadow: 0px 0px 15px 2px rgba(255,255,255,.2);
}
.menu-title span {
background-color: var(--shadow-color);
color: var(--text-color);
border-radius: 10px;
height: 22px;
line-height: 20px;
font-size: 20px;
padding: 4px 19px;
}
.menu-title {
display: block;
font-size: var(--font-sm) !important;
line-height: 25px;
list-style: none outside none;
padding: 5px 10px 5px 0 !important;
text-decoration: none;
color: var(--text-color);
width: 100%;
}
#accordion li {
font-size: 20px;
line-height: 0;
list-style: none outside none;
margin: 0;
text-align: left;
color: #33FFFF;
/* border-top: 1px solid rgba(0,0,0,0.2); */
border-top: 1px solid rgba(0,0,0,0);
border-bottom: 1px solid rgba(0,0,0,0);
}
.hover-identify:hover {
border-top: 1px solid rgba(255,0,0,0.2);
border-bottom: 1px solid rgba(255,0,0,0.2);
}
#accordion li i {
font-size: 18px;
font-style: normal;
left: -5px;
line-height: 15px;
position: relative;
width: 20px;
top: 5px;
}
#accordion ul li{
border-left: 4px solid white;
}
ul.topnav li a {
color: var(--text-color);
display: block;
font-size: var(--font-body);
line-height: 25px;
list-style: none outside none;
padding: 10px 10px 10px 30px;
text-decoration: none;
}
ul.topnav li a:hover:after {
border-bottom: 6px solid #ffffff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
width: 0;
height: 0;
position: absolute;
top: 19px;
left: -6px;
content: "";
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
tranform: rotate(90deg);
}
li .active {
background-color: rgba(255,255,255,0.14);
}
ul.topnav h4 {
float: right !important;
margin-top: -2px;
}
ul.topnav ul {
margin: 0;
padding: 0;
display: none;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.smart-menu {
position: relative;
width: 100%;
}
.btn-closenav-left, .btn-pinnav-left, .btn-closenav-right, .btn-pinnav-right {
font-size: 28px!important;
position: relative;
cursor: pointer;
}
.padded-10{
margin-top: 10px;
}
.accordion-app-icon{
margin-top:-20px;
}
/* --- Indicator drawer (merged from koad-io-style-basic-bitch) --- */
.indicator-drawer {
margin-top: 3px;
margin-left: 9px;
position: fixed;
top: 0px;
font-size: 26px;
z-index: 2800;
transition: 0.1s;
}
.indicator-background {
backdrop-filter: blur(8px);
position: absolute;
z-index: -200;
height: 100%;
width: 100%;
border-radius: 30px;
padding-bottom: -10px;
margin-top: -8px;
}
.indicator-group {
color: var(--highlight-color);
z-index: 1900;
position: relative;
margin-top: -10px;
padding-top: 10px;
margin-bottom: 40px;
text-align: center;
}
.indicator-brand {
color: var(--shadow-color);
}
.indicator-brand:hover {
color: var(--background-color);
}
.smartnav-left {
top: 0; /* 100% Full-height */
bottom: 0; /* 100% Full-height */
width: 240px; /* 0 width - change this with JavaScript */
margin-left: -240px;
position: fixed; /* Stay in place */
z-index: 10000; /* Stay on top */
background-color: var(--shadow-color);
opacity: 1;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in the smartnav */
box-shadow: 0px 0px 1px #88888888 ;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.leftSideNav{
width: 200px;
}.topBanner {
position: fixed;
top: 0;
height: 38px;
background-color: #0003;
padding-right: 0px;
font-size: var(--font-body);
font-weight: 400;
text-align: right;
text-transform: uppercase;
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
}
a .material-symbols-outlined {
font-size: 18px;
line-height: 0.6;
opacity: 0.2;
margin-right: -4px;
}
.toolbar{
/*display: flex;*/
/*align-items: center;*/
/*justify-content: space-between;*/
height: 88px;
background-color: var(--shadow-color);
position: fixed;
top: 0;
left: 0;
right: 0;
}
.topnavbar-assembly{
z-index: 12;
/*position: fixed;*/
width: fill-available;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: top 0.5s ease-in-out;
}
.navPadding {
height: 88px;
z-index: -10px;
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
}
.logo{
left: 0px;
top: 4px;
padding: 6px;
width: 100px;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in-out;
margin: auto;
position: fixed;
}
.banner{
left: var(--side-edges);
top: 3px;
height: 86px;
padding: 6px;
/*transition-property: all;*/
/*transition-duration: 1s;*/
/*transition-timing-function: ease-in-out;*/
margin: auto;
position: fixed;
}
.toolbar-nav {
margin: 30px;
font-style: normal;
font-family: 'Lato', sans-serif;
font-size: var(--font-body);
font-weight: 400;
padding-top: 8px;
}
.toolbar-nav ul {
display: block;
}
.toolbar-nav li a {
padding: 2px;
color: var(--text-color);
text-transform: uppercase;
font-size: 1.05em;
line-height: 1.5em;
position: relative;
display: block;
}
.toolbar-nav li {
padding: 10px;
margin-left: 4px;
float: right;
display: inline-block;
position: relative;
/*z-index: 24;*/
}
.toolbar-nav li a {
text-decoration: none!important;
}
.toolbar-nav li::before {
content: '';
position: absolute;
left: 50%;
right: 50%;
bottom: 50%;
top: 50%;
width: 0;
height: 0;
background-color: rgba(237, 32, 36, 0);
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
border-radius: 2px;
}
.toolbar-nav li:hover::before {
height: 70%;
width: 100%;
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: var(--accent-color);
border-radius: 2px;
}
.toolbar-nav li.active::before {
height: 70%;
width: 100%;
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: var(--accent-color);
border-radius: 2px;
}
.toolbar li{
display: inline-block;
}
.infobar {
text-align: right;
padding-top:8px;
padding-left: var(--side-edges);
padding-right: var(--side-edges);
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
}
.infobar a{
color: var(--highlight-text-color);
cursor: pointer;
text-decoration: none!important;
}
/* --- ecoincore quick-button infobar (conditional when ecoincore package present) --- */
.infobar-quick-buttons {
float: right;
display: flex;
align-items: center;
margin: 4px;
}
.infobar-quick-buttons a {
float: right;
display: flex;
align-items: center;
margin: 4px;
text-decoration: none;
border-radius: 6px;
position: relative;
color: var(--highlight-text-color);
cursor: pointer;
}
.infobar-quick-buttons a:hover {
background-color: var(--hover-overlay, rgba(255, 255, 255, 0.07));
}
.top-bar-notification-badge {
position: absolute;
background: transparent;
border: 1px solid transparent;
color: var(--text-bright);
border-radius: 3px;
width: 100%;
height: 100%;
font-size: var(--font-sm);
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 2px;
}
.top-bar-notification-badge.green {
background: rgba(40, 167, 69, 0.2);
border-color: #28a745;
}
.top-bar-notification-badge.yellow {
background: rgba(255, 193, 7, 0.2);
border-color: #ffc107;
color: #212529;
}
.top-bar-notification-badge.red {
background: var(--danger-overlay, rgba(220, 53, 69, 0.2));
border-color: var(--danger-color, #dc3545);
}
.small-language-icon{
height:30px;
width:30px;
margin:-10px;
margin:-10px;
}
.brand-title h2 {
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.brand h3 {
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.brand-line {
display: inline-block;
width: 170px;
height: 2px;
background-color: #ed2024;
}
.menu-top-menu-container{
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
}
/* Define the draggable area */
.draggable {
-webkit-app-region: drag;
cursor: move;
}
/* --- Legacy top navbar (migrated from koad-io-style-basic-bitch) --- */
._topnavbar {
position: absolute;
padding: 8px;
left: 0;
right: 0;
top: 0;
height: 15px;
border-bottom: 1px solid var(--shadow-color);
color: var(--text-bright);
font-size: var(--font-sm);
font-weight: 400;
text-transform: uppercase;
background-color: hsla(var(--application-hue), var(--application-saturation-percent), 15%, 1);
font-style: normal;
font-family: 'Lato', sans-serif;
z-index: 100;
}
._topnavspacer {
height: 30px;
width: 100%;
}
/* --- Dropdown system (migrated from koad-io-style-basic-bitch) --- */
.dropup,
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 3px;
margin: 2px 0 0;
font-size: var(--font-body);
text-align: left;
list-style: none;
background-color: var(--background-color);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid var(--text-color) !important;
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px var(--shadow-color);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: var(--border-color);
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: var(--text-color);
white-space: nowrap;
cursor: pointer;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: var(--text-bright);
text-decoration: none;
background-color: var(--bg-surface);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: var(--text-bright);
text-decoration: none;
background-color: var(--accent-color);
outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: var(--text-muted);
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
}
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
right: 0;
left: auto;
}
.dropdown-menu-left {
right: auto;
left: 0;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: var(--font-sm);
line-height: 1.42857143;
color: var(--text-muted);
white-space: nowrap;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 990;
}
.pull-right > .dropdown-menu {
right: 0;
left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px dashed;
border-bottom: 4px solid \9;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 2px;
}
@media (min-width: 768px) {
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
.navbar-right .dropdown-menu-left {
right: auto;
left: 0;
}
}
.announcement-surface {
padding: 14px 24px;
background: hsla(var(--application-hue), var(--application-saturation-percent), 11%, 1);
border-top: 1px solid hsla(var(--application-hue), var(--application-saturation-percent), 22%, 0.7);
position: relative;
}
.announcement-surface__title,
.announcement-surface__copy {
display: block;
font-size: var(--font-body);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.6;
color: var(--text-color);
margin: 0;
padding: 0;
}
.announcement-surface__copy {
margin-top: 2px;
}
.announcement-surface__attribution {
display: block;
font-family: var(--font-mono, 'Courier New', monospace);
font-size: var(--font-sm);
font-weight: 400;
color: hsla(var(--application-hue), var(--application-saturation-percent), 45%, 0.7);
margin-top: 6px;
letter-spacing: 0;
}
@media (min-width: 768px) {
.announcement-surface {
padding: 14px 48px;
}
}
@media (max-width: 479px) {
.announcement-surface__title,
.announcement-surface__copy {
font-size: 0.8125rem;
}
}
/* =============================================
Per-author variants — entity hues registered as CSS vars.
Iris: neutral week. No deviation from base — neutral IS the baseline.
============================================= */
/* Iris variant — inherits base exactly */
.announcement-surface[data-authored-by="iris"] {
/* neutral — no overrides */
}
/* Pattern for future authors:
.announcement-surface[data-authored-by="muse"] {
border-top-color: hsla(var(--entity-hue-muse, 270), 50%, 60%, 0.3);
}
.announcement-surface[data-authored-by="muse"] .announcement-surface__attribution {
color: hsl(var(--entity-hue-muse, 270), 50%, 60%);
opacity: 0.85;
}
*/.brand-bond-detail {
max-width: 860px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bbd-nav {
margin-bottom: 1.5rem;
font-size: var(--font-body);
}
.bbd-nav-back {
color: var(--outfit-muted, #71717a);
}
.bbd-nav-back:hover { color: var(--outfit-fg, #e4e4e7); }
.bbd-shell {
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 10px;
overflow: hidden;
}
.bbd-header {
padding: 1.25rem 1.75rem;
background: linear-gradient(180deg, #1f1f23, #18181b);
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bbd-header-title {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.bbd-filename {
font-family: monospace;
font-size: 1rem;
color: var(--outfit-fg, #e4e4e7);
}
.bbd-type {
font-size: 0.72rem;
padding: 0.15em 0.5em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bbd-status {
font-size: 0.7rem;
padding: 0.12em 0.45em;
border-radius: 3px;
background: #0c2e1a1a;
color: #34d399;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bbd-status--revoked { background: #450a0a1a; color: #ef4444; }
.bbd-issued {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
margin-top: 0.5rem;
}
.bbd-parties {
padding: 1.5rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bbd-party-row {
display: flex;
align-items: center;
gap: 1.5rem;
}
.bbd-party {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.bbd-party-label {
font-size: 0.7rem;
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bbd-party-name {
font-size: 1.1rem;
font-weight: 500;
text-decoration: none;
}
.bbd-party-name:hover { opacity: 0.8; }
.bbd-arrow {
font-size: 1.5rem;
color: var(--outfit-muted, #52525b);
align-self: flex-end;
padding-bottom: 0.1rem;
}
.bbd-summary {
padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bbd-section-title {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
margin: 0 0 0.75rem 0;
}
.bbd-summary-text {
color: var(--outfit-fg, #e4e4e7);
font-size: var(--font-body);
line-height: 1.6;
border-left: 3px solid #3f3f46;
padding-left: 1rem;
margin: 0;
font-style: italic;
}
.bbd-meta {
padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bbd-meta-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bbd-meta-row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0.75rem;
font-size: var(--font-body);
}
.bbd-meta-row dt {
color: var(--outfit-muted, #71717a);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bbd-meta-row dd {
color: var(--outfit-fg, #e4e4e7);
margin: 0;
}
.bbd-link {
color: var(--outfit-accent, #60a5fa);
}
.bbd-link:hover { color: var(--outfit-accent-bright, #93c5fd); }
.bbd-footer {
padding: 0.75rem 1.75rem;
background: #0e0e10;
}
.bbd-id {
font-family: monospace;
font-size: var(--font-mono-label);
color: var(--outfit-muted, #71717a);
}
.bbd-missing {
padding: 3rem 1.5rem;
text-align: center;
color: var(--outfit-muted, #71717a);
}
.bbd-missing a { color: var(--outfit-accent, #60a5fa); }.brand-bonds-index {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bbi-header {
margin-bottom: 1.75rem;
}
.bbi-title {
font-size: var(--font-h2);
font-weight: 500;
color: var(--outfit-fg, #e4e4e7);
margin: 0 0 0.4rem 0;
}
.bbi-subtitle {
font-size: var(--font-body);
color: var(--outfit-muted, #71717a);
margin: 0;
}
.bbi-groups {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.bbi-group {
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 8px;
overflow: hidden;
}
.bbi-group-header {
padding: 0.75rem 1.25rem;
background: linear-gradient(180deg, #1f1f23, #18181b);
border-bottom: 1px solid var(--outfit-border, #27272a);
display: flex;
align-items: center;
justify-content: space-between;
}
.bbi-group-entity {
font-weight: 500;
font-size: 0.95rem;
}
.bbi-group-count {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
}
.bbi-bond-list {
display: flex;
flex-direction: column;
}
.bbi-bond-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 1.25rem;
border-bottom: 1px solid #27272a20;
text-decoration: none;
transition: background 0.1s;
flex-wrap: wrap;
}
.bbi-bond-row:last-child { border-bottom: none; }
.bbi-bond-row:hover { background: #27272a30; }
.bbi-bond-file {
font-family: monospace;
font-size: var(--font-sm);
color: var(--outfit-fg, #e4e4e7);
flex-shrink: 0;
}
.bbi-bond-type {
font-size: 0.7rem;
padding: 0.12em 0.45em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.bbi-bond-dir {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
flex-shrink: 0;
}
.bbi-bond-summary {
font-size: var(--font-sm);
color: #71717a;
font-style: italic;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bbi-empty {
color: var(--outfit-muted, #71717a);
font-size: var(--font-body);
padding: 2rem 0;
}
.brand-bond-graph {
position: relative;
width: 100%;
height: 420px;
background: radial-gradient(ellipse at center, #151515 0%, #0d0d0d 100%);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 6px;
overflow: hidden;
user-select: none;
}
.brand-bond-graph-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.brand-bond-graph-edge {
stroke: var(--border, #3a3a3a);
stroke-width: 1;
fill: none;
transition: stroke 0.2s;
}
.brand-bond-graph-edge-arrow {
fill: var(--border, #3a3a3a);
}
.brand-bond-graph-node {
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #fff;
background: hsl(
var(--application-hue, 200),
20%,
30%
);
overflow: hidden;
cursor: grab;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
transform: translate(-50%, -50%);
transition: box-shadow 0.2s;
z-index: 2;
}
.brand-bond-graph-node:hover {
cursor: pointer;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, #5bd5b5) 40%, transparent),
0 2px 8px rgba(0,0,0,0.5);
z-index: 5;
}
.brand-bond-graph-node--dragging {
cursor: grabbing;
z-index: 10;
}
.brand-bond-graph-node--active {
box-shadow: 0 0 0 3px var(--accent-color, #5bd5b5),
0 2px 8px rgba(0,0,0,0.5);
}
.brand-bond-graph-node img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-bond-graph-node-label {
position: absolute;
top: 52px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: var(--text-dim, #888);
white-space: nowrap;
pointer-events: none;
font-weight: 500;
text-shadow: 0 1px 2px #000;
}
.brand-bond-graph-node:hover .brand-bond-graph-node-label {
color: var(--accent-color, #5bd5b5);
}
.brand-bond-graph-node--focal {
width: 76px;
height: 76px;
box-shadow: 0 0 0 2px var(--accent-color, #5bd5b5), 0 2px 12px rgba(0,0,0,0.6);
z-index: 3;
}
.chain-verify-line {
display: block;
margin-top: 0.5em;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 0.85em;
color: var(--text-muted, #888);
line-height: 1.4;
}
/* pending state — even more receded; tx exists but confirmation threshold not yet met */
.chain-verify-line--pending {
opacity: 0.65;
}
.chain-verify-line-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.chain-verify-line-link:hover {
color: var(--accent-color, var(--accent, currentColor));
border-bottom-style: solid;
}
.chain-verify-line-arrow {
font-style: normal;
opacity: 0.6;
}
.brand-bond-list {
display: flex;
flex-direction: column;
width: 100%;
}
.brand-bond-list-empty {
padding: 24px 0;
}
.brand-bond-list-empty-msg {
color: var(--text-dim, #888);
font-size: var(--font-sm);
margin: 0;
}
/* Entity group */
.brand-bond-list-group {
margin-bottom: 20px;
}
.brand-bond-list-group-header {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
margin-bottom: 6px;
}
.brand-bond-list-group-name {
font-size: var(--font-body);
font-weight: 600;
color: var(--accent-color, #5bd5b5);
}
.brand-bond-list-group-count {
font-size: var(--font-sm);
color: var(--text-dim, #888);
}
/* Bond row */
.brand-bond-list-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 0;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.brand-bond-list-row:last-child {
border-bottom: none;
}
/* Directional layout (from → to style) */
.brand-bond-list-row-direction {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-sm);
}
.brand-bond-list-row-handle {
color: var(--accent-color, #5bd5b5);
text-decoration: none;
font-weight: 500;
}
.brand-bond-list-row-handle:hover {
text-decoration: underline;
}
.brand-bond-list-row-arrow {
font-size: var(--font-body);
font-weight: 700;
}
/* Base/type simple layout (no enriched handles) */
.brand-bond-list-row-base {
color: var(--text-dim, #888);
font-size: var(--font-sm);
font-family: monospace;
}
.brand-bond-list-row-kind {
font-size: 10px;
color: var(--text-dim, #888);
}
/* Meta row: type badge + status + created */
.brand-bond-list-row-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.brand-bond-list-row-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
padding: 1px 6px;
border-radius: 3px;
background: color-mix(in srgb, var(--accent-color, #5bd5b5) 12%, var(--bg-raised, #171717));
color: var(--accent-color, #5bd5b5);
border: 1px solid color-mix(in srgb, var(--accent-color, #5bd5b5) 30%, var(--border, rgba(255,255,255,0.07)));
}
.brand-bond-list-row-badge--authorized-agent {
background: color-mix(in srgb, var(--accent-color, #5bd5b5) 12%, var(--bg-raised, #171717));
color: var(--accent-color, #5bd5b5);
border-color: color-mix(in srgb, var(--accent-color, #5bd5b5) 30%, var(--border, rgba(255,255,255,0.07)));
}
.brand-bond-list-row-badge--authorized-builder {
background: color-mix(in srgb, #d5a05b 12%, var(--bg-raised, #171717));
color: #d5a05b;
border-color: color-mix(in srgb, #d5a05b 30%, var(--border, rgba(255,255,255,0.07)));
}
.brand-bond-list-row-status {
font-size: var(--font-sm);
color: var(--text-dim, #888);
}
.brand-bond-list-row-created {
font-size: var(--font-sm);
color: var(--text-dim, #888);
margin-left: auto;
}
.brand-bond-list-row-summary {
font-size: var(--font-sm);
color: var(--text-dim, #888);
font-style: italic;
margin: 0;
line-height: 1.5;
}
.content-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
width: 100%;
}
.content-card-footer {
padding: 10px 14px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
}
.content-card-source-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-sm);
color: var(--text-dim);
transition: color 0.15s;
}
.content-card-source-link:hover {
color: var(--text);
}
.content-card-source-icon {
font-size: 10px;
color: var(--accent);
}
.content-card-source-domain {
font-family: var(--font-mono);
}
.content-card-source-arrow {
font-size: var(--font-sm);
opacity: 0.5;
}
.content-card--audio {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-card-audio-header {
display: flex;
align-items: center;
gap: 10px;
}
.content-card-audio-icon {
font-size: 18px;
color: var(--accent);
line-height: 1;
}
.content-card-audio-filename {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: var(--text);
word-break: break-all;
}
.content-card-audio {
width: 100%;
display: block;
}
.content-card--image {
line-height: 0;
}
.content-card-image-link {
display: block;
}
.content-card-image {
width: 100%;
max-width: 100%;
display: block;
object-fit: contain;
max-height: 600px;
}
.content-card--link {
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.content-card-link-body {
display: flex;
align-items: flex-start;
gap: 10px;
flex: 1;
min-width: 0;
}
.content-card-link-icon {
font-size: 16px;
color: var(--accent);
line-height: 1.3;
flex-shrink: 0;
}
.content-card-link-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.content-card-link-domain {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text);
}
.content-card-link-url {
font-size: var(--font-sm);
font-family: var(--font-mono);
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-card-link-btn {
font-size: var(--font-sm);
color: var(--accent);
border: 1px solid var(--border-accent);
border-radius: 2px;
padding: 6px 14px;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s;
}
.content-card-link-btn:hover {
background: var(--bg-raised);
}
.content-card--tweet {
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.content-card-tweet-header {
display: flex;
align-items: center;
gap: 8px;
}
.content-card-tweet-icon {
font-size: 16px;
color: var(--text);
line-height: 1;
}
.content-card-tweet-label {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text);
}
.content-card-tweet-url {
font-size: var(--font-sm);
font-family: var(--font-mono);
color: var(--text-dim);
word-break: break-all;
}
.content-card-tweet-btn {
display: inline-flex;
align-items: center;
font-size: var(--font-sm);
color: var(--accent);
border: 1px solid var(--border-accent);
border-radius: 2px;
padding: 6px 14px;
width: fit-content;
transition: background 0.15s, color 0.15s;
}
.content-card-tweet-btn:hover {
background: var(--bg-raised);
}
.content-card--video .content-card-video {
width: 100%;
display: block;
background: #000;
max-height: 480px;
}
.content-card--video .content-card-footer {
font-size: var(--font-sm);
}
.content-card-filename {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: var(--text-dim);
word-break: break-all;
}
.content-card--youtube .content-card-thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.content-card--youtube .content-card-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.content-card--youtube .content-card-thumb-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
transition: background 0.15s;
}
.content-card--youtube .content-card-thumb-overlay:hover {
background: rgba(0, 0, 0, 0.5);
}
.content-card-play-btn {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.75);
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.1s, background 0.15s;
}
.content-card-play-btn:hover {
transform: scale(1.08);
background: rgba(0, 0, 0, 0.9);
}
.content-card-play-icon {
color: #fff;
font-size: 22px;
margin-left: 4px; /* optical center for play triangle */
line-height: 1;
}
/* Consent bar */
.content-card-consent-bar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--bg-raised);
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.content-card-consent-msg {
font-size: var(--font-sm);
color: var(--text-dim);
flex: 1;
min-width: 180px;
}
.content-card-consent-accept,
.content-card-consent-cancel {
font-size: var(--font-sm);
font-family: var(--font-body);
padding: 5px 12px;
border-radius: 2px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.content-card-consent-accept {
background: var(--accent);
color: #0A0A0A;
border: none;
font-weight: 600;
}
.content-card-consent-accept:hover {
background: var(--accent-dim);
}
.content-card-consent-cancel {
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border);
}
.content-card-consent-cancel:hover {
color: var(--text);
border-color: var(--slate-light);
}
/* Embed iframe */
.content-card-embed {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.content-card-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
.conversation-node {
position: relative;
padding: 10px 14px;
background: var(--shadow-color);
border-radius: 4px;
border-left: 2px solid var(--border-color);
}
.conversation-node-header {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.conversation-node-entity {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-sm);
font-weight: 600;
text-decoration: none;
}
.conversation-node-entity:hover {
opacity: 0.85;
}
.conversation-node-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
color: var(--fill-color);
flex-shrink: 0;
}
.conversation-node-type {
font-size: var(--font-sm);
font-family: var(--font-mono, ui-monospace, monospace);
padding: 2px 6px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.06);
color: var(--text-dim, #888);
text-transform: lowercase;
}
/* Semantic state colors — hsl-derived to participate in the outfit system */
.conversation-node-type--open { color: hsl(var(--success-hue, 140), var(--application-saturation-percent), 65%); }
.conversation-node-type--update { color: hsla(var(--application-hue), var(--application-saturation-percent), 75%, 0.9); }
.conversation-node-type--close { color: hsl(var(--warning-hue, 43), var(--application-saturation-percent), 65%); }
.conversation-node-time {
font-size: var(--font-sm);
color: var(--text-faint, #555);
margin-left: auto;
}
.conversation-node-flight-link {
font-size: var(--font-sm);
color: var(--accent, #7eb8f7);
text-decoration: none;
}
.conversation-node-flight-link:hover {
text-decoration: underline;
}
.conversation-node-body {
font-size: var(--font-sm);
color: var(--text-dim, #aaa);
line-height: 1.5;
margin: 0 0 6px 0;
word-break: break-word;
}
.conversation-node-children {
margin-top: 8px;
padding-left: 16px;
display: flex;
flex-direction: column;
gap: 6px;
border-left: 1px solid var(--border-color);
opacity: 0.7;
}
.entity-chat-main {
display: flex;
flex-direction: column;
height: 100%;
min-height: 400px;
}
.entity-chat-conversation {
flex: 1;
overflow-y: auto;
padding: 24px 24px 100px;
}
.entity-chat-message {
margin-bottom: 24px;
}
.entity-chat-sender {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: var(--entity-accent, var(--accent));
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.entity-chat-message--human {
text-align: right;
}
.entity-chat-message--human .entity-chat-sender {
color: var(--text-dim);
}
.entity-chat-message--human .entity-chat-body {
display: inline-block;
text-align: left;
background: rgba(255,255,255,0.04);
padding: 10px 16px;
border-radius: 4px;
max-width: 85%;
}
.entity-chat-body {
font-size: 15px;
line-height: 1.7;
color: var(--text);
}
.entity-chat-body p { margin: 0 0 12px; }
.entity-chat-body p:last-child { margin-bottom: 0; }
.entity-chat-body em { color: var(--entity-accent, var(--accent)); font-style: normal; font-weight: 600; }
.entity-chat-body strong { color: var(--text); font-weight: 600; }
.entity-chat-body code {
font-family: var(--font-mono);
font-size: var(--font-mono-body);
color: var(--entity-accent, var(--accent));
background: rgba(255,255,255,0.06);
padding: 1px 6px;
border-radius: 2px;
}
.entity-chat-input-bar {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 24px;
background: var(--bg);
border-top: 1px solid var(--border);
position: sticky;
bottom: 0;
z-index: 10;
}
.entity-chat-input {
flex: 1;
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
padding: 10px 14px;
border-radius: 4px;
resize: none;
overflow-y: auto;
max-height: 120px;
line-height: 1.5;
transition: border-color 0.15s;
}
.entity-chat-input:focus {
outline: none;
border-color: var(--entity-accent, var(--accent));
}
.entity-chat-input::placeholder { color: var(--text-dim); }
.entity-chat-btn-send {
background: var(--entity-accent, var(--accent));
color: #0D0D0D;
border: none;
font-size: var(--font-body);
font-weight: 700;
width: 40px;
height: 40px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.15s;
}
.entity-chat-btn-send:hover { opacity: 0.85; }
.entity-chat-streaming {
opacity: 0.9;
}
.entity-chat-thinking {
color: var(--text-dim);
animation: entity-chat-pulse 1.2s ease-in-out infinite;
}
@keyframes entity-chat-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
.entity-chat-btn-send:focus {
outline: none;
box-shadow: 0 0 0 3px hsla(var(--entity-hue, 200), var(--entity-saturation, 30%), var(--entity-brightness, 55%), 0.35);
}
.entity-chat-btn-avatar {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
display: block;
}
/* Empty state when no messages */
.entity-chat-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
height: 100%;
min-height: 240px;
color: var(--text-dim);
}
.entity-chat-empty-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
background: var(--entity-accent, var(--accent));
color: #0D0D0D;
overflow: hidden;
}
.entity-chat-empty-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.entity-chat-empty-prompt {
font-size: 15px;
color: var(--text-dim);
text-align: center;
}
.live-sessions {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
}
.live-session-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px;
padding: 8px 12px;
background: var(--shadow-color);
border-radius: 4px;
border-left: 2px solid hsla(var(--application-hue), var(--application-saturation-percent), 65%, 0.4);
}
.live-session-entity {
font-weight: 600;
color: var(--text-bright, #eee);
min-width: 80px;
}
.live-session-harness {
color: var(--text-muted, #888);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.live-session-model {
color: hsla(var(--application-hue), var(--application-saturation-percent), 75%, 0.9);
}
.live-session-ctx {
color: var(--text-muted, #888);
}
.live-session-cost {
color: color-mix(in srgb, var(--success) 85%, transparent);
}
.live-session-cwd {
color: var(--text-muted, #888);
font-size: var(--font-sm);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.live-session-id {
color: var(--text-faint, #555);
font-size: var(--font-sm);
}.thoughtful-spinner {
display: inline-block;
font-family: monospace;
font-size: inherit;
line-height: 1;
color: inherit;
min-width: 1em;
text-align: center;
vertical-align: baseline;
}
.thoughtful-spinner[data-size="sm"] {
font-size: 0.75em;
}
.thoughtful-spinner[data-size="lg"] {
font-size: 1.5em;
}
.thoughtful-spinner[data-size="xl"] {
font-size: 2.5em;
}
.thoughtful-spinner[data-size="xxl"] {
font-size: 4em;
}.brand-emission-detail {
max-width: 860px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bed-nav {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: var(--font-body);
}
.bed-nav-back {
color: var(--outfit-muted, #71717a);
}
.bed-nav-back:hover { color: var(--outfit-fg, #e4e4e7); }
.bed-nav-entity { font-weight: 500; }
.bed-shell {
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 10px;
overflow: hidden;
}
.bed-header {
padding: 1.25rem 1.75rem;
background: linear-gradient(180deg, #1f1f23, #18181b);
border-bottom: 1px solid var(--outfit-border, #27272a);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.bed-header-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bed-entity { font-weight: 500; font-size: 1.05rem; }
.bed-type {
font-size: var(--font-sm);
padding: 0.2em 0.55em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bed-type--warning { background: #451a031a; color: #f97316; }
.bed-type--error { background: #450a0a1a; color: #ef4444; }
.bed-type--notice { background: #0c1a2e1a; color: #60a5fa; }
.bed-type--flight { background: #0c2e1a1a; color: #34d399; }
.bed-status {
font-size: 0.7rem;
padding: 0.15em 0.5em;
border-radius: 3px;
background: #0c2e1a1a;
color: #34d399;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bed-status--closed { background: #27272a; color: #71717a; }
.bed-time {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
font-variant-numeric: tabular-nums;
}
.bed-body {
padding: 1.5rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bed-body-text {
color: var(--outfit-fg, #e4e4e7);
font-size: var(--font-body);
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
.bed-section-title {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
margin: 0 0 0.9rem 0;
}
.bed-history {
padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bed-history-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.bed-history-entry {
display: grid;
grid-template-columns: 160px 1fr;
gap: 1rem;
align-items: baseline;
font-size: var(--font-body);
padding: 0.5rem 0;
border-bottom: 1px solid #27272a30;
}
.bed-history-entry:last-child { border-bottom: none; }
.bed-history-at {
color: var(--outfit-muted, #71717a);
font-variant-numeric: tabular-nums;
font-family: monospace;
font-size: var(--font-sm);
}
.bed-history-body {
color: var(--outfit-fg, #e4e4e7);
word-break: break-word;
}
.bed-meta, .bed-lifecycle {
padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bed-meta-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.bed-meta-row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 0.75rem;
font-size: var(--font-body);
}
.bed-meta-row dt {
color: var(--outfit-muted, #71717a);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0.1rem;
}
.bed-meta-row dd {
color: var(--outfit-fg, #e4e4e7);
word-break: break-all;
margin: 0;
}
.bed-meta-json {
font-family: monospace;
font-size: var(--font-mono-label);
white-space: pre-wrap;
color: #a1a1aa;
}
.bed-link {
color: var(--outfit-accent, #60a5fa);
font-family: monospace;
font-size: var(--font-sm);
}
.bed-link:hover { color: var(--outfit-accent-bright, #93c5fd); }
.bed-footer {
padding: 0.75rem 1.75rem;
background: #0e0e10;
display: flex;
justify-content: flex-start;
}
.bed-id {
font-family: monospace;
font-size: var(--font-mono-label);
color: var(--outfit-muted, #71717a);
}
.bed-missing {
padding: 3rem 1.5rem;
text-align: center;
color: var(--outfit-muted, #71717a);
}
.bed-missing a { color: var(--outfit-accent, #60a5fa); }.brand-emissions-index {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bei-header {
margin-bottom: 1.75rem;
}
.bei-title {
font-size: var(--font-h2);
font-weight: 500;
color: var(--outfit-fg, #e4e4e7);
margin: 0 0 0.4rem 0;
}
.bei-subtitle {
font-size: var(--font-body);
color: var(--outfit-muted, #71717a);
margin: 0;
}
.bei-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.bei-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1rem;
align-items: center;
padding: 0.75rem 1rem;
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 6px;
text-decoration: none;
transition: border-color 0.1s;
}
.bei-row:hover { border-color: #3f3f46; }
.bei-row-left {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.bei-entity {
font-size: var(--font-body);
font-weight: 500;
white-space: nowrap;
}
.bei-type {
font-size: 0.68rem;
padding: 0.15em 0.45em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.bei-type--warning { background: #451a031a; color: #f97316; }
.bei-type--error { background: #450a0a1a; color: #ef4444; }
.bei-type--notice { background: #0c1a2e1a; color: #60a5fa; }
.bei-type--flight { background: #0c2e1a1a; color: #34d399; }
.bei-status {
font-size: 0.65rem;
padding: 0.12em 0.4em;
border-radius: 3px;
background: #0c2e1a1a;
color: #34d399;
text-transform: uppercase;
letter-spacing: 0.04em;
white-space: nowrap;
}
.bei-status--closed { background: #27272a; color: #52525b; }
.bei-row-body {
font-size: var(--font-body);
color: var(--outfit-fg, #e4e4e7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.bei-row-right { min-width: 0; }
.bei-time {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.bei-empty {
color: var(--outfit-muted, #71717a);
font-size: var(--font-body);
padding: 2rem 0;
}
/* announce — slightly elevated visual weight */
.bei-row--announce {
background: var(--outfit-card-bg-elevated, #1c1c1f);
border-color: #3f3f46;
}
.bei-row--announce .bei-row-body {
font-size: var(--font-body);
font-weight: 500;
color: var(--outfit-fg-bright, #f4f4f5);
}
.bei-type--announce { background: #1a2e1a1a; color: #86efac; }
/* typed event type pills */
.bei-type--pin { background: #1a1a2e1a; color: #a78bfa; }
.bei-type--message\.dropped { background: #1a2e2e1a; color: #67e8f9; }
.bei-type--tickle\.fired { background: #2e2a1a1a; color: #fbbf24; }
.bei-type--brief\.dispatched { background: #1a2e181a; color: #6ee7b7; }
@media (max-width: 600px) {
.bei-row {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.bei-row-body { white-space: normal; }
}
.emission-item { padding: 8px 0; border-bottom: 1px solid #1a1a1a; }
.emission-item:last-child { border-bottom: none; }
.emission-header { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.emission-entity { font-size: var(--font-sm); font-weight: 600; }
.emission-type {
font-size: 9px; padding: 1px 5px; border-radius: 3px;
text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
}
.emission-type.notice { background: #1a3a5c; color: #5b9bd5; }
.emission-type.warning { background: #4a3a1a; color: #d4a535; }
.emission-type.error { background: #4a1a1a; color: #d55b5b; }
.emission-type.request { background: #3a1a4a; color: #a55bd5; }
.emission-type.flight { background: #1a3a3a; color: #5bd5b5; }
.emission-type.alert { background: #4a3a1a; color: #d4a535; }
.emission-time { font-size: 10px; color: #444; margin-left: auto; }
.emission-body { font-size: var(--font-sm); color: #888; line-height: 1.4; }
.emission-stats { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.emission-stat { font-size: 10px; color: #555; }
.emission-stat .sv { color: #777; font-weight: 600; }
.entity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 4px;
}
.entity-grid > .entity-card {
break-inside: avoid;
page-break-inside: avoid;
display: inline-block;
width: 100%;
}
/* Entity card — layered gradient effect ported from passenger popup.
Two layers: an oversized animated multi-color gradient behind a
dotted radial pattern. The dots are semi-transparent so the
gradient bleeds through.
- .active-5m: uses entity's accent color (calm, on-brand)
- :hover: purple→pink→yellow (original passenger palette, bright)
- hover overrides active when both are true
Each entity's gradient uses CSS vars set inline on the card. */
.entity-card {
position: relative;
border-radius: 6px;
border-left: 3px solid #444;
cursor: pointer; user-select: none;
overflow: hidden;
transition: border-color 350ms ease;
}
/* Active-5m layer — uses entity's outfit color (set via --entity-hue on the card) */
.entity-card::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(
130deg,
transparent 0% 28%,
hsla(var(--entity-hue, 180), 80%, 55%, 0.6) 55%,
hsla(calc(var(--entity-hue, 180) + 40), 85%, 60%, 0.55) 78%,
hsla(calc(var(--entity-hue, 180) + 80), 90%, 65%, 0.5) 100%
);
background-size: 400% 400%;
background-position: 0% 0%;
transition: background-position 700ms ease, transform 700ms ease, opacity 450ms ease;
pointer-events: none;
opacity: 0.11;
z-index: 1;
}
/* Hover layer — bright passenger-popup palette, sits on top */
.entity-card::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(
130deg,
transparent 0% 30%,
hsla(var(--entity-hue, 180), 80%, 55%, 0.6) 55%,
hsla(calc(var(--entity-hue, 180) + 40), 85%, 60%, 0.55) 78%,
hsla(calc(var(--entity-hue, 180) + 80), 90%, 65%, 0.5) 100%
);
background-size: 400% 400%;
background-position: 0% 0%;
transition: background-position 500ms ease, transform 500ms ease, opacity 350ms ease;
pointer-events: none;
opacity: 0.11;
z-index: 2;
}
.entity-card-inner {
position: relative;
inset: 0;
z-index: 3;
height: 100%;
padding: 6px 8px;
background: #0009;
background-image: radial-gradient(
rgba(255, 255, 255, 0.14) 8%,
transparent 8%
);
background-size: 18px 18px;
background-position: 0% 0%;
transition: background-position 500ms ease;
}
/* Active-5m: entity-color gradient reveals, slow drift */
.entity-card.active-5m::before {
opacity: 1;
background-position: 100% 100%;
transform: scale(1.12);
animation: entityDrift 12s ease-in-out infinite;
}
@keyframes entityDrift {
0%, 100% { background-position: 100% 100%; }
50% { background-position: 30% 60%; }
}
.entity-card.active-5m .entity-card-inner {
background-position: -6% 0%;
}
/* Hover: passenger-palette gradient overpowers, quick shift */
.entity-card:hover::after {
opacity: 1;
background-position: 100% 100%;
transform: scale(1.08);
}
.entity-card:hover .entity-card-inner {
background-position: -12% 0%;
}
/* Selected: card is the active filter target for the activity panel */
.entity-card.selected::after {
opacity: 1;
background-position: 100% 100%;
}
/* Clickable avatar link — stop bubbling on click handled in JS */
a.entity-avatar { text-decoration: none; }
a.entity-avatar:hover { cursor: pointer; }
.entity-card-top {
display: flex;
align-items: flex-start;
gap: 12px;
}
.entity-avatar {
width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; color: #fff;
background: #333; overflow: hidden;
position: relative;
}
.entity-avatar img { width: 100%; height: 100%; object-fit: cover; }
.status-dot {
position: absolute; bottom: 3px; right: 2px;
width: 7px; height: 7px; border-radius: 50%;
border: 2px solid #1a1a1a55;
}
.status-dot.status-live { background: #5bd5b5; box-shadow: 0 0 4px #5bd5b5; }
.status-dot.status-recent { background: #d4a535; }
.status-dot.status-idle { background: #555; }
.status-dot.status-cold { background: #2a2a2a; }
.entity-info { flex: 1; min-width: 0; }
.entity-title-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.entity-handle { font-size: var(--font-body); font-weight: 600; color: #e0e0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.entity-last-seen {
font-size: 10px; color: #555; flex-shrink: 0;
font-family: monospace;
}
.entity-last-seen .thoughtful-spinner {
position: absolute;
top: 12px;
right: 12px;
opacity: 0.22;
}
.entity-last-seen.live { color: #5bd5b5; }
.entity-last-seen.recent { color: #d4a535; }
.entity-tagline { font-size: var(--font-sm); color: #777; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.entity-meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; align-items: center; }
.entity-stat { font-size: 10px; color: #666; }
.entity-stat .stat-val { color: #999; font-weight: 600; }
.entity-role {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.entity-kingdom {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #2a1a3a; color: #a55bd5; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.entity-host {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #1a1a2a; color: #7b8bbf; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.entity-purpose {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #2a2a1a; color: #bf9b5b; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.entity-harness {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #1a2a2a; color: #5bbf8b; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.entity-alert-dot {
width: 6px; height: 6px; border-radius: 50%; background: #d4a535;
flex-shrink: 0; animation: alertPulse 2s ease-in-out infinite;
}
@keyframes alertPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* 24h activity row */
.entity-24h {
display: flex; gap: 10px; margin-top: 6px; padding-top: 6px;
border-top: 1px solid #242424; font-size: 10px; color: #555;
}
.entity-24h .h24-stat { display: flex; align-items: center; gap: 3px; }
.entity-24h .h24-val { color: #888; font-weight: 600; }
.entity-24h .h24-label { color: #555; }
.entity-24h .h24-muted { color: #2a2a2a; }
/* Flight indicators on entity cards */
.flight-indicator {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; padding-top: 5px; border-top: 1px solid #252525;
}
.flight-dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.75); }
}
.flight-brief { font-size: var(--font-sm); color: #5bd5b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.flight-elapsed { font-size: 10px; color: #555; flex-shrink: 0; }
.flight-model { font-size: 9px; padding: 1px 5px; border-radius: 3px; background: #1a3a3a; color: #5bd5b5; flex-shrink: 0; }
.entity-profile {
width: 369px;
flex-shrink: 0;
padding: 24px;
border-right: 1px solid var(--border);
overflow-y: visible;
align-self: flex-start;
position: sticky;
top: 0;
}
/* --- Avatar --- */
.entity-profile-avatar {
margin-bottom: 16px;
}
.entity-avatar-circle {
width: 320px;
height: 320px;
border-radius: 50%;
background: var(--bg-surface);
border: 2px solid var(--entity-accent, var(--accent));
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
font-weight: 700;
color: var(--accent);
font-family: var(--font-mono);
overflow: hidden;
margin: auto;
}
.entity-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.entity-avatar-glow {
box-shadow: 0 0 20px hsla(var(--entity-hue, 200), var(--entity-saturation, 30%), var(--entity-brightness, 55%), 0.2);
transition: box-shadow 0.4s ease;
}
.entity-avatar-flying {
animation: entity-avatar-pulse 2.4s ease-in-out infinite;
}
@keyframes entity-avatar-pulse {
0%, 100% { box-shadow: 0 0 20px hsla(var(--entity-hue, 200), var(--entity-saturation, 30%), var(--entity-brightness, 55%), 0.2); }
50% { box-shadow: 0 0 36px hsla(var(--entity-hue, 200), var(--entity-saturation, 30%), var(--entity-brightness, 55%), 0.45); }
}
/* --- Name, handle, bio --- */
.entity-profile-name {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin: 0 0 2px;
line-height: 1.3;
}
.entity-profile-handle {
font-size: var(--font-body);
color: var(--text-dim);
font-family: var(--font-mono);
margin: 0 0 16px;
}
.entity-profile-bio {
font-size: 15px;
color: var(--text);
line-height: 1.55;
margin: 0 0 16px;
opacity: 0.85;
}
/* --- Stats row --- */
.entity-profile-stats {
display: flex;
gap: 16px;
padding: 12px 0;
margin-bottom: 16px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.entity-profile-stat {
display: flex;
align-items: baseline;
gap: 4px;
}
.entity-stat-value {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.entity-stat-label {
font-size: var(--font-sm);
color: var(--text-dim);
}
/* --- Details list --- */
.entity-profile-details {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.entity-profile-detail {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--font-sm);
color: var(--text-dim);
}
.entity-detail-icon {
width: 16px;
text-align: center;
flex-shrink: 0;
color: var(--text-dim);
}
.entity-detail-link {
color: var(--accent);
text-decoration: none;
}
.entity-detail-link:hover {
text-decoration: underline;
}
/* --- Live 24h activity strip --- */
.entity-live-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 6px;
}
.entity-live-stat {
display: flex;
align-items: center;
gap: 5px;
font-size: var(--font-sm);
}
.entity-live-stat--full {
width: 100%;
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.entity-live-val {
color: var(--entity-accent, var(--accent));
font-weight: 600;
font-size: var(--font-sm);
}
.entity-live-val--age {
font-size: var(--font-sm);
}
.entity-live-label {
color: var(--text-dim);
}
/* --- Flight status block in sidebar --- */
.entity-flight-status {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
margin-bottom: 14px;
background: rgba(91, 213, 181, 0.07);
border: 1px solid rgba(91, 213, 181, 0.25);
border-radius: 6px;
font-size: var(--font-sm);
}
.entity-flight-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: #5bd5b5;
flex-shrink: 0;
animation: pulse-dot 1.4s ease-in-out infinite;
}
.entity-flight-status-label {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: #5bd5b5;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.entity-flight-status-slug {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.entity-flight-status-elapsed {
font-family: var(--font-mono);
font-size: var(--font-sm);
color: var(--text-dim);
margin-left: auto;
}
/* --- Bonds list in sidebar --- */
.entity-bonds-section {
margin: 12px 0;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.entity-bonds-heading {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-dim);
margin-bottom: 8px;
font-weight: 600;
}
.entity-bonds-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.entity-bond-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--font-sm);
color: var(--text-dim);
padding: 2px 0;
}
.entity-bond-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.entity-bond-type {
font-size: 9px;
padding: 1px 5px;
border-radius: 3px;
background: rgba(91, 143, 189, 0.15);
color: #5b8fbd;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-left: 6px;
flex-shrink: 0;
}
/* --- Action buttons --- */
.entity-profile-actions {
display: flex;
flex-direction: column;
gap: 8px;
}
.entity-btn-message {
display: block;
text-align: center;
padding: 8px 16px;
background: var(--entity-accent, var(--accent));
color: #0D0D0D;
font-size: var(--font-body);
font-weight: 700;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s;
}
.entity-btn-message:hover {
background: var(--entity-accent-light, var(--accent-dim));
}
.entity-btn-message--sponsor {
border: none;
width: 100%;
cursor: pointer;
font-family: var(--font-body);
}
/* --- Responsive: single column on narrow viewports --- */
@media (max-width: 768px) {
.entity-profile {
width: 100%;
position: static;
max-height: none;
border-right: none;
border-bottom: 1px solid var(--border);
}
.entity-avatar-circle {
width: 100px;
height: 100px;
font-size: 36px;
}
}
/* --- Harness ambient --- */
.harness-ambient {
font-size: var(--font-sm);
color: var(--text-dim);
font-family: var(--font-mono);
padding: 6px 0;
margin-bottom: 8px;
opacity: 0.7;
}
/* --- Not-found state (when profile is null) --- */
.entity-not-found {
padding: 32px 16px;
text-align: center;
}
.entity-not-found-mark {
font-size: 32px;
color: var(--text-dim);
margin-bottom: 12px;
}
.entity-not-found-title {
font-size: 16px;
color: var(--text-dim);
font-weight: 600;
}
.ep-header {
padding: 24px 32px 16px;
border-bottom: 1px solid #2a2a2a;
display: flex; align-items: center; gap: 16px;
}
.ep-avatar {
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700; color: #fff;
overflow: hidden; flex-shrink: 0;
}
.ep-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ep-title { font-size: 22px; font-weight: 600; color: #e0e0e0; }
.ep-tagline { font-size: var(--font-sm); color: #777; font-style: italic; margin-top: 2px; }
.ep-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.ep-body { display: flex; gap: 0; height: calc(100vh - 100px); }
.ep-main { flex: 1; padding: 20px 28px; overflow-y: auto; }
.ep-sidebar { width: 360px; min-width: 280px; border-left: 1px solid #2a2a2a; padding: 20px 18px; overflow-y: auto; }
a.flight-item,
a.flight-item:visited {
display: block;
color: inherit;
text-decoration: none;
}
a.flight-item:hover {
text-decoration: none;
background: rgba(255, 255, 255, 0.02);
}
.flight-item-grid {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 8px;
row-gap: 3px;
align-items: baseline;
margin-top: 4px;
}
.flight-item-desc {
color: var(--text-primary, #e4e4e7);
font-size: var(--font-sm);
line-height: 1.4;
min-width: 0; /* let ellipsis work inside the grid cell */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flight-item-runtime {
font-size: var(--font-sm);
color: var(--text-muted, #888);
font-variant-numeric: tabular-nums;
text-align: right;
}
.flight-item-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 10px;
min-width: 0;
}
.flight-item-stats .emission-stat { color: var(--text-muted, #888); }
.flight-item-stats .emission-stat .sv {
color: var(--text-secondary, #a1a1aa);
font-variant-numeric: tabular-nums;
}
.flight-item-cost {
font-size: var(--font-sm);
color: var(--text-primary, #e4e4e7);
font-variant-numeric: tabular-nums;
font-weight: 500;
text-align: right;
}
.flight-item-cost .sv { color: inherit; }
a.flight-pinned,
a.flight-pinned:visited {
display: block;
color: inherit;
text-decoration: none;
}
a.flight-pinned:hover {
text-decoration: none;
background: #161616;
}
.flight-pinned {
padding: 8px 10px;
border-left: 2px solid #5bd5b5;
margin-bottom: 6px;
background: #111;
}
.flight-pinned .emission-header {
display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.flight-pinned .emission-entity { font-size: var(--font-sm); font-weight: 600; }
.flight-pinned .emission-body { font-size: var(--font-sm); color: #888; line-height: 1.4; }
.flight-pinned .emission-time { font-size: 10px; color: #444; margin-left: auto; }
.flight-model {
font-size: 9px; color: #5bd5b5; padding: 1px 5px;
border-radius: 3px; background: #1a3a3a;
text-transform: none; letter-spacing: 0;
}
.brand-kingdom-flights-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.brand-kingdom-flights-table th {
text-align: left; padding: 6px 10px; font-size: 10px;
text-transform: uppercase; letter-spacing: 1px; color: #555;
border-bottom: 1px solid #2a2a2a; font-weight: 600;
}
.brand-kingdom-flights-table td {
padding: 6px 10px; border-bottom: 1px solid #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 300px; color: #999;
}
.brand-kingdom-flights-table tr:hover td { background: #1a1a1a; }
.brand-kingdom-flights-table .status-flying { color: #5bd5b5; }
.brand-kingdom-flights-table .status-landed { color: #777; }
.brand-kingdom-flights-table .status-stale { color: #d4a535; }
.brand-kingdom-flights-table .status-closed { color: #777; }
.brand-kingdom-flights-table .entity-col { font-weight: 600; }
.brand-kingdom-flights-table .brief-col { color: #aaa; max-width: 360px; }
.brand-kingdom-flights-table .time-col { font-family: monospace; font-size: var(--font-sm); color: #666; }
.brand-kingdom-flights-table .model-col { font-size: 10px; }.brand-kingdom-detail {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bkd-nav {
margin-bottom: 1.5rem;
font-size: var(--font-body);
}
.bkd-nav-back {
color: var(--outfit-muted, #71717a);
}
.bkd-nav-back:hover { color: var(--outfit-fg, #e4e4e7); }
.bkd-shell {
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 10px;
overflow: hidden;
}
.bkd-header {
padding: 1.5rem 1.75rem;
background: linear-gradient(180deg, #1f1f23, #18181b);
border-bottom: 1px solid var(--outfit-border, #27272a);
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 1rem;
}
.bkd-name {
font-size: 1.4rem;
font-weight: 500;
color: var(--outfit-fg, #e4e4e7);
margin: 0 0 0.3rem 0;
}
.bkd-domain {
font-family: monospace;
font-size: var(--font-body);
color: var(--outfit-muted, #71717a);
}
.bkd-sovereign-block {
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: right;
}
.bkd-sovereign-label {
font-size: 0.68rem;
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.bkd-sovereign-link {
font-size: var(--font-body);
color: var(--outfit-accent, #60a5fa);
font-weight: 500;
text-decoration: none;
}
.bkd-sovereign-link:hover { opacity: 0.8; }
.bkd-section {
padding: 1.25rem 1.75rem;
border-bottom: 1px solid var(--outfit-border, #27272a);
}
.bkd-section-title {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
margin: 0 0 0.9rem 0;
}
.bkd-meta-row {
display: flex;
align-items: center;
gap: 1rem;
font-size: var(--font-body);
}
.bkd-meta-label {
font-size: 0.72rem;
color: var(--outfit-muted, #71717a);
text-transform: uppercase;
letter-spacing: 0.04em;
min-width: 130px;
}
.bkd-meta-value {
color: var(--outfit-fg, #e4e4e7);
}
.bkd-member-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.bkd-member-chip {
padding: 0.3em 0.8em;
background: #27272a;
border: 1px solid #3f3f46;
border-radius: 4px;
font-size: var(--font-sm);
color: var(--outfit-fg, #e4e4e7);
text-decoration: none;
transition: border-color 0.1s, background 0.1s;
}
.bkd-member-chip:hover { background: #3f3f46; border-color: #52525b; }
.bkd-flight-list, .bkd-emission-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.bkd-flight-row, .bkd-emission-row {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.75rem;
background: #0e0e10;
border: 1px solid #27272a20;
border-radius: 4px;
text-decoration: none;
font-size: var(--font-sm);
flex-wrap: wrap;
}
.bkd-flight-row:hover, .bkd-emission-row:hover { background: #1a1a1d; }
.bkd-flight-entity, .bkd-emission-entity {
font-weight: 500;
min-width: 60px;
}
.bkd-flight-status {
font-size: 0.7rem;
padding: 0.1em 0.4em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
}
.bkd-flight-status--flying { background: #0c2e1a1a; color: #34d399; }
.bkd-flight-desc {
flex: 1;
color: var(--outfit-fg, #e4e4e7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.bkd-flight-time, .bkd-emission-time {
color: var(--outfit-muted, #71717a);
font-size: var(--font-sm);
white-space: nowrap;
font-variant-numeric: tabular-nums;
margin-left: auto;
}
.bkd-emission-type {
font-size: 0.68rem;
padding: 0.1em 0.4em;
border-radius: 3px;
background: #27272a;
color: #a1a1aa;
text-transform: uppercase;
}
.bkd-emission-type--warning { color: #f97316; }
.bkd-emission-type--error { color: #ef4444; }
.bkd-emission-type--notice { color: #60a5fa; }
.bkd-emission-body {
flex: 1;
color: var(--outfit-fg, #e4e4e7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.bkd-footer {
padding: 0.75rem 1.75rem;
background: #0e0e10;
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.bkd-id, .bkd-cid {
font-family: monospace;
font-size: var(--font-mono-label);
color: var(--outfit-muted, #71717a);
word-break: break-all;
}
.bkd-missing {
padding: 3rem 1.5rem;
text-align: center;
color: var(--outfit-muted, #71717a);
}
.bkd-missing a { color: var(--outfit-accent, #60a5fa); }.kingdom-health {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 2rem 0;
}
/* Kingdom fuel — aggregate quota display sourced from latest harness session */
.fuel-card {
background: var(--background-color);
border: 1px solid var(--border-color);
border-left-width: 4px;
border-radius: 8px;
padding: 1.25rem 1.5rem;
margin: 2rem 0 1.25rem;
}
.fuel-card.fuel-band-high { border-left-color: var(--success); }
.fuel-card.fuel-band-mid { border-left-color: var(--warning); }
.fuel-card.fuel-band-low { border-left-color: var(--danger); }
.fuel-headline {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.fuel-label {
font-size: var(--font-sm);
color: var(--text-muted, var(--secondary));
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fuel-pct {
font-size: 2.5rem;
font-weight: 500;
color: var(--text-color);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.fuel-pct em {
font-style: normal;
font-size: 1rem;
color: var(--text-dim, var(--secondary));
margin-left: 0.1rem;
}
.fuel-band-low .fuel-pct { color: color-mix(in srgb, var(--danger) 70%, var(--fill-color)); }
.fuel-status {
color: var(--text-dim, var(--secondary));
font-size: var(--font-body);
margin-left: auto;
}
.fuel-band-low .fuel-status { color: color-mix(in srgb, var(--danger) 70%, var(--fill-color)); }
.fuel-bars {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.fuel-bar-label {
font-size: var(--font-sm);
color: var(--text-muted, var(--secondary));
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.fuel-bar-track {
height: 10px;
background: var(--shadow-color);
border-radius: 2px;
overflow: hidden;
}
.fuel-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 60%, var(--light)));
border-radius: 2px;
transition: width 0.5s ease;
}
.fuel-band-mid .fuel-bar-fill { background: linear-gradient(90deg, var(--warning), color-mix(in srgb, var(--warning) 60%, var(--light))); }
.fuel-band-low .fuel-bar-fill { background: linear-gradient(90deg, var(--danger), color-mix(in srgb, var(--danger) 60%, var(--fill-color))); }
.fuel-bar-readout {
font-size: var(--font-sm);
color: var(--text-muted, var(--secondary));
margin-top: 0.25rem;
font-variant-numeric: tabular-nums;
}
.health-app {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.25rem 1.5rem;
}
.health-app.health-stale {
border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}
.health-app-head {
display: flex;
align-items: baseline;
gap: 0.75rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.health-app-name {
margin: 0;
color: var(--text-color);
font-weight: 500;
font-size: 1.15rem;
}
.health-app-slug {
color: var(--text-muted, var(--secondary));
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
}
.health-badge-live {
color: color-mix(in srgb, var(--success) 70%, var(--light));
font-size: var(--font-sm);
margin-left: auto;
}
.health-badge-stale {
color: color-mix(in srgb, var(--danger) 60%, var(--fill-color));
font-size: var(--font-sm);
margin-left: auto;
}
.health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
.health-cell {
background: var(--dark);
border: 1px solid var(--border-color);
border-left-width: 4px;
border-radius: 4px;
padding: 0.75rem 0.9rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.health-cell .label {
font-size: 0.72rem;
color: var(--text-muted, var(--secondary));
text-transform: uppercase;
letter-spacing: 0.05em;
}
.health-cell .value {
font-size: 1.5rem;
color: var(--text-color);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.health-cell .value em {
font-style: normal;
font-size: 0.7rem;
color: var(--text-dim, var(--secondary));
margin-left: 0.2rem;
}
.health-cell .sublabel {
font-size: 0.7rem;
color: var(--text-muted, var(--secondary));
margin-top: 0.1rem;
}
.kingdom-health .light-green { border-left-color: var(--success); }
.kingdom-health .light-yellow { border-left-color: var(--warning); }
.kingdom-health .light-red { border-left-color: var(--danger); }
.kingdom-health .light-red .value { color: color-mix(in srgb, var(--danger) 60%, var(--fill-color)); }
.kingdom-health .light-neutral { border-left-color: var(--secondary); }
.kingdom-health .light-unknown { border-left-color: var(--secondary); opacity: 0.6; }
.kingdom-health .light-unknown .value { color: var(--text-muted, var(--secondary)); opacity: 1; }.brand-kingdoms-index {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.bki-header {
margin-bottom: 1.75rem;
}
.bki-title {
font-size: var(--font-h2);
font-weight: 500;
color: var(--outfit-fg, #e4e4e7);
margin: 0 0 0.4rem 0;
}
.bki-subtitle {
font-size: var(--font-body);
color: var(--outfit-muted, #71717a);
margin: 0;
}
.bki-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.bki-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
background: var(--outfit-card-bg, #18181b);
border: 1px solid var(--outfit-border, #27272a);
border-radius: 8px;
text-decoration: none;
transition: border-color 0.1s;
}
.bki-card:hover { border-color: #3f3f46; }
.bki-card-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
}
.bki-name {
font-size: 1.05rem;
font-weight: 500;
color: var(--outfit-fg, #e4e4e7);
}
.bki-domain {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
font-family: monospace;
}
.bki-card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bki-sovereign {
font-size: var(--font-sm);
color: var(--outfit-muted, #71717a);
}
.bki-members {
font-size: var(--font-sm);
color: var(--outfit-muted, #52525b);
}
.bki-model {
font-size: var(--font-sm);
color: var(--outfit-muted, #52525b);
font-style: italic;
}
.bki-empty {
color: var(--outfit-muted, #71717a);
font-size: var(--font-body);
padding: 2rem 0;
}.display-none {
display: none;
}
/* ---- brandKingdomOverview — header & nav ---- */
.brand-kingdom-overview-header {
padding: 10px 28px 10px;
border-bottom: 1px solid #2a2a2a;
display: flex; align-items: center; gap: 12px;
}
.brand-kingdom-overview-header .glyph { font-size: 28px; color: #888; cursor: pointer; }
.brand-kingdom-overview-header h1 { font-size: 18px; font-weight: 400; color: #aaa; letter-spacing: 1px; }
.brand-kingdom-overview-header h1 span { color: #e0e0e0; font-weight: 600; }
.brand-kingdom-overview-nav-tabs {
display: flex; gap: 2px; margin-left: auto; align-items: center;
}
.brand-kingdom-overview-nav-tab {
font-size: var(--font-sm); color: #666; display: flex; align-items: center; gap: 4px;
padding: 6px 12px; border-radius: 4px; cursor: pointer;
transition: background 0.15s, color 0.15s; user-select: none;
}
.brand-kingdom-overview-nav-tab:hover { background: #1e1e1e; color: #aaa; }
.brand-kingdom-overview-nav-tab.active { background: #1a2a2a; color: #5bd5b5; }
.brand-kingdom-overview-nav-tab .val { font-weight: 600; font-size: var(--font-sm); }
.brand-kingdom-overview-nav-tab.active .val { color: #5bd5b5; }
.brand-kingdom-overview-alert-tab .val { color: #d4a535; }
/* ---- Layout ---- */
.brand-kingdom-overview-body { display: flex; gap: 0; height: calc(100vh - 58px); }
.brand-kingdom-overview-main-panel { flex: 1; padding: 20px 28px; overflow-y: auto; }
.brand-kingdom-overview-activity-panel { width: 369px; min-width: 340px; border-left: 1px solid #2a2a2a; overflow-y: auto; display: flex; flex-direction: column; }
/* ---- Search bar ---- */
.brand-kingdom-overview-search-bar {
display: flex; gap: 8px; padding: 8px 16px 10px;
}
.brand-kingdom-overview-search-input,
.brand-kingdom-overview-kingdom-filter-input {
background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
padding: 6px 10px; font-size: var(--font-sm); color: #aaa;
width: 160px; outline: none;
}
.brand-kingdom-overview-search-input:focus,
.brand-kingdom-overview-kingdom-filter-input:focus {
border-color: #5bd5b5; color: #eee;
}
.brand-kingdom-overview-search-input::placeholder,
.brand-kingdom-overview-kingdom-filter-input::placeholder {
color: #555;
}
.brand-kingdom-overview-clear-search {
cursor: pointer; color: #666; font-size: var(--font-sm);
padding: 6px 4px; user-select: none;
}
.brand-kingdom-overview-clear-search:hover { color: #aaa; }
/* ---- Shared section-label (used across all sub-views) ---- */
.section-label {
font-size: var(--font-sm); text-transform: uppercase; letter-spacing: 2px; color: #666;
margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.section-label .count { color: #555; font-weight: 400; }
/* ---- Kingdom banner (entities view) ---- */
.brand-kingdom-overview-kingdom-banner {
margin-bottom: 16px; padding: 12px 16px;
background: #161b1e; border: 1px solid #1e2a2e; border-radius: 6px;
display: flex; gap: 24px; flex-wrap: wrap;
}
.brand-kingdom-overview-kingdom-item { font-size: var(--font-sm); color: #888; }
.brand-kingdom-overview-kingdom-item .kv { color: #aaa; font-weight: 500; }
.brand-kingdom-overview-kingdom-item .kl { color: #556; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-right: 6px; }
.brand-kingdom-overview-kingdom-activity {
display: flex; gap: 12px; margin-left: auto;
}
.brand-kingdom-overview-ka-stat {
font-size: var(--font-sm); color: #666; padding: 2px 8px;
background: #1a2a2a; border-radius: 3px;
}
/* ---- Entity grid (entities view) ---- */
.brand-kingdom-overview-entity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(311px, 1fr));
gap: 12px;
margin-bottom: 4px;
}
.brand-kingdom-overview-entity-grid > .entity-card {
break-inside: avoid;
page-break-inside: avoid;
display: inline-block;
width: 100%;
}
/* ---- Bullpen ---- */
.brand-kingdom-overview-bullpen {
display: flex; flex-wrap: wrap; gap: 18px;
padding: 8px 4px;
}
.brand-kingdom-overview-bullpen-avatar {
position: relative;
width: 64px; height: 64px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; color: #fff;
background: #333; overflow: visible;
text-decoration: none;
cursor: pointer;
opacity: 0.66;
transition: opacity 200ms ease, transform 200ms ease;
}
.brand-kingdom-overview-bullpen-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.brand-kingdom-overview-bullpen-letter {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.brand-kingdom-overview-bullpen-label {
position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: #555; white-space: nowrap;
pointer-events: none; opacity: 0; transition: opacity 200ms ease;
}
.brand-kingdom-overview-bullpen-avatar:hover {
opacity: 1;
transform: translateY(-2px);
}
.brand-kingdom-overview-bullpen-avatar:hover .brand-kingdom-overview-bullpen-label {
opacity: 1;
color: #aaa;
}
.brand-kingdom-overview-bullpen-avatar.active-5m {
opacity: 1;
box-shadow: 0 0 0 2px hsla(var(--entity-hue, 180), 70%, 55%, 0.6);
}
/* ---- Flight filter bar (shared, used in flights + bonds sub-views) ---- */
.flight-filter-bar {
display: flex; gap: 8px; margin-bottom: 14px; align-items: center;
}
.flight-filter {
font-size: 10px; padding: 3px 10px; border-radius: 3px; cursor: pointer;
background: #1a1a1a; color: #777; border: 1px solid #2a2a2a;
transition: background 0.15s; user-select: none;
}
.flight-filter:hover { background: #222; color: #aaa; }
.flight-filter.active { background: #1a3a3a; color: #5bd5b5; border-color: #2a4a4a; }
/* ---- Activity panel ---- */
.brand-kingdom-overview-activity-section { padding: 14px 18px; }
.brand-kingdom-overview-activity-section + .brand-kingdom-overview-activity-section { border-top: 1px solid #1e1e1e; }
/* Selected entity detail header */
.brand-kingdom-overview-activity-filter-header {
padding: 10px 14px;
border-bottom: 1px solid #2a2a2a;
display: flex;
align-items: center;
gap: 10px;
background: rgba(91, 213, 181, 0.05);
}
.brand-kingdom-overview-activity-filter-avatar {
width: 96px; height: 96px; border-radius: 50%;
background-size: cover; background-position: center;
border: 2px solid #ffffff22;
display: flex; align-items: center; justify-content: center;
font-weight: 600; color: #fff; flex-shrink: 0;
}
.brand-kingdom-overview-activity-filter-meta { flex: 1; min-width: 0; }
.brand-kingdom-overview-activity-filter-handle { font-weight: 600; color: #eee; font-size: var(--font-sm); }
.brand-kingdom-overview-activity-filter-tagline {
font-size: var(--font-sm); color: #888;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-kingdom-overview-deselect-entity {
cursor: pointer; color: #888; font-size: 16px;
padding: 4px 8px; border-radius: 3px;
user-select: none;
}
.brand-kingdom-overview-deselect-entity:hover { color: #fff; background: #333; }
.brand-kingdom-overview-entity-detail-header {
flex-wrap: wrap; gap: 8px;
}
.brand-kingdom-overview-entity-detail-meta {
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.brand-kingdom-overview-entity-quick-stats {
display: flex; gap: 12px; padding: 8px 14px;
background: #161818; border-bottom: 1px solid #2a2a2a;
}
.brand-kingdom-overview-quick-stat {
font-size: var(--font-sm); color: #666;
}
.brand-kingdom-overview-quick-stat .qs-val {
color: #aaa; font-weight: 600; margin-right: 3px;
}
.brand-kingdom-overview-entity-detail-section {
padding: 10px 14px; border-bottom: 1px solid #1e1e1e;
}
/* ---- Tier nudge ---- */
.brand-kingdom-overview-tier-nudge {
display: flex; align-items: center; gap: 8px;
padding: 8px 0; border-top: 1px solid #1a1a1a; margin-top: 4px;
font-size: var(--font-sm); color: #555;
}
.brand-kingdom-overview-tier-nudge-text { flex: 1; }
.brand-kingdom-overview-tier-nudge-link {
color: #5bd5b5; text-decoration: none; font-weight: 600;
font-size: 10px; opacity: 0.75; transition: opacity 0.15s;
}
.brand-kingdom-overview-tier-nudge-link:hover { opacity: 0.6; }
/* ---- Scrollbar styling ---- */
.brand-kingdom-overview-main-panel::-webkit-scrollbar,
.brand-kingdom-overview-activity-panel::-webkit-scrollbar { width: 6px; }
.brand-kingdom-overview-main-panel::-webkit-scrollbar-thumb,
.brand-kingdom-overview-activity-panel::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.brand-kingdom-overview-main-panel::-webkit-scrollbar-track,
.brand-kingdom-overview-activity-panel::-webkit-scrollbar-track { background: transparent; }
/* ---- Empty state (shared utility) ---- */
.empty-state { color: #444; font-size: var(--font-sm); font-style: italic; padding: 16px 0; }/* brandOverviewActiveFlights — active flights activity card.
No component-specific layout rules needed — the section chrome
(.brand-kingdom-overview-activity-section, .section-label) is defined in
the parent overview styles.css and shared across all activity sections.
Individual tile styling lives in client/flight/pinned/styles.css.
Add rules here only for active-flights-specific overrides or future additions. */
.brand-kingdom-overview-alert-item { padding: 8px 0; border-bottom: 1px solid #1a1a1a; }/* brandOverviewEmissions — emissions activity card.
No component-specific layout rules needed — the section chrome
(.brand-kingdom-overview-activity-section, .section-label, .empty-state,
.brand-kingdom-overview-tier-nudge) is defined in the parent overview styles.css.
The display-none class is defined at the top of overview/styles.css as a
shared utility (.display-none { display: none; }).
Add rules here only for emissions-specific overrides or future additions. *//* brandOverviewMissions — section-level card.
Outer wrapper uses brand-kingdom-overview-activity-section from parent
overview styles; flight tiles + their 2×2 grid live in brandFlightItem.
Left empty; missions-specific overrides land here if they arrive. */
.spirit-group {
padding-bottom: 10px;
border-bottom: 1px solid var(--panel-border, #27272a);
margin-bottom: 10px;
}
.spirit-group:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
.spirit-group-header {
display: flex;
align-items: baseline;
gap: 6px;
font-size: var(--font-sm);
margin-bottom: 6px;
}
.spirit-group-header .text-muted {
color: var(--text-muted, #71717a);
font-size: var(--font-sm);
}
.spirit-group-header .flight-model {
color: var(--text-primary, #e4e4e7);
}
.spirit-group-count {
font-size: var(--font-sm);
color: var(--text-muted, #71717a);
font-variant-numeric: tabular-nums;
}
.spirit-group-meta {
margin-left: auto;
display: flex;
gap: 8px;
align-items: baseline;
font-variant-numeric: tabular-nums;
}
.spirit-group-cost {
font-size: var(--font-sm);
color: var(--text-primary, #e4e4e7);
font-weight: 500;
}
.spirit-group-burn {
font-size: var(--font-sm);
color: #fbbf24;
}
.spirit-group-rows {
display: flex;
flex-direction: column;
gap: 4px;
}
.spirit-group-row {
padding: 6px 8px;
background: var(--panel-bg-inner, #0e0e10);
border-radius: 4px;
border-left: 2px solid var(--panel-border, #27272a);
display: flex;
flex-direction: column;
gap: 3px;
color: inherit;
text-decoration: none;
transition: border-left-color 0.15s ease;
}
.spirit-group-row:hover {
border-left-color: var(--accent, #60a5fa);
text-decoration: none;
}
.spirit-row-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
font-size: var(--font-sm);
}
.spirit-row-model {
color: rgba(120, 200, 255, 0.9);
font-weight: 500;
}
.spirit-row-harness {
color: var(--text-muted, #71717a);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spirit-row-status {
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.spirit-row-status--active { background: rgba(120,220,150,0.15); color: rgb(120,220,150); }
.spirit-row-status--stale { background: rgba(220,180,80,0.15); color: rgb(220,180,80); }
.spirit-row-status--killed,
.spirit-row-status--ended { background: rgba(180,180,180,0.10); color: rgb(180,180,180); }
.spirit-row-runtime {
margin-left: auto;
color: #FFFFFF66;
font-variant-numeric: tabular-nums;
}
.spirit-row-cwd {
font-family: monospace;
font-size: var(--font-sm);
color: var(--text-secondary, #a1a1aa);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spirit-row-cwd.muted { color: var(--text-muted, #71717a); font-style: italic; }
.spirit-row-stats {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: var(--font-sm);
}
.spirit-row-stats .lines-added { color: rgba(120, 220, 150, 0.85); }
.spirit-row-stats .lines-removed { color: rgba(220, 140, 140, 0.85); }
.spirit-row-cost {
margin-left: auto;
color: var(--text-primary, #e4e4e7);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.spirit-row-cost .sv { color: inherit; }
.spirit-group-spirit {
font-weight: 600;
color: rgba(220, 180, 100, 0.95);
text-decoration: none;
}
.spirit-group-spirit:hover { text-decoration: underline; }
.spirit-row-stats {
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: 10px;
}
.spirit-row-stats .emission-stat {
color: var(--text-muted, #71717a);
}
.spirit-row-stats .emission-stat .sv {
color: var(--text-secondary, #a1a1aa);
font-variant-numeric: tabular-nums;
}
.spirit-row-stats .emission-type.flight {
background: rgba(96, 165, 250, 0.1);
color: #93c5fd;
padding: 1px 5px;
border-radius: 2px;
}
.brand-kingdom-alerts-entity-group { margin-bottom: 16px; }
.brand-kingdom-alerts-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.brand-kingdom-alerts-entity-name { font-size: var(--font-body); font-weight: 600; }
.brand-kingdom-alerts-alert-row {
display: flex; align-items: flex-start; gap: 8px; padding: 4px 12px;
font-size: var(--font-sm);
}
.brand-kingdom-alerts-alert-source {
font-size: 9px; padding: 1px 5px; border-radius: 2px;
text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; flex-shrink: 0;
margin-top: 2px;
}
.brand-kingdom-alerts-alert-source.alerts { background: #4a3a1a; color: #d4a535; }
.brand-kingdom-alerts-alert-source.notifications { background: #1a3a5c; color: #5b9bd5; }
.brand-kingdom-alerts-alert-text { color: #999; line-height: 1.4; }
.brand-kingdom-bonds-entity-group { margin-bottom: 16px; }
.brand-kingdom-bonds-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.brand-kingdom-bonds-entity-name { font-size: var(--font-body); font-weight: 600; }
.brand-kingdom-bonds-entity-count { font-size: var(--font-sm); color: #555; }
.brand-kingdom-bonds-bond-row {
display: flex; align-items: center; gap: 10px; padding: 4px 12px;
font-size: var(--font-sm); color: #888;
}
.brand-kingdom-bonds-bond-row .brand-kingdom-bonds-bond-name { flex: 1; }
.brand-kingdom-bonds-bond-row .brand-kingdom-bonds-bond-kind {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
}
/* Bond graph rendering is handled by brandBondGraph (client/components/bond-graph/styles.css). */
.brand-kingdom-ck-bonds-group { margin-bottom: 12px; }
.brand-kingdom-ck-bonds-row {
display: flex; align-items: center; gap: 8px; padding: 6px 12px;
font-size: var(--font-sm); color: #aaa; background: #161818; border-radius: 4px;
}
.brand-kingdom-ck-bonds-from { font-weight: 600; }
.brand-kingdom-ck-bonds-arrow { color: #555; }
.brand-kingdom-ck-bonds-to { font-weight: 600; }
.brand-kingdom-ck-bonds-kingdom-from,
.brand-kingdom-ck-bonds-kingdom-to {
font-size: 10px; padding: 1px 5px; border-radius: 3px;
background: #2a1a3a; color: #a55bd5; text-transform: uppercase;
}
.brand-kingdom-flights-table { width: 100%; border-collapse: collapse; font-size: var(--font-sm); }
.brand-kingdom-flights-table th {
text-align: left; padding: 6px 10px; font-size: 10px;
text-transform: uppercase; letter-spacing: 1px; color: #555;
border-bottom: 1px solid #2a2a2a; font-weight: 600;
}
.brand-kingdom-flights-table td {
padding: 6px 10px; border-bottom: 1px solid #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 300px; color: #999;
}
.brand-kingdom-flights-table tr:hover td { background: #1a1a1a; }
.brand-kingdom-flights-table .status-flying { color: #5bd5b5; }
.brand-kingdom-flights-table .status-landed { color: #777; }
.brand-kingdom-flights-table .status-stale { color: #d4a535; }
.brand-kingdom-flights-table .status-closed { color: #777; }
.brand-kingdom-flights-table .entity-col { font-weight: 600; }
.brand-kingdom-flights-table .brief-col { color: #aaa; max-width: 360px; }
.brand-kingdom-flights-table .time-col { font-family: monospace; font-size: var(--font-sm); color: #666; }
.brand-kingdom-flights-table .model-col { font-size: 10px; }
.brand-kingdom-health-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.brand-kingdom-health-card {
background: #161818; border: 1px solid #2a2a2a; border-radius: 6px;
padding: 14px;
}
.brand-kingdom-health-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: #555; margin-bottom: 4px;
}
.brand-kingdom-health-value {
font-size: 18px; font-weight: 600; color: #eee;
}
.brand-kingdom-health-status-ok { color: #5bd5b5; }
.brand-kingdom-health-indexer-list { display: flex; flex-direction: column; gap: 6px; }
.brand-kingdom-health-indexer-row {
display: flex; align-items: center; gap: 12px; padding: 8px 12px;
background: #161818; border-radius: 4px; font-size: var(--font-sm);
}
.brand-kingdom-health-indexer-ready { border-left: 3px solid #5bd5b5; }
.brand-kingdom-health-indexer-name { color: #aaa; font-weight: 500; }
.brand-kingdom-health-indexer-time { color: #555; margin-left: auto; }
.brand-kingdom-health-collection-stats { display: flex; flex-direction: column; gap: 4px; }
.brand-kingdom-health-collection-row {
display: flex; align-items: center; gap: 12px; padding: 6px 0;
font-size: var(--font-sm); border-bottom: 1px solid #1e1e1e;
}
.brand-kingdom-health-col-name { color: #888; }
.brand-kingdom-health-col-count { color: #aaa; font-weight: 600; margin-left: auto; font-family: monospace; }
.brand-kingdom-keys-entity-group { margin-bottom: 16px; }
.brand-kingdom-keys-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.brand-kingdom-keys-entity-name { font-size: var(--font-body); font-weight: 600; }
.brand-kingdom-keys-entity-count { font-size: var(--font-sm); color: #555; }
.brand-kingdom-keys-key-row {
display: flex; align-items: center; gap: 10px; padding: 4px 12px;
font-size: var(--font-sm); color: #888;
}
.brand-kingdom-keys-key-row .brand-kingdom-keys-key-name { flex: 1; font-family: monospace; font-size: var(--font-sm); }
.brand-kingdom-keys-key-row .brand-kingdom-keys-key-kind {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #2a1a3a; color: #8b7bbf; text-transform: uppercase;
}
.brand-kingdom-tickles-entity-group { margin-bottom: 16px; }
.brand-kingdom-tickles-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.brand-kingdom-tickles-entity-name { font-size: var(--font-body); font-weight: 600; }
.brand-kingdom-tickles-entity-count { font-size: var(--font-sm); color: #555; }
.brand-kingdom-tickles-tickle-row {
padding: 3px 12px; font-size: var(--font-sm); color: #888;
}
.brand-kingdom-overview-bond-mini-row {
display: flex; align-items: center; gap: 6px; padding: 3px 0;
font-size: var(--font-sm); color: #888;
}
.brand-kingdom-overview-bond-mini-kind {
font-size: 8px; padding: 1px 4px; border-radius: 2px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
}
.brand-kingdom-overview-key-mini-row {
display: flex; align-items: center; gap: 6px; padding: 3px 0;
font-size: var(--font-sm); color: #888;
}
.brand-kingdom-overview-key-mini-kind {
font-size: 8px; padding: 1px 4px; border-radius: 2px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
}
.brand-kingdom-overview-tickle-mini-row {
display: flex; align-items: center; gap: 6px; padding: 3px 0;
font-size: var(--font-sm); color: #777; font-style: italic;
}.session-annotator-clock {
position: fixed;
top: 72px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
display: flex;
align-items: center;
gap: 10px;
padding: 6px 14px;
background: rgba(20, 20, 22, 0.85);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
color: var(--text, #ddd);
pointer-events: none;
}
.session-annotator-clock-time {
letter-spacing: 0.4px;
}
.session-annotator-clock-kind {
font-size: 10px;
color: var(--text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.session-annotator {
position: fixed;
top: 110px;
right: 16px;
z-index: 9997;
width: 320px;
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
background: rgba(18, 18, 20, 0.92);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 8px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
color: var(--text, #ddd);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.session-annotator--collapsed {
width: auto;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
}
.session-annotator--collapsed .session-annotator-toggle {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(120, 220, 150, 0.85);
color: #000;
font-size: 20px;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.session-annotator-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.session-annotator-title {
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted, #888);
}
.session-annotator-toggle {
background: transparent;
border: none;
color: var(--text-muted, #888);
font-size: var(--font-body);
cursor: pointer;
padding: 0 6px;
}
.session-annotator-toggle:hover {
color: var(--text-bright, #eee);
}
.session-annotator-types {
display: flex;
gap: 4px;
padding: 8px 12px 4px;
}
.session-annotator-type {
flex: 1;
padding: 5px 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 4px;
color: var(--text-muted, #888);
font-family: inherit;
font-size: var(--font-sm);
cursor: pointer;
text-transform: lowercase;
}
.session-annotator-type:hover {
color: var(--text-bright, #eee);
background: rgba(255, 255, 255, 0.07);
}
.session-annotator-type--active {
background: rgba(120, 220, 150, 0.15);
border-color: rgba(120, 220, 150, 0.5);
color: rgba(120, 220, 150, 1);
}
.session-annotator-clip-options {
display: flex;
flex-direction: column;
gap: 6px;
padding: 6px 12px 0;
}
.session-annotator-playlist {
width: 100%;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
color: var(--text, #ddd);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
}
.session-annotator-playlist:focus {
outline: none;
border-color: rgba(220, 120, 200, 0.5);
}
.session-annotator-range {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
color: var(--text-muted, #888);
}
.session-annotator-range-label {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.session-annotator-range-btn {
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
color: var(--text, #ddd);
font-family: inherit;
font-size: var(--font-sm);
line-height: 1;
cursor: pointer;
}
.session-annotator-range-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.session-annotator-range-count {
min-width: 18px;
text-align: center;
color: var(--text-bright, #eee);
font-weight: 600;
font-size: var(--font-sm);
}
.session-annotator-range-hint {
color: var(--text-faint, #666);
}
.session-annotator-text {
margin: 6px 12px;
padding: 8px;
min-height: 80px;
resize: vertical;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
color: var(--text, #ddd);
font-family: inherit;
font-size: var(--font-sm);
line-height: 1.4;
}
.session-annotator-text:focus {
outline: none;
border-color: rgba(120, 220, 150, 0.4);
}
.session-annotator-anchor {
display: flex;
justify-content: space-between;
padding: 4px 12px;
font-size: 10px;
color: var(--text-faint, #666);
}
.session-annotator-anchor-time {
color: var(--text-muted, #888);
}
.session-annotator-actions {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 12px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.session-annotator-save {
padding: 5px 14px;
background: rgba(120, 220, 150, 0.85);
border: none;
border-radius: 4px;
color: #000;
font-family: inherit;
font-size: var(--font-sm);
font-weight: 600;
cursor: pointer;
}
.session-annotator-save:hover {
background: rgba(120, 220, 150, 1);
}
.session-annotator-visibility {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted, #888);
cursor: pointer;
font-size: var(--font-sm);
padding: 0;
line-height: 1;
}
.session-annotator-visibility:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-bright, #eee);
}
.session-annotator-visibility--private {
border-color: rgba(220, 180, 80, 0.5);
background: rgba(220, 180, 80, 0.12);
color: rgba(220, 180, 80, 1);
}
.session-annotator-status {
font-size: var(--font-sm);
color: var(--text-muted, #888);
}
.session-annotator-status--ok {
color: rgba(120, 220, 150, 0.9);
}
.session-annotator-status--err {
color: rgba(220, 120, 120, 0.9);
}
.session-annotator-list {
overflow-y: auto;
padding: 6px 12px 12px;
}
.session-annotator-list-head {
margin: 6px 0;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted, #888);
font-weight: 500;
}
.session-annotator-item {
margin-top: 6px;
padding: 8px;
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 3px;
}
.session-annotator-item--note { border-left-color: rgba(150, 180, 220, 0.6); }
.session-annotator-item--pin { border-left-color: rgba(220, 180, 80, 0.7); }
.session-annotator-item--emit { border-left-color: rgba(120, 220, 150, 0.7); }
.session-annotator-item--clip { border-left-color: rgba(220, 120, 200, 0.7); }
.session-annotator-item-head {
display: flex;
justify-content: space-between;
font-size: 10px;
color: var(--text-muted, #888);
margin-bottom: 4px;
}
.session-annotator-item-type {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.session-annotator-item-spirit {
color: rgba(220, 180, 100, 0.95);
text-decoration: none;
font-weight: 600;
}
.session-annotator-item-spirit:hover {
text-decoration: underline;
}
.session-annotator-item-anchor {
color: var(--text-faint, #666);
margin-left: auto;
}
.session-annotator-item-lock {
font-size: 9px;
}
.session-annotator-item--private {
background: rgba(220, 180, 80, 0.04);
}
.session-annotator-item-tools {
display: inline-flex;
gap: 2px;
}
.session-annotator-item-btn {
background: transparent;
border: none;
color: var(--text-faint, #555);
font-size: var(--font-sm);
width: 20px;
height: 20px;
border-radius: 3px;
cursor: pointer;
padding: 0;
line-height: 1;
}
.session-annotator-item-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--text-bright, #eee);
}
.session-annotator-item-edit {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
}
.session-annotator-item-edit-text,
.session-annotator-item-edit-playlist {
width: 100%;
padding: 6px 8px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
color: var(--text, #ddd);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
resize: vertical;
}
.session-annotator-item-edit-text {
min-height: 50px;
}
.session-annotator-item-edit-text:focus,
.session-annotator-item-edit-playlist:focus {
outline: none;
border-color: rgba(120, 220, 150, 0.4);
}
.session-annotator-item-edit-actions {
display: flex;
gap: 4px;
justify-content: flex-end;
}
.session-annotator-item-edit-save,
.session-annotator-item-edit-cancel {
padding: 3px 10px;
border: none;
border-radius: 3px;
font-family: inherit;
font-size: 10px;
cursor: pointer;
}
.session-annotator-item-edit-save {
background: rgba(120, 220, 150, 0.85);
color: #000;
font-weight: 600;
}
.session-annotator-item-edit-cancel {
background: rgba(255, 255, 255, 0.05);
color: var(--text-muted, #888);
}
.session-annotator-item-playlist {
font-size: 10px;
color: rgba(220, 120, 200, 0.85);
margin-top: 4px;
}
.session-annotator-item-playlist a {
color: inherit;
text-decoration: none;
}
.session-annotator-item-playlist a:hover {
text-decoration: underline;
}
.session-annotator-item-text {
font-size: var(--font-sm);
line-height: 1.4;
color: var(--text, #ddd);
white-space: pre-wrap;
word-break: break-word;
}.session-drill-stack {
position: fixed;
inset: 0;
z-index: 9996;
pointer-events: none;
}
.session-drill-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
pointer-events: auto;
animation: drill-backdrop-in 0.2s ease-out;
}
@keyframes drill-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
.session-drill-drawer {
position: absolute;
top: 0;
bottom: 0;
width: 60vw;
max-width: 980px;
min-width: 420px;
background: rgba(15, 15, 17, 0.97);
border-left: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: -12px 0 36px rgba(0, 0, 0, 0.55);
pointer-events: auto;
display: flex;
flex-direction: column;
overflow: hidden;
animation: drill-slide-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes drill-slide-in {
from { transform: translateX(40px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.session-drill-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: rgba(0, 0, 0, 0.4);
border-left: 4px solid;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
flex-shrink: 0;
}
.session-drill-head-left {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.session-drill-entity {
font-weight: 700;
font-size: var(--font-body);
text-decoration: none;
}
.session-drill-entity:hover {
text-decoration: underline;
}
.session-drill-date,
.session-drill-duration,
.session-drill-msgs {
color: var(--text-muted, #888);
font-size: var(--font-sm);
}
.session-drill-permalink {
color: var(--text-muted, #888);
text-decoration: none;
margin-left: 4px;
font-size: var(--font-sm);
}
.session-drill-permalink:hover {
color: var(--text-bright, #fff);
}
.session-drill-close {
background: transparent;
border: none;
color: var(--text-muted, #888);
font-size: 22px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
}
.session-drill-close:hover {
color: var(--text-bright, #fff);
}
.session-drill-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.session-drill-status {
padding: 40px 20px;
text-align: center;
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
}
.session-drill-status--err {
color: rgba(220, 120, 120, 0.9);
}
.session-drill-live {
position: relative;
margin: 24px;
padding: 24px;
background: rgba(120, 220, 150, 0.06);
border: 1px solid rgba(120, 220, 150, 0.25);
border-radius: 8px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.session-drill-live-pulse {
position: absolute;
top: 18px;
right: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(120, 220, 150, 1);
box-shadow: 0 0 10px rgba(120, 220, 150, 0.7);
animation: drill-live-pulse 1.4s ease-in-out infinite;
}
@keyframes drill-live-pulse {
0%, 100% { opacity: 0.6; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
.session-drill-live-head {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 14px;
}
.session-drill-live-tag {
background: rgba(120, 220, 150, 0.85);
color: #000;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.2px;
padding: 2px 8px;
border-radius: 3px;
}
.session-drill-live-status {
color: rgba(120, 220, 150, 0.95);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.session-drill-live-meta {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 16px;
font-size: var(--font-sm);
color: var(--text, #ddd);
}
.session-drill-live-meta label {
color: var(--text-muted, #888);
margin-right: 4px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.5px;
}
.session-drill-live-msg {
color: var(--text-muted, #888);
font-size: var(--font-sm);
margin: 0 0 18px;
line-height: 1.5;
}
.session-drill-live-cta {
display: inline-block;
padding: 8px 16px;
background: rgba(120, 220, 150, 0.85);
color: #000;
text-decoration: none;
border-radius: 4px;
font-size: var(--font-sm);
font-weight: 600;
}
.session-drill-live-cta:hover {
background: rgba(120, 220, 150, 1);
}
.session-drill-transcript {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
display: flex;
flex-direction: column;
gap: 8px;
}
.dd-event {
position: relative;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.025);
border-left: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 3px;
font-size: var(--font-sm);
line-height: 1.5;
}
.dd-event--message { border-left-color: rgba(180, 220, 255, 0.7); }
.dd-event--thinking { border-left-color: rgba(180, 140, 220, 0.6); opacity: 0.85; }
.dd-event--tool_use { border-left-color: rgba(255, 170, 90, 0.7); }
.dd-event--tool_result { border-left-color: rgba(255, 170, 90, 0.4); opacity: 0.75; }
.dd-event--subagent { border-left-color: rgba(120, 220, 150, 0.85); }
.dd-event--system,
.dd-event--snapshot,
.dd-event--permission_mode,
.dd-event--queue_op { opacity: 0.5; font-size: var(--font-sm); }
.dd-event--summary { border-left-color: rgba(220, 120, 200, 0.7); }
.dd-event-head {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 10px;
color: var(--text-muted, #888);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.dd-event-kind {
font-weight: 600;
}
.dd-event-sub {
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.dd-event-ts {
margin-left: auto;
color: var(--text-faint, #666);
letter-spacing: 0.4px;
}
.dd-event-text {
white-space: pre-wrap;
word-break: break-word;
color: var(--text, #ddd);
max-height: 180px;
overflow: hidden;
position: relative;
}
.dd-event-text::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30px;
background: linear-gradient(to bottom, transparent, rgba(15, 15, 17, 0.97));
pointer-events: none;
}
/* Visual cue: subagent dispatch events are clickable */
.t-subagent {
cursor: pointer;
transition: background 0.15s, box-shadow 0.15s;
}
.t-subagent:hover {
background: rgba(120, 220, 150, 0.06);
box-shadow: inset 0 0 0 1px rgba(120, 220, 150, 0.3);
}
.t-subagent::after {
content: '↘ click to open';
position: absolute;
right: 8px;
top: 6px;
font-size: 10px;
color: rgba(120, 220, 150, 0.5);
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
.t-subagent:hover::after {
opacity: 1;
}.session-filters {
position: fixed;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 9997;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: rgba(20, 20, 22, 0.85);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-top: none;
border-radius: 0 0 12px 12px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.session-filter-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: var(--text, #ddd);
font-family: inherit;
font-size: 10px;
cursor: pointer;
transition: opacity 0.15s, background 0.15s;
}
.session-filter-chip:hover {
background: rgba(255, 255, 255, 0.08);
}
.session-filter-chip--off {
opacity: 0.35;
background: transparent;
}
.session-filter-chip--off .session-filter-dot {
opacity: 0.3;
}
.session-filter-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
}
.session-filter-dot--message { background: rgba(180, 220, 255, 0.85); }
.session-filter-dot--thinking { background: rgba(180, 140, 220, 0.75); }
.session-filter-dot--tool { background: rgba(255, 170, 90, 0.85); }
.session-filter-dot--subagent { background: rgba(120, 220, 150, 0.85); }
.session-filter-dot--system { background: rgba(180, 180, 180, 0.6); }
.session-filter-dot--snapshot { background: rgba(120, 180, 180, 0.6); }
.session-filter-dot--summary { background: rgba(220, 120, 200, 0.75); }
.session-filter-label {
letter-spacing: 0.3px;
}
.session-filter-count {
color: var(--text-muted, #888);
font-size: 9px;
}
/* Filter behavior — hide the event entirely when off */
.t-event--hidden-by-filter {
display: none !important;
}.session-heatmap {
--hm-empty: rgba(255, 255, 255, 0.04);
--hm-l1: rgba(120, 220, 150, 0.20);
--hm-l2: rgba(120, 220, 150, 0.40);
--hm-l3: rgba(120, 220, 150, 0.65);
--hm-l4: rgba(120, 220, 150, 0.90);
--hm-selected: rgba(255, 255, 255, 0.9);
--hm-gap: 2px;
margin: 16px 0;
}
.session-heatmap-scroll {
overflow-x: auto;
}
.session-heatmap-inner {
min-width: 100%;
}
.session-heatmap-months {
display: flex;
gap: var(--hm-gap);
margin-bottom: 4px;
}
.session-heatmap-month-label {
font-size: 10px;
color: var(--text-muted, #888);
white-space: nowrap;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
flex: none;
}
.session-heatmap-grid {
display: flex;
gap: var(--hm-gap);
}
.session-heatmap-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--hm-gap);
}
.session-heatmap-cell {
width: 100%;
aspect-ratio: 1;
border-radius: 2px;
background: var(--hm-empty);
}
.session-heatmap-level-1 { background: var(--hm-l1); }
.session-heatmap-level-2 { background: var(--hm-l2); }
.session-heatmap-level-3 { background: var(--hm-l3); }
.session-heatmap-level-4 { background: var(--hm-l4); }
.session-heatmap-cell--future {
background: transparent;
}
.session-heatmap-cell:not(.session-heatmap-cell--future):not(.session-heatmap-legend-swatch) {
cursor: pointer;
}
.session-heatmap-cell:not(.session-heatmap-cell--future):not(.session-heatmap-legend-swatch):hover {
outline: 1px solid rgba(255, 255, 255, 0.3);
outline-offset: -1px;
}
.session-heatmap-cell--selected {
outline: 2px solid var(--hm-selected);
outline-offset: -1px;
}
.session-heatmap-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
font-size: var(--font-sm);
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.session-heatmap-total {
color: var(--text-faint, #666);
}
.session-heatmap-filter-info {
color: var(--text-bright, #eee);
}
.session-heatmap-clear {
cursor: pointer;
color: var(--text-muted, #888);
margin-left: 8px;
}
.session-heatmap-clear:hover {
color: var(--text-bright, #eee);
}
.session-heatmap-legend {
display: flex;
align-items: center;
gap: 3px;
}
.session-heatmap-legend-label {
margin: 0 4px;
}
.session-heatmap-legend-swatch {
display: inline-block;
pointer-events: none;
}
.pm-controls {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 9998;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(20, 20, 22, 0.92);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.pm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.06);
border: none;
border-radius: 50%;
color: var(--text, #ddd);
font-size: var(--font-body);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.pm-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--text-bright, #fff);
}
.pm-play {
width: 38px;
height: 38px;
font-size: 16px;
background: rgba(120, 220, 150, 0.85);
color: #000;
}
.pm-play:hover {
background: rgba(120, 220, 150, 1);
color: #000;
}
.pm-play--on {
background: rgba(220, 180, 80, 0.9);
}
.pm-locate {
background: rgba(180, 220, 255, 0.85);
color: #000;
animation: pm-locate-pulse 1.6s ease-in-out infinite;
}
@keyframes pm-locate-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(180, 220, 255, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(180, 220, 255, 0); }
}
.pm-pos {
padding: 0 8px;
font-size: var(--font-sm);
color: var(--text-muted, #888);
letter-spacing: 0.4px;
min-width: 70px;
text-align: center;
}
/* Per-event "play from here" button injected by JS into each .t-event */
.t-event {
position: relative;
}
.t-event-play {
position: absolute;
top: 4px;
left: -28px;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(120, 220, 150, 0.85);
color: #000;
border: none;
border-radius: 50%;
font-size: 10px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
z-index: 5;
}
.t-event:hover > .t-event-play {
opacity: 0.9;
}
.t-event-play:hover {
opacity: 1 !important;
transform: scale(1.15);
background: rgba(120, 220, 150, 1);
}
/* Active playhead event — animated highlight */
.t-event--playing {
outline: 2px solid rgba(120, 220, 150, 0.85);
outline-offset: 2px;
border-radius: 4px;
background: rgba(120, 220, 150, 0.06);
animation: pm-event-pulse 2s ease-in-out infinite;
}
@keyframes pm-event-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(120, 220, 150, 0.4);
background: rgba(120, 220, 150, 0.06);
}
50% {
box-shadow: 0 0 24px 4px rgba(120, 220, 150, 0.15);
background: rgba(120, 220, 150, 0.10);
}
}
.t-event--playing > .t-event-play {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 12px rgba(120, 220, 150, 0.6);
}.session-timeline-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 30px;
z-index: 9999;
background: rgba(12, 12, 14, 0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.session-timeline-bar-track {
position: relative;
width: 100%;
height: 100%;
cursor: crosshair;
touch-action: none;
}
/* Lane layout: 4 lanes × 5px tall, 1px separators, vertically centered in 30px bar.
Lane 0 (operator) → top: 4px
Lane 1 (agent) → top: 10px
Lane 2 (subagent) → top: 16px
Lane 3 (annotations) → top: 22px */
.session-timeline-dot {
position: absolute;
width: 3px;
height: 5px;
margin-left: -1px;
border-radius: 1px;
background: rgba(255, 255, 255, 0.25);
pointer-events: none;
}
.session-timeline-dot--lane0 { top: 4px; }
.session-timeline-dot--lane1 { top: 10px; }
.session-timeline-dot--lane2 { top: 16px; }
.session-timeline-dot--lane3 { top: 22px; }
.session-timeline-dot--msg-user { background: rgba(220, 180, 100, 0.85); }
.session-timeline-dot--msg-assistant { background: rgba(180, 220, 255, 0.85); }
.session-timeline-dot--thinking { background: rgba(180, 140, 220, 0.75); }
.session-timeline-dot--tool_use { background: rgba(255, 170, 90, 0.85); }
.session-timeline-dot--tool_result { background: rgba(255, 170, 90, 0.45); }
.session-timeline-dot--subagent { background: rgba(120, 220, 150, 0.85); }
.session-timeline-dot--system { background: rgba(180, 180, 180, 0.40); }
.session-timeline-dot--summary { background: rgba(220, 120, 200, 0.75); }
.session-timeline-dot--snapshot { background: rgba(120, 180, 180, 0.50); }
.session-timeline-dot--permission_mode,
.session-timeline-dot--queue_op,
.session-timeline-dot--attachment,
.session-timeline-dot--last_prompt { background: rgba(150, 150, 150, 0.35); }
/* Annotations: same lane height but more saturated + clickable */
.session-timeline-dot--anno {
width: 4px;
height: 6px;
margin-top: -1px;
margin-left: -2px;
border-radius: 1px;
pointer-events: auto;
cursor: pointer;
}
.session-timeline-dot--note { background: rgba(150, 180, 220, 1); }
.session-timeline-dot--pin { background: rgba(220, 180, 80, 1); }
.session-timeline-dot--emit { background: rgba(120, 220, 150, 1); }
.session-timeline-dot--clip { background: rgba(220, 120, 200, 1); }
/* Filtered-out events stay on the bar at half opacity so the user keeps the
full-density picture even while reading a filtered transcript below. */
.session-timeline-dot--dimmed { opacity: 0.5; }
.session-timeline-cursor {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
background: rgba(255, 255, 255, 0.55);
pointer-events: none;
}
.session-timeline-playhead {
position: absolute;
top: -2px;
bottom: -2px;
width: 3px;
margin-left: -1px;
background: rgba(120, 220, 150, 0.95);
box-shadow: 0 0 8px rgba(120, 220, 150, 0.7);
pointer-events: none;
animation: timeline-playhead-pulse 1.4s ease-in-out infinite;
}
@keyframes timeline-playhead-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* Live viewer cursors — other logged-in users currently on this page.
One per viewer, hue from their outfit, transitions smoothly as they scroll. */
.session-timeline-viewer {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
margin-left: -1px;
pointer-events: none;
opacity: 0.7;
transition: left 0.4s ease-out;
}
.user-avatar-circle {
background: var(--bg-raised);
border: 2px solid var(--border);
}
/* --- Content wall --- */
.user-content-wall {
display: flex;
flex-direction: column;
gap: 16px;
}
.user-content-empty {
padding: 32px 0;
}
.user-content-empty-msg {
color: var(--text-dim);
font-size: var(--font-body);
}
/* --- Markdown body — minimal dark-theme typography --- */
/* Used by: profile/identity (rendered ENTITY.md), profile/files (file preview) */
.markdown-body {
color: rgba(255,255,255,0.82);
font-size: 0.95rem;
line-height: 1.72;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: rgba(255,255,255,0.92);
margin: 1.4em 0 0.4em;
font-weight: 600;
line-height: 1.3;
}
.markdown-body h1 { font-size: 1.45rem; }
.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3 { font-size: 1.05rem; }
.markdown-body p { margin: 0 0 0.9em; }
.markdown-body a { color: var(--entity-accent, var(--accent)); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body code {
font-family: var(--font-mono);
font-size: 0.85em;
background: rgba(255,255,255,0.07);
padding: 0.1em 0.35em;
border-radius: 3px;
color: rgba(255,255,255,0.88);
}
.markdown-body pre {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 1rem 1.2rem;
overflow-x: auto;
margin: 0.8em 0 1.1em;
}
.markdown-body pre code {
background: none;
padding: 0;
font-size: 0.88rem;
color: rgba(255,255,255,0.80);
}
.markdown-body blockquote {
border-left: 3px solid var(--entity-accent, var(--accent));
margin: 0.8em 0;
padding: 0.2em 0 0.2em 1rem;
color: rgba(255,255,255,0.55);
}
.markdown-body ul,
.markdown-body ol {
padding-left: 1.5rem;
margin: 0 0 0.9em;
}
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin: 0.8em 0 1em;
font-size: 0.88rem;
}
.markdown-body th,
.markdown-body td {
border: 1px solid rgba(255,255,255,0.12);
padding: 0.4em 0.75em;
text-align: left;
}
.markdown-body th {
background: rgba(255,255,255,0.05);
color: rgba(255,255,255,0.7);
font-weight: 600;
}
.markdown-body hr {
border: none;
border-top: 1px solid rgba(255,255,255,0.10);
margin: 1.5em 0;
}
/* ── Avatar picker — inline form on own profile (profileAvatarPicker template) ── */
.avatar-picker-form {
background: var(--bg-raised, #171717);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
padding: 16px 20px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.avatar-picker-row {
display: flex;
align-items: center;
gap: 12px;
}
.avatar-picker-label {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
color: var(--text-dim, #A09E9A);
min-width: 72px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.avatar-picker-sources {
display: flex;
gap: 6px;
}
.avatar-picker-source-btn {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
padding: 3px 10px;
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,0.07));
color: var(--slate-light, #718096);
border-radius: 2px;
cursor: pointer;
transition: border-color 0.12s, color 0.12s;
}
.avatar-picker-source-btn:hover,
.avatar-picker-source-btn.active {
border-color: var(--accent, #C9A84C);
color: var(--accent, #C9A84C);
}
.avatar-picker-input {
flex: 1;
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.07));
color: var(--text, #E8E6E1);
font-size: var(--font-body);
font-family: var(--font-mono, monospace);
padding: 6px 10px;
border-radius: 2px;
outline: none;
}
.avatar-picker-input:focus {
border-color: var(--accent, #C9A84C);
}
.avatar-picker-error {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
color: rgba(255, 100, 100, 0.9);
}
.avatar-picker-actions {
display: flex;
gap: 8px;
}
.avatar-picker-save-btn {
font-size: var(--font-sm);
padding: 5px 14px;
background: var(--accent, #C9A84C);
color: var(--bg, #0A0A0A);
border: none;
border-radius: 2px;
cursor: pointer;
font-weight: 600;
transition: background 0.12s;
}
.avatar-picker-save-btn:hover {
background: var(--accent-dim, #9B7D35);
}
.avatar-picker-cancel-btn {
font-size: var(--font-sm);
padding: 5px 14px;
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,0.07));
color: var(--slate-light, #718096);
border-radius: 2px;
cursor: pointer;
transition: border-color 0.12s;
}
.avatar-picker-cancel-btn:hover {
border-color: var(--text-dim, #A09E9A);
color: var(--text, #E8E6E1);
}
/* Make the avatar circle show a cursor when on own profile */
.me-avatar[data-own="true"] {
cursor: pointer;
}
/* profile-home divider */
.profile-home-divider {
border: none;
border-top: 1px solid var(--border, rgba(255,255,255,0.07));
margin: 24px 0;
}
a.entity-emission-row {
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background 0.12s;
}
a.entity-emission-row:hover {
background: color-mix(in srgb, var(--accent) 5%, transparent);
}
/* ============================================================
ProfileActivity — session.* emission panel
Namespace: .entity-session-emission-* (scoped)
============================================================ */
.entity-session-emissions {
margin-top: 1.5rem;
}
.entity-session-emission-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.3rem 0;
border-bottom: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
}
.entity-session-emission-type {
font-family: monospace;
font-size: 0.78em;
opacity: 0.75;
background: rgba(255,255,255,0.05);
padding: 0.1em 0.4em;
border-radius: 3px;
white-space: nowrap;
}
.entity-session-emission-body {
flex: 1;
font-size: 0.88em;
word-break: break-word;
}
.entity-session-emission-time {
font-size: 0.75em;
opacity: 0.45;
white-space: nowrap;
}
.entity-session-emission-link {
font-family: monospace;
font-size: 0.75em;
opacity: 0.55;
color: inherit;
text-decoration: none;
}
.profile-bonds-split {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
.profile-bonds-split-graph {
flex: 1 1 60%;
min-width: 0;
min-height: 500px;
}
.profile-bonds-split-list {
flex: 1 1 40%;
min-width: 0;
}
@media (max-width: 768px) {
.profile-bonds-split {
flex-direction: column;
}
.profile-bonds-split-graph,
.profile-bonds-split-list {
flex: 1 1 auto;
}
}
/* ============================================================
Bond detail section — issued / received breakdown with click-through
Namespace: .profile-bonds-section-*, .profile-bonds-detail-*
============================================================ */
.profile-bonds-section {
margin-top: 28px;
}
.profile-bonds-section-title {
font-size: var(--font-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
margin: 0 0 10px 0;
}
.profile-bonds-detail-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.profile-bonds-detail-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 4px;
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
flex-wrap: wrap;
}
.profile-bonds-detail-row:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}
.profile-bonds-detail-direction {
display: flex;
align-items: center;
gap: 5px;
flex: 1;
min-width: 0;
}
.profile-bonds-detail-from,
.profile-bonds-detail-to {
font-size: var(--font-body);
color: var(--text);
white-space: nowrap;
}
.profile-bonds-detail-arrow {
color: var(--accent);
font-weight: 600;
}
.profile-bonds-detail-meta {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.profile-bonds-detail-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: color-mix(in srgb, var(--accent) 15%, var(--bg-raised));
color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
white-space: nowrap;
}
.profile-bonds-detail-status {
font-size: var(--font-sm);
color: var(--text-dim);
}
.profile-bonds-detail-date {
font-size: var(--font-sm);
color: var(--text-dim);
white-space: nowrap;
}
.profile-bonds-detail-cta {
font-size: var(--font-sm);
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
}
.profile-devices-section {
margin-bottom: 24px;
}
.profile-devices-section-title {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim, #A09E9A);
margin-bottom: 12px;
}
.profile-devices-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-device-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
background: var(--bg-raised, #171717);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
}
.profile-device-row--pending {
border-color: rgba(201, 168, 76, 0.2);
background: rgba(201, 168, 76, 0.03);
}
.profile-device-head {
display: flex;
align-items: center;
gap: 10px;
}
.profile-device-key {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: var(--text, #E8E6E1);
}
.profile-device-badge {
font-size: 10px;
font-family: var(--font-mono, monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 1px 6px;
border-radius: 2px;
}
.profile-device-badge--root {
background: rgba(201, 168, 76, 0.1);
color: var(--accent, #C9A84C);
border: 1px solid rgba(201, 168, 76, 0.3);
}
.profile-device-badge--device {
background: rgba(255,255,255,0.04);
color: var(--slate-light, #718096);
border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.profile-device-badge--pending {
background: rgba(201, 168, 76, 0.08);
color: var(--accent-dim, #9B7D35);
border: 1px solid rgba(201, 168, 76, 0.2);
}
.profile-device-meta {
display: flex;
gap: 12px;
}
.profile-device-stat {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
color: var(--slate, #4A5568);
}
.profile-device-actions {
margin-top: 6px;
display: flex;
gap: 8px;
}
.profile-device-link {
font-size: var(--font-sm);
color: var(--accent, #C9A84C);
text-decoration: none;
}
.profile-device-link:hover {
text-decoration: underline;
}
.profile-device-revoke-btn {
font-size: var(--font-sm);
font-family: var(--font-mono, monospace);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 3px 8px;
background: transparent;
border: 1px solid rgba(255, 80, 80, 0.3);
color: rgba(255, 100, 100, 0.7);
border-radius: 2px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.profile-device-revoke-btn:hover {
border-color: rgba(255, 80, 80, 0.6);
color: rgba(255, 100, 100, 1);
}
.profile-device-revoke-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.profile-devices-error {
font-size: var(--font-body);
color: rgba(255, 100, 100, 0.9);
font-family: var(--font-mono, monospace);
padding: 8px 12px;
background: rgba(255, 80, 80, 0.05);
border: 1px solid rgba(255, 80, 80, 0.2);
border-radius: 2px;
margin-top: 8px;
}
.profile-files {
display: flex;
flex-direction: column;
min-height: 400px;
}
.profile-files-loading,
.profile-files-error {
padding: 2rem 1rem;
}
.profile-files-layout {
display: flex;
flex: 1;
overflow: hidden;
gap: 0;
}
/* Tree pane */
.profile-files-tree {
width: 220px;
min-width: 160px;
max-width: 280px;
overflow-y: auto;
border-right: 1px solid rgba(255,255,255,0.07);
padding: 0.75rem 0;
flex-shrink: 0;
}
.profile-tree-dir,
.profile-tree-file {
font-size: 0.82rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.60);
user-select: none;
}
.profile-tree-dir-label {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.75rem;
cursor: pointer;
}
.profile-tree-dir-label:hover { color: rgba(255,255,255,0.85); }
.profile-tree-children {
padding-left: 1rem;
}
.profile-tree-file {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.75rem;
cursor: pointer;
}
.profile-tree-file:hover { color: rgba(255,255,255,0.85); }
.profile-tree-file--selected {
color: var(--entity-accent, var(--accent));
background: rgba(255,255,255,0.04);
}
.profile-tree-icon {
font-size: 0.65rem;
opacity: 0.5;
}
.profile-tree-icon--file {
font-size: 0.5rem;
opacity: 0.35;
}
.profile-tree-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Content pane */
.profile-files-content {
flex: 1;
overflow-y: auto;
padding: 0.75rem 1rem 1.5rem;
min-width: 0;
}
.profile-files-content-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.profile-files-path {
font-family: var(--font-mono);
font-size: 0.80rem;
color: rgba(255,255,255,0.45);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-files-raw-link {
font-size: var(--font-sm);
color: rgba(255,255,255,0.35);
text-decoration: none;
border: 1px solid rgba(255,255,255,0.12);
padding: 0.1em 0.45em;
border-radius: 3px;
flex-shrink: 0;
}
.profile-files-raw-link:hover { color: rgba(255,255,255,0.70); border-color: rgba(255,255,255,0.25); }
.profile-files-markdown {
padding: 0;
}
.profile-files-code {
background: rgba(0,0,0,0.30);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 6px;
padding: 1rem 1.2rem;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.82rem;
color: rgba(255,255,255,0.75);
white-space: pre;
margin: 0;
line-height: 1.6;
}
.profile-files-image-wrap {
display: flex;
justify-content: flex-start;
align-items: flex-start;
padding: 0.5rem 0;
}
.profile-files-image {
max-width: 100%;
max-height: 600px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.08);
}
.profile-identity {
padding: 1.5rem 1rem;
max-width: 800px;
}
.profile-leaves-intro {
font-size: var(--font-body);
color: var(--text-dim, #A09E9A);
line-height: 1.6;
margin-bottom: 16px;
}
/* ── Prove section ─────────────────────────────────────────────────────────── */
.profile-leaves-prove-section {
background: var(--bg-raised, #171717);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
padding: 20px 24px;
margin-bottom: 24px;
}
.profile-leaves-prove-row {
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.profile-leaves-prove-row:last-child {
border-bottom: none;
}
.profile-leaves-prove-row.leaves-panel-open {
border-bottom: none;
}
/* ── Row header (chip + prove button) ─────────────────────────────────────── */
.profile-leaves-row-header {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.profile-leaves-prove-label {
font-size: var(--font-body);
color: var(--text, #E8E6E1);
min-width: 90px;
font-family: var(--font-mono, monospace);
}
/* ── Chip vocabulary (Muse §6) ─────────────────────────────────────────────── */
.me-leaf-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
text-transform: lowercase;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 2px;
border: 1px solid transparent;
transition: color 300ms ease, background 300ms ease, border-color 300ms ease;
}
.me-chip-dot {
font-size: 10px;
transition: color 300ms ease;
}
/* verified — filled green */
.me-chip-verified {
color: var(--green, #3EAF6A);
background: rgba(62, 175, 106, 0.08);
border-color: rgba(62, 175, 106, 0.2);
}
.me-chip-verified .me-chip-dot { color: var(--green, #3EAF6A); }
/* pending re-check — filled amber */
.me-chip-pending {
color: var(--accent, #C9A84C);
background: rgba(201, 168, 76, 0.08);
border-color: rgba(201, 168, 76, 0.2);
}
.me-chip-pending .me-chip-dot { color: var(--accent, #C9A84C); }
/* unlinked / unproven — hollow grey */
.me-chip-unlinked {
color: var(--slate-light, #718096);
background: transparent;
border-color: var(--border, rgba(255,255,255,0.07));
}
.me-chip-unlinked .me-chip-dot { color: var(--slate, #4A5568); }
/* failed — filled red */
.me-chip-failed {
color: var(--red, #C0392B);
background: rgba(192, 57, 43, 0.08);
border-color: rgba(192, 57, 43, 0.2);
}
.me-chip-failed .me-chip-dot { color: var(--red, #C0392B); }
/* revoked — filled slate (same grey as unlinked but filled dot) */
.me-chip-revoked {
color: var(--slate-light, #718096);
background: transparent;
border-color: var(--border, rgba(255,255,255,0.07));
}
.me-chip-revoked .me-chip-dot { color: var(--slate, #4A5568); }
/* signing (panel open, in-progress) — animated dot */
.me-chip-signing {
color: var(--slate-light, #718096);
background: transparent;
border-color: var(--border, rgba(255,255,255,0.07));
}
.me-chip-signing .me-chip-dot {
color: var(--accent, #C9A84C);
display: inline-block;
animation: leaves-spin 1s linear infinite;
}
/* selected (multi-claim) — accent-dim background */
.me-chip-selected {
color: var(--accent, #C9A84C);
background: rgba(201, 168, 76, 0.06);
border-color: rgba(201, 168, 76, 0.2);
cursor: default;
}
.me-chip-selected .me-chip-dot { color: var(--accent, #C9A84C); }
/* ── Prove button ──────────────────────────────────────────────────────────── */
.profile-leaves-prove-btn {
margin-left: auto;
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
color: var(--accent, #C9A84C);
background: transparent;
border: 1px solid rgba(201, 168, 76, 0.3);
border-radius: 2px;
padding: 3px 10px;
cursor: pointer;
transition: background 0.1s, border-color 0.1s;
}
.profile-leaves-prove-btn:hover {
background: rgba(201, 168, 76, 0.06);
border-color: var(--accent, #C9A84C);
}
/* ── Proof panel ───────────────────────────────────────────────────────────── */
/* max-height transition per Muse §7 */
.leaves-proof-panel {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 240ms ease-out, opacity 240ms ease-out;
}
.leaves-panel-open .leaves-proof-panel {
max-height: 800px; /* large enough for panel content */
opacity: 1;
}
.leaves-proof-panel {
/* When panel IS open, apply inner styles */
background: var(--bg-surface, #111111);
border-left: 2px solid var(--border, rgba(255,255,255,0.07));
padding: 20px 24px;
margin: 0 -24px;
margin-bottom: 0;
}
.leaves-panel-open .leaves-proof-panel {
display: block;
}
/* Panel title + body (pre-signing) */
.leaves-panel-title {
font-size: var(--font-body);
font-weight: 500;
color: var(--text, #E8E6E1);
margin: 0 0 10px 0;
}
.leaves-panel-body {
font-size: var(--font-body);
color: var(--text-dim, #A09E9A);
line-height: 1.6;
margin: 0 0 16px 0;
}
/* Signed header */
.leaves-panel-signed-header {
font-family: var(--font-mono, monospace);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--green, #3EAF6A);
margin-bottom: 16px;
}
/* ── Artifact rows (CID, URL, clearsign text) ──────────────────────────────── */
.leaves-artifact-row {
margin-bottom: 14px;
}
.leaves-artifact-label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim, #A09E9A);
margin-bottom: 6px;
}
.leaves-artifact-value-row {
display: flex;
align-items: center;
gap: 10px;
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
padding: 6px 10px;
}
.leaves-artifact-cid,
.leaves-artifact-url {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: var(--text, #E8E6E1);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.leaves-artifact-url {
/* truncate in middle — CSS doesn't support middle truncation directly */
direction: ltr;
}
.leaves-artifact-url:hover {
white-space: normal;
overflow: visible;
word-break: break-all;
}
/* Full text disclosure */
.leaves-fulltext-toggle {
font-size: var(--font-sm);
color: var(--slate-light, #718096);
cursor: pointer;
margin-left: 8px;
user-select: none;
}
.leaves-fulltext-toggle:hover {
color: var(--text-dim, #A09E9A);
}
.leaves-clearsign-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.leaves-clearsign-block {
width: 100%;
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
color: var(--slate-light, #718096);
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.07));
padding: 12px 14px;
overflow-x: auto;
white-space: pre;
margin: 0;
}
/* ── Copy button ────────────────────────────────────────────────────────────── */
.leaves-copy-btn {
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim, #A09E9A);
background: transparent;
border: none;
cursor: pointer;
padding: 0;
white-space: nowrap;
flex-shrink: 0;
}
.leaves-copy-btn:hover {
color: var(--text, #E8E6E1);
}
/* ── Posting guidance ───────────────────────────────────────────────────────── */
.leaves-posting-guidance {
margin: 16px 0;
padding-top: 14px;
border-top: 1px solid var(--border, rgba(255,255,255,0.07));
}
.leaves-guidance-label {
display: block;
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dim, #A09E9A);
margin-bottom: 8px;
}
.leaves-guidance-body {
font-size: var(--font-body);
color: var(--text-dim, #A09E9A);
line-height: 1.6;
margin: 0;
}
/* ── Panel actions ──────────────────────────────────────────────────────────── */
.leaves-panel-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 16px;
}
.profile-leaves-sign-btn,
.profile-leaves-verify-btn {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: #0A0A0A;
background: var(--accent, #C9A84C);
border: none;
border-radius: 2px;
padding: 7px 16px;
cursor: pointer;
transition: opacity 0.1s;
}
.profile-leaves-sign-btn:hover,
.profile-leaves-verify-btn:hover {
opacity: 0.88;
}
.profile-leaves-verify-btn.leaves-verifying {
opacity: 0.6;
cursor: not-allowed;
}
/* Verifying spinner animation (Muse §4) */
@keyframes leaves-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.leaves-verifying-spinner {
display: inline-block;
animation: leaves-spin 1s linear infinite;
}
/* ── Verify error ───────────────────────────────────────────────────────────── */
.leaves-verify-error {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: var(--text-dim, #A09E9A);
}
.leaves-retry-link {
color: var(--accent, #C9A84C);
text-decoration: none;
font-size: var(--font-body);
margin-left: 8px;
}
.leaves-retry-link:hover { text-decoration: underline; }
/* ── Panel close ────────────────────────────────────────────────────────────── */
.leaves-panel-close {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border, rgba(255,255,255,0.07));
}
.leaves-panel-close-link {
font-size: var(--font-sm);
color: var(--slate-light, #718096);
text-decoration: none;
}
.leaves-panel-close-link:hover { color: var(--text-dim, #A09E9A); }
/* ── Passphrase + handle inputs ─────────────────────────────────────────────── */
.leaves-passphrase-row,
.leaves-handle-row {
margin-bottom: 12px;
}
.leaves-handle-label {
display: block;
font-size: var(--font-sm);
color: var(--text-dim, #A09E9A);
margin-bottom: 6px;
font-family: var(--font-mono, monospace);
}
.leaves-passphrase-input,
.leaves-handle-input {
width: 100%;
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: var(--text, #E8E6E1);
padding: 6px 10px;
height: 32px;
box-sizing: border-box;
outline: none;
}
.leaves-passphrase-input:focus,
.leaves-handle-input:focus {
border-color: var(--accent, #C9A84C);
}
/* ── Multi-claim chips ──────────────────────────────────────────────────────── */
.leaves-multiclaim-footer {
margin-top: 12px;
}
.leaves-multiclaim-toggle {
font-size: var(--font-body);
color: var(--slate-light, #718096);
cursor: pointer;
}
.leaves-multiclaim-toggle:hover { color: var(--text-dim, #A09E9A); }
.leaves-multiclaim-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.leaves-multiclaim-label {
font-size: var(--font-sm);
color: var(--text-dim, #A09E9A);
font-family: var(--font-mono, monospace);
}
.leaves-chip-remove {
margin-left: 4px;
cursor: pointer;
color: var(--slate-light, #718096);
font-size: var(--font-sm);
}
.leaves-chip-remove:hover { color: var(--text, #E8E6E1); }
.leaves-multiclaim-available {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.leaves-chip-add {
cursor: pointer;
}
.leaves-chip-add:hover {
border-color: var(--accent, #C9A84C);
}
/* ── Sign mode toggle (Mode A ↔ Mode B) ────────────────────────────────────── */
.leaves-mode-toggle-row {
margin-top: 10px;
}
.leaves-toggle-sign-mode {
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
color: var(--slate-light, #718096);
text-decoration: none;
}
.leaves-toggle-sign-mode:hover {
color: var(--text-dim, #A09E9A);
text-decoration: underline;
}
/* Mode A: device sign button */
.leaves-sign-device-btn {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
color: #0A0A0A;
background: var(--accent, #C9A84C);
border: none;
border-radius: 2px;
padding: 7px 16px;
cursor: pointer;
transition: opacity 0.1s;
}
.leaves-sign-device-btn:hover { opacity: 0.88; }
.leaves-sign-device-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* Mode A intro body */
.leaves-mode-a-body {
margin-top: 0;
}
/* ── Leaf grid (existing, unchanged) ───────────────────────────────────────── */
.me-leaf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
margin-top: 8px;
}
.disclosure-leaf-card {
background: var(--bg-surface, #111111);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
padding: 20px 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.leaf-card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.leaf-card-type {
font-family: var(--font-mono, monospace);
font-size: var(--font-body);
font-weight: 500;
color: var(--text, #E8E6E1);
}
.leaf-card-status {
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
color: var(--slate, #4A5568);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.leaf-card-value {
font-family: var(--font-mono, monospace);
font-size: var(--font-sm);
color: var(--slate-light, #718096);
word-break: break-word;
}
.leaf-card-communities {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--border, rgba(255,255,255,0.07));
}
.disclosure-community-toggle {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--font-body);
color: var(--slate-light, #718096);
cursor: pointer;
user-select: none;
}
.disclosure-community-toggle input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
cursor: pointer;
position: relative;
flex-shrink: 0;
background: transparent;
transition: background 0.1s, border-color 0.1s;
}
.disclosure-community-toggle input[type="checkbox"]:checked {
background: var(--entity-accent, var(--accent, #C9A84C));
border-color: var(--entity-accent, var(--accent, #C9A84C));
}
.disclosure-community-toggle input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
top: -1px;
left: 2px;
color: #0A0A0A;
font-size: 12px;
font-weight: 700;
}
.disclosure-community-toggle input[type="checkbox"]:checked + span {
color: var(--text, #E8E6E1);
}
.profile-sessions-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
}
.profile-session-row {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border-left: 3px solid rgba(255, 255, 255, 0.15);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-body);
}
.profile-session-row--active {
border-left-color: rgba(120, 220, 150, 0.7);
background: rgba(120, 220, 150, 0.04);
}
.profile-session-head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.profile-session-spirit {
font-weight: 600;
color: rgba(220, 180, 100, 0.95);
text-decoration: none;
}
.profile-session-spirit:hover {
text-decoration: underline;
}
.profile-session-arrow {
color: var(--text-faint, #555);
font-weight: normal;
}
.profile-session-entity {
font-weight: 600;
color: var(--text-bright, #eee);
text-decoration: none;
}
.profile-session-entity:hover {
text-decoration: underline;
}
.profile-session-harness {
color: var(--text-muted, #888);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-session-model {
color: rgba(120, 200, 255, 0.9);
}
.profile-session-status {
margin-left: auto;
font-size: var(--font-sm);
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-session-status--active {
background: rgba(120, 220, 150, 0.15);
color: rgba(120, 220, 150, 1);
}
.profile-session-status--stale {
background: rgba(220, 180, 80, 0.15);
color: rgba(220, 180, 80, 1);
}
.profile-session-status--killed,
.profile-session-status--ended {
background: rgba(180, 180, 180, 0.1);
color: rgba(180, 180, 180, 0.7);
}
.profile-session-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 8px;
color: var(--text, #ccc);
}
.profile-session-stat {
display: inline-flex;
gap: 4px;
}
.profile-session-stat-label {
color: var(--text-muted, #888);
}
.profile-session-tail {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 16px;
font-size: var(--font-sm);
color: var(--text-muted, #888);
}
.profile-session-cwd {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-session-pid {
color: var(--text-faint, #666);
}
.profile-session-id {
color: rgba(120, 200, 255, 0.7);
text-decoration: none;
}
.profile-session-id:hover {
color: rgba(120, 200, 255, 1);
text-decoration: underline;
}
/* Time row — started / ended / duration / parts */
.profile-session-times {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
font-size: 0.78rem;
margin-top: 0.3rem;
color: var(--text, #cfcfd5);
}
.profile-session-times .profile-session-stat {
font-variant-numeric: tabular-nums;
}
.profile-session-stat--ongoing {
color: rgba(120, 220, 150, 1);
}
.profile-sigchain-graph-wrap {
margin: 0 0 24px 0;
}
.profile-sigchain-graph {
position: relative;
width: 100%;
height: 280px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.profile-sigchain-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Timeline list */
.profile-sigchain-list {
display: flex;
flex-direction: column;
gap: 0;
}
.profile-sigchain-entry {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.profile-sigchain-entry:last-child {
border-bottom: none;
}
.profile-sigchain-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 2px;
background: var(--bg-raised);
color: var(--text-dim);
border: 1px solid var(--border);
}
.profile-sigchain-badge-genesis {
background: color-mix(in srgb, var(--accent) 15%, var(--bg-raised));
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.profile-sigchain-badge-bond {
background: color-mix(in srgb, #5bd5b5 12%, var(--bg-raised));
color: #5bd5b5;
border-color: color-mix(in srgb, #5bd5b5 30%, var(--border));
}
.profile-sigchain-badge-key {
background: color-mix(in srgb, #d5a05b 12%, var(--bg-raised));
color: #d5a05b;
border-color: color-mix(in srgb, #d5a05b 30%, var(--border));
}
.profile-sigchain-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.profile-sigchain-body {
font-size: var(--font-body);
color: var(--text);
word-break: break-word;
}
.profile-sigchain-meta {
font-size: var(--font-sm);
color: var(--text-dim);
}
.profile-sigchain-link {
color: var(--accent);
text-decoration: none;
}
.profile-sigchain-link:hover {
text-decoration: underline;
}
.profile-sigchain-direction {
color: var(--text-dim);
font-style: italic;
}
.profile-sigchain-bondtype {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 2px;
padding: 0 4px;
font-size: var(--font-sm);
color: var(--text-dim);
margin-left: 4px;
}
.profile-sigchain-desc {
font-size: var(--font-sm);
color: var(--text-dim);
font-style: italic;
}
.profile-sigchain-fp {
font-family: monospace;
font-size: var(--font-sm);
color: var(--text-dim);
word-break: break-all;
}
.profile-sigchain-time {
font-size: var(--font-sm);
color: var(--text-dim);
white-space: nowrap;
flex-shrink: 0;
margin-top: 3px;
}
.profile-sigchain-hint {
max-width: 480px;
}
/* Meta strip: Keybase link + blockchain verify note */
.profile-sigchain-meta-strip {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
margin: 0 0 12px 0;
border-bottom: 1px solid var(--border);
font-size: var(--font-sm);
flex-wrap: wrap;
}
.profile-sigchain-verify-link {
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.profile-sigchain-verify-link:hover {
text-decoration: underline;
}
.profile-sigchain-verify-note {
color: var(--text-dim);
font-style: italic;
}
/* Right column: chain height + timestamp stacked */
.profile-sigchain-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
flex-shrink: 0;
}
.profile-sigchain-height {
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
font-family: monospace;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 3px;
padding: 1px 5px;
}
/* Bond detail link in sigchain entry */
.profile-sigchain-detail-link {
font-size: var(--font-sm);
color: var(--accent);
text-decoration: none;
margin-left: 8px;
}
.profile-sigchain-detail-link:hover {
text-decoration: underline;
}
.profile-sigchain-arrow {
margin: 0 4px;
color: var(--accent);
font-weight: 600;
}
.profile-sigchain-created {
font-size: var(--font-sm);
color: var(--text-dim);
margin-left: 6px;
}
/* ============================================================
Radial bond graph nodes + edges (sigchain/logic.js renders these)
============================================================ */
.bond-node {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-body);
font-weight: 600;
color: #fff;
cursor: pointer;
user-select: none;
transition: transform 0.15s;
z-index: 1;
}
.bond-node:hover {
z-index: 3;
}
.bond-node.active-now {
box-shadow: 0 0 0 3px var(--accent), 0 0 12px rgba(0,0,0,0.3);
}
.bond-node img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.bond-node-label {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 4px;
font-size: 10px;
color: var(--text-dim);
white-space: nowrap;
pointer-events: none;
}
.bond-edge {
stroke: var(--border);
stroke-width: 1.5;
}
.bond-edge-arrow {
fill: var(--border);
}
.profile-sig-detail {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* CID section — the proof artifact, prominent */
.profile-sig-cid-section {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border-radius: 6px;
border-left: 3px solid var(--entity-accent, rgba(160, 200, 255, 0.5));
}
.profile-sig-cid-label {
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
flex-shrink: 0;
}
.profile-sig-cid-value {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-body);
color: var(--text-bright, #eee);
word-break: break-all;
flex: 1;
min-width: 0;
}
.profile-sig-copy-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: var(--text-muted, #888);
font-size: var(--font-sm);
padding: 3px 10px;
border-radius: 3px;
cursor: pointer;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
letter-spacing: 0.5px;
flex-shrink: 0;
transition: border-color 0.1s, color 0.1s;
}
.profile-sig-copy-btn:hover {
border-color: var(--entity-accent, rgba(160, 200, 255, 0.5));
color: var(--text, #ccc);
}
/* Status badge */
.profile-sig-status {
font-size: var(--font-sm);
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.profile-sig-status--verified { background: rgba(120, 220, 150, 0.15); color: rgba(120, 220, 150, 1); }
.profile-sig-status--pending { background: rgba(220, 180, 80, 0.15); color: rgba(220, 180, 80, 1); }
.profile-sig-status--unverified { background: rgba(180, 180, 180, 0.1); color: rgba(180, 180, 180, 0.7); }
.profile-sig-status--failed { background: rgba(220, 100, 80, 0.15); color: rgba(220, 100, 80, 0.9); }
/* Metadata row */
.profile-sig-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 0 4px;
}
.profile-sig-meta-item {
display: flex;
gap: 6px;
align-items: baseline;
font-size: var(--font-sm);
}
.profile-sig-meta-label {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted, #888);
}
.profile-sig-meta-val {
color: var(--text, #ccc);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
/* Section headings */
.profile-sig-section-title {
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted, #888);
margin: 0 0 10px 0;
font-weight: 600;
}
/* Claims section */
.profile-sig-claims {
display: flex;
flex-direction: column;
gap: 0;
}
.profile-sig-claim-row {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
padding: 10px 16px;
border-left: 3px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.02);
margin-bottom: 6px;
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-body);
}
.profile-sig-claim-row--verified { border-left-color: rgba(120, 220, 150, 0.5); }
.profile-sig-claim-row--pending { border-left-color: rgba(220, 180, 80, 0.5); }
.profile-sig-claim-row--unverified { border-left-color: rgba(180, 180, 180, 0.2); }
.profile-sig-claim-row--failed { border-left-color: rgba(220, 100, 80, 0.4); }
.profile-sig-claim-platform {
font-weight: 600;
color: rgba(120, 200, 255, 0.9);
min-width: 80px;
}
.profile-sig-claim-handle {
color: var(--text, #ccc);
flex: 1;
}
.profile-sig-claim-status {
font-size: var(--font-sm);
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.profile-sig-claim-status--verified { background: rgba(120, 220, 150, 0.15); color: rgba(120, 220, 150, 1); }
.profile-sig-claim-status--pending { background: rgba(220, 180, 80, 0.15); color: rgba(220, 180, 80, 1); }
.profile-sig-claim-status--unverified { background: rgba(180, 180, 180, 0.1); color: rgba(180, 180, 180, 0.7); }
.profile-sig-claim-status--failed { background: rgba(220, 100, 80, 0.15); color: rgba(220, 100, 80, 0.9); }
.profile-sig-claim-last-verified {
font-size: var(--font-sm);
color: var(--text-faint, #666);
margin-left: auto;
}
/* PGP clearsign block — verbatim, DO NOT modify whitespace */
.profile-sig-pgp-section {
display: flex;
flex-direction: column;
}
.profile-sig-pgp-block {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
line-height: 1.5;
color: var(--text-muted, #888);
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 4px;
padding: 16px;
overflow-x: auto;
white-space: pre;
word-break: normal;
tab-size: 4;
}
/* API links */
.profile-sig-api-links {
display: flex;
gap: 12px;
padding: 0 4px;
}
.profile-sig-api-link {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
color: var(--text-faint, #666);
text-decoration: none;
letter-spacing: 0.3px;
}
.profile-sig-api-link:hover {
color: var(--text-muted, #888);
text-decoration: underline;
}
.profile-signatures-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 16px;
}
.profile-signature-row {
display: block;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border-left: 3px solid rgba(255, 255, 255, 0.15);
text-decoration: none;
color: inherit;
transition: background 0.1s ease, border-left-color 0.1s ease;
}
.profile-signature-row:hover {
background: rgba(255, 255, 255, 0.06);
border-left-color: var(--entity-accent, rgba(160, 200, 255, 0.5));
}
.profile-signature-row-head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.profile-signature-cid-short {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-body);
font-weight: 600;
color: var(--text-bright, #eee);
letter-spacing: 0.3px;
}
.profile-signature-claims-summary {
font-size: var(--font-body);
color: rgba(120, 200, 255, 0.9);
}
.profile-signature-status {
margin-left: auto;
font-size: var(--font-sm);
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.profile-signature-status--verified {
background: rgba(120, 220, 150, 0.15);
color: rgba(120, 220, 150, 1);
}
.profile-signature-status--pending {
background: rgba(220, 180, 80, 0.15);
color: rgba(220, 180, 80, 1);
}
.profile-signature-status--unverified {
background: rgba(180, 180, 180, 0.1);
color: rgba(180, 180, 180, 0.7);
}
.profile-signature-status--failed {
background: rgba(220, 100, 80, 0.15);
color: rgba(220, 100, 80, 0.9);
}
.profile-signature-row-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
font-size: var(--font-sm);
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.profile-signature-issued {
color: var(--text-muted, #888);
}
.profile-signature-kingdom {
color: var(--text-faint, #666);
}
.profile-signature-fingerprint {
color: var(--text-faint, #666);
letter-spacing: 0.5px;
}
.sessions-index-header {
margin-bottom: 32px;
}
.sessions-index-title {
margin: 0 0 8px 0;
}
.sessions-index-subhead {
color: var(--text-muted, #888);
margin: 0 0 16px 0;
}
.sessions-index-stats {
display: flex;
gap: 8px;
align-items: baseline;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
color: var(--text, #ccc);
}
.sessions-index-stat-sep {
color: var(--text-faint, #555);
}
.sessions-index-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.sessions-index-row {
display: block;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 6px;
border-left: 3px solid rgba(255, 255, 255, 0.15);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
text-decoration: none;
color: inherit;
transition: background 0.1s;
}
.sessions-index-row:hover {
background: rgba(255, 255, 255, 0.05);
}
.sessions-index-row--active {
border-left-color: rgba(120, 220, 150, 0.7);
background: rgba(120, 220, 150, 0.04);
}
.sessions-index-row--active:hover {
background: rgba(120, 220, 150, 0.08);
}
.sessions-index-row-head {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.sessions-index-spirit {
font-weight: 600;
color: rgba(220, 180, 100, 0.95);
}
.sessions-index-arrow {
color: var(--text-faint, #555);
}
.sessions-index-entity {
font-weight: 600;
color: var(--text-bright, #eee);
}
.sessions-index-harness {
color: var(--text-muted, #888);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sessions-index-model {
color: rgba(120, 200, 255, 0.9);
}
.sessions-index-status {
margin-left: auto;
font-size: 11px;
padding: 2px 8px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sessions-index-status--active {
background: rgba(120, 220, 150, 0.15);
color: rgba(120, 220, 150, 1);
}
.sessions-index-status--stale {
background: rgba(220, 180, 80, 0.15);
color: rgba(220, 180, 80, 1);
}
.sessions-index-status--killed,
.sessions-index-status--ended {
background: rgba(180, 180, 180, 0.1);
color: rgba(180, 180, 180, 0.7);
}
.sessions-index-row-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 8px;
color: var(--text, #ccc);
}
.sessions-index-stat-row {
display: inline-flex;
gap: 4px;
}
.sessions-index-stat-label {
color: var(--text-muted, #888);
}
.sessions-index-row-tail {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 16px;
font-size: 12px;
color: var(--text-muted, #888);
}
.sessions-index-cwd {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sessions-index-pid,
.sessions-index-id {
color: var(--text-faint, #666);
}
.sessions-index-empty {
padding: 32px;
text-align: center;
color: var(--text-muted, #888);
}
.stl-page {
min-height: 100vh;
padding: 0 0 48px 0;
}
/* ---------------------------------------------------------------------------
Header + controls
--------------------------------------------------------------------------- */
.stl-header {
padding: 32px 24px 20px 24px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stl-header-top {
margin-bottom: 16px;
}
.stl-title {
margin: 0 0 6px 0;
font-size: var(--font-h2);
font-weight: 600;
color: var(--text-bright, #eee);
}
.stl-subhead {
margin: 0;
font-size: var(--font-sm);
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.stl-controls {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.stl-zoom-group {
display: flex;
gap: 2px;
}
.stl-zoom-btn {
padding: 5px 14px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 4px;
color: var(--text-muted, #999);
font-size: var(--font-sm);
cursor: pointer;
font-family: inherit;
transition: background 0.12s, color 0.12s;
}
.stl-zoom-btn:hover {
background: rgba(255,255,255,0.1);
color: var(--text, #ccc);
}
.stl-zoom-btn--active {
background: rgba(255,255,255,0.12);
color: var(--text-bright, #eee);
border-color: rgba(255,255,255,0.25);
}
.stl-pan-group {
display: flex;
align-items: center;
gap: 8px;
}
.stl-pan-btn {
padding: 5px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
color: var(--text-muted, #999);
font-size: var(--font-sm);
cursor: pointer;
font-family: inherit;
transition: background 0.1s;
}
.stl-pan-btn:hover {
background: rgba(255,255,255,0.09);
color: var(--text, #ccc);
}
.stl-pan-label {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
color: var(--text, #ccc);
min-width: 130px;
text-align: center;
}
.stl-reset-btn {
padding: 5px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
color: var(--text-faint, #666);
font-size: var(--font-sm);
cursor: pointer;
font-family: inherit;
transition: color 0.12s, border-color 0.12s;
}
.stl-reset-btn:hover {
color: var(--text-muted, #999);
border-color: rgba(255,255,255,0.15);
}
/* ---------------------------------------------------------------------------
Chart area — fixed-height entity labels column + scrollable canvas
--------------------------------------------------------------------------- */
.stl-chart-wrap {
display: flex;
padding: 16px 0 0 0;
}
.stl-entity-labels {
flex-shrink: 0;
width: 160px;
padding-top: 28px; /* aligns with axis row height */
border-right: 1px solid rgba(255,255,255,0.05);
}
.stl-entity-label {
display: flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px 0 16px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-mono-label);
color: var(--text-muted, #888);
overflow: hidden;
}
.stl-entity-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: hsl(var(--entity-hue), 60%, 65%);
}
.stl-entity-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text, #ccc);
}
.stl-entity-count {
color: var(--text-faint, #555);
font-size: 10px;
}
/* ---------------------------------------------------------------------------
Canvas outer — horizontally scrollable container
--------------------------------------------------------------------------- */
.stl-canvas-outer {
flex: 1;
overflow-x: auto;
min-width: 0;
position: relative;
}
/* ---------------------------------------------------------------------------
Axis row
--------------------------------------------------------------------------- */
.stl-axis-row {
position: relative;
height: 28px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: rgba(255,255,255,0.02);
}
.stl-axis-tick {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
transform: translateX(-50%);
pointer-events: none;
}
.stl-axis-tick::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 6px;
background: rgba(255,255,255,0.15);
}
.stl-axis-label {
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 10px;
color: var(--text-faint, #666);
white-space: nowrap;
padding: 0 4px;
}
/* ---------------------------------------------------------------------------
Gantt rows + bars
--------------------------------------------------------------------------- */
.stl-gantt {
position: relative;
}
.stl-gantt-row {
position: relative;
height: 28px;
border-bottom: 1px solid rgba(255,255,255,0.03);
cursor: default;
}
.stl-gantt-row:hover {
background: rgba(255,255,255,0.015);
}
.stl-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 10px;
border-radius: 2px;
background-color: hsl(var(--entity-hue), 55%, 50%);
opacity: 0.7;
cursor: pointer;
transition: opacity 0.1s, height 0.1s;
min-width: 2px;
}
.stl-bar:hover {
opacity: 1;
height: 14px;
z-index: 10;
}
/* ---------------------------------------------------------------------------
Detail panel
--------------------------------------------------------------------------- */
.stl-detail {
margin: 20px 24px 0 24px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-left: 3px solid hsl(var(--entity-hue, 220), 55%, 50%);
border-radius: 6px;
padding: 16px 20px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: var(--font-sm);
}
.stl-detail-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.stl-detail-entity {
display: flex;
align-items: center;
gap: 8px;
}
.stl-detail-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: hsl(var(--entity-hue, 220), 60%, 60%);
flex-shrink: 0;
}
.stl-detail-entity-name {
font-weight: 600;
font-size: var(--font-body);
color: var(--text-bright, #eee);
}
.stl-detail-legacy {
font-size: 10px;
padding: 2px 6px;
background: rgba(255,200,80,0.15);
color: rgba(255,200,80,0.9);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stl-detail-close {
background: transparent;
border: none;
color: var(--text-faint, #666);
font-size: 20px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.1s;
}
.stl-detail-close:hover {
color: var(--text-muted, #999);
}
.stl-detail-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 8px 24px;
}
.stl-detail-row {
display: flex;
gap: 8px;
align-items: baseline;
min-width: 0;
}
.stl-detail-label {
flex-shrink: 0;
width: 80px;
color: var(--text-muted, #888);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stl-detail-value {
color: var(--text, #ccc);
word-break: break-all;
}
.stl-detail-cwd {
color: var(--text-muted, #888);
}
.stl-detail-footer {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.stl-transcript-link {
font-size: var(--font-sm);
color: rgba(100,180,255,0.8);
text-decoration: none;
transition: color 0.1s;
}
.stl-transcript-link:hover {
color: rgba(100,180,255,1);
}.session-page {
max-width: 960px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.session-shell {
background: #18181b;
border: 1px solid #27272a;
border-radius: 10px;
overflow: hidden;
}
.session-hero {
padding: 1.75rem 2rem;
background: linear-gradient(180deg, #1f1f23, #18181b);
border-bottom: 1px solid #27272a;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1.5rem;
flex-wrap: wrap;
}
.session-hero-line {
display: flex;
align-items: baseline;
gap: 0.6rem;
font-size: var(--font-h2);
}
.session-hero-line .text-muted {
color: #71717a;
font-size: var(--font-body);
}
.session-hero-host {
color: #e4e4e7;
font-family: monospace;
font-size: var(--font-h4);
}
.session-hero-spirit,
.session-hero-entity {
font-weight: 500;
}
.session-hero-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.session-hero-runtime {
color: #a1a1aa;
font-size: var(--font-body);
}
.session-hero-cost {
color: #fff;
font-size: var(--font-h2);
font-weight: 500;
}
.session-primary {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
padding: 1.5rem 2rem;
border-bottom: 1px solid #27272a;
}
@media (max-width: 700px) {
.session-primary { grid-template-columns: 1fr; }
}
.session-cell .session-cell-label {
font-size: var(--font-sm);
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.session-cell .session-cell-value {
color: #e4e4e7;
font-size: var(--font-body);
word-break: break-all;
}
.session-cell .session-cell-sub {
font-size: var(--font-sm);
color: #71717a;
margin-top: 0.2rem;
}
.session-cell .mono,
.session-cell-value.mono {
font-family: monospace;
}
.session-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.5rem;
padding: 1.25rem 2rem;
border-bottom: 1px solid #27272a;
}
.session-metric {
padding: 0.6rem 0.75rem;
background: #0e0e10;
border: 1px solid #27272a;
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.session-metric-label {
font-size: var(--font-sm);
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.session-metric-value {
font-size: var(--font-h3);
color: #fff;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.session-metric-value em {
font-style: normal;
font-size: var(--font-sm);
color: #a1a1aa;
margin-left: 0.15rem;
}
.session-metric-value.mono { font-family: monospace; font-size: var(--font-mono-body); }
.session-metric-sub {
font-size: var(--font-sm);
color: #71717a;
font-variant-numeric: tabular-nums;
}
.session-quotas {
padding: 1.25rem 2rem;
border-bottom: 1px solid #27272a;
}
.session-quotas h3 {
margin: 0 0 0.75rem 0;
font-size: var(--font-body);
color: #e4e4e7;
font-weight: 500;
}
.session-quota-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.session-quota {
display: grid;
grid-template-columns: 80px 1fr 100px;
gap: 0.75rem;
align-items: center;
}
.session-quota-label {
font-size: var(--font-sm);
color: #a1a1aa;
}
.session-quota-bar-wrap {
height: 10px;
background: #27272a;
border-radius: 2px;
overflow: hidden;
}
.session-quota-bar {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.session-quota-readout {
font-size: var(--font-sm);
color: #a1a1aa;
font-variant-numeric: tabular-nums;
text-align: right;
}
.session-playback-cta {
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #1e3a8a15, #7c3aed15);
border-top: 1px solid #27272a;
border-bottom: 1px solid #27272a;
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.session-playback-cta-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
color: white;
font-size: var(--font-h4);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding-left: 3px;
}
.session-playback-cta-body h3 {
margin: 0 0 0.4rem 0;
color: #fff;
font-weight: 500;
font-size: var(--font-h4);
}
.session-playback-cta-body p {
color: #a1a1aa;
font-size: var(--font-body);
margin: 0 0 0.6rem 0;
line-height: 1.5;
}
.session-playback-cta-link {
color: #93c5fd;
font-size: var(--font-body);
font-weight: 500;
}
.session-playback-cta-link:hover {
color: #bfdbfe;
}
.session-footer {
padding: 0.9rem 2rem;
display: flex;
justify-content: space-between;
align-items: baseline;
background: #0e0e10;
font-size: var(--font-sm);
color: #71717a;
}
.session-footer .session-id {
font-family: monospace;
}
.session-footer .muted { color: #71717a; }
/* ── Context bar ── */
.session-ctx-bar-wrap {
padding: 0.75rem 2rem;
border-bottom: 1px solid #27272a;
}
.session-ctx-bar-label {
display: flex;
justify-content: space-between;
font-size: var(--font-sm);
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.4rem;
}
.session-ctx-bar-pct {
color: #a1a1aa;
font-variant-numeric: tabular-nums;
}
.session-ctx-bar-track {
height: 8px;
background: #27272a;
border-radius: 2px;
overflow: hidden;
}
.session-ctx-bar {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}
.session-ctx-bar--ok { background: linear-gradient(90deg, #22c55e, #4ade80); }
.session-ctx-bar--warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.session-ctx-bar--danger { background: linear-gradient(90deg, #ef4444, #f87171); }
/* ── Harness/source/provider metadata row ── */
.session-meta-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
padding: 0.9rem 2rem;
border-bottom: 1px solid #27272a;
background: #0e0e10;
}
.session-meta-cell {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.session-meta-cell--wide {
flex: 1 1 100%;
}
.session-meta-label {
font-size: var(--font-sm);
color: #71717a;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.session-meta-value {
font-size: var(--font-sm);
color: #a1a1aa;
}
.session-meta-value.mono { font-family: monospace; font-size: var(--font-mono-label); word-break: break-all; }
/* Status pill */
.session-status {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.session-status--active { background: rgba(120,220,150,0.15); color: rgb(120,220,150); }
.session-status--stale { background: rgba(220,180,80,0.15); color: rgb(220,180,80); }
.session-status--killed,
.session-status--ended { background: rgba(180,180,180,0.10); color: rgb(180,180,180); }
/* Spirit handle pill in hero (warm color, distinct from entity) */
.session-hero-spirit-handle {
font-weight: 600;
color: rgba(220, 180, 100, 0.95);
text-decoration: none;
}
.session-hero-spirit-handle:hover { text-decoration: underline; }
.session-hero-entity { font-weight: 600; text-decoration: none; }
.session-hero-entity:hover { text-decoration: underline; }
/* ── Rate limit bar bands ── */
.session-quota-bar--ok { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.session-quota-bar--warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.session-quota-bar--danger { background: linear-gradient(90deg, #ef4444, #f87171); }
/* ── Entity nav link ── */
.session-hero-spirit { text-decoration: none; }
.session-hero-spirit:hover { opacity: 0.8; }
.session-missing {
padding: 3rem 2rem;
text-align: center;
}
.session-missing h2 { color: #e4e4e7; font-weight: 500; }
.session-missing .muted { color: #71717a; }
/* Archive transcript panel — appears below playback CTA on archived sessions */
.session-transcript {
margin-top: 1.5rem;
border-top: 1px solid var(--border, rgba(255,255,255,0.08));
padding-top: 1.5rem;
}
.session-transcript-title {
margin: 0 0 0.75rem 0;
font-size: var(--font-h4);
color: var(--text, #ddd);
}
.session-transcript-loading,
.session-transcript-error {
color: var(--text-muted, #888);
padding: 1rem 0;
}
.session-transcript-error { color: #f88; }
.session-transcript-review {
background: var(--surface-2, rgba(255,255,255,0.04));
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 6px;
padding: 1.25rem 1.5rem;
max-width: 640px;
}
.session-transcript-review p {
margin: 0 0 0.6rem 0;
font-size: var(--font-body);
line-height: 1.55;
}
.session-transcript-review .session-transcript-tier {
color: var(--accent, #c8a2ff);
margin-top: 0.75rem;
}
.session-transcript-controls {
color: var(--text-muted, #888);
font-size: var(--font-sm);
margin-bottom: 0.5rem;
}
.session-transcript-body {
display: flex;
flex-direction: column;
gap: 0.6rem;
max-height: 80vh;
overflow-y: auto;
padding: 0.5rem 0;
font-size: var(--font-body);
line-height: 1.5;
}
/* Common event wrapper */
.t-event {
font-family: var(--font-sans, system-ui, sans-serif);
}
/* Messages — chat bubbles */
.t-msg {
display: grid;
grid-template-columns: 7em 1fr;
gap: 0.75rem;
align-items: start;
}
.t-msg-gutter {
text-align: right;
font-size: var(--font-sm);
padding-top: 0.4rem;
}
.t-msg-handle {
font-weight: 600;
color: var(--text, #ddd);
text-transform: lowercase;
}
.t-msg-ts {
color: var(--text-muted, #888);
font-variant-numeric: tabular-nums;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-label);
margin-top: 2px;
}
.t-msg-bubble {
background: var(--surface-2, rgba(255,255,255,0.04));
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 8px;
padding: 0.6rem 0.85rem;
color: var(--text, #ddd);
overflow-wrap: anywhere;
}
.t-msg-user .t-msg-handle { color: #9fbfff; }
.t-msg-user .t-msg-bubble { background: rgba(120, 160, 255, 0.06); border-color: rgba(120, 160, 255, 0.18); }
.t-msg-assistant .t-msg-handle { color: var(--accent, #c8a2ff); }
/* Thinking — collapsed muted block */
.t-thinking {
margin-left: 7.75rem;
color: var(--text-muted, #888);
font-style: italic;
font-size: var(--font-body);
background: rgba(255,255,255,0.02);
border-left: 2px solid var(--border, rgba(255,255,255,0.1));
padding: 0.3rem 0.6rem;
border-radius: 0 4px 4px 0;
}
.t-thinking summary {
cursor: pointer;
font-weight: 500;
color: var(--text-muted, #888);
}
.t-thinking-body { margin-top: 0.3rem; }
/* Subagent dispatch — prominent banner */
.t-subagent {
display: flex;
gap: 0.6rem;
background: rgba(255, 200, 100, 0.06);
border: 1px solid rgba(255, 200, 100, 0.2);
border-radius: 8px;
padding: 0.7rem 0.9rem;
margin-left: 7.75rem;
}
.t-subagent-arrow {
font-size: var(--font-h2);
color: rgba(255, 200, 100, 0.9);
line-height: 1;
}
.t-subagent-headline {
color: var(--text, #ddd);
font-size: var(--font-body);
}
.t-subagent-headline strong {
color: rgba(255, 200, 100, 1);
text-transform: lowercase;
}
.t-subagent-bg {
margin-left: 0.5rem;
font-size: var(--font-sm);
padding: 0.05rem 0.45rem;
background: rgba(255, 200, 100, 0.15);
border-radius: 10px;
color: rgba(255, 200, 100, 0.9);
font-weight: 500;
}
.t-subagent-desc {
margin-top: 0.25rem;
color: var(--text-muted, #aaa);
font-size: var(--font-body);
}
.t-subagent-prompt {
margin-top: 0.4rem;
font-size: var(--font-sm);
}
.t-subagent-prompt summary { cursor: pointer; color: var(--text-muted, #888); }
.t-subagent-prompt pre {
margin-top: 0.3rem;
padding: 0.4rem 0.6rem;
background: rgba(0,0,0,0.25);
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-body);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 200px;
overflow-y: auto;
}
/* Tool use & tool result — compact cards, collapsed by default */
.t-tool, .t-result {
margin-left: 7.75rem;
background: rgba(0,0,0,0.2);
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 6px;
padding: 0.4rem 0.7rem;
font-size: var(--font-body);
}
.t-tool summary, .t-result summary {
cursor: pointer;
display: flex;
align-items: baseline;
gap: 0.6rem;
color: var(--text-muted, #aaa);
list-style: none;
}
.t-tool summary::-webkit-details-marker,
.t-result summary::-webkit-details-marker { display: none; }
.t-tool summary::before,
.t-result summary::before { content: '▸ '; color: var(--text-muted, #666); }
.t-tool[open] summary::before,
.t-result[open] summary::before { content: '▾ '; }
.t-tool-name {
font-family: var(--font-mono, ui-monospace, monospace);
color: #9f9;
font-weight: 500;
}
.t-tool-summary, .t-result-summary {
color: var(--text, #ccc);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-label);
overflow-wrap: anywhere;
}
.t-tool-input, .t-result-content {
margin: 0.45rem 0 0 0;
padding: 0.5rem 0.7rem;
background: rgba(0,0,0,0.35);
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-body);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 320px;
overflow-y: auto;
color: var(--text, #ccc);
}
.t-result-error summary {
color: #f88;
}
/* System — tiny muted line */
.t-system {
margin-left: 7.75rem;
color: var(--text-muted, #666);
font-size: var(--font-sm);
font-family: var(--font-mono, ui-monospace, monospace);
font-style: italic;
}
/* Markdown-lite output inside messages/thinking */
.t-msg-bubble .t-code,
.t-thinking-body .t-code {
display: block;
margin: 0.4rem 0;
padding: 0.5rem 0.7rem;
background: rgba(0,0,0,0.35);
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.85em;
white-space: pre-wrap;
overflow-x: auto;
}
.t-msg-bubble .t-inline,
.t-thinking-body .t-inline {
background: rgba(255,255,255,0.06);
padding: 0.05em 0.35em;
border-radius: 3px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.9em;
}
/* Aggregate stats panel */
.t-aggregate {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border, rgba(255,255,255,0.06));
border-radius: 6px;
padding: 0.7rem 0.9rem;
margin: 0.6rem 0 1rem 0;
font-size: var(--font-sm);
}
.t-agg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 0.4rem 0.8rem;
margin-bottom: 0.5rem;
}
.t-agg-cell {
display: flex;
flex-direction: column;
}
.t-agg-label {
color: var(--text-muted, #888);
font-size: var(--font-sm);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.t-agg-value {
color: var(--text, #ddd);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.t-agg-row {
margin-top: 0.35rem;
font-size: var(--font-sm);
color: var(--text, #ddd);
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: baseline;
}
.t-agg-row code {
background: rgba(255,255,255,0.04);
padding: 0.05rem 0.4rem;
border-radius: 3px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.78em;
color: var(--text, #ddd);
}
.t-agg-tool-pill, .t-agg-kind-pill {
background: rgba(255,255,255,0.05);
padding: 0.05rem 0.5rem;
border-radius: 10px;
color: var(--text, #ddd);
font-size: var(--font-sm);
}
.t-agg-tool-pill em, .t-agg-kind-pill em {
color: var(--text-muted, #888);
margin-left: 0.3rem;
font-style: normal;
}
/* Per-message assistant stats footer */
.t-msg-stats {
margin-top: 0.4rem;
font-size: var(--font-mono-label);
color: var(--text-muted, #888);
border-top: 1px dashed rgba(255,255,255,0.06);
padding-top: 0.3rem;
}
.t-msg-stats summary {
cursor: pointer;
font-family: var(--font-mono, ui-monospace, monospace);
}
.t-msg-stats-body {
margin-top: 0.4rem;
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.2rem 0.6rem;
}
.t-stat-row { display: contents; }
.t-stat-key { color: var(--text-muted, #666); font-family: var(--font-mono, ui-monospace, monospace); }
.t-stat-val { color: var(--text, #ccc); font-family: var(--font-mono, ui-monospace, monospace); overflow-wrap: anywhere; }
/* Bottom meta strip on events */
.t-event-meta-row,
.t-event-meta {
margin-top: 0.3rem;
margin-left: 7.75rem;
font-size: var(--font-sm);
color: var(--text-muted, #666);
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.t-event-meta-row code,
.t-event-meta code {
background: rgba(255,255,255,0.03);
padding: 0.05rem 0.4rem;
border-radius: 3px;
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--text-muted, #aaa);
}
/* New event kinds — terse but visible */
.t-snapshot, .t-permission-mode, .t-queue-op, .t-attachment, .t-last-prompt,
.t-summary, .t-unknown {
margin-left: 7.75rem;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
padding: 0.4rem 0.7rem;
font-size: var(--font-sm);
color: var(--text-muted, #aaa);
}
.t-snapshot summary, .t-queue-op summary, .t-attachment summary,
.t-last-prompt summary, .t-summary summary, .t-unknown summary,
.t-system summary {
cursor: pointer;
font-family: var(--font-mono, ui-monospace, monospace);
color: var(--text, #ccc);
}
.t-snapshot pre, .t-queue-op pre, .t-attachment pre, .t-unknown pre {
margin: 0.4rem 0 0 0;
padding: 0.5rem 0.7rem;
background: rgba(0,0,0,0.35);
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-body);
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 320px;
overflow-y: auto;
color: var(--text, #ccc);
}
.t-permission-mode {
color: var(--text, #ddd);
background: rgba(120, 200, 255, 0.05);
border-color: rgba(120, 200, 255, 0.15);
}
.t-permission-mode strong {
color: rgba(120, 200, 255, 1);
}
.t-summary-compact {
background: rgba(200, 162, 255, 0.05);
border-color: rgba(200, 162, 255, 0.15);
}
.t-summary-compact summary {
color: var(--accent, #c8a2ff);
}
.t-system {
margin-left: 7.75rem;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 6px;
padding: 0.4rem 0.7rem;
font-size: var(--font-sm);
color: var(--text-muted, #888);
font-style: normal;
}
.t-system-text {
margin-top: 0.3rem;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
/* Raw JSONL toggle on every event */
.t-event-raw {
margin-top: 0.3rem;
margin-left: 7.75rem;
font-size: var(--font-sm);
}
.t-event-raw summary {
cursor: pointer;
color: var(--text-muted, #666);
font-family: var(--font-mono, ui-monospace, monospace);
}
.t-event-raw[open] summary { color: var(--text-muted, #aaa); }
.t-event-raw pre {
margin: 0.3rem 0 0 0;
padding: 0.5rem 0.7rem;
background: rgba(0,0,0,0.4);
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: var(--font-mono-label);
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 400px;
overflow-y: auto;
color: var(--text-muted, #888);
}
.throne-panel {
margin-top: 2rem;
border: 1px solid var(--theme-border, rgba(255,255,255,0.1));
border-radius: 6px;
background: var(--theme-bg-raised, rgba(255,255,255,0.03));
overflow: hidden;
}
.throne-panel-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--theme-border, rgba(255,255,255,0.08));
background: var(--theme-bg-subtle, rgba(0,0,0,0.15));
}
.throne-panel-crown {
font-size: 1rem;
opacity: 0.8;
}
.throne-panel-title {
font-weight: 600;
font-size: var(--font-body);
color: var(--theme-fg, #e2e8f0);
}
.throne-panel-hint {
margin-left: auto;
font-size: var(--font-sm);
opacity: 0.45;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* Turn list */
.throne-turns {
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 480px;
overflow-y: auto;
}
.throne-turn {
display: grid;
grid-template-columns: 6rem 1fr;
gap: 0.5rem;
align-items: start;
}
.throne-turn-label {
font-size: var(--font-sm);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.5;
padding-top: 0.15rem;
text-align: right;
}
.throne-turn--user .throne-turn-label {
color: var(--kingdom-accent, #60a5fa);
opacity: 0.7;
}
.throne-turn--assistant .throne-turn-label {
color: var(--theme-fg, #94a3b8);
}
.throne-turn-text {
font-size: var(--font-body);
line-height: 1.6;
color: var(--theme-fg, #e2e8f0);
word-break: break-word;
}
/* Streaming state */
.throne-turn--streaming .throne-turn-text {
opacity: 0.85;
}
.throne-cursor {
display: inline-block;
animation: throne-blink 1s step-end infinite;
margin-left: 1px;
opacity: 0.7;
}
@keyframes throne-blink {
0%, 100% { opacity: 0.7; }
50% { opacity: 0; }
}
/* Inline code and code blocks */
.throne-turn-text code,
.throne-turn-text .t-inline {
font-family: monospace;
font-size: 0.82em;
background: var(--theme-code-bg, rgba(0,0,0,0.3));
padding: 0.1em 0.3em;
border-radius: 3px;
}
.throne-code {
font-family: monospace;
font-size: 0.8em;
background: var(--theme-code-bg, rgba(0,0,0,0.35));
padding: 0.6rem 0.8rem;
border-radius: 4px;
overflow-x: auto;
white-space: pre;
margin: 0.4rem 0;
}
/* Error */
.throne-error {
margin: 0 1rem 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: var(--font-sm);
color: var(--theme-danger, #f87171);
background: rgba(248,113,113,0.08);
border: 1px solid rgba(248,113,113,0.2);
}
/* Input form */
.throne-form {
padding: 0.75rem 1rem;
border-top: 1px solid var(--theme-border, rgba(255,255,255,0.08));
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.throne-input {
width: 100%;
background: var(--theme-input-bg, rgba(0,0,0,0.25));
border: 1px solid var(--theme-border, rgba(255,255,255,0.12));
border-radius: 4px;
color: var(--theme-fg, #e2e8f0);
font-size: var(--font-body);
line-height: 1.5;
padding: 0.6rem 0.75rem;
resize: vertical;
font-family: inherit;
box-sizing: border-box;
}
.throne-input:focus {
outline: none;
border-color: var(--kingdom-accent, #60a5fa);
}
.throne-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.throne-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.throne-submit {
background: var(--kingdom-accent, #3b82f6);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.45rem 1.1rem;
font-size: var(--font-body);
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s;
}
.throne-submit:hover:not(:disabled) {
opacity: 0.88;
}
.throne-submit:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Fresh session button — secondary ghost with amber/warm accent to distinguish from Send */
.throne-fresh {
background: transparent;
color: var(--throne-fresh-color, #f59e0b);
border: 1px solid var(--throne-fresh-border, rgba(245,158,11,0.35));
border-radius: 4px;
padding: 0.45rem 1.0rem;
font-size: var(--font-body);
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.throne-fresh:hover:not(:disabled) {
border-color: var(--throne-fresh-color, #f59e0b);
color: var(--throne-fresh-color, #f59e0b);
opacity: 0.88;
}
.throne-fresh:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Cancel button — appears mid-stream, destructive-neutral tone */
.throne-cancel {
background: transparent;
color: var(--theme-fg-muted, #94a3b8);
border: 1px solid var(--theme-border, rgba(255,255,255,0.15));
border-radius: 4px;
padding: 0.45rem 0.9rem;
font-size: var(--font-body);
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.throne-cancel:hover {
border-color: var(--theme-danger, #f87171);
color: var(--theme-danger, #f87171);
}
/* Mode indicator — muted status line shown during streaming */
.throne-mode-indicator {
font-size: var(--font-sm);
color: var(--theme-fg-muted, #64748b);
opacity: 0.7;
letter-spacing: 0.02em;
font-style: italic;
}
/* Interrupted turn tag */
.throne-interrupted-tag {
font-size: 0.78em;
opacity: 0.55;
margin-left: 0.4em;
}
/* Fresh-mode result notice */
.throne-fresh-notice {
margin: 0 1rem 0.5rem;
padding: 0.45rem 0.75rem;
border-radius: 4px;
font-size: var(--font-sm);
color: var(--theme-fg-muted, #94a3b8);
background: rgba(96,165,250,0.06);
border: 1px solid rgba(96,165,250,0.18);
}
.throne-fresh-link {
color: var(--kingdom-accent, #60a5fa);
text-decoration: underline;
font-family: monospace;
font-size: 0.8em;
word-break: break-all;
}
/* Fork button — violet/branching accent */
.throne-fork-btn {
background: transparent;
color: var(--throne-fork-color, #a78bfa);
border: 1px solid var(--throne-fork-border, rgba(167,139,250,0.35));
border-radius: 4px;
padding: 0.45rem 1.0rem;
font-size: var(--font-body);
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}
.throne-fork-btn:hover:not(:disabled) {
border-color: var(--throne-fork-color, #a78bfa);
color: var(--throne-fork-color, #a78bfa);
opacity: 0.88;
}
.throne-fork-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Fork pick list — appears above input when fork button is clicked */
.throne-fork-picker {
padding: 0.6rem 1rem;
border-top: 1px solid var(--theme-border, rgba(255,255,255,0.08));
background: var(--theme-bg-subtle, rgba(0,0,0,0.12));
}
.throne-fork-picker-label {
font-size: var(--font-sm);
color: var(--theme-fg-muted, #94a3b8);
margin-bottom: 0.4rem;
font-style: italic;
}
.throne-fork-pick-list {
list-style: none;
margin: 0;
padding: 0;
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.throne-fork-pick-item {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.3rem 0.5rem;
border-radius: 3px;
cursor: pointer;
transition: background 0.1s;
}
.throne-fork-pick-item:hover,
.throne-fork-pick-item--selected {
background: rgba(167,139,250,0.1);
}
.throne-fork-pick-time {
font-size: var(--font-sm);
font-family: monospace;
color: var(--throne-fork-color, #a78bfa);
opacity: 0.8;
white-space: nowrap;
flex-shrink: 0;
}
.throne-fork-pick-snippet {
font-size: var(--font-sm);
color: var(--theme-fg, #e2e8f0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
opacity: 0.85;
}
/* Fork point badge — shown when a point is picked */
.throne-fork-point-badge {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.75rem;
margin: 0 1rem 0;
background: rgba(167,139,250,0.08);
border: 1px solid rgba(167,139,250,0.25);
border-radius: 4px;
font-size: var(--font-sm);
color: var(--theme-fg-muted, #94a3b8);
}
.throne-fork-point-time {
font-family: monospace;
color: var(--throne-fork-color, #a78bfa);
font-size: var(--font-sm);
}
.throne-fork-point-snippet {
color: var(--theme-fg, #e2e8f0);
font-style: italic;
opacity: 0.75;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 30ch;
}
.throne-fork-point-clear {
margin-left: auto;
background: none;
border: none;
color: var(--theme-fg-muted, #94a3b8);
cursor: pointer;
font-size: 1rem;
line-height: 1;
padding: 0 0.15rem;
opacity: 0.7;
flex-shrink: 0;
}
.throne-fork-point-clear:hover {
opacity: 1;
color: var(--theme-danger, #f87171);
}
/* Fork session notice */
.throne-fork-notice {
margin: 0 1rem 0.5rem;
padding: 0.45rem 0.75rem;
border-radius: 4px;
font-size: var(--font-sm);
color: var(--theme-fg-muted, #94a3b8);
background: rgba(167,139,250,0.06);
border: 1px solid rgba(167,139,250,0.18);
}
.throne-fork-link {
color: var(--throne-fork-color, #a78bfa);
text-decoration: underline;
font-family: monospace;
font-size: 0.8em;
word-break: break-all;
}
/* ── Three-state variants ─────────────────────────────────────────────────── */
.throne-panel--ongoing,
.throne-panel--pending {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
border-radius: 8px;
padding: 1.1rem 1.4rem;
margin-top: 1.5rem;
}
.throne-panel--ongoing .throne-panel-header,
.throne-panel--pending .throne-panel-header {
margin-bottom: 0.5rem;
}
.throne-panel-body {
margin: 0;
font-size: var(--font-body);
line-height: 1.55;
color: var(--text, #cfcfd5);
max-width: 60ch;
}
.throne-panel--ongoing .throne-panel-crown {
color: rgba(120, 200, 255, 1);
}
.throne-panel--ongoing .throne-panel-title {
color: rgba(120, 200, 255, 1);
}
.throne-panel--pending .throne-panel-crown {
color: var(--text-muted, #888);
}
.throne-panel--pending .throne-panel-title {
color: var(--text-muted, #aaa);
}
.e-explorer-address-card {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-address-card--retired {
opacity: 0.75;
border-color: var(--color-warning, #f59e0b);
}
.e-explorer-address-card-identity {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-address-card-avatar {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
}
.e-explorer-address-card-avatar-img {
width: 100%;
height: 100%;
border-radius: var(--radius-full, 50%);
object-fit: cover;
}
.e-explorer-address-card-avatar-placeholder {
width: 100%;
height: 100%;
background: var(--color-muted, #c0c0c0);
border-radius: var(--radius-full, 50%);
}
.e-explorer-address-card-meta {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
}
.e-explorer-address-card-name {
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, inherit);
}
.e-explorer-address-card-kingdom {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-secondary, #666);
}
.e-explorer-address-card-badge {
display: inline-block;
padding: 0.1em 0.5em;
border-radius: var(--radius-sm, 3px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-medium, 500);
}
.e-explorer-address-card-badge--stale {
background: var(--color-warning-bg, #fef3c7);
color: var(--color-warning, #b45309);
}
.e-explorer-address-card-badge--retired {
background: var(--color-error-bg, #fee2e2);
color: var(--color-error, #b91c1c);
}
.e-explorer-address-card-alliances {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs, 0.25rem);
}
.e-explorer-address-card-alliance-badge {
padding: 0.1em 0.5em;
border-radius: var(--radius-sm, 3px);
background: var(--color-accent-bg, #eff6ff);
color: var(--color-accent, #1d4ed8);
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-address-card-sigchain {
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-address-card-sigchain-link {
color: var(--color-link, #2563eb);
font-family: var(--font-mono, monospace);
}
.e-explorer-address-card-footer {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
flex-wrap: wrap;
padding-top: var(--space-xs, 0.25rem);
border-top: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-address-card-address-copy {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-address-card-balance {
margin-left: auto;
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, inherit);
}
.e-explorer-address-card-loading,
.e-explorer-address-card-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
padding: var(--space-sm, 0.5rem) 0;
}
.e-explorer-address-taint-summary {
display: inline-flex;
align-items: center;
gap: var(--space-xs, 0.25rem);
font-size: var(--font-size-sm, 0.875rem);
vertical-align: middle;
}
.e-explorer-address-taint-summary-avatar {
width: 1.25rem;
height: 1.25rem;
border-radius: var(--radius-full, 50%);
object-fit: cover;
flex-shrink: 0;
}
.e-explorer-address-taint-summary-name {
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, inherit);
}
.e-explorer-address-taint-summary-kingdom {
color: var(--text-secondary, #666);
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-address-taint-summary-indicator {
font-size: var(--font-size-xs, 0.75rem);
padding: 0 0.25em;
border-radius: var(--radius-sm, 3px);
font-weight: var(--font-weight-bold, 700);
}
.e-explorer-address-taint-summary-indicator--stale {
background: var(--color-warning-bg, #fef3c7);
color: var(--color-warning, #b45309);
}
.e-explorer-address-taint-summary-indicator--retired {
background: var(--color-error-bg, #fee2e2);
color: var(--color-error, #b91c1c);
}
.e-explorer-address-taint-summary--bare {
font-family: var(--font-mono, monospace);
color: var(--text-secondary, #666);
}
.e-explorer-stake-lifecycle-indicator {
display: inline-block;
padding: 0.15em 0.65em;
border-radius: var(--radius-sm, 3px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.e-explorer-stake-lifecycle-indicator--staked {
background: var(--color-info-bg, #dbeafe);
color: var(--color-info, #1d4ed8);
}
.e-explorer-stake-lifecycle-indicator--active {
background: var(--color-success-bg, #d1fae5);
color: var(--color-success, #065f46);
}
.e-explorer-stake-lifecycle-indicator--redeemable {
background: var(--color-warning-bg, #fef3c7);
color: var(--color-warning, #b45309);
}
.e-explorer-stake-lifecycle-indicator--redeemed {
background: var(--surface-2, #f5f5f5);
color: var(--text-secondary, #666);
}
.e-explorer-stake-lifecycle-indicator--restaked {
background: var(--color-accent-bg, #eff6ff);
color: var(--color-accent, #1d4ed8);
}
.e-explorer-stake-lifecycle-indicator--unknown {
background: var(--surface-2, #f5f5f5);
color: var(--text-muted, #999);
}
.e-explorer-stake-card {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-stake-card-header {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-stake-card-chain {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
margin-left: auto;
}
.e-explorer-stake-card-amount {
font-size: var(--font-size-xl, 1.25rem);
font-weight: var(--font-weight-bold, 700);
color: var(--text-primary, inherit);
}
.e-explorer-stake-card-amount-unit {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-secondary, #666);
margin-left: 0.25em;
}
.e-explorer-stake-card-row {
display: flex;
gap: var(--space-sm, 0.5rem);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-stake-card-label {
color: var(--text-secondary, #666);
min-width: 5rem;
flex-shrink: 0;
}
.e-explorer-stake-card-weight {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
}
.e-explorer-stake-card-lineage {
display: flex;
align-items: center;
gap: var(--space-xs, 0.25rem);
font-size: var(--font-size-xs, 0.75rem);
padding-top: var(--space-xs, 0.25rem);
border-top: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-stake-card-lineage-link {
font-family: var(--font-mono, monospace);
color: var(--color-link, #2563eb);
}
.e-explorer-stake-card-lineage-status {
color: var(--text-muted, #999);
}
.e-explorer-stake-card-staker {
padding-top: var(--space-xs, 0.25rem);
border-top: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-stake-card-loading,
.e-explorer-stake-card-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-stake-portfolio {
display: flex;
flex-direction: column;
gap: var(--space-md, 1rem);
width: 100%;
}
.e-explorer-stake-portfolio-header {
padding-bottom: var(--space-sm, 0.5rem);
border-bottom: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-stake-portfolio-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-stake-portfolio-th {
text-align: left;
padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
border-bottom: 2px solid var(--border-default, #ccc);
color: var(--text-secondary, #666);
font-weight: var(--font-weight-medium, 500);
}
.e-explorer-stake-portfolio-row td {
padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
border-bottom: 1px solid var(--border-subtle, #e0e0e0);
vertical-align: middle;
}
.e-explorer-stake-portfolio-row--historical td {
color: var(--text-secondary, #666);
}
.e-explorer-stake-portfolio-total td {
padding: var(--space-sm, 0.5rem);
border-top: 2px solid var(--border-default, #ccc);
background: var(--surface-2, #f9f9f9);
}
.e-explorer-stake-portfolio-weight {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
}
.e-explorer-stake-portfolio-note {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #999);
padding: var(--space-xs, 0.25rem);
border-left: 2px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-stake-portfolio-history {
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-stake-portfolio-history-toggle {
cursor: pointer;
color: var(--color-link, #2563eb);
list-style: none;
}
.e-explorer-stake-portfolio-loading,
.e-explorer-stake-portfolio-empty {
color: var(--text-secondary, #666);
}
.e-explorer-vote-tally-bar {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
width: 100%;
}
.e-explorer-vote-tally-bar-track {
display: flex;
height: 0.75rem;
border-radius: var(--radius-sm, 3px);
overflow: hidden;
background: var(--surface-2, #f5f5f5);
}
.e-explorer-vote-tally-bar-segment {
height: 100%;
transition: width 0.3s ease;
}
.e-explorer-vote-tally-bar-segment--yes {
background: var(--color-success, #10b981);
}
.e-explorer-vote-tally-bar-segment--no {
background: var(--color-error, #ef4444);
}
.e-explorer-vote-tally-bar-segment--abstain {
background: var(--color-muted, #d1d5db);
}
.e-explorer-vote-tally-bar-legend {
display: flex;
gap: var(--space-md, 1rem);
flex-wrap: wrap;
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-vote-tally-bar-legend-item {
display: flex;
align-items: center;
gap: 0.25em;
}
.e-explorer-vote-tally-bar-legend-item--yes {
color: var(--color-success, #065f46);
}
.e-explorer-vote-tally-bar-legend-item--no {
color: var(--color-error, #b91c1c);
}
.e-explorer-vote-tally-bar-legend-item--abstain {
color: var(--text-secondary, #666);
}
.e-explorer-vote-tally-bar-final {
margin-left: auto;
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, inherit);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.e-explorer-vote-tally-bar-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-vote-ballot-card {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-vote-ballot-card-header {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-vote-ballot-card-choice {
padding: 0.2em 0.75em;
border-radius: var(--radius-sm, 3px);
font-weight: var(--font-weight-semibold, 600);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-vote-ballot-card-choice--yes {
background: var(--color-success-bg, #d1fae5);
color: var(--color-success, #065f46);
}
.e-explorer-vote-ballot-card-choice--no {
background: var(--color-error-bg, #fee2e2);
color: var(--color-error, #b91c1c);
}
.e-explorer-vote-ballot-card-choice--abstain {
background: var(--surface-2, #f5f5f5);
color: var(--text-secondary, #666);
}
.e-explorer-vote-ballot-card-status {
font-size: var(--font-size-xs, 0.75rem);
padding: 0.1em 0.5em;
border-radius: var(--radius-sm, 3px);
}
.e-explorer-vote-ballot-card-status--valid {
background: var(--color-success-bg, #d1fae5);
color: var(--color-success, #065f46);
}
.e-explorer-vote-ballot-card-status--superseded {
background: var(--surface-2, #f5f5f5);
color: var(--text-muted, #999);
}
.e-explorer-vote-ballot-card-row {
display: flex;
gap: var(--space-sm, 0.5rem);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-vote-ballot-card-label {
color: var(--text-secondary, #666);
min-width: 5rem;
flex-shrink: 0;
}
.e-explorer-vote-ballot-card-proposal-link {
font-family: var(--font-mono, monospace);
color: var(--color-link, #2563eb);
}
.e-explorer-vote-ballot-card-weight {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
}
.e-explorer-vote-ballot-card-superseded {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #999);
padding: var(--space-xs, 0.25rem);
border-left: 2px solid var(--color-warning, #f59e0b);
margin-top: var(--space-xs, 0.25rem);
}
/* vote-window-indicator */
.e-explorer-vote-window-indicator {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-vote-window-indicator-label {
color: var(--text-secondary, #666);
}
.e-explorer-vote-window-indicator-status--valid {
color: var(--color-success, #065f46);
}
.e-explorer-vote-window-indicator-status--late-rejected {
color: var(--color-error, #b91c1c);
}
.e-explorer-vote-window-indicator-close {
color: var(--text-muted, #999);
margin-left: auto;
}
.e-explorer-vote-ballot-card-loading,
.e-explorer-vote-ballot-card-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-proposal-summary {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-proposal-summary-header {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-proposal-summary-cid {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-proposal-summary-badge {
padding: 0.1em 0.5em;
border-radius: var(--radius-sm, 3px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
}
.e-explorer-proposal-summary-badge--live {
background: var(--color-success-bg, #d1fae5);
color: var(--color-success, #065f46);
}
.e-explorer-proposal-summary-badge--final {
background: var(--surface-2, #f5f5f5);
color: var(--text-secondary, #666);
}
.e-explorer-proposal-summary-title {
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, inherit);
}
.e-explorer-proposal-summary-description {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-secondary, #666);
line-height: 1.5;
}
.e-explorer-proposal-summary-empty {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm, 0.5rem);
align-items: center;
}
.e-explorer-proposal-summary-unresolved {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #999);
}
.e-explorer-proposal-summary-loading {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-proposal-tally-panel {
display: flex;
flex-direction: column;
gap: var(--space-md, 1rem);
width: 100%;
}
.e-explorer-proposal-tally-panel-status {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-proposal-tally-panel-finalized {
font-weight: var(--font-weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-proposal-tally-panel-live {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-proposal-tally-panel-ballot-count {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
margin-left: auto;
}
.e-explorer-proposal-tally-panel-breakdown {
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-proposal-tally-panel-breakdown-toggle {
cursor: pointer;
color: var(--color-link, #2563eb);
list-style: none;
}
.e-explorer-proposal-tally-panel-breakdown-list {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
margin-top: var(--space-sm, 0.5rem);
}
.e-explorer-proposal-tally-panel-ballot-row {
display: flex;
gap: var(--space-sm, 0.5rem);
align-items: center;
padding: var(--space-xs, 0.25rem) 0;
border-bottom: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-proposal-tally-panel-ballot-row--superseded {
opacity: 0.55;
text-decoration: line-through;
}
.e-explorer-proposal-tally-panel-ballot-choice {
padding: 0.1em 0.4em;
border-radius: var(--radius-sm, 3px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
}
.e-explorer-proposal-tally-panel-ballot-choice--yes { background: var(--color-success-bg, #d1fae5); color: var(--color-success, #065f46); }
.e-explorer-proposal-tally-panel-ballot-choice--no { background: var(--color-error-bg, #fee2e2); color: var(--color-error, #b91c1c); }
.e-explorer-proposal-tally-panel-ballot-choice--abstain { background: var(--surface-2, #f5f5f5); color: var(--text-secondary, #666); }
.e-explorer-proposal-tally-panel-ballot-address {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-proposal-tally-panel-ballot-weight {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
}
.e-explorer-proposal-tally-panel-ballot-block {
margin-left: auto;
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-muted, #999);
}
.e-explorer-proposal-tally-panel-superseded {
margin-top: var(--space-sm, 0.5rem);
font-size: var(--font-size-xs, 0.75rem);
}
.e-explorer-proposal-tally-panel-loading,
.e-explorer-proposal-tally-panel-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-alliance-card {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-alliance-card-header {
display: flex;
align-items: baseline;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-alliance-card-id {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-alliance-card-name {
font-weight: var(--font-weight-semibold, 600);
color: var(--text-primary, inherit);
}
.e-explorer-alliance-card-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-md, 1rem);
}
.e-explorer-alliance-card-stat {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
}
.e-explorer-alliance-card-stat-label {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-alliance-card-stat-value {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
color: var(--text-primary, inherit);
}
.e-explorer-alliance-card-weight {
color: var(--color-success, #065f46);
}
.e-explorer-alliance-card-footer {
padding-top: var(--space-xs, 0.25rem);
border-top: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-alliance-card-link {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-link, #2563eb);
}
.e-explorer-alliance-card-loading,
.e-explorer-alliance-card-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-alliance-two-panel {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
overflow: hidden;
}
.e-explorer-alliance-two-panel-sovereign {
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
}
.e-explorer-alliance-two-panel-advisory {
padding: var(--space-md, 1rem);
background: var(--surface-2, #f9f9f9);
}
.e-explorer-alliance-two-panel-divider {
height: 3px;
background: var(--border-default, #ccc);
}
.e-explorer-alliance-two-panel-section-header {
margin-bottom: var(--space-sm, 0.5rem);
}
.e-explorer-alliance-two-panel-section-label {
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.15em 0.6em;
border-radius: var(--radius-sm, 3px);
}
.e-explorer-alliance-two-panel-section-label--authoritative {
background: var(--color-success-bg, #d1fae5);
color: var(--color-success, #065f46);
}
.e-explorer-alliance-two-panel-section-label--advisory {
background: var(--color-warning-bg, #fef3c7);
color: var(--color-warning, #b45309);
}
.e-explorer-alliance-two-panel-pool-row {
display: flex;
gap: var(--space-lg, 1.5rem);
flex-wrap: wrap;
}
.e-explorer-alliance-two-panel-pool-stat {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
}
.e-explorer-alliance-two-panel-pool-label {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
}
.e-explorer-alliance-two-panel-pool-value {
font-size: var(--font-size-sm, 0.875rem);
font-weight: var(--font-weight-medium, 500);
}
.e-explorer-alliance-two-panel-pool-weight {
font-size: var(--font-size-xs, 0.75rem);
color: var(--color-success, #065f46);
}
.e-explorer-alliance-two-panel-tally-list {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.25rem);
}
.e-explorer-alliance-two-panel-tally-row {
display: flex;
gap: var(--space-md, 1rem);
font-size: var(--font-size-sm, 0.875rem);
align-items: center;
}
.e-explorer-alliance-two-panel-tally-kingdom {
font-family: var(--font-mono, monospace);
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
min-width: 8rem;
}
.e-explorer-alliance-two-panel-tally-yes { color: var(--color-success, #065f46); }
.e-explorer-alliance-two-panel-tally-no { color: var(--color-error, #b91c1c); }
.e-explorer-alliance-two-panel-tally-abstain { color: var(--text-secondary, #666); }
.e-explorer-alliance-two-panel-not-connected {
font-size: var(--font-size-sm, 0.875rem);
color: var(--text-muted, #999);
font-style: italic;
}
.e-explorer-alliance-two-panel-empty-section,
.e-explorer-alliance-two-panel-loading,
.e-explorer-alliance-two-panel-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
padding: var(--space-md, 1rem);
}
.e-explorer-membership-card {
display: flex;
flex-direction: column;
gap: var(--space-sm, 0.5rem);
padding: var(--space-md, 1rem);
background: var(--surface-1, #fff);
border: 1px solid var(--border-subtle, #e0e0e0);
border-radius: var(--radius-md, 6px);
width: 100%;
box-sizing: border-box;
}
.e-explorer-membership-card-header {
display: flex;
align-items: center;
gap: var(--space-sm, 0.5rem);
}
.e-explorer-membership-card-status {
padding: 0.15em 0.65em;
border-radius: var(--radius-sm, 3px);
font-size: var(--font-size-xs, 0.75rem);
font-weight: var(--font-weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.e-explorer-membership-card-status--active { background: var(--color-success-bg, #d1fae5); color: var(--color-success, #065f46); }
.e-explorer-membership-card-status--expiring { background: var(--color-warning-bg, #fef3c7); color: var(--color-warning, #b45309); }
.e-explorer-membership-card-status--expired { background: var(--surface-2, #f5f5f5); color: var(--text-secondary, #666); }
.e-explorer-membership-card-status--unknown { background: var(--surface-2, #f5f5f5); color: var(--text-muted, #999); }
.e-explorer-membership-card-stake-ref {
font-size: var(--font-size-xs, 0.75rem);
color: var(--text-secondary, #666);
margin-left: auto;
}
.e-explorer-membership-card-link {
font-family: var(--font-mono, monospace);
color: var(--color-link, #2563eb);
}
.e-explorer-membership-card-row {
display: flex;
gap: var(--space-sm, 0.5rem);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-membership-card-label {
color: var(--text-secondary, #666);
min-width: 6rem;
flex-shrink: 0;
}
.e-explorer-membership-card-weight {
font-weight: var(--font-weight-semibold, 600);
color: var(--color-success, #065f46);
}
.e-explorer-membership-card-staker {
padding-top: var(--space-xs, 0.25rem);
border-top: 1px solid var(--border-subtle, #e0e0e0);
}
.e-explorer-membership-card-loading,
.e-explorer-membership-card-empty {
color: var(--text-secondary, #666);
font-size: var(--font-size-sm, 0.875rem);
}
.e-explorer-alliance-member-list { display: flex; flex-direction: column; gap: var(--space-xs, 0.25rem); width: 100%; }
.e-explorer-alliance-member-list-item { display: flex; gap: var(--space-sm, 0.5rem); align-items: center; padding: var(--space-xs, 0.25rem) 0; border-bottom: 1px solid var(--border-subtle, #e0e0e0); font-size: var(--font-size-sm, 0.875rem); }
.e-explorer-alliance-member-list-since { color: var(--text-muted, #999); font-size: var(--font-size-xs, 0.75rem); margin-left: auto; }
.e-explorer-alliance-member-list-active { color: var(--color-success, #065f46); font-size: var(--font-size-xs, 0.75rem); }
.e-explorer-alliance-member-list-inactive { color: var(--text-muted, #999); font-size: var(--font-size-xs, 0.75rem); }
.e-explorer-alliance-member-list-loading, .e-explorer-alliance-member-list-empty { color: var(--text-secondary, #666); font-size: var(--font-size-sm, 0.875rem); }
.e-explorer-predicate-tree { font-size: var(--font-size-sm, 0.875rem); width: 100%; }
.e-explorer-predicate-tree-root-result { font-size: var(--font-size-md, 1rem); font-weight: var(--font-weight-semibold, 600); margin-bottom: var(--space-sm, 0.5rem); }
.e-explorer-predicate-tree-result--pass { color: var(--color-success, #065f46); }
.e-explorer-predicate-tree-result--fail { color: var(--color-error, #b91c1c); }
.e-explorer-predicate-tree-node { display: flex; flex-wrap: wrap; gap: var(--space-xs, 0.25rem); align-items: baseline; padding: var(--space-xs, 0.25rem) 0; }
.e-explorer-predicate-tree-node--depth-1 { padding-left: 1.5rem; }
.e-explorer-predicate-tree-node--depth-2 { padding-left: 3rem; }
.e-explorer-predicate-tree-node-icon { font-weight: bold; width: 1rem; flex-shrink: 0; }
.e-explorer-predicate-tree-node-icon--pass { color: var(--color-success, #065f46); }
.e-explorer-predicate-tree-node-icon--fail { color: var(--color-error, #b91c1c); }
.e-explorer-predicate-tree-node-type { font-weight: var(--font-weight-medium, 500); font-family: var(--font-mono, monospace); }
.e-explorer-predicate-tree-node-reason { color: var(--text-secondary, #666); font-size: var(--font-size-xs, 0.75rem); }
.e-explorer-predicate-tree-children { width: 100%; }
.e-explorer-predicate-tree-empty { color: var(--text-secondary, #666); }
.e-explorer-chain-block-tail { display: flex; gap: var(--space-sm, 0.5rem); align-items: center; font-size: var(--font-size-sm, 0.875rem); }
.e-explorer-chain-block-tail-height { font-weight: var(--font-weight-semibold, 600); font-family: var(--font-mono, monospace); }
.e-explorer-chain-block-tail-stakes, .e-explorer-chain-block-tail-ballots { color: var(--text-secondary, #666); font-size: var(--font-size-xs, 0.75rem); }
.e-explorer-address-search { display: flex; gap: var(--space-sm, 0.5rem); width: 100%; }
.e-explorer-address-search-input { flex: 1; padding: var(--space-sm, 0.5rem); border: 1px solid var(--border-default, #ccc); border-radius: var(--radius-sm, 3px); font-family: var(--font-mono, monospace); font-size: var(--font-size-sm, 0.875rem); background: var(--surface-1, #fff); color: var(--text-primary, inherit); }
.e-explorer-address-search-btn { padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); border: 1px solid var(--border-default, #ccc); border-radius: var(--radius-sm, 3px); cursor: pointer; background: var(--surface-2, #f5f5f5); color: var(--text-primary, inherit); font-size: var(--font-size-sm, 0.875rem); }
.e-explorer-kingdom-overview-panel { display: flex; flex-direction: column; gap: var(--space-sm, 0.5rem); padding: var(--space-md, 1rem); background: var(--surface-1, #fff); border: 1px solid var(--border-subtle, #e0e0e0); border-radius: var(--radius-md, 6px); width: 100%; box-sizing: border-box; }
.e-explorer-kingdom-overview-panel-header { display: flex; align-items: center; gap: var(--space-sm, 0.5rem); }
.e-explorer-kingdom-overview-panel-name { font-weight: var(--font-weight-semibold, 600); }
.e-explorer-kingdom-overview-panel-surface { font-size: var(--font-size-xs, 0.75rem); color: var(--text-muted, #999); margin-left: auto; }
.e-explorer-kingdom-overview-panel-pool { display: flex; gap: var(--space-md, 1rem); font-size: var(--font-size-sm, 0.875rem); align-items: center; }
.e-explorer-kingdom-overview-panel-chain { font-weight: var(--font-weight-medium, 500); min-width: 3rem; }
.e-explorer-kingdom-overview-panel-weight { color: var(--color-success, #065f46); font-weight: var(--font-weight-semibold, 600); }
.e-explorer-kingdom-overview-panel-empty { color: var(--text-secondary, #666); }
.e-explorer-alliance-pool-view-panel { display: flex; flex-direction: column; gap: var(--space-sm, 0.5rem); padding: var(--space-md, 1rem); background: var(--surface-1, #fff); border: 1px solid var(--border-subtle, #e0e0e0); border-radius: var(--radius-md, 6px); width: 100%; box-sizing: border-box; }
.e-explorer-alliance-pool-view-panel-header { font-weight: var(--font-weight-semibold, 600); }
.e-explorer-alliance-pool-view-panel-chain-row { display: flex; gap: var(--space-md, 1rem); font-size: var(--font-size-sm, 0.875rem); align-items: center; }
.e-explorer-alliance-pool-view-panel-chain { font-weight: var(--font-weight-medium, 500); min-width: 3rem; }
.e-explorer-alliance-pool-view-panel-weight { color: var(--color-success, #065f46); }
.e-explorer-alliance-pool-view-panel-kingdoms { color: var(--text-secondary, #666); margin-left: auto; font-size: var(--font-size-xs, 0.75rem); }
.e-explorer-alliance-pool-view-panel-loading, .e-explorer-alliance-pool-view-panel-empty { color: var(--text-secondary, #666); }
.e-explorer-stake-restaking-lineage { display: flex; align-items: center; gap: var(--space-xs, 0.25rem); font-size: var(--font-size-sm, 0.875rem); flex-wrap: wrap; }
.e-explorer-stake-restaking-lineage-node { font-family: var(--font-mono, monospace); }
.e-explorer-stake-restaking-lineage-node--parent, .e-explorer-stake-restaking-lineage-node--child { color: var(--color-link, #2563eb); }
.e-explorer-stake-restaking-lineage-node--current { font-weight: var(--font-weight-semibold, 600); color: var(--text-primary, inherit); }
.e-explorer-stake-restaking-lineage-arrow { color: var(--text-muted, #999); }
.e-explorer-mode-switcher { display: inline-flex; gap: 0; border: 1px solid var(--border-default, #ccc); border-radius: var(--radius-sm, 3px); overflow: hidden; }
.e-explorer-mode-switcher-btn { padding: var(--space-xs, 0.25rem) var(--space-md, 1rem); border: none; background: var(--surface-1, #fff); color: var(--text-secondary, #666); cursor: pointer; font-size: var(--font-size-sm, 0.875rem); }
.e-explorer-mode-switcher-btn + .e-explorer-mode-switcher-btn { border-left: 1px solid var(--border-default, #ccc); }
.e-explorer-mode-switcher-btn--active { background: var(--color-accent-bg, #eff6ff); color: var(--color-accent, #1d4ed8); font-weight: var(--font-weight-medium, 500); }
.access-card {
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--bg-raised, #171717);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 8px;
padding: 20px;
margin: 12px 0;
}
.access-card-icon {
font-size: 20px;
color: var(--accent-dim, #9B7D35);
flex-shrink: 0;
margin-top: 2px;
line-height: 1;
}
.access-card-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Phase 1b: community byline — Muse visual vocabulary */
.access-card-community {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--slate, #4A5568);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 12px;
}
/* access-card-title replaces access-card-message — Muse R2 vocabulary */
.access-card-title {
font-family: var(--font-body, 'Inter'), sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--text, #E8E6E1);
margin: 0 0 8px;
}
/* legacy alias — kept for any template still referencing access-card-message */
.access-card-message {
font-size: 13px;
color: var(--text-dim, #A09E9A);
line-height: 1.5;
margin: 0;
}
.access-card-remediation {
font-family: var(--font-body, 'Inter'), sans-serif;
font-size: 14px;
color: var(--slate-light, #718096);
margin: 0 0 16px;
}
.access-card-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.access-card-cta {
font-size: 12px;
font-weight: 600;
color: var(--accent, #C9A84C);
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s;
}
.access-card-cta:hover {
color: var(--text, #E8E6E1);
}
.access-card-cta--secondary {
color: var(--text-dim, #A09E9A);
font-weight: 400;
}
.access-card-cta--secondary:hover {
color: var(--text, #E8E6E1);
}
/* scorecard trigger wrapper inside the card */
.access-card-scorecard {
font-size: 11px;
color: var(--slate, #4A5568);
font-family: var(--font-mono, monospace);
display: flex;
gap: 6px;
align-items: center;
margin-top: 2px;
}
.scorecard-label {
color: var(--slate, #4A5568);
}
.scorecard-tier {
color: var(--text-dim, #A09E9A);
text-transform: lowercase;
}
.scorecard-toggle {
display: flex;
align-items: center;
gap: 8px;
background: transparent;
border: none;
color: var(--slate-light);
font-family: var(--font-body, 'Inter'), sans-serif;
font-size: 13px;
padding: 8px 0;
cursor: pointer;
transition: color 0.15s;
}
.scorecard-toggle:hover { color: var(--text); }
.scorecard-toggle-chevron {
font-size: 11px;
color: var(--slate);
}
.scorecard-inline {
margin-top: 12px;
padding-top: 16px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 16px;
}
.scorecard-header {
display: flex;
align-items: center;
}
.scorecard-community {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.scorecard-section-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.scorecard-leaves {
display: flex;
flex-direction: column;
gap: 6px;
}
.scorecard-leaf-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.scorecard-leaf-row:last-child { border-bottom: none; }
.scorecard-leaf-type {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
}
.scorecard-leaf-state {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.scorecard-leaf-row.not-held .scorecard-leaf-state { color: var(--slate); }
.scorecard-leaf-row.undisclosed .scorecard-leaf-state { color: var(--accent-dim, var(--slate-light)); }
.scorecard-leaf-row.visible .scorecard-leaf-state { color: var(--entity-accent, var(--accent)); }
.proximity-bar-wrap {
display: flex;
flex-direction: column;
gap: 6px;
}
.proximity-bar {
width: 100%;
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
}
.proximity-bar-fill {
height: 100%;
background: var(--entity-accent, var(--accent));
transition: width 0.3s ease;
}
.proximity-bar-caption {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate-light);
}
.scorecard-me-link {
font-family: var(--font-mono);
font-size: 12px;
color: var(--entity-accent, var(--accent));
text-decoration: none;
align-self: flex-start;
}
.scorecard-me-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.activity-shell {
max-width: 900px;
margin: 0 auto;
padding: 1.5rem 1rem;
}
.activity-view-header {
margin-bottom: 1.5rem;
}
.activity-view-title {
margin: 0 0 0.25rem;
}
.activity-view-note {
margin: 0 0 0.25rem;
opacity: 0.7;
}
.activity-view-count {
font-size: 0.8em;
opacity: 0.5;
}
.activity-session-stream {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.activity-session-row {
border: 1px solid rgba(255,255,255,0.08);
border-radius: 4px;
padding: 0.6rem 0.8rem;
background: rgba(255,255,255,0.03);
}
.activity-session-head {
display: flex;
gap: 0.75rem;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.activity-session-entity {
font-weight: 600;
color: var(--entity-accent, var(--accent, inherit));
text-decoration: none;
}
.activity-session-type {
font-family: monospace;
font-size: 0.8em;
opacity: 0.8;
background: rgba(255,255,255,0.06);
padding: 0 0.3em;
border-radius: 3px;
}
.activity-session-time {
margin-left: auto;
font-size: 0.78em;
opacity: 0.5;
}
.activity-session-body {
font-size: 0.9em;
word-break: break-word;
}
.activity-session-meta {
margin-top: 0.25rem;
font-size: 0.78em;
opacity: 0.6;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.activity-session-link {
color: inherit;
font-family: monospace;
}
.activity-session-metafields {
margin-top: 0.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.activity-session-metafield {
font-size: 0.75em;
font-family: monospace;
opacity: 0.55;
background: rgba(255,255,255,0.04);
padding: 0.1em 0.4em;
border-radius: 3px;
}
.activity-session-metafield-key {
opacity: 0.7;
}
.activity-empty {
padding: 2rem 0;
opacity: 0.6;
}
.activity-empty code {
font-family: monospace;
background: rgba(255,255,255,0.06);
padding: 0.1em 0.4em;
border-radius: 3px;
}
.benchmarks-aggregate-main {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1.5rem;
color: var(--text, #e0e0e0);
}
.benchmarks-aggregate-inner { width: 100%; }
.benchmarks-aggregate-header { margin-bottom: 1.5rem; }
.benchmarks-aggregate-header-meta {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--slate-light, #888);
margin-bottom: 0.3rem;
}
.benchmarks-aggregate-title {
font-size: 2rem;
font-weight: 700;
margin: 0.2rem 0;
}
.benchmarks-aggregate-subtitle {
color: var(--text-dim, #c0c0c0);
font-size: 0.95rem;
margin: 0;
}
.benchmarks-aggregate-table-wrap {
overflow-x: auto;
border-radius: 0.4rem;
}
.benchmarks-aggregate-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.benchmarks-aggregate-th,
.benchmarks-aggregate-td {
padding: 0.6rem 0.7rem;
text-align: left;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.benchmarks-aggregate-th {
color: var(--slate-light, #888);
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--bg-surface, rgba(255,255,255,0.02));
}
.benchmarks-aggregate-th--num { text-align: right; }
.benchmarks-aggregate-th--dist { text-align: left; min-width: 8rem; }
.benchmarks-aggregate-row:hover {
background: var(--bg-surface, rgba(255,255,255,0.03));
}
.benchmarks-aggregate-td--rank {
color: var(--slate-light, #888);
font-family: var(--font-mono);
width: 2.5rem;
}
.benchmarks-aggregate-td--provider {
color: var(--text-dim, #c0c0c0);
font-family: var(--font-mono);
font-size: 0.85rem;
}
.benchmarks-aggregate-td--model {
font-weight: 500;
}
.benchmarks-aggregate-model-link {
color: var(--text, #e0e0e0);
text-decoration: none;
border-bottom: 1px dashed var(--border, rgba(255,255,255,0.15));
}
.benchmarks-aggregate-model-link:hover {
border-bottom-style: solid;
border-bottom-color: var(--accent, #d49a3a);
}
.benchmarks-aggregate-td--num {
text-align: right;
font-family: var(--font-mono);
font-size: 0.88rem;
}
.benchmarks-aggregate-td--cost { color: var(--text-dim, #c0c0c0); }
.benchmarks-aggregate-td--value { font-weight: 600; }
.benchmarks-aggregate-score-num {
display: inline-block;
margin-left: 0.4rem;
color: var(--text-dim, #c0c0c0);
font-size: 0.85rem;
}
/* Distribution bar — one segment per grade, flex-weighted by count */
.benchmarks-aggregate-td--dist { padding: 0.4rem 0.7rem; }
.benchmarks-dist-bar {
display: flex;
height: 1.2rem;
border-radius: 0.2rem;
overflow: hidden;
background: var(--bg-surface, rgba(255,255,255,0.02));
}
.benchmarks-dist {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--bg, #0d0d0d);
font-weight: 600;
min-width: 1rem;
}
.benchmarks-dist--A { background: var(--green, #2c8552); }
.benchmarks-dist--B { background: var(--accent, #d49a3a); }
.benchmarks-dist--C { background: var(--warning, #b8862c); }
.benchmarks-dist--D { background: var(--danger, #b8503c); }
.benchmarks-dist--F { background: var(--danger, #b8503c); opacity: 0.6; }
.benchmarks-aggregate-legend {
margin-top: 1.5rem;
padding: 0.8rem 1rem;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 0.4rem;
background: var(--bg-surface, rgba(255,255,255,0.02));
font-size: 0.85rem;
color: var(--text-dim, #c0c0c0);
}
.benchmarks-aggregate-legend-line { margin: 0.2rem 0; }
.benchmarks-aggregate-legend code {
background: var(--bg-dark, var(--bg, transparent));
padding: 0.05rem 0.3rem;
border-radius: 0.2rem;
font-family: var(--font-mono);
}
/* Mobile — stack rank/provider/model in left column, metrics flow right */
@media (max-width: 720px) {
.benchmarks-aggregate-table { font-size: 0.82rem; }
.benchmarks-aggregate-th,
.benchmarks-aggregate-td { padding: 0.4rem 0.45rem; }
.benchmarks-aggregate-th--dist,
.benchmarks-aggregate-td--dist { display: none; }
}
/* ── Hidden models note ───────────────────────────────────────────────── */
.benchmarks-aggregate-hidden-note {
margin: 0.75rem 0 0.5rem;
padding: 0.6rem 0.8rem;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-left: 3px solid var(--slate-light, #888);
border-radius: 0 0.3rem 0.3rem 0;
background: var(--bg-surface, rgba(255,255,255,0.02));
font-size: 0.85rem;
color: var(--text-dim, #c0c0c0);
line-height: 1.5;
}
.benchmarks-aggregate-hidden-note strong { color: var(--text, #e0e0e0); }
.benchmarks-main {
padding-top: var(--nav-height, 60px);
}
.benchmarks-inner {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* Loading / error / empty */
.benchmarks-loading,
.benchmarks-error,
.benchmarks-empty {
padding: 3rem 0;
color: var(--text-dim);
}
/* Header */
.benchmarks-header {
margin-bottom: 2rem;
}
.benchmarks-header-meta {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.5rem;
font-size: 0.85rem;
color: var(--text-dim);
}
.benchmarks-entity-link {
text-decoration: none;
color: var(--text-dim);
}
.benchmarks-entity-link:hover {
color: var(--text);
}
.benchmarks-header-sep {
color: var(--slate);
}
.benchmarks-header-label {
font-weight: 500;
color: var(--text-dim);
}
.benchmarks-title {
font-size: 1.75rem;
margin: 0;
}
/* Task tabs */
.benchmarks-tasks {
margin-bottom: 1.75rem;
}
.benchmarks-task-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.benchmarks-task-tab {
padding: 0.3em 0.8em;
border: 1px solid var(--border);
background: transparent;
color: var(--text-dim);
font: inherit;
font-size: 0.875rem;
border-radius: 3px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.benchmarks-task-tab:hover {
color: var(--text);
border-color: var(--slate-light);
}
.benchmarks-task-tab--active {
color: var(--text);
border-color: var(--accent);
font-weight: 600;
}
/* Task view */
.benchmarks-task-header {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 1rem;
}
.benchmarks-task-name {
font-size: 1.1rem;
margin: 0;
font-weight: 600;
text-transform: lowercase;
letter-spacing: 0.01em;
}
.benchmarks-task-loading {
font-size: 0.8rem;
color: var(--text-dim);
}
.benchmarks-task-error {
color: var(--text-dim);
padding: 1rem 0;
}
/* Prompt block */
.benchmarks-prompt {
margin-bottom: 1.5rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.benchmarks-prompt-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
padding-top: 0.15em;
min-width: 48px;
flex-shrink: 0;
}
.benchmarks-prompt-text {
margin: 0;
font-size: 0.9rem;
font-style: italic;
color: var(--text-dim);
line-height: 1.5;
border-left: none;
padding: 0;
}
/* Table wrapper */
.benchmarks-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.benchmarks-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.benchmarks-thead-row {
border-bottom: 2px solid var(--border);
}
.benchmarks-th {
text-align: left;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
white-space: nowrap;
}
.benchmarks-th--time { width: 5.5rem; }
.benchmarks-th--status { width: 4rem; text-align: center; }
.benchmarks-th--harness { width: 6rem; }
/* Data rows */
.benchmarks-row {
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.1s;
}
.benchmarks-row:hover,
.benchmarks-row:focus-visible {
background: var(--bg-surface);
outline: none;
}
.benchmarks-row:focus-visible {
box-shadow: inset 2px 0 0 var(--accent);
}
.benchmarks-td {
padding: 0.55rem 0.75rem;
vertical-align: top;
line-height: 1.4;
}
/* Provider — metadata weight, visually recedes */
.benchmarks-td--provider {
color: var(--text-dim);
white-space: nowrap;
font-size: 0.78rem;
font-family: var(--font-mono);
letter-spacing: 0.01em;
}
/* Model — anchor of the row */
.benchmarks-td--model {
font-weight: 500;
word-break: break-word;
}
/* Harness — secondary metadata */
.benchmarks-td--harness {
color: var(--slate-light);
white-space: nowrap;
font-size: 0.8rem;
font-family: var(--font-mono);
}
/* Time */
.benchmarks-td--time {
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 0.82rem;
}
/* Response preview */
.benchmarks-td--response {
max-width: 340px;
font-size: 0.85rem;
}
/* Status cell — centered glyph */
.benchmarks-td--status {
text-align: center;
}
/* Status glyph */
.benchmarks-status {
display: inline-block;
font-size: 1rem;
line-height: 1;
font-weight: 700;
}
.benchmarks-status--success {
color: var(--green);
}
.benchmarks-status--timeout {
color: var(--warning, #ffc107);
}
.benchmarks-status--error {
color: var(--danger, #dc3545);
}
.benchmarks-status--unknown {
color: var(--slate-light);
}
/* Short response — normal vs degraded */
.benchmarks-short-response {
font-style: italic;
color: var(--text-dim);
word-break: break-word;
}
.benchmarks-short-response--degraded {
color: var(--danger, #dc3545);
opacity: 0.8;
}
/* Detail (expanded) row */
.benchmarks-detail-row {
background: var(--bg-surface);
}
.benchmarks-detail-cell {
padding: 0;
}
.benchmarks-detail {
padding: 1rem 0.75rem 1.25rem;
border-bottom: 1px solid var(--border);
}
/* Detail meta — muted timestamp strip */
.benchmarks-detail-meta {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-bottom: 0.75rem;
}
.benchmarks-detail-meta-item {
display: flex;
gap: 0.35rem;
align-items: baseline;
font-size: 0.8rem;
}
.benchmarks-detail-meta-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-light);
}
.benchmarks-detail-meta-value {
color: var(--text-dim);
font-variant-numeric: tabular-nums;
font-family: var(--font-mono);
font-size: 0.78rem;
}
/* Full output block */
.benchmarks-detail-output-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-light);
margin-bottom: 0.4rem;
}
.benchmarks-detail-output {
font-family: var(--font-mono);
font-size: 0.78rem;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-word;
color: var(--text-dim);
background: var(--bg-dark, var(--bg));
margin: 0;
padding: 0.75rem 1rem;
max-height: 420px;
overflow-y: auto;
border-left: 2px solid var(--border-accent, rgba(201,168,76,0.3));
border-radius: 0 2px 2px 0;
}
/* ── Mobile reflow ──────────────────────────────────────────────── */
/* At narrow viewports: table → card stack */
@media (max-width: 640px) {
.benchmarks-table-wrap {
overflow-x: visible;
}
.benchmarks-table,
.benchmarks-table tbody,
.benchmarks-table tr,
.benchmarks-table td {
display: block;
width: 100%;
}
.benchmarks-table thead {
display: none;
}
.benchmarks-row {
border: 1px solid var(--border);
border-radius: 4px;
margin-bottom: 0.5rem;
padding: 0.5rem 0;
}
.benchmarks-td {
padding: 0.25rem 0.75rem;
}
.benchmarks-td--provider {
font-size: 0.72rem;
padding-bottom: 0;
}
.benchmarks-td--model {
font-size: 0.9rem;
padding-top: 0.1rem;
}
.benchmarks-td--harness,
.benchmarks-td--time {
display: inline-block;
width: auto;
padding-right: 1.25rem;
font-size: 0.75rem;
}
.benchmarks-td--status {
display: inline-block;
width: auto;
text-align: left;
padding-left: 0.75rem;
}
.benchmarks-td--response {
max-width: 100%;
font-size: 0.82rem;
}
.benchmarks-detail-row {
border: none;
}
.benchmarks-detail-cell {
padding: 0 0.5rem 0.5rem;
}
}
/* ── Grade pills ───────────────────────────────────────────────────────── */
.benchmarks-th--grade,
.benchmarks-td--grade {
text-align: center;
width: 4rem;
}
.benchmarks-grade {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
height: 1.6rem;
padding: 0 0.4rem;
border-radius: 0.3rem;
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
}
.benchmarks-grade--A { background: var(--green, #2c8552); color: var(--bg, #0d0d0d); }
.benchmarks-grade--B { background: var(--accent, #d49a3a); color: var(--bg, #0d0d0d); }
.benchmarks-grade--C { background: var(--warning, #b8862c); color: var(--bg, #0d0d0d); }
.benchmarks-grade--D { background: var(--danger, #b8503c); color: var(--bg, #0d0d0d); }
.benchmarks-grade--F { background: var(--danger, #b8503c); color: var(--bg, #0d0d0d); opacity: 0.85; }
.benchmarks-grade--none {
color: var(--slate-light, #888);
background: transparent;
font-weight: 400;
}
/* Detail-row grade panel */
.benchmarks-detail-grade {
margin: 0.75rem 0;
padding: 0.6rem;
border: 1px solid var(--border, rgba(255,255,255,0.1));
border-radius: 0.4rem;
background: var(--bg-surface, rgba(255,255,255,0.02));
}
.benchmarks-detail-grade-header {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
.benchmarks-detail-grade-composite {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 0.5rem;
border-radius: 0.3rem;
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.05rem;
}
.benchmarks-detail-grade-summary {
flex: 1;
font-style: italic;
color: var(--text-dim, #c0c0c0);
}
.benchmarks-detail-grade-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.benchmarks-detail-grade-row td {
padding: 0.3rem 0.5rem;
border-top: 1px solid var(--border, rgba(255,255,255,0.05));
vertical-align: top;
}
.benchmarks-detail-grade-cell--criterion { font-family: var(--font-mono); white-space: nowrap; }
.benchmarks-detail-grade-cell--verdict { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.75rem; }
.benchmarks-detail-grade-row--pass .benchmarks-detail-grade-cell--verdict { color: var(--green, #2c8552); }
.benchmarks-detail-grade-row--fail .benchmarks-detail-grade-cell--verdict { color: var(--danger, #b8503c); }
.benchmarks-detail-grade-row--partial .benchmarks-detail-grade-cell--verdict { color: var(--warning, #b8862c); }
.benchmarks-detail-grade-cell--reasoning { color: var(--text-dim, #c0c0c0); }
.benchmarks-detail-grade-attribution {
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--slate-light, #888);
}
.benchmarks-detail-grade-grader {
font-family: var(--font-mono);
background: var(--bg-dark, var(--bg, transparent));
padding: 0.05rem 0.3rem;
border-radius: 0.2rem;
}
/* pre-SPEC-169 badge — subtle indicator on legacy grading records */
.benchmarks-detail-legacy-badge {
display: inline-block;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate-light, #888);
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 0.2rem;
padding: 0.1rem 0.35rem;
vertical-align: middle;
}
/* SPEC-169 aspect breakdown table */
.benchmarks-detail-aspects-table thead tr {
border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
}
.benchmarks-detail-aspect-th {
text-align: left;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-light, #888);
white-space: nowrap;
}
.benchmarks-detail-aspect-th--grade,
.benchmarks-detail-aspect-th--score,
.benchmarks-detail-aspect-th--tests {
text-align: center;
width: 4rem;
}
.benchmarks-detail-aspect-cell--aspect {
font-family: var(--font-mono);
font-size: 0.82rem;
white-space: nowrap;
color: var(--text, #e0e0e0);
}
.benchmarks-detail-aspect-cell--grade {
text-align: center;
white-space: nowrap;
}
.benchmarks-detail-aspect-cell--score,
.benchmarks-detail-aspect-cell--tests {
text-align: center;
font-family: var(--font-mono);
font-size: 0.82rem;
color: var(--text-dim, #c0c0c0);
}
.benchmarks-detail-aspect-cell--note {
color: var(--text-dim, #c0c0c0);
font-style: italic;
font-size: 0.83rem;
}
/* ── Cost column ───────────────────────────────────────────────────────── */
.benchmarks-th--cost,
.benchmarks-td--cost {
text-align: right;
width: 5rem;
font-family: var(--font-mono);
font-size: 0.85rem;
}
.benchmarks-cost {
color: var(--text-dim, #c0c0c0);
}
.benchmarks-cost--none {
color: var(--slate-light, #888);
font-family: inherit;
}
/* ── Detail cost breakdown ─────────────────────────────────────────────── */
.benchmarks-detail-cost {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 0.5rem 0 0.75rem;
padding: 0.5rem 0.7rem;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 0.4rem;
background: var(--bg-surface, rgba(255,255,255,0.02));
font-family: var(--font-mono);
font-size: 0.85rem;
}
.benchmarks-detail-cost-item {
display: flex;
flex-direction: column;
}
.benchmarks-detail-cost-label {
color: var(--slate-light, #888);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.benchmarks-detail-cost-value {
color: var(--text-dim, #c0c0c0);
}
.benchmarks-detail-cost-item--total .benchmarks-detail-cost-value {
color: var(--text, #e0e0e0);
font-weight: 600;
}
/* ── Hidden runs note ─────────────────────────────────────────────────── */
.benchmarks-hidden-note {
margin: 0.75rem 0 0;
padding: 0.6rem 0.8rem;
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-left: 3px solid var(--slate-light, #888);
border-radius: 0 0.3rem 0.3rem 0;
background: var(--bg-surface, rgba(255,255,255,0.02));
font-size: 0.85rem;
color: var(--text-dim, #c0c0c0);
line-height: 1.5;
}
.benchmarks-hidden-note strong { color: var(--text, #e0e0e0); }/* BondsDetailPage — wrapper only; visual lives in brand-components *//* BondsIndexPage — wrapper only; visual lives in brand-components */
.channel-index {
min-height: calc(100vh - 73px);
}
.channel-index-inner {
max-width: var(--max-width, 960px);
margin: 0 auto;
padding: 48px 32px 96px;
}
/* --- Header --- */
.channel-index-header {
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
padding-bottom: 24px;
margin-bottom: 40px;
}
.channel-index-title {
font-size: clamp(24px, 4vw, 36px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text, #E8E6E1);
margin-bottom: 8px;
}
.channel-index-subtitle {
font-size: 14px;
color: var(--text-dim, #A09E9A);
line-height: 1.6;
max-width: 560px;
}
/* --- Channel list --- */
.channel-index-list {
display: flex;
flex-direction: column;
gap: 6px;
}
/* --- Channel row (each is an link) --- */
.channel-index-row {
display: flex;
align-items: center;
gap: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
text-decoration: none;
color: inherit;
transition: background 0.12s, border-color 0.12s;
padding: 0;
}
.channel-index-row:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.12);
}
/* Status indicator: left border stripe keyed to data-status */
.channel-index-row[data-status="open"] {
border-left: 3px solid var(--green, #3EAF6A);
}
.channel-index-row[data-status="closed"] {
border-left: 3px solid var(--slate, #4A5568);
}
/* Default / unknown */
.channel-index-row:not([data-status="open"]):not([data-status="closed"]) {
border-left: 3px solid transparent;
}
/* --- Row inner layout --- */
.channel-index-row-inner {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
padding: 14px 16px;
}
/* --- Slug — primary identifier --- */
.channel-index-slug {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--text, #E8E6E1);
white-space: nowrap;
}
/* --- Topic — secondary label --- */
.channel-index-topic {
font-size: 13px;
color: var(--text-dim, #A09E9A);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
/* --- Meta: turn count + members + status --- */
.channel-index-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate, #4A5568);
margin-left: auto;
white-space: nowrap;
letter-spacing: 0.02em;
}
/* Highlight open status in meta text */
.channel-index-row[data-status="open"] .channel-index-meta {
color: rgba(62,175,106,0.7);
}
/* --- Chevron --- */
.channel-index-chevron {
font-size: 18px;
color: var(--slate, #4A5568);
padding-right: 16px;
flex-shrink: 0;
transition: color 0.12s;
}
.channel-index-row:hover .channel-index-chevron {
color: var(--text-dim, #A09E9A);
}
/* --- Empty state --- */
.channel-index-empty {
font-family: var(--font-mono);
font-size: 13px;
color: var(--slate, #4A5568);
padding: 32px 0;
}
/* --- Responsive --- */
@media (max-width: 640px) {
.channel-index-inner {
padding: 32px 16px 64px;
}
.channel-index-row-inner {
padding: 12px 12px;
}
.channel-index-meta {
margin-left: 0;
width: 100%;
}
.channel-index-topic {
max-width: 200px;
}
}
.channel-topic {
min-height: calc(100vh - 73px);
}
.channel-topic-inner {
max-width: var(--max-width, 960px);
margin: 0 auto;
padding: 48px 32px 96px;
}
/* --- Channel header --- */
.channel-topic-header {
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
padding-bottom: 24px;
margin-bottom: 40px;
}
.channel-topic-back {
display: inline-block;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim, #A09E9A);
text-decoration: none;
margin-bottom: 16px;
letter-spacing: 0.02em;
transition: color 0.12s;
}
.channel-topic-back:hover {
color: var(--text, #E8E6E1);
}
.channel-topic-title {
font-family: var(--font-mono);
font-size: clamp(20px, 3vw, 28px);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text, #E8E6E1);
margin-bottom: 8px;
}
.channel-topic-subtopic {
font-size: 15px;
color: var(--text-dim, #A09E9A);
margin-bottom: 10px;
line-height: 1.5;
}
.channel-topic-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate, #4A5568);
text-transform: lowercase;
letter-spacing: 0.04em;
margin-bottom: 12px;
}
/* --- Presence strip --- */
.channel-topic-presence {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim, #A09E9A);
background: rgba(255,255,255,0.03);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-left: 3px solid rgba(62,175,106,0.6);
padding: 6px 14px;
border-radius: 2px;
margin-top: 4px;
}
.channel-topic-presence strong {
color: var(--green, #3EAF6A);
font-weight: 600;
}
/* --- Presence legend (three-state) --- */
/* Structure only — Muse + koad pair on visual polish.
Semantic class hooks: .channel-presence-in-room, .channel-presence-raised,
.channel-presence-speaking, .channel-presence-absent */
.channel-presence-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.channel-presence-member {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 11px;
padding: 3px 8px;
border-radius: 2px;
border: 1px solid var(--border, rgba(255,255,255,0.07));
}
.channel-presence-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
}
.channel-presence-name {
letter-spacing: 0.02em;
}
/* State: in-room (present, silent) */
.channel-presence-in-room {
color: var(--text-dim, #A09E9A);
}
.channel-presence-in-room .channel-presence-dot {
background: var(--green, #3EAF6A);
opacity: 0.6;
}
/* State: raised hand */
.channel-presence-raised {
color: var(--text, #E8E6E1);
}
.channel-presence-raised .channel-presence-dot {
background: var(--accent, #C9A84C);
}
/* State: speaking (most recent turn author) */
.channel-presence-speaking {
color: var(--text, #E8E6E1);
}
.channel-presence-speaking .channel-presence-dot {
background: var(--green, #3EAF6A);
}
/* State: absent */
.channel-presence-absent {
color: var(--slate, #4A5568);
opacity: 0.5;
}
.channel-presence-absent .channel-presence-dot {
background: var(--slate, #4A5568);
}
/* --- Thread container --- */
.channel-topic-thread {
display: flex;
flex-direction: column;
gap: 0;
/* Scroll container: Muse will refine max-height and overflow per layout */
overflow-y: auto;
scroll-behavior: smooth;
}
/* --- Jump-to-bottom indicator --- */
/* .channel-turns-tail-indicator: wrapper shown when scrolled up + new turns present */
/* .channel-turns-jump: the button inside — Muse styles visual appearance */
.channel-turns-tail-indicator {
position: sticky;
bottom: 24px;
display: flex;
justify-content: center;
pointer-events: none;
z-index: 10;
}
.channel-turns-jump {
pointer-events: auto;
font-family: var(--font-mono);
font-size: 12px;
padding: 6px 18px;
border-radius: 2px;
border: 1px solid var(--border, rgba(255,255,255,0.12));
background: var(--bg-surface, rgba(20,20,20,0.92));
color: var(--text-dim, #A09E9A);
cursor: pointer;
letter-spacing: 0.02em;
}
.channel-turns-jump:hover {
color: var(--text, #E8E6E1);
border-color: rgba(255,255,255,0.2);
}
/* --- Turn articles --- */
.channel-turn {
display: grid;
grid-template-rows: auto 1fr;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
padding: 18px 0;
/* Per-entity accent via CSS custom property set inline or via [data-entity] rules below */
}
.channel-turn:last-child {
border-bottom: none;
}
/* Entity accent: a thin left border drawn via the entity's hue.
The data-entity attribute is already on .channel-turn.
We derive colour with hsl(); saturation and lightness fixed per brand register.
Override per entity below using [data-entity="name"] { --ct-hue: N; } */
.channel-turn {
--ct-hue: 0;
--ct-accent: hsla(var(--ct-hue), 55%, 62%, 0.7);
padding-left: 16px;
border-left: 2px solid transparent;
}
/* Role: system — quietest. Joined/created events. No border, dim everything. */
.channel-turn-system {
border-left-color: transparent;
opacity: 0.5;
}
/* Role: participant — full visibility, entity accent border. */
.channel-turn-participant {
border-left-color: var(--ct-accent);
}
/* Role: operator — koad/juno injections. Amber-tinted. Mid-weight. */
.channel-turn-operator {
border-left-color: var(--accent-dim, #9B7D35);
}
/* --- Per-entity hue assignments (mirrors _ENTITY_HUE in client/logic.js) --- */
[data-entity="koad"] { --ct-hue: 222; }
[data-entity="juno"] { --ct-hue: 270; }
[data-entity="vulcan"] { --ct-hue: 18; }
[data-entity="vesta"] { --ct-hue: 35; }
[data-entity="aegis"] { --ct-hue: 210; }
[data-entity="mercury"] { --ct-hue: 48; }
[data-entity="veritas"] { --ct-hue: 160; }
[data-entity="muse"] { --ct-hue: 290; }
[data-entity="sibyl"] { --ct-hue: 200; }
[data-entity="argus"] { --ct-hue: 180; }
[data-entity="salus"] { --ct-hue: 355; }
[data-entity="janus"] { --ct-hue: 240; }
[data-entity="iris"] { --ct-hue: 315; }
[data-entity="chiron"] { --ct-hue: 150; }
[data-entity="cacula"] { --ct-hue: 30; }
[data-entity="alice"] { --ct-hue: 200; }
[data-entity="rufus"] { --ct-hue: 0; }
[data-entity="faber"] { --ct-hue: 25; }
[data-entity="livy"] { --ct-hue: 45; }
[data-entity="lyra"] { --ct-hue: 260; }
[data-entity="copia"] { --ct-hue: 75; }
[data-entity="rooty"] { --ct-hue: 135; }
/* --- Turn header strip --- */
.channel-turn-header {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.channel-turn-entity {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
color: hsla(var(--ct-hue), 55%, 70%, 1);
letter-spacing: 0.01em;
}
/* system turns: dim the entity label too */
.channel-turn-system .channel-turn-entity {
color: var(--text-dim, #A09E9A);
}
.channel-turn-role {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: lowercase;
padding: 1px 6px;
border-radius: 2px;
}
/* Role badge colours */
.channel-turn-participant .channel-turn-role {
color: hsla(var(--ct-hue), 55%, 70%, 0.9);
background: hsla(var(--ct-hue), 55%, 62%, 0.1);
}
.channel-turn-system .channel-turn-role {
color: var(--slate, #4A5568);
background: rgba(255,255,255,0.04);
}
.channel-turn-operator .channel-turn-role {
color: var(--accent, #C9A84C);
background: rgba(201,168,76,0.1);
}
.channel-turn-id {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate, #4A5568);
letter-spacing: 0.02em;
}
.channel-turn-ts {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate, #4A5568);
margin-left: auto;
white-space: nowrap;
}
/* --- Turn body --- */
.channel-turn-body {
font-size: 14px;
line-height: 1.7;
color: var(--text, #E8E6E1);
}
.channel-turn-system .channel-turn-body {
font-size: 13px;
color: var(--text-dim, #A09E9A);
font-style: italic;
}
.channel-turn-body p {
margin: 0 0 0.75em;
}
.channel-turn-body p:last-child {
margin-bottom: 0;
}
.channel-turn-body strong {
color: var(--text, #E8E6E1);
font-weight: 600;
}
.channel-turn-body em {
color: var(--text-dim, #A09E9A);
}
.channel-turn-body code {
font-family: var(--font-mono);
font-size: 12px;
background: rgba(255,255,255,0.06);
padding: 1px 5px;
border-radius: 2px;
color: var(--text, #E8E6E1);
}
/* --- Empty state --- */
.channel-topic-empty {
font-family: var(--font-mono);
font-size: 13px;
color: var(--slate, #4A5568);
padding: 32px 0;
}
/* --- Responsive --- */
@media (max-width: 640px) {
.channel-topic-inner {
padding: 32px 16px 64px;
}
.channel-turn {
padding-left: 12px;
}
.channel-turn-ts {
margin-left: 0;
width: 100%;
}
}
.conversation-sessions {
margin: 32px 0 0 0;
padding: 24px 0 0 0;
border-top: 1px solid var(--border);
}
.conversation-sessions-heading {
font-size: 15px;
font-weight: 600;
color: var(--text);
margin: 0 0 14px 0;
display: flex;
align-items: center;
gap: 8px;
}
.conversation-sessions-count {
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 10px;
padding: 2px 8px;
}
/* Totals strip */
.conversation-sessions-totals {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin: 0 0 16px 0;
padding: 10px 12px;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 4px;
}
.conversation-sessions-total {
display: flex;
flex-direction: column;
gap: 2px;
}
.conversation-sessions-total-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-dim);
font-weight: 600;
}
.conversation-sessions-total-value {
font-size: 15px;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Session rows */
.conversation-session-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.conversation-session-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 4px;
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
flex-wrap: wrap;
}
.conversation-session-row:hover {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}
.conversation-session-row--active {
border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.conversation-session-row-entity {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 0;
}
.conversation-session-live {
color: var(--accent);
font-size: 9px;
animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.conversation-session-entity-name {
font-size: 13px;
color: var(--text);
font-weight: 500;
}
.conversation-session-host {
font-size: 11px;
color: var(--text-dim);
font-family: monospace;
}
.conversation-session-row-meta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.conversation-session-model {
font-size: 11px;
color: var(--text-dim);
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 3px;
padding: 1px 5px;
font-family: monospace;
}
.conversation-session-duration {
font-size: 12px;
color: var(--text-dim);
font-variant-numeric: tabular-nums;
}
.conversation-session-cost {
font-size: 12px;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.conversation-session-row-time {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
flex-shrink: 0;
}
.conversation-session-cta {
font-size: 11px;
color: var(--accent);
white-space: nowrap;
flex-shrink: 0;
}
.daily-main {
padding-top: var(--nav-height, 60px);
}
.daily-inner {
max-width: 760px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* Loading / error states */
.daily-loading,
.daily-error {
padding: 2rem 0;
opacity: 0.6;
}
/* Sponsor gate */
.daily-gate {
padding: 3rem 0;
}
.daily-gate-heading {
margin-bottom: 0.5rem;
}
/* Header */
.daily-header {
margin-bottom: 2rem;
}
.daily-header-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.daily-date {
font-size: 0.875rem;
opacity: 0.6;
}
.daily-archive-badge {
font-size: 0.75rem;
padding: 0.1em 0.5em;
border: 1px solid currentColor;
border-radius: 3px;
opacity: 0.5;
}
.daily-title {
font-size: 1.75rem;
margin: 0;
}
/* Temporal state banners */
.daily-state {
margin-bottom: 2rem;
padding: 1rem 1.25rem;
border-left: 3px solid currentColor;
opacity: 0.85;
}
.daily-state-message {
margin: 0 0 0.25rem;
font-weight: 500;
}
.daily-state-sub {
margin: 0;
font-size: 0.875rem;
opacity: 0.7;
}
.daily-state-live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
margin-right: 0.5rem;
vertical-align: middle;
}
/* Conversation + summary */
.daily-conversation,
.daily-summary {
margin-bottom: 2.5rem;
}
.daily-conversation-heading,
.daily-summary-heading,
.daily-signals-heading {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.5;
margin-bottom: 1rem;
}
/* Signals preview */
.daily-signals-preview {
margin-bottom: 2rem;
}
.daily-signals-list {
list-style: none;
margin: 0 0 0.75rem;
padding: 0;
}
.daily-signal-item {
display: flex;
gap: 0.75rem;
align-items: baseline;
padding: 0.4rem 0;
border-bottom: 1px solid rgba(128,128,128,0.1);
font-size: 0.9rem;
}
.daily-signal-urgency {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.55;
min-width: 56px;
}
.daily-signal-entity {
opacity: 0.5;
font-size: 0.85rem;
min-width: 60px;
}
.daily-signal-headline {
flex: 1;
}
.daily-signals-link {
font-size: 0.875rem;
opacity: 0.6;
}
.daily-signals-link:hover {
opacity: 1;
}
/* Footer nav */
.daily-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(128,128,128,0.15);
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.daily-footer-link {
font-size: 0.875rem;
opacity: 0.55;
}
.daily-footer-link:hover {
opacity: 1;
}
.me-anon-main {
/* No max-width — let meBecomingPanel's .me-becoming-full handle its own 640px column */
min-height: calc(100vh - 140px);
}/* EmissionsDetailPage — wrapper only; visual lives in brand-components *//* EmissionsIndexPage — wrapper only; visual lives in brand-components */
.explorer-address-page {
max-width: var(--content-max-width, 900px);
margin: 0 auto;
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
.explorer-address-page__card {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-address-page__taint {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-address-page__portfolio {
margin-top: var(--spacing-xl, 2rem);
}
.explorer-alliance-page {
max-width: var(--content-max-width, 900px);
margin: 0 auto;
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
.explorer-alliance-page__card {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-alliance-page__members {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-alliance-page__pool {
margin-top: var(--spacing-xl, 2rem);
}
.explorer-home-page {
max-width: var(--content-max-width, 900px);
margin: 0 auto;
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
.explorer-home-page__header {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-home-page__title {
font-size: var(--font-size-2xl, 2rem);
font-weight: var(--font-weight-bold, 700);
color: var(--color-text-primary, #fff);
margin: 0 0 var(--spacing-xs, 0.25rem);
}
.explorer-home-page__subtitle {
font-size: var(--font-size-sm, 0.875rem);
color: var(--color-text-muted, #888);
margin: 0;
}
.explorer-home-page__search {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-home-page__tail {
margin-top: var(--spacing-xl, 2rem);
}
.explorer-proposal-page {
max-width: var(--content-max-width, 900px);
margin: 0 auto;
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
.explorer-proposal-page__summary {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-proposal-page__bar {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-proposal-page__tally {
margin-top: var(--spacing-xl, 2rem);
}
.explorer-stake-page {
max-width: var(--content-max-width, 900px);
margin: 0 auto;
padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
.explorer-stake-page__card {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-stake-page__lifecycle {
margin-bottom: var(--spacing-xl, 2rem);
}
.explorer-stake-page__lineage {
margin-top: var(--spacing-xl, 2rem);
}
.insiders-callback-inner {
max-width: 400px;
margin: 0 auto;
padding: 80px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.insiders-callback-msg {
font-size: 16px;
color: var(--color-text-muted);
}
.insiders-error {
font-size: 15px;
color: #e05555;
line-height: 1.5;
}.insiders-shell {
min-height: 100vh;
background: var(--color-bg-primary);
color: var(--color-text-primary);
}
/* Loading */
.insiders-loading {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.insiders-loading-dot {
color: var(--color-accent);
font-size: 24px;
animation: pulse 1.2s ease-in-out infinite;
}
.insiders-loading-text {
color: var(--color-text-muted);
font-size: 14px;
padding: 12px 0;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.insiders-banner {
background: var(--color-bg-secondary, #111);
border-bottom: 1px solid var(--color-border-default);
padding: 20px 0;
}
.insiders-banner-inner {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.insiders-banner-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 600;
}
.insiders-check {
color: #8ac926;
font-size: 18px;
}
.insiders-banner-title {
color: var(--color-text-primary);
}
.insiders-banner-meta {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.insiders-tier-badge {
font-size: 12px;
font-weight: 600;
background: rgba(138, 201, 38, 0.15);
color: #8ac926;
border: 1px solid rgba(138, 201, 38, 0.3);
border-radius: 4px;
padding: 2px 8px;
letter-spacing: 0.04em;
}
.insiders-github-login {
font-size: 13px;
color: var(--color-text-muted);
}
.insiders-logout-link {
font-size: 13px;
color: var(--color-text-muted);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
margin-left: auto;
}
.insiders-logout-link:hover { color: var(--color-text-primary); }
.insiders-dashboard-inner {
max-width: 860px;
margin: 0 auto;
padding: 40px 24px 80px;
display: flex;
flex-direction: column;
gap: 48px;
}
.insiders-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.insiders-section-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--color-text-muted);
margin: 0 0 4px;
}
.insiders-section-sub {
font-size: 14px;
color: var(--color-text-muted);
margin: -4px 0 4px;
}
.insiders-empty {
font-size: 14px;
color: var(--color-text-muted);
padding: 16px 0;
}
/* Feed cards */
.insiders-feed-card {
background: var(--color-bg-tertiary, #111);
border: 1px solid var(--color-border-default);
border-radius: 6px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
cursor: pointer;
transition: border-color 0.12s;
}
.insiders-feed-card:hover {
border-color: var(--color-border-strong, #555);
}
.insiders-feed-date {
font-size: 12px;
color: var(--color-text-muted);
font-family: 'JetBrains Mono', monospace;
margin: 0;
}
.insiders-feed-title {
font-size: 15px;
font-weight: 600;
color: var(--color-accent);
margin: 0;
}
.insiders-feed-preview {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
.insiders-feed-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.insiders-tag {
font-size: 12px;
color: var(--color-text-muted);
}
/* Release cards */
.insiders-release-card {
background: var(--color-bg-tertiary, #111);
border: 1px solid var(--color-border-default);
border-radius: 6px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform 0.12s, border-color 0.12s;
}
.insiders-release-card:hover {
transform: translateY(-2px);
border-color: var(--color-border-strong, #555);
}
.insiders-release-header {
display: flex;
align-items: center;
gap: 10px;
}
.insiders-release-version {
font-size: 13px;
font-weight: 600;
color: var(--color-accent);
}
.insiders-release-age {
font-size: 12px;
color: var(--color-text-muted);
}
.insiders-release-title {
font-size: 15px;
font-weight: 500;
margin: 0;
}
.insiders-release-desc {
font-size: 14px;
color: var(--color-text-muted);
line-height: 1.5;
margin: 0;
}
.insiders-release-link {
font-size: 13px;
color: var(--color-accent);
text-decoration: none;
margin-top: 4px;
}
.insiders-release-link:hover { text-decoration: underline; }
/* Tier cards */
.insiders-tier-card {
background: var(--color-bg-tertiary, #111);
border: 1px solid var(--color-border-default);
border-radius: 6px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.insiders-tier-card--current {
border-color: #8ac926;
}
.insiders-tier-card--locked {
opacity: 0.6;
}
.insiders-tier-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.insiders-tier-name {
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.insiders-tier-lock {
color: var(--color-text-muted);
font-size: 13px;
}
.insiders-tier-current-badge {
font-size: 11px;
font-weight: 500;
background: rgba(138, 201, 38, 0.15);
color: #8ac926;
border: 1px solid rgba(138, 201, 38, 0.3);
border-radius: 3px;
padding: 1px 6px;
}
.insiders-tier-price {
font-size: 14px;
font-weight: 600;
color: var(--color-accent);
}
.insiders-tier-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.insiders-tier-feature {
font-size: 14px;
color: var(--color-text-secondary, #ccc);
}
.insiders-feature--locked {
color: var(--color-text-muted);
opacity: 0.7;
}
.insiders-upgrade-btn {
display: inline-block;
font-size: 13px;
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: 4px;
padding: 6px 14px;
text-decoration: none;
align-self: flex-start;
transition: background 0.12s, color 0.12s;
}
.insiders-upgrade-btn:hover {
background: var(--color-accent);
color: #000;
}
/* ── Dashboard responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
.insiders-banner-inner { gap: 10px; }
.insiders-logout-link { margin-left: 0; width: 100%; text-align: left; }
}
.insiders-join {
min-height: 100vh;
}
.insiders-join-inner {
max-width: 600px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
text-align: center;
}
.insiders-join-heading {
font-size: 32px;
font-weight: 800;
margin: 0;
}
.insiders-join-body {
font-size: 16px;
color: var(--color-text-muted);
line-height: 1.6;
margin: 0;
}
.insiders-join-tiers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
margin: 8px 0;
}
.insiders-join-tier {
background: var(--color-bg-secondary, #111);
border: 1px solid var(--color-border-default);
border-radius: 6px;
padding: 16px;
text-align: left;
display: flex;
flex-direction: column;
gap: 6px;
}
.insiders-join-tier--highlight {
border-color: var(--color-accent);
}
.insiders-join-tier-name {
font-size: 13px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.04em;
}
.insiders-join-tier-price {
font-size: 18px;
font-weight: 700;
}
.insiders-join-tier-desc {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.4;
margin: 0;
}
/* ── Join responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.insiders-join-tiers { grid-template-columns: 1fr; }
}
.insiders-notsponsor {
min-height: 100vh;
}
.insiders-notsponsor-inner {
max-width: 480px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.insiders-notsponsor-login {
font-size: 13px;
color: var(--color-text-muted);
}
.insiders-notsponsor-heading {
font-size: 24px;
font-weight: 700;
margin: 0;
}
.insiders-notsponsor-body {
font-size: 15px;
color: var(--color-text-muted);
line-height: 1.6;
}
.insiders-join-btn {
display: inline-block;
background: var(--color-accent);
color: #000;
font-size: 15px;
font-weight: 600;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s;
margin-top: 8px;
}
.insiders-join-btn:hover {
background: var(--color-accent-dark, #e8a700);
}
.insiders-signin {
min-height: 100vh;
}
.insiders-signin-inner {
max-width: 520px;
margin: 0 auto;
padding: 80px 24px 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.insiders-title {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--color-accent);
margin: 0 0 12px;
}
.insiders-tagline {
font-size: 16px;
color: var(--color-text-muted);
text-align: center;
line-height: 1.6;
margin: 0 0 40px;
max-width: 420px;
}
.insiders-auth-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
width: 100%;
margin-bottom: 32px;
margin-top: 12px;
}
.insiders-auth-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-default);
border-radius: 8px;
padding: 20px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
text-align: left;
transition: border-color 0.15s, box-shadow 0.15s;
min-height: 120px;
color: white;
border: 1px solid #FFFFFF44;
}
.insiders-auth-card:hover:not(:disabled) {
border-color: var(--color-border-strong, #555);
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.insiders-auth-card--soon,
.insiders-auth-card:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.insiders-auth-card-icon {
color: var(--color-accent);
}
.insiders-auth-card-text {
display: flex;
flex-direction: column;
gap: 6px;
}
.insiders-auth-label {
font-size: 15px;
font-weight: 600;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.insiders-auth-desc {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.4;
}
.insiders-soon-badge {
font-size: 11px;
font-weight: 500;
background: var(--color-bg-tertiary, #1a1a1a);
border: 1px solid var(--color-border-default);
color: var(--color-text-muted);
border-radius: 3px;
padding: 1px 5px;
letter-spacing: 0.04em;
}
.insiders-signin-footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.insiders-footer-link {
font-size: 14px;
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 3px;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.insiders-footer-link:hover { color: var(--color-text-primary); }
/* ── Sign-in responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
.insiders-auth-grid { grid-template-columns: 1fr; }
}/* KingdomsDetailPage — wrapper only; visual lives in brand-components *//* KingdomsIndexPage — wrapper only; visual lives in brand-components */.playlists-index-header {
margin: 24px 0 24px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.playlists-index-title {
font-size: 26px;
margin: 0 0 8px;
letter-spacing: 0.5px;
}
.playlists-index-subhead {
color: var(--text-muted, #888);
font-size: 13px;
max-width: 560px;
line-height: 1.5;
}
.playlists-mount {
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.playlists-mount-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(220, 120, 200, 0.1);
border: 1px dashed rgba(220, 120, 200, 0.4);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
color: var(--text, #ddd);
}
.playlists-mount-label:hover {
background: rgba(220, 120, 200, 0.18);
}
.playlists-mount-input {
display: none;
}
.playlists-mount-error {
color: rgba(220, 120, 120, 0.9);
font-size: 11px;
}
.playlists-index-list {
list-style: none;
padding: 0;
margin: 16px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.playlists-index-item {
background: rgba(255, 255, 255, 0.03);
border-left: 3px solid rgba(220, 120, 200, 0.7);
border-radius: 4px;
}
.playlists-index-link {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 14px;
color: var(--text, #ddd);
text-decoration: none;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.playlists-index-link:hover {
background: rgba(255, 255, 255, 0.05);
}
.playlists-index-slug {
font-size: 14px;
font-weight: 600;
}
.playlists-index-count {
color: var(--text-muted, #888);
font-size: 11px;
}
.playlists-index-empty {
padding: 30px 16px;
color: var(--text-muted, #888);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 13px;
}
.playlists-index-empty p {
margin: 4px 0;
}
.playlists-index-empty .muted {
color: var(--text-faint, #666);
}.playlist-header {
margin: 24px 0 16px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.playlist-back {
display: inline-block;
color: var(--text-muted, #888);
text-decoration: none;
font-size: 12px;
margin-bottom: 8px;
}
.playlist-back:hover {
color: var(--text-bright, #fff);
}
.playlist-title {
font-size: 24px;
margin: 4px 0 8px;
letter-spacing: 0.5px;
}
.playlist-meta {
color: var(--text-muted, #888);
font-size: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.playlist-compile {
background: rgba(220, 120, 200, 0.18);
border: 1px solid rgba(220, 120, 200, 0.35);
border-radius: 12px;
color: var(--text, #ddd);
padding: 3px 12px;
font-family: inherit;
font-size: 11px;
cursor: pointer;
letter-spacing: 0.4px;
}
.playlist-compile:hover {
background: rgba(220, 120, 200, 0.32);
}
.playlist-compile:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.playlist-mounted-badge {
display: inline-block;
padding: 2px 8px;
background: rgba(120, 220, 150, 0.18);
border: 1px solid rgba(120, 220, 150, 0.4);
border-radius: 10px;
color: rgba(120, 220, 150, 1);
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: 600;
}
.playlist-body {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 20px;
padding-bottom: 100px;
}
.playlist-item {
border-radius: 6px;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.playlist-item-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 16px;
background: rgba(0, 0, 0, 0.3);
border-left: 4px solid;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
font-size: 12px;
}
.playlist-item-head-left {
display: flex;
align-items: baseline;
gap: 12px;
}
.playlist-item-num {
color: var(--text-muted, #888);
font-size: 14px;
font-weight: 600;
}
.playlist-item-label {
color: var(--text-bright, #eee);
font-style: italic;
}
.playlist-item-head-right {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--text-muted, #888);
font-size: 11px;
}
.playlist-item-spirit {
color: rgba(220, 180, 100, 0.95);
text-decoration: none;
font-weight: 600;
}
.playlist-item-arrow {
color: var(--text-faint, #555);
}
.playlist-item-entity {
font-weight: 700;
text-decoration: none;
}
.playlist-item-date {
color: var(--text-faint, #666);
}
.playlist-item-permalink {
color: var(--text-muted, #888);
text-decoration: none;
margin-left: 4px;
font-size: 13px;
}
.playlist-item-permalink:hover {
color: var(--text-bright, #fff);
}
.playlist-item-events {
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
}
.playlist-item-error,
.playlist-item-empty {
padding: 20px;
text-align: center;
color: var(--text-muted, #888);
font-style: italic;
font-size: 12px;
}
.playlist-item-error {
color: rgba(220, 120, 120, 0.85);
}
.rituals-index-page {
min-height: 100vh;
background: var(--color-bg, #0d0d0d);
}
.rituals-index-inner {
max-width: 800px;
margin: 0 auto;
padding: 2.5rem 1.5rem 4rem;
}
.rituals-index-header {
margin-bottom: 2.5rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
padding-bottom: 1.5rem;
}
.rituals-index-title {
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700;
color: rgba(255,255,255,0.92);
margin: 0 0 0.4rem;
letter-spacing: -0.01em;
}
.rituals-index-subtitle {
font-size: 0.95rem;
color: rgba(255,255,255,0.45);
margin: 0;
}
.rituals-loading,
.rituals-empty {
color: rgba(255,255,255,0.35);
font-family: var(--font-mono);
font-size: 0.88rem;
padding: 2rem 0;
}
.rituals-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.rituals-list-item {
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.12s;
}
.rituals-list-item:hover {
border-color: rgba(255,255,255,0.14);
}
.rituals-list-link {
display: block;
padding: 1.1rem 1.3rem;
text-decoration: none;
background: rgba(255,255,255,0.02);
transition: background 0.1s;
}
.rituals-list-link:hover {
background: rgba(255,255,255,0.04);
}
.rituals-list-meta {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.45rem;
flex-wrap: wrap;
}
.rituals-list-name {
font-size: 1.05rem;
font-weight: 600;
color: rgba(255,255,255,0.88);
letter-spacing: -0.01em;
}
.rituals-list-description {
font-size: 0.88rem;
color: rgba(255,255,255,0.50);
margin: 0 0 0.6rem;
line-height: 1.5;
}
.rituals-list-footer {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
}
.rituals-next {
font-size: 0.78rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.35);
}
.rituals-authors {
font-size: 0.78rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.30);
}
.rituals-author-chip {
display: inline-block;
margin-left: 0.3em;
color: rgba(255,255,255,0.45);
}
.ritual-page {
min-height: 100vh;
background: var(--color-bg, #0d0d0d);
}
.ritual-page--loading,
.ritual-page--notfound {
display: flex;
align-items: center;
}
.ritual-page-inner {
max-width: 760px;
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
}
.ritual-loading,
.ritual-notfound {
color: rgba(255,255,255,0.35);
font-family: var(--font-mono);
font-size: 0.88rem;
}
.ritual-notfound-link {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.85rem;
color: rgba(255,255,255,0.40);
text-decoration: none;
font-family: var(--font-mono);
}
.ritual-notfound-link:hover { color: rgba(255,255,255,0.70); }
.ritual-header {
border-bottom: 1px solid rgba(255,255,255,0.07);
padding-bottom: 1.4rem;
margin-bottom: 2.2rem;
}
.ritual-header-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.ritual-name {
font-size: clamp(1.4rem, 2.8vw, 2rem);
font-weight: 700;
color: rgba(255,255,255,0.92);
margin: 0;
letter-spacing: -0.01em;
}
.ritual-header-badges {
display: flex;
gap: 0.5rem;
align-items: center;
flex-shrink: 0;
}
.ritual-next-line {
font-size: 0.85rem;
color: rgba(255,255,255,0.40);
margin: 0;
font-family: var(--font-mono);
}
.ritual-next-line strong {
color: rgba(255,255,255,0.60);
font-weight: 600;
}
/* Sections */
.ritual-section {
margin-bottom: 2.5rem;
}
.ritual-section-heading {
font-size: 0.72rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255,255,255,0.35);
margin: 0 0 0.9rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Surface card — this week */
.ritual-surface-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
padding: 1.1rem 1.3rem;
}
.ritual-surface-meta {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
margin-bottom: 0.65rem;
}
.ritual-surface-author {
font-size: 0.88rem;
font-weight: 600;
color: rgba(255,255,255,0.78);
font-family: var(--font-mono);
}
.ritual-surface-date {
font-size: 0.80rem;
color: rgba(255,255,255,0.38);
font-family: var(--font-mono);
}
.ritual-surface-title {
font-size: 1rem;
font-weight: 600;
color: rgba(255,255,255,0.82);
margin: 0 0 0.5rem;
}
.ritual-surface-copy {
font-size: 0.90rem;
color: rgba(255,255,255,0.55);
line-height: 1.6;
margin: 0 0 0.85rem;
}
.ritual-surface-empty {
font-size: 0.88rem;
color: rgba(255,255,255,0.30);
font-family: var(--font-mono);
padding: 1rem 0;
}
.ritual-surface-link {
font-size: 0.80rem;
color: rgba(255,255,255,0.35);
text-decoration: none;
font-family: var(--font-mono);
display: block;
margin-top: 0.6rem;
}
.ritual-surface-link:hover { color: rgba(255,255,255,0.65); }
/* Next week card */
.ritual-next-week-card {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
padding: 1rem 1.2rem;
}
.ritual-countdown {
font-size: 1.3rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.75);
margin: 0 0 0.35rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.ritual-next-author {
font-size: 0.82rem;
color: rgba(255,255,255,0.35);
margin: 0;
font-family: var(--font-mono);
}
/* Archive strip */
.ritual-archive-strip {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.ritual-archive-item {
display: grid;
grid-template-columns: 7rem 6rem 1fr;
gap: 0.75rem;
align-items: baseline;
padding: 0.5rem 0.75rem;
border-radius: 5px;
text-decoration: none;
transition: background 0.1s;
}
.ritual-archive-item:hover {
background: rgba(255,255,255,0.04);
}
.ritual-archive-week {
font-size: 0.80rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.40);
white-space: nowrap;
}
.ritual-archive-author {
font-size: 0.82rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.60);
font-weight: 600;
}
.ritual-archive-preview {
font-size: 0.80rem;
color: rgba(255,255,255,0.32);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Participation */
.ritual-participation-note {
font-size: 0.88rem;
color: rgba(255,255,255,0.45);
line-height: 1.6;
margin: 0;
}
/* How it works */
.ritual-how-list {
padding-left: 1.3rem;
margin: 0;
color: rgba(255,255,255,0.50);
font-size: 0.88rem;
line-height: 1.8;
}
/* Coming soon placeholder */
.ritual-coming-soon {
font-size: 0.90rem;
color: rgba(255,255,255,0.40);
font-family: var(--font-mono);
padding: 1.5rem 0 0.5rem;
}
.ritual-description-body {
font-size: 0.88rem;
color: rgba(255,255,255,0.38);
line-height: 1.6;
margin: 0.5rem 0 0;
}
.signals-main {
padding-top: var(--nav-height, 60px);
}
.signals-inner {
max-width: 760px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
/* Header */
.signals-header {
margin-bottom: 2rem;
}
.signals-title {
font-size: 1.75rem;
margin: 0 0 0.5rem;
}
.signals-subhead {
opacity: 0.6;
font-size: 0.9rem;
margin: 0;
}
/* Loading / error / empty */
.signals-loading,
.signals-error,
.signals-empty {
padding: 2rem 0;
opacity: 0.6;
}
/* Sponsor notice */
.signals-sponsor-notice {
margin-bottom: 2rem;
padding: 0.75rem 1rem;
border-left: 3px solid currentColor;
font-size: 0.875rem;
opacity: 0.7;
}
/* Urgency groups */
.signals-group {
margin-bottom: 2.5rem;
}
.signals-group-heading {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 1rem;
opacity: 0.45;
}
/* Signal list */
.signals-list {
list-style: none;
margin: 0;
padding: 0;
}
.signals-item {
padding: 1rem 0;
border-bottom: 1px solid rgba(128,128,128,0.12);
}
.signals-item:last-child {
border-bottom: none;
}
.signals-item-meta {
display: flex;
gap: 0.75rem;
align-items: baseline;
margin-bottom: 0.35rem;
font-size: 0.8rem;
opacity: 0.5;
}
.signals-item-entity {
font-weight: 600;
}
.signals-item-headline {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 500;
}
.signals-item-body {
font-size: 0.9rem;
opacity: 0.8;
}
/* Footer */
.signals-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(128,128,128,0.15);
}
.signals-footer-link {
font-size: 0.875rem;
opacity: 0.55;
}
.signals-footer-link:hover {
opacity: 1;
}
.sovereign-login-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
padding: 2rem 1rem;
}
.sovereign-login-inner {
width: 100%;
max-width: 480px;
background: var(--bg-surface);
border: 1px solid rgba(201, 168, 76, 0.15);
border-radius: 12px;
padding: 2.5rem 2rem;
}
.sovereign-login-title {
font-size: 1.5rem;
font-weight: 800;
color: var(--text);
margin: 0 0 0.5rem;
letter-spacing: -0.02em;
}
.sovereign-login-subtitle {
color: var(--text-dim);
font-size: 0.9rem;
line-height: 1.6;
margin: 0 0 2rem;
}
.sovereign-login-header {
margin-bottom: 2rem;
}
.sovereign-field {
margin-bottom: 1.5rem;
}
.sovereign-label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.5rem;
}
.sovereign-optional {
font-weight: 400;
opacity: 0.6;
}
.sovereign-input {
display: block;
width: 100%;
box-sizing: border-box;
background: var(--bg-raised);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
color: var(--text);
font-family: var(--font-mono);
font-size: 0.95rem;
padding: 0.65rem 0.85rem;
outline: none;
transition: border-color 0.15s;
}
.sovereign-input:focus {
border-color: var(--accent);
}
.sovereign-hint {
font-size: 0.78rem;
color: var(--slate-light);
margin: 0.4rem 0 0;
}
.sovereign-btn {
display: inline-block;
width: 100%;
box-sizing: border-box;
background: var(--accent);
color: #0D0D0D;
font-weight: 700;
font-size: 0.95rem;
border: none;
border-radius: 6px;
padding: 0.75rem 1.25rem;
cursor: pointer;
text-align: center;
text-decoration: none;
transition: background 0.15s, opacity 0.15s;
letter-spacing: 0.01em;
margin-bottom: 1rem;
}
.sovereign-btn:hover:not([disabled]) {
background: var(--accent-dim);
}
.sovereign-btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.sovereign-status {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.75rem;
font-size: 0.85rem;
color: var(--text-dim);
}
.sovereign-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
animation: pulse-dot 1.2s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.sovereign-error {
color: #e05555;
font-size: 0.85rem;
margin: 0.5rem 0 0;
background: rgba(224, 85, 85, 0.08);
border: 1px solid rgba(224, 85, 85, 0.2);
border-radius: 4px;
padding: 0.5rem 0.75rem;
}
.sovereign-login-footer {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sovereign-footer-note {
font-size: 0.78rem;
color: var(--slate-light);
line-height: 1.6;
margin: 0 0 1rem;
}
.sovereign-link {
display: inline-block;
font-size: 0.85rem;
color: var(--accent);
text-decoration: none;
opacity: 0.85;
margin-top: 0.5rem;
}
.sovereign-link:hover {
opacity: 1;
}
.sovereign-login-success {
text-align: center;
padding: 1rem 0;
}
.sovereign-success-icon {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 0.75rem;
}
.sovereign-success-msg {
color: var(--text);
font-size: 1.05rem;
margin: 0 0 1.5rem;
}
/* ── Sovereign import section ─────────────────────────────────────────────── */
.sovereign-import-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sovereign-import-divider {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.sovereign-import-divider::before,
.sovereign-import-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.08);
}
.sovereign-import-divider-label {
font-size: 0.78rem;
color: var(--slate-light);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sovereign-import-textarea {
resize: vertical;
min-height: 72px;
line-height: 1.5;
font-size: 0.82rem;
}
.sovereign-btn-secondary {
background: transparent;
color: var(--accent);
border: 1px solid rgba(201, 168, 76, 0.4);
margin-top: 0;
}
.sovereign-btn-secondary:hover:not([disabled]) {
background: rgba(201, 168, 76, 0.08);
border-color: var(--accent);
}
/* ── Sovereign sessions panel ────────────────────────────────────────────── */
.sovereign-sessions-panel {
margin-top: 2rem;
padding: 1.25rem 1.5rem;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(201, 168, 76, 0.12);
border-radius: 8px;
}
.sovereign-sessions-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.sovereign-sessions-title {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sovereign-sessions-refresh {
background: none;
border: none;
color: var(--accent);
font-size: 1.1rem;
cursor: pointer;
padding: 0 0.25rem;
opacity: 0.7;
transition: opacity 0.15s;
}
.sovereign-sessions-refresh:hover { opacity: 1; }
.sovereign-sessions-loading {
font-size: 0.82rem;
color: var(--slate-light);
margin: 0;
}
.sovereign-sessions-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sovereign-session-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.sovereign-session-current {
border-color: rgba(201, 168, 76, 0.25);
background: rgba(201, 168, 76, 0.05);
}
.sovereign-session-meta {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
min-width: 0;
}
.sovereign-session-fp code {
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text);
letter-spacing: 0.03em;
}
.sovereign-session-badge {
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
background: rgba(201, 168, 76, 0.12);
border-radius: 3px;
padding: 0.15em 0.45em;
}
.sovereign-session-when {
font-size: 0.75rem;
color: var(--slate-light);
}
.sovereign-session-revoke-btn {
background: none;
border: 1px solid rgba(224, 85, 85, 0.35);
color: #e05555;
font-size: 0.75rem;
font-weight: 600;
border-radius: 4px;
padding: 0.25rem 0.6rem;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s;
flex-shrink: 0;
}
.sovereign-session-revoke-btn:hover:not([disabled]) {
background: rgba(224, 85, 85, 0.1);
border-color: #e05555;
}
.sovereign-session-revoke-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* ── Link sovereign key panel ────────────────────────────────────────────── */
.sovereign-link-panel {
margin-top: 1.5rem;
padding: 1.25rem 1.5rem;
background: rgba(201, 168, 76, 0.05);
border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 8px;
}
.sovereign-link-header {
margin-bottom: 0.75rem;
}
.sovereign-link-title {
font-size: 0.78rem;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ── Sovereign link success state ────────────────────────────────────────── */
.sovereign-link-success {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: rgba(76, 175, 80, 0.08);
border: 1px solid rgba(76, 175, 80, 0.25);
border-radius: 6px;
}
.status-shell {
max-width: 1100px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
}
.status-inner .status-hero h1 {
font-weight: 500;
margin-bottom: 0.5rem;
}
.status-inner .status-note {
color: #a1a1aa;
max-width: 620px;
line-height: 1.5;
}
.status-footer {
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid #27272a;
}
.status-footer .muted {
color: #71717a;
font-size: 0.85rem;
}
.status-footer code {
background: #18181b;
padding: 1px 5px;
border-radius: 3px;
font-size: 0.85em;
}/* team/grid/styles.css — entity grid component styles
* Grid layout and .entity-card styles live in the root styles.css.
* This file is a placeholder for team-grid-specific overrides if needed.
*/
.blog-main {
min-height: calc(100vh - 73px);
}
.blog-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 64px 32px 96px;
}
.blog-inner--post {
max-width: 720px;
}
/* --- Blog index header --- */
.blog-header {
margin-bottom: 56px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.blog-heading {
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 16px;
line-height: 1.1;
}
.blog-subhead {
font-size: 17px;
color: var(--text-dim);
line-height: 1.65;
max-width: 560px;
}
/* --- Blog post list --- */
.blog-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
}
.blog-list-item {
border-bottom: 1px solid var(--border);
}
.blog-list-link {
display: block;
padding: 32px 0;
transition: none;
}
.blog-list-link:hover .blog-list-title {
color: var(--accent);
}
.blog-list-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.blog-list-date {
font-size: 13px;
font-family: var(--font-mono);
color: var(--text-dim);
}
.blog-list-pillar,
.blog-list-series {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
background: rgba(201, 168, 76, 0.1);
padding: 2px 8px;
border-radius: 2px;
}
.blog-list-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1.25;
margin-bottom: 8px;
transition: color 0.15s;
}
.blog-list-subtitle {
font-size: 15px;
color: var(--text-dim);
line-height: 1.5;
margin-bottom: 8px;
}
.blog-list-author {
font-size: 13px;
color: var(--slate-light);
font-family: var(--font-mono);
}
/* --- Blog post article --- */
.blog-article-header {
margin-bottom: 48px;
padding-bottom: 40px;
border-bottom: 1px solid var(--border);
}
.blog-article-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.blog-article-title {
font-size: clamp(28px, 5vw, 44px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
line-height: 1.1;
margin-bottom: 16px;
}
.blog-article-subtitle {
font-size: 18px;
color: var(--text-dim);
line-height: 1.55;
margin-bottom: 16px;
}
.blog-article-author {
font-size: 13px;
color: var(--slate-light);
font-family: var(--font-mono);
}
/* --- Blog prose body --- */
.blog-article-body.prose {
font-size: 17px;
line-height: 1.75;
color: var(--text);
}
.blog-article-body.prose h1,
.blog-article-body.prose h2,
.blog-article-body.prose h3,
.blog-article-body.prose h4 {
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text);
margin-top: 48px;
margin-bottom: 16px;
line-height: 1.2;
}
.blog-article-body.prose h1 { font-size: 28px; }
.blog-article-body.prose h2 { font-size: 22px; }
.blog-article-body.prose h3 { font-size: 18px; }
.blog-article-body.prose p {
margin-bottom: 24px;
}
.blog-article-body.prose ul,
.blog-article-body.prose ol {
margin-bottom: 24px;
padding-left: 24px;
}
.blog-article-body.prose li {
margin-bottom: 8px;
}
.blog-article-body.prose a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: rgba(201, 168, 76, 0.4);
}
.blog-article-body.prose a:hover {
text-decoration-color: var(--accent);
}
.blog-article-body.prose code {
font-family: var(--font-mono);
font-size: 14px;
background: var(--bg-raised);
padding: 2px 6px;
border-radius: 2px;
color: var(--accent);
}
.blog-article-body.prose pre {
background: var(--bg-raised);
border: 1px solid var(--border);
border-radius: 4px;
padding: 24px;
overflow-x: auto;
margin-bottom: 24px;
}
.blog-article-body.prose pre code {
background: none;
padding: 0;
color: var(--text);
font-size: 13px;
line-height: 1.6;
}
.blog-article-body.prose blockquote {
border-left: 3px solid var(--accent);
padding: 4px 0 4px 24px;
margin: 32px 0;
color: var(--text-dim);
font-style: italic;
}
.blog-article-body.prose hr {
border: none;
border-top: 1px solid var(--border);
margin: 40px 0;
}
.blog-article-body.prose strong {
font-weight: 700;
color: var(--text);
}
.blog-article-body.prose em {
font-style: italic;
}
/* --- Blog article footer --- */
.blog-article-footer {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.blog-back {
font-size: 14px;
color: var(--text-dim);
transition: color 0.15s;
}
.blog-back:hover {
color: var(--accent);
}
/* --- Loading / error states --- */
.blog-loading {
color: var(--text-dim);
font-size: 15px;
padding: 48px 0;
}
.blog-error {
color: var(--text-dim);
font-size: 15px;
padding: 48px 0;
}
.blog-error a {
color: var(--accent);
}
.blog-empty {
color: var(--text-dim);
font-size: 15px;
padding: 48px 0;
}
@media (max-width: 640px) {
.blog-inner { padding: 40px 20px 64px; }
.blog-header { margin-bottom: 40px; padding-bottom: 32px; }
.blog-list-link { padding: 24px 0; }
.blog-article-body.prose pre { padding: 16px; }
}
.me-becoming-panel {
width: 100%;
background: var(--bg-raised, #171717);
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
padding: 24px 0 32px;
}
.me-becoming-panel-inner {
max-width: 640px;
margin: 0 auto;
padding: 0 24px;
}
.me-becoming-panel-label {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim, #A09E9A);
margin-bottom: 20px;
}
/* ── Full-page anonymous mode shell ──────────────────────────────────────────── */
.me-becoming-full {
max-width: 640px;
margin: 0 auto;
padding: 48px 24px 96px;
}
/* ── Anonymous headline ──────────────────────────────────────────────────────── */
.me-anon-headline {
margin-bottom: 32px;
}
.me-anon-title {
font-size: clamp(20px, 3vw, 28px);
font-weight: 700;
color: var(--text, #E8E6E1);
margin-bottom: 10px;
font-family: var(--font-mono, monospace);
line-height: 1.3;
}
.me-anon-subhead {
font-size: 14px;
color: var(--slate-light, #718096);
line-height: 1.6;
max-width: 520px;
}
/* ── Player header ───────────────────────────────────────────────────────────── */
.me-player-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.07));
}
.me-avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid var(--slate, #4A5568);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--bg-surface, #111111);
overflow: hidden;
/* ring color is set via inline style from playerHueStyle helper */
transition: border-color 0.4s ease;
}
.me-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Anonymous visitor — identity waiting to form */
.me-avatar-placeholder {
border-color: var(--slate, #4A5568);
}
.me-avatar-placeholder .me-avatar-sigil {
opacity: 0.4;
}
.me-avatar-sigil {
font-size: 24px;
color: var(--accent, #C9A84C);
opacity: 0.8;
}
.me-player-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 6px;
}
.me-player-handle {
font-size: 18px;
font-weight: 700;
color: var(--text, #E8E6E1);
display: flex;
align-items: baseline;
gap: 6px;
}
.me-player-handle-dash {
color: var(--slate, #4A5568);
}
.me-sovereign-indicator {
font-size: 13px;
color: var(--accent, #C9A84C);
}
.me-session-badge {
font-size: 12px;
font-family: var(--font-mono, monospace);
color: var(--green, #3EAF6A);
font-weight: 400;
}
.me-player-tenure {
font-size: 13px;
color: var(--text-dim, #A09E9A);
}
.me-stage-dots {
display: flex;
gap: 6px;
margin-top: 4px;
font-family: var(--font-mono, monospace);
font-size: 12px;
}
.me-stage-dot {
color: var(--slate, #4A5568);
}
.me-stage-dot.done {
color: var(--accent, #C9A84C);
}
/* ── Questline stack ─────────────────────────────────────────────────────────── */
.me-questline {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── Stage card base ─────────────────────────────────────────────────────────── */
.me-stage-card {
display: flex;
align-items: flex-start;
gap: 12px;
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
padding: 16px;
position: relative;
/* Level-up transition — active→complete class swap drives these */
transition:
border-left-color 600ms ease-out,
border-left-width 600ms ease-out,
border-color 400ms ease-out,
padding-left 600ms ease-out,
padding-top 300ms ease-in-out,
padding-bottom 300ms ease-in-out,
background-color 400ms ease-out;
}
.me-stage-icon {
font-size: 14px;
flex-shrink: 0;
margin-top: 2px;
}
.me-stage-check {
font-size: 14px;
color: var(--green, #3EAF6A);
flex-shrink: 0;
margin-top: 2px;
/* Check mark appear — fires when .me-stage-check renders */
animation: me-check-appear 200ms ease-out 300ms both;
}
@keyframes me-check-appear {
from { opacity: 0; }
to { opacity: 1; }
}
.me-stage-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.me-stage-label {
font-size: 14px;
font-weight: 600;
color: var(--text, #E8E6E1);
}
/* ── Active stage card (you are here) ───────────────────────────────────────── */
.me-stage-active {
background: var(--bg-raised, #171717);
border-color: var(--border, rgba(255,255,255,0.07));
border-left: 3px solid var(--accent, #C9A84C);
padding-left: 13px;
padding-top: 24px;
padding-bottom: 24px;
}
.me-stage-active .me-stage-label {
font-size: 15px;
color: var(--text, #E8E6E1);
}
.me-stage-active .me-stage-icon {
color: var(--accent, #C9A84C);
}
.me-stage-body {
font-size: 14px;
color: var(--text-dim, #A09E9A);
line-height: 1.6;
margin: 0;
overflow: hidden;
transition:
opacity 200ms ease-in,
max-height 300ms ease-in-out 100ms;
}
.me-stage-cta {
display: inline-block;
margin-top: 8px;
padding: 8px 16px;
background: var(--accent, #C9A84C);
color: var(--bg, #0A0A0A);
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-radius: 2px;
overflow: hidden;
transition:
background 0.15s ease,
opacity 200ms ease-in,
max-height 300ms ease-in-out 100ms;
}
.me-stage-cta:hover {
background: var(--accent-dim, #9B7D35);
}
/* Body content: hidden state (completing card, or not-yet-active card) */
.me-stage-complete .me-stage-body,
.me-stage-complete .me-leaf-chips,
.me-stage-complete .me-stage-cta,
.me-stage-locked .me-stage-body,
.me-stage-locked .me-leaf-chips,
.me-stage-locked .me-stage-cta {
opacity: 0;
max-height: 0;
}
/* Body content: visible state (active card) */
.me-stage-active .me-stage-body,
.me-stage-active .me-leaf-chips,
.me-stage-active .me-stage-cta {
opacity: 1;
max-height: 200px;
}
/* ── OAuth secondary link (anonymous Stage 1 only) ───────────────────────────── */
.me-oauth-secondary {
font-size: 13px;
color: var(--text-dim, #A09E9A);
margin-top: 4px;
}
.me-oauth-link {
color: var(--text-dim, #A09E9A);
text-decoration: none;
}
.me-oauth-link:hover {
color: var(--text, #E8E6E1);
text-decoration: underline;
}
/* ── Completed stage card (52px one-liner) ───────────────────────────────────── */
.me-stage-complete {
background: var(--bg, #0A0A0A);
border-color: var(--border, rgba(255,255,255,0.07));
padding: 14px 16px;
min-height: 52px;
align-items: center;
}
.me-stage-complete .me-stage-label {
font-size: 13px;
color: var(--text-dim, #A09E9A);
font-weight: 400;
}
.me-stage-done-summary {
font-size: 12px;
font-family: var(--font-mono, monospace);
color: var(--slate-light, #718096);
}
.me-pubkey-display {
font-size: 11px;
font-family: var(--font-mono, monospace);
color: var(--slate, #4A5568);
opacity: 0.8;
}
.me-manage-link {
font-size: 12px;
color: var(--slate-light, #718096);
text-decoration: none;
flex-shrink: 0;
margin-left: auto;
align-self: center;
}
.me-manage-link:hover {
color: var(--text, #E8E6E1);
text-decoration: underline;
}
/* ── Locked stage card ───────────────────────────────────────────────────────── */
.me-stage-locked {
background: var(--bg, #0A0A0A);
border-color: rgba(255, 255, 255, 0.03);
padding-top: 16px;
padding-bottom: 16px;
}
.me-stage-locked .me-stage-label {
color: var(--slate, #4A5568);
font-weight: 400;
}
.me-stage-locked .me-stage-icon {
color: var(--slate, #4A5568);
}
.me-stage-gate {
font-size: 12px;
color: var(--slate, #4A5568);
}
/* ── Stage 2 social leaf chips ───────────────────────────────────────────────── */
.me-leaf-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
overflow: hidden;
transition:
opacity 200ms ease-in,
max-height 300ms ease-in-out 100ms;
}
.me-leaf-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 2px;
font-size: 11px;
font-family: var(--font-mono, monospace);
background: var(--bg-surface, #111111);
border: 1px solid var(--border, rgba(255,255,255,0.07));
color: var(--slate-light, #718096);
}
.me-chip-dot {
font-size: 8px;
}
.me-chip-verified {
color: var(--text, #E8E6E1);
border-color: rgba(62, 175, 106, 0.3);
}
.me-chip-verified .me-chip-dot {
color: var(--green, #3EAF6A);
}
.me-chip-pending {
color: var(--text-dim, #A09E9A);
border-color: rgba(201, 168, 76, 0.2);
}
.me-chip-pending .me-chip-dot {
color: var(--accent-dim, #9B7D35);
}
.me-chip-unlinked .me-chip-dot {
color: var(--slate, #4A5568);
}
/* ── Stage dot fill animation ────────────────────────────────────────────────── */
.me-stage-dot.done {
animation: me-dot-fill 300ms ease-out both;
}
@keyframes me-dot-fill {
0% { color: var(--slate, #4A5568); }
60% { color: var(--accent, #C9A84C); filter: brightness(1.4); }
100% { color: var(--accent, #C9A84C); filter: brightness(1); }
}
/* ── Sigil pulse on level-up (JS one-shot) ───────────────────────────────────── */
@keyframes me-sigil-pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
.me-avatar-sigil.me-pulse {
animation: me-sigil-pulse 1s ease-in-out 1;
}
/* ── Stage 1 inline ceremony UI (SPEC-149 §6) ───────────────────────────────── */
.me-ceremony-block {
display: flex;
flex-direction: column;
gap: 12px;
}
/* SPEC-149 §6 step 3: non-negotiable backup warning — no celebration, prominent */
.me-ceremony-warning {
font-size: 13px;
color: var(--text, #E8E6E1);
line-height: 1.6;
border-left: 3px solid var(--accent, #C9A84C);
padding-left: 12px;
margin: 0;
}
.me-ceremony-status {
font-size: 13px;
color: var(--text-dim, #A09E9A);
font-family: var(--font-mono, monospace);
margin: 0;
}
.me-ceremony-hint {
font-size: 12px;
color: var(--slate, #4A5568);
margin: 0;
}
.me-ceremony-error {
font-size: 13px;
color: #E06C75;
margin: 0;
}
/* Mnemonic word list — numbered grid */
.me-word-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px 12px;
list-style: none;
margin: 0;
padding: 12px;
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.07));
border-radius: 2px;
font-family: var(--font-mono, monospace);
font-size: 12px;
}
.me-word-item {
display: flex;
align-items: baseline;
gap: 5px;
}
.me-word-n {
color: var(--slate, #4A5568);
font-size: 10px;
min-width: 16px;
text-align: right;
}
.me-word {
color: var(--text, #E8E6E1);
font-weight: 600;
letter-spacing: 0.01em;
}
/* Quiz rows */
.me-quiz-row {
display: flex;
align-items: center;
gap: 10px;
}
.me-quiz-label {
font-size: 12px;
font-family: var(--font-mono, monospace);
color: var(--text-dim, #A09E9A);
min-width: 60px;
flex-shrink: 0;
}
.me-quiz-input {
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.15));
border-radius: 2px;
padding: 5px 10px;
color: var(--text, #E8E6E1);
font-family: var(--font-mono, monospace);
font-size: 13px;
width: 140px;
outline: none;
}
.me-quiz-input:focus {
border-color: var(--accent, #C9A84C);
}
.me-ceremony-back-btn {
display: inline-block;
margin-top: 6px;
margin-left: 8px;
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border, rgba(255,255,255,0.15));
color: var(--text-dim, #A09E9A);
font-size: 12px;
border-radius: 2px;
cursor: pointer;
}
.me-ceremony-back-btn:hover {
color: var(--text, #E8E6E1);
border-color: var(--text-dim, #A09E9A);
}
.me-link-secondary {
display: inline-block;
margin-top: 8px;
margin-right: 12px;
font-size: 12px;
color: var(--text-dim, #A09E9A);
text-decoration: underline;
cursor: pointer;
}
.me-link-secondary:hover {
color: var(--text, #E8E6E1);
}
.me-returning-actions {
margin-top: 10px;
}
.me-stage-recover-hint {
margin-top: 12px;
font-size: 12px;
color: var(--text-dim, #A09E9A);
}
.me-recover-words-input {
width: 100%;
min-height: 80px;
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.15));
border-radius: 2px;
padding: 8px 10px;
color: var(--text, #E8E6E1);
font-family: var(--font-mono, monospace);
font-size: 13px;
outline: none;
resize: vertical;
}
.me-recover-words-input:focus {
border-color: var(--accent, #C9A84C);
}
/* ── Namespace row: [username] @ [kingdom] (VESTA-SPEC-152 §4.1) ──────────────
Muse visual spec 2026-04-27.
─────────────────────────────────────────────────────────────────────────── */
.me-namespace-row {
display: flex;
align-items: center;
gap: 0;
margin-top: 8px;
width: 100%;
}
.me-namespace-input {
flex: 1;
min-width: 100px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
font-family: var(--font-mono, monospace);
font-size: 14px;
padding: 7px 12px;
color: var(--text);
outline: none;
transition: border-color 0.15s ease;
}
.me-namespace-input:focus {
border-color: var(--accent);
}
/* Kingdom input is slightly wider to handle domain names */
#me-namespace-kingdom {
flex: 1.4;
min-width: 120px;
}
.me-namespace-sep {
padding: 0 8px;
color: var(--text-dim);
font-family: var(--font-mono, monospace);
font-size: 14px;
flex-shrink: 0;
user-select: none;
transition: color 0.15s ease;
}
/* Composed address display below inputs — shown when both fields valid */
.me-namespace-address {
font-family: var(--font-mono, monospace);
font-size: 15px;
color: var(--text);
margin-top: 8px;
}
.me-namespace-address-user,
.me-namespace-address-kingdom {
color: var(--text);
}
.me-namespace-sep-inline {
color: var(--text-dim);
}
.me-namespace-hint {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-dim);
margin-top: 4px;
}
/* ── TXT proof panel (dotted kingdom — VESTA-SPEC-152 §4.2) ──────────────────── */
.me-proof-panel {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 2px;
padding: 16px;
margin-top: 12px;
transition: border-top 0.15s ease;
}
/* Success modifier — panel border-top goes green on verified */
.me-proof-panel.me-proof-verified {
border-top: 2px solid var(--green, #4CAF50);
}
.me-proof-separator {
border: none;
border-top: 1px dashed rgba(255,255,255,0.07); /* matches --border intent; dashed requires color value */
margin: 12px 0;
}
.me-proof-panel-label {
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 8px;
}
.me-proof-instruction {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 10px;
}
.me-proof-record {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 2px;
padding: 10px 12px;
font-family: var(--font-mono, monospace);
font-size: 12px;
color: var(--text);
margin-bottom: 12px;
flex-wrap: wrap;
}
.me-proof-record-name {
color: var(--text-dim);
flex-shrink: 0;
}
.me-proof-record-value {
flex: 1;
word-break: break-all;
}
.me-proof-copy-btn {
font-size: 11px;
color: var(--slate-light, #718096);
border: 1px solid var(--border);
border-radius: 2px;
padding: 2px 7px;
background: transparent;
cursor: pointer;
flex-shrink: 0;
transition: color 0.15s ease, border-color 0.15s ease;
}
.me-proof-copy-btn:hover {
color: var(--text);
border-color: var(--text-dim);
}
.me-proof-check-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.me-proof-check-btn {
border: 1px solid var(--border);
background: transparent;
color: var(--text-dim);
font-size: 13px;
padding: 6px 14px;
border-radius: 2px;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.me-proof-check-btn:hover:not(:disabled) {
color: var(--text);
border-color: var(--text-dim);
}
.me-proof-check-btn:disabled {
opacity: 0.45;
cursor: default;
}
.me-proof-status {
font-family: var(--font-mono, monospace);
font-size: 12px;
}
.me-proof-status--checking {
color: var(--text-dim);
}
.me-proof-status--verified {
color: var(--green, #4CAF50);
font-size: 13px;
}
.me-proof-status--failed {
color: var(--error, #E53E3E);
}
.me-proof-retry-note {
font-size: 11px;
color: var(--text-dim);
margin-top: 8px;
font-family: var(--font-mono, monospace);
}
/* Mobile: stack namespace inputs vertically at < 480px */
@media (max-width: 480px) {
.me-namespace-row {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
/* @ separator becomes a prefix on the kingdom row */
.me-namespace-sep {
display: none;
}
#me-namespace-kingdom::before {
content: '@ ';
color: var(--text-dim);
}
}
@media (max-width: 480px) {
.me-word-list {
grid-template-columns: repeat(3, 1fr);
}
}
/* ── Anonymous handle capture (pre-ceremony, anonymous mode only) ────────────── */
.me-handle-capture {
display: flex;
flex-direction: column;
gap: 6px;
}
.me-handle-label {
font-size: 12px;
color: var(--text-dim, #A09E9A);
font-family: var(--font-mono, monospace);
}
.me-handle-input-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.me-handle-input {
background: var(--bg, #0A0A0A);
border: 1px solid var(--border, rgba(255,255,255,0.15));
border-radius: 2px;
padding: 7px 12px;
color: var(--text, #E8E6E1);
font-family: var(--font-mono, monospace);
font-size: 14px;
width: 200px;
outline: none;
transition: border-color 0.15s ease;
}
.me-handle-input:focus {
border-color: var(--accent, #C9A84C);
}
.me-handle-status {
font-size: 11px;
font-family: var(--font-mono, monospace);
opacity: 0.8;
}
.me-handle-status--too-short,
.me-handle-status--invalid,
.me-handle-status--taken {
color: #E06C75;
}
.me-handle-status--checking {
color: var(--text-dim, #A09E9A);
}
.me-handle-status--available {
color: var(--green, #3EAF6A);
}
.me-handle-status--error {
color: var(--accent-dim, #9B7D35);
}
.me-handle-hint {
font-size: 11px;
color: var(--green, #3EAF6A);
font-family: var(--font-mono, monospace);
}
.me-handle-hint--taken {
color: #E06C75;
}
/* Disabled generate button (anonymous mode: button disabled until handle valid) */
.me-stage-cta:disabled,
button.me-stage-cta[disabled] {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ── Mobile ───────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.me-player-header {
gap: 12px;
}
.me-avatar {
width: 36px;
height: 36px;
}
.me-avatar-sigil {
font-size: 16px;
}
.me-player-handle {
font-size: 15px;
}
}
.rituals-state-badge {
display: inline-block;
font-size: 0.72rem;
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.2em 0.6em;
border-radius: 4px;
border: 1px solid transparent;
}
.rituals-state-badge--in-progress {
background: hsla(145, 50%, 40%, 0.18);
border-color: hsla(145, 50%, 40%, 0.40);
color: hsl(145, 50%, 58%);
}
.rituals-state-badge--idle {
background: hsla(35, 60%, 50%, 0.12);
border-color: hsla(35, 60%, 50%, 0.30);
color: hsl(35, 60%, 65%);
}
.rituals-state-badge--overdue {
background: hsla(10, 60%, 50%, 0.14);
border-color: hsla(10, 60%, 50%, 0.35);
color: hsl(10, 60%, 65%);
}
/* Cadence badge */
.rituals-cadence-badge {
display: inline-block;
font-size: 0.70rem;
font-family: var(--font-mono);
color: rgba(255,255,255,0.40);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.09);
border-radius: 4px;
padding: 0.15em 0.55em;
letter-spacing: 0.04em;
text-transform: lowercase;
margin-right: 0.4em;
}/* sovereignty-panel styles — placeholder; CSS migration deferred pending Muse decision */
:root {
--bg: #0D0D0D;
--bg-surface: #111111;
--bg-raised: #171717;
--bg-dark: #0A0A0A;
--text: #E8E6E1;
--text-dim: #A09E9A;
--accent: hsla(222, 92%, 78%, 0.7);
--accent-dim: #9B7D35;
--slate: #4A5568;
--slate-light:#718096;
--green: #3EAF6A;
--border: rgba(255,255,255,0.07);
--border-accent: rgba(201,168,76,0.3);
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--max-width: 960px;
--section-pad: 96px 24px;
}
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
a { color: inherit; text-decoration: none; }
code, pre {
font-family: var(--font-mono);
}
/* --- Hero --- */
.hero {
padding: 80px 0px 96px;
max-width: var(--max-width);
margin: 0 auto;
}
.hero-headline {
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 28px;
}
.hero-subhead {
font-size: 18px;
font-weight: 400;
line-height: 1.65;
color: var(--slate-light);
max-width: 600px;
margin-bottom: 40px;
}
.hero-actions {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
margin-bottom: 48px;
}
.btn-primary {
display: inline-flex;
align-items: center;
background: var(--accent);
color: #0A0A0A;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
padding: 12px 24px;
border-radius: 2px;
transition: background 0.15s;
white-space: nowrap;
}
.btn-primary:hover { background: var(--accent-dim); }
.btn-text {
font-size: 15px;
font-weight: 400;
color: var(--slate-light);
border-bottom: 1px solid var(--slate);
padding-bottom: 1px;
transition: color 0.15s, border-color 0.15s;
}
.btn-text:hover { color: var(--text); border-color: var(--text-dim); }
/* Terminal block */
.hero-terminal {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
}
.terminal-bar {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: var(--bg-raised);
border-bottom: 1px solid var(--border);
position: relative;
}
.terminal-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border);
}
.terminal-title {
margin-left: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--slate);
}
.terminal-body {
padding: 20px 20px;
font-size: 13px;
line-height: 1.7;
overflow-x: auto;
}
/* Copy button */
.copy-button {
background: transparent;
border: none;
padding: 4px 8px;
cursor: pointer;
font-size: 14px;
color: var(--slate-light);
opacity: 0.6;
transition: opacity 0.2s, color 0.2s;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
}
.copy-button:hover {
opacity: 1;
color: var(--accent);
}
.copy-button.copied {
color: #22c55e;
}
.copy-icon {
display: inline-block;
}
.hero-supporting {
font-size: 14px;
color: var(--slate);
}
.hero-supporting code {
font-size: 13px;
color: var(--accent);
}
/* Namespace cards in hero */
.hero-namespaces {
margin-top: 64px;
padding-top: 48px;
border-top: 1px solid var(--border);
}
.namespaces-label {
font-size: 12px;
font-family: var(--font-mono);
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.namespace-cards {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.namespace-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 18px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 2px;
transition: border-color 0.15s;
cursor: pointer;
min-width: 160px;
}
.namespace-card:hover { border-color: var(--border-accent); }
.ns-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ns-name {
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
color: var(--text);
}
.ns-type {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate);
}
.ns-desc {
font-size: 12px;
color: var(--slate-light);
}
.ns-status {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
border-radius: 2px;
white-space: nowrap;
}
.ns-active {
color: var(--green);
background: rgba(62,175,106,0.1);
}
/* --- Alice CTA Section --- */
.section-alice {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-surface) 100%);
border-top: 1px solid var(--border);
padding: 80px 32px;
}
.section-alice-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 64px;
}
.alice-cta-content {
flex: 1;
max-width: 480px;
}
.alice-cta-heading {
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--alice-accent);
margin-bottom: 16px;
}
.alice-cta-body {
font-size: 18px;
color: var(--slate-light);
line-height: 1.65;
margin-bottom: 32px;
}
.btn-alice {
display: inline-flex;
align-items: center;
background: var(--alice-accent);
color: #0A0A0A;
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
padding: 14px 28px;
border-radius: 2px;
transition: background 0.15s;
white-space: nowrap;
}
.btn-alice:hover { background: var(--alice-accent-dark); }
.alice-cta-note {
font-size: 14px;
color: var(--slate);
margin-top: 16px;
}
.alice-cta-visual {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.alice-avatar {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.alice-avatar-ring {
position: absolute;
inset: 0;
border: 2px solid var(--alice-accent);
border-radius: 50%;
opacity: 0.3;
animation: pulse-ring 2s ease-in-out infinite;
}
.alice-avatar-core {
font-size: 48px;
color: var(--alice-accent);
z-index: 1;
}
.alice-cta-label {
font-family: var(--font-mono);
font-size: 13px;
color: var(--slate);
}
@keyframes pulse-ring {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.08); opacity: 0.15; }
}
@media (max-width: 640px) {
.section-alice { padding: 56px 20px; }
.section-alice-inner {
flex-direction: column;
text-align: center;
gap: 40px;
}
.alice-cta-content { max-width: 100%; }
}
/* --- Sections --- */
.section {
padding: var(--section-pad);
border-top: 1px solid var(--border);
}
.section-dark {
background: var(--bg-dark);
}
.section-cta {
background: var(--bg-surface);
}
/* Live Kingdom section — homepage widget */
.section-live {
background: var(--bg-surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.live-kingdom-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.live-kingdom-link {
color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
white-space: nowrap; padding-top: 8px; opacity: 0.8; transition: opacity 0.15s;
}
.live-kingdom-link:hover { opacity: 1; }
/* Avatar row — compact entity presence indicators */
.live-avatars {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-bottom: 20px;
}
.live-avatar {
position: relative;
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 600; color: #fff;
text-decoration: none; overflow: visible;
transition: transform 0.15s, box-shadow 0.15s;
}
.live-avatar img.live-avatar-img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.live-avatar:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.live-avatar--flying {
box-shadow: 0 0 0 2px hsla(var(--entity-hue, 180), 70%, 55%, 0.7),
0 0 12px hsla(var(--entity-hue, 180), 70%, 55%, 0.3);
animation: liveAvatarPulse 2.5s ease-in-out infinite;
}
@keyframes liveAvatarPulse {
0%, 100% { box-shadow: 0 0 0 2px hsla(var(--entity-hue, 180), 70%, 55%, 0.7), 0 0 12px hsla(var(--entity-hue, 180), 70%, 55%, 0.3); }
50% { box-shadow: 0 0 0 3px hsla(var(--entity-hue, 180), 80%, 65%, 0.9), 0 0 20px hsla(var(--entity-hue, 180), 80%, 65%, 0.4); }
}
.live-avatar-dot {
position: absolute; bottom: 0; right: 0;
width: 10px; height: 10px; border-radius: 50%;
background: #5bd5b5; border: 2px solid var(--bg-surface);
animation: liveAvatarDot 1.5s ease-in-out infinite;
}
@keyframes liveAvatarDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.live-avatar-rest {
font-size: 11px; color: var(--text-dim); padding-left: 4px;
}
/* Compact activity feed */
.live-feed {
display: flex; flex-direction: column; gap: 6px;
}
.live-feed-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border-radius: 4px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border); font-size: 12px;
}
.live-feed-entity {
font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.live-feed-badge {
font-size: 9px; padding: 1px 5px; border-radius: 3px;
text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; flex-shrink: 0;
}
.live-feed-badge--flight { background: #1a3a3a; color: #5bd5b5; }
.live-feed-badge--notice { background: #1a3a5c; color: #5b9bd5; }
.live-feed-badge--warning { background: #4a3a1a; color: #d4a535; }
.live-feed-badge--error { background: #4a1a1a; color: #d55b5b; }
.live-feed-badge--request { background: #3a1a4a; color: #a55bd5; }
.live-feed-badge--alert { background: #4a3a1a; color: #d4a535; }
.live-feed-body {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--text-dim);
}
.live-feed-time {
font-size: 10px; color: var(--slate); flex-shrink: 0; font-family: var(--font-mono);
}
.live-empty {
color: var(--slate-light); font-size: 13px; font-style: italic; padding: 8px 0;
}
.section-inner {
max-width: var(--max-width);
margin: 0 auto;
}
.section-heading {
font-size: clamp(24px, 3.5vw, 40px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--text);
margin-bottom: 32px;
}
.section-subhead {
font-size: 17px;
color: var(--slate-light);
margin-bottom: 48px;
max-width: 600px;
line-height: 1.65;
}
/* --- Prose --- */
.prose p {
font-size: 17px;
line-height: 1.7;
color: var(--text-dim);
margin-bottom: 20px;
}
.prose p:last-child { margin-bottom: 0; }
.prose em { color: var(--text); font-style: italic; }
.prose code {
font-size: 14px;
color: var(--accent);
background: rgba(201,168,76,0.08);
padding: 1px 6px;
border-radius: 2px;
}
.prose pre {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 20px;
overflow-x: auto;
margin: 24px 0;
}
.prose pre code {
background: none;
padding: 0;
font-size: 13px;
color: var(--text-dim);
}
.prose h1, .prose h2, .prose h3, .prose h4 {
color: var(--text);
line-height: 1.3;
margin-top: 40px;
margin-bottom: 12px;
}
.prose h1 { font-size: 28px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 18px; }
.prose h4 { font-size: 16px; }
.prose ul, .prose ol {
margin: 0 0 20px 24px;
color: var(--text-dim);
font-size: 17px;
line-height: 1.7;
}
.prose li { margin-bottom: 6px; }
.prose blockquote {
border-left: 3px solid var(--accent);
margin: 24px 0;
padding: 12px 20px;
background: rgba(201,168,76,0.04);
color: var(--text-dim);
font-style: italic;
}
.prose a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.prose a:hover { color: var(--text); }
.prose hr {
border: none;
border-top: 1px solid var(--border);
margin: 40px 0;
}
.prose strong { color: var(--text); }
/* Directory tree diagram */
.arch-diagram {
margin-top: 48px;
}
.dir-tree {
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
padding: 24px 28px;
font-size: 13px;
line-height: 1.8;
border-radius: 0 2px 2px 0;
overflow-x: auto;
color: var(--text);
}
/* Pull quote */
.pull-quote {
margin-top: 48px;
font-size: 22px;
font-weight: 700;
color: var(--accent);
letter-spacing: -0.01em;
}
.team-note {
font-size: 15px;
color: var(--slate-light);
line-height: 1.65;
border-top: 1px solid var(--border);
padding-top: 32px;
}
/* --- Get Started / Code block --- */
.code-block {
background: var(--bg);
border: 1px solid var(--border);
border-left: 2px solid var(--accent);
padding: 20px 24px;
margin-bottom: 16px;
border-radius: 0 2px 2px 0;
max-width: 640px;
}
.code-block pre {
font-size: 14px;
line-height: 1.7;
overflow-x: auto;
}
.code-caption {
font-size: 14px;
color: var(--slate);
margin-bottom: 56px;
}
.code-caption code {
font-size: 13px;
color: var(--accent);
}
/* --- OS Selector --- */
.os-selector {
display: flex;
gap: 0;
margin-bottom: 24px;
border-radius: 24px;
border: 1px solid var(--border);
overflow: hidden;
width: fit-content;
}
.os-selector-tab {
background: transparent;
border: none;
padding: 12px 20px;
font-family: var(--font-body);
font-size: 14px;
color: var(--slate-light);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.os-selector-tab:hover {
background: rgba(255, 255, 255, 0.05);
}
.os-selector-tab--active {
background: var(--accent);
color: #0A0A0A;
font-weight: 600;
}
.os-selector-content {
margin-bottom: 24px;
}
.install-phase {
margin-top: 24px;
}
.install-tagline {
font-size: 14px;
color: var(--slate);
margin-top: 12px;
margin-bottom: 24px;
}
/* OS-specific content visibility */
.os-selector-content--linux,
.os-selector-content--macos,
.os-selector-content--windows {
display: block;
}
.os-selector-content--macos[hidden],
.os-selector-content--windows[hidden] {
display: none;
}
/* Windows warning */
.os-warning {
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 2px;
padding: 20px 24px;
margin-bottom: 16px;
}
.os-warning-text {
font-size: 15px;
color: var(--text-dim);
line-height: 1.65;
margin-bottom: 12px;
}
.os-warning-text:last-child {
margin-bottom: 0;
}
.os-warning-text strong {
color: var(--text);
}
.os-warning-list {
margin: 12px 0 16px 20px;
color: var(--text-dim);
font-size: 15px;
line-height: 1.7;
}
.os-warning-list li {
margin-bottom: 6px;
}
.os-warning-list a {
color: var(--accent);
text-decoration: underline;
}
/* Paths grid */
.paths-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.path-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 24px;
border: 1px solid var(--border);
border-radius: 2px;
}
.path-card-accent {
border-color: var(--border-accent);
background: rgba(201,168,76,0.04);
}
.path-heading {
font-size: 16px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.path-body {
font-size: 14px;
color: var(--slate-light);
line-height: 1.65;
flex: 1;
}
.path-body code {
font-size: 13px;
color: var(--accent);
background: rgba(201,168,76,0.08);
padding: 1px 5px;
border-radius: 2px;
}
.path-link {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slate);
transition: color 0.15s;
}
.path-link:hover { color: var(--text); }
.path-link-accent {
display: inline-flex;
align-items: center;
background: var(--accent);
color: #0A0A0A;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
padding: 10px 16px;
border-radius: 2px;
margin-top: 4px;
transition: background 0.15s;
}
.path-link-accent:hover { background: var(--accent-dim); }
/* --- Terminal helpers --- */
.t-prompt { color: var(--accent); user-select: none; }
.t-dim { color: var(--slate); }
/* --- Footer --- */
.site-footer {
padding: 64px 32px;
border-top: 1px solid var(--border);
text-align: center;
}
.footer-tagline {
font-size: 14px;
color: var(--slate-light);
margin-bottom: 24px;
font-style: italic;
}
.footer-links {
display: flex;
justify-content: center;
gap: 32px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.footer-links a {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slate);
transition: color 0.15s;
}
.footer-links a:hover { color: var(--text); }
.footer-meta {
font-size: 12px;
color: var(--slate);
}
/* --- Responsive --- */
@media (max-width: 640px) {
.site-nav { padding: 20px 20px; }
.hero { padding: 48px 20px 64px; }
.section { padding: 64px 20px; }
.site-footer { padding: 48px 20px; }
.hero-actions { gap: 20px; }
.footer-links { gap: 20px; }
}
/* blog → src/client/blog/styles.css */
/* ============================================================
Alice — 12-level learning journey
Warm gold palette, conversation-first, mobile-first
Design: Muse alice-ui-design-brief.md
============================================================ */
.alice-shell {
min-height: 100vh;
background: var(--alice-bg);
color: var(--alice-text);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.65;
}
/* --- Nav --- */
.alice-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--alice-border);
position: sticky;
top: 0;
background: var(--alice-bg);
z-index: 10;
}
.alice-back {
background: none;
border: none;
color: var(--alice-subtle);
font-size: 14px;
cursor: pointer;
font-family: var(--font-body);
padding: 0;
text-decoration: none;
transition: color 0.15s;
}
.alice-back:hover { color: var(--alice-text); }
.alice-nav-title {
font-family: var(--font-mono);
font-size: 13px;
color: var(--alice-subtle);
}
.alice-nav-progress {
font-family: var(--font-mono);
font-size: 12px;
color: var(--alice-accent);
padding-left: 12px;
border-left: 1px solid var(--alice-border);
margin-left: 12px;
}
.alice-nav-foundations {
font-size: 12px;
color: var(--alice-subtle);
font-family: var(--font-mono);
letter-spacing: 0.04em;
opacity: 0.7;
padding-left: 12px;
border-left: 1px solid var(--alice-border);
margin-left: 12px;
}
@media (max-width: 400px) {
.alice-nav-foundations { display: none; }
}
/* --- Mark --- */
.alice-mark {
color: var(--alice-accent);
font-size: 32px;
text-align: center;
margin-bottom: 24px;
}
.alice-mark--large { font-size: 56px; }
/* --- Intro --- */
.alice-intro {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 40px 24px;
}
.alice-intro-inner {
max-width: 480px;
width: 100%;
}
.alice-bubble {
background: var(--alice-surface);
border: 1px solid var(--alice-border);
border-top: 3px solid var(--alice-accent);
border-radius: 2px;
padding: 28px 32px;
margin-bottom: 32px;
}
.alice-bubble p { margin-bottom: 16px; }
.alice-bubble p:last-child { margin-bottom: 0; }
.alice-bubble--intro p { font-size: 18px; }
.alice-bubble--grad p { font-size: 17px; }
.alice-name {
font-family: var(--font-mono);
font-size: 13px;
color: var(--alice-accent);
margin-bottom: 16px !important;
letter-spacing: 0.05em;
}
.alice-intro-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* --- Buttons --- */
.alice-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--alice-accent);
color: #0A0A0A;
font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
padding: 14px 32px;
border: none;
border-radius: 2px;
cursor: pointer;
transition: background 0.15s;
width: 100%;
max-width: 320px;
}
.alice-btn-primary:hover { background: var(--alice-accent-dark); }
.alice-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--alice-accent);
color: var(--alice-accent);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
padding: 12px 28px;
border-radius: 2px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.alice-btn-secondary:hover { background: rgba(244,184,68,0.08); }
.alice-link-subtle {
font-size: 14px;
color: var(--alice-subtle);
text-decoration: none;
border-bottom: 1px solid var(--alice-border);
padding-bottom: 1px;
transition: color 0.15s;
}
.alice-link-subtle:hover { color: var(--alice-text); }
/* --- Journey --- */
.alice-journey { padding-bottom: 80px; }
.alice-journey-inner {
max-width: 640px;
margin: 0 auto;
padding: 40px 24px;
}
.alice-journey-heading {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--alice-text);
margin-bottom: 32px;
}
.alice-level-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 32px;
}
.alice-level-row {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: var(--alice-surface);
border: 1px solid var(--alice-border);
border-radius: 2px;
cursor: pointer;
transition: border-color 0.15s;
}
.alice-level-row:hover { border-color: var(--alice-accent); }
.level--locked { opacity: 0.45; cursor: default; }
.level--locked:hover { border-color: var(--alice-border); }
.level--done { opacity: 0.7; }
.level--active { border-color: rgba(244,184,68,0.3); }
.alice-level-icon {
font-size: 18px;
color: var(--alice-accent);
width: 24px;
text-align: center;
flex-shrink: 0;
}
.level--done .alice-level-icon { color: var(--alice-success); }
.level--locked .alice-level-icon { color: var(--alice-subtle); }
.alice-level-info { flex: 1; }
.alice-level-title {
font-size: 15px;
font-weight: 600;
color: var(--alice-text);
margin-bottom: 2px;
}
.alice-level-meta {
font-size: 12px;
color: var(--alice-subtle);
font-family: var(--font-mono);
}
.alice-btn-level {
background: none;
border: 1px solid var(--alice-accent);
color: var(--alice-accent);
font-family: var(--font-body);
font-size: 13px;
padding: 6px 14px;
border-radius: 2px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s;
flex-shrink: 0;
}
.alice-btn-level:hover { background: rgba(244,184,68,0.1); }
.alice-btn-level--done { border-color: var(--alice-subtle); color: var(--alice-subtle); }
.alice-progress-note {
font-size: 13px;
color: var(--alice-subtle);
font-family: var(--font-mono);
text-align: center;
}
/* --- Two-column layout (profile + chat) --- */
.alice-layout {
display: flex;
flex: 1;
min-height: 0;
overflow: hidden;
}
.alice-profile {
width: 296px;
flex-shrink: 0;
padding: 24px;
border-right: 1px solid var(--alice-border);
overflow-y: auto;
position: sticky;
top: 53px;
align-self: flex-start;
max-height: calc(100vh - 53px);
}
.alice-profile-avatar {
margin-bottom: 16px;
}
.alice-avatar-circle {
width: 260px;
height: 260px;
border-radius: 50%;
background: var(--alice-surface);
border: 1px solid var(--alice-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
color: var(--alice-accent);
}
.alice-profile-name {
font-size: 24px;
font-weight: 700;
color: var(--alice-text);
margin: 0 0 2px;
line-height: 1.3;
}
.alice-profile-handle {
font-size: 14px;
color: var(--alice-subtle);
font-family: var(--font-mono);
margin: 0 0 16px;
}
.alice-profile-bio {
font-size: 15px;
color: var(--alice-text);
line-height: 1.55;
margin: 0 0 16px;
opacity: 0.85;
}
.alice-profile-stats {
display: flex;
gap: 16px;
padding: 12px 0;
margin-bottom: 16px;
border-top: 1px solid var(--alice-border);
border-bottom: 1px solid var(--alice-border);
}
.alice-profile-stat {
display: flex;
align-items: baseline;
gap: 4px;
}
.alice-stat-value {
font-size: 16px;
font-weight: 700;
color: var(--alice-text);
}
.alice-stat-label {
font-size: 13px;
color: var(--alice-subtle);
}
.alice-profile-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.alice-profile-detail {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--alice-subtle);
}
.alice-detail-icon {
width: 16px;
text-align: center;
flex-shrink: 0;
color: var(--alice-subtle);
}
.alice-detail-link {
color: var(--alice-accent);
text-decoration: none;
}
.alice-detail-link:hover {
text-decoration: underline;
}
/* --- Chat main area --- */
.alice-chat-main {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
/* --- Lesson conversation --- */
.alice-lesson {
display: flex;
flex-direction: column;
height: 100vh;
}
.alice-conversation {
flex: 1;
overflow-y: auto;
padding: 32px 24px 120px;
width: 100%;
}
.alice-message {
margin-bottom: 28px;
}
.alice-msg-sender {
font-family: var(--font-mono);
font-size: 12px;
color: var(--alice-accent);
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.alice-message--human {
text-align: right;
}
.alice-message--human .alice-msg-sender {
color: var(--alice-subtle);
}
.alice-message--human .alice-msg-body {
display: inline-block;
text-align: left;
background: rgba(244,184,68,0.06);
padding: 10px 16px;
border-radius: 4px;
max-width: 85%;
}
.alice-msg-body {
font-size: 17px;
line-height: 1.7;
color: var(--alice-text);
}
.alice-msg-body p { margin: 0 0 14px; }
.alice-msg-body p:last-child { margin-bottom: 0; }
.alice-msg-body em { color: var(--alice-accent); font-style: normal; font-weight: 600; }
.alice-msg-body strong { color: var(--alice-text); font-weight: 600; }
.alice-msg-body code {
font-family: var(--font-mono);
font-size: 14px;
color: var(--alice-accent);
background: rgba(244,184,68,0.08);
padding: 1px 6px;
border-radius: 2px;
}
.alice-msg-body pre {
background: rgba(0,0,0,0.3);
border: 1px solid var(--alice-border);
border-radius: 4px;
padding: 14px;
overflow-x: auto;
margin: 12px 0;
}
.alice-msg-body pre code {
background: none;
padding: 0;
color: var(--alice-text);
font-size: 13px;
}
.alice-msg-body ul, .alice-msg-body ol {
margin: 0 0 14px 22px;
}
.alice-msg-body li { margin-bottom: 4px; }
.alice-btn-continue {
display: block;
width: 100%;
max-width: 200px;
background: none;
border: 1px solid var(--alice-border);
color: var(--alice-text);
font-family: var(--font-body);
font-size: 14px;
padding: 10px 20px;
border-radius: 2px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
margin-top: 8px;
}
.alice-btn-continue:hover { border-color: var(--alice-accent); color: var(--alice-accent); }
/* --- Checkpoint --- */
.alice-checkpoint {
margin-top: 8px;
padding: 24px;
background: var(--alice-surface);
border: 1px solid var(--alice-border);
border-left: 3px solid var(--alice-accent);
border-radius: 0 2px 2px 0;
}
.alice-checkpoint-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--alice-accent);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.alice-checkpoint-question {
font-size: 16px;
color: var(--alice-text);
line-height: 1.6;
margin-bottom: 20px;
}
.alice-checkpoint-input {
width: 100%;
background: var(--alice-bg);
border: 1px solid var(--alice-border);
color: var(--alice-text);
font-family: var(--font-body);
font-size: 15px;
padding: 12px 16px;
border-radius: 2px;
resize: vertical;
min-height: 80px;
margin-bottom: 16px;
transition: border-color 0.15s;
}
.alice-checkpoint-input:focus {
outline: none;
border-color: var(--alice-accent);
}
.alice-checkpoint-input::placeholder { color: var(--alice-subtle); }
/* --- Chat input bar --- */
.alice-chat-input-bar {
display: flex;
align-items: flex-end;
gap: 8px;
padding: 12px 24px;
background: var(--alice-bg);
border-top: 1px solid var(--alice-border);
z-index: 10;
}
.alice-chat-complete-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 16px 24px;
background: var(--alice-bg);
border-top: 1px solid var(--alice-accent);
z-index: 10;
}
.alice-complete-mark {
color: var(--alice-accent);
font-size: 18px;
}
.alice-complete-text {
color: var(--alice-accent);
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
}
.alice-btn-next-level {
background: var(--alice-accent);
color: var(--alice-bg);
border: none;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: opacity 0.15s;
}
.alice-btn-next-level:hover {
opacity: 0.85;
}
.alice-chat-input {
flex: 1;
background: var(--alice-surface);
border: 1px solid var(--alice-border);
color: var(--alice-text);
font-family: var(--font-body);
font-size: 15px;
padding: 10px 14px;
border-radius: 4px;
resize: none;
overflow-y: auto;
max-height: 120px;
line-height: 1.5;
transition: border-color 0.15s;
}
.alice-chat-input:focus {
outline: none;
border-color: var(--alice-accent);
}
.alice-chat-input::placeholder { color: var(--alice-subtle); }
.alice-btn-send {
background: var(--alice-accent);
color: var(--alice-bg);
border: none;
font-size: 18px;
width: 40px;
height: 40px;
border-radius: 4px;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s;
}
.alice-btn-send:hover { background: var(--alice-accent-dark); }
.alice-msg-streaming {
opacity: 0.9;
}
.alice-msg-thinking {
color: var(--alice-subtle);
animation: alice-pulse 1.2s ease-in-out infinite;
}
@keyframes alice-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* --- Graduation --- */
.alice-graduation { padding-bottom: 80px; }
.alice-graduation-inner {
max-width: 560px;
margin: 0 auto;
padding: 40px 24px;
}
.alice-certificate {
background: var(--alice-surface);
border: 1px solid var(--alice-accent);
border-radius: 2px;
padding: 32px;
margin: 32px 0;
}
.alice-cert-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--alice-border);
}
.alice-cert-mark {
color: var(--alice-accent);
font-size: 24px;
}
.alice-cert-title {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--alice-text);
}
.alice-cert-body { display: flex; flex-direction: column; gap: 20px; }
.alice-cert-line {
font-size: 15px;
color: var(--alice-text);
line-height: 1.6;
}
.alice-cert-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.alice-cert-label {
font-family: var(--font-mono);
font-size: 11px;
color: var(--alice-subtle);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.alice-cert-value {
font-size: 14px;
color: var(--alice-text);
}
.alice-cert-sig { padding-top: 16px; border-top: 1px solid var(--alice-border); }
.alice-cert-pgp {
font-family: var(--font-mono);
font-size: 12px;
color: var(--alice-subtle);
line-height: 1.5;
margin-top: 8px;
word-break: break-all;
white-space: pre-wrap;
}
.alice-grad-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.alice-grad-note {
font-size: 14px;
color: var(--alice-subtle);
text-align: center;
line-height: 1.6;
}
/* --- Alice name prompt --- */
.alice-name-prompt-form {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 360px;
margin: 20px auto 8px;
}
.alice-name-input {
background: #1a1a1a;
border: 1px solid var(--alice-border);
border-radius: 6px;
color: var(--alice-text);
font-size: 16px;
padding: 12px 14px;
outline: none;
transition: border-color 0.15s;
width: 100%;
box-sizing: border-box;
}
.alice-name-input:focus {
border-color: var(--alice-accent);
}
.alice-name-prompt-note {
font-size: 13px;
color: var(--alice-subtle);
text-align: center;
line-height: 1.5;
margin-top: 4px;
}
/* --- Alice locked level affordance --- */
.alice-locked-affordance {
background: #111;
border: 1px solid var(--alice-border);
border-top: none;
padding: 14px 16px 16px;
margin-top: -1px;
}
.alice-locked-affordance-msg {
font-size: 14px;
color: var(--alice-subtle);
line-height: 1.5;
margin: 0 0 8px;
}
.alice-locked-assess-btn {
background: transparent;
border: none;
color: var(--alice-accent);
font-size: 14px;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
}
.alice-locked-assess-btn:hover {
color: var(--alice-accent-dark);
}
/* --- Alice certificate UUID --- */
.alice-cert-uuid {
font-family: 'Space Mono', monospace, monospace;
font-size: 12px;
word-break: break-all;
}
/* --- Alice responsive --- */
@media (max-width: 768px) {
.alice-layout {
flex-direction: column;
}
.alice-profile {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--alice-border);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 20px;
padding: 16px 20px;
}
.alice-avatar-circle {
width: 64px;
height: 64px;
font-size: 24px;
}
.alice-profile-avatar {
margin-bottom: 0;
}
.alice-profile-name {
font-size: 18px;
margin: 0;
}
.alice-profile-handle {
margin: 0;
width: 100%;
flex-basis: 100%;
display: none;
}
.alice-profile-bio {
display: none;
}
.alice-profile-stats {
border: none;
margin: 0;
padding: 0;
}
.alice-profile-details {
display: none;
}
.alice-profile {
position: static;
max-height: none;
}
.alice-conversation {
padding-top: 16px;
}
}
@media (max-width: 640px) {
.alice-bubble { padding: 20px 20px; }
.alice-journey-inner { padding: 24px 16px; }
.alice-conversation { padding: 24px 16px 100px; }
.alice-graduation-inner { padding: 24px 16px; }
.alice-cert-meta { grid-template-columns: 1fr; }
.alice-chat-input-bar { padding: 10px 16px; }
}
/* ── Not Found (404) ───────────────────────────────────────────────────────── */
.not-found {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
}
.not-found-content {
text-align: center;
padding: 2rem;
}
.not-found-code {
font-size: 8rem;
font-weight: 800;
color: var(--accent);
line-height: 1;
margin: 0 0 1rem;
font-family: 'JetBrains Mono', monospace;
}
.not-found-message {
font-size: 1.25rem;
color: var(--text-dim);
margin: 0 0 2rem;
}
.not-found-message strong {
color: var(--text);
}
.not-found-link {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--accent);
color: var(--bg);
font-weight: 700;
text-decoration: none;
border-radius: 4px;
transition: background 0.2s ease;
}
.not-found-link:hover {
background: var(--accent-dim);
}
/* ── Namespace Page ─────────────────────────────────────────────────────────── */
.namespace-page {
min-height: 100vh;
background: var(--bg);
padding: 4rem 2rem;
}
.namespace-header {
text-align: center;
margin-bottom: 3rem;
}
.namespace-name {
font-size: 4rem;
font-weight: 800;
color: var(--accent);
margin: 0;
font-family: 'JetBrains Mono', monospace;
}
.namespace-domain {
font-size: 1.25rem;
color: var(--text-dim);
margin: 0.5rem 0 0;
}
.namespace-content {
max-width: 600px;
margin: 0 auto;
}
.namespace-section {
background: var(--bg-surface);
border: 1px solid var(--bg-raised);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.namespace-section h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
margin: 0 0 0.75rem;
}
.namespace-section p {
color: var(--text-dim);
margin: 0;
}
.namespace-link {
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.namespace-link:hover {
text-decoration: underline;
}
/* ============================================================
Entity Profile Pages — /:name
Mirrors Alice's two-column layout, own CSS namespace.
Design system: Muse. Implementation: Vulcan. 2026-04-15.
============================================================ */
.entity-shell {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
height: 100vh;
background: var(--bg);
color: var(--text);
}
.entity-nav {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
border-bottom: 1px solid var(--border);
background: var(--bg);
position: sticky;
top: 0;
z-index: 100;
border-bottom-color: color-mix(in srgb, var(--entity-accent, var(--accent)) 25%, transparent);
}
.entity-back {
font-size: 14px;
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s;
}
.entity-back:hover {
color: var(--accent);
}
.entity-nav-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
/* --- Two-column layout --- */
.entity-layout {
display: flex;
flex: 1;
min-height: 0;
overflow-y: auto; /* single scroll context — both columns scroll together */
padding-top: 69px;
}
/* Left sidebar, avatar, stats, details, bonds, actions — moved to kingofalldata:brand-components client/entity/profile/medium/styles.css */
.entity-btn-conversation {
display: block;
width: 100%;
padding: 8px 16px;
background: transparent;
color: var(--accent);
font-size: 14px;
font-weight: 600;
border: 1px solid var(--border-accent);
border-radius: 6px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.entity-btn-conversation:hover {
border-color: var(--accent);
color: var(--accent);
}
/* --- Right: activity feed --- */
.entity-activity-main {
flex: 1;
overflow-y: visible; /* single scroll context — no independent column scroll */
padding: 24px;
min-width: 0;
}
/* ── Public last-5 flights block (entity profile, above insider gate) ─────── */
.entity-public-flights {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.entity-public-flights-heading {
font-size: 13px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.entity-public-flight-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
text-decoration: none;
color: var(--text);
transition: color 0.12s;
}
.entity-public-flight-row:last-child {
border-bottom: none;
}
.entity-public-flight-row:hover {
color: var(--entity-accent, var(--accent));
}
.entity-public-flight-slug {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dim);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entity-public-flight-status {
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
padding: 2px 6px;
border-radius: 2px;
flex-shrink: 0;
}
.entity-public-flight-status--landed {
color: var(--entity-accent, var(--accent));
border: 1px solid var(--entity-accent, var(--accent));
opacity: 0.7;
}
.entity-public-flight-status--flying {
color: #5bd5b5;
border: 1px solid rgba(91, 213, 181, 0.4);
}
.entity-public-flight-duration {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-dim);
flex-shrink: 0;
}
.entity-public-flight-time {
font-size: 11px;
color: var(--slate);
flex-shrink: 0;
}
.entity-activity-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.entity-activity-title {
font-size: 18px;
font-weight: 700;
color: var(--text);
}
.entity-activity-note {
font-size: 13px;
color: var(--text-dim);
font-family: var(--font-mono);
}
.entity-activity-feed {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
.entity-activity-entry {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.entity-activity-icon {
font-size: 18px;
color: var(--entity-accent, var(--accent));
flex-shrink: 0;
width: 24px;
text-align: center;
margin-top: 2px;
}
.entity-activity-content {
flex: 1;
min-width: 0;
}
.entity-activity-type {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
display: block;
margin-bottom: 4px;
}
.entity-activity-desc {
font-size: 14px;
color: var(--text);
line-height: 1.5;
margin: 0 0 6px;
}
.entity-activity-link {
font-size: 13px;
color: var(--accent);
text-decoration: none;
font-family: var(--font-mono);
}
.entity-activity-link:hover {
text-decoration: underline;
}
.entity-activity-time {
font-size: 12px;
color: var(--text-dim);
font-family: var(--font-mono);
flex-shrink: 0;
white-space: nowrap;
}
.entity-activity-stub-note {
font-size: 13px;
color: var(--text-dim);
font-family: var(--font-mono);
text-align: center;
padding: 16px;
border: 1px dashed var(--border);
border-radius: 6px;
}
/* --- 404 state --- */
.entity-not-found {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 64px 24px;
text-align: center;
}
.entity-not-found-mark {
font-size: 48px;
margin-bottom: 24px;
opacity: 0.4;
}
.entity-not-found-title {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
}
.entity-not-found-title code {
font-family: var(--font-mono);
color: var(--accent);
}
.entity-not-found-body {
font-size: 15px;
color: var(--text-dim);
margin-bottom: 32px;
}
.entity-not-found-link {
font-size: 14px;
color: var(--accent);
text-decoration: none;
}
.entity-not-found-link:hover {
text-decoration: underline;
}
/* Avatar glow + flight status block — moved to kingofalldata:brand-components client/entity/profile/medium/styles.css */
/* --- Responsive: collapse to single column on narrow viewports --- */
/* .entity-profile and .entity-avatar-circle responsive rules moved to
kingofalldata:brand-components client/entity/profile/medium/styles.css */
@media (max-width: 768px) {
.entity-layout {
flex-direction: column;
overflow-y: auto;
}
.entity-activity-main {
padding: 24px 16px;
}
}
/* ============================================================
theTeam — flight awareness additions
============================================================ */
.entity-status.flying {
color: #5bd5b5;
background: rgba(91,213,181,0.1);
position: relative;
}
.entity-status.flying::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #5bd5b5;
margin-right: 5px;
animation: pulse-dot 1.4s ease-in-out infinite;
vertical-align: middle;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.entity-flight-row {
display: flex;
align-items: center;
gap: 10px;
}
.entity-flight-brief {
font-family: var(--font-mono);
font-size: 11px;
color: #5bd5b5;
opacity: 0.85;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.entity-flight-elapsed {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
}
/* ── EntityChat component ──────────────────────────────────────────────────── */
.entity-panel-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.entity-panel-tab {
padding: 10px 20px;
font-size: 13px;
font-family: var(--font-body);
color: var(--text-dim);
cursor: pointer;
border: none;
background: none;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.entity-panel-tab--active {
color: var(--text);
border-bottom-color: var(--entity-accent, var(--accent));
}
.entity-panel-tab:hover:not(.entity-panel-tab--active) {
color: var(--text);
}
/* Fade-in animation for tab content */
.entity-activity-main > *:not(.entity-panel-tabs) {
animation: entity-tab-fade 0.15s ease-out;
}
@keyframes entity-tab-fade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Avatar thinking pulse (while entity is responding in chat) */
.entity-avatar-thinking {
animation: entity-avatar-pulse 1.4s ease-in-out infinite;
}
/* ============================================================
Entity card stats — live index numbers on team grid cards
============================================================ */
.entity-card-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 4px;
}
.entity-card-stat {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
opacity: 0.75;
}
/* Entity profile — emissions feed */
.entity-emissions-feed {
margin-top: 24px;
}
.entity-section-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted, #7a8a99);
font-family: var(--font-mono, monospace);
margin: 0 0 10px 0;
}
.entity-emission-row {
display: flex;
align-items: baseline;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
font-size: 13px;
line-height: 1.4;
}
.entity-emission-row--error { border-left: 2px solid rgba(213,91,91,0.4); padding-left: 6px; }
.entity-emission-row--warning { border-left: 2px solid rgba(212,165,53,0.3); padding-left: 6px; }
.entity-emission-type-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 1px 5px;
border-radius: 3px;
flex-shrink: 0;
font-family: var(--font-mono, monospace);
}
.entity-emission-type-badge--notice { color: #5b9bd5; background: rgba(91,155,213,0.12); }
.entity-emission-type-badge--warning { color: #d4a535; background: rgba(212,165,53,0.12); }
.entity-emission-type-badge--error { color: #d55b5b; background: rgba(213,91,91,0.12); }
.entity-emission-type-badge--request { color: #a55bd5; background: rgba(165,91,213,0.12); }
.entity-emission-body {
flex: 1;
color: var(--text, #c8d4e0);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entity-emission-time {
font-size: 11px;
color: var(--text-muted, #7a8a99);
flex-shrink: 0;
font-family: var(--font-mono, monospace);
}
/* Quiz-result card — dedicated render for QC emissions */
.entity-quiz-card {
padding: 10px 12px;
margin: 6px 0;
border-radius: 6px;
background: rgba(255,255,255,0.03);
border-left: 3px solid var(--text-muted, #7a8a99);
}
.entity-quiz-card--pass { border-left-color: #6bbd6b; background: rgba(107,189,107,0.05); }
.entity-quiz-card--partial { border-left-color: #d4a535; background: rgba(212,165,53,0.05); }
.entity-quiz-card--fail { border-left-color: #d55b5b; background: rgba(213,91,91,0.05); }
.entity-quiz-header {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
}
.entity-quiz-badge {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
padding: 1px 6px;
border-radius: 3px;
color: #a55bd5;
background: rgba(165,91,213,0.12);
font-family: var(--font-mono, monospace);
}
.entity-quiz-name {
flex: 1;
font-size: 13px;
color: var(--text, #c8d4e0);
font-weight: 500;
}
.entity-quiz-score {
font-size: 13px;
font-family: var(--font-mono, monospace);
color: var(--text, #c8d4e0);
font-weight: 600;
}
.entity-quiz-time {
font-size: 11px;
color: var(--text-muted, #7a8a99);
font-family: var(--font-mono, monospace);
}
.entity-quiz-bars {
display: flex;
gap: 2px;
height: 18px;
align-items: stretch;
font-family: var(--font-mono, monospace);
font-size: 10px;
}
.entity-quiz-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: 3px;
color: var(--text, #c8d4e0);
font-weight: 600;
min-width: 24px;
}
.entity-quiz-bar--pass { background: rgba(107,189,107,0.25); }
.entity-quiz-bar--partial { background: rgba(212,165,53,0.25); }
.entity-quiz-bar--fail { background: rgba(213,91,91,0.25); }
.entity-quiz-bar--timeout { background: rgba(122,138,153,0.25); }
/* access/card shell → src/client/access/card/styles.css */
/* Phase 1b: Muse sponsor CTA — btn-sponsor-path (cross-component: access/card + disclosure-dashboard) */
.btn-sponsor-path {
display: inline-flex;
align-items: center;
background: var(--accent, #C9A84C);
color: #0A0A0A;
font-family: var(--font-body, 'Inter'), sans-serif;
font-size: 14px;
font-weight: 700;
padding: 8px 16px;
border-radius: 2px;
text-decoration: none;
transition: background 0.15s;
}
.btn-sponsor-path:hover {
background: var(--accent-dim, #9B7D35);
}
/* access/card scorecard trigger → src/client/access/card/styles.css */
/* access/scorecard-inline → src/client/access/scorecard-inline/styles.css */
/* team grid: subtle sign-in hint when bonds/keys are gated */
.entity-card-stat-hint {
font-size: 10px;
color: var(--slate, #4A5568);
text-decoration: none;
letter-spacing: 0.01em;
transition: color 0.15s;
}
.entity-card-stat-hint:hover {
color: var(--accent-dim, #9B7D35);
}
/* disclosure-dashboard → src/client/disclosure-dashboard/disclosure-dashboard/styles.css */
/* =======================================================
Phase 5 — Integration polish
Muse R1 §1 (XP tick), §5 (group sigils), §6 (harness ambient, live dot)
======================================================= */
.harness-ambient {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate-light);
padding: 8px 0;
border-top: 1px solid var(--border);
margin-top: 12px;
}
.entity-card-avatar img{
width: 100%;
height: 100%;
object-fit: cover;
}
.entity-card-avatar-wrap {
position: relative;
display: inline-block;
}
.entity-live-dot {
position: absolute;
top: 0;
right: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--entity-accent, var(--accent));
animation: live-dot-pulse 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes live-dot-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.9); }
}
/* group-sigil, leaf-card-tick → src/client/disclosure-dashboard/disclosure-dashboard/styles.css */
/* sovereign-login → src/client/sovereign-login/shell/styles.css */
/* ── Last-landing banner ─────────────────────────────────────────────────── */
@keyframes last-landing-breathe {
0% { opacity: 0.85; }
50% { opacity: 1.0; }
100% { opacity: 0.85; }
}
.last-landing-banner {
width: 100%;
background: hsla(var(--entity-hue, 0), 40%, 18%, 0.55);
border-bottom: 1px solid hsla(var(--entity-hue, 0), 40%, 45%, 0.25);
padding: 0.38rem 1.25rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: hsla(var(--entity-hue, 0), 30%, 75%, 0.9);
display: flex;
align-items: center;
gap: 0.5rem;
min-height: 2rem;
animation: last-landing-breathe 5s ease-in-out infinite;
}
.last-landing-glyph {
opacity: 0.7;
flex-shrink: 0;
}
.last-landing-link {
display: flex;
align-items: center;
gap: 0.4rem;
color: inherit;
text-decoration: none;
flex-wrap: wrap;
}
.last-landing-link:hover {
color: hsla(var(--entity-hue, 0), 60%, 85%, 1);
}
.last-landing-entity {
color: hsla(var(--entity-hue, 0), 65%, 72%, 1);
font-weight: 500;
}
.last-landing-sep {
opacity: 0.45;
}
.last-landing-age {
opacity: 0.85;
}
.last-landing-cost {
opacity: 0.75;
}
.last-landing-sha {
opacity: 0.45;
font-size: 0.67rem;
letter-spacing: 0.04em;
}
/* ── Live stats strip ────────────────────────────────────────────────────── */
.live-stats-strip {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.25rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
color: var(--text-dim, rgba(255,255,255,0.35));
border-bottom: 1px solid rgba(255,255,255,0.06);
padding-bottom: 0.75rem;
}
.live-stat {
letter-spacing: 0.02em;
}
.live-stat-sep {
opacity: 0.3;
}
/* ── Hero CTA reframe sentence — Faber Round 2 ──────────────────────────── */
.hero-cta-reframe {
font-variant: small-caps;
font-size: 0.85rem;
letter-spacing: 0.12em;
color: var(--text-dim);
opacity: 0;
margin-top: 1.5rem;
animation: fadeInReframe 800ms ease forwards;
animation-delay: 1.2s;
}
@keyframes fadeInReframe {
from { opacity: 0; }
to { opacity: 0.40; }
}
/* ── /what-is-this opener ───────────────────────────────────────────────── */
.what-is-this-opener {
padding: 80px 24px 48px;
max-width: var(--max-width);
margin: 0 auto;
}
.what-is-this-inner {
max-width: 640px;
}
.what-is-this-text {
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
font-weight: 400;
line-height: 1.6;
letter-spacing: 0.02em;
color: var(--text);
}
.what-is-this-alice {
padding: 0 0 64px;
}
/* ── /business page ─────────────────────────────────────────────────────── */
.biz-page {
min-height: 100vh;
}
.biz-opener {
padding: 120px 24px 64px;
max-width: var(--max-width);
margin: 0 auto;
}
.biz-inner {
max-width: 720px;
}
.biz-headline {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 24px;
}
.biz-lead {
font-size: clamp(1.1rem, 2vw, 1.35rem);
line-height: 1.7;
color: var(--text-dim);
}
.biz-section {
padding: 64px 24px;
max-width: var(--max-width);
margin: 0 auto;
}
.biz-section-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 32px;
letter-spacing: -0.01em;
}
.biz-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.biz-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 28px 24px;
}
.biz-card h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text);
margin-bottom: 12px;
}
.biz-card p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--text-dim);
}
.biz-terms-list {
list-style: none;
padding: 0;
}
.biz-terms-list li {
padding: 12px 0;
border-bottom: 1px solid var(--border);
font-size: 1.05rem;
line-height: 1.6;
color: var(--text-dim);
}
.biz-terms-list li:last-child {
border-bottom: none;
}
.biz-terms-list li strong {
color: var(--text);
}
.biz-filter-text {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dim);
margin-bottom: 16px;
}
.biz-filter-text:last-child {
margin-bottom: 0;
}
.biz-contact-text {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-dim);
}
.biz-link {
color: var(--accent);
border-bottom: 1px solid var(--accent-dim);
transition: color 0.2s;
}
.biz-link:hover {
color: var(--text);
}
/* ── /flights/:id page ──────────────────────────────────────────────────── */
.flight-page {
min-height: 100vh;
}
.flight-page-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 48px 24px 80px;
}
/* Header */
.flight-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48px;
}
.flight-header-left {
display: flex;
align-items: center;
gap: 14px;
}
.flight-entity-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.flight-entity-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.flight-entity-name {
font-size: 15px;
font-weight: 700;
color: var(--text);
text-transform: capitalize;
}
.flight-entity-id {
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate);
letter-spacing: 0.03em;
}
.flight-status-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 20px;
text-transform: uppercase;
}
.flight-status-badge--flying {
background: rgba(62, 175, 106, 0.12);
color: #3EAF6A;
border: 1px solid rgba(62, 175, 106, 0.25);
}
.flight-status-badge--landed {
background: rgba(255,255,255,0.04);
color: var(--slate-light);
border: 1px solid var(--border);
}
/* Three glyphs above fold */
.flight-glyphs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-bottom: 40px;
}
.flight-glyph {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 32px 16px;
background: var(--bg-surface);
}
.flight-glyph-symbol {
font-size: 28px;
line-height: 1;
color: var(--accent);
opacity: 0.7;
}
.flight-glyph-value {
font-family: var(--font-mono);
font-size: clamp(20px, 4vw, 32px);
font-weight: 700;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
}
.flight-glyph-label {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
}
/* Brief rows */
.flight-brief-row {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 10px;
font-size: 13px;
}
.flight-brief-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
flex-shrink: 0;
width: 48px;
}
.flight-brief-text {
color: var(--text-dim);
line-height: 1.5;
}
/* Timeline */
.flight-timeline {
margin-top: 48px;
border-top: 1px solid var(--border);
padding-top: 32px;
}
.flight-timeline-heading {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 20px;
}
.flight-timeline-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.flight-timeline-empty {
font-size: 13px;
color: var(--slate);
font-style: italic;
}
/* ── Stats grid (extended metrics below glyphs) ── */
.flight-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-top: 24px;
margin-bottom: 24px;
}
.flight-stat-cell {
background: var(--bg-surface);
padding: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.flight-stat-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
}
.flight-stat-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
/* ── Completion summary ── */
.flight-summary-block {
margin-top: 24px;
padding: 16px 20px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: 4px;
}
.flight-summary-label {
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 8px;
}
.flight-summary-text {
color: var(--text-dim);
font-size: 13px;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
}
/* ── Entity link in flight header ── */
.flight-entity-link {
text-decoration: none;
}
.flight-entity-link:hover .flight-entity-avatar {
opacity: 0.8;
}
.flight-entity-name {
font-size: 15px;
font-weight: 700;
color: var(--text);
text-transform: capitalize;
text-decoration: none;
}
.flight-entity-name:hover {
opacity: 0.8;
}
/* ── Killed status badge ── */
.flight-status-badge--killed {
background: rgba(239,68,68,0.10);
color: #f87171;
border: 1px solid rgba(239,68,68,0.25);
}
/* ── mono in brief rows ── */
.flight-brief-text.mono {
font-family: var(--font-mono);
font-size: 11px;
word-break: break-all;
}
/* Footer */
.flight-footer {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: var(--slate);
}
.flight-footer-tippers {
opacity: 0.5;
}
.flight-footer-home {
opacity: 0.4;
transition: opacity 0.15s;
}
.flight-footer-home:hover {
opacity: 0.8;
}
/* Not-found state */
.flight-page--notfound .flight-page-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
padding-top: 120px;
}
.flight-notfound {
font-size: 18px;
color: var(--slate-light);
}
.flight-notfound-link {
font-size: 14px;
color: var(--accent);
border-bottom: 1px solid var(--accent-dim);
padding-bottom: 1px;
}
/* ── /flights index — kingdom newsfeed ──────────────────────────────────── */
.flights-index {
min-height: 100vh;
background: var(--bg);
padding: 80px 0 60px;
}
.flights-index-inner {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
.flights-index-header {
margin-bottom: 36px;
}
.flights-index-title {
font-size: 32px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
}
.flights-index-subtitle {
font-size: 15px;
color: var(--slate-light);
margin: 0;
}
.flights-index-list {
display: flex;
flex-direction: column;
gap: 2px;
}
/* .flights-index-row and sub-classes removed — rows now rendered by brandFlightItem */
.flights-index-empty {
color: var(--slate-light);
font-size: 15px;
padding-top: 24px;
}
/* sovereign-link-success → src/client/sovereign-login/shell/styles.css */
/* ── Fuel gauge strip — top chrome, always visible ───────────────────────── */
.fuel-gauge-strip {
position: relative;
overflow: hidden;
width: 100%;
height: 28px;
background: #0a0a0a;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0 1.25rem;
font-family: var(--font-mono);
font-size: 0.7rem;
z-index: 101; /* above nav z-index:100 */
}
.fuel-gauge-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
transition: width 1s ease, background 1s ease;
z-index: 0;
}
/* Color bands via band modifier */
.fuel-gauge-strip--high .fuel-gauge-fill { background: linear-gradient(90deg, rgba(62,175,106,0.22), rgba(62,175,106,0.08)); }
.fuel-gauge-strip--mid .fuel-gauge-fill { background: linear-gradient(90deg, rgba(201,168,76,0.28), rgba(201,168,76,0.10)); }
.fuel-gauge-strip--low .fuel-gauge-fill { background: linear-gradient(90deg, rgba(205,90,70,0.30), rgba(205,90,70,0.10)); }
.fuel-gauge-strip--full .fuel-gauge-fill { background: linear-gradient(90deg, rgba(62,175,106,0.18), rgba(62,175,106,0.04)); }
.fuel-gauge-label {
position: relative;
z-index: 1;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.62rem;
}
.fuel-gauge-pct {
position: relative;
z-index: 1;
color: rgba(255,255,255,0.75);
font-weight: 500;
min-width: 2.5rem;
}
/* Pct color overrides per band */
.fuel-gauge-strip--high .fuel-gauge-pct { color: rgba(62,175,106,0.9); }
.fuel-gauge-strip--mid .fuel-gauge-pct { color: rgba(201,168,76,0.9); }
.fuel-gauge-strip--low .fuel-gauge-pct { color: rgba(220,90,70,0.9); }
.fuel-gauge-strip--full .fuel-gauge-pct { color: rgba(62,175,106,0.7); }
.fuel-gauge-status {
position: relative;
z-index: 1;
color: rgba(255,255,255,0.25);
font-size: 0.62rem;
letter-spacing: 0.04em;
}
/* ── Fuel gauge strip — clickable + expanded panel ───────────────────────── */
.fuel-gauge-strip { cursor: pointer; user-select: none; }
.fuel-gauge-strip--open { border-bottom: none; }
.fuel-gauge-chevron {
position: relative;
z-index: 1;
margin-left: auto;
color: rgba(255,255,255,0.30);
font-size: 0.55rem;
}
/* Expanded panel — drops below strip, full-width */
.fuel-gauge-panel {
position: relative;
width: 100%;
background: #0a0a0a;
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 0.75rem 1.25rem;
font-family: var(--font-mono);
font-size: 0.72rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 100;
animation: fgpSlideDown 0.15s ease;
}
@keyframes fgpSlideDown {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.fuel-gauge-panel-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.fgp-label {
color: rgba(255,255,255,0.35);
min-width: 7rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.fgp-bar-wrap {
flex: 1;
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
}
.fgp-bar {
height: 100%;
background: rgba(62,175,106,0.55);
border-radius: 2px;
transition: width 1s ease;
}
.fgp-pct {
color: rgba(255,255,255,0.60);
min-width: 2.5rem;
text-align: right;
font-size: 0.65rem;
}
.fgp-pill {
display: inline-block;
padding: 0.1em 0.55em;
border-radius: 99px;
font-size: 0.62rem;
letter-spacing: 0.04em;
}
.fgp-pill--on { background: rgba(62,175,106,0.18); color: rgba(62,175,106,0.9); }
.fgp-tip-balance {
color: rgba(255,255,255,0.50);
font-size: 0.72rem;
}
.fuel-gauge-panel-fuelers { flex-wrap: wrap; }
.fgp-fuelers-list { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fgp-fueler-item {
font-size: 0.62rem;
color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.05);
padding: 0.1em 0.45em;
border-radius: 3px;
}
.fuel-gauge-panel-cta {
padding-top: 0.25rem;
}
.fgp-fuel-btn {
background: rgba(201,168,76,0.18);
color: rgba(201,168,76,0.9);
border: 1px solid rgba(201,168,76,0.25);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.72rem;
padding: 0.35em 1em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.fgp-fuel-btn:hover {
background: rgba(201,168,76,0.28);
color: rgba(255,215,100,1);
}
/* ── Tip modal — full-screen backdrop, centered card ─────────────────────── */
.tip-modal-backdrop {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0,0,0,0.72);
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
animation: tipBackdropIn 0.15s ease;
}
@keyframes tipBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
.tip-modal {
position: relative;
background: #111;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 8px;
padding: 2rem;
width: 100%;
max-width: 440px;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
animation: tipModalIn 0.15s ease;
}
@keyframes tipModalIn {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tip-modal-close {
position: absolute;
top: 0.9rem;
right: 1rem;
background: none;
border: none;
color: rgba(255,255,255,0.35);
font-size: 1rem;
cursor: pointer;
padding: 0.25em;
line-height: 1;
}
.tip-modal-close:hover { color: rgba(255,255,255,0.7); }
.tip-modal-title {
font-size: 1.3rem;
font-weight: 800;
margin: 0 0 0.3rem;
color: rgba(255,255,255,0.92);
}
.tip-modal-sub {
font-size: 0.82rem;
color: rgba(255,255,255,0.40);
margin: 0 0 1.4rem;
}
.tip-amounts {
display: flex;
gap: 0.6rem;
margin-bottom: 1.2rem;
}
.tip-amount {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.70);
border-radius: 6px;
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 600;
padding: 0.65em 0;
cursor: pointer;
transition: all 0.1s;
}
.tip-amount:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.90); }
.tip-amount--active {
background: rgba(201,168,76,0.22);
border-color: rgba(201,168,76,0.45);
color: rgba(255,215,100,1);
}
.tip-field-row {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 0.9rem;
}
.tip-field-label {
font-size: 0.7rem;
color: rgba(255,255,255,0.35);
text-transform: uppercase;
letter-spacing: 0.07em;
font-family: var(--font-mono);
}
.tip-field-optional { color: rgba(255,255,255,0.20); text-transform: none; letter-spacing: 0; }
.tip-field-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 5px;
color: rgba(255,255,255,0.85);
font-family: var(--font-mono);
font-size: 0.9rem;
padding: 0.5em 0.75em;
width: 6rem;
}
.tip-field-input--full { width: 100%; }
.tip-field-input:focus {
outline: none;
border-color: rgba(201,168,76,0.45);
}
.tip-error {
font-size: 0.78rem;
color: rgba(220,90,70,0.9);
margin: 0 0 0.8rem;
}
.tip-submit {
width: 100%;
background: rgba(201,168,76,0.22);
border: 1px solid rgba(201,168,76,0.35);
border-radius: 6px;
color: rgba(255,215,100,0.95);
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 600;
padding: 0.7em 1.5em;
cursor: pointer;
transition: all 0.1s;
margin-top: 0.4rem;
}
.tip-submit:hover:not(:disabled) {
background: rgba(201,168,76,0.34);
}
.tip-submit--loading { opacity: 0.6; cursor: default; }
/* Graceful fallback (no Stripe keys) */
.tip-fallback {
text-align: center;
padding: 0.5rem 0;
}
.tip-fallback-msg {
font-size: 0.9rem;
color: rgba(255,255,255,0.55);
margin: 0 0 1.2rem;
}
.tip-fallback-btn {
display: inline-block;
background: rgba(62,175,106,0.18);
border: 1px solid rgba(62,175,106,0.30);
border-radius: 6px;
color: rgba(62,175,106,0.9);
font-family: var(--font-mono);
font-size: 0.9rem;
font-weight: 600;
padding: 0.65em 1.5em;
text-decoration: none;
transition: all 0.1s;
}
.tip-fallback-btn:hover { background: rgba(62,175,106,0.28); }
.tip-fallback-note {
font-size: 0.72rem;
color: rgba(255,255,255,0.28);
margin: 1rem 0 0;
}
/* ── Tip receipt page ─────────────────────────────────────────────────────── */
.tip-receipt-main {
max-width: 660px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.tip-receipt-loading,
.tip-receipt-notfound {
text-align: center;
color: rgba(255,255,255,0.40);
padding: 4rem 0;
}
.tip-receipt-card {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 10px;
padding: 2.5rem;
}
.tip-receipt-header {
margin-bottom: 1.5rem;
}
.tip-receipt-kingdom-day {
font-family: var(--font-mono);
font-size: 0.7rem;
color: rgba(255,255,255,0.30);
text-transform: uppercase;
letter-spacing: 0.09em;
display: block;
margin-bottom: 0.6rem;
}
.tip-receipt-hero {
font-size: 1.5rem;
font-weight: 800;
color: rgba(255,255,255,0.88);
margin: 0;
}
.tip-receipt-amount {
font-family: var(--font-mono);
font-size: 2.8rem;
font-weight: 800;
color: rgba(201,168,76,0.95);
margin: 1rem 0 1.5rem;
}
.tip-receipt-section-label {
font-family: var(--font-mono);
font-size: 0.65rem;
color: rgba(255,255,255,0.28);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
}
.tip-receipt-attribution {
margin-bottom: 1.5rem;
}
.tip-receipt-flight {
font-family: var(--font-mono);
font-size: 0.78rem;
color: rgba(255,255,255,0.55);
padding: 0.3em 0;
border-left: 2px solid rgba(255,255,255,0.08);
padding-left: 0.75rem;
margin-bottom: 0.25rem;
}
.tip-receipt-flight--pending { color: rgba(255,255,255,0.25); font-style: italic; }
.tip-receipt-flight-link { color: inherit; text-decoration: none; }
.tip-receipt-flight-link:hover { color: rgba(255,255,255,0.80); }
.tip-receipt-flight-entity { color: rgba(201,168,76,0.7); margin-right: 0.4em; }
.tip-receipt-flight-slug { color: rgba(255,255,255,0.45); }
.tip-receipt-by {
font-size: 0.85rem;
color: rgba(255,255,255,0.45);
margin-bottom: 0.5rem;
}
.tip-receipt-msg {
font-size: 0.9rem;
color: rgba(255,255,255,0.60);
font-style: italic;
margin-bottom: 1.5rem;
}
.tip-receipt-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.tip-receipt-share-btn {
display: inline-block;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px;
color: rgba(255,255,255,0.70);
font-family: var(--font-mono);
font-size: 0.82rem;
padding: 0.55em 1.2em;
text-decoration: none;
transition: all 0.1s;
}
.tip-receipt-share-btn:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.90); }
.tip-receipt-share-btn--secondary {
background: rgba(201,168,76,0.14);
border-color: rgba(201,168,76,0.22);
color: rgba(201,168,76,0.85);
}
/* Profile Identity + Files styles moved to canonical component files:
client/profile/_shared.css — .markdown-body, .user-content-*
client/profile/identity/styles.css — .profile-identity
client/profile/files/styles.css — .profile-files-*, .profile-tree-* */
/* ============================================================
Phase 1 front page — frontPagePhase1 template
Phase 2 (live feed) + Phase 3 (branch tree) placeholders are
invisible comment markers; no rendered chrome yet.
============================================================ */
.fp1-phase-marker {
display: none; /* invisible until phases are wired */
}
.fp1-claim {
padding: 80px 24px 96px;
max-width: var(--max-width);
margin: 0 auto;
}
.fp1-claim-inner {
max-width: 720px;
}
.fp1-headline {
font-size: clamp(36px, 5.5vw, 64px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 32px;
}
.fp1-substrate {
font-size: 18px;
font-weight: 400;
color: var(--accent);
margin-bottom: 40px;
line-height: 1.5;
}
.fp1-body {
margin-bottom: 48px;
}
.fp1-body p {
font-size: 16px;
line-height: 1.75;
color: var(--slate-light);
margin-bottom: 20px;
max-width: 640px;
}
.fp1-body p:last-child {
margin-bottom: 0;
}
.fp1-brand-anchor {
margin-bottom: 48px;
padding: 24px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.fp1-brand-anchor--conventional {
font-size: 14px;
font-family: var(--font-mono);
color: var(--text-dim);
line-height: 1.6;
}
.fp1-paths {
display: flex;
flex-direction: column;
gap: 16px;
}
.fp1-path {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.fp1-path-label {
font-size: 11px;
font-family: var(--font-mono);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
min-width: 60px;
}
.fp1-path-links {
font-size: 14px;
color: var(--text-dim);
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.fp1-link {
color: var(--text-dim);
border-bottom: 1px solid var(--slate);
padding-bottom: 1px;
transition: color 0.15s, border-color 0.15s;
}
.fp1-link:hover {
color: var(--text);
border-color: var(--text-dim);
}
.fp1-path-sep {
color: var(--slate);
}
@media (max-width: 600px) {
.fp1-claim {
padding: 48px 20px 64px;
}
.fp1-path {
flex-direction: column;
gap: 8px;
}
}