/* ─────────────────────────────────────────────────────────────────────────────
Werkhaus Shell CSS
Layout grid, nav components, cards, forms, and all shared UI primitives.
Imports tokens.css. Never define colors directly — always use tokens.
───────────────────────────────────────────────────────────────────────────── */
@import url('./tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
height: 100%;
background: var(--wk-bg-base);
color: var(--wk-text);
font-family: var(--wk-font-body);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* ── Shell root — full viewport grid ────────────────────────────────────── */
#shell-root {
display: grid;
grid-template-columns: var(--wk-rail-w) var(--wk-nav-w) 1fr;
grid-template-rows: var(--wk-topbar-h) 1fr var(--wk-footer-h);
height: 100vh;
overflow: hidden;
}
/* Sidebar variants controlled by data-sidebar on #shell-root */
#shell-root[data-sidebar="right"] {
grid-template-columns: var(--wk-rail-w) var(--wk-nav-w) 1fr var(--wk-sidebar-w);
}
#shell-root[data-sidebar="wide"] {
grid-template-columns: var(--wk-rail-w) var(--wk-nav-w) 1fr var(--wk-sidebar-wide);
}
#shell-root[data-sidebar="both"] {
grid-template-columns: var(--wk-rail-w) var(--wk-nav-w) 1fr var(--wk-sidebar-wide) 200px;
}
#shell-root[data-sidebar="none"] {
grid-template-columns: var(--wk-rail-w) var(--wk-nav-w) 1fr;
}
/* ── Icon rail ───────────────────────────────────────────────────────────── */
#shell-rail {
grid-row: 1 / -1;
grid-column: 1;
background: var(--wk-bg-base);
border-right: 1px solid var(--wk-border);
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
gap: 2px;
z-index: 30;
}
.rail-logo {
width: 32px;
height: 32px;
border-radius: var(--wk-r-md);
background: var(--wk-accent);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wk-font-display);
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
flex-shrink: 0;
text-decoration: none;
}
.rail-btn {
width: 36px;
height: 36px;
border-radius: var(--wk-r-md);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--wk-duration) var(--wk-ease),
color var(--wk-duration) var(--wk-ease);
color: var(--wk-text-3);
border: none;
background: none;
position: relative;
text-decoration: none;
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:hover { background: var(--wk-bg-3); color: var(--wk-text); }
.rail-btn.active {
background: var(--wk-accent-dim);
color: var(--wk-accent);
}
.rail-btn .rail-badge {
position: absolute;
top: 4px;
right: 4px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wk-green);
border: 1.5px solid var(--wk-bg-base);
}
.rail-tooltip {
position: absolute;
left: 44px;
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-sm);
padding: 4px 10px;
font-size: 12px;
color: var(--wk-text);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s;
z-index: 100;
}
.rail-btn:hover .rail-tooltip { opacity: 1; }
.rail-spacer { flex: 1; }
.rail-divider {
width: 20px;
height: 1px;
background: var(--wk-border);
margin: 4px 0;
}
/* ── Nav panel ───────────────────────────────────────────────────────────── */
#shell-nav {
grid-row: 1 / -1;
grid-column: 2;
background: var(--wk-bg-1);
border-right: 1px solid var(--wk-border);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 20;
}
.nav-header {
height: var(--wk-topbar-h);
display: flex;
align-items: center;
padding: 0 var(--wk-space-4);
border-bottom: 1px solid var(--wk-border);
flex-shrink: 0;
}
.nav-header-title {
font-family: var(--wk-font-display);
font-size: 14px;
font-weight: 700;
color: var(--wk-text);
}
.nav-body {
flex: 1;
overflow-y: auto;
padding: var(--wk-space-2) var(--wk-space-2);
scrollbar-width: none;
}
.nav-body::-webkit-scrollbar { display: none; }
.nav-section-label {
padding: var(--wk-space-4) var(--wk-space-3) var(--wk-space-1);
font-size: 10px;
color: var(--wk-text-3);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 500;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px var(--wk-space-3);
border-radius: var(--wk-r-md);
cursor: pointer;
transition: background var(--wk-duration) var(--wk-ease),
color var(--wk-duration) var(--wk-ease);
color: var(--wk-text-2);
font-size: 13px;
text-decoration: none;
position: relative;
}
.nav-item:hover { background: var(--wk-bg-3); color: var(--wk-text); }
.nav-item.active {
background: var(--wk-accent-dim);
color: var(--wk-accent);
font-weight: 500;
}
.nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 2px;
background: var(--wk-accent);
border-radius: 0 2px 2px 0;
}
.nav-item-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.nav-item-icon svg { width: 16px; height: 16px; }
.nav-item-label { flex: 1; }
.nav-badge {
padding: 1px 7px;
border-radius: var(--wk-r-pill);
font-size: 10px;
font-family: var(--wk-font-mono);
font-weight: 500;
background: var(--wk-accent-dim);
color: var(--wk-accent);
flex-shrink: 0;
}
.nav-badge.green { background: var(--wk-green-dim); color: var(--wk-green); }
.nav-badge.amber { background: var(--wk-amber-dim); color: var(--wk-amber); }
.nav-footer {
padding: var(--wk-space-3);
border-top: 1px solid var(--wk-border);
flex-shrink: 0;
}
.nav-user-chip {
display: flex;
align-items: center;
gap: var(--wk-space-2);
padding: 9px var(--wk-space-3);
border-radius: var(--wk-r-md);
background: var(--wk-bg-2);
cursor: pointer;
transition: background var(--wk-duration) var(--wk-ease);
}
.nav-user-chip:hover { background: var(--wk-bg-3); }
.nav-user-av {
width: 28px;
height: 28px;
border-radius: var(--wk-r-sm);
background: var(--wk-accent-dim);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--wk-accent);
flex-shrink: 0;
overflow: hidden;
}
.nav-user-av canvas { display: block; }
.nav-user-name { font-size: 13px; font-weight: 500; color: var(--wk-text); }
.nav-user-role { font-size: 10px; color: var(--wk-text-2); }
.nav-xp-bar {
height: 3px;
background: var(--wk-border);
border-radius: 2px;
margin-top: 4px;
overflow: hidden;
}
.nav-xp-fill {
height: 100%;
background: var(--wk-accent);
border-radius: 2px;
transition: width 0.6s var(--wk-ease);
}
/* ── Topbar ──────────────────────────────────────────────────────────────── */
#shell-topbar {
grid-column: 3 / -1;
grid-row: 1;
background: var(--wk-bg-1);
border-bottom: 1px solid var(--wk-border);
display: flex;
align-items: center;
padding: 0 var(--wk-space-5);
gap: var(--wk-space-3);
z-index: 10;
}
.topbar-breadcrumb {
display: flex;
align-items: center;
gap: var(--wk-space-2);
font-size: 13px;
}
.topbar-crumb { color: var(--wk-text-2); }
.topbar-crumb-sep { color: var(--wk-text-3); font-size: 11px; }
.topbar-crumb.current { color: var(--wk-text); font-weight: 500; }
.topbar-spacer { flex: 1; }
.topbar-search {
display: flex;
align-items: center;
gap: var(--wk-space-2);
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
padding: 6px var(--wk-space-3);
width: 200px;
font-size: 13px;
color: var(--wk-text-3);
cursor: text;
transition: border-color var(--wk-duration);
}
.topbar-search:focus-within {
border-color: var(--wk-border-focus);
color: var(--wk-text);
}
.topbar-search input {
border: none;
background: none;
outline: none;
color: var(--wk-text);
font-family: var(--wk-font-body);
font-size: 13px;
width: 100%;
}
.topbar-search input::placeholder { color: var(--wk-text-3); }
.topbar-icon-btn {
width: 34px;
height: 34px;
border-radius: var(--wk-r-md);
border: 1px solid var(--wk-border);
background: var(--wk-bg-2);
color: var(--wk-text-2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--wk-duration), color var(--wk-duration);
flex-shrink: 0;
}
.topbar-icon-btn svg { width: 16px; height: 16px; }
.topbar-icon-btn:hover { background: var(--wk-bg-3); color: var(--wk-text); }
.topbar-cta {
padding: 7px var(--wk-space-4);
border-radius: var(--wk-r-md);
background: var(--wk-accent);
color: #fff;
font-size: 13px;
font-weight: 500;
border: none;
cursor: pointer;
transition: opacity var(--wk-duration);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.topbar-cta:hover { opacity: 0.88; }
.topbar-cta svg { width: 14px; height: 14px; }
.topbar-theme-btn {
width: 34px;
height: 34px;
border-radius: var(--wk-r-md);
border: 1px solid var(--wk-border);
background: var(--wk-bg-2);
color: var(--wk-text-2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
}
/* ── Content area ────────────────────────────────────────────────────────── */
#shell-content {
grid-column: 3;
grid-row: 2;
background: var(--wk-bg-base);
overflow-y: auto;
overflow-x: hidden;
padding: var(--wk-space-5);
scrollbar-width: thin;
scrollbar-color: var(--wk-border) transparent;
}
/* ── Right sidebar ───────────────────────────────────────────────────────── */
#shell-sidebar {
grid-column: 4;
grid-row: 2;
background: var(--wk-bg-1);
border-left: 1px solid var(--wk-border);
overflow-y: auto;
overflow-x: hidden;
padding: var(--wk-space-4);
scrollbar-width: none;
display: flex;
flex-direction: column;
gap: var(--wk-space-5);
}
#shell-sidebar::-webkit-scrollbar { display: none; }
/* ── Footer ──────────────────────────────────────────────────────────────── */
#shell-footer {
grid-column: 3 / -1;
grid-row: 3;
background: var(--wk-bg-1);
border-top: 1px solid var(--wk-border);
display: flex;
align-items: center;
padding: 0 var(--wk-space-5);
gap: var(--wk-space-4);
font-size: 11px;
color: var(--wk-text-3);
}
.footer-link {
color: var(--wk-text-3);
text-decoration: none;
transition: color var(--wk-duration);
}
.footer-link:hover { color: var(--wk-text-2); }
.footer-spacer { flex: 1; }
.footer-status {
display: flex;
align-items: center;
gap: var(--wk-space-1);
}
.footer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wk-green);
}
@keyframes wk-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.footer-dot.live { animation: wk-pulse 2s infinite; }
/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes wk-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wk-slide-in-left {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wk-slide-in-right {
from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wk-scale-in {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes wk-count-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes wk-shimmer {
from { background-position: -200% 0; }
to { background-position: 200% 0; }
}
/* Page content animates in on load */
#shell-content { animation: wk-fade-in 0.25s var(--wk-ease) both; }
#shell-sidebar { animation: wk-slide-in-right 0.3s var(--wk-ease) 0.05s both; }
#shell-nav { animation: wk-slide-in-left 0.25s var(--wk-ease) both; }
/* Stat cards stagger */
.wk-stat:nth-child(1) { animation: wk-fade-in 0.3s var(--wk-ease) 0.05s both; }
.wk-stat:nth-child(2) { animation: wk-fade-in 0.3s var(--wk-ease) 0.1s both; }
.wk-stat:nth-child(3) { animation: wk-fade-in 0.3s var(--wk-ease) 0.15s both; }
.wk-stat:nth-child(4) { animation: wk-fade-in 0.3s var(--wk-ease) 0.2s both; }
/* Cards animate in */
.wk-card { animation: wk-scale-in 0.25s var(--wk-ease) 0.15s both; }
/* Feed items stagger */
.wk-feed-item:nth-child(1) { animation: wk-fade-in 0.2s var(--wk-ease) 0.2s both; }
.wk-feed-item:nth-child(2) { animation: wk-fade-in 0.2s var(--wk-ease) 0.25s both; }
.wk-feed-item:nth-child(3) { animation: wk-fade-in 0.2s var(--wk-ease) 0.3s both; }
.wk-feed-item:nth-child(4) { animation: wk-fade-in 0.2s var(--wk-ease) 0.35s both; }
.wk-feed-item:nth-child(5) { animation: wk-fade-in 0.2s var(--wk-ease) 0.4s both; }
/* Skeleton loading state */
.wk-skeleton {
background: linear-gradient(90deg,
var(--wk-bg-3) 25%, var(--wk-border-hover) 50%, var(--wk-bg-3) 75%);
background-size: 200% 100%;
animation: wk-shimmer 1.4s infinite;
border-radius: var(--wk-r-sm);
color: transparent;
user-select: none;
}
/* Nav item transition — already set but reinforce */
.nav-item { transition: background 0.12s var(--wk-ease), color 0.12s var(--wk-ease), padding-left 0.12s var(--wk-ease); }
.nav-item:hover { padding-left: 16px; }
.nav-item.active { padding-left: 16px; }
/* Rail button hover scale */
.rail-btn { transition: background 0.12s, color 0.12s, transform 0.12s var(--wk-ease); }
.rail-btn:hover { transform: scale(1.08); }
.rail-btn.active { transform: scale(1); }
/* Card hover lift */
.wk-card { transition: border-color 0.15s var(--wk-ease), transform 0.15s var(--wk-ease); }
.wk-card:hover { border-color: var(--wk-border-hover); transform: translateY(-1px); }
/* Stat value count-up animation trigger */
.wk-stat-value.counting { animation: wk-count-up 0.4s var(--wk-ease) both; }
/* Mobile slide overlay nav */
.nav-overlay {
position: fixed;
inset: 0;
background: var(--wk-bg-overlay);
z-index: 40;
display: none;
animation: wk-fade-in 0.2s var(--wk-ease);
}
.nav-overlay.open { display: block; }
#shell-nav.slide-open {
display: flex !important;
position: fixed;
left: var(--wk-rail-w);
top: 0;
bottom: 0;
z-index: 45;
animation: wk-slide-in-left 0.22s var(--wk-ease);
box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
/* Scrollbar styling */
#shell-content::-webkit-scrollbar { width: 5px; }
#shell-content::-webkit-scrollbar-track { background: transparent; }
#shell-content::-webkit-scrollbar-thumb { background: var(--wk-border-hover); border-radius: 3px; }
#shell-content::-webkit-scrollbar-thumb:hover { background: var(--wk-text-3); }
/* Focus visible */
.rail-btn:focus-visible,
.nav-item:focus-visible,
.wk-btn:focus-visible,
.wk-input:focus-visible {
outline: 2px solid var(--wk-border-focus);
outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════════════════
SHARED COMPONENT LIBRARY
All reusable UI components. Use these everywhere — never rebuild.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Stat cards ──────────────────────────────────────────────────────────── */
.wk-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--wk-space-3);
margin-bottom: var(--wk-space-5);
}
.wk-stat {
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-lg);
padding: var(--wk-space-4);
}
.wk-stat-label {
font-size: 10px;
color: var(--wk-text-2);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: var(--wk-space-2);
}
.wk-stat-value {
font-family: var(--wk-font-mono);
font-size: 26px;
font-weight: 500;
color: var(--wk-text);
line-height: 1;
margin-bottom: var(--wk-space-1);
}
.wk-stat-delta { font-size: 12px; }
.wk-stat-delta.up { color: var(--wk-green); }
.wk-stat-delta.down { color: var(--wk-red); }
.wk-stat-delta.neutral { color: var(--wk-text-2); }
.wk-stat.accent { border-color: rgba(91,138,245,.3); }
.wk-stat.accent .wk-stat-value { color: var(--wk-accent); }
/* ── Cards ───────────────────────────────────────────────────────────────── */
.wk-card {
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-lg);
padding: var(--wk-space-4);
}
.wk-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--wk-space-3);
}
.wk-card-title {
font-size: 12px;
font-weight: 600;
color: var(--wk-text);
letter-spacing: .2px;
}
.wk-card-action {
font-size: 12px;
color: var(--wk-accent);
cursor: pointer;
text-decoration: none;
}
.wk-card-action:hover { text-decoration: underline; }
/* ── Feed items ──────────────────────────────────────────────────────────── */
.wk-feed-item {
display: flex;
align-items: flex-start;
gap: var(--wk-space-3);
padding: var(--wk-space-3) 0;
border-bottom: 1px solid var(--wk-border);
}
.wk-feed-item:last-child { border-bottom: none; }
.wk-feed-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
}
.wk-feed-body { flex: 1; min-width: 0; }
.wk-feed-title {
font-size: 13px;
font-weight: 500;
color: var(--wk-text);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wk-feed-sub { font-size: 11px; color: var(--wk-text-2); }
.wk-feed-time {
font-size: 10px;
color: var(--wk-text-3);
font-family: var(--wk-font-mono);
flex-shrink: 0;
white-space: nowrap;
}
/* ── Tags / badges ───────────────────────────────────────────────────────── */
.wk-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--wk-r-sm);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.wk-tag.accent { background: var(--wk-accent-dim); color: var(--wk-accent); }
.wk-tag.green { background: var(--wk-green-dim); color: var(--wk-green); }
.wk-tag.amber { background: var(--wk-amber-dim); color: var(--wk-amber); }
.wk-tag.red { background: var(--wk-red-dim); color: var(--wk-red); }
.wk-tag.purple { background: var(--wk-purple-dim); color: var(--wk-purple); }
.wk-tag.teal { background: var(--wk-teal-dim); color: var(--wk-teal); }
.wk-tag.muted { background: var(--wk-bg-3); color: var(--wk-text-2); }
/* ── Tier badges ─────────────────────────────────────────────────────────── */
.wk-tier {
width: 28px;
height: 28px;
border-radius: var(--wk-r-sm);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wk-font-mono);
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.wk-tier-A { background: var(--wk-green-dim); color: var(--wk-green); }
.wk-tier-B { background: var(--wk-accent-dim); color: var(--wk-accent); }
.wk-tier-C { background: var(--wk-amber-dim); color: var(--wk-amber); }
.wk-tier-D { background: var(--wk-bg-3); color: var(--wk-text-2); }
/* ── Progress / bar ──────────────────────────────────────────────────────── */
.wk-bar-track {
height: 4px;
background: var(--wk-border);
border-radius: 2px;
overflow: hidden;
}
.wk-bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.6s var(--wk-ease);
}
.wk-bar-fill.accent { background: var(--wk-accent); }
.wk-bar-fill.green { background: var(--wk-green); }
.wk-bar-fill.amber { background: var(--wk-amber); }
.wk-bar-fill.red { background: var(--wk-red); }
/* ── Sidebar widgets ─────────────────────────────────────────────────────── */
.wk-widget { }
.wk-widget-title {
font-size: 10px;
color: var(--wk-text-3);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: var(--wk-space-3);
font-weight: 500;
}
.wk-widget-row {
display: flex;
align-items: center;
gap: var(--wk-space-2);
padding: 6px 0;
border-bottom: 1px solid var(--wk-border);
}
.wk-widget-row:last-child { border-bottom: none; }
.wk-widget-av {
width: 26px;
height: 26px;
border-radius: var(--wk-r-sm);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
}
.wk-widget-label { font-size: 12px; color: var(--wk-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-widget-value { font-family: var(--wk-font-mono); font-size: 11px; color: var(--wk-text-2); }
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.wk-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px var(--wk-space-4);
border-radius: var(--wk-r-md);
font-family: var(--wk-font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all var(--wk-duration) var(--wk-ease);
border: 1px solid transparent;
text-decoration: none;
white-space: nowrap;
}
.wk-btn svg { width: 14px; height: 14px; }
.wk-btn-primary { background: var(--wk-accent); color: #fff; }
.wk-btn-primary:hover { opacity: 0.88; }
.wk-btn-secondary { background: var(--wk-bg-3); border-color: var(--wk-border); color: var(--wk-text); }
.wk-btn-secondary:hover { background: var(--wk-border); }
.wk-btn-ghost { background: none; border-color: var(--wk-border); color: var(--wk-text-2); }
.wk-btn-ghost:hover { color: var(--wk-text); background: var(--wk-bg-3); }
.wk-btn-danger { background: var(--wk-red-dim); color: var(--wk-red); border-color: rgba(240,79,79,.2); }
.wk-btn-danger:hover { background: rgba(240,79,79,.2); }
.wk-btn-sm { padding: 5px var(--wk-space-3); font-size: 12px; }
.wk-btn-full { width: 100%; justify-content: center; }
/* ── Inputs ──────────────────────────────────────────────────────────────── */
.wk-input {
width: 100%;
padding: 9px var(--wk-space-3);
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
color: var(--wk-text);
font-family: var(--wk-font-body);
font-size: 13px;
outline: none;
transition: border-color var(--wk-duration);
}
.wk-input:focus { border-color: var(--wk-border-focus); }
.wk-input::placeholder { color: var(--wk-text-3); }
/* ── Divider ─────────────────────────────────────────────────────────────── */
.wk-divider {
height: 1px;
background: var(--wk-border);
margin: var(--wk-space-4) 0;
}
/* ── Page header (within content area) ──────────────────────────────────── */
.wk-page-header { margin-bottom: var(--wk-space-5); }
.wk-page-title {
font-family: var(--wk-font-display);
font-size: 20px;
font-weight: 700;
color: var(--wk-text);
margin-bottom: 4px;
}
.wk-page-sub { font-size: 13px; color: var(--wk-text-2); }
/* ── Grid helpers ────────────────────────────────────────────────────────── */
.wk-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--wk-space-4); }
.wk-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--wk-space-4); }
.wk-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--wk-space-4); }
/* ── Shared page header + hero ────────────────────────────────────────────
Mirrors the Files browser's two-element pattern. Structure:
[icon svg]
SECTION
Page name
subtitle / live counts
[optional action buttons]
NOTE: don't use .wk-page-header for this — that class is already taken
by an older simpler title-block pattern used on Settings/Profile/
Notifications/etc. The crumb-bar pattern uses different names to
avoid colliding with that legacy markup.
Color variants on .wk-hero-art: is-accent, is-teal, is-amber, is-pink,
is-green, is-purple, is-red. */
/* Breadcrumb row — sits above the hero. Holds the breadcrumb / page
title text on the left and optional pills/badges on the right.
Same flexbox geometry as .fp-header in browser.html. */
.wk-crumb-bar {
display: flex; align-items: center; gap: 16px;
flex-shrink: 0;
margin-bottom: var(--wk-space-4);
}
.wk-crumb {
display: flex; align-items: center; gap: 8px;
flex: 1 1 auto;
min-width: 0;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.wk-crumb a {
color: var(--wk-text-3); cursor: pointer;
text-decoration: none;
transition: color 100ms ease;
white-space: nowrap;
}
.wk-crumb a:hover { color: var(--wk-text); }
.wk-crumb a.is-current,
.wk-crumb span.is-current {
color: var(--wk-text); font-weight: 600; cursor: default;
font-size: 18px;
letter-spacing: -0.2px;
}
.wk-crumb-sep { color: var(--wk-text-3); opacity: 0.45; font-size: 14px; }
/* Hero card — geometry matches .fp-hero. align-items:flex-start (NOT
center) so when the meta line wraps to two lines the icon stays
pinned to the top of the body content. */
.wk-hero {
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: 12px;
padding: 16px 20px;
display: flex;
align-items: flex-start;
gap: 14px;
flex-shrink: 0;
margin-bottom: var(--wk-space-4);
}
.wk-hero-art {
width: 52px; height: 52px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: color-mix(in srgb, var(--wk-accent) 16%, transparent);
color: var(--wk-accent);
}
.wk-hero-art svg { width: 26px; height: 26px; }
.wk-hero-art.is-accent { background: color-mix(in srgb, var(--wk-accent) 16%, transparent); color: var(--wk-accent); }
.wk-hero-art.is-teal { background: color-mix(in srgb, var(--wk-teal) 16%, transparent); color: var(--wk-teal); }
.wk-hero-art.is-amber { background: color-mix(in srgb, var(--wk-amber) 16%, transparent); color: var(--wk-amber); }
/* --wk-pink isn't in tokens.css yet — use an explicit hex so the tint
renders. Color matches the design palette's pink swatch. */
.wk-hero-art.is-pink { background: color-mix(in srgb, #ec4899 16%, transparent); color: #f472b6; }
.wk-hero-art.is-green { background: color-mix(in srgb, var(--wk-green) 16%, transparent); color: var(--wk-green); }
.wk-hero-art.is-purple { background: color-mix(in srgb, var(--wk-purple) 16%, transparent); color: var(--wk-purple); }
.wk-hero-art.is-red { background: color-mix(in srgb, var(--wk-red) 16%, transparent); color: var(--wk-red); }
.wk-hero-body { flex: 1 1 auto; min-width: 0; }
.wk-hero-eyebrow {
font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--wk-text-3);
margin-bottom: 4px;
}
.wk-hero-title {
font-size: 22px; font-weight: 600;
color: var(--wk-text);
letter-spacing: -0.4px;
line-height: 1.2;
margin: 0 0 6px;
font-family: var(--wk-font-display);
}
.wk-hero-meta {
font-size: 12px;
color: var(--wk-text-2);
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.wk-hero-meta-sep { color: var(--wk-text-3); opacity: 0.5; }
.wk-hero-acts {
flex-shrink: 0;
display: flex; align-items: center; gap: 8px;
}
/* Stack vertically on narrow viewports so the title isn't crushed */
@media (max-width: 640px) {
.wk-hero { flex-direction: column; align-items: flex-start; }
.wk-hero-acts { width: 100%; }
.wk-crumb-bar { flex-wrap: wrap; }
}
/* ── Wrapper-context overrides ───────────────────────────────────────────
Some pages (Dashboard, Plugin, Gallery, Performance, Queue, Insights)
wrap their content in a flex-column container with a `gap` set. In
those contexts, the wrapper's gap is the single source of truth for
inter-section spacing — the hero and crumb-bar's own margin-bottom
would otherwise *add* to the gap (flex margins don't collapse) and
produce visibly larger gutters than non-wrapper pages (Renders,
Machines, Live, Dispatch). Zero out the margins so spacing is uniform
regardless of wrapper. */
.dash-wrap > .wk-hero,
.dash-wrap > .wk-crumb-bar,
.pl-wrap > .wk-hero,
.pl-wrap > .wk-crumb-bar,
.soon-wrap > .wk-hero,
.soon-wrap > .wk-crumb-bar {
margin-bottom: 0;
}
/* ── Persistent right sidebar — empty state & detail container ───────────
Used by Dashboard, Gallery, Performance, Queue, Machines, Plugin,
Insights. Each page injects its own detail content into #wk-side-mount.
The empty state shows a faint icon + tailored "select an X" copy when
nothing is selected. */
.wk-side-empty {
height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: var(--wk-space-5);
color: var(--wk-text-3);
}
.wk-side-empty-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--wk-space-4);
color: var(--wk-text-3);
}
.wk-side-empty-icon svg { width: 28px; height: 28px; }
.wk-side-empty-title {
font-size: 14px; font-weight: 500;
color: var(--wk-text-2);
margin-bottom: 6px;
}
.wk-side-empty-sub {
font-size: 12px; line-height: 1.5;
color: var(--wk-text-3);
max-width: 280px;
}
/* Detail panel scaffolding — common sub-elements that every page's detail
view will use. Keeps per-page CSS lean. */
.wk-side-head {
display: flex; align-items: flex-start; gap: 12px;
padding-bottom: var(--wk-space-4);
border-bottom: 1px solid var(--wk-border);
margin-bottom: var(--wk-space-4);
}
.wk-side-head-icon {
width: 40px; height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
background: var(--wk-bg-3);
color: var(--wk-text-2);
}
.wk-side-head-icon svg { width: 20px; height: 20px; }
.wk-side-head-body { flex: 1; min-width: 0; }
.wk-side-head-eyebrow {
font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--wk-text-3);
margin-bottom: 4px;
}
.wk-side-head-title {
font-size: 16px; font-weight: 600;
letter-spacing: -0.2px;
color: var(--wk-text);
word-break: break-word;
}
.wk-side-head-meta {
font-size: 12px; color: var(--wk-text-2);
margin-top: 4px;
}
.wk-side-section { margin-bottom: var(--wk-space-5); }
.wk-side-section-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.6px;
text-transform: uppercase; color: var(--wk-text-3);
margin-bottom: 8px;
}
.wk-side-kv {
display: grid; grid-template-columns: 110px 1fr;
gap: 8px var(--wk-space-3); font-size: 12px;
}
.wk-side-kv dt { color: var(--wk-text-3); }
.wk-side-kv dd {
margin: 0; color: var(--wk-text);
font-family: var(--wk-font-mono); font-size: 11px;
word-break: break-all; line-height: 1.5;
}
.wk-side-kv dd.is-prose {
font-family: var(--wk-font-body); font-size: 12px;
word-break: normal;
}
.wk-side-actions {
display: flex; flex-direction: column; gap: 6px;
margin-top: var(--wk-space-4);
}
/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
#shell-root,
#shell-root[data-sidebar="right"],
#shell-root[data-sidebar="wide"],
#shell-root[data-sidebar="both"] {
grid-template-columns: var(--wk-rail-w) 1fr;
grid-template-rows: var(--wk-topbar-h) 1fr var(--wk-footer-h);
}
#shell-nav { display: none; }
#shell-topbar,
#shell-content,
#shell-footer { grid-column: 2 / -1; }
#shell-sidebar {
display: none;
}
#shell-content { grid-row: 2; }
.wk-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
#shell-root,
#shell-root[data-sidebar="right"],
#shell-root[data-sidebar="wide"] {
grid-template-columns: 1fr;
grid-template-rows: var(--wk-topbar-h) 1fr 52px;
}
#shell-rail { display: none; }
#shell-topbar,
#shell-content { grid-column: 1; }
#shell-footer {
grid-column: 1;
justify-content: space-around;
padding: 0;
}
#shell-content { padding: var(--wk-space-4); }
.wk-grid-2,
.wk-grid-3,
.wk-grid-4 { grid-template-columns: minmax(0,1fr); }
.topbar-search { display: none; }
}
/* ── Modular dashboard system ────────────────────────────────────────────
12-column × 80px-row grid that hosts WerkDashModules. Each module
carries its grid position via CSS custom properties (--x --y --w --h)
set in inline style. The grid engine writes these; CSS does the math.
See /home/claude/work/MODULAR_DASHBOARD_SPEC.md for the design contract.
──────────────────────────────────────────────────────────────────── */
.wk-dash-host { display: block; }
.wk-dash-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-auto-rows: 80px;
gap: 12px;
width: 100%;
}
.wk-dash-mod {
/* Position from custom properties. +1 because grid lines are 1-indexed. */
grid-column: calc(var(--x) + 1) / span var(--w);
grid-row: calc(var(--y) + 1) / span var(--h);
background: var(--wk-bg-2);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
padding: var(--wk-space-3) var(--wk-space-4);
overflow: hidden;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
position: relative;
}
.wk-dash-mod-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.wk-mod-loading {
display: flex; align-items: center; justify-content: center;
flex: 1; color: var(--wk-text-3); font-size: 11px;
}
/* Empty-state when no project is selected — sits inside .wk-dash-grid as
a full-width tile so the page doesn't collapse to zero height. */
.wk-dash-empty {
grid-column: 1 / -1;
background: var(--wk-bg-2); border: 1px dashed var(--wk-border);
border-radius: var(--wk-r-md);
padding: var(--wk-space-6);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; min-height: 320px;
}
.wk-dash-empty-title { font-size: 14px; color: var(--wk-text-2); margin-bottom: 6px; }
.wk-dash-empty-sub { font-size: 12px; color: var(--wk-text-3); max-width: 320px; }
/* ── Module-level chrome (used by every module type) ──────────────────── */
.wk-mod-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 8px; flex-shrink: 0;
}
.wk-mod-title {
font-family: var(--wk-font-display);
font-size: 13px; font-weight: 500;
color: var(--wk-text);
}
.wk-mod-sub {
font-size: 10.5px; color: var(--wk-text-3);
margin-left: auto;
}
.wk-mod-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
color: var(--wk-text-3); padding: var(--wk-space-3);
}
.wk-mod-empty-title { font-size: 12px; color: var(--wk-text-2); margin-bottom: 4px; }
.wk-mod-empty-sub { font-size: 11px; max-width: 240px; line-height: 1.4; }
.wk-mod-placeholder {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
color: var(--wk-text-3); padding: var(--wk-space-3);
}
.wk-mod-placeholder-title {
font-size: 12px; color: var(--wk-text-2); margin-bottom: 4px;
text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.wk-mod-placeholder-sub { font-size: 11px; max-width: 220px; line-height: 1.4; }
/* ── KPI tile ─────────────────────────────────────────────────────────── */
.wk-mod-kpi-label {
font-size: 10px; color: var(--wk-text-3);
text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500;
margin-bottom: 6px;
}
.wk-mod-kpi-value {
font-family: var(--wk-font-mono); font-size: 22px; font-weight: 500;
line-height: 1; color: var(--wk-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-kpi-detail {
font-size: 11px; color: var(--wk-text-3); margin-top: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-delta {
display: inline-block; font-size: 10px; padding: 2px 6px;
border-radius: var(--wk-r-sm); font-weight: 500; margin-left: 6px;
font-family: var(--wk-font-mono); vertical-align: 2px;
}
.wk-mod-delta.is-good { background: var(--wk-green-dim); color: var(--wk-green); }
.wk-mod-delta.is-bad { background: var(--wk-red-dim); color: var(--wk-red); }
/* ── Line chart (shared SVG styling) ──────────────────────────────────── */
.wk-mod-chart-area {
flex: 1; min-height: 0;
display: flex; align-items: stretch;
/* Hide overflow so an oversized SVG can't blow out the card. The SVG
inside uses preserveAspectRatio="xMidYMid meet" so it scales down
to fit but never stretches past its natural aspect ratio. */
overflow: hidden;
}
.wk-mod-chart-area svg {
display: block;
width: 100%; height: 100%;
/* min-height/max-height intentionally not set — preserveAspectRatio="meet"
on the SVG handles letterboxing on too-tall containers. */
}
.wk-mod-axis { stroke: var(--wk-border); stroke-width: 1; }
.wk-mod-axis-label { fill: var(--wk-text-3); font-size: 10px; font-family: var(--wk-font-mono); }
.wk-mod-grid { stroke: var(--wk-border); stroke-width: 1; opacity: 0.5; stroke-dasharray: 2,3; }
.wk-mod-line { fill: none; stroke: var(--wk-accent); stroke-width: 2; }
.wk-mod-dot { fill: var(--wk-accent); stroke-width: 0; }
.wk-mod-opt-tick { stroke: var(--wk-amber); stroke-width: 2; fill: var(--wk-bg-base); }
/* ── Heatmap grid ─────────────────────────────────────────────────────── */
.wk-mod-heat-body {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
/* The grid fills the body — each row gets an equal share of the
available height, so a tall card distributes vertical space across
the 4 metric rows instead of leaving a gap below. */
}
.wk-mod-heat-grid {
display: flex; flex-direction: column;
gap: 2px; flex: 1; min-height: 0;
}
.wk-mod-heat-row {
display: flex; gap: 12px; align-items: stretch;
flex: 1; min-height: 16px; /* Floor on row height so tiny modules still readable */
max-height: 48px; /* Ceiling so giant cards don't make rows look like blocks */
}
.wk-mod-heat-label {
flex: 0 0 48px; font-family: var(--wk-font-mono);
font-size: 10px; color: var(--wk-text-3); text-align: right;
display: flex; align-items: center; justify-content: flex-end;
}
.wk-mod-heat-cells { flex: 1; display: flex; gap: 1px; min-width: 0; }
.wk-mod-heat-cell {
flex: 1; min-width: 0;
border-radius: 2px;
transition: filter 100ms ease;
}
.wk-mod-heat-cell:hover { filter: brightness(1.25); }
.wk-mod-heat-axis { display: flex; gap: 12px; margin-top: 6px; align-items: center; flex-shrink: 0; }
.wk-mod-heat-axis-row { flex: 1; position: relative; height: 12px; min-width: 0; }
.wk-mod-heat-tick {
position: absolute; top: 0;
font-family: var(--wk-font-mono); font-size: 10px;
color: var(--wk-text-3); white-space: nowrap;
}
.wk-mod-heat-tick.is-left { transform: translateX(0); }
.wk-mod-heat-tick.is-center { transform: translateX(-50%); }
.wk-mod-heat-tick.is-right { transform: translateX(-100%); }
/* ── Bar chart ────────────────────────────────────────────────────────── */
.wk-mod-bar-body {
flex: 1; min-height: 0; overflow-y: auto;
/* Use flex column so the list can grow to fill if it wants, but
scrolls if there are more rows than fit. */
display: flex; flex-direction: column;
}
.wk-mod-bar-list {
display: flex; flex-direction: column; gap: 6px;
/* Rows distribute across available height up to a per-row max — if
there's only 1-3 rows, they spread vertically instead of clumping
at the top with empty space below. */
flex: 1; justify-content: flex-start;
}
.wk-mod-bar-row {
display: grid;
grid-template-columns: minmax(64px, 110px) 1fr minmax(50px, auto) minmax(36px, auto);
align-items: center; gap: 10px;
font-size: 11px;
/* Bound the row height so 1-2 rows in a tall card look proportional
rather than each becoming a giant block. */
min-height: 22px;
max-height: 36px;
}
.wk-mod-bar-key {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--wk-text-2);
}
.wk-mod-bar-track {
background: var(--wk-bg-3); border-radius: 3px; height: 14px;
overflow: hidden;
}
.wk-mod-bar-fill {
background: var(--wk-accent); height: 100%;
transition: width 200ms ease;
}
.wk-mod-bar-val {
font-family: var(--wk-font-mono); font-size: 10.5px;
color: var(--wk-text); text-align: right;
}
.wk-mod-bar-count {
font-family: var(--wk-font-mono); font-size: 10px;
color: var(--wk-text-3); text-align: right;
}
/* ── Recent activity strip ────────────────────────────────────────────── */
.wk-mod-recent-body {
flex: 1; min-height: 0; overflow-y: auto;
}
.wk-mod-recent-list { display: flex; flex-direction: column; gap: 2px; }
.wk-mod-recent-row {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: var(--wk-r-sm);
}
.wk-mod-recent-row:hover { background: var(--wk-bg-3); }
.wk-mod-recent-thumb {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 4px; background: var(--wk-bg-3);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.wk-mod-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-mod-recent-thumb-empty { background: var(--wk-bg-3); }
.wk-mod-recent-body-text { flex: 1; min-width: 0; }
.wk-mod-recent-title {
font-size: 11.5px; color: var(--wk-text); font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-recent-sub {
font-size: 10.5px; color: var(--wk-text-3); margin-top: 1px;
font-family: var(--wk-font-mono);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-recent-time {
font-size: 10.5px; color: var(--wk-text-3);
font-family: var(--wk-font-mono);
flex-shrink: 0;
}
/* Responsive — when the viewport gets narrow, collapse wide modules to
span the full row width instead of trying to fit in 12 cols. */
@media (max-width: 1200px) {
.wk-dash-mod[style*="--w:12"],
.wk-dash-mod[style*="--w: 12"] { /* already full-width, no-op */ }
}
@media (max-width: 720px) {
.wk-dash-grid { grid-template-columns: 1fr; }
.wk-dash-mod {
grid-column: 1 / -1 !important;
/* On phones every module gets one row each, stacked. The auto-row
height still applies; modules tall in the desktop layout will be
tall here too. */
}
}
/* ── Threshold band styling for trend lines ──────────────────────────────
The wk-mod-thresh-band rect sits BEHIND the line. Warn band is amber/dim;
critical band is red/dim — both with low alpha so the line stays
readable. wk-mod-thresh-line is the boundary line itself, drawn slightly
stronger so the user can see exactly where the threshold sits. */
.wk-mod-thresh-band.wk-mod-thresh-warn { fill: var(--wk-amber); opacity: 0.06; }
.wk-mod-thresh-band.wk-mod-thresh-critical { fill: var(--wk-red); opacity: 0.10; }
.wk-mod-thresh-line.wk-mod-thresh-warn { stroke: var(--wk-amber); stroke-width: 1; stroke-dasharray: 4,3; opacity: 0.55; }
.wk-mod-thresh-line.wk-mod-thresh-critical { stroke: var(--wk-red); stroke-width: 1; stroke-dasharray: 4,3; opacity: 0.65; }
/* ── Module footer chip ─────────────────────────────────────────────────
Single-row block under a module's main visualization showing "Latest: X"
plus an optional threshold-state chip (warn/critical/ok). */
.wk-mod-foot {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; color: var(--wk-text-3);
padding-top: 6px; margin-top: 4px;
border-top: 1px solid var(--wk-border);
flex-shrink: 0;
}
.wk-mod-foot-label { color: var(--wk-text-3); }
.wk-mod-foot-value { font-family: var(--wk-font-mono); color: var(--wk-text-2); }
.wk-mod-foot-chip {
font-size: 9.5px; padding: 1px 6px; border-radius: var(--wk-r-pill);
font-family: var(--wk-font-mono); text-transform: uppercase; letter-spacing: 0.4px;
margin-left: auto;
}
.wk-mod-foot-chip.is-good { background: var(--wk-green-dim); color: var(--wk-green); }
.wk-mod-foot-chip.is-bad { background: var(--wk-red-dim); color: var(--wk-red); }
/* ── Donut chart ──────────────────────────────────────────────────────── */
.wk-mod-donut-wrap { flex:1; min-height:0; display:flex; gap:var(--wk-space-3); align-items:center; }
.wk-mod-donut-svg { flex:0 0 auto; height:100%; max-width:160px; aspect-ratio:1/1; }
.wk-mod-donut-svg svg { width:100%; height:100%; }
.wk-mod-donut-center-num { font-family:var(--wk-font-mono); font-size:14px; fill:var(--wk-text); font-weight:600; }
.wk-mod-donut-center-lbl { font-family:var(--wk-font-mono); font-size:6px; fill:var(--wk-text-3); text-transform:uppercase; letter-spacing:0.5px; }
.wk-mod-donut-legend { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.wk-mod-donut-row { display:grid; grid-template-columns:12px 1fr auto auto; gap:8px; align-items:center; font-size:11px; }
.wk-mod-donut-swatch { width:10px; height:10px; border-radius:2px; }
.wk-mod-donut-key { color:var(--wk-text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-donut-val { font-family:var(--wk-font-mono); color:var(--wk-text); }
.wk-mod-donut-pct { font-family:var(--wk-font-mono); color:var(--wk-text-3); font-size:10px; }
/* ── Stat table ───────────────────────────────────────────────────────── */
.wk-mod-table-wrap { flex:1; min-height:0; overflow:auto; }
.wk-mod-table { width:100%; border-collapse:collapse; font-size:11px; }
.wk-mod-table th { text-align:left; font-weight:500; padding:6px 8px; color:var(--wk-text-3); text-transform:uppercase; letter-spacing:0.5px; font-size:10px; border-bottom:1px solid var(--wk-border); }
.wk-mod-table td { padding:6px 8px; color:var(--wk-text-2); border-bottom:1px solid var(--wk-border); font-family:var(--wk-font-mono); }
.wk-mod-table tr:last-child td { border-bottom:none; }
.wk-mod-table tbody tr:hover { background:var(--wk-bg-3); }
/* ── Optimization timeline cards ──────────────────────────────────────── */
.wk-mod-opt-list { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.wk-mod-opt-card { padding:8px 10px; border:1px solid var(--wk-border); border-radius:var(--wk-r-sm); background:var(--wk-bg-3); }
.wk-mod-opt-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.wk-mod-opt-when { font-size:10px; color:var(--wk-text-3); font-family:var(--wk-font-mono); }
.wk-mod-opt-outcome { font-size:10.5px; padding:1px 6px; border-radius:var(--wk-r-pill); font-family:var(--wk-font-mono); margin-left:auto; }
.wk-mod-opt-outcome.is-good { background:var(--wk-green-dim); color:var(--wk-green); }
.wk-mod-opt-outcome.is-bad { background:var(--wk-red-dim); color:var(--wk-red); }
.wk-mod-opt-outcome.is-pending { background:var(--wk-bg-2); color:var(--wk-text-3); }
.wk-mod-opt-score { font-size:9.5px; color:var(--wk-text-3); font-family:var(--wk-font-mono); }
.wk-mod-opt-actions { font-size:11.5px; color:var(--wk-text); margin-bottom:2px; }
.wk-mod-opt-actions em { color:var(--wk-text-3); font-style:italic; }
.wk-mod-opt-more { color:var(--wk-text-3); font-size:10.5px; margin-left:4px; }
.wk-mod-opt-meta { font-size:10px; color:var(--wk-text-3); font-family:var(--wk-font-mono); }
/* ── Frame chart wrap ─────────────────────────────────────────────────── */
.wk-mod-frame-wrap { flex:1; min-height:0; overflow:hidden; }
.wk-mod-frame-wrap svg { width:100%; height:100%; display:block; }
/* ── Text card ────────────────────────────────────────────────────────── */
.wk-mod-text-body { flex:1; font-size:12px; color:var(--wk-text-2); line-height:1.5; overflow-y:auto; padding:2px 0; }
.wk-mod-text-body strong { color:var(--wk-text); }
/* ── Modular dashboard: edit mode chrome ─────────────────────────────────
Edit-mode UI only appears when the grid host has .is-edit-mode set.
In view mode, modules are pristine: no handles, no borders.
In edit mode, controls float at the card's corners as small pills,
sitting OVER the card's content rather than displacing it. The card's
own padding handles spacing; chrome doesn't claim layout space.
The handle (top-left) is a grippy bar. Actions (top-right) are
small icon buttons. Resize grip stays on SE corner. */
.wk-dash-host.is-edit-mode .wk-dash-mod {
border-color: color-mix(in srgb, var(--wk-accent) 35%, var(--wk-border));
/* Subtle accent ring tells the user this card is interactive */
}
.wk-dash-mod.is-editable {
/* Add a tiny bit of top padding so chrome doesn't overlap module content.
The chrome bar itself is 24px tall but only the chrome edges peek out;
the module's own padding-top normally handles the visible offset. */
padding-top: calc(var(--wk-space-3) + 4px);
}
/* Drag handle — floating chip top-left corner, no layout space taken */
.wk-dash-mod-handle {
position: absolute;
top: 6px; left: 6px; z-index: 3;
cursor: grab;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--wk-bg-3);
border: 1px solid var(--wk-border);
border-radius: 5px;
color: var(--wk-text-3);
font-size: 11px;
user-select: none;
letter-spacing: -1px;
opacity: 0.5;
transition: opacity 120ms ease, background 120ms ease;
}
.wk-dash-mod.is-editable:hover .wk-dash-mod-handle { opacity: 1; }
.wk-dash-mod-handle:hover {
background: var(--wk-bg-2); color: var(--wk-text);
border-color: var(--wk-border-hover);
}
.wk-dash-mod-handle:active { cursor: grabbing; }
/* Action buttons — floating chip top-right corner */
.wk-dash-mod-actions {
position: absolute;
top: 6px; right: 6px; z-index: 3;
display: flex; gap: 3px;
opacity: 0.5;
transition: opacity 120ms ease;
}
.wk-dash-mod.is-editable:hover .wk-dash-mod-actions { opacity: 1; }
.wk-dash-mod-btn {
width: 22px; height: 22px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--wk-bg-3);
border: 1px solid var(--wk-border);
color: var(--wk-text-3);
font-size: 11px;
border-radius: 5px;
cursor: pointer;
line-height: 1;
}
.wk-dash-mod-btn:hover {
background: var(--wk-bg-2); color: var(--wk-text);
border-color: var(--wk-border-hover);
}
.wk-dash-mod-btn[data-action="remove"]:hover {
color: var(--wk-red); background: var(--wk-red-dim);
border-color: color-mix(in srgb, var(--wk-red) 50%, transparent);
}
/* Resize grip — small triangle in SE corner, becomes prominent on hover */
.wk-dash-mod-resize {
position: absolute; bottom: 0; right: 0;
width: 16px; height: 16px;
cursor: nwse-resize;
background: linear-gradient(135deg,
transparent 0%, transparent 55%,
var(--wk-text-3) 55%, var(--wk-text-3) 62%,
transparent 62%, transparent 72%,
var(--wk-text-3) 72%, var(--wk-text-3) 79%,
transparent 79%);
opacity: 0.35;
z-index: 3;
border-bottom-right-radius: var(--wk-r-md);
}
.wk-dash-mod.is-editable:hover .wk-dash-mod-resize { opacity: 0.7; }
.wk-dash-mod-resize:hover { opacity: 1 !important; }
.wk-dash-mod.is-dragging,
.wk-dash-mod.is-resizing {
opacity: 0.4;
pointer-events: none;
}
/* Drop-target ghost outline */
.wk-dash-ghost {
grid-column: calc(var(--x) + 1) / span var(--w);
grid-row: calc(var(--y) + 1) / span var(--h);
background: color-mix(in srgb, var(--wk-accent) 12%, transparent);
border: 2px dashed var(--wk-accent);
border-radius: var(--wk-r-md);
pointer-events: none;
z-index: 1;
}
/* "+ Add module" tile shown at the end of the grid in edit mode */
.wk-dash-add-tile {
grid-column: span 4;
grid-row: span 2;
border: 2px dashed var(--wk-border);
border-radius: var(--wk-r-md);
display: flex; align-items: center; justify-content: center;
color: var(--wk-text-3); font-size: 12.5px;
cursor: pointer;
transition: all 120ms ease;
min-height: 80px;
}
.wk-dash-add-tile:hover {
border-color: var(--wk-accent);
color: var(--wk-accent);
background: color-mix(in srgb, var(--wk-accent) 6%, transparent);
}
/* When a palette drag is in progress, the grid lights up as a drop target */
.wk-dash-host.is-drag-target .wk-dash-grid {
outline: 2px dashed color-mix(in srgb, var(--wk-accent) 50%, transparent);
outline-offset: 6px;
border-radius: var(--wk-r-md);
}
/* ── Drawer (right slide-in panel for palette + settings) ──────────────── */
.wk-dash-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
/* Match the wide sidebar width so the right edge of the drawer aligns
with what users are used to in the rest of the app. The drawer
covers the existing sidebar while open — when closed it returns to
its original layout. */
width: var(--wk-sidebar-wide, 460px);
max-width: 100vw;
background: var(--wk-bg-base);
border-left: 1px solid var(--wk-border);
box-shadow: -10px 0 30px rgba(0,0,0,0.3);
z-index: 1000;
transform: translateX(100%);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
display: flex; flex-direction: column;
}
.wk-dash-drawer.is-open { transform: translateX(0); }
.wk-dash-drawer-head {
padding: 14px 18px;
border-bottom: 1px solid var(--wk-border);
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.wk-dash-drawer-title {
font-family: var(--wk-font-display);
font-size: 14px; font-weight: 500;
color: var(--wk-text);
}
.wk-dash-drawer-close {
margin-left: auto;
background: transparent; border: 1px solid var(--wk-border);
color: var(--wk-text-2); font-size: 12px;
width: 26px; height: 26px;
border-radius: var(--wk-r-sm);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.wk-dash-drawer-close:hover { background: var(--wk-bg-3); color: var(--wk-text); }
.wk-dash-drawer-body {
flex: 1; min-height: 0; overflow-y: auto;
padding: 14px 18px;
}
.wk-dash-drawer-foot {
padding: 12px 18px; border-top: 1px solid var(--wk-border);
display: flex; gap: 8px; justify-content: flex-end;
flex-shrink: 0;
}
.wk-dash-drawer-action {
padding: 7px 14px;
background: var(--wk-accent); color: var(--wk-text);
border: 1px solid var(--wk-accent);
border-radius: var(--wk-r-md);
font-size: 12px; font-weight: 500;
cursor: pointer;
}
.wk-dash-drawer-action:hover { filter: brightness(1.1); }
.wk-dash-drawer-action.wk-dash-drawer-action-sec {
background: var(--wk-bg-2); color: var(--wk-text-2);
border-color: var(--wk-border);
}
/* ── Palette ──────────────────────────────────────────────────────────── */
.wk-dash-palette-search {
margin: 12px 18px 0;
padding: 8px 12px;
background: var(--wk-bg-2); border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
font-size: 12px; color: var(--wk-text);
font-family: inherit;
}
.wk-dash-pal-hint {
margin: 6px 18px 0;
font-size: 11px; color: var(--wk-text-3);
font-style: italic;
}
.wk-dash-pal-cat { margin-bottom: 22px; }
.wk-dash-pal-cat-head {
font-size: 10px; color: var(--wk-text-3);
text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600;
margin-bottom: 8px;
display: flex; align-items: baseline; gap: 6px;
padding: 0 2px;
}
.wk-dash-pal-cat-head span {
font-family: var(--wk-font-mono); font-size: 9.5px;
color: var(--wk-text-3); opacity: 0.7;
}
.wk-dash-pal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.wk-dash-pal-card {
background: var(--wk-bg-2); border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
overflow: hidden;
cursor: grab;
transition: all 140ms ease;
display: flex; flex-direction: column;
user-select: none;
}
.wk-dash-pal-card:hover {
border-color: var(--wk-accent);
background: color-mix(in srgb, var(--wk-accent) 4%, var(--wk-bg-2));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.wk-dash-pal-card:active { cursor: grabbing; }
.wk-dash-pal-card-preview {
background: var(--wk-bg-3);
border-bottom: 1px solid var(--wk-border);
aspect-ratio: 100 / 60;
display: flex; align-items: center; justify-content: center;
padding: 4px;
}
.wk-dash-pal-card-preview svg {
width: 100%; height: 100%; display: block;
}
.wk-dash-pal-card-meta {
padding: 8px 10px;
}
.wk-dash-pal-card-label {
font-size: 11.5px; color: var(--wk-text);
margin-bottom: 3px;
font-weight: 500;
line-height: 1.25;
}
.wk-dash-pal-card-size {
font-family: var(--wk-font-mono); font-size: 9.5px;
color: var(--wk-text-3);
}
/* Floating drag ghost while dragging a module out of the palette */
.wk-dash-pal-drag-ghost {
position: fixed; z-index: 2000;
pointer-events: none;
background: var(--wk-bg-2);
border: 1px solid var(--wk-accent);
border-radius: var(--wk-r-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
width: 180px;
overflow: hidden;
opacity: 0.92;
transform: rotate(-2deg);
}
.wk-dash-pal-drag-ghost .wk-dash-pal-card-preview {
background: var(--wk-bg-3);
border-bottom: 1px solid var(--wk-border);
aspect-ratio: 100 / 60;
padding: 4px;
display: flex; align-items: center; justify-content: center;
}
.wk-dash-pal-drag-ghost .wk-dash-pal-card-preview svg {
width: 100%; height: 100%; display: block;
}
.wk-dash-pal-drag-ghost .wk-dash-pal-card-label {
font-size: 11.5px; color: var(--wk-text); font-weight: 500;
padding: 8px 10px;
}
/* ── Settings form ────────────────────────────────────────────────────── */
.wk-dash-field {
display: flex; flex-direction: column;
gap: 5px; margin-bottom: 14px;
}
.wk-dash-field > span {
font-size: 11px; color: var(--wk-text-2);
font-weight: 500;
}
.wk-dash-field input[type="text"],
.wk-dash-field input[type="number"],
.wk-dash-field select,
.wk-dash-field textarea {
background: var(--wk-bg-2); border: 1px solid var(--wk-border);
color: var(--wk-text); font-size: 12px;
padding: 7px 10px; border-radius: var(--wk-r-sm);
font-family: inherit;
width: 100%; box-sizing: border-box;
}
.wk-dash-field input:focus, .wk-dash-field select:focus, .wk-dash-field textarea:focus {
outline: 1px solid var(--wk-accent);
border-color: var(--wk-accent);
}
.wk-dash-field textarea { resize: vertical; min-height: 100px; font-family: var(--wk-font-mono); }
.wk-dash-field-bool {
flex-direction: row; align-items: center; gap: 8px;
}
.wk-dash-field-bool input[type="checkbox"] {
width: auto; margin: 0;
}
/* ── Undo toast (bottom-left) ─────────────────────────────────────────── */
.wk-dash-undo-toast {
position: fixed; bottom: 24px; left: 24px;
background: var(--wk-bg-2); border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
padding: 10px 12px 10px 14px;
display: flex; align-items: center; gap: 12px;
font-size: 12px; color: var(--wk-text-2);
z-index: 1100;
animation: wk-dash-toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes wk-dash-toast-in {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.wk-dash-undo-btn {
background: var(--wk-accent); color: var(--wk-text);
border: none; padding: 4px 10px;
font-size: 11px; border-radius: var(--wk-r-sm);
cursor: pointer; font-weight: 500;
}
.wk-dash-undo-btn:hover { filter: brightness(1.1); }
/* ── HOME MODULES ──────────────────────────────────────────────────────── */
/* Quick-link tile — big icon, label, optional sub. Whole card is a link. */
.wk-mod-ql {
display: flex; flex-direction: column; gap: 10px;
width: 100%; height: 100%;
text-decoration: none;
color: inherit;
padding: 6px 4px;
border-radius: var(--wk-r-md);
transition: background 120ms ease;
min-width: 0;
}
.wk-mod-ql:hover { background: var(--wk-bg-3); }
.wk-mod-ql:hover .wk-mod-ql-arrow { color: var(--wk-text-2); transform: translateX(2px); }
.wk-mod-ql-head {
display: flex; align-items: center; gap: 12px;
min-width: 0;
}
.wk-mod-ql-icon {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: var(--wk-r-md);
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
}
.wk-mod-ql-icon svg { width: 22px; height: 22px; }
/* Hero stat — large number + small unit label, sits next to the icon */
.wk-mod-ql-hero { flex-shrink: 0; line-height: 1; text-align: left; }
.wk-mod-ql-hero-num {
font-family: var(--wk-font-mono);
font-size: 26px; font-weight: 600;
color: var(--wk-text);
line-height: 1;
}
.wk-mod-ql-hero-lbl {
font-size: 9px; color: var(--wk-text-3);
text-transform: uppercase; letter-spacing: 0.5px;
margin-top: 4px;
}
/* Title block — module label + subtitle, flex-grows */
.wk-mod-ql-title { min-width: 0; flex: 1; }
.wk-mod-ql-label {
font-size: 14px; font-weight: 600; color: var(--wk-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.2;
}
.wk-mod-ql-sub {
font-size: 10.5px; color: var(--wk-text-3);
margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-ql-arrow {
flex-shrink: 0;
color: var(--wk-text-3);
transition: transform 120ms ease, color 120ms ease;
}
.wk-mod-ql-arrow svg { width: 16px; height: 16px; display: block; }
/* Preview rows — second region of the card, shows live context data */
.wk-mod-ql-preview {
display: flex; flex-direction: column; gap: 4px;
padding-top: 8px;
border-top: 1px solid var(--wk-border);
min-width: 0;
}
.wk-mod-ql-prow {
display: flex; align-items: center; gap: 7px;
font-size: 11px;
min-width: 0;
}
.wk-mod-ql-dot {
width: 6px; height: 6px; border-radius: 50%;
flex-shrink: 0;
}
.wk-mod-ql-prow-main {
color: var(--wk-text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1; min-width: 0;
}
.wk-mod-ql-prow-val {
font-family: var(--wk-font-mono);
color: var(--wk-text); font-weight: 500;
flex-shrink: 0;
}
/* Compact / short adaptations */
.wk-dash-mod.is-compact .wk-mod-ql-hero { display: none; }
.wk-dash-mod.is-compact .wk-mod-ql-sub { display: none; }
.wk-dash-mod.is-compact .wk-mod-ql-preview { display: none; }
.wk-dash-mod.is-short .wk-mod-ql-preview { display: none; }
.wk-dash-mod.is-short .wk-mod-ql-sub { display: none; }
.wk-dash-mod.is-spacious .wk-mod-ql-icon { width: 52px; height: 52px; }
.wk-dash-mod.is-spacious .wk-mod-ql-icon svg { width: 26px; height: 26px; }
.wk-dash-mod.is-spacious .wk-mod-ql-hero-num { font-size: 30px; }
/* Profile XP card */
.wk-mod-profile {
display: flex; flex-direction: column; gap: 10px;
height: 100%; padding: 2px;
}
.wk-mod-profile-head { display: flex; align-items: center; gap: 10px; }
.wk-mod-profile-avatar {
width: 40px; height: 40px; border-radius: 50%;
flex-shrink: 0; object-fit: cover;
background: var(--wk-bg-3);
}
.wk-mod-profile-avatar-init {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--wk-font-mono); font-weight: 600;
color: var(--wk-text); font-size: 13px;
background: linear-gradient(135deg, var(--wk-accent), var(--wk-purple));
}
.wk-mod-profile-id { min-width: 0; flex: 1; }
.wk-mod-profile-name {
font-size: 13px; font-weight: 500; color: var(--wk-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-profile-rank { font-size: 11px; color: var(--wk-text-3); margin-top: 1px; }
.wk-mod-profile-lvl-row {
display: flex; align-items: baseline; justify-content: space-between;
font-family: var(--wk-font-mono);
}
.wk-mod-profile-lvl { font-size: 18px; font-weight: 600; color: var(--wk-text); }
.wk-mod-profile-xp { font-size: 11px; color: var(--wk-text-3); }
.wk-mod-profile-bar {
height: 8px;
background: var(--wk-bg-3);
border-radius: var(--wk-r-pill);
overflow: hidden;
}
.wk-mod-profile-bar-fill {
height: 100%;
background: linear-gradient(to right, var(--wk-accent), var(--wk-purple));
border-radius: var(--wk-r-pill);
transition: width 400ms ease;
}
.wk-mod-profile-bar-meta {
display: flex; justify-content: space-between;
font-family: var(--wk-font-mono);
font-size: 10px; color: var(--wk-text-3);
}
.wk-mod-profile-streak {
font-size: 11px; color: var(--wk-amber);
padding: 4px 8px;
background: color-mix(in srgb, var(--wk-amber) 12%, transparent);
border-radius: var(--wk-r-pill);
align-self: flex-start;
}
/* Recent renders grid — card-style horizontal scroller */
.wk-mod-recent-grid {
flex: 1; min-height: 0; overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 8px;
padding: 2px;
}
.wk-mod-recent-card {
background: var(--wk-bg-3);
border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
overflow: hidden;
text-decoration: none; color: inherit;
transition: all 120ms ease;
display: flex; flex-direction: column;
}
.wk-mod-recent-card:hover {
border-color: var(--wk-accent);
transform: translateY(-1px);
}
.wk-mod-recent-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: var(--wk-bg-2);
overflow: hidden;
}
.wk-mod-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-mod-recent-thumb.is-noimg {
background: linear-gradient(135deg, var(--wk-bg-2), var(--wk-bg-3));
}
.wk-mod-recent-status {
position: absolute; top: 4px; right: 4px;
padding: 2px 6px; border-radius: var(--wk-r-sm);
font-size: 9.5px; font-family: var(--wk-font-mono);
text-transform: uppercase; letter-spacing: 0.3px;
background: var(--wk-bg-2);
color: var(--wk-text-3);
}
.wk-mod-recent-status.is-bad { background: var(--wk-red-dim); color: var(--wk-red); }
.wk-mod-recent-status.is-warn { background: color-mix(in srgb, var(--wk-amber) 18%, transparent); color: var(--wk-amber); }
.wk-mod-recent-status.is-good { background: color-mix(in srgb, var(--wk-green) 18%, transparent); color: var(--wk-green); }
.wk-mod-recent-status.is-info { background: color-mix(in srgb, var(--wk-accent) 18%, transparent); color: var(--wk-accent); }
.wk-mod-recent-status.is-pending { background: var(--wk-bg-2); color: var(--wk-text-3); }
.wk-mod-recent-info {
padding: 6px 8px 8px;
}
.wk-mod-recent-title {
font-size: 11.5px; color: var(--wk-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 2px;
}
.wk-mod-recent-meta {
font-size: 10px; color: var(--wk-text-3);
font-family: var(--wk-font-mono);
}
/* Generic list rows (files / dispatches / notifications) */
.wk-mod-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.wk-mod-list-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
text-decoration: none; color: inherit;
border-radius: var(--wk-r-sm);
transition: background 120ms ease;
}
.wk-mod-list-row:hover { background: var(--wk-bg-3); }
.wk-mod-list-row.is-unread {
background: color-mix(in srgb, var(--wk-accent) 4%, transparent);
}
.wk-mod-list-row.is-unread::before {
content: ''; width: 6px; height: 6px;
background: var(--wk-accent); border-radius: 50%;
flex-shrink: 0;
}
.wk-mod-list-icon {
width: 28px; height: 28px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--wk-bg-3);
border-radius: var(--wk-r-sm);
color: var(--wk-text-3);
}
.wk-mod-list-icon svg { width: 14px; height: 14px; }
.wk-mod-notif-icon { background: color-mix(in srgb, var(--wk-accent) 10%, var(--wk-bg-3)); color: var(--wk-accent); }
.wk-mod-list-body { min-width: 0; flex: 1; }
.wk-mod-list-title {
font-size: 12px; color: var(--wk-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-mod-list-meta {
font-size: 10.5px; color: var(--wk-text-3);
font-family: var(--wk-font-mono);
margin-top: 1px;
}
.wk-mod-list-tail { flex-shrink: 0; }
/* System health card */
.wk-mod-health { display: flex; flex-direction: column; gap: 6px; padding: 2px; }
.wk-mod-health-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px;
background: var(--wk-bg-3);
border-radius: var(--wk-r-sm);
font-size: 11.5px;
}
.wk-mod-health-label { color: var(--wk-text-3); }
.wk-mod-health-value {
color: var(--wk-text); font-family: var(--wk-font-mono);
display: inline-flex; align-items: center; gap: 8px;
}
/* Footer chip variants used by recent strips */
.wk-mod-foot-chip.is-warn { background: color-mix(in srgb, var(--wk-amber) 18%, transparent); color: var(--wk-amber); }
/* Fleet stack rows (totals card) */
.wk-mod-stack { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wk-mod-stack-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 6px 10px;
background: var(--wk-bg-3);
border-radius: var(--wk-r-sm);
font-size: 11.5px;
}
.wk-mod-stack-row > span:first-child { color: var(--wk-text-3); }
.wk-mod-stack-row > span:last-child { color: var(--wk-text); font-family: var(--wk-font-mono); font-weight: 500; }
/* Last-render card layout */
.wk-mod-lastrender { display: flex; gap: 12px; padding: 2px; flex: 1; min-height: 0; }
.wk-mod-lr-thumb { width: 140px; flex-shrink: 0; aspect-ratio: 16/9; background: var(--wk-bg-3); border-radius: var(--wk-r-sm); overflow: hidden; }
.wk-mod-lr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wk-mod-lr-thumb-empty { background: linear-gradient(135deg, var(--wk-bg-3), var(--wk-bg-2)); }
.wk-mod-lr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.wk-mod-lr-title { font-size: 12.5px; color: var(--wk-text); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.wk-mod-lr-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--wk-text-3); font-family: var(--wk-font-mono); }
.wk-mod-lr-meta > span { white-space: nowrap; }
/* Time-of-day grid */
.wk-mod-tod-body { flex: 1; display: flex; align-items: center; padding: 4px 2px; min-height: 0; }
.wk-mod-tod-grid { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.wk-mod-tod-row { display: grid; grid-template-columns: 22px repeat(24, 1fr); gap: 2px; align-items: center; }
.wk-mod-tod-row.wk-mod-tod-hdr .wk-mod-tod-hcell { font-size: 8.5px; color: var(--wk-text-3); font-family: var(--wk-font-mono); text-align: center; }
.wk-mod-tod-label { font-size: 9.5px; color: var(--wk-text-3); font-family: var(--wk-font-mono); text-align: right; padding-right: 2px; }
.wk-mod-tod-cell { aspect-ratio: 1/1; border-radius: 2px; min-height: 8px; }
/* No-project preview banner (Performance:Project with nothing selected) */
.wk-dash-noproj-banner {
grid-column: 1 / -1;
background: color-mix(in srgb, var(--wk-accent) 8%, var(--wk-bg-2));
border: 1px solid color-mix(in srgb, var(--wk-accent) 30%, var(--wk-border));
border-radius: var(--wk-r-md);
padding: 10px 14px;
font-size: 12px;
color: var(--wk-text-2);
display: flex; align-items: center; gap: 6px;
}
.wk-dash-noproj-banner strong { color: var(--wk-accent); }
/* ── RENDER PLAYER MODULES ─────────────────────────────────────────────── */
.wk-mod-player { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.wk-mod-player-pickrow { flex-shrink: 0; }
.wk-mod-render-picker {
width: 100%;
background: var(--wk-bg-3); border: 1px solid var(--wk-border);
color: var(--wk-text); font-size: 11.5px;
padding: 6px 9px; border-radius: var(--wk-r-sm);
font-family: inherit; cursor: pointer;
box-sizing: border-box;
}
.wk-mod-render-picker:focus { outline: 1px solid var(--wk-accent); border-color: var(--wk-accent); }
/* Render selector summary rows */
.wk-mod-player-summary { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.wk-mod-player-sumrow {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 9px;
background: var(--wk-bg-3); border-radius: var(--wk-r-sm);
font-size: 11.5px;
}
.wk-mod-player-sumrow > span:first-child { color: var(--wk-text-3); }
.wk-mod-player-sumrow > span:last-child { color: var(--wk-text); font-family: var(--wk-font-mono); display: inline-flex; align-items: center; gap: 6px; }
/* Render metrics bars */
.wk-mod-metric-bars { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding: 4px 0; }
.wk-mod-metric-row { display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; }
.wk-mod-metric-label { font-size: 11px; color: var(--wk-text-2); font-family: var(--wk-font-mono); }
.wk-mod-metric-track { position: relative; height: 16px; background: var(--wk-bg-3); border-radius: var(--wk-r-pill); overflow: hidden; }
.wk-mod-metric-sys { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--wk-r-pill); }
.wk-mod-metric-ble { position: absolute; top: 0; left: 0; height: 100%; border-radius: var(--wk-r-pill); }
.wk-mod-metric-val { font-size: 11px; color: var(--wk-text); font-family: var(--wk-font-mono); text-align: right; }
.wk-mod-metric-foot { font-size: 10.5px; color: var(--wk-text-3); font-family: var(--wk-font-mono); padding-top: 4px; border-top: 1px solid var(--wk-border); }
/* Frame player stage + controls */
.wk-mod-player-stage {
flex: 1; min-height: 0;
background: var(--wk-bg-3);
border-radius: var(--wk-r-md);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.wk-mod-player-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.wk-mod-player-controls {
flex-shrink: 0;
display: flex; align-items: center; gap: 8px;
padding: 2px;
}
.wk-mod-player-btn {
width: 28px; height: 28px; flex-shrink: 0;
background: var(--wk-bg-3); border: 1px solid var(--wk-border);
color: var(--wk-text); font-size: 16px; line-height: 1;
border-radius: var(--wk-r-sm); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.wk-mod-player-btn:hover { background: var(--wk-bg-2); border-color: var(--wk-border-hover); }
.wk-mod-player-scrub { flex: 1; accent-color: var(--wk-accent); cursor: pointer; }
.wk-mod-player-frame-num { font-size: 11px; color: var(--wk-text-3); font-family: var(--wk-font-mono); flex-shrink: 0; min-width: 56px; text-align: right; }
/* Scene config grid */
.wk-mod-config-grid { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.wk-mod-config-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 9px;
background: var(--wk-bg-3); border-radius: var(--wk-r-sm);
font-size: 11.5px;
}
.wk-mod-config-k { color: var(--wk-text-3); }
.wk-mod-config-v { color: var(--wk-text); font-family: var(--wk-font-mono); }
/* ── HOME EXTRAS ───────────────────────────────────────────────────────── */
.wk-mod-greeting { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4px 2px; }
.wk-mod-greeting-hi { font-family: var(--wk-font-display); font-size: 20px; font-weight: 500; color: var(--wk-text); }
.wk-mod-greeting-sub { font-size: 12px; color: var(--wk-text-3); margin-top: 4px; }
/* ── DYNAMIC QUICK-LINK CARDS ──────────────────────────────────────────── */
/* (ql layout moved to dedicated block above) */
/* ── ANON AVATAR + PROFILE EXTRAS ──────────────────────────────────────── */
.wk-mod-profile-avatar-anon {
display: inline-flex; align-items: center; justify-content: center;
background: var(--wk-bg-3);
color: var(--wk-text-3);
border: 1px dashed var(--wk-border-hover);
}
.wk-mod-profile-avatar-anon svg { width: 22px; height: 22px; }
.wk-mod-anon-tag {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
background: var(--wk-bg-3); color: var(--wk-text-3);
padding: 1px 5px; border-radius: var(--wk-r-sm);
vertical-align: middle; margin-left: 4px;
font-family: var(--wk-font-mono);
}
/* Profile extras: hidden by default, revealed when spacious */
.wk-mod-profile-extra { display: none; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--wk-border); }
.wk-dash-mod.is-spacious .wk-mod-profile-extra { display: flex; }
.wk-mod-profile-extra-row { display: flex; justify-content: space-between; font-size: 11px; }
.wk-mod-profile-extra-row > span:first-child { color: var(--wk-text-3); }
.wk-mod-profile-extra-row > span:last-child { color: var(--wk-text); font-family: var(--wk-font-mono); }
/* ── RESPONSIVE DENSITY (generic) ──────────────────────────────────────── */
/* Compact modules tighten paddings + shrink headers */
.wk-dash-mod.is-compact .wk-mod-head { margin-bottom: 4px; }
.wk-dash-mod.is-compact .wk-mod-title { font-size: 11px; }
.wk-dash-mod.is-compact .wk-mod-sub { display: none; }
.wk-dash-mod.is-compact .wk-mod-kpi-value { font-size: 22px; }
/* Spacious KPIs go big */
.wk-dash-mod.is-spacious .wk-mod-kpi-value { font-size: 40px; }
.wk-dash-mod.is-tall .wk-mod-recent-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* ── CONFIGURABLE CHART SETTINGS UI ────────────────────────────────────── */
.wk-cfg-section-label {
font-size: 10px; color: var(--wk-text-3);
text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
margin: 16px 0 8px;
}
.wk-cfg-viz-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
margin-bottom: 4px;
}
.wk-cfg-viz-card {
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 10px 4px;
background: var(--wk-bg-2); border: 1px solid var(--wk-border);
border-radius: var(--wk-r-md);
cursor: pointer; font-family: inherit;
transition: all 120ms ease;
}
.wk-cfg-viz-card:hover { border-color: var(--wk-border-hover); background: var(--wk-bg-3); }
.wk-cfg-viz-card.is-active {
border-color: var(--wk-accent);
background: color-mix(in srgb, var(--wk-accent) 10%, var(--wk-bg-2));
}
.wk-cfg-viz-icon { color: var(--wk-text-2); }
.wk-cfg-viz-card.is-active .wk-cfg-viz-icon { color: var(--wk-accent); }
.wk-cfg-viz-icon svg { width: 24px; height: 24px; }
.wk-cfg-viz-label { font-size: 10px; color: var(--wk-text-2); text-align: center; }
.wk-cfg-viz-card.is-active .wk-cfg-viz-label { color: var(--wk-text); }
/* ── CUSTOM CHART BAR LIST ─────────────────────────────────────────────── */
.wk-mod-bar-list { display: flex; flex-direction: column; gap: 5px; padding: 2px; }
.wk-mod-bar-row { display: grid; grid-template-columns: 90px 1fr 56px 32px; gap: 8px; align-items: center; }
.wk-mod-bar-key { font-size: 11px; color: var(--wk-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-mod-bar-track { height: 14px; background: var(--wk-bg-3); border-radius: var(--wk-r-pill); overflow: hidden; }
.wk-mod-bar-fill { height: 100%; background: var(--wk-accent); border-radius: var(--wk-r-pill); }
.wk-mod-bar-val { font-size: 11px; color: var(--wk-text); font-family: var(--wk-font-mono); text-align: right; }
.wk-mod-bar-count { font-size: 10px; color: var(--wk-text-3); font-family: var(--wk-font-mono); text-align: right; }
/* ── GAUGE PRIMITIVE ───────────────────────────────────────────────────── */
.wk-mod-gauge-wrap {
flex: 1; min-height: 0;
display: flex; align-items: center; justify-content: center;
padding: 4px;
}
.wk-mod-gauge-svg { width: 100%; max-width: 280px; height: 100%; max-height: 100%; display: block; }
/* ── SPARKLINE KPI ─────────────────────────────────────────────────────── */
.wk-mod-spark-kpi { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 2px; }
.wk-mod-spark-top { display: flex; flex-direction: column; gap: 2px; }
.wk-mod-spark-chart { width: 100%; }
.wk-mod-spark-svg { width: 100%; height: 36px; display: block; }
.wk-dash-mod.is-spacious .wk-mod-spark-svg { height: 56px; }
/* ── CONFIGURABLE: reset button ────────────────────────────────────────── */
.wk-cfg-reset {
width: 100%; margin-top: 14px;
padding: 7px 10px;
background: transparent; border: 1px solid var(--wk-border);
color: var(--wk-text-3); font-size: 11.5px;
border-radius: var(--wk-r-sm); cursor: pointer; font-family: inherit;
}
.wk-cfg-reset:hover { border-color: var(--wk-border-hover); color: var(--wk-text-2); }
/* ── SUMMARY GREETING ──────────────────────────────────────────────────── */
.wk-mod-summary { flex: 1; display: flex; flex-direction: column; gap: 12px; justify-content: center; padding: 2px; }
.wk-mod-summary-head { display: flex; flex-direction: column; gap: 2px; }
.wk-mod-summary-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-mod-summary-stat {
flex: 1; min-width: 64px;
background: var(--wk-bg-3); border-radius: var(--wk-r-md);
padding: 8px 10px; text-align: center;
}
.wk-mod-summary-num { font-family: var(--wk-font-mono); font-size: 22px; font-weight: 600; line-height: 1; }
.wk-mod-summary-lbl { font-size: 9.5px; color: var(--wk-text-3); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.wk-dash-mod.is-compact .wk-mod-summary-num { font-size: 18px; }
/* ── RICH PROFILE CARD ─────────────────────────────────────────────────── */
.wk-mod-pcard { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.wk-mod-pcard-top { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.wk-mod-pcard-avatar {
width: 64px; height: 64px; border-radius: 50%;
object-fit: cover; background: var(--wk-bg-3);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--wk-font-mono); font-weight: 600; font-size: 20px; color: var(--wk-text);
}
.wk-mod-pcard-avatar.wk-mod-profile-avatar-init { background: linear-gradient(135deg, var(--wk-accent), var(--wk-purple)); }
.wk-mod-pcard-avatar svg { width: 30px; height: 30px; }
.wk-mod-pcard-id { text-align: center; }
.wk-mod-pcard-name { font-size: 15px; font-weight: 500; color: var(--wk-text); }
.wk-mod-pcard-rank { font-size: 12px; color: var(--wk-text-3); margin-top: 2px; }
.wk-mod-pcard-bar { height: 6px; background: var(--wk-bg-3); border-radius: var(--wk-r-pill); overflow: hidden; }
.wk-mod-pcard-bar-fill { height: 100%; background: linear-gradient(to right, var(--wk-accent), var(--wk-purple)); border-radius: var(--wk-r-pill); }
.wk-mod-pcard-bar-meta { display: flex; justify-content: space-between; font-family: var(--wk-font-mono); font-size: 10px; color: var(--wk-text-3); }
.wk-mod-pcard-stats { display: flex; gap: 8px; }
.wk-mod-pcard-stat { flex: 1; background: var(--wk-bg-3); border-radius: var(--wk-r-md); padding: 8px 6px; text-align: center; }
.wk-mod-pcard-stat-num { font-family: var(--wk-font-mono); font-size: 17px; font-weight: 600; color: var(--wk-text); line-height: 1; }
.wk-mod-pcard-stat-lbl { font-size: 9px; color: var(--wk-text-3); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.wk-mod-pcard-since { font-size: 10.5px; color: var(--wk-text-3); text-align: center; font-family: var(--wk-font-mono); }
/* ── ACTIVITY CALENDAR ─────────────────────────────────────────────────── */
/* Day-of-week header — fixed-height row above the flexing day grid. */
/* Calendar header with month nav */
.wk-mod-cal-head {
display: flex; align-items: center; gap: 12px;
padding: 0 2px 8px;
flex-shrink: 0;
}
.wk-mod-cal-head-l { flex: 1; min-width: 0; }
.wk-mod-cal-nav { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.wk-mod-cal-nav-btn,
.wk-mod-cal-nav-today {
background: transparent; border: 1px solid var(--wk-border);
color: var(--wk-text-2); cursor: pointer;
border-radius: var(--wk-r-sm);
padding: 0; margin: 0;
font-family: var(--wk-font-body);
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.wk-mod-cal-nav-btn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.wk-mod-cal-nav-btn svg { width: 14px; height: 14px; }
.wk-mod-cal-nav-today { padding: 0 10px; height: 26px; font-size: 10.5px; }
.wk-mod-cal-nav-btn:hover,
.wk-mod-cal-nav-today:hover {
background: var(--wk-bg-3); color: var(--wk-text); border-color: var(--wk-border-hover);
}
.wk-mod-cal-dows {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: 4px; padding: 2px 2px 0;
flex-shrink: 0;
}
.wk-mod-cal-grid {
flex: 1 1 auto; min-height: 0;
display: grid; grid-template-columns: repeat(7, 1fr);
/* Week rows share the available height equally so the calendar grows and
shrinks with the module instead of cropping. */
grid-auto-rows: minmax(0, 1fr);
gap: 4px;
padding: 2px;
overflow: hidden;
}
.wk-mod-cal-dow {
font-size: 9px; color: var(--wk-text-3); text-align: center;
font-family: var(--wk-font-mono); padding-bottom: 2px;
text-transform: uppercase;
}
.wk-mod-cal-cell {
position: relative;
/* No hard aspect-ratio: cells fill their grid track so the calendar
scales with the module height/width without clipping. A small
min-height keeps them legible when the module is short. */
min-height: 14px;
border-radius: var(--wk-r-sm);
background: var(--wk-bg-3);
display: flex; align-items: flex-start; justify-content: flex-end;
padding: 4px 5px;
}
.wk-mod-cal-cell.is-empty { background: transparent; }
.wk-mod-cal-cell.is-today { outline: 1.5px solid var(--wk-accent); outline-offset: -1.5px; }
.wk-mod-cal-num { font-size: 10.5px; color: var(--wk-text-2); font-family: var(--wk-font-mono); }
/* Legacy dot — kept for any callers still using the class. Visual upgrade
below: use .wk-mod-cal-disp for the proper icon+count badge. */
.wk-mod-cal-dot {
position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%;
background: var(--wk-amber);
}
/* Dispatch badge — bolt icon + count in the bottom-left of the day cell.
Indicates at a glance how many dispatches are scheduled for that day. */
.wk-mod-cal-disp {
position: absolute; bottom: 3px; left: 4px;
display: inline-flex; align-items: center; gap: 2px;
color: var(--wk-amber);
line-height: 1;
}
.wk-mod-cal-disp svg { width: 11px; height: 11px; display: block; }
.wk-mod-cal-disp-cnt {
font-family: var(--wk-font-mono);
font-size: 9.5px; font-weight: 600;
color: var(--wk-amber);
}
/* Failure marker — small red dot in the bottom-right, complements the
dispatch badge so both can coexist without overlapping. */
.wk-mod-cal-fail {
position: absolute; bottom: 4px; right: 4px;
width: 5px; height: 5px; border-radius: 50%;
background: var(--wk-red);
}
.wk-mod-cal-upcoming { flex-shrink: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--wk-border); }
.wk-mod-cal-up-label { font-size: 9.5px; color: var(--wk-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
.wk-mod-cal-up-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 6px; border-radius: var(--wk-r-sm);
text-decoration: none; color: inherit;
}
.wk-mod-cal-up-row:hover { background: var(--wk-bg-3); }
.wk-mod-cal-up-when { font-size: 10.5px; color: var(--wk-accent); font-family: var(--wk-font-mono); white-space: nowrap; }
.wk-mod-cal-up-proj { font-size: 11px; color: var(--wk-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hide upcoming list when very short */
.wk-dash-mod.is-short .wk-mod-cal-upcoming { display: none; }
/* ── MACHINE ROSTER ────────────────────────────────────────────────────── */
.wk-mod-mach-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.wk-mod-mach-row {
display:flex; align-items:center; gap:11px;
padding:9px 10px; border-radius:var(--wk-r-sm);
}
.wk-mod-mach-row:hover { background:var(--wk-bg-3); }
.wk-mod-mach-dot {
width:8px; height:8px; border-radius:50%; flex-shrink:0;
background:var(--wk-text-3);
}
.wk-mod-mach-dot.is-online { background:var(--wk-green); box-shadow:0 0 0 3px var(--wk-green-dim); }
.wk-mod-mach-body { flex:1; min-width:0; }
.wk-mod-mach-name { font-size:12.5px; color:var(--wk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-mach-sub { font-family:var(--wk-font-mono); font-size:10px; color:var(--wk-text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-mach-tier {
font-family:var(--wk-font-mono); font-size:10px; font-weight:600;
padding:2px 7px; border-radius:var(--wk-r-pill);
border:1px solid; flex-shrink:0;
}
.wk-mod-mach-stat { text-align:right; flex-shrink:0; min-width:30px; }
.wk-mod-mach-stat-n { font-family:var(--wk-font-mono); font-size:14px; font-weight:600; color:var(--wk-text); line-height:1; }
.wk-mod-mach-stat-l { font-size:8.5px; color:var(--wk-text-3); text-transform:uppercase; letter-spacing:0.4px; margin-top:2px; }
/* ── MACHINE SPECS ─────────────────────────────────────────────────────── */
.wk-mod-spec-list { flex:1; display:flex; flex-direction:column; gap:2px; justify-content:center; min-height:0; }
.wk-mod-spec-row {
display:flex; align-items:baseline; gap:12px;
padding:8px 10px; border-radius:var(--wk-r-sm);
}
.wk-mod-spec-row:nth-child(odd) { background:var(--wk-bg-3); }
.wk-mod-spec-k {
font-family:var(--wk-font-mono); font-size:9.5px; color:var(--wk-text-3);
text-transform:uppercase; letter-spacing:0.5px; width:50px; flex-shrink:0;
}
.wk-mod-spec-v { font-size:12px; color:var(--wk-text); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-spec-tier { font-family:var(--wk-font-mono); font-size:10px; font-weight:600; }
/* ── FLEET CAPABILITY ──────────────────────────────────────────────────── */
.wk-mod-cap { flex:1; display:flex; flex-direction:column; gap:12px; justify-content:center; min-height:0; }
.wk-mod-cap-stats { display:flex; gap:8px; }
.wk-mod-cap-stat { flex:1; background:var(--wk-bg-3); border-radius:var(--wk-r-md); padding:10px 6px; text-align:center; }
.wk-mod-cap-num { font-family:var(--wk-font-mono); font-size:20px; font-weight:600; color:var(--wk-text); line-height:1; }
.wk-mod-cap-lbl { font-size:8.5px; color:var(--wk-text-3); text-transform:uppercase; letter-spacing:0.4px; margin-top:4px; }
.wk-mod-cap-mix { display:flex; gap:2px; height:10px; border-radius:var(--wk-r-pill); overflow:hidden; }
.wk-mod-cap-seg { height:100%; }
.wk-mod-cap-legend { display:flex; flex-wrap:wrap; gap:10px; }
.wk-mod-cap-leg { display:flex; align-items:center; gap:5px; font-family:var(--wk-font-mono); font-size:10px; color:var(--wk-text-2); }
.wk-mod-cap-leg-sw { width:8px; height:8px; border-radius:2px; }
/* ── RENDERS LIST (renders-page style) ─────────────────────────────────── */
.wk-mod-rl { flex:1; min-height:0; display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.wk-mod-rl-row {
display:flex; align-items:center; gap:11px;
padding:6px; border-radius:var(--wk-r-sm);
}
.wk-mod-rl-row:hover { background:var(--wk-bg-3); }
.wk-mod-rl-thumb {
width:52px; height:30px; border-radius:var(--wk-r-sm); flex-shrink:0;
background:linear-gradient(135deg,#1f2238,#15172a);
overflow:hidden; position:relative;
}
.wk-mod-rl-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.wk-mod-rl-thumb.is-noimg::after {
content:''; position:absolute; inset:0;
background:linear-gradient(135deg,#1f2238,#15172a);
}
.wk-mod-rl-body { flex:1; min-width:0; }
.wk-mod-rl-title { font-size:12px; color:var(--wk-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-rl-anim {
font-family:var(--wk-font-mono); font-size:8px; padding:1px 5px;
border-radius:var(--wk-r-sm); background:var(--wk-purple-dim); color:var(--wk-purple);
text-transform:uppercase; letter-spacing:0.3px; vertical-align:1px;
}
.wk-mod-rl-meta { font-family:var(--wk-font-mono); font-size:9.5px; color:var(--wk-text-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wk-mod-rl-status {
font-family:var(--wk-font-mono); font-size:8.5px; padding:3px 8px;
border-radius:var(--wk-r-pill); text-transform:uppercase; letter-spacing:0.3px;
flex-shrink:0;
}
.wk-mod-rl-status.is-good { background:var(--wk-green-dim); color:var(--wk-green); }
.wk-mod-rl-status.is-bad { background:var(--wk-red-dim); color:var(--wk-red); }
.wk-mod-rl-status.is-warn { background:var(--wk-amber-dim); color:var(--wk-amber); }
/* ════════════════════════════════════════════════════════════════════════
STRUCTURE / LAYOUT ELEMENTS (chromeless modules)
════════════════════════════════════════════════════════════════════════ */
/* Chromeless: strip the card shell so structure elements read as page
narration rather than boxes. Edit-mode chrome still appears on hover. */
.wk-dash-mod.is-chromeless {
background: transparent;
border: none;
padding: 0;
overflow: visible;
}
.wk-dash-mod.is-chromeless .wk-dash-mod-body { justify-content: center; }
/* Keep a faint hit-area outline only while editing so they're grabbable */
.wk-dash-host.is-edit-mode .wk-dash-mod.is-chromeless {
outline: 1px dashed var(--wk-border);
outline-offset: 2px;
border-radius: var(--wk-r-md);
}
/* Section header */
.wk-el-section { display: flex; align-items: center; gap: 12px; width: 100%; }
.wk-el-sec-ic { width: 20px; height: 20px; color: var(--wk-accent); flex-shrink: 0; }
.wk-el-sec-ic svg { width: 20px; height: 20px; display: block; }
.wk-el-sec-title { font-family: var(--wk-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.2px; margin: 0; color: var(--wk-text); white-space: nowrap; }
.wk-el-sec-desc { font-size: 12px; color: var(--wk-text-3); white-space: nowrap; }
.wk-el-sec-rule { flex: 1; height: 1px; background: linear-gradient(to right, var(--wk-border), transparent); margin-left: 4px; }
/* Divider */
.wk-el-divider { width: 100%; height: 1px; background: var(--wk-border); }
.wk-el-divider-l { display: flex; align-items: center; gap: 14px; width: 100%; color: var(--wk-text-3); font-family: var(--wk-font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.wk-el-divider-l::before, .wk-el-divider-l::after { content: ''; flex: 1; height: 1px; background: var(--wk-border); }
/* Note / callout */
.wk-el-note { font-size: 13px; color: var(--wk-text-2); line-height: 1.6; width: 100%; }
.wk-el-callout { display: flex; gap: 12px; padding: 13px 15px; border-radius: var(--wk-r-lg); background: var(--wk-bg-2); border: 1px solid var(--wk-border); border-left: 3px solid var(--wk-accent); width: 100%; }
.wk-el-callout.is-warn { border-left-color: var(--wk-amber); } .wk-el-callout.is-warn .wk-el-callout-ic { color: var(--wk-amber); }
.wk-el-callout.is-tip { border-left-color: var(--wk-green); } .wk-el-callout.is-tip .wk-el-callout-ic { color: var(--wk-green); }
.wk-el-callout-ic { color: var(--wk-accent); flex-shrink: 0; } .wk-el-callout-ic svg { width: 17px; height: 17px; }
.wk-el-callout-b { font-size: 12.5px; color: var(--wk-text-2); line-height: 1.5; }
/* Action banner */
.wk-el-banner { display: flex; align-items: center; gap: 14px; width: 100%; border-radius: var(--wk-r-lg); padding: 14px 18px; }
.wk-el-banner.is-info { background: linear-gradient(100deg, var(--wk-accent-dim), transparent 70%); border: 1px solid var(--wk-accent-dim); }
.wk-el-banner.is-warn { background: linear-gradient(100deg, var(--wk-amber-dim), transparent 70%); border: 1px solid var(--wk-amber-dim); }
.wk-el-banner.is-good { background: linear-gradient(100deg, var(--wk-green-dim), transparent 70%); border: 1px solid var(--wk-green-dim); }
.wk-el-banner-ic { width: 34px; height: 34px; border-radius: var(--wk-r-md); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wk-el-banner.is-info .wk-el-banner-ic { background: var(--wk-accent); }
.wk-el-banner.is-warn .wk-el-banner-ic { background: var(--wk-amber); }
.wk-el-banner.is-good .wk-el-banner-ic { background: var(--wk-green); }
.wk-el-banner-ic svg { width: 18px; height: 18px; }
.wk-el-banner-txt { min-width: 0; flex: 1; }
.wk-el-banner-greet {
font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--wk-text-3); margin-bottom: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-el-banner-t { font-weight: 600; color: var(--wk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-el-banner-s { font-size: 12px; color: var(--wk-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-el-banner-btn { margin-left: auto; font-size: 11.5px; border-radius: var(--wk-r-md); padding: 6px 13px; border: 1px solid var(--wk-border-hover); background: transparent; color: var(--wk-text); cursor: pointer; white-space: nowrap; text-decoration: none; flex-shrink: 0; }
.wk-el-banner-btn:hover { background: var(--wk-bg-3); }
/* Stat strip */
.wk-el-strip { display: flex; align-items: stretch; width: 100%; height: 100%; background: var(--wk-bg-2); border: 1px solid var(--wk-border); border-radius: var(--wk-r-lg); overflow: hidden; }
.wk-el-strip-s { flex: 1; padding: 14px 18px; border-right: 1px solid var(--wk-border); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.wk-el-strip-s:last-child { border-right: none; }
.wk-el-strip-n { font-family: var(--wk-font-mono); font-size: 24px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: var(--wk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-el-strip-l { font-size: 10px; color: var(--wk-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 7px; }
/* Hero welcome */
.wk-el-hero { display: flex; align-items: center; gap: 20px; width: 100%; height: 100%; background: linear-gradient(110deg, var(--wk-bg-2), var(--wk-bg-2) 55%, rgba(91,138,245,0.06)); border: 1px solid var(--wk-border); border-radius: var(--wk-r-lg); padding: 20px 24px; }
.wk-el-hero-av { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg, var(--wk-accent), var(--wk-purple)); display: flex; align-items: center; justify-content: center; font-family: var(--wk-font-mono); font-size: 19px; font-weight: 600; color: #fff; }
.wk-el-hero-av-anon { background: var(--wk-bg-3); color: var(--wk-text-3); } .wk-el-hero-av-anon svg { width: 28px; height: 28px; }
.wk-el-hero-id { min-width: 0; }
.wk-el-hero-greet { font-family: var(--wk-font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.4px; color: var(--wk-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-el-hero-sub { font-size: 12.5px; color: var(--wk-text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-el-hero-spacer { flex: 1; }
.wk-el-hero-kpi { text-align: right; padding-left: 22px; flex-shrink: 0; }
.wk-el-hero-kpi-n { font-family: var(--wk-font-mono); font-size: 24px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.wk-el-hero-kpi-l { font-size: 10px; color: var(--wk-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.wk-dash-mod.is-narrow .wk-el-hero-kpi { display: none; }
/* ── HEADER ACTION LINK ────────────────────────────────────────────────── */
.wk-mod-head-link {
margin-left: auto; font-size: 11px; color: var(--wk-accent);
text-decoration: none; white-space: nowrap; font-family: var(--wk-font-body);
flex-shrink: 0; transition: color .15s;
}
.wk-mod-head-link:hover { color: var(--wk-accent-hover); }
/* When a header has both a sub and a link, push the link fully right */
.wk-mod-head .wk-mod-sub + .wk-mod-head-link { margin-left: 10px; }
/* ── NOTIFICATION UNREAD DOT + ROW INTERACTION ─────────────────────────── */
.wk-mod-notif-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--wk-accent);
flex-shrink: 0; align-self: center; box-shadow: 0 0 0 3px var(--wk-accent-dim);
}
.wk-mod-list-row { cursor: pointer; }
.wk-mod-list-row.is-unread .wk-mod-list-title { color: var(--wk-text); font-weight: 500; }
.wk-mod-list-row:not(.is-unread) .wk-mod-list-title { color: var(--wk-text-2); }
.wk-mod-list-row[role="button"]:hover { background: var(--wk-bg-3); }
/* Clickable render + machine rows */
.wk-mod-rl-row[role="button"], .wk-mod-mach-row[role="button"] { cursor: pointer; }
/* ── MACHINE-SPECS LIVE METRIC BARS ────────────────────────────────────── */
.wk-mod-live-block { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wk-border); }
.wk-mod-live-block.is-offline { opacity: 0.75; }
.wk-mod-live-title {
font-family: var(--wk-font-mono); font-size: 9.5px; color: var(--wk-text-3);
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
display: flex; align-items: center; gap: 4px; min-width: 0;
}
.wk-mod-live-state {
font-weight: 600; color: var(--wk-text-2);
}
.wk-mod-live-block.is-rendering .wk-mod-live-state { color: var(--wk-green); }
.wk-mod-live-block.is-blender .wk-mod-live-state { color: var(--wk-accent); }
.wk-mod-live-proj {
color: var(--wk-text-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.wk-mod-live-row { display: grid; grid-template-columns: 38px 1fr 38px; gap: 9px; align-items: center; margin-bottom: 6px; }
.wk-mod-live-row:last-child { margin-bottom: 0; }
.wk-mod-live-k { font-family: var(--wk-font-mono); font-size: 10px; color: var(--wk-text-3); }
.wk-mod-live-track { height: 7px; background: var(--wk-bg-3); border-radius: var(--wk-r-pill); overflow: hidden; }
.wk-mod-live-track i { display: block; height: 100%; border-radius: var(--wk-r-pill); transition: width .4s var(--wk-ease, ease); }
.wk-mod-live-track.is-loading { position: relative; }
.wk-mod-live-track.is-loading::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, var(--wk-border-hover), transparent);
animation: wk-live-shimmer 1.2s infinite;
}
@keyframes wk-live-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.wk-mod-live-v { font-family: var(--wk-font-mono); font-size: 10.5px; color: var(--wk-text-2); text-align: right; }
/* State pulsing dot — matches live.html's .dot-live / .dot-idle exactly so
the dashboard's machine cards visually agree with the kanban. */
.wk-mod-state-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.wk-mod-state-dot.is-rendering { background: var(--wk-green); animation: wk-state-pulse-green 1.8s ease-in-out infinite; }
.wk-mod-state-dot.is-blender { background: var(--wk-accent); animation: wk-state-pulse-blue 2.4s ease-in-out infinite; }
.wk-mod-state-dot.is-offline { background: var(--wk-text-3); opacity: 0.6; }
@keyframes wk-state-pulse-green { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.5); } }
@keyframes wk-state-pulse-blue { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(1.5); } }
/* ── AVATAR FAILED-LOAD FALLBACK ───────────────────────────────────────── */
/* When an avatar ![]()
fails to load (CORS, 404, offline), its onerror swaps
it for a div with the same avatar class + this one, showing a neutral
silhouette so we never display a broken-image icon. */
.is-avatar-failed {
display: flex !important;
align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--wk-accent), var(--wk-purple));
color: #fff;
}