/* Keyframes for the spinner *//* =============================================================
sovereign-profiles — component stylesheet
Design: Muse. Functional first. Beautiful always.
Palette follows koad:io design system:
bg #0D0D0D surface #111111 raised #171717
text #E8E6E1 dim #A09E9A subtle #555555
accent #C9A84C border rgba(255,255,255,0.07)
mono JetBrains Mono / Fira Code
Entity outfit integration via CSS vars injected by the parent:
--entity-hue (0–360)
--entity-saturation (%)
--entity-brightness (%)
--entity-accent hsl(h, s%, b%)
--entity-accent-light hsl(h, s%, b%+20%)
Where outfit vars are absent, the accent falls back to the
system amber (#C9A84C). All components are self-contained —
the package ships its own full styling.
============================================================= */
/* ── Custom property defaults (overridden by parent at runtime) ──────────── *//* SPDX-License-Identifier: AGPL-3.0-or-later */
/*
* activity-stream.css — Base styles for the activity stream component.
* Intentionally minimal — consumer themes override via koad:io-theme-engine.
*//*
* Outfit CSS fallback — for non-Meteor contexts (static sites, browser extension,
* email templates, OBS overlays). Import this file; stamp the data attributes.
*
* Usage:
*
* or
* Juno
*
* For dynamic hue/saturation, inject:
*
* and the selectors below will pick them up.
*
* CSS variable contract (VESTA-SPEC-063 §5):
* --entity-hue Level 0 — hue in degrees
* --entity-saturation Level 0 — saturation %
* --entity-font-heading Level 1 — heading font family
* --entity-font-body Level 1 — body font family
* --entity-font-mono Level 1 — mono font family
* --entity-easing Level 3 — CSS easing function
* --entity-duration Level 3 — transition duration (ms value)
*
* Dark Passenger migration note (SPEC-063 §5):
* --shadow-hue, --shadow-saturation, --shadow-brightness alias to --entity-*
* during transition. New code uses --entity-* only.
*//* ============================================================
kingofalldata.com — Design system by Muse, implemented by Vulcan
Palette: near-black bg, off-white text, amber accent, cool slate
Type: Inter (headings/body) + JetBrains Mono (code/technical)
============================================================ */
/* --- Custom Properties --- */
@-webkit-keyframes iron-router-progress-before {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes iron-router-progress-before {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes iron-router-progress-before {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes iron-router-progress-before {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes iron-router-progress-before {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Main progress bar */
#iron-router-progress {
display: block;
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: rgba(160, 160, 160, 0.6);
box-shadow: 0 0 5px rgba(160, 160, 160, 0.6);
opacity: 1;
z-index: 10000;
}
/* CSS-only spinner */
/* The spinner only shows after 0.5 seconds of load time */
#iron-router-progress.spinner:before {
content: "";
display: block;
position: fixed;
top: 10px;
right: 10px;
width: 25px;
height: 25px;
background-color: transparent;
border: 3px solid rgba(160, 160, 160, 0.6);
border-radius: 100px;
border-right-color: transparent !important;
opacity: 0;
z-index: 10000;
pointer-events: none;
transition: 0.5s opacity;
transition-delay: 0.5s;
}
/* Loading state transitions */
#iron-router-progress.loading {
transition: 1s width, 1s opacity;
transition-delay: 0s, 1s;
}
#iron-router-progress.loading.spinner:before {
opacity: 1;
-webkit-animation: iron-router-progress-before 0.5s linear infinite;
-moz-animation: iron-router-progress-before 0.5s linear infinite;
-o-animation: iron-router-progress-before 0.5s linear infinite;
-ms-animation: iron-router-progress-before 0.5s linear infinite;
animation: iron-router-progress-before 0.5s linear infinite;
}
/* Done state - fade out */
#iron-router-progress.done {
opacity: 0;
}
#iron-router-progress.done.spinner:before {
opacity: 0;
}
.sovereign-profile-editor,
.sovereign-profile-card,
.sovereign-profile-full {
--sp-bg: #0D0D0D;
--sp-surface: #111111;
--sp-raised: #171717;
--sp-text: #E8E6E1;
--sp-text-dim: #A09E9A;
--sp-subtle: #555555;
--sp-accent: var(--entity-accent, #C9A84C);
--sp-accent-dim: var(--entity-accent-light, #9B7D35);
--sp-border: rgba(255, 255, 255, 0.07);
/* derived from accent — color-mix gives accent at 22% opacity */
--sp-border-acc: color-mix(in srgb, var(--sp-accent) 22%, transparent);
--sp-green: #3EAF6A;
--sp-red: #E05252;
--sp-blue: #4A90D9;
--sp-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--sp-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--sp-radius: 3px;
--sp-radius-lg: 6px;
box-sizing: border-box;
color: var(--sp-text);
font-family: var(--sp-font-body);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
*, *::before, *::after {
box-sizing: inherit;
}
/* ══════════════════════════════════════════════════════════════
PROFILE EDITOR
══════════════════════════════════════════════════════════════ */
.sovereign-profile-editor {
background: var(--sp-bg);
padding: 32px;
max-width: 760px;
}
/* Header */
.profile-editor-heading {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-text);
margin: 0 0 6px;
}
.profile-editor-subhead {
font-size: 13px;
color: var(--sp-text-dim);
margin: 0 0 28px;
}
/* Status messages */
.profile-editor-error {
background: rgba(224, 82, 82, 0.1);
border: 1px solid rgba(224, 82, 82, 0.3);
border-radius: var(--sp-radius);
color: #F08080;
font-size: 13px;
padding: 12px 16px;
margin-bottom: 20px;
}
.profile-editor-success {
background: rgba(62, 175, 106, 0.1);
border: 1px solid rgba(62, 175, 106, 0.25);
border-radius: var(--sp-radius);
color: var(--sp-green);
font-size: 13px;
padding: 12px 16px;
margin-bottom: 20px;
}
.profile-editor-success code {
font-family: var(--sp-font-mono);
font-size: 11px;
background: rgba(255, 255, 255, 0.06);
padding: 1px 6px;
border-radius: 2px;
color: inherit;
word-break: break-all;
}
/* Form layout */
.profile-editor-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sp-text-dim);
}
.form-field input[type="text"],
.form-field input[type="url"],
.form-field textarea {
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text);
font-family: var(--sp-font-body);
font-size: 14px;
padding: 10px 14px;
width: 100%;
transition: border-color 0.15s;
outline: none;
resize: none;
}
.form-field input:focus,
.form-field textarea:focus {
border-color: var(--sp-accent);
}
.form-field textarea {
min-height: 96px;
resize: vertical;
}
/* Field hint */
.form-field-hint {
font-size: 11px;
color: var(--sp-subtle);
line-height: 1.5;
}
/* Character counter */
.form-field-footer {
display: flex;
justify-content: flex-end;
}
.char-count {
font-size: 11px;
font-family: var(--sp-font-mono);
color: var(--sp-subtle);
transition: color 0.15s;
}
.char-count.char-count--warn {
color: #E8A738;
}
.char-count.char-count--over {
color: var(--sp-red);
}
/* Avatar field with preview */
.avatar-field-group {
display: flex;
align-items: flex-start;
gap: 16px;
}
.avatar-preview-circle {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 50%;
background: hsl(var(--entity-hue, 222), var(--entity-saturation, 22%), var(--entity-brightness, 32%));
border: 2px solid var(--sp-border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 22px;
font-weight: 700;
color: var(--sp-text);
letter-spacing: -0.01em;
}
.avatar-preview-circle img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar-input-stack {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.avatar-hint {
font-size: 11px;
color: var(--sp-subtle);
}
/* Sections */
.form-section {
border-top: 1px solid var(--sp-border);
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.form-section-heading {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sp-text);
margin: 0;
}
/* Social proofs */
.social-proof-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.social-proof-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 13px;
}
.proof-platform {
font-family: var(--sp-font-mono);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sp-accent);
min-width: 64px;
}
.proof-handle {
flex: 1;
color: var(--sp-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.proof-url-link {
font-size: 11px;
color: var(--sp-text-dim);
text-decoration: none;
transition: color 0.15s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.proof-url-link:hover {
color: var(--sp-text);
}
.social-proof-add {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 8px;
align-items: end;
}
.social-proof-add input {
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text);
font-family: var(--sp-font-body);
font-size: 13px;
padding: 8px 12px;
outline: none;
transition: border-color 0.15s;
}
.social-proof-add input:focus {
border-color: var(--sp-accent);
}
/* Device key / sigchain sections */
.key-info {
font-size: 13px;
color: var(--sp-text-dim);
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
flex-wrap: wrap;
}
.key-info code {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-accent);
background: rgba(255, 255, 255, 0.05);
padding: 1px 6px;
border-radius: 2px;
word-break: break-all;
}
.key-badge {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 2px;
background: rgba(62, 175, 106, 0.12);
color: var(--sp-green);
border: 1px solid rgba(62, 175, 106, 0.2);
}
.key-warning {
font-size: 13px;
color: #E8A738;
padding: 10px 14px;
background: rgba(232, 167, 56, 0.08);
border: 1px solid rgba(232, 167, 56, 0.2);
border-radius: var(--sp-radius);
}
/* Sigchain status row */
.sigchain-status-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.sigchain-status-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.sigchain-stat {
padding: 10px 14px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
display: flex;
flex-direction: column;
gap: 4px;
}
.sigchain-stat-label {
font-size: 10px;
font-family: var(--sp-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sp-subtle);
}
.sigchain-stat-value {
font-family: var(--sp-font-mono);
font-size: 12px;
color: var(--sp-text);
word-break: break-all;
}
.sigchain-cid-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
}
.sigchain-cid-value {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-accent);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cid-copy-btn {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text-dim);
cursor: pointer;
font-size: 11px;
padding: 3px 9px;
font-family: var(--sp-font-mono);
transition: border-color 0.15s, color 0.15s;
}
.cid-copy-btn:hover {
border-color: var(--sp-accent);
color: var(--sp-accent);
}
.cid-copy-btn.copied {
color: var(--sp-green);
border-color: rgba(62, 175, 106, 0.4);
}
/* Buttons */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sp-accent);
color: #0A0A0A;
font-family: var(--sp-font-body);
font-size: 14px;
font-weight: 700;
padding: 11px 24px;
border: none;
border-radius: var(--sp-radius);
cursor: pointer;
transition: opacity 0.15s;
white-space: nowrap;
}
.btn-primary:hover:not(:disabled) {
opacity: 0.85;
}
.btn-primary:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.btn-small {
background: transparent;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text-dim);
cursor: pointer;
font-size: 11px;
font-family: var(--sp-font-body);
padding: 3px 10px;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.btn-small:hover {
border-color: var(--sp-red);
color: var(--sp-red);
}
/* Form actions row */
.form-actions {
display: flex;
align-items: center;
gap: 16px;
padding-top: 4px;
}
/* Live preview strip */
.profile-editor-preview {
border-top: 1px solid var(--sp-border);
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.preview-label {
font-size: 11px;
font-family: var(--sp-font-mono);
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--sp-subtle);
}
.preview-row {
display: flex;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
}
/* ══════════════════════════════════════════════════════════════
PROFILE CARD
══════════════════════════════════════════════════════════════ */
.sovereign-profile-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius-lg);
cursor: pointer;
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
max-width: 340px;
color: var(--sp-text);
position: relative;
}
.sovereign-profile-card:hover {
border-color: var(--sp-border-acc);
background: var(--sp-raised);
}
.sovereign-profile-card.profile-verified {
border-color: rgba(62, 175, 106, 0.2);
}
/* Avatar */
.profile-card-avatar {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--sp-border);
}
.profile-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-card-avatar-placeholder {
background: hsl(var(--entity-hue, 222), var(--entity-saturation, 22%), var(--entity-brightness, 30%));
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
border: 2px solid rgba(255, 255, 255, 0.08);
}
/* Card body */
.profile-card-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.profile-card-name-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.profile-card-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--sp-text);
line-height: 1.3;
}
.profile-card-handle {
font-size: 12px;
font-family: var(--sp-font-mono);
color: var(--sp-text-dim);
}
.profile-card-bio {
font-size: 12px;
color: var(--sp-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 2px;
}
/* Card footer row */
.profile-card-footer {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.profile-bond-badge {
font-size: 11px;
font-family: var(--sp-font-mono);
color: var(--sp-text-dim);
background: var(--sp-raised);
border: 1px solid var(--sp-border);
padding: 2px 8px;
border-radius: 20px;
}
/* Verification badges (shared) */
.profile-verified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-family: var(--sp-font-mono);
font-weight: 600;
color: var(--sp-green);
background: rgba(62, 175, 106, 0.1);
border: 1px solid rgba(62, 175, 106, 0.2);
padding: 2px 8px;
border-radius: 2px;
letter-spacing: 0.02em;
}
.profile-unverified-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-family: var(--sp-font-mono);
color: var(--sp-subtle);
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--sp-border);
padding: 2px 8px;
border-radius: 2px;
}
/* Sovereign kingdom badge */
.profile-sovereign-kingdom-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-family: var(--sp-font-mono);
color: var(--sp-accent);
background: var(--sp-border-acc);
border: 1px solid var(--sp-border-acc);
padding: 2px 8px;
border-radius: 2px;
letter-spacing: 0.02em;
}
/* ══════════════════════════════════════════════════════════════
PROFILE FULL
══════════════════════════════════════════════════════════════ */
.sovereign-profile-full {
max-width: 720px;
padding: 0;
}
/* Header block */
.profile-full-header {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 28px 0 24px;
border-bottom: 1px solid var(--sp-border);
margin-bottom: 24px;
}
.profile-full-avatar {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--sp-border);
}
.profile-full-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-full-avatar-placeholder {
background: hsl(var(--entity-hue, 222), var(--entity-saturation, 22%), var(--entity-brightness, 30%));
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
border: 3px solid rgba(255, 255, 255, 0.08);
}
.profile-full-identity {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.profile-full-name {
font-size: 26px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--sp-text);
margin: 0;
line-height: 1.1;
}
.profile-full-handle {
font-family: var(--sp-font-mono);
font-size: 14px;
color: var(--sp-text-dim);
}
.profile-full-badges {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.profile-full-stats-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
padding: 4px 0 0;
}
.profile-stat-item {
display: flex;
align-items: baseline;
gap: 5px;
}
.profile-stat-value {
font-size: 18px;
font-weight: 700;
color: var(--sp-text);
line-height: 1;
}
.profile-stat-label {
font-size: 12px;
color: var(--sp-text-dim);
}
/* Bio */
.profile-full-bio {
font-size: 15px;
line-height: 1.65;
color: var(--sp-text-dim);
margin-bottom: 24px;
}
.profile-full-bio p {
margin: 0;
}
/* Sections */
.profile-full-section {
margin-bottom: 28px;
}
.profile-full-section-heading {
font-size: 12px;
font-family: var(--sp-font-mono);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--sp-subtle);
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--sp-border);
}
/* Custodianship section (VESTA-SPEC-112) */
.profile-custodianship-section {
border-top: 1px solid var(--sp-border);
padding-top: 20px;
}
.custodianship-grid {
display: flex;
flex-direction: column;
gap: 4px;
}
.custodianship-row {
display: grid;
grid-template-columns: 90px 1fr;
align-items: baseline;
gap: 12px;
font-size: 13px;
}
.custodianship-label {
font-size: 11px;
font-family: var(--sp-font-mono);
color: var(--sp-subtle);
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.custodianship-value {
color: var(--sp-text-dim);
word-break: break-word;
}
.custodianship-scope-full { color: var(--sp-green); }
.custodianship-scope-content-only,
.custodianship-scope-config-only { color: #E8A738; }
.custodianship-scope-none { color: var(--sp-subtle); }
/* Social proofs list (viewer) */
.profile-social-proofs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.social-proof-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 13px;
}
.social-proof-item.proof-verified {
border-left: 2px solid var(--sp-green);
}
.social-proof-item.proof-unverified {
border-left: 2px solid var(--sp-border);
}
.proof-verification-icon {
font-size: 11px;
margin-left: auto;
}
.proof-verification-icon.verified {
color: var(--sp-green);
}
.proof-verification-icon.unverified {
color: var(--sp-subtle);
}
/* Chain history */
.profile-chain-history {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.chain-entry {
display: grid;
grid-template-columns: 120px 1fr auto;
align-items: center;
gap: 12px;
padding: 9px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 12px;
transition: background 0.12s;
}
.chain-entry:hover {
background: var(--sp-raised);
}
.chain-entry.entry-valid {
border-left: 2px solid rgba(62, 175, 106, 0.4);
}
.chain-entry.entry-invalid {
border-left: 2px solid rgba(224, 82, 82, 0.5);
}
.entry-type-badge {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 7px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.05);
color: var(--sp-accent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.entry-timestamp {
color: var(--sp-text-dim);
font-family: var(--sp-font-mono);
font-size: 11px;
}
.entry-cid {
font-family: var(--sp-font-mono);
font-size: 10px;
color: var(--sp-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 140px;
text-align: right;
}
/* Chain loading */
.chain-loading-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 12px;
color: var(--sp-text-dim);
}
.chain-loading-spinner {
width: 14px;
height: 14px;
border: 2px solid var(--sp-border);
border-top-color: var(--sp-accent);
border-radius: 50%;
animation: sp-spin 0.8s linear infinite;
}
@keyframes sp-spin {
to { transform: rotate(360deg); }
}
/* Chain errors */
.profile-chain-errors {
background: rgba(224, 82, 82, 0.06);
border: 1px solid rgba(224, 82, 82, 0.2);
border-radius: var(--sp-radius);
padding: 12px 16px;
}
.profile-chain-errors .profile-full-section-heading {
color: #F08080;
border-bottom-color: rgba(224, 82, 82, 0.15);
}
.profile-chain-errors ul {
margin: 0;
padding-left: 16px;
font-family: var(--sp-font-mono);
font-size: 11px;
color: #F08080;
line-height: 1.8;
}
/* Verified-to-genesis indicator */
.genesis-verified-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
background: rgba(62, 175, 106, 0.07);
border: 1px solid rgba(62, 175, 106, 0.2);
border-radius: var(--sp-radius);
font-size: 13px;
color: var(--sp-green);
font-weight: 500;
margin-bottom: 8px;
}
.genesis-verified-icon {
font-size: 16px;
line-height: 1;
}
/* Tip CID display */
.profile-full-cid-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
}
.profile-full-cid-label {
font-size: 10px;
font-family: var(--sp-font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sp-subtle);
white-space: nowrap;
}
.profile-full-cid-value {
flex: 1;
font-family: var(--sp-font-mono);
font-size: 12px;
color: var(--sp-accent);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════════
KINGDOMS — profileFull section + kingdomsOverview template
Namespace: .profile-kingdoms-* (section inside profileFull)
.km-overview-* (standalone overview template)
══════════════════════════════════════════════════════════════ */
/* ── Kingdoms section inside profileFull ─────────────────────────────────── */
.profile-kingdoms-section {
border-top: 1px solid var(--sp-border);
padding-top: 20px;
}
.kingdoms-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.kingdom-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 13px;
flex-wrap: wrap;
}
.kingdom-name {
font-weight: 600;
color: var(--sp-text);
flex-shrink: 0;
}
.kingdom-domain {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-text-dim);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Sovereignty model badge — muted, structured */
.kingdom-model-badge {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.04);
color: var(--sp-text-dim);
border: 1px solid var(--sp-border);
white-space: nowrap;
}
/* Relationship badge — accent-tinted per role */
.kingdom-rel-badge {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 2px;
white-space: nowrap;
}
.kingdom-rel-sovereign {
background: var(--sp-border-acc);
color: var(--sp-accent);
border: 1px solid var(--sp-border-acc);
}
.kingdom-rel-member {
background: rgba(74, 144, 217, 0.1);
color: var(--sp-blue);
border: 1px solid rgba(74, 144, 217, 0.2);
}
.kingdom-rel-peer {
background: rgba(255, 255, 255, 0.04);
color: var(--sp-text-dim);
border: 1px solid var(--sp-border);
}
/* ── Kingdoms overview template ──────────────────────────────────────────── */
.km-overview {
/* Inherits --sp-* from .sovereign-profile-full scope */
}
.km-overview-header {
padding: 28px 0 20px;
border-bottom: 1px solid var(--sp-border);
margin-bottom: 24px;
}
.km-overview-heading {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--sp-text);
margin: 0 0 6px;
}
.km-overview-subhead {
font-size: 13px;
color: var(--sp-text-dim);
margin: 0;
line-height: 1.6;
}
.km-overview-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.km-overview-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 14px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
font-size: 13px;
transition: background 0.12s;
flex-wrap: wrap;
}
.km-overview-item:hover {
background: var(--sp-raised);
}
.km-overview-item-main {
display: flex;
align-items: baseline;
gap: 10px;
min-width: 0;
flex: 1;
}
.km-overview-name {
font-weight: 600;
color: var(--sp-text);
white-space: nowrap;
}
.km-overview-domain {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.km-overview-item-meta {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
flex-wrap: wrap;
}
.km-overview-sovereign {
font-size: 12px;
color: var(--sp-text-dim);
}
.km-overview-model-badge {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.04);
color: var(--sp-text-dim);
border: 1px solid var(--sp-border);
white-space: nowrap;
}
/* Variant: sovereign model gets accent tint */
.km-overview-model-sovereign {
background: var(--sp-border-acc);
color: var(--sp-accent);
border-color: var(--sp-border-acc);
}
.km-overview-count {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-subtle);
white-space: nowrap;
}
@media (max-width: 540px) {
.km-overview-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.km-overview-item-meta {
align-self: stretch;
}
}
/* ══════════════════════════════════════════════════════════════
KEY MANAGEMENT SURFACE
Shared by: keyPassphraseModal, keyManagement, keyImportForm,
keyGenerateForm
══════════════════════════════════════════════════════════════ */
/* ── Extend custom property scope to key management roots ─────────────────── */
.key-management-surface,
.km-overlay {
--sp-bg: #0D0D0D;
--sp-surface: #111111;
--sp-raised: #171717;
--sp-text: #E8E6E1;
--sp-text-dim: #A09E9A;
--sp-subtle: #555555;
--sp-accent: var(--entity-accent, #C9A84C);
--sp-accent-dim: var(--entity-accent-light, #9B7D35);
--sp-border: rgba(255, 255, 255, 0.07);
/* derived from accent — color-mix gives accent at 22% opacity */
--sp-border-acc: color-mix(in srgb, var(--sp-accent) 22%, transparent);
--sp-green: #3EAF6A;
--sp-red: #E05252;
--sp-blue: #4A90D9;
--sp-orange: #E8A738;
--sp-font-body: 'Inter', system-ui, -apple-system, sans-serif;
--sp-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
--sp-radius: 3px;
--sp-radius-lg: 6px;
box-sizing: border-box;
color: var(--sp-text);
font-family: var(--sp-font-body);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── Modal overlay ────────────────────────────────────────────────────────── */
.km-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.72);
display: flex;
align-items: center;
justify-content: center;
z-index: 9000;
padding: 20px;
}
.km-modal {
background: #111111;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--sp-radius-lg);
padding: 32px;
width: 100%;
max-width: 440px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
position: relative;
}
.km-modal--passphrase {
/* Modal is compact and focused — passphrase moment deserves quiet */
max-width: 400px;
}
/* ── Modal header ─────────────────────────────────────────────────────────── */
.km-modal-header {
margin-bottom: 24px;
}
.km-modal-heading {
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sp-text);
margin: 0 0 8px;
}
.km-modal-subhead {
font-size: 13px;
color: var(--sp-text-dim);
margin: 0;
line-height: 1.55;
}
/* ── Key hint row (inside passphrase modal) ───────────────────────────────── */
.km-key-hint {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
margin-bottom: 20px;
flex-wrap: wrap;
}
.km-key-hint-label {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sp-subtle);
white-space: nowrap;
}
.km-key-hint-id {
font-family: var(--sp-font-mono);
font-size: 11px;
color: var(--sp-accent);
background: rgba(255, 255, 255, 0.04);
padding: 1px 6px;
border-radius: 2px;
word-break: break-all;
}
.km-key-hint-desc {
font-size: 12px;
color: var(--sp-text-dim);
}
/* ── Page header (key management full surface) ────────────────────────────── */
.km-page-header {
margin-bottom: 32px;
}
.km-page-heading {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--sp-text);
margin: 0 0 8px;
}
.km-page-subhead {
font-size: 13px;
color: var(--sp-text-dim);
margin: 0;
line-height: 1.6;
max-width: 520px;
}
/* ── Sections ─────────────────────────────────────────────────────────────── */
.km-section {
border-top: 1px solid var(--sp-border);
padding-top: 24px;
margin-bottom: 32px;
}
.km-section--warning {
border-top-color: rgba(232, 167, 56, 0.3);
}
.km-section--danger {
border-top-color: rgba(224, 82, 82, 0.3);
}
.km-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 16px;
}
.km-section-heading {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--sp-text);
margin: 0;
}
/* ── Key list ─────────────────────────────────────────────────────────────── */
.km-key-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.km-key-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 12px 16px;
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
transition: border-color 0.15s;
}
.km-key-row--active {
border-color: rgba(62, 175, 106, 0.25);
background: rgba(62, 175, 106, 0.04);
}
.km-key-row-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.km-key-row-id-line {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.km-key-id {
font-family: var(--sp-font-mono);
font-size: 12px;
color: var(--sp-accent);
background: rgba(255, 255, 255, 0.04);
padding: 2px 6px;
border-radius: 2px;
word-break: break-all;
}
.km-key-badge--locked {
font-family: var(--sp-font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 7px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.04);
color: var(--sp-subtle);
border: 1px solid var(--sp-border);
}
.km-key-desc {
font-size: 12px;
color: var(--sp-text-dim);
}
.km-key-pubkey {
font-family: var(--sp-font-mono);
font-size: 10px;
color: var(--sp-subtle);
word-break: break-all;
line-height: 1.4;
}
.km-key-row-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* ── Buttons in key management context ────────────────────────────────────── */
.km-btn-action {
background: transparent;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text-dim);
cursor: pointer;
font-size: 11px;
font-family: var(--sp-font-body);
padding: 4px 10px;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.km-btn-action:hover {
border-color: var(--sp-accent);
color: var(--sp-accent);
}
.km-btn-action--secondary {
border-color: rgba(255, 255, 255, 0.12);
}
.km-btn-action--secondary:hover {
border-color: var(--sp-text-dim);
color: var(--sp-text);
}
.km-btn-action--danger:hover {
border-color: rgba(224, 82, 82, 0.5);
color: var(--sp-red);
}
.km-btn-lock {
background: transparent;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text-dim);
cursor: pointer;
font-size: 11px;
font-family: var(--sp-font-body);
padding: 4px 12px;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.km-btn-lock:hover {
border-color: var(--sp-orange);
color: var(--sp-orange);
}
.km-btn-cancel {
background: transparent;
border: none;
color: var(--sp-text-dim);
cursor: pointer;
font-size: 13px;
font-family: var(--sp-font-body);
padding: 4px 2px;
transition: color 0.15s;
}
.km-btn-cancel:hover {
color: var(--sp-text);
}
.km-btn-delete {
display: inline-flex;
align-items: center;
background: rgba(224, 82, 82, 0.1);
border: 1px solid rgba(224, 82, 82, 0.35);
border-radius: var(--sp-radius);
color: #F08080;
cursor: pointer;
font-size: 13px;
font-family: var(--sp-font-body);
font-weight: 600;
padding: 9px 20px;
transition: background 0.15s, border-color 0.15s;
}
.km-btn-delete:hover {
background: rgba(224, 82, 82, 0.16);
border-color: rgba(224, 82, 82, 0.55);
}
/* ── Warning and danger banners ───────────────────────────────────────────── */
.km-warning-banner {
font-size: 13px;
color: var(--sp-orange);
background: rgba(232, 167, 56, 0.08);
border: 1px solid rgba(232, 167, 56, 0.2);
border-radius: var(--sp-radius);
padding: 12px 16px;
margin-bottom: 20px;
line-height: 1.55;
}
.km-danger-banner {
font-size: 13px;
color: #F08080;
background: rgba(224, 82, 82, 0.08);
border: 1px solid rgba(224, 82, 82, 0.22);
border-radius: var(--sp-radius);
padding: 12px 16px;
line-height: 1.55;
}
.km-danger-banner code {
font-family: var(--sp-font-mono);
font-size: 11px;
background: rgba(255, 255, 255, 0.05);
padding: 1px 5px;
border-radius: 2px;
}
/* ── Export block ─────────────────────────────────────────────────────────── */
.km-export-block {
display: flex;
flex-direction: column;
gap: 12px;
}
.km-export-textarea {
background: #0A0A0A;
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text-dim);
font-family: var(--sp-font-mono);
font-size: 11px;
padding: 12px 14px;
width: 100%;
resize: none;
outline: none;
line-height: 1.5;
/* No user-select-all on purpose — user clicks Copy button */
}
.km-export-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* ── Forms ────────────────────────────────────────────────────────────────── */
.km-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.km-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.km-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--sp-text-dim);
}
.km-label-optional {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--sp-subtle);
}
.km-input {
background: var(--sp-surface);
border: 1px solid var(--sp-border);
border-radius: var(--sp-radius);
color: var(--sp-text);
font-family: var(--sp-font-body);
font-size: 14px;
padding: 10px 14px;
width: 100%;
transition: border-color 0.15s;
outline: none;
}
.km-input:focus {
border-color: var(--sp-accent);
}
.km-textarea {
resize: vertical;
font-family: var(--sp-font-mono);
font-size: 12px;
min-height: 100px;
}
.km-field-hint {
font-size: 11px;
color: var(--sp-subtle);
line-height: 1.5;
}
/* ── Form actions row ─────────────────────────────────────────────────────── */
.km-form-actions {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
padding-top: 4px;
}
/* ── Status messages (shared) ─────────────────────────────────────────────── */
.km-error {
background: rgba(224, 82, 82, 0.08);
border: 1px solid rgba(224, 82, 82, 0.28);
border-radius: var(--sp-radius);
color: #F08080;
font-size: 13px;
padding: 10px 14px;
line-height: 1.5;
}
.km-success {
background: rgba(62, 175, 106, 0.08);
border: 1px solid rgba(62, 175, 106, 0.22);
border-radius: var(--sp-radius);
color: var(--sp-green);
font-size: 13px;
padding: 10px 14px;
line-height: 1.5;
}
/* ── Empty state ──────────────────────────────────────────────────────────── */
.km-empty-state {
font-size: 13px;
color: var(--sp-text-dim);
padding: 16px 0;
margin: 0;
}
/* ── Loading row ─────────────────────────────────────────────────────────── */
.km-loading-row {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 0;
font-size: 13px;
color: var(--sp-text-dim);
}
/* ── Responsive: key management ───────────────────────────────────────────── */
@media (max-width: 540px) {
.km-modal {
padding: 24px 18px;
}
.km-key-row {
flex-direction: column;
gap: 12px;
}
.km-key-row-actions {
align-self: flex-start;
}
.km-export-actions {
flex-direction: column;
}
.km-form-actions {
flex-direction: column;
align-items: stretch;
}
.km-form-actions .btn-primary,
.km-form-actions .km-btn-delete {
text-align: center;
justify-content: center;
}
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 540px) {
.sovereign-profile-editor {
padding: 20px 16px;
}
.social-proof-add {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
}
.social-proof-add input:last-of-type {
grid-column: 1 / -1;
}
.chain-entry {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
.entry-cid {
grid-column: 1 / -1;
text-align: left;
max-width: 100%;
}
.profile-full-header {
flex-direction: column;
align-items: center;
text-align: center;
}
.profile-full-badges,
.profile-full-stats-row {
justify-content: center;
}
.sigchain-status-grid {
grid-template-columns: 1fr;
}
.avatar-field-group {
flex-direction: column;
align-items: flex-start;
}
}
.activity-stream {
width: 100%;
}
.activity-stream--loading {
opacity: 0.6;
pointer-events: none;
}
/* ── Loading state ─────────────────────────────────────────────────────────── */
.activity-stream__loading {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 0;
color: var(--color-muted, #888);
font-size: 0.9rem;
}
.activity-stream__spinner {
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: activity-stream-spin 0.6s linear infinite;
}
@keyframes activity-stream-spin {
to { transform: rotate(360deg); }
}
/* ── Error state ───────────────────────────────────────────────────────────── */
.activity-stream__error {
padding: 1rem 0;
color: var(--color-error, #c00);
font-size: 0.9rem;
}
/* ── Empty state ───────────────────────────────────────────────────────────── */
.activity-stream__empty {
padding: 1rem 0;
color: var(--color-muted, #888);
font-size: 0.9rem;
}
/* ── Entry list ────────────────────────────────────────────────────────────── */
.activity-stream__list {
list-style: none;
padding: 0;
margin: 0;
}
/* ── Single entry ──────────────────────────────────────────────────────────── */
.activity-entry {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--color-border, #eee);
}
.activity-entry:last-child {
border-bottom: none;
}
.activity-entry__icon {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
background: var(--color-surface, #f5f5f5);
border-radius: 50%;
color: var(--color-accent, #333);
}
.activity-entry__body {
flex: 1;
min-width: 0;
}
.activity-entry__label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted, #888);
margin-bottom: 0.2rem;
}
.activity-entry__description {
font-size: 0.95rem;
color: var(--color-text, #222);
line-height: 1.4;
}
.activity-entry__description a {
color: var(--color-link, #0066cc);
text-decoration: none;
}
.activity-entry__description a:hover {
text-decoration: underline;
}
.activity-entry__timestamp {
font-size: 0.75rem;
color: var(--color-muted, #888);
margin-top: 0.2rem;
white-space: nowrap;
}
.overview-header {
padding: 4px 16px 6px;
border-bottom: 1px solid #2a2a2a;
display: flex; align-items: center; gap: 12px;
}
.overview-header .glyph { font-size: 28px; color: #888; cursor: pointer; }
.overview-header h1 { font-size: 18px; font-weight: 400; color: #aaa; letter-spacing: 1px; }
.overview-header h1 span { color: #e0e0e0; font-weight: 600; }
/* Nav tabs */
.nav-tabs {
display: flex; gap: 2px; margin-left: auto; align-items: center;
}
.nav-tab {
font-size: 11px; 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;
}
.nav-tab:hover { background: #1e1e1e; color: #aaa; }
.nav-tab.active { background: #1a2a2a; color: #5bd5b5; }
.nav-tab .val { font-weight: 600; font-size: 13px; }
.nav-tab.active .val { color: #5bd5b5; }
.nav-tab.alert-tab .val { color: #d4a535; }
.overview-body { display: flex; gap: 0; height: calc(100vh - 58px); }
.main-panel { flex: 1; padding: 20px 28px; overflow-y: auto; }
.activity-panel { width: 460px; min-width: 340px; border-left: 1px solid #2a2a2a; overflow-y: auto; display: flex; flex-direction: column; }
/* Search bar */
.search-bar {
display: flex; gap: 8px; padding: 8px 16px 10px;
background: #151515; border-bottom: 1px solid #2a2a2a;
}
.search-input, .kingdom-filter-input {
background: #1a1a1a; border: 1px solid #333; border-radius: 4px;
padding: 6px 10px; font-size: 12px; color: #aaa;
width: 160px; outline: none;
}
.search-input:focus, .kingdom-filter-input:focus {
border-color: #5bd5b5; color: #eee;
}
.search-input::placeholder, .kingdom-filter-input::placeholder {
color: #555;
}
.clear-search {
cursor: pointer; color: #666; font-size: 12px;
padding: 6px 4px; user-select: none;
}
.clear-search:hover { color: #aaa; }
/* ---- Health view ---- */
.health-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
.health-card {
background: #161818; border: 1px solid #2a2a2a; border-radius: 6px;
padding: 14px;
}
.health-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
color: #555; margin-bottom: 4px;
}
.health-value {
font-size: 18px; font-weight: 600; color: #eee;
}
.health-value.status-ok { color: #5bd5b5; }
.indexer-list { display: flex; flex-direction: column; gap: 6px; }
.indexer-row {
display: flex; align-items: center; gap: 12px; padding: 8px 12px;
background: #161818; border-radius: 4px; font-size: 12px;
}
.indexer-row.indexer-ready { border-left: 3px solid #5bd5b5; }
.indexer-name { color: #aaa; font-weight: 500; }
.indexer-time { color: #555; margin-left: auto; }
.collection-stats { display: flex; flex-direction: column; gap: 4px; }
.collection-row {
display: flex; align-items: center; gap: 12px; padding: 6px 0;
font-size: 12px; border-bottom: 1px solid #1e1e1e;
}
.col-name { color: #888; }
.col-count { color: #aaa; font-weight: 600; margin-left: auto; font-family: monospace; }
.section-label {
font-size: 11px; 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 */
.kingdom-banner {
margin-bottom: 16px; padding: 12px 16px;
background: #161b1e; border: 1px solid #1e2a2e; border-radius: 6px;
display: flex; gap: 24px; flex-wrap: wrap;
}
.kingdom-item { font-size: 12px; color: #888; }
.kingdom-item .kv { color: #aaa; font-weight: 500; }
.kingdom-item .kl { color: #556; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-right: 6px; }
.kingdom-activity {
display: flex; gap: 12px; margin-left: auto;
}
.kingdom-activity .ka-stat {
font-size: 11px; color: #666; padding: 2px 8px;
background: #1a2a2a; border-radius: 3px;
}
/* Entity grid */
/* Masonry-style flow — cards size to their content, no gaps from uneven neighbors.
CSS columns fills top-to-bottom per column. Reading order is column-major. */
.entity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 6px;
}
.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;
background: #151515;
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%,
rgba(98, 0, 234, 0.65) 62%,
rgba(236, 64, 122, 0.65) 82%,
rgba(253, 216, 53, 0.6) 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%;
}
/* Activity panel header for selected entity */
.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);
}
.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;
}
.activity-filter-meta { flex: 1; min-width: 0; }
.activity-filter-handle { font-weight: 600; color: #eee; font-size: 13px; }
.activity-filter-tagline {
font-size: 11px; color: #888;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.deselect-entity {
cursor: pointer; color: #888; font-size: 16px;
padding: 4px 8px; border-radius: 3px;
user-select: none;
}
.deselect-entity:hover { color: #fff; background: #333; }
/* Entity detail panel (activity panel when entity selected) */
.entity-detail-header {
flex-wrap: wrap; gap: 8px;
}
.entity-detail-meta {
display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
}
.entity-quick-stats {
display: flex; gap: 12px; padding: 8px 14px;
background: #161818; border-bottom: 1px solid #2a2a2a;
}
.entity-quick-stats .quick-stat {
font-size: 11px; color: #666;
}
.entity-quick-stats .qs-val {
color: #aaa; font-weight: 600; margin-right: 3px;
}
.entity-detail-section {
padding: 10px 14px; border-bottom: 1px solid #1e1e1e;
}
.bond-mini-row, .key-mini-row, .tickle-mini-row {
display: flex; align-items: center; gap: 6px; padding: 3px 0;
font-size: 11px; color: #888;
}
.bond-mini-kind, .key-mini-kind {
font-size: 8px; padding: 1px 4px; border-radius: 2px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
}
.tickle-mini-row { color: #777; font-style: italic; }
/* Clickable avatar link — stop bubbling on click handled in JS */
a.entity-avatar { text-decoration: none; }
a.entity-avatar:hover { cursor: pointer; }
/* Bullpen — dormant entities shown as bare avatars */
.bullpen {
display: flex; flex-wrap: wrap; gap: 18px;
padding: 8px 4px;
}
.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;
}
.bullpen-avatar img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.bullpen-letter {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.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;
}
.bullpen-avatar:hover {
opacity: 1;
transform: translateY(-2px);
}
.bullpen-avatar:hover .bullpen-label {
opacity: 1;
color: #aaa;
}
.bullpen-avatar.active-5m {
opacity: 1;
box-shadow: 0 0 0 2px hsla(var(--entity-hue, 180), 70%, 55%, 0.6);
}
.entity-card-top {
display: flex;
align-items: flex-start;
min-height: 106px;
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: 14px; 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.live { color: #5bd5b5; }
.entity-last-seen.recent { color: #d4a535; }
.entity-tagline { font-size: 11px; 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: 11px; 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; }
/* Expanded card detail */
.entity-detail {
margin-top: 10px; padding-top: 10px; border-top: 1px solid #252525;
font-size: 11px; color: #888;
}
.detail-section { margin-bottom: 10px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-heading {
font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
color: #555; margin-bottom: 4px; font-weight: 600;
}
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li {
padding: 2px 0; color: #888; font-size: 11px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.detail-list li .bond-type { color: #5b8fbd; font-size: 9px; margin-left: 4px; }
.detail-list li .key-type { color: #8b7bbf; font-size: 9px; margin-left: 4px; }
.detail-env-grid {
display: grid; grid-template-columns: auto 1fr; gap: 2px 10px;
}
.detail-env-key { color: #5b8fbd; font-family: monospace; font-size: 10px; }
.detail-env-val { color: #999; font-family: monospace; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-alerts { list-style: none; padding: 0; margin: 0; }
.detail-alerts li {
padding: 3px 0; font-size: 11px; display: flex; align-items: center; gap: 6px;
}
.detail-alerts li .alert-source {
font-size: 9px; padding: 1px 5px; border-radius: 2px;
text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600;
}
.detail-alerts li .alert-source.alerts { background: #4a3a1a; color: #d4a535; }
.detail-alerts li .alert-source.notifications { background: #1a3a5c; color: #5b9bd5; }
/* ---- Flight table view ---- */
.flight-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.flight-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;
}
.flight-table td {
padding: 6px 10px; border-bottom: 1px solid #1a1a1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 300px; color: #999;
}
.flight-table tr:hover td { background: #1a1a1a; }
.flight-table .status-flying { color: #5bd5b5; }
.flight-table .status-landed { color: #777; }
.flight-table .status-stale { color: #d4a535; }
.flight-table .status-closed { color: #777; }
.flight-table .entity-col { font-weight: 600; }
.flight-table .brief-col { color: #aaa; max-width: 360px; }
.flight-table .time-col { font-family: monospace; font-size: 11px; color: #666; }
.flight-table .model-col { font-size: 10px; }
.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; }
/* ---- Bonds view ---- */
.bonds-entity-group { margin-bottom: 16px; }
.bonds-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.bonds-entity-name { font-size: 14px; font-weight: 600; }
.bonds-entity-count { font-size: 11px; color: #555; }
.bond-row {
display: flex; align-items: center; gap: 10px; padding: 4px 12px;
font-size: 12px; color: #888;
}
.bond-row .bond-name { flex: 1; }
.bond-row .bond-kind {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #1a2a3a; color: #5b8fbd; text-transform: uppercase;
}
/* ---- Cross-kingdom bonds view ---- */
.cross-kingdom-group { margin-bottom: 12px; }
.cross-kingdom-row {
display: flex; align-items: center; gap: 8px; padding: 6px 12px;
font-size: 12px; color: #aaa; background: #161818; border-radius: 4px;
}
.cross-kingdom-row .ck-from { font-weight: 600; }
.cross-kingdom-row .ck-arrow { color: #555; }
.cross-kingdom-row .ck-to { font-weight: 600; }
.cross-kingdom-row .ck-kingdom-from,
.cross-kingdom-row .ck-kingdom-to {
font-size: 10px; padding: 1px 5px; border-radius: 3px;
background: #2a1a3a; color: #a55bd5; text-transform: uppercase;
}
/* ---- Bonds graph (force-directed mind map) ---- */
.bond-graph {
position: relative; width: 100%; height: calc(100vh - 160px);
background: radial-gradient(ellipse at center, #151515 0%, #0d0d0d 100%);
border: 1px solid #1e1e1e; border-radius: 6px; overflow: hidden;
user-select: none;
}
.bond-graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bond-edge {
stroke: #3a3a3a; stroke-width: 1; fill: none;
transition: stroke 0.2s;
}
.bond-edge.highlighted { stroke: #5bd5b5; stroke-width: 2; }
.bond-edge-arrow { fill: #3a3a3a; }
.bond-edge.highlighted .bond-edge-arrow { fill: #5bd5b5; }
.bond-node {
position: absolute; width: 48px; height: 48px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 600; color: #fff;
background: #333; 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;
}
.bond-node:hover {
box-shadow: 0 0 0 3px rgba(91, 213, 181, 0.4), 0 2px 8px rgba(0,0,0,0.5);
z-index: 5;
}
.bond-node.dragging { cursor: grabbing; z-index: 10; }
.bond-node.active-now {
animation: cardGlow 2s ease-in-out infinite;
}
.bond-node img { width: 100%; height: 100%; object-fit: cover; }
.bond-node-label {
position: absolute; top: 52px; left: 50%; transform: translateX(-50%);
font-size: 10px; color: #888; white-space: nowrap;
pointer-events: none; font-weight: 500;
text-shadow: 0 1px 2px #000;
}
.bond-node:hover .bond-node-label { color: #5bd5b5; }
/* ---- Keys view ---- */
.keys-entity-group { margin-bottom: 16px; }
.keys-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.keys-entity-name { font-size: 14px; font-weight: 600; }
.keys-entity-count { font-size: 11px; color: #555; }
.key-row {
display: flex; align-items: center; gap: 10px; padding: 4px 12px;
font-size: 12px; color: #888;
}
.key-row .key-name { flex: 1; font-family: monospace; font-size: 11px; }
.key-row .key-kind {
font-size: 9px; padding: 1px 6px; border-radius: 3px;
background: #2a1a3a; color: #8b7bbf; text-transform: uppercase;
}
/* ---- Tickles view ---- */
.tickle-entity-group { margin-bottom: 16px; }
.tickle-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.tickle-entity-name { font-size: 14px; font-weight: 600; }
.tickle-entity-count { font-size: 11px; color: #555; }
.tickle-row {
padding: 3px 12px; font-size: 12px; color: #888;
}
/* ---- Alerts view ---- */
.alerts-entity-group { margin-bottom: 16px; }
.alerts-entity-header {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; border-bottom: 1px solid #222; margin-bottom: 6px;
}
.alerts-entity-name { font-size: 14px; font-weight: 600; }
.alert-row {
display: flex; align-items: flex-start; gap: 8px; padding: 4px 12px;
font-size: 12px;
}
.alert-row .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;
}
.alert-row .alert-source.alerts { background: #4a3a1a; color: #d4a535; }
.alert-row .alert-source.notifications { background: #1a3a5c; color: #5b9bd5; }
.alert-row .alert-text { color: #999; line-height: 1.4; }
/* ---- Activity panel ---- */
.activity-section { padding: 14px 18px; }
.activity-section + .activity-section { border-top: 1px solid #1e1e1e; }
.flight-pinned {
padding: 8px 10px; margin-bottom: 4px;
background: #0e2020; border-radius: 4px; border-left: 2px solid #5bd5b5;
}
.flight-pinned .emission-body { color: #7abfbf; }
.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: 12px; 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: 12px; 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; }
.empty-state { color: #444; font-size: 12px; font-style: italic; padding: 16px 0; }
/* Tier nudge — subtle upsell for public visitors */
.tier-nudge {
display: flex; align-items: center; gap: 8px;
padding: 8px 0; border-top: 1px solid #1a1a1a; margin-top: 4px;
font-size: 11px; color: #555;
}
.tier-nudge-text { flex: 1; }
.tier-nudge-link {
color: #5bd5b5; text-decoration: none; font-weight: 600;
font-size: 10px; opacity: 0.75; transition: opacity 0.15s;
}
.tier-nudge-link:hover { opacity: 0.6; }
.alert-item { padding: 8px 0; border-bottom: 1px solid #1a1a1a; }
.alert-body { font-size: 12px; color: #c9a44a; line-height: 1.3; }
.notif-body { font-size: 12px; color: #5b9bd5; line-height: 1.3; }
/* Scrollbar styling */
.main-panel::-webkit-scrollbar,
.activity-panel::-webkit-scrollbar { width: 6px; }
.main-panel::-webkit-scrollbar-thumb,
.activity-panel::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.main-panel::-webkit-scrollbar-track,
.activity-panel::-webkit-scrollbar-track { background: transparent; }
:root {
--entity-hue: 0;
--entity-saturation: 0%;
--entity-font-heading: inherit;
--entity-font-body: inherit;
--entity-font-mono: monospace;
--entity-easing: ease;
--entity-duration: 200ms;
/* Dark Passenger legacy aliases */
--shadow-hue: var(--entity-hue);
--shadow-saturation: var(--entity-saturation);
}
/* ---------------------------------------------------------------------------
* Entity chip — inline name badge with entity color
* Name
* (color injected via --entity-hue / --entity-saturation at :root or parent)
* --------------------------------------------------------------------------- */
.entity-chip {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 3px;
font-size: 0.85em;
font-weight: 500;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 45%);
color: #fff;
white-space: nowrap;
transition: opacity var(--entity-duration) var(--entity-easing);
}
.entity-chip:hover {
opacity: 0.85;
}
/* ---------------------------------------------------------------------------
* Entity card — L2 capsule: name + color + role one-liner
* ...
* --------------------------------------------------------------------------- */
.entity-card {
display: flex;
flex-direction: column;
gap: 4px;
border-radius: 6px;
background-color: hsl(var(--entity-hue), var(--entity-saturation), 22%);
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
*
* --------------------------------------------------------------------------- */
.entity-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 2px solid hsla(var(--entity-hue), var(--entity-saturation), 10%, 0.25);
display: inline-flex;
align-items: center;
justify-content: center;
background-color: hsla(var(--entity-hue), var(--entity-saturation), 30%, 0.25);
}
.entity-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---------------------------------------------------------------------------
* Outfit transition — applies entity motion values to an element
* ...
* --------------------------------------------------------------------------- */
.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: 12px;
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;
}
}
:root {
/* Alice — warm gold palette, distinct from main portal */
--alice-bg: #0A0A0A;
--alice-text: #F0EDE5;
--alice-accent: #F4B844;
--alice-accent-dark: #E8A738;
--alice-border: #2A2A2A;
--alice-success: #8AC926;
--alice-subtle: #555555;
--alice-surface: #111111;
--alice-spacing: 1.5rem;
--bg: #0D0D0D;
--bg-surface: #111111;
--bg-raised: #171717;
--bg-dark: #0A0A0A;
--text: #E8E6E1;
--text-dim: #A09E9A;
--accent: #C9A84C;
--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; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-weight: 400;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
code, pre {
font-family: var(--font-mono);
}
/* --- Navigation --- */
.site-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 32px;
position: sticky;
top: 0;
z-index: 100;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
}
.nav-key-icon {
color: var(--accent);
font-size: 18px;
line-height: 1;
}
.nav-wordmark {
color: var(--text);
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-link {
font-size: 14px;
color: var(--slate-light);
transition: color 0.15s;
}
.nav-links {
display: flex;
align-items: center;
gap: 24px;
}
.nav-link:hover { color: var(--text); }
/* --- 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 — /blog and /blog/:slug
============================================================ */
.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; }
}
/* ============================================================
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; }
}
/* ═══════════════════════════════════════════════════════════════════════════ */
/* INSIDERS */
/* ═══════════════════════════════════════════════════════════════════════════ */
.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; }
}
/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.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;
}
.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;
}
.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); }
/* ── Callback ────────────────────────────────────────────────────────────── */
.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;
}
/* ── Not a sponsor ───────────────────────────────────────────────────────── */
.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);
}
/* ── Dashboard ───────────────────────────────────────────────────────────── */
.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;
}
/* ── Join page ───────────────────────────────────────────────────────────── */
.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;
}
/* ── Insiders responsive ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
.insiders-auth-grid { grid-template-columns: 1fr; }
.insiders-join-tiers { grid-template-columns: 1fr; }
.insiders-banner-inner { gap: 10px; }
.insiders-logout-link { margin-left: 0; width: 100%; text-align: left; }
}
/* ── 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 {
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 */
}
/* --- Left sidebar --- */
.entity-profile {
width: 311px;
flex-shrink: 0;
padding: 24px;
border-right: 1px solid var(--border);
overflow-y: visible; /* no independent scroll — page scroll only */
align-self: flex-start; /* don't stretch to main panel height */
position: sticky;
top: 0;
}
.entity-profile-avatar {
margin-bottom: 16px;
}
.entity-avatar-circle {
width: 260px;
height: 260px;
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;
}
.entity-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.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: 14px;
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;
}
.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: 13px;
color: var(--text-dim);
}
.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: 13px;
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;
}
/* --- CTA buttons (GitHub sponsor-style) --- */
/* Live 24h activity stats 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: 11px;
}
.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: 13px;
}
.entity-live-val--age { font-size: 11px; }
.entity-live-label { color: var(--text-dim); }
/* 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: 11px; 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;
}
.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: 14px;
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));
}
/* Sponsor variant renders as not */
.entity-btn-message--sponsor {
border: none;
width: 100%;
cursor: pointer;
font-family: var(--font-body);
}
.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: 32px;
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;
}
/* --- Entity profile: avatar glow --- */
.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); }
}
/* --- Entity profile: sidebar flight status block --- */
.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: 13px;
}
.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: 11px;
color: #5bd5b5;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.entity-flight-status-slug {
font-family: var(--font-mono);
font-size: 11px;
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: 11px;
color: var(--text-dim);
margin-left: auto;
}
/* --- Entity profile: flight cards in activity feed --- */
.entity-flight-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 12px;
}
.entity-flight-card--active {
border-color: rgba(91, 213, 181, 0.35);
background: rgba(91, 213, 181, 0.04);
}
.entity-flight-card-icon {
font-size: 16px;
color: #5bd5b5;
flex-shrink: 0;
width: 20px;
text-align: center;
margin-top: 2px;
}
.entity-flight-card--active .entity-flight-card-icon {
animation: pulse-dot 1.4s ease-in-out infinite;
}
.entity-flight-card-body {
flex: 1;
min-width: 0;
}
.entity-flight-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.entity-flight-card-title {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.entity-flight-card-time {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
flex-shrink: 0;
}
.entity-flight-card-summary {
font-size: 13px;
color: var(--text);
line-height: 1.5;
margin: 0 0 8px;
opacity: 0.8;
}
.entity-flight-card-meta {
display: flex;
align-items: center;
gap: 8px;
}
.entity-flight-card-elapsed,
.entity-flight-card-duration {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
}
.entity-flight-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
background: rgba(91, 213, 181, 0.12);
color: #5bd5b5;
border: 1px solid rgba(91, 213, 181, 0.25);
}
.entity-flight-badge--flying {
animation: entity-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes entity-badge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
/* --- Responsive: collapse to single column on narrow viewports --- */
@media (max-width: 768px) {
.entity-layout {
flex-direction: column;
overflow-y: auto;
}
.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;
}
.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;
}
/* ============================================================
Overview — /overview (public kingdom dashboard)
============================================================ */
.overview-main {
min-height: calc(100vh - 73px);
}
.overview-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 64px 32px 96px;
}
.overview-header {
border-bottom: 1px solid var(--border);
}
.overview-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text);
margin-bottom: 10px;
}
.overview-subhead {
font-size: 16px;
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 8px;
}
.overview-refresh-link {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slate);
text-decoration: none;
}
.overview-layout {
display: flex;
gap: 40px;
align-items: flex-start;
}
.overview-entities {
flex: 1 1 0;
min-width: 0;
}
.overview-activity {
width: 300px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.overview-section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 16px;
}
/* --- Entity grid cards --- */
.overview-entity-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
margin-bottom: 40px;
}
.ov-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-left: 3px solid var(--ov-accent, transparent);
border-radius: 2px;
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
min-height: 120px; /* uniform card height regardless of bio/role length */
}
/* Presence border states: active / idle / offline
.ov-card already has border-left: 3px solid var(--ov-accent, transparent).
Active: full opacity accent border.
Idle: reduced opacity via a pseudo-element overlay trick — use filter on card opacity modifier.
Offline: transparent (default already). */
.ov-card--active {
border-left-color: var(--ov-accent);
}
.ov-card--idle {
/* 0.3 opacity on border: use a pseudo-element since CSS can't alpha-mod custom props inline */
position: relative;
border-left-color: transparent;
}
.ov-card--idle::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--ov-accent);
opacity: 0.3;
border-radius: 2px 0 0 2px;
}
.ov-card--offline {
border-left-color: transparent;
}
.ov-card:hover {
background: var(--bg-raised);
border-color: rgba(255,255,255,0.12);
}
.ov-card-header {
display: flex;
align-items: center;
gap: 10px;
}
.ov-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--bg);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
}
.ov-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ov-card-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ov-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.ov-role-label {
font-size: 11px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.ov-flying-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #5bd5b5;
margin-left: auto;
flex-shrink: 0;
animation: pulse-dot 1.4s ease-in-out infinite;
}
.ov-flight-info {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
background: rgba(91,213,181,0.06);
border-radius: 2px;
}
.ov-flight-brief {
font-family: var(--font-mono);
font-size: 11px;
color: #5bd5b5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-flight-meta {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
}
.ov-card-footer {
display: flex;
gap: 12px;
margin-top: auto;
}
.ov-stat {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
}
/* --- Activity panel --- */
.ov-panel {
/* no background — integrated with page */
}
.ov-flight-row {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.ov-flight-row--active {
border-left: 2px solid #5bd5b5;
padding-left: 10px;
}
.ov-flight-entity {
display: flex;
align-items: center;
gap: 8px;
}
.ov-flight-entity-name {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.ov-flight-detail {
display: flex;
flex-direction: column;
gap: 2px;
}
.ov-flight-slug {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-flight-stats {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
}
.ov-flight-status-badge {
font-family: var(--font-mono);
font-size: 10px;
padding: 1px 6px;
border-radius: 2px;
text-transform: lowercase;
}
.ov-flight-status-badge--landed {
color: var(--green);
background: rgba(62,175,106,0.1);
}
.ov-flight-status-badge--failed {
color: #e05555;
background: rgba(224,85,85,0.1);
}
.ov-empty {
font-size: 13px;
color: var(--text-dim);
padding: 12px 0;
}
@media (max-width: 768px) {
.overview-layout {
flex-direction: column;
}
.overview-activity {
width: 100%;
}
.overview-inner {
padding: 40px 16px 64px;
}
}
/* ── 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);
}
.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: 12px;
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: 13px;
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: 14px;
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;
}
/* 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;
}
/* ============================================================
Overview stats strip — aggregate counts at top of /overview
============================================================ */
.overview-stats-strip {
display: flex;
gap: 32px;
padding: 20px 24px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 2px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.ov-stat-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.ov-stat-val {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 700;
color: var(--accent);
display: flex;
align-items: center;
gap: 6px;
line-height: 1;
}
.ov-stat-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.ov-stat-flying-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #5bd5b5;
animation: pulse-dot 1.4s ease-in-out infinite;
flex-shrink: 0;
}
/* ============================================================
Emissions feed — activity panel section on /overview
============================================================ */
.ov-emission-row {
display: grid;
grid-template-columns: 70px 60px 1fr auto;
align-items: baseline;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 12px;
}
.ov-emission-entity {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ov-emission-type-badge {
font-family: var(--font-mono);
font-size: 10px;
padding: 1px 5px;
border-radius: 2px;
text-transform: lowercase;
white-space: nowrap;
}
.ov-emission-type-badge--notice { color: #5b9bd5; background: rgba(91,155,213,0.12); }
.ov-emission-type-badge--warning { color: #d4a535; background: rgba(212,165,53,0.12); }
.ov-emission-type-badge--error { color: #d55b5b; background: rgba(213,91,91,0.12); }
.ov-emission-type-badge--request { color: #a55bd5; background: rgba(165,91,213,0.12); }
.ov-emission-body {
color: var(--text-dim);
font-size: 11px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-emission-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
white-space: nowrap;
}
.ov-emission-row--error { border-left: 2px solid rgba(213,91,91,0.4); padding-left: 8px; }
.ov-emission-row--warning { border-left: 2px solid rgba(212,165,53,0.3); padding-left: 8px; }
/* Emission avatar (overview panel) */
.ov-emission-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,0.9);
}
.ov-emission-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 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);
}
/* ============================================================
AccessCard — denied-slot placeholder
REPLACE: Muse visionary direction — placeholder only.
Extension point: data-slot attribute identifies which gate.
============================================================ */
.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);
}
/* Phase 1b: Muse sponsor CTA — btn-sponsor-path */
.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 {
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;
}
/* 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);
}
/* =======================================================
/me — Disclosure Dashboard (Phase 3)
Muse visionary direction, R2 decisions §8 + §9.
Curation surface, not permissions panel.
======================================================= */
.me-main {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
min-height: calc(100vh - 140px);
}
.me-header {
margin-bottom: 48px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border, #2A2825);
}
.me-title {
font-size: clamp(28px, 3vw, 36px);
font-weight: 700;
color: var(--text, #E8E6E3);
margin-bottom: 8px;
}
.me-subhead {
font-size: 15px;
color: var(--slate-light, #6B7280);
}
.me-leaf-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.disclosure-leaf-card {
background: var(--bg-surface, #1A1917);
border: 1px solid var(--border, #2A2825);
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, 'JetBrains Mono', monospace);
font-size: 13px;
font-weight: 500;
color: var(--text, #E8E6E3);
}
.leaf-card-status {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
color: var(--slate, #4A5568);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.leaf-card-value {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
color: var(--slate-light, #6B7280);
word-break: break-word;
}
.leaf-card-communities {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--border, #2A2825);
}
.disclosure-community-toggle {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--slate-light, #6B7280);
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, #2A2825);
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, #E8E6E3);
}
.me-empty {
text-align: center;
padding: 64px 24px;
color: var(--slate-light, #6B7280);
}
.me-empty-title {
font-size: 18px;
color: var(--text, #E8E6E3);
margin-bottom: 12px;
}
.me-empty-body {
font-size: 14px;
margin-bottom: 24px;
}
/* =======================================================
Scorecard — inline expansion inside AccessCard
Muse R2 §8 — in-context, not modal overlay
Phase 4: proximity bar + leaf row state classes
======================================================= */
.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;
}
/* =======================================================
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-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 {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--slate-light);
}
.group-sigil-mark {
color: var(--entity-accent, var(--accent));
opacity: 0.7;
}
.group-sigil-name {
letter-spacing: 0.04em;
}
.leaf-card-tick {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 1;
transition: opacity 1.5s ease-out;
}
.leaf-card-tick.faded {
opacity: 0;
}
/* ── Sovereign Login ────────────────────────────────────────────────────────── */
.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;
}
/* ── 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;
}
/* ── /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-emission-row {
display: grid;
grid-template-columns: 80px 1fr 80px;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
font-size: 13px;
}
.flight-emission-type {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 3px;
background: rgba(255,255,255,0.05);
color: var(--slate-light);
text-align: center;
}
.flight-emission-type--flight { background: rgba(201,168,76,0.12); color: var(--accent); }
.flight-emission-type--progress { background: rgba(62,175,106,0.10); color: #3EAF6A; }
.flight-emission-type--complete { background: rgba(62,175,106,0.15); color: #3EAF6A; }
.flight-emission-type--error { background: rgba(239,68,68,0.12); color: #f87171; }
.flight-emission-body {
color: var(--text-dim);
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.flight-emission-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--slate);
text-align: right;
}
.flight-timeline-empty {
font-size: 13px;
color: var(--slate);
font-style: italic;
}
/* 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 {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--card-bg, rgba(255,255,255,0.03));
border: 1px solid var(--border, rgba(255,255,255,0.06));
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: background 0.15s, border-color 0.15s;
}
.flights-index-row:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.12);
}
.flights-index-row--flying {
border-left: 3px solid hsl(var(--entity-hue, 200), 65%, 55%);
padding-left: 14px; /* compensate for border width increase */
}
.flights-index-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.flights-index-body {
flex: 1;
min-width: 0;
}
.flights-index-row-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 3px;
}
.flights-index-entity {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.flights-index-status {
font-size: 11px;
padding: 2px 7px;
border-radius: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.flights-index-status--flying {
background: rgba(78, 205, 196, 0.15);
color: #4ecdc4;
}
.flights-index-status--landed {
background: rgba(100, 100, 120, 0.15);
color: var(--slate-light, #888);
}
.flights-index-status--stale {
background: rgba(255, 160, 0, 0.1);
color: #ffa040;
}
.flights-index-summary {
font-size: 13px;
color: var(--slate-light);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.flights-index-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--slate-dim, #666);
}
.flights-index-elapsed {
color: var(--slate-light);
}
.flights-index-cost {
color: var(--accent-dim, #555);
}
.flights-index-time {
margin-left: auto;
}
.flights-index-chevron {
font-size: 20px;
color: var(--slate-dim, #555);
flex-shrink: 0;
}
.flights-index-empty {
color: var(--slate-light);
font-size: 15px;
padding-top: 24px;
}
/* ── Sovereign link panel ────────────────────────────────────────────────── */
.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;
}
/* ── 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);
} 