/* =========================================================
My Geni Product OS — Component styles v3
Palette consumed from tokens.css (Core 2.0 verbatim).
Structural discipline: WorkForge (spacing, hierarchy, responsive).
========================================================= */
/* Import tokens (Core 2.0 palette source of truth) */
@import "tokens.css";
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body-2);
line-height: 1.5;
letter-spacing: -0.015em;
color: var(--text-primary);
background: var(--bg-app);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "cv11", "ss01", "ss03";
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
/* Selection */
::selection { background: rgba(42, 133, 255, 0.20); color: var(--text-primary); }
/* Typography helpers */
.t-overline { font-size: var(--fs-overline); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.t-caption { font-size: var(--fs-caption); letter-spacing: -0.02em; line-height: 1.6; }
.t-body-2 { font-size: var(--fs-body-2); letter-spacing: -0.025em; }
.t-body-1 { font-size: var(--fs-body-1); letter-spacing: -0.015em; }
.t-sub-2 { font-size: var(--fs-sub-2); font-weight: 700; letter-spacing: -0.015em; }
.t-sub-1 { font-size: var(--fs-sub-1); font-weight: 600; letter-spacing: -0.015em; }
.t-h6 { font-size: var(--fs-h6); font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.t-h5 { font-size: var(--fs-h5); font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.t-h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: 0.003em; line-height: 1.2; }
.t-mut { color: var(--text-secondary); }
.t-ter { color: var(--text-tertiary); }
.mono { font-family: var(--font-mono); font-feature-settings: normal; }
.tabular { font-variant-numeric: tabular-nums; }
/* Shell layout */
.shell {
display: grid;
grid-template-columns: var(--nav-w) 1fr;
min-height: 100vh;
min-width: 1440px;
background: var(--bg-app);
}
/* =========================================================
SIDEBAR
Lives on --bg-app (Core 2.0's shade-09).
Active nav = embossed "pop": gradient shell + inset white plug.
========================================================= */
.side {
position: sticky;
top: 0;
height: 100vh;
padding: 18px 14px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Workspace / product switcher */
.side-ws {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px 12px;
border-radius: var(--r-xl);
cursor: pointer;
transition: background 200ms ease;
position: relative;
margin-bottom: 4px;
}
.side-ws:hover { background: var(--bg-depth); }
.side-ws .brand-mark {
width: 40px; height: 40px;
border-radius: 14px;
background:
radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.22), transparent 70%),
linear-gradient(160deg, #2A2A2A 0%, #101010 100%);
display: grid; place-items: center;
color: white;
flex: none;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -6px 12px rgba(0,0,0,0.35),
0 4px 10px rgba(16,16,16,0.25);
position: relative;
}
.side-ws .brand-mark::after {
content: "";
position: absolute;
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
bottom: 6px; right: 6px;
box-shadow: 0 0 8px rgba(245,36,149,0.7);
}
.side-ws .ws-meta { flex: 1; min-width: 0; }
.side-ws .ws-1 {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.side-ws .ws-2 {
font-size: var(--fs-sub-1);
color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.015em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.25;
margin-top: 2px;
}
.side-ws .ws-caret {
color: var(--text-tertiary);
flex: none;
padding: 4px;
border-radius: 8px;
transition: background 150ms;
}
.side-ws:hover .ws-caret { background: rgba(16,16,16,0.04); }
/* Quick jump pill */
.side-search {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--r-lg);
background: var(--bg-surface);
color: var(--text-tertiary);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
margin: 4px 2px 14px;
cursor: pointer;
transition: box-shadow 150ms;
box-shadow: var(--shadow-widget);
}
.side-search:hover { box-shadow: var(--shadow-depth); }
.side-search .kbd {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
background: var(--bg-inset);
border-radius: 5px;
padding: 2px 6px;
letter-spacing: 0;
}
/* Section label */
.side-section-label {
padding: 14px 12px 6px;
font-size: var(--fs-overline);
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.side nav { display: flex; flex-direction: column; gap: 2px; }
/* Nav item */
.side-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 0 12px;
color: var(--text-secondary);
font-size: var(--fs-button);
font-weight: 500;
letter-spacing: -0.015em;
border-radius: var(--r-md);
transition: color 150ms;
cursor: pointer;
}
.side-item:hover { color: var(--text-primary); }
.side-item:hover .side-icon { color: var(--text-primary); }
.side-item.active { color: var(--text-primary); font-weight: 600; }
.side-item.active .side-icon { color: var(--text-primary); }
/* Active plug — Core 2.0 signature */
.side-item.active::before,
.side-item.active::after {
content: "";
position: absolute; inset: 0;
border-radius: var(--r-md);
pointer-events: none;
}
.side-item.active::before {
background: var(--gradient-menu);
box-shadow: var(--shadow-menu);
}
.side-item.active::after {
inset: 1.5px;
background: var(--bg-pop);
border-radius: calc(var(--r-md) - 1.5px);
}
.side-item > * { position: relative; z-index: 1; }
.side-icon { width: 20px; height: 20px; color: var(--text-tertiary); flex: none; }
/* Sidebar counter badges — Core 2.0 secondary palette */
.side-badge {
position: relative;
z-index: 1;
margin-left: auto;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 8px;
background: var(--secondary-01); /* peach default */
color: var(--shade-02);
font-size: var(--fs-button);
font-weight: 600;
display: grid; place-items: center;
letter-spacing: -0.015em;
}
.side-badge.mint { background: var(--secondary-04); }
.side-badge.sky { background: var(--secondary-03); }
.side-badge.cream { background: var(--secondary-05); }
.side-badge.lav { background: var(--secondary-02); }
/* Attention badges — for actionable, not decorative, counts */
.side-badge.orange { background: var(--warning-solid); color: white; }
.side-badge.red {
background: var(--danger-solid);
color: white;
box-shadow: 0 0 0 3px rgba(255,56,28,0.10);
}
.side-spacer { flex: 1; }
.side-divider {
height: 1px;
background: var(--stroke-subtle);
margin: 10px 6px;
}
/* User tile — floats as widget */
.side-user {
display: flex; align-items: center; gap: 12px;
padding: 10px 10px;
border-radius: var(--r-xl);
background: var(--bg-surface);
cursor: pointer;
box-shadow: var(--shadow-widget);
transition: box-shadow 150ms;
}
.side-user:hover { box-shadow: var(--shadow-depth); }
.side-user .u-meta { flex: 1; min-width: 0; }
.side-user .u-name {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-user .u-role {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
line-height: 1.2;
margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* =========================================================
HEADER
========================================================= */
.header {
position: sticky;
top: 0;
z-index: 10;
height: var(--header-h);
background: color-mix(in oklab, var(--bg-app) 88%, transparent);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
display: flex; align-items: center; gap: 12px;
padding: 0 24px;
}
.crumb {
display: flex; align-items: center; gap: 10px;
color: var(--text-secondary);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
}
.crumb .now { color: var(--text-primary); font-weight: 600; }
.crumb .sep { color: var(--text-tertiary); }
.header-spacer { flex: 1; }
/* Search bar */
.header-search {
display: flex; align-items: center; gap: 10px;
height: 44px;
padding: 0 16px;
border-radius: var(--r-xl);
background: var(--bg-surface);
color: var(--text-tertiary);
min-width: 340px;
cursor: pointer;
box-shadow: var(--shadow-widget);
transition: box-shadow 150ms;
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
}
.header-search:hover { box-shadow: var(--shadow-depth); }
.header-search .kbd {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
background: var(--bg-inset);
border-radius: 5px;
padding: 2px 6px;
letter-spacing: 0;
}
/* Icon buttons */
.icon-btn {
width: 44px; height: 44px;
border-radius: var(--r-full);
background: var(--bg-surface);
display: grid; place-items: center;
color: var(--text-secondary);
transition: color 150ms, box-shadow 150ms;
position: relative;
box-shadow: var(--shadow-widget);
}
.icon-btn:hover { color: var(--text-primary); box-shadow: var(--shadow-depth); }
.icon-btn .dot {
position: absolute; top: 10px; right: 12px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 2px var(--bg-surface), 0 0 8px rgba(245,36,149,0.6);
}
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px;
padding: 0 22px;
border-radius: var(--r-2xl);
font-size: var(--fs-button);
font-weight: 600;
letter-spacing: -0.015em;
transition: transform 150ms, box-shadow 150ms, background 150ms, color 150ms;
white-space: nowrap;
}
.btn:active { transform: translateY(0.5px); }
/* Primary — Core 2.0 signature dark gradient */
.btn-primary {
position: relative;
color: var(--text-light);
background: var(--gradient-black);
box-shadow:
inset 2px 0 8px 2px rgba(248,248,248,0.20),
var(--shadow-widget);
}
.btn-primary::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
border: 1.5px solid rgba(255,255,255,0.22);
-webkit-mask-image: linear-gradient(to top, transparent 0, black 100%);
mask-image: linear-gradient(to top, transparent 0, black 100%);
pointer-events: none;
}
.btn-primary:hover { box-shadow: var(--shadow-widget); }
/* Brand blue button (Core 2.0 primary-01 accent) — for informational/action CTAs */
.btn-brand {
color: var(--text-light);
background: var(--primary-01);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 4px 10px rgba(42,133,255,0.30);
}
.btn-brand:hover { background: #1F72E6; }
/* White (isWhite) */
.btn-white {
background: var(--bg-surface);
color: var(--text-secondary);
box-shadow: var(--shadow-widget);
}
.btn-white:hover { color: var(--text-primary); box-shadow: var(--shadow-depth); }
/* Stroke */
.btn-stroke {
border: 1.5px solid var(--stroke-stroke2);
color: var(--text-secondary);
background: transparent;
}
.btn-stroke:hover { color: var(--text-primary); border-color: var(--stroke-highlight); }
.btn-sm { height: 36px; padding: 0 16px; border-radius: 18px; }
.btn-circle { width: 44px; padding: 0; border-radius: 50%; }
/* =========================================================
MAIN CONTENT
========================================================= */
.main {
padding: 12px 20px 32px;
}
.page-header-row {
display: flex; align-items: flex-end; justify-content: space-between;
padding: 8px 4px 20px;
gap: 16px;
}
.greeting {
font-size: var(--fs-h4);
font-weight: 600;
letter-spacing: 0.003em;
line-height: 1.15;
margin: 0 0 6px;
color: var(--text-primary);
}
.date-line {
font-size: var(--fs-body-2);
color: var(--text-secondary);
letter-spacing: -0.015em;
}
.date-line b { color: var(--text-primary); font-weight: 600; }
/* Cards */
.card {
background: var(--bg-surface);
border-radius: var(--r-4xl);
box-shadow: var(--shadow-depth);
padding: 12px;
}
.card.compact { padding: 4px; }
.card-head {
display: flex; align-items: center; justify-content: space-between;
height: 48px;
padding: 0 12px 0 14px;
gap: 8px;
}
.card-head h3 {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0;
display: flex; align-items: center; gap: 10px;
}
.card-head .count {
font-size: var(--fs-body-2);
color: var(--text-tertiary);
font-weight: 500;
letter-spacing: -0.015em;
}
.card-head .link {
font-size: var(--fs-button);
color: var(--text-secondary);
font-weight: 600;
letter-spacing: -0.015em;
padding: 8px 12px;
border-radius: 12px;
transition: color 150ms, background 150ms;
cursor: pointer;
}
.card-head .link:hover { color: var(--text-primary); background: var(--bg-depth); }
.card-body { padding: 4px; }
/* =========================================================
LABELS — Core 2.0 exact spec: border color/15, bg color/5, text solid
========================================================= */
.label {
display: inline-flex; align-items: center; gap: 6px;
height: 28px;
padding: 0 10px;
border-radius: 10px;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: -0.015em;
border: 1.5px solid;
white-space: nowrap;
}
.label .cdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.label-green { color: var(--label-green); border-color: rgba(0,166,86,0.15); background: rgba(0,166,86,0.05); }
.label-red { color: var(--label-red); border-color: rgba(255,106,85,0.15); background: rgba(255,106,85,0.05); }
.label-yellow { color: var(--label-yellow); border-color: rgba(239,157,14,0.15); background: rgba(239,157,14,0.05); }
.label-orange { color: var(--label-orange); border-color: rgba(255,157,52,0.15); background: rgba(255,157,52,0.05); }
.label-blue { color: var(--label-blue); border-color: rgba(42,133,255,0.15); background: rgba(42,133,255,0.05); }
.label-purple { color: var(--label-purple); border-color: rgba(127,95,255,0.15); background: rgba(127,95,255,0.05); }
.label-gray { color: var(--text-secondary); border-color: var(--stroke-stroke2); background: var(--bg-app); }
.label-sm { height: 24px; padding: 0 8px; font-size: 11px; border-radius: 8px; }
/* Kind squares — tinted with Core 2.0 secondary palette */
.kind-square {
width: 34px; height: 34px;
border-radius: 10px;
display: grid; place-items: center;
color: var(--shade-02);
flex: none;
}
.kind-peach { background: var(--secondary-01); }
.kind-lav { background: var(--secondary-02); }
.kind-sky { background: var(--secondary-03); }
.kind-mint { background: var(--secondary-04); }
.kind-cream { background: var(--secondary-05); }
/* Progress */
.pbar {
height: 5px;
background: var(--bg-inset);
border-radius: 4px;
overflow: hidden;
}
.pbar > i {
display: block; height: 100%;
background: var(--text-primary);
border-radius: inherit;
transition: width 300ms ease;
}
.pbar.blue > i { background: linear-gradient(to right, #5AA0FF, #2A85FF); }
.pbar.warn > i { background: linear-gradient(to right, #FFB25C, #FF9D34); }
.pbar.red > i { background: linear-gradient(to right, #FF6A55, #FF381C); }
.pbar.green > i { background: linear-gradient(to right, #22C88F, #00A656); }
.pbar.purple> i { background: linear-gradient(to right, #9E88FF, #7F5FFF); }
/* Avatars */
.avatar {
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
color: white;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
flex: none;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.md { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 36px; height: 36px; font-size: 13px; }
.avatar.xl { width: 44px; height: 44px; font-size: 15px; }
/* Portrait avatar — real photo instead of initials */
.avatar.avatar-photo { padding: 0; overflow: hidden; background: var(--bg-app); }
.avatar.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { box-shadow: 0 0 0 2.5px var(--bg-surface), inset 0 0 0 1px rgba(0,0,0,0.06); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }
.avatar-stack .more {
background: var(--bg-inset);
color: var(--text-secondary);
}
/* =========================================================
FOCUS NOW
========================================================= */
.focus-wrap { display: flex; flex-direction: column; gap: 12px; }
.hero {
position: relative;
padding: 24px 26px 22px;
border-radius: var(--r-4xl);
background:
radial-gradient(60% 100% at 100% 0%, rgba(255,188,153,0.24), transparent 60%),
radial-gradient(80% 80% at 0% 100%, rgba(202,189,255,0.20), transparent 55%),
var(--bg-surface);
box-shadow: var(--shadow-depth);
overflow: hidden;
}
.hero::before {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
.hero-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--danger-solid);
text-transform: uppercase;
background: rgba(255,56,28,0.05);
border: 1.5px solid rgba(255,56,28,0.15);
border-radius: 10px;
padding: 4px 10px;
}
.hero-title {
font-size: var(--fs-h5);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 12px 0 8px;
color: var(--text-primary);
}
.hero-context {
color: var(--text-secondary);
font-size: var(--fs-body-1);
max-width: 62ch;
line-height: 1.55;
letter-spacing: -0.015em;
margin: 0;
}
.hero-meta {
display: flex; align-items: center; gap: 20px;
margin-top: 20px;
flex-wrap: wrap;
}
.hero-meta .m {
display: flex; align-items: center; gap: 8px;
color: var(--text-secondary);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
}
.hero-meta .m b { color: var(--text-primary); font-weight: 600; }
.hero-actions {
display: flex; align-items: center; gap: 10px;
margin-top: 22px;
}
.hero-side {
padding-left: 22px;
border-left: 1.5px solid var(--stroke-subtle);
display: flex; flex-direction: column; gap: 18px;
min-width: 220px;
flex: 0 0 220px;
}
.hero-side .lbl {
font-size: var(--fs-overline);
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
/* Ring */
.ring {
--sz: 56px;
--pct: 62;
--track: var(--bg-inset);
--fill: var(--primary-05); /* warning orange */
width: var(--sz); height: var(--sz);
border-radius: 50%;
background: conic-gradient(var(--fill) calc(var(--pct) * 1%), var(--track) 0);
display: grid; place-items: center;
position: relative;
box-shadow: 0 0 0 1px var(--stroke-subtle);
}
.ring::before {
content: ""; position: absolute; inset: 5px;
border-radius: 50%;
background: var(--bg-surface);
}
.ring span {
position: relative;
font-size: 12px; font-weight: 700;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Focus mini list */
.focus-list {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 8px;
}
.focus-list-head {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px 4px;
}
.focus-list-head .lbl {
font-size: var(--fs-overline);
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.focus-item {
display: grid;
grid-template-columns: 26px minmax(0,1fr) auto 16px;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: var(--r-lg);
cursor: pointer;
transition: background 150ms;
}
.focus-item:hover { background: var(--bg-depth); }
.focus-pri {
width: 26px; height: 26px;
border-radius: 8px;
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
letter-spacing: -0.02em;
}
.focus-pri.p1 { color: var(--label-red); background: rgba(255,106,85,0.06); box-shadow: inset 0 0 0 1.5px rgba(255,106,85,0.15); }
.focus-pri.p2 { color: var(--label-orange); background: rgba(255,157,52,0.06); box-shadow: inset 0 0 0 1.5px rgba(255,157,52,0.15); }
.focus-pri.p3 { color: var(--label-yellow); background: rgba(239,157,14,0.06); box-shadow: inset 0 0 0 1.5px rgba(239,157,14,0.15); }
.focus-pri.p4 { color: var(--label-blue); background: rgba(42,133,255,0.06); box-shadow: inset 0 0 0 1.5px rgba(42,133,255,0.15); }
.focus-item .t1 {
font-size: var(--fs-body-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-item .t2 {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 2px;
}
.focus-item .kind-tag {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
font-weight: 500;
}
/* =========================================================
NEEDS REVIEW
========================================================= */
.review-hero {
display: flex; align-items: baseline; gap: 12px;
padding: 12px 18px 18px;
}
.review-hero .n {
font-size: 44px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.review-hero .lbl { font-size: var(--fs-body-2); color: var(--text-secondary); letter-spacing: -0.015em; }
.review-item {
display: flex; align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--r-lg);
cursor: pointer;
transition: background 150ms;
}
.review-item:hover { background: var(--bg-depth); }
.review-item .kind-square { width: 36px; height: 36px; border-radius: 12px; }
.review-middle {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.review-middle .t1 {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.review-middle .t2 {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 2px;
}
.review-right {
display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
flex: 0 0 auto;
}
.review-btn {
height: 30px;
padding: 0 12px;
border-radius: 10px;
background: var(--shade-02);
color: var(--text-light);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: -0.015em;
transition: background 150ms;
}
.review-btn:hover { background: var(--shade-04); }
.review-right .rt {
font-size: 11px;
color: var(--text-tertiary);
letter-spacing: -0.02em;
}
/* =========================================================
ACTIVE WORK
========================================================= */
.work-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px;
border-radius: var(--r-lg);
transition: background 150ms;
cursor: pointer;
flex-wrap: wrap;
}
.work-row:hover { background: var(--bg-depth); }
.work-row + .work-row { margin-top: 2px; }
.work-row .lead {
display: flex; align-items: center; gap: 14px;
min-width: 240px;
flex: 1 1 280px;
overflow: hidden;
}
.work-row .name { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.work-row .n1 {
font-size: var(--fs-body-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.work-row .n2 {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 2px;
}
.work-row .col-avatars { flex: 0 0 auto; min-width: 60px; }
.work-row .col-status { flex: 0 0 auto; min-width: 100px; }
.work-row .col-progress{ flex: 0 0 150px; }
.work-row .col-chev { flex: 0 0 16px; color: var(--text-tertiary); }
.progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.progress-wrap .p-num { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.progress-wrap .due { font-size: var(--fs-caption); color: var(--text-secondary); letter-spacing: -0.02em; }
.progress-wrap .due.late { color: var(--label-red); font-weight: 700; }
/* =========================================================
RECENT DECISIONS
========================================================= */
.dec-item {
padding: 16px 18px;
border-radius: var(--r-lg);
transition: background 150ms;
cursor: pointer;
}
.dec-item + .dec-item { margin-top: 2px; }
.dec-item:hover { background: var(--bg-depth); }
.dec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dec-head .when { font-size: var(--fs-caption); color: var(--text-tertiary); margin-left: auto; letter-spacing: -0.02em; }
.dec-title {
font-size: var(--fs-sub-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
line-height: 1.35;
margin-bottom: 6px;
}
.dec-ctx {
font-size: var(--fs-body-2);
color: var(--text-secondary);
letter-spacing: -0.015em;
line-height: 1.5;
}
.dec-meta { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.dec-meta .owner {
font-size: var(--fs-caption);
color: var(--text-secondary);
letter-spacing: -0.02em;
}
/* =========================================================
PRODUCT JOURNEY
========================================================= */
.journey {
padding: 20px 26px 22px;
}
.journey-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px;
padding: 0 4px;
}
.journey-header .title {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 10px;
}
.journey-header .qtr {
font-size: var(--fs-caption);
color: var(--text-tertiary);
padding: 4px 10px;
background: var(--bg-inset);
border-radius: 10px;
font-weight: 500;
letter-spacing: -0.02em;
}
.journey-track {
position: relative;
height: 140px;
margin: 12px 0 4px;
}
.journey-line {
position: absolute;
left: 0; right: 0;
top: 66px;
height: 3px;
background-image: linear-gradient(to right,
rgba(123, 123, 123, 0.5) 0,
rgba(123, 123, 123, 0.5) 2px,
transparent 2px);
background-repeat: repeat-x;
background-size: 5px 100%;
}
.journey-line-fill {
position: absolute;
left: 0; top: 66px;
height: 3px;
background-image: linear-gradient(to right,
var(--primary-01) 0,
var(--primary-01) 2px,
transparent 2px);
background-repeat: repeat-x;
background-size: 5px 100%;
}
.journey-phases {
position: absolute; inset: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.journey-phase {
position: relative;
display: flex; flex-direction: column; align-items: center;
}
.jp-label {
font-size: var(--fs-overline);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
white-space: nowrap;
}
.jp-label.done { color: var(--label-green); }
.jp-label.now { color: var(--primary-01); }
/* Node */
.jp-node {
position: absolute; top: 52px;
width: 32px; height: 32px;
border-radius: 10px;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
display: grid; place-items: center;
z-index: 1;
box-shadow: var(--shadow-widget);
}
.jp-node.done {
background: linear-gradient(180deg, #10B372, var(--primary-02));
border-color: transparent;
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 4px 10px rgba(0,166,86,0.30);
}
.jp-node.now {
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-color: transparent;
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
0 0 0 6px rgba(42,133,255,0.16),
0 8px 16px rgba(42,133,255,0.30);
}
.jp-title {
position: absolute; top: 92px;
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap;
}
.jp-date {
position: absolute; top: 114px;
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
white-space: nowrap;
}
.jp-tick {
position: absolute;
top: 62px;
width: 8px; height: 8px;
background: var(--shade-08);
border-radius: 50%;
border: 1.5px solid var(--bg-surface);
}
.jp-tick.done { background: var(--primary-02); border-color: var(--bg-surface); }
/* "You are here" chip */
.you-here {
position: absolute; top: 22px;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px 5px 8px;
background: var(--gradient-black);
color: white;
font-size: 11px; font-weight: 600;
letter-spacing: -0.015em;
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.20),
0 4px 12px rgba(16,16,16,0.28);
}
.you-here .pulse {
width: 6px; height: 6px; border-radius: 50%;
background: var(--primary-01);
box-shadow: 0 0 0 3px rgba(42,133,255,0.35);
}
.you-here::after {
content: "";
position: absolute; bottom: -4px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 7px; height: 7px;
background: linear-gradient(135deg, #2C2C2C, #282828);
}
.journey-footer {
display: flex; align-items: center; gap: 20px;
margin-top: 20px;
padding: 16px 4px 0;
border-top: 1px solid var(--stroke-subtle);
font-size: var(--fs-caption);
color: var(--text-secondary);
letter-spacing: -0.02em;
}
.journey-footer .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.journey-footer .note { margin-left: auto; color: var(--text-tertiary); }
.journey-footer .note b { color: var(--text-primary); font-weight: 600; }
/* =========================================================
RECENT CHANGES
========================================================= */
.act-day-label {
padding: 16px 18px 6px;
font-size: var(--fs-overline);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.act-item {
display: grid;
grid-template-columns: 34px 1fr auto;
align-items: flex-start;
gap: 12px;
padding: 10px 18px;
border-radius: var(--r-lg);
transition: background 150ms;
}
.act-item:hover { background: var(--bg-depth); }
.act-ico {
width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center;
color: var(--shade-02);
margin-top: 1px;
}
.act-ico.peach { background: var(--secondary-01); }
.act-ico.mint { background: var(--secondary-04); }
.act-ico.sky { background: var(--secondary-03); }
.act-ico.lav { background: var(--secondary-02); }
.act-ico.cream { background: var(--secondary-05); }
.act-text {
font-size: var(--fs-body-2);
line-height: 1.5;
letter-spacing: -0.015em;
}
.act-text b { font-weight: 600; color: var(--text-primary); }
.act-text .a-ctx { color: var(--text-secondary); }
.act-time {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
white-space: nowrap;
margin-top: 6px;
}
/* =========================================================
RECENT RESEARCH & FILES
========================================================= */
.thumb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 4px;
}
.thumb {
border-radius: var(--r-2xl);
overflow: hidden;
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
transition: transform 200ms, box-shadow 200ms;
cursor: pointer;
position: relative;
}
.thumb:hover { box-shadow: var(--shadow-depth); transform: translateY(-2px); }
.thumb-preview {
height: 138px;
position: relative;
overflow: hidden;
}
.thumb-meta { padding: 12px 14px 14px; }
.thumb-title {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-sub {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 4px;
display: flex; align-items: center; gap: 6px;
}
.thumb-badge {
position: absolute; top: 10px; left: 10px;
height: 24px;
padding: 0 8px;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
display: inline-flex; align-items: center;
background: rgba(16,16,16,0.85);
color: white;
backdrop-filter: blur(4px);
}
/* =========================================================
TABS — segmented pill control
========================================================= */
.tabs {
display: inline-flex;
align-items: center;
padding: 4px;
background: var(--bg-surface);
border-radius: 14px;
box-shadow: var(--shadow-widget);
gap: 2px;
}
.tab {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 12px;
border-radius: 10px;
color: var(--text-secondary);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: -0.015em;
transition: background 150ms, color 150ms;
position: relative;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
background: var(--bg-app);
color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--stroke-subtle);
}
.tab-count {
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
font-size: 10.5px;
font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: -0.015em;
}
.tab.active .tab-count { background: var(--bg-surface); color: var(--text-primary); }
.tab-count.tone-red { background: rgba(255,106,85,0.14); color: var(--label-red); }
.tab-count.tone-yellow { background: rgba(239,157,14,0.15); color: var(--label-yellow); }
.tab-count.tone-blue { background: rgba(42,133,255,0.14); color: var(--label-blue); }
.tab-count.tone-green { background: rgba(0,166,86,0.14); color: var(--label-green); }
.tab-count.tone-purple { background: rgba(127,95,255,0.14); color: var(--label-purple); }
/* =========================================================
INPUTS
========================================================= */
.input {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 14px;
border-radius: var(--r-md);
background: var(--bg-surface);
box-shadow: var(--shadow-widget), inset 0 0 0 1px transparent;
transition: box-shadow 150ms;
color: var(--text-primary);
min-width: 240px;
}
.input:hover { box-shadow: var(--shadow-depth), inset 0 0 0 1px transparent; }
.input:focus-within {
box-shadow: var(--shadow-widget), inset 0 0 0 1.5px var(--primary-01);
}
.input input {
flex: 1;
background: transparent;
border: 0;
outline: none;
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
color: var(--text-primary);
}
.input input::placeholder { color: var(--text-tertiary); }
.input-lead, .input-trail {
color: var(--text-tertiary);
display: inline-flex;
}
/* Select */
.select {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px 0 14px;
border-radius: var(--r-md);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
color: var(--text-primary);
font-size: var(--fs-body-2);
font-weight: 500;
letter-spacing: -0.015em;
transition: box-shadow 150ms;
}
.select:hover { box-shadow: var(--shadow-depth); }
.select-label { color: var(--text-tertiary); font-weight: 500; }
.select-value { color: var(--text-primary); font-weight: 600; }
/* =========================================================
CONTRACT / CLIENT CHIPS
========================================================= */
.contract-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 8px;
border-radius: 8px;
background: rgba(42,133,255,0.06);
color: var(--primary-01);
font-size: 11px;
font-weight: 600;
letter-spacing: -0.01em;
border: 1.5px solid rgba(42,133,255,0.14);
white-space: nowrap;
}
.contract-chip.gray {
background: var(--bg-inset);
color: var(--text-secondary);
border-color: var(--stroke-stroke2);
}
.contract-chip.warn {
background: rgba(239,157,14,0.06);
color: var(--label-yellow);
border-color: rgba(239,157,14,0.20);
}
.contract-chip .mono { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; }
.client-chip {
display: inline-flex;
align-items: center;
gap: 8px;
height: 24px;
padding: 0 10px 0 3px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.02em;
max-width: 200px;
}
.client-chip-mark {
width: 18px; height: 18px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 9.5px;
font-weight: 700;
color: var(--shade-02);
letter-spacing: 0.02em;
flex: none;
}
/* =========================================================
EMPTY STATE
========================================================= */
.empty {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 36px 20px 32px;
gap: 6px;
}
.empty-illus { margin-bottom: 10px; }
.empty-title {
font-size: var(--fs-sub-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.empty-body {
font-size: var(--fs-body-2);
color: var(--text-secondary);
max-width: 44ch;
line-height: 1.55;
letter-spacing: -0.015em;
}
.empty-action { margin-top: 12px; }
/* =========================================================
DOC THUMB (used in file/contract preview cards)
========================================================= */
.doc-thumb {
border-radius: var(--r-2xl);
overflow: hidden;
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
cursor: pointer;
position: relative;
transition: transform 200ms, box-shadow 200ms;
}
.doc-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-depth); }
.doc-thumb-visual {
height: 138px;
position: relative;
background: linear-gradient(180deg, #F9F9F9 0%, #F1F1F1 100%);
overflow: hidden;
}
.doc-thumb.doc-contract .doc-thumb-visual { background: radial-gradient(60% 100% at 0% 0%, rgba(181,228,202,0.35), transparent 60%), linear-gradient(180deg,#F5FBF7,#ECF6EF); }
.doc-thumb.doc-diagram .doc-thumb-visual { background: radial-gradient(50% 80% at 100% 0%, rgba(177,229,252,0.45), transparent 60%), linear-gradient(180deg,#F5FAFE,#EEF6FC); }
.doc-thumb.doc-chart .doc-thumb-visual { background: radial-gradient(60% 60% at 100% 100%, rgba(181,228,202,0.5), transparent 60%), linear-gradient(180deg,#F5FBF7,#ECF6EF); }
.doc-thumb.doc-frames .doc-thumb-visual { background: radial-gradient(60% 60% at 0% 100%, rgba(255,188,153,0.4), transparent 60%), linear-gradient(180deg,#FFF7F0,#F8ECDF); }
.doc-thumb.doc-doc .doc-thumb-visual { background: radial-gradient(60% 80% at 0% 0%, rgba(202,189,255,0.35), transparent 60%), linear-gradient(180deg,#F9F5FF,#F1EDF9); }
.doc-badge {
position: absolute; top: 10px; left: 10px;
height: 22px;
padding: 0 8px;
border-radius: 7px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex; align-items: center;
background: rgba(16,16,16,0.85);
color: white;
backdrop-filter: blur(4px);
}
.doc-thumb-meta { padding: 12px 14px 14px; }
.doc-thumb-title {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-thumb-sub {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 4px;
}
/* Sizes */
.doc-thumb.doc-sm .doc-thumb-visual { height: 96px; }
/* =========================================================
TABLES (used sparingly — cards are the primary pattern)
========================================================= */
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
.table th {
text-align: left;
padding: 12px 14px;
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-tertiary);
border-bottom: 1px solid var(--stroke-subtle);
}
.table td {
padding: 14px;
border-bottom: 1px solid var(--stroke-subtle);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
color: var(--text-primary);
}
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--bg-depth); }
/* =========================================================
MODAL / DRAWER shells (visual only — no JS yet)
========================================================= */
.modal {
width: 520px;
max-width: 90vw;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-dropdown);
padding: 20px 22px 20px;
}
.modal-title {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.modal-body {
font-size: var(--fs-body-2);
color: var(--text-secondary);
letter-spacing: -0.015em;
line-height: 1.55;
}
.modal-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 20px;
}
.drawer {
width: 460px;
max-width: 90vw;
height: 100%;
background: var(--bg-surface);
box-shadow: var(--shadow-dropdown);
border-radius: var(--r-3xl) 0 0 var(--r-3xl);
padding: 20px 22px;
}
/* =========================================================
PROJECTS OVERVIEW
========================================================= */
.projects-page { display: flex; flex-direction: column; gap: 16px; }
/* Filter bar */
.filter-bar {
display: flex; align-items: center; gap: 12px;
padding: 4px 0;
flex-wrap: wrap;
}
.filter-bar .filter-spacer { flex: 1; }
/* Highlight cards row (3 rich KPI-like tiles) */
.hi-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.hi-card {
position: relative;
padding: 18px 20px 18px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
overflow: hidden;
min-height: 200px;
display: flex; flex-direction: column; gap: 12px;
}
.hi-rail {
position: absolute; left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--primary-01);
border-radius: var(--r-3xl) 0 0 var(--r-3xl);
}
.hi-rail.red { background: linear-gradient(180deg, #FF6A55, var(--danger-solid)); }
.hi-rail.blue { background: linear-gradient(180deg, #5AA0FF, var(--primary-01)); }
.hi-rail.green { background: linear-gradient(180deg, #34C48F, var(--success-solid)); }
.hi-head {
display: flex; align-items: flex-start; justify-content: space-between;
}
.hi-title-block .lbl {
font-size: var(--fs-overline);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.hi-title-block .num {
font-size: 32px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
margin: 6px 0 2px;
}
.hi-title-block .sub {
font-size: var(--fs-caption);
color: var(--text-secondary);
letter-spacing: -0.015em;
}
.hi-glyph {
width: 44px; height: 44px;
border-radius: 12px;
display: grid; place-items: center;
flex: none;
}
.hi-glyph.red { background: rgba(255,56,28,0.08); color: var(--danger-solid); }
.hi-glyph.blue { background: rgba(42,133,255,0.08); color: var(--primary-01); }
.hi-glyph.green { background: rgba(0,166,86,0.10); color: var(--success-solid); }
.hi-list {
display: flex; flex-direction: column; gap: 6px;
margin-top: auto;
}
.hi-list .hi-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 10px;
font-size: var(--fs-caption);
letter-spacing: -0.02em;
color: var(--text-secondary);
transition: background 150ms;
cursor: pointer;
}
.hi-list .hi-item:hover { background: var(--bg-depth); }
.hi-list .hi-item b { color: var(--text-primary); font-weight: 600; }
.hi-list .hi-item .rt {
margin-left: auto;
font-size: 11px;
color: var(--text-tertiary);
}
/* Project row (main list) — 2-line design: name row + sub row inside lead */
.plist { display: flex; flex-direction: column; padding: 4px; }
.prow {
display: grid;
grid-template-columns: minmax(280px, 2fr) 92px 124px 120px 64px 14px;
align-items: center;
gap: 12px;
padding: 14px 14px;
border-radius: var(--r-lg);
transition: background 150ms;
cursor: pointer;
}
.prow + .prow { border-top: 1px solid var(--stroke-subtle); }
.prow:hover { background: var(--bg-depth); }
.prow.pinned { background: linear-gradient(180deg, rgba(255,216,141,0.10), transparent 30%); }
.prow-lead {
display: flex; align-items: center; gap: 12px;
min-width: 0;
overflow: hidden;
}
.prow-lead .kind-square { width: 36px; height: 36px; border-radius: 11px; }
.prow-name { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.prow-title-row {
display: flex; align-items: center; gap: 8px;
min-width: 0;
}
.prow-title {
font-size: var(--fs-body-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.prow-code {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
letter-spacing: 0;
background: var(--bg-inset);
border-radius: 5px;
padding: 1px 6px;
flex: none;
}
.prow-sub {
display: flex; align-items: center; gap: 8px;
margin-top: 6px;
min-width: 0;
flex-wrap: wrap;
}
.prow-comment {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.prow .col-status { min-width: 0; }
.prow .col-mile {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.prow .col-mile .m-name {
font-size: var(--fs-caption);
color: var(--text-secondary);
letter-spacing: -0.02em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prow .col-mile .m-date {
font-size: 11px;
color: var(--text-tertiary);
font-weight: 600;
letter-spacing: -0.02em;
}
.prow .col-mile .m-date.late { color: var(--danger-solid); }
.prow .col-progress {
display: flex; flex-direction: column; gap: 6px;
min-width: 0;
}
.prow .col-progress .p-num {
font-size: var(--fs-caption);
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.prow .col-owner { display: flex; align-items: center; gap: 8px; }
.prow .col-chev { color: var(--text-tertiary); }
/* Right sidebar for Projects */
.projects-side {
display: flex; flex-direction: column; gap: 12px;
}
/* Small activity/sparkline row inside cards */
.spark-inline { display: inline-flex; align-items: center; gap: 8px; }
/* KPI tile inside Projects side rail */
.kpi-tile {
padding: 16px 18px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 8px;
}
.kpi-tile .lbl {
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--text-tertiary);
}
.kpi-tile .num {
font-size: 28px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.kpi-tile .delta {
font-size: var(--fs-caption);
color: var(--success-solid);
font-weight: 600;
letter-spacing: -0.02em;
}
/* Contracts stub visuals */
.contract-row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) 180px 120px 100px 130px 18px;
align-items: center;
gap: 16px;
padding: 14px;
border-radius: var(--r-lg);
cursor: pointer;
transition: background 150ms;
}
.contract-row + .contract-row { border-top: 1px solid var(--stroke-subtle); }
.contract-row:hover { background: var(--bg-depth); }
.contract-row .c-lead {
display: flex; align-items: center; gap: 12px; min-width: 0;
}
.contract-row .c-kind {
width: 40px; height: 44px;
border-radius: 8px;
background:
linear-gradient(180deg, #FDFDFD 0%, #F5F5F5 100%);
border: 1.5px solid var(--stroke-stroke2);
color: var(--primary-01);
display: grid; place-items: center;
position: relative;
flex: none;
box-shadow: var(--shadow-widget);
}
.contract-row .c-kind::after {
content: "";
position: absolute; top: 0; right: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent var(--bg-inset) transparent;
}
.contract-row .c-title {
font-size: var(--fs-body-1);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.contract-row .c-meta {
display: flex; align-items: center; gap: 8px;
margin-top: 4px;
min-width: 0;
}
.contract-row .c-id {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
background: var(--bg-inset);
border-radius: 5px;
padding: 1px 6px;
letter-spacing: 0;
}
.contract-row .c-value {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.contract-row .c-dates {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
}
.contract-row .c-dates b { color: var(--text-primary); font-weight: 600; }
/* Reminder chip on contracts */
.reminder-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--r-full);
font-size: 11px;
font-weight: 700;
letter-spacing: -0.015em;
border: 1.5px solid;
}
.reminder-chip.expiring {
color: var(--label-yellow);
border-color: rgba(239,157,14,0.28);
background: rgba(239,157,14,0.06);
}
.reminder-chip.review {
color: var(--label-blue);
border-color: rgba(42,133,255,0.22);
background: rgba(42,133,255,0.06);
}
/* =========================================================
DESIGN SYSTEM PAGE
========================================================= */
.ds-shell {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
}
.ds-side {
position: sticky; top: 80px;
align-self: start;
padding: 6px;
border-radius: var(--r-lg);
display: flex; flex-direction: column; gap: 2px;
max-height: calc(100vh - 100px);
overflow: auto;
}
.ds-side a {
display: flex; align-items: center; gap: 10px;
height: 34px; padding: 0 12px;
border-radius: 10px;
font-size: var(--fs-caption);
color: var(--text-secondary);
cursor: pointer;
font-weight: 500;
letter-spacing: -0.015em;
}
.ds-side a:hover { color: var(--text-primary); background: var(--bg-depth); }
.ds-side a.active { color: var(--text-primary); font-weight: 600; background: var(--bg-surface); box-shadow: var(--shadow-widget); }
.ds-side .group-label {
padding: 12px 12px 4px;
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--text-tertiary);
}
.ds-content { display: flex; flex-direction: column; gap: 16px; }
.ds-section {
padding: 20px 22px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
}
.ds-section h2 {
font-size: var(--fs-h6);
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.ds-section .desc {
color: var(--text-secondary);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
margin-bottom: 18px;
max-width: 66ch;
}
.ds-grid {
display: grid;
gap: 12px;
}
.ds-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.ds-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.ds-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* Swatch */
.swatch {
display: flex; flex-direction: column; gap: 8px;
}
.swatch-chip {
height: 68px;
border-radius: var(--r-lg);
border: 1.5px solid var(--stroke-subtle);
}
.swatch .name { font-size: var(--fs-body-2); font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.swatch .token { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.swatch .hex { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
/* Type specimen row */
.type-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--stroke-subtle);
}
.type-row:last-child { border-bottom: 0; }
.type-row .meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary);
letter-spacing: 0;
line-height: 1.6;
}
.type-row .meta b { color: var(--text-primary); font-weight: 600; }
/* Spacing ruler */
.space-ruler {
display: flex; align-items: flex-end; gap: 12px;
padding: 12px 0;
height: 84px;
}
.space-ruler .r {
display: flex; flex-direction: column; align-items: center; gap: 6px;
flex: 1;
}
.space-ruler .r-box {
background: var(--primary-01);
border-radius: 6px;
width: 100%;
opacity: 0.20;
}
.space-ruler .r-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
}
/* Radius sample */
.radius-sample {
height: 88px;
background: var(--bg-app);
border: 1.5px solid var(--stroke-subtle);
display: grid; place-items: center;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 11px;
}
/* Shadow sample */
.shadow-sample {
height: 88px;
background: var(--bg-surface);
border-radius: var(--r-lg);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary);
}
/* Empty-state / preview slot inside DS */
.ds-slot {
min-height: 100px;
border-radius: var(--r-lg);
background: var(--bg-app);
padding: 14px;
display: flex; align-items: center; justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
/* Illustration tile */
.illus-tile {
padding: 18px;
border-radius: var(--r-lg);
background: var(--bg-app);
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.illus-tile .name {
font-size: var(--fs-caption);
color: var(--text-secondary);
letter-spacing: -0.02em;
font-weight: 600;
}
/* =========================================================
PROJECT WORKSPACE
========================================================= */
/* Sticky container that holds header + section nav.
This whole strip acts as the project chrome. */
.pw-chrome {
position: sticky;
top: var(--header-h);
z-index: 5;
background: color-mix(in oklab, var(--bg-app) 92%, transparent);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--stroke-subtle);
}
/* Project breadcrumb — the first row of chrome, answering "where am I?" */
.pw-crumb {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 10px 24px;
border-bottom: 1px solid var(--stroke-subtle);
min-height: 42px;
}
.pw-crumb-back {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 4px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
transition: background 150ms, color 150ms;
}
.pw-crumb-back:hover { background: var(--bg-depth); color: var(--text-primary); }
.pw-crumb-back svg:first-child { color: var(--text-tertiary); }
.pw-crumb-sep { color: var(--text-tertiary); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.pw-crumb-project {
display: inline-flex; align-items: center; gap: 10px;
min-width: 0;
}
.pw-crumb-name {
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
/* Allow the full project name to read without an awkward mid-word
ellipsis. Only truncate at unreasonable widths. */
white-space: nowrap;
max-width: none;
}
.pw-crumb-spacer { flex: 1; }
.pw-crumb-switch {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 12px; font-weight: 600; letter-spacing: -0.015em;
transition: background 150ms, color 150ms;
}
.pw-crumb-switch:hover { background: var(--bg-depth); color: var(--text-primary); }
.pw-crumb-switch svg { color: var(--text-tertiary); }
.pw-crumb-switch:hover svg { color: var(--text-primary); }
/* Project switcher menu — visual affordance, not a real dropdown implementation */
.pw-switcher {
position: absolute;
top: calc(100% + 6px); right: 20px;
width: 340px;
max-width: calc(100vw - 40px);
padding: 10px;
background: var(--bg-surface);
border-radius: 18px;
box-shadow: var(--shadow-dropdown);
z-index: 20;
}
.pw-switcher-head {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 10px 8px;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
border-bottom: 1px solid var(--stroke-subtle);
margin-bottom: 4px;
}
.pw-switcher-head .pw-switcher-all { font-size: 11px; letter-spacing: -0.02em; text-transform: none; color: var(--text-secondary); font-weight: 600; padding: 4px 8px; border-radius: 8px; }
.pw-switcher-head .pw-switcher-all:hover { background: var(--bg-depth); color: var(--text-primary); }
.pw-switcher-list { display: flex; flex-direction: column; gap: 2px; }
.pw-switcher-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 12px;
cursor: pointer;
transition: background 150ms;
}
.pw-switcher-item:hover { background: var(--bg-depth); }
.pw-switcher-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.pw-switcher-meta { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
/* Project header — compact hero */
.pw-header {
padding: 16px 24px 14px;
display: flex;
align-items: flex-start;
gap: 24px;
}
.pw-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
padding: 4px 8px 4px 4px;
border-radius: 8px;
transition: background 150ms, color 150ms;
margin-bottom: 6px;
}
.pw-back:hover { background: var(--bg-depth); color: var(--text-secondary); }
.pw-title-block { flex: 1; min-width: 0; }
.pw-title-row {
display: flex; align-items: baseline; gap: 12px;
min-width: 0;
}
.pw-title {
font-size: 26px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--text-primary);
/* Two-line clamp keeps the title readable at 1440 without truncating
the words that carry meaning (“operating layer, v2”). */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-width: 0;
margin: 0;
max-width: 42ch;
}
.pw-code {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary);
background: var(--bg-inset);
border-radius: 6px;
padding: 2px 7px;
letter-spacing: 0;
flex: none;
}
.pw-tagline {
color: var(--text-secondary);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
line-height: 1.5;
margin-top: 6px;
max-width: 78ch;
}
.pw-meta {
display: flex; align-items: center; gap: 22px;
margin-top: 14px;
flex-wrap: wrap;
}
.pw-meta-item {
display: flex; align-items: center; gap: 8px;
color: var(--text-secondary);
font-size: var(--fs-caption);
letter-spacing: -0.02em;
}
.pw-meta-item b { color: var(--text-primary); font-weight: 600; }
.pw-meta-item .divider {
width: 1px; height: 12px; background: var(--stroke-subtle); margin: 0 4px;
}
/* Right stats cluster */
.pw-stats {
display: flex; align-items: center; gap: 20px;
flex: none;
padding-left: 22px;
border-left: 1px solid var(--stroke-subtle);
}
.pw-stat {
display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
min-width: 0;
}
.pw-stat .lbl {
font-size: var(--fs-overline);
color: var(--text-tertiary);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.pw-stat .val {
font-size: var(--fs-sub-1);
color: var(--text-primary);
font-weight: 600;
letter-spacing: -0.015em;
}
.pw-stat .sub {
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
}
.pw-stat.ring-stat { flex-direction: row; align-items: center; gap: 12px; }
.pw-actions { display: flex; align-items: center; gap: 8px; padding-left: 8px; }
/* Section nav — horizontal tabs directly under header */
.pw-nav {
display: flex;
align-items: center;
gap: 2px;
padding: 0 24px 0 24px;
overflow-x: auto;
}
.pw-nav-item {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
height: 44px;
padding: 0 14px;
color: var(--text-secondary);
font-size: var(--fs-button);
font-weight: 500;
letter-spacing: -0.015em;
border-radius: 10px 10px 0 0;
transition: color 150ms, background 150ms;
white-space: nowrap;
cursor: pointer;
}
.pw-nav-item:hover { color: var(--text-primary); background: var(--bg-depth); }
.pw-nav-item.active {
color: var(--text-primary);
font-weight: 600;
}
.pw-nav-item.active::after {
content: "";
position: absolute; left: 12px; right: 12px; bottom: -1px;
height: 2px;
background: var(--text-primary);
border-radius: 2px 2px 0 0;
}
.pw-nav-item .n-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
font-size: 10.5px;
font-weight: 700;
}
.pw-nav-item.active .n-count {
background: var(--text-primary);
color: var(--text-light);
}
.pw-nav-item .n-count.n-tone-red { background: rgba(255,56,28,0.14); color: var(--danger-solid); }
.pw-nav-item .n-count.n-tone-yellow { background: rgba(239,157,14,0.14); color: var(--label-yellow); }
.pw-nav-item .n-count.n-tone-blue { background: rgba(42,133,255,0.14); color: var(--primary-01); }
.pw-nav-item.active .n-count.n-tone-red,
.pw-nav-item.active .n-count.n-tone-yellow,
.pw-nav-item.active .n-count.n-tone-blue {
color: white;
}
.pw-nav-item.active .n-count.n-tone-red { background: var(--danger-solid); }
.pw-nav-item.active .n-count.n-tone-yellow { background: var(--warning-solid); }
.pw-nav-item.active .n-count.n-tone-blue { background: var(--primary-01); }
/* Section body wrapper */
.pw-body {
padding: 24px;
display: grid;
gap: 16px;
}
/* ---------- Overview specific ---------- */
.ov-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
gap: 16px;
align-items: flex-start;
}
.ov-main { display: flex; flex-direction: column; gap: 16px; }
.ov-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 220px; }
/* =============================================================
Overview · editorial / document composition (Phase 11 polish)
One shared reading surface for the main column, hairline
dividers between sections, no per-block card chrome.
============================================================= */
.ov-doc {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 6px 32px 8px;
}
.ov-sec {
padding: 26px 0 24px;
border-top: 1px solid var(--stroke-subtle);
}
.ov-sec:first-child { border-top: 0; padding-top: 30px; }
.ov-sec:last-child { padding-bottom: 30px; }
.ov-sec-title {
margin: 0 0 14px;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.ov-sec-head-row {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.ov-sec-head-row .ov-sec-title { margin: 0; }
.ov-sec-link {
font-size: 12px; letter-spacing: -0.015em; font-weight: 600;
color: var(--text-secondary);
padding: 4px 8px; border-radius: 6px;
transition: color 150ms, background 150ms;
}
.ov-sec-link:hover { color: var(--text-primary); background: var(--bg-depth); }
.ov-sec-caption {
font-size: 11.5px; color: var(--text-tertiary);
letter-spacing: -0.02em;
}
/* Lead section — Goal + Vision, editorial pair. */
.ov-sec-lead { padding-top: 34px; padding-bottom: 30px; }
.ov-lead-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.ov-lead {
margin: 0;
font-size: 22px;
line-height: 1.4;
letter-spacing: -0.02em;
color: var(--text-primary);
max-width: 62ch;
font-weight: 500;
}
.ov-lead-vision {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--stroke-subtle);
display: grid;
grid-template-columns: 78px 1fr;
gap: 20px;
align-items: baseline;
}
.ov-lead-vision-lbl {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.ov-lead-vision > span:last-child {
font-size: 14px; line-height: 1.6; letter-spacing: -0.015em;
color: var(--text-secondary);
max-width: 60ch;
}
/* Problems — quiet numbered layout */
.ov-problems {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px 22px;
}
.ov-problem {
display: grid;
grid-template-columns: 20px 1fr;
gap: 10px;
align-items: baseline;
}
.ov-problem-num {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
.ov-problem-title {
font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary);
margin-bottom: 4px;
}
.ov-problem-body {
font-size: 12.5px; letter-spacing: -0.015em; color: var(--text-secondary);
line-height: 1.55;
}
/* Target users — quiet 2x2 grid, no card chrome */
.ov-users {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 22px;
}
.ov-user {
display: grid;
grid-template-columns: 30px 1fr;
gap: 12px;
align-items: center;
}
.ov-user-mark {
width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-secondary);
font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.ov-user-name { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-user-note { font-size: 11.5px; letter-spacing: -0.02em; color: var(--text-tertiary); margin-top: 1px; }
/* Use cases — numbered ordered list */
.ov-uses { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.ov-use {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
}
.ov-use-num {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-tertiary);
font-weight: 600;
padding-top: 2px;
letter-spacing: 0.02em;
}
.ov-use-title {
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
margin-bottom: 8px;
}
.ov-use-lines { display: flex; flex-direction: column; gap: 3px; }
.ov-use-lines > div {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
font-size: 12.5px; letter-spacing: -0.015em;
line-height: 1.55;
color: var(--text-secondary);
}
.ov-use-lines .lbl {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
padding-top: 1px;
}
/* Decisions inline list */
.ov-decisions { display: flex; flex-direction: column; gap: 20px; }
.ov-decision {
display: flex; flex-direction: column; gap: 6px;
padding-top: 16px;
border-top: 1px solid var(--stroke-subtle);
}
.ov-decisions .ov-decision:first-child { padding-top: 0; border-top: 0; }
.ov-decision-head { display: flex; align-items: center; gap: 10px; }
.ov-decision-head .when { margin-left: auto; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.ov-decision-title { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-decision-ctx { font-size: 12.5px; color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.55; max-width: 68ch; }
.ov-decision-meta {
display: flex; align-items: center; gap: 8px;
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 2px;
}
/* Activity inline list */
.ov-activity { display: flex; flex-direction: column; gap: 14px; }
.ov-activity-day {
font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.ov-activity-row {
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
padding: 6px 0;
border-top: 1px solid var(--stroke-subtle);
}
.ov-activity-group .ov-activity-row:first-of-type { border-top: 0; padding-top: 2px; }
.ov-activity-text {
font-size: 13px; letter-spacing: -0.015em; color: var(--text-secondary); line-height: 1.5;
}
.ov-activity-text b { color: var(--text-primary); font-weight: 600; }
.ov-activity-time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
}
/* Business — compact, secondary section */
.ov-biz .ov-sec-head-row { align-items: baseline; }
.ov-biz .ov-sec-title { font-size: 13.5px; letter-spacing: -0.01em; }
.ov-biz-prose {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 32px;
}
.ov-biz-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.ov-biz-prose p {
margin: 0;
font-size: 13px; letter-spacing: -0.015em; line-height: 1.6;
color: var(--text-secondary);
max-width: 60ch;
}
.ov-biz-sub {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--stroke-subtle);
}
.ov-biz-sublabel {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 10px;
}
.ov-biz-pricing { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-biz-pricing li {
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 14px;
align-items: baseline;
padding: 5px 0;
font-size: 12.5px;
}
.ov-biz-pricing .tier {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ov-biz-pricing .note {
color: var(--text-secondary);
letter-spacing: -0.015em;
line-height: 1.5;
}
.ov-biz-pricing .price {
font-size: 12.5px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.01em;
}
.ov-biz-metrics { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ov-biz-metrics li {
display: grid;
grid-template-columns: 1.4fr auto auto;
gap: 14px;
align-items: baseline;
padding: 5px 0;
font-size: 12.5px;
}
.ov-biz-metrics .name {
color: var(--text-primary);
font-weight: 500;
letter-spacing: -0.015em;
}
.ov-biz-metrics .target {
font-size: 11.5px;
color: var(--text-tertiary);
}
.ov-biz-metrics .target .from { color: var(--text-tertiary); }
.ov-biz-metrics .target .arrow { color: var(--text-muted); padding: 0 4px; }
.ov-biz-metrics .target .to { color: var(--text-primary); font-weight: 700; }
.ov-biz-metrics .when {
font-size: 10.5px; color: var(--text-tertiary);
letter-spacing: -0.02em;
}
.ov-biz-assumptions {
list-style: disc;
padding-left: 18px;
margin: 0;
display: flex; flex-direction: column; gap: 4px;
}
.ov-biz-assumptions li {
font-size: 12.5px; letter-spacing: -0.015em; line-height: 1.55;
color: var(--text-secondary);
max-width: 66ch;
}
.ov-biz-assumptions li::marker { color: var(--text-muted); }
/* -------------------------------------------------------------
Rail — differentiated hierarchy. Current stage keeps its card;
everything else is a quiet block on a shared rail surface.
------------------------------------------------------------- */
.ov-rail-blocks {
background: var(--bg-surface);
border-radius: var(--r-3xl);
padding: 4px 20px;
box-shadow: var(--shadow-widget);
}
.ov-rail-block {
padding: 18px 0;
border-top: 1px solid var(--stroke-subtle);
}
.ov-rail-block:first-child { border-top: 0; }
.ov-rail-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
}
.ov-rail-head h4 {
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.ov-rail-count {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
font-weight: 600;
}
.ov-rail-link {
font-size: 11px;
color: var(--text-tertiary);
font-weight: 600;
letter-spacing: -0.02em;
padding: 2px 6px;
border-radius: 5px;
}
.ov-rail-link:hover { color: var(--text-primary); background: var(--bg-depth); }
.ov-rail-empty {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em;
padding: 4px 0;
}
/* Milestones */
.ov-rail-milestones { display: flex; flex-direction: column; gap: 10px; }
.ov-milestone {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 10px;
align-items: center;
}
.ov-milestone-date {
width: 34px; height: 34px;
border-radius: 8px;
background: var(--bg-app);
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ov-milestone-date .m {
font-family: var(--font-mono);
font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em;
color: var(--text-tertiary); text-transform: uppercase;
}
.ov-milestone-date .d {
font-family: var(--font-mono);
font-size: 12px; font-weight: 700; color: var(--text-primary);
line-height: 1;
}
.ov-milestone-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-milestone-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 1px; }
.ov-milestone-in {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
font-weight: 600;
}
/* Risks */
.ov-rail-risks { display: flex; flex-direction: column; gap: 12px; }
.ov-risk { display: grid; grid-template-columns: 8px 1fr; gap: 10px; }
.ov-risk-dot {
width: 8px; height: 8px; border-radius: 50%;
margin-top: 6px;
background: var(--text-muted);
}
.ov-risk-dot.watch { background: var(--warning-solid); }
.ov-risk-dot.info { background: var(--primary-01); }
.ov-risk-dot.block { background: var(--danger-solid); }
.ov-risk-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-risk-note { font-size: 11.5px; color: var(--text-secondary); letter-spacing: -0.02em; line-height: 1.5; margin-top: 2px; }
.ov-risk-owner { font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 4px; }
/* Contract */
.ov-contract-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-contract-meta {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 4px;
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.ov-contract-meta .mono { font-family: var(--font-mono); font-size: 10.5px; }
.ov-contract-dates {
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px; margin-top: 10px;
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.ov-contract-dates b {
display: block; color: var(--text-primary); font-weight: 600;
font-size: 12px; margin-bottom: 1px;
}
.ov-contract-dates span { text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; }
/* Team — tertiary weight */
.ov-team { display: flex; flex-direction: column; gap: 8px; }
.ov-team-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.ov-team-name { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ov-team-role { font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 1px; }
/* Goal card — quote-ish, large restrained */
.goal-card {
padding: 24px 26px;
background: var(--bg-surface);
border-radius: var(--r-4xl);
box-shadow: var(--shadow-depth);
position: relative;
overflow: hidden;
}
.goal-card::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(50% 60% at 100% 0%, rgba(42,133,255,0.08), transparent 60%),
radial-gradient(45% 60% at 0% 100%, rgba(181,228,202,0.14), transparent 60%);
pointer-events: none;
border-radius: inherit;
}
.goal-card > * { position: relative; }
.goal-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: var(--fs-overline);
color: var(--primary-01);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.goal-text {
font-size: 20px;
line-height: 1.45;
letter-spacing: -0.015em;
color: var(--text-primary);
margin: 12px 0 0;
max-width: 68ch;
}
.goal-quote-mark {
position: absolute; top: 14px; right: 22px;
font-family: Georgia, "Times New Roman", serif;
font-size: 84px;
line-height: 0.7;
color: var(--stroke-stroke2);
opacity: 0.6;
pointer-events: none;
}
/* Vision card — smaller sibling */
.vision-card {
padding: 18px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
}
.vision-eyebrow {
font-size: var(--fs-overline);
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
}
.vision-text {
color: var(--text-primary);
font-size: var(--fs-body-1);
letter-spacing: -0.015em;
line-height: 1.55;
margin: 8px 0 0;
max-width: 68ch;
}
/* Business block embedded into Overview (Phase 6 IA) */
.bp-embed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 32px;
}
.bp-embed-block {}
.bp-embed-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.bp-embed-p {
margin: 0;
font-size: 14px; letter-spacing: -0.015em; line-height: 1.6;
color: var(--text-primary);
max-width: 62ch;
}
/* Section heading inside overview */
.ov-section-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 6px 8px;
}
.ov-section-head h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: -0.015em;
margin: 0;
display: flex; align-items: center; gap: 10px;
color: var(--text-primary);
}
.ov-section-head .link {
font-size: var(--fs-caption);
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 8px;
}
.ov-section-head .link:hover { background: var(--bg-depth); color: var(--text-primary); }
/* Problem tiles */
.problem-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.problem-tile {
padding: 16px 18px 18px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
}
.problem-tile .p-ico {
width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center;
color: var(--shade-02);
flex: none;
}
.problem-tile .p-ico.peach { background: var(--secondary-01); }
.problem-tile .p-ico.sky { background: var(--secondary-03); }
.problem-tile .p-ico.cream { background: var(--secondary-05); }
.problem-tile .p-ico.mint { background: var(--secondary-04); }
.problem-tile .p-ico.lav { background: var(--secondary-02); }
.problem-tile .p-title { font-size: var(--fs-sub-1); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.problem-tile .p-body { font-size: var(--fs-body-2); color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.5; }
/* Target user chips */
.tuser-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.tuser-tile {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-radius: var(--r-lg);
background: var(--bg-app);
}
.tuser-mark {
width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
color: var(--shade-02);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02em;
flex: none;
}
.tuser-meta { min-width: 0; }
.tuser-name { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.tuser-note { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; line-height: 1.4; margin-top: 2px; }
/* Use case cards */
.uc-list { display: flex; flex-direction: column; gap: 10px; }
.uc-card {
display: grid;
grid-template-columns: 44px 1fr;
gap: 14px;
padding: 18px 20px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.uc-num {
width: 34px; height: 34px; border-radius: 12px;
display: grid; place-items: center;
background: var(--text-primary);
color: var(--text-light);
font-family: var(--font-mono);
font-weight: 700;
font-size: 13px;
letter-spacing: 0;
}
.uc-title { font-size: var(--fs-sub-1); font-weight: 600; letter-spacing: -0.015em; }
.uc-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.uc-line { display: flex; gap: 10px; }
.uc-line .lbl {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--text-tertiary);
font-weight: 600;
letter-spacing: 0;
padding-top: 2px;
width: 50px;
text-transform: uppercase;
}
.uc-line .txt { font-size: var(--fs-body-2); color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.5; }
/* Key features strip (in overview) */
.kfeat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.kfeat-tile {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-radius: var(--r-lg);
background: var(--bg-app);
cursor: pointer;
transition: background 150ms;
}
.kfeat-tile:hover { background: var(--bg-depth); }
.kfeat-tile .kind-square { width: 30px; height: 30px; border-radius: 9px; }
.kfeat-tile .kf-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.kfeat-tile .kf-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
.kfeat-tile .kf-prog { flex: 1 1 auto; min-width: 60px; max-width: 90px; }
.kfeat-tile .kf-num { font-size: 11px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
/* Current stage card (right rail) */
.cs-card {
padding: 20px 22px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
position: relative;
overflow: hidden;
}
.cs-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(60% 80% at 100% 0%, rgba(42,133,255,0.10), transparent 60%);
pointer-events: none;
border-radius: inherit;
}
.cs-card > * { position: relative; }
.cs-eyebrow {
font-size: var(--fs-overline);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary-01);
font-weight: 700;
}
.cs-title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 6px 0 4px; }
.cs-of { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.cs-goal { font-size: var(--fs-body-2); color: var(--text-secondary); line-height: 1.5; letter-spacing: -0.015em; margin-top: 12px; }
.cs-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
/* Rail card generic */
.rail-card {
padding: 16px 18px 18px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.rail-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.rail-head h4 {
margin: 0;
font-size: var(--fs-body-1);
font-weight: 600;
letter-spacing: -0.015em;
display: flex; align-items: center; gap: 8px;
}
.rail-head .link {
font-size: 12px;
color: var(--text-secondary);
padding: 4px 8px;
border-radius: 8px;
cursor: pointer;
}
.rail-head .link:hover { color: var(--text-primary); background: var(--bg-depth); }
/* Related contract mini */
.contract-mini {
display: flex; gap: 12px; align-items: center;
padding: 12px;
border-radius: var(--r-lg);
background: var(--bg-app);
}
.contract-mini .c-kind {
width: 40px; height: 44px;
border-radius: 8px;
background: linear-gradient(180deg, #FDFDFD 0%, #F5F5F5 100%);
border: 1.5px solid var(--stroke-stroke2);
color: var(--primary-01);
display: grid; place-items: center;
position: relative;
flex: none;
box-shadow: var(--shadow-widget);
}
.contract-mini .c-kind::after {
content: "";
position: absolute; top: 0; right: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent var(--bg-inset) transparent;
}
.contract-mini .c-details { min-width: 0; flex: 1; }
.contract-mini .c-name { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.contract-mini .c-meta { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
/* Risk tile */
.risk-item {
display: flex; gap: 12px;
padding: 10px 8px;
border-radius: 10px;
}
.risk-item + .risk-item { border-top: 1px solid var(--stroke-subtle); border-radius: 0; }
.risk-item .r-dot {
width: 8px; height: 8px; border-radius: 50%;
margin-top: 6px; flex: none;
}
.risk-item .r-dot.info { background: var(--primary-01); }
.risk-item .r-dot.watch { background: var(--warning-solid); }
.risk-item .r-dot.block { background: var(--danger-solid); }
.risk-item .r-body { flex: 1; min-width: 0; }
.risk-item .r-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.risk-item .r-note { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; line-height: 1.5; margin-top: 4px; }
.risk-item .r-owner { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 4px; }
/* Milestones list in rail */
.mile-list { display: flex; flex-direction: column; gap: 0; }
.mile-list .mile-item {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 4px;
border-bottom: 1px solid var(--stroke-subtle);
}
.mile-list .mile-item:last-child { border-bottom: 0; }
.mile-list .mile-date-box {
width: 30px; height: 34px;
border-radius: 8px;
background: var(--bg-app);
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex: none;
}
.mile-date-box .m { font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-tertiary); text-transform: uppercase; }
.mile-date-box .d { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.mile-item .mile-name { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.mile-item .mile-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
.mile-item .mile-in { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
/* Team snapshot */
.team-list { display: flex; flex-direction: column; gap: 4px; }
.team-item {
display: flex; align-items: center; gap: 12px;
padding: 8px 6px;
border-radius: 10px;
}
.team-item:hover { background: var(--bg-depth); }
.team-item .t-name { font-size: var(--fs-body-2); font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); }
.team-item .t-role { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
/* =========================================================
FEATURES — kanban-lite
========================================================= */
.kb-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.kb-col {
background: var(--bg-app);
border-radius: var(--r-2xl);
padding: 12px 10px;
min-height: 280px;
}
.kb-col-head {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 6px 10px;
}
.kb-col-head .name {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-tertiary);
font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
.kb-col-head .name .cnt {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px;
padding: 0 5px;
background: var(--bg-surface);
color: var(--text-tertiary);
border-radius: 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: -0.015em;
}
.kb-cards { display: flex; flex-direction: column; gap: 8px; }
.kb-card {
padding: 12px 14px 14px;
background: var(--bg-surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-widget);
cursor: pointer;
transition: box-shadow 150ms, transform 150ms;
}
.kb-card:hover { box-shadow: var(--shadow-depth); transform: translateY(-1px); }
.kb-card .kb-title {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.kb-card .kb-links {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 10px;
}
.kb-card .kb-linkchip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-secondary);
font-size: 10.5px;
font-weight: 600;
letter-spacing: -0.015em;
}
.kb-card .kb-linkchip svg { width: 10px; height: 10px; }
.kb-card .kb-foot {
display: flex; align-items: center; justify-content: space-between;
margin-top: 12px;
gap: 8px;
}
.kb-card .kb-owner { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.kb-priority {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
padding: 2px 5px;
border-radius: 5px;
letter-spacing: 0;
}
.kb-priority.P0 { background: rgba(255,56,28,0.10); color: var(--danger-solid); }
.kb-priority.P1 { background: rgba(255,157,52,0.10); color: var(--warning-solid); }
.kb-priority.P2 { background: rgba(123,123,123,0.12); color: var(--text-tertiary); }
/* =========================================================
BUSINESS PLAN
========================================================= */
.bp-shell {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 32px;
}
.bp-toc {
position: sticky; top: 220px;
align-self: start;
display: flex; flex-direction: column; gap: 2px;
}
.bp-toc a {
padding: 6px 10px;
border-radius: 8px;
font-size: var(--fs-caption);
color: var(--text-tertiary);
letter-spacing: -0.02em;
cursor: pointer;
transition: color 150ms, background 150ms;
}
.bp-toc a:hover { color: var(--text-primary); background: var(--bg-depth); }
.bp-toc a.active { color: var(--text-primary); background: var(--bg-surface); box-shadow: var(--shadow-widget); font-weight: 600; }
.bp-body {
background: var(--bg-surface);
border-radius: var(--r-4xl);
box-shadow: var(--shadow-depth);
padding: 32px 40px 40px;
max-width: 780px;
}
.bp-body h2 {
margin: 0 0 6px;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.015em;
}
.bp-body h2 + .lead {
font-size: var(--fs-body-2);
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-bottom: 24px;
}
.bp-section + .bp-section {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--stroke-subtle);
}
.bp-section h3 {
margin: 0 0 8px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.bp-section p {
margin: 0 0 8px;
font-size: var(--fs-body-1);
line-height: 1.6;
color: var(--text-primary);
letter-spacing: -0.015em;
max-width: 68ch;
}
.bp-section ul {
margin: 8px 0 0;
padding-left: 20px;
display: flex; flex-direction: column; gap: 6px;
}
.bp-section li {
font-size: var(--fs-body-1);
color: var(--text-primary);
letter-spacing: -0.015em;
line-height: 1.55;
}
.bp-pricing {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 8px;
}
.bp-pricing .p {
padding: 14px 16px;
border: 1.5px solid var(--stroke-subtle);
border-radius: var(--r-lg);
background: var(--bg-app);
}
.bp-pricing .p-tier { font-size: 11px; color: var(--text-tertiary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.bp-pricing .p-price { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin-top: 6px; }
.bp-pricing .p-note { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 6px; line-height: 1.5; }
.bp-competitors {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 12px;
}
.bp-competitors .comp {
display: grid;
grid-template-columns: 1.2fr 1.5fr 60px 2fr;
gap: 16px;
padding: 12px 14px;
border-radius: var(--r-lg);
background: var(--bg-app);
align-items: center;
}
.bp-competitors .comp .name { font-weight: 600; font-size: var(--fs-body-2); letter-spacing: -0.015em; }
.bp-competitors .comp .focus { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; }
.bp-competitors .comp .band { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-primary); letter-spacing: 0; }
.bp-competitors .comp .weakness { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; line-height: 1.5; }
.bp-metrics {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
margin-top: 8px;
}
.bp-metric {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-radius: 10px;
background: var(--bg-app);
font-size: var(--fs-body-2);
letter-spacing: -0.015em;
}
.bp-metric .m-name { font-weight: 600; }
.bp-metric .m-from { color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.bp-metric .m-arrow { color: var(--primary-01); font-weight: 700; }
.bp-metric .m-to { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-metric .m-when { color: var(--text-tertiary); font-size: 11px; letter-spacing: -0.02em; text-align: right; }
/* =========================================================
R&D visual gallery
========================================================= */
.rd-filter { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.rd-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.rd-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
overflow: hidden;
cursor: pointer;
transition: transform 200ms, box-shadow 200ms;
display: flex; flex-direction: column;
}
.rd-card:hover { box-shadow: var(--shadow-depth); transform: translateY(-2px); }
.rd-visual {
height: 132px;
position: relative;
overflow: hidden;
}
.rd-visual.user { background: radial-gradient(60% 80% at 0% 0%, rgba(181,228,202,0.4), transparent 60%), linear-gradient(180deg,#F5FBF7,#ECF6EF); }
.rd-visual.competitor{ background: radial-gradient(60% 80% at 100% 0%, rgba(255,188,153,0.4), transparent 60%), linear-gradient(180deg,#FFF7F0,#F8ECDF); }
.rd-visual.market { background: radial-gradient(60% 80% at 100% 100%, rgba(181,228,202,0.4), transparent 60%), linear-gradient(180deg,#F5FBF7,#ECF6EF); }
.rd-visual.technical { background: radial-gradient(60% 80% at 100% 0%, rgba(177,229,252,0.5), transparent 60%), linear-gradient(180deg,#F5FAFE,#EEF6FC); }
.rd-visual.experiment{ background: radial-gradient(60% 80% at 100% 0%, rgba(202,189,255,0.4), transparent 60%), linear-gradient(180deg,#F9F5FF,#F1EDF9); }
.rd-visual.insight { background: radial-gradient(60% 80% at 50% 0%, rgba(245,36,149,0.10), transparent 60%), linear-gradient(180deg,#FFF7FB,#FEEBF4); }
.rd-badge {
position: absolute; top: 10px; left: 10px;
height: 22px;
padding: 0 8px;
border-radius: 7px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
display: inline-flex; align-items: center;
background: rgba(16,16,16,0.85);
color: white;
backdrop-filter: blur(4px);
}
.rd-pin {
position: absolute; top: 10px; right: 10px;
color: var(--warning-solid);
}
.rd-meta { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rd-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.4; }
.rd-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; }
.rd-insight {
font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em;
line-height: 1.5;
padding: 10px 12px;
background: var(--bg-app);
border-radius: 10px;
border-left: 3px solid var(--primary-01);
margin-top: 4px;
}
.rd-connects { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.rd-conn {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-secondary);
font-size: 10.5px;
font-weight: 600;
letter-spacing: -0.015em;
}
.rd-conn svg { width: 10px; height: 10px; }
/* R&D quote card body */
.rd-quote {
position: absolute; inset: 0;
padding: 18px 22px;
display: flex; flex-direction: column; justify-content: center;
}
.rd-quote .qtext {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
color: var(--text-primary);
line-height: 1.45;
letter-spacing: -0.01em;
font-style: italic;
}
.rd-quote .qby {
font-size: 11px;
color: var(--text-tertiary);
letter-spacing: -0.02em;
margin-top: 8px;
}
/* R&D insight card body */
.rd-insight-card-body {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
padding: 16px 22px;
text-align: center;
font-size: 15px;
font-weight: 500;
color: var(--accent);
line-height: 1.45;
letter-spacing: -0.01em;
}
/* =========================================================
UI / DESIGN gallery
========================================================= */
.dg-section-head { margin-bottom: 10px; }
.dg-screens {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.dg-screen {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
overflow: hidden;
cursor: pointer;
transition: transform 200ms, box-shadow 200ms;
}
.dg-screen:hover { box-shadow: var(--shadow-depth); transform: translateY(-2px); }
.dg-visual {
height: 200px;
position: relative;
overflow: hidden;
}
.dg-visual.sky { background: linear-gradient(180deg, #F5FAFE, #EEF6FC); }
.dg-visual.mint { background: linear-gradient(180deg, #F5FBF7, #ECF6EF); }
.dg-visual.lav { background: linear-gradient(180deg, #F9F5FF, #F1EDF9); }
.dg-visual.peach { background: linear-gradient(180deg, #FFF7F0, #F8ECDF); }
.dg-meta { padding: 12px 16px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dg-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.dg-version {
font-family: var(--font-mono);
font-size: 10px;
padding: 2px 7px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
font-weight: 700;
letter-spacing: 0;
}
.dg-flow-list { display: flex; flex-direction: column; gap: 8px; }
.dg-flow {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
border-radius: var(--r-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.dg-flow-glyph {
width: 40px; height: 40px; border-radius: 12px;
background: rgba(42,133,255,0.10);
color: var(--primary-01);
display: grid; place-items: center;
flex: none;
}
.dg-flow .n { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.dg-flow .m { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
.dg-asset {
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-lg);
box-shadow: var(--shadow-widget);
display: flex; align-items: center; gap: 12px;
}
.dg-asset-visual {
width: 88px; height: 62px;
border-radius: 10px;
overflow: hidden;
background: var(--bg-app);
border: 1.5px solid var(--stroke-subtle);
flex: none;
display: grid; place-items: center;
color: var(--text-tertiary);
}
.dg-asset .a-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.dg-asset .a-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
/* =========================================================
DEVELOPMENT
========================================================= */
.dv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv-card {
padding: 18px 20px 20px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.dv-card .dv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dv-card .dv-head .glyph {
width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center;
background: var(--bg-inset);
color: var(--text-primary);
flex: none;
}
.dv-card h4 { margin: 0; font-size: var(--fs-body-1); font-weight: 600; letter-spacing: -0.015em; }
.dv-tech-list { display: flex; flex-direction: column; gap: 4px; }
.dv-tech {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 10px;
transition: background 150ms;
}
.dv-tech:hover { background: var(--bg-depth); }
.dv-tech .tag {
font-family: var(--font-mono);
font-size: 10.5px;
padding: 2px 6px;
border-radius: 5px;
background: var(--bg-app);
color: var(--text-tertiary);
letter-spacing: 0;
margin-left: auto;
}
.dv-tech .name { font-size: var(--fs-body-2); font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); }
.dv-list { display: flex; flex-direction: column; gap: 4px; }
.dv-list-row {
display: grid;
grid-template-columns: 30px 1.4fr 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 6px;
border-bottom: 1px solid var(--stroke-subtle);
}
.dv-list-row:last-child { border-bottom: 0; }
.dv-list-row .env-glyph {
width: 26px; height: 26px; border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-inset);
color: var(--text-secondary);
}
.dv-list-row .env-name { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.dv-list-row .env-url { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0; }
.dv-list-row .env-owner{ font-size: 11px; color: var(--text-secondary); letter-spacing: -0.02em; }
/* Tech decisions timeline */
.dv-decisions { display: flex; flex-direction: column; gap: 0; }
.dv-decision {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 14px;
padding: 10px 6px;
border-bottom: 1px solid var(--stroke-subtle);
align-items: flex-start;
}
.dv-decision:last-child { border-bottom: 0; }
.dv-decision .d-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-01); margin-top: 6px; }
.dv-decision .d-title { font-size: var(--fs-body-2); font-weight: 600; letter-spacing: -0.015em; }
.dv-decision .d-why { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; line-height: 1.5; margin-top: 4px; }
.dv-decision .d-meta { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
/* System arch card */
.arch-card {
padding: 20px 22px 22px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.arch-card .arch-note { font-size: var(--fs-body-2); color: var(--text-secondary); line-height: 1.55; letter-spacing: -0.015em; margin-top: 12px; }
/* =========================================================
DOCUMENTS
========================================================= */
.docs-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.docs-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
overflow: hidden;
cursor: pointer;
transition: transform 200ms, box-shadow 200ms;
}
.docs-card:hover { box-shadow: var(--shadow-depth); transform: translateY(-2px); }
.docs-visual { height: 110px; position: relative; overflow: hidden; }
.docs-meta { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.docs-title {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.docs-sub {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.02em;
display: flex; align-items: center; gap: 6px;
}
.docs-rel-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-secondary);
font-size: 10.5px; font-weight: 600;
letter-spacing: -0.015em;
margin-top: 6px;
align-self: flex-start;
}
/* =========================================================
FEATURES OVERVIEW
========================================================= */
/* Header row */
.feat-page-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px; padding: 4px 4px 8px;
}
.feat-page-head .titleblock .t {
font-size: 24px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
display: flex; align-items: baseline; gap: 10px;
}
.feat-page-head .titleblock .sub {
font-size: 13px; color: var(--text-secondary); letter-spacing: -0.015em; margin-top: 4px;
max-width: 72ch;
}
.feat-page-head .actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* Summary strip */
.feat-summary {
display: inline-flex; align-items: stretch;
padding: 6px;
background: var(--bg-surface);
border-radius: 14px;
box-shadow: var(--shadow-widget);
gap: 4px;
}
.feat-summary-item {
display: flex; flex-direction: column;
padding: 6px 14px;
border-radius: 10px;
min-width: 88px;
cursor: pointer;
transition: background 150ms;
}
.feat-summary-item.active {
background: var(--bg-app);
box-shadow: inset 0 0 0 1px var(--stroke-subtle);
}
.feat-summary-item:hover:not(.active) { background: var(--bg-depth); }
.feat-summary-item .k {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
display: inline-flex; align-items: center; gap: 6px;
}
.feat-summary-item .k .dot { width: 6px; height: 6px; border-radius: 50%; }
.feat-summary-item .k .dot.blue { background: var(--primary-01); }
.feat-summary-item .k .dot.green { background: var(--success-solid); }
.feat-summary-item .k .dot.yellow { background: var(--warning-solid); }
.feat-summary-item .k .dot.red { background: var(--danger-solid); }
.feat-summary-item .k .dot.purple { background: var(--primary-04); }
.feat-summary-item .k .dot.gray { background: var(--text-tertiary); }
.feat-summary-item .v {
font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin-top: 2px;
color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1;
}
/* Filter bar for Features (reuse .filter-bar but tighter) */
.feat-controls {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 4px 0 4px;
}
.feat-controls .spacer { flex: 1; }
/* Grouping label */
.feat-group {
padding: 8px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.feat-group + .feat-group { margin-top: 12px; }
.feat-group-head {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 14px 12px;
}
.feat-group-head .num {
width: 32px; height: 32px; border-radius: 10px;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
color: var(--text-secondary);
background: var(--bg-app);
letter-spacing: 0;
}
.feat-group-head .num.done { background: linear-gradient(180deg,#10B372,var(--success-solid)); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22); }
.feat-group-head .num.now { background: linear-gradient(180deg,#5AA0FF,var(--primary-01)); color: white; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 3px rgba(42,133,255,0.12); }
.feat-group-head .name {
font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary);
display: flex; align-items: center; gap: 10px;
}
.feat-group-head .name .cnt {
font-size: 12px; color: var(--text-tertiary); font-weight: 500; letter-spacing: -0.02em;
}
.feat-group-head .stage-tag {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
padding: 2px 6px; border-radius: 5px;
background: var(--bg-inset); color: var(--text-tertiary);
letter-spacing: 0;
margin-left: 8px;
}
.feat-group-head .name-desc {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; font-weight: 500; margin-top: 2px;
}
.feat-group-head .grp-progress { min-width: 180px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.feat-group-head .grp-progress .n { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.feat-group-head .grp-progress .bar { width: 160px; }
/* Feature row */
.feat-row {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 140px 120px 110px 24px;
gap: 14px;
align-items: center;
padding: 14px;
border-radius: var(--r-lg);
cursor: pointer;
transition: background 150ms;
background: var(--bg-app);
}
.feat-row + .feat-row { margin-top: 4px; }
.feat-row:hover { background: var(--bg-depth); }
.feat-row .fr-lead {
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 4px;
width: 44px;
}
.feat-row .fr-priority {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
padding: 3px 6px; border-radius: 5px;
letter-spacing: 0;
text-align: center; min-width: 30px;
}
.feat-row .fr-priority.P0 { background: rgba(255,56,28,0.10); color: var(--danger-solid); }
.feat-row .fr-priority.P1 { background: rgba(255,157,52,0.10); color: var(--warning-solid); }
.feat-row .fr-priority.P2 { background: rgba(123,123,123,0.12); color: var(--text-tertiary); }
.feat-row .fr-body { min-width: 0; }
.feat-row .fr-line1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feat-row .fr-name {
font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.feat-row .fr-purpose {
font-size: 12.5px; color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.5;
margin-top: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feat-row .fr-rel {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: 8px;
}
.feat-row .fr-rc {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border-radius: 5px;
color: var(--text-tertiary);
font-size: 11px; font-weight: 500; letter-spacing: -0.015em;
background: transparent;
border: 0;
}
.feat-row .fr-rc.red {
color: var(--danger-solid);
background: rgba(255,56,28,0.06);
padding: 2px 7px;
font-weight: 600;
}
.feat-row .fr-rc svg { width: 11px; height: 11px; }
.feat-row .fr-rc-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--text-tertiary);
}
.feat-row .fr-rc-dot.green { background: var(--success-solid); }
.feat-row .fr-rc-dot.blue { background: var(--primary-01); }
.feat-row .fr-col { min-width: 0; }
.feat-row .fr-col .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-tertiary); margin-bottom: 4px; }
.feat-row .fr-col .v { font-size: 12px; color: var(--text-primary); letter-spacing: -0.015em; font-weight: 500; }
.feat-row .fr-progress { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feat-row .fr-progress .row { display: flex; align-items: center; justify-content: space-between; }
.feat-row .fr-progress .n { font-size: 12px; color: var(--text-primary); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.feat-row .fr-progress .m { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.feat-row .fr-owner {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.feat-row .fr-owner .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.feat-row .fr-blocker {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(255,56,28,0.10);
color: var(--danger-solid);
font-size: 11px; font-weight: 700; letter-spacing: -0.02em;
}
/* AI actions are secondary — no gradient border. A single icon accent is enough. */
.ai-suggest-btn { font-weight: 500; color: var(--text-secondary); }
.ai-suggest-btn:hover { color: var(--text-primary); }
/* Quiet AI banner (no gradient, no sparkles, no color glow) */
.feat-ai-quiet {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px; align-items: center;
padding: 12px 16px;
border-radius: var(--r-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
border-left: 3px solid var(--text-tertiary);
}
.feat-ai-quiet .g {
width: 28px; height: 28px; border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-tertiary);
}
.feat-ai-quiet .body .t { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.feat-ai-quiet .body .s { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.5; }
/* AI suggestion small footer */
.feat-ai-card {
padding: 14px 18px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
border: 1.5px solid transparent;
background:
linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
linear-gradient(120deg, rgba(245,36,149,0.25), rgba(42,133,255,0.25)) border-box;
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px; align-items: center;
}
.feat-ai-card .g {
width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center;
background: linear-gradient(135deg, rgba(245,36,149,0.15), rgba(42,133,255,0.15));
color: var(--accent);
}
.feat-ai-card .t { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.feat-ai-card .s { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 2px; }
/* =========================================================
FEATURE DETAIL WORKSPACE
========================================================= */
/* Header */
.fd-header {
padding: 20px 24px 18px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
position: relative;
overflow: hidden;
}
.fd-header::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(50% 100% at 100% 0%, rgba(42,133,255,0.06), transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.fd-header > * { position: relative; }
.fd-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em;
padding: 4px 8px 4px 4px; border-radius: 8px;
}
.fd-back:hover { color: var(--text-secondary); background: var(--bg-depth); }
.fd-titlerow { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.fd-title {
margin: 0;
font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
}
.fd-code {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-tertiary); background: var(--bg-inset);
border-radius: 6px; padding: 2px 7px; letter-spacing: 0;
}
.fd-priority {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
padding: 3px 7px; border-radius: 5px;
letter-spacing: 0;
}
.fd-priority.P0 { background: rgba(255,56,28,0.10); color: var(--danger-solid); }
.fd-priority.P1 { background: rgba(255,157,52,0.10); color: var(--warning-solid); }
.fd-priority.P2 { background: rgba(123,123,123,0.12); color: var(--text-tertiary); }
.fd-purpose {
font-size: 15px; letter-spacing: -0.015em; line-height: 1.55; color: var(--text-primary);
margin: 10px 0 0; max-width: 78ch;
}
.fd-meta {
display: flex; align-items: center; gap: 22px;
margin-top: 18px;
flex-wrap: wrap;
}
.fd-meta .m {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em;
}
.fd-meta .m b { color: var(--text-primary); font-weight: 600; }
.fd-meta .divider { width: 1px; height: 12px; background: var(--stroke-subtle); }
/* Feature-Stage badge — showcases the Feature ↔ Stage connection */
.fs-badge {
display: inline-flex; align-items: center; gap: 10px;
padding: 6px 12px 6px 8px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(42,133,255,0.06), rgba(42,133,255,0.02));
border: 1.5px solid rgba(42,133,255,0.20);
cursor: pointer;
transition: box-shadow 150ms;
}
.fs-badge:hover { box-shadow: var(--shadow-widget); }
.fs-badge .stage-glyph {
width: 22px; height: 22px; border-radius: 6px;
background: linear-gradient(180deg,#5AA0FF,var(--primary-01));
color: white;
display: grid; place-items: center;
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
letter-spacing: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.fs-badge .txt {
font-size: 11.5px; letter-spacing: -0.015em; color: var(--primary-01);
font-weight: 600;
}
.fs-badge .txt b { color: var(--text-primary); }
/* Body layout */
.fd-body {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 380px);
gap: 16px;
margin-top: 16px;
align-items: flex-start;
}
.fd-main { display: flex; flex-direction: column; gap: 16px; }
.fd-side { display: flex; flex-direction: column; gap: 12px; }
/* Overview card (Why / Problem / Outcome / Scope / OOS) */
.fd-ov {
padding: 22px 24px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
}
.fd-ov h3 {
margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
display: flex; align-items: center; gap: 10px;
}
.fd-ov .lbl {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.fd-ov .p {
font-size: 14.5px; letter-spacing: -0.015em; line-height: 1.6;
color: var(--text-primary);
margin: 6px 0 0; max-width: 78ch;
}
.fd-ov-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--stroke-subtle);
}
.fd-ov-grid .scope-list {
margin: 8px 0 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 8px;
}
.fd-ov-grid .scope-list li {
display: flex; gap: 10px; font-size: 13.5px; letter-spacing: -0.015em; line-height: 1.5;
color: var(--text-primary);
}
.fd-ov-grid .scope-list.oos li { color: var(--text-secondary); }
.fd-ov-grid .scope-list .tick {
color: var(--success-solid); flex: none; margin-top: 3px;
}
.fd-ov-grid .scope-list.oos .tick { color: var(--text-tertiary); }
/* Requirements table */
.fd-card {
padding: 18px 20px 20px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.fd-card-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.fd-card-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 10px; }
.fd-card-head .link { font-size: 12px; color: var(--text-secondary); padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.fd-card-head .link:hover { color: var(--text-primary); background: var(--bg-depth); }
.fd-card-head .desc { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.req-row {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) 60px 110px 100px;
gap: 12px;
align-items: center;
padding: 12px 6px;
border-radius: 8px;
}
.req-row + .req-row { border-top: 1px solid var(--stroke-subtle); border-radius: 0; }
.req-row:hover { background: var(--bg-depth); }
.req-row .r-id {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
color: var(--text-tertiary); letter-spacing: 0;
padding: 2px 7px; border-radius: 5px; background: var(--bg-app);
min-width: 40px; text-align: center;
}
.req-row .r-text {
font-size: 13.5px; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.5;
}
.req-row .r-priority {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
padding: 2px 6px; border-radius: 5px; letter-spacing: 0; text-align: center;
}
.req-row .r-priority.P0 { background: rgba(255,56,28,0.10); color: var(--danger-solid); }
.req-row .r-priority.P1 { background: rgba(255,157,52,0.10); color: var(--warning-solid); }
.req-row .r-priority.P2 { background: rgba(123,123,123,0.12); color: var(--text-tertiary); }
.req-row .r-owner { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
/* Acceptance criteria list */
.acc-list { display: flex; flex-direction: column; gap: 6px; }
.acc-item {
display: grid; grid-template-columns: 20px 1fr; gap: 12px;
align-items: flex-start;
padding: 8px 4px;
}
.acc-item + .acc-item { border-top: 1px solid var(--stroke-subtle); }
.acc-item .cb {
width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid var(--stroke-stroke2);
background: var(--bg-app);
margin-top: 2px;
position: relative; flex: none;
}
.acc-item.done .cb {
background: var(--success-solid); border-color: transparent;
}
.acc-item.done .cb::after {
content: "✓"; color: white; font-size: 11px; font-weight: 800;
position: absolute; inset: 0; display: grid; place-items: center;
}
.acc-item .t { font-size: 13.5px; letter-spacing: -0.015em; line-height: 1.5; color: var(--text-primary); }
.acc-item.done .t { color: var(--text-tertiary); }
/* Success signal quote */
.success-signal {
margin-top: 14px;
padding: 16px 18px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(0,166,86,0.06), rgba(0,166,86,0.02));
border: 1.5px solid rgba(0,166,86,0.20);
display: grid; grid-template-columns: 30px 1fr; gap: 12px;
}
.success-signal .g {
width: 30px; height: 30px; border-radius: 8px;
background: var(--success-solid); color: white;
display: grid; place-items: center;
flex: none;
}
.success-signal .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--success-solid); }
.success-signal .v { font-size: 13.5px; letter-spacing: -0.015em; color: var(--text-primary); line-height: 1.55; margin-top: 2px; }
/* Related design mocks (feature detail specific) */
.fd-design-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
/* Related dev chips */
.fd-dev-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.fd-dev-tile {
display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center;
padding: 12px 14px; border-radius: 12px; background: var(--bg-app);
}
.fd-dev-tile .g {
width: 34px; height: 34px; border-radius: 10px;
display: grid; place-items: center;
color: var(--shade-02);
}
.fd-dev-tile .g.api { background: var(--secondary-03); }
.fd-dev-tile .g.data { background: var(--secondary-04); }
.fd-dev-tile .g.front { background: var(--secondary-02); }
.fd-dev-tile .g.int { background: var(--secondary-01); }
.fd-dev-tile .n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--text-primary); }
.fd-dev-tile .m { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
/* Related docs */
.fd-docs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
/* Activity — reuses .act-item + .act-day-label from styles above */
/* Right rail: dependency card */
.dep-card { padding: 16px 18px 18px; background: var(--bg-surface); border-radius: var(--r-2xl); box-shadow: var(--shadow-widget); }
.dep-list { display: flex; flex-direction: column; gap: 6px; }
.dep-item {
display: grid;
grid-template-columns: 24px 1fr auto;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 10px;
background: var(--bg-app);
cursor: pointer;
}
.dep-item:hover { background: var(--bg-depth); }
.dep-item .g {
width: 22px; height: 22px; border-radius: 6px;
display: grid; place-items: center;
background: var(--bg-surface);
color: var(--text-tertiary);
}
.dep-item.blocks .g { background: rgba(42,133,255,0.10); color: var(--primary-01); }
.dep-item.depson .g { background: rgba(255,157,52,0.10); color: var(--warning-solid); }
.dep-item .n { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-sub {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
padding: 10px 4px 6px;
}
/* =====================================================================
PHASE 8 — Charts + Missions + Stage v2 + Drawer
===================================================================== */
/* ---- Charts: shared base ---- */
.chart { display: block; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* BarPair — labels + legend are outside the svg */
.chart-barpair { width: 100%; height: auto; }
.chart-legend {
display: inline-flex; align-items: center; gap: 12px;
font-size: 11px; letter-spacing: -0.02em; color: var(--text-tertiary);
}
.chart-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw {
width: 12px; height: 6px; border-radius: 2px;
}
/* StackedProgressList */
.spl { display: flex; flex-direction: column; gap: 12px; }
.spl.spl-dense { gap: 9px; }
.spl-row {
display: grid;
grid-template-columns: 148px 1fr 44px;
gap: 12px;
align-items: center;
}
.spl-dense .spl-row { grid-template-columns: 130px 1fr 40px; gap: 10px; }
.spl-label {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 500; letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spl-dense .spl-label { font-size: 12px; }
.spl-track {
height: 6px; border-radius: 999px;
background: var(--chart-min);
overflow: hidden;
position: relative;
}
.spl-fill {
height: 100%; border-radius: 999px;
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.spl-value {
font-size: 12px; font-weight: 600; color: var(--text-primary);
text-align: right;
}
/* HorizontalStages — the shared journey glyph strip.
Used by Home Momentum, Overview, Stage Workspace. */
.hstages {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr auto;
align-items: center;
gap: 0;
width: 100%;
}
.hs-node {
display: grid; grid-template-columns: 32px 1fr; gap: 10px;
align-items: center;
padding: 8px 10px 8px 6px;
border-radius: 12px;
background: transparent;
cursor: pointer;
transition: background 150ms;
min-width: 0;
text-align: left;
}
.hs-node:hover { background: var(--bg-depth); }
.hs-node.hs-active {
background: rgba(42,133,255,0.06);
outline: 1px solid rgba(42,133,255,0.20);
}
.hs-glyph {
width: 32px; height: 32px; border-radius: 10px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-tertiary);
border: 1px solid var(--stroke-subtle);
transition: transform 200ms, box-shadow 200ms;
}
.hs-node.hs-done .hs-glyph {
background: var(--success-solid);
color: white;
border-color: rgba(0,166,86,0.35);
box-shadow: 0 2px 6px rgba(0,166,86,0.18), inset 0 1px 0 rgba(255,255,255,0.28);
}
.hs-node.hs-now .hs-glyph {
background: var(--primary-01);
color: white;
border-color: rgba(42,133,255,0.45);
box-shadow: 0 2px 10px rgba(42,133,255,0.30), inset 0 1px 0 rgba(255,255,255,0.28);
}
.hs-node.hs-now .hs-dot { width: 10px; height: 10px; border-radius: 50%; background: white; }
.hs-node.hs-upcoming .hs-hint { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.hs-node.hs-blocked .hs-glyph {
background: rgba(255,56,28,0.10);
color: var(--danger-solid);
border-color: rgba(255,56,28,0.30);
}
.hs-node.hs-blocked .hs-block {
width: 10px; height: 10px; background: var(--danger-solid);
transform: rotate(45deg);
border-radius: 2px;
}
.hs-text { min-width: 0; }
.hs-num {
font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
}
.hs-node.hs-now .hs-num { color: var(--primary-01); }
.hs-name {
font-size: 12px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 1px;
}
.hs-node.hs-upcoming .hs-name { color: var(--text-secondary); font-weight: 500; }
.hs-conn {
height: 2px; min-width: 24px; flex: 1;
border-radius: 2px;
align-self: center;
}
.hs-conn-done { background: var(--primary-02); }
.hs-conn-toNow { background: linear-gradient(90deg, var(--primary-02) 30%, var(--primary-01)); }
.hs-conn-up {
background-image: linear-gradient(90deg, var(--stroke-subtle) 60%, transparent 40%);
background-size: 10px 2px; background-repeat: repeat-x;
}
/* dense variant for constrained widths (Home momentum) */
.hstages-dense .hs-node { padding: 6px 8px 6px 4px; grid-template-columns: 26px 1fr; gap: 8px; }
.hstages-dense .hs-glyph { width: 26px; height: 26px; border-radius: 8px; }
.hstages-dense .hs-num { font-size: 9px; }
.hstages-dense .hs-name { font-size: 11.5px; }
/* Donut chart center label */
.chart-donut-center {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
gap: 1px;
color: var(--text-primary);
font-weight: 700; letter-spacing: -0.02em;
}
.chart-donut-center .v { font-size: 15px; }
.chart-donut-center .u { font-size: 10px; color: var(--text-tertiary); margin-left: 1px; }
.chart-donut-center .l {
position: absolute; bottom: -14px;
font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 600; color: var(--text-tertiary);
}
/* ---- Project Momentum panel (shared shell used on Home + Overview) ---- */
.momentum {
padding: 20px 22px 22px;
border-radius: var(--r-3xl);
background: var(--bg-surface);
box-shadow: var(--shadow-depth);
}
.momentum-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6px;
}
.momentum-head h3 {
margin: 0;
font-size: 16px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
display: inline-flex; align-items: center; gap: 8px;
}
.momentum-head .m-sub {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.momentum-state {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: -0.015em;
}
.momentum-state.on-track { background: rgba(0,166,86,0.08); color: var(--label-green); }
.momentum-state.slipping { background: rgba(255,106,85,0.10); color: var(--label-red); }
.momentum-state.ahead { background: rgba(42,133,255,0.08); color: var(--label-blue); }
.momentum-state .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.momentum-journey {
padding: 14px 0 6px;
border-bottom: 1px solid var(--stroke-subtle);
}
.momentum-body {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px;
margin-top: 16px;
}
.momentum-block h4 {
margin: 0 0 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
display: flex; align-items: center; justify-content: space-between;
}
.momentum-block h4 .h4-meta {
font-size: 10.5px; color: var(--text-tertiary);
text-transform: none; letter-spacing: -0.02em; font-weight: 500;
}
/* ---- Stage Workspace v2 ---- */
.sw2 { display: flex; flex-direction: column; gap: 16px; }
/* Header band: journey + status pill + progress */
.sw2-head {
padding: 20px 22px 20px;
border-radius: var(--r-3xl);
background: var(--bg-surface);
box-shadow: var(--shadow-depth);
}
.sw2-head-top {
display: flex; align-items: center; justify-content: space-between;
gap: 20px;
margin-bottom: 6px;
}
.sw2-here {
font-size: 12px; letter-spacing: -0.02em; color: var(--text-tertiary);
text-transform: uppercase; font-weight: 700; letter-spacing: 0.08em;
}
.sw2-title {
font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary);
margin-top: 4px;
display: inline-flex; align-items: baseline; gap: 10px;
}
.sw2-title .num {
font-size: 13px; font-weight: 700; color: var(--text-tertiary);
font-family: var(--font-mono);
}
.sw2-goal {
font-size: 14px; color: var(--text-secondary); letter-spacing: -0.015em;
line-height: 1.5;
margin-top: 6px;
max-width: 68ch;
}
.sw2-hdr-right {
display: flex; align-items: center; gap: 16px;
}
.sw2-hdr-right .ready-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 10px 6px 8px;
border-radius: 999px;
font-size: 12px; font-weight: 600; letter-spacing: -0.015em;
}
.sw2-hdr-right .ready-pill.ready { background: rgba(0,166,86,0.08); color: var(--label-green); }
.sw2-hdr-right .ready-pill.not-ready { background: var(--bg-app); color: var(--text-secondary); }
.sw2-hdr-right .ready-pill .glyph {
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center; background: currentColor;
}
.sw2-hdr-right .ready-pill .glyph svg { color: white; }
.sw2-journey {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--stroke-subtle);
}
/* Priorities row: 3 attention cards */
.sw2-priorities {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.sw2-prio {
padding: 14px 16px;
border-radius: var(--r-xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
min-height: 88px;
}
.sw2-prio-eyebrow {
display: flex; align-items: center; gap: 6px;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.sw2-prio-eyebrow .n {
padding: 1px 6px; border-radius: 999px; background: var(--bg-app);
color: var(--text-secondary);
font-family: var(--font-mono); font-size: 10px;
}
.sw2-prio.tone-red .sw2-prio-eyebrow { color: var(--label-red); }
.sw2-prio.tone-red .n { background: rgba(255,106,85,0.08); color: var(--label-red); }
.sw2-prio.tone-yellow .sw2-prio-eyebrow { color: var(--label-yellow); }
.sw2-prio.tone-yellow .n { background: rgba(239,157,14,0.10); color: var(--label-yellow); }
.sw2-prio.tone-blue .sw2-prio-eyebrow { color: var(--label-blue); }
.sw2-prio.tone-blue .n { background: rgba(42,133,255,0.08); color: var(--label-blue); }
.sw2-prio.tone-green .sw2-prio-eyebrow { color: var(--label-green); }
.sw2-prio.tone-green .n { background: rgba(0,166,86,0.08); color: var(--label-green); }
.sw2-prio-list { display: flex; flex-direction: column; gap: 6px; }
.sw2-prio-item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-primary); letter-spacing: -0.015em;
padding: 3px 0;
line-height: 1.4;
}
.sw2-prio-item .b {
font-weight: 600;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; min-width: 0;
}
.sw2-prio-item .m {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
flex: none;
}
.sw2-prio-empty {
font-size: 12.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
padding: 6px 0;
font-style: italic;
}
/* Mission grid */
.sw2-mission-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (min-width: 1400px) {
.sw2-mission-grid { grid-template-columns: repeat(2, 1fr); }
}
.mission-card {
padding: 16px 18px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
cursor: pointer;
transition: box-shadow 180ms, transform 180ms;
position: relative;
}
.mission-card:hover { box-shadow: var(--shadow-depth); }
.mission-card.blocked { box-shadow: var(--shadow-widget), inset 3px 0 0 var(--danger-solid); }
.mission-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
}
.mission-icon {
width: 36px; height: 36px; border-radius: 10px;
display: grid; place-items: center;
flex: none;
}
.mission-title-block { flex: 1; min-width: 0; }
.mission-title {
font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mission-owner {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 2px;
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.mission-status { flex: none; }
.mission-progress {
display: grid; grid-template-columns: 1fr auto;
gap: 12px; align-items: center;
margin: 12px 0;
}
.mission-progress .p-num { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); font-weight: 700; }
.mission-progress .p-bar {
height: 4px; border-radius: 999px; background: var(--chart-min);
overflow: hidden;
}
.mission-progress .p-fill {
height: 100%; border-radius: 999px;
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mission-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 10px;
border-top: 1px solid var(--stroke-subtle);
}
.mission-stat {
display: flex; flex-direction: column; gap: 2px;
}
.mission-stat .lbl {
font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
}
.mission-stat .val {
font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.015em;
font-family: var(--font-mono);
}
.mission-stat .val .tot { color: var(--text-tertiary); font-weight: 500; font-size: 11px; margin-left: 2px; }
.mission-stat.attention .val { color: var(--danger-solid); }
/* Stage requirements panel */
.sw2-req {
padding: 20px 22px;
border-radius: var(--r-3xl);
background: var(--bg-surface);
box-shadow: var(--shadow-depth);
}
.sw2-req-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.sw2-req-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.sw2-req-body { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.sw2-req-lists { display: flex; flex-direction: column; gap: 16px; }
.sw2-req-group h4 {
margin: 0 0 8px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
display: inline-flex; gap: 6px; align-items: center;
}
.sw2-req-list { display: flex; flex-direction: column; gap: 4px; }
.sw2-req-row {
display: grid; grid-template-columns: 18px 1fr auto;
gap: 10px; align-items: center;
padding: 8px 10px;
border-radius: 10px;
transition: background 150ms;
}
.sw2-req-row:hover { background: var(--bg-depth); }
.sw2-req-row .mark {
width: 18px; height: 18px; border-radius: 5px;
display: grid; place-items: center;
}
.sw2-req-row.done .mark { background: var(--success-solid); color: white; }
.sw2-req-row.pending .mark { background: var(--bg-app); border: 1.5px solid var(--stroke-subtle); }
.sw2-req-row .t {
font-size: 13px; letter-spacing: -0.015em; color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw2-req-row.done .t { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.sw2-req-row .m {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
flex: none;
}
/* Completion state card */
.sw2-complete {
border-radius: var(--r-3xl);
padding: 18px 22px;
display: flex; align-items: center; gap: 18px;
transition: background 300ms, box-shadow 300ms;
}
.sw2-complete.not-ready {
background: var(--bg-app);
color: var(--text-secondary);
}
.sw2-complete.ready {
background: linear-gradient(180deg, rgba(0,166,86,0.06), rgba(0,166,86,0.03));
box-shadow: var(--shadow-depth), inset 0 0 0 1px rgba(0,166,86,0.16);
}
.sw2-complete.complete {
background: linear-gradient(180deg, rgba(0,166,86,0.10), rgba(0,166,86,0.04));
box-shadow: var(--shadow-depth), inset 0 0 0 1px rgba(0,166,86,0.22);
}
.sw2-complete-glyph {
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: var(--bg-surface);
color: var(--text-tertiary);
box-shadow: var(--shadow-widget);
transition: background 300ms, color 300ms;
}
.sw2-complete.ready .sw2-complete-glyph,
.sw2-complete.complete .sw2-complete-glyph {
background: var(--success-solid);
color: white;
animation: pulseReady 1.8s ease-in-out infinite;
}
@keyframes pulseReady {
0%, 100% { box-shadow: var(--shadow-widget), 0 0 0 0 rgba(0,166,86,0.30); }
50% { box-shadow: var(--shadow-widget), 0 0 0 8px rgba(0,166,86,0); }
}
.sw2-complete.complete .sw2-complete-glyph { animation: none; }
.sw2-complete-text { flex: 1; }
.sw2-complete-text .t { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.sw2-complete-text .s { font-size: 12.5px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 2px; }
.sw2-complete .btn-complete {
padding: 10px 18px;
border-radius: 999px;
background: var(--text-primary);
color: white;
font-size: 13px; font-weight: 600; letter-spacing: -0.015em;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-widget);
transition: transform 150ms, box-shadow 150ms, opacity 200ms;
}
.sw2-complete.not-ready .btn-complete { opacity: 0.45; cursor: not-allowed; }
.sw2-complete.ready .btn-complete {
background: linear-gradient(180deg, #00A656, #009050);
}
.sw2-complete.ready .btn-complete:hover { transform: translateY(-1px); box-shadow: var(--shadow-depth); }
/* Next stage — unlocking */
.next-unlock {
padding: 18px 22px;
border-radius: var(--r-3xl);
background: var(--bg-surface);
box-shadow: var(--shadow-depth);
display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
align-items: center;
transition: box-shadow 300ms;
}
.next-unlock.unlocked {
box-shadow: var(--shadow-depth), inset 0 0 0 1px rgba(42,133,255,0.16);
animation: unlockGlow 1.2s ease-out;
}
@keyframes unlockGlow {
0% { box-shadow: var(--shadow-depth), 0 0 0 6px rgba(42,133,255,0.18), inset 0 0 0 1px rgba(42,133,255,0.16); }
100% { box-shadow: var(--shadow-depth), 0 0 0 0 rgba(42,133,255,0), inset 0 0 0 1px rgba(42,133,255,0.16); }
}
.next-unlock-icon {
width: 44px; height: 44px; border-radius: 12px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-tertiary);
transition: background 300ms, color 300ms;
}
.next-unlock.unlocked .next-unlock-icon {
background: var(--primary-01);
color: white;
box-shadow: 0 4px 12px rgba(42,133,255,0.28);
}
.next-unlock .t { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-tertiary); }
.next-unlock .t .chip {
margin-left: 8px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(42,133,255,0.10); color: var(--primary-01);
font-size: 9.5px;
}
.next-unlock .n { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); margin-top: 4px; }
.next-unlock .m { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
/* Commercial context on the stage */
.sw2-commercial {
padding: 16px 20px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
display: grid; grid-template-columns: 1fr 220px auto; gap: 20px;
align-items: center;
}
.sw2-commercial .eyebrow {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
}
.sw2-commercial .ttl { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); margin-top: 3px; }
.sw2-commercial .sub { font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
/* ---- Mission Drawer ---- */
.mission-drawer-backdrop {
position: fixed; inset: 0;
background: rgba(16, 16, 16, 0.20);
backdrop-filter: blur(2px);
z-index: 500;
animation: fadeIn 200ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.mission-drawer {
position: fixed;
top: 0; right: 0;
width: 500px;
max-width: calc(100vw - 60px);
height: 100vh;
background: var(--bg-surface);
box-shadow: -12px 0 40px rgba(0,0,0,0.10), -2px 0 8px rgba(0,0,0,0.06);
z-index: 501;
display: flex; flex-direction: column;
animation: slideInR 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes slideInR { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mission-drawer-head {
padding: 22px 22px 12px;
border-bottom: 1px solid var(--stroke-subtle);
display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
align-items: flex-start;
}
.mission-drawer-head .mission-icon { width: 44px; height: 44px; border-radius: 12px; }
.mission-drawer-head .title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.mission-drawer-head .subt { font-size: 13px; color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.5; margin-top: 4px; max-width: 40ch; }
.mission-drawer-head .close-btn {
width: 32px; height: 32px; border-radius: 10px;
display: grid; place-items: center;
color: var(--text-tertiary); background: transparent;
transition: background 150ms, color 150ms;
}
.mission-drawer-head .close-btn:hover { background: var(--bg-depth); color: var(--text-primary); }
.mission-drawer-meta {
padding: 12px 22px 16px;
display: flex; align-items: center; gap: 16px;
border-bottom: 1px solid var(--stroke-subtle);
}
.mission-drawer-meta .grow { flex: 1; }
.mission-drawer-meta .p-bar {
height: 4px; border-radius: 999px; background: var(--chart-min);
overflow: hidden;
}
.mission-drawer-meta .p-fill { height: 100%; border-radius: 999px; }
.mission-drawer-meta .owner { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.mission-drawer-tabs {
padding: 6px 22px 0;
display: flex; gap: 6px;
border-bottom: 1px solid var(--stroke-subtle);
}
.mission-drawer-tab {
padding: 10px 12px 12px;
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-tertiary);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: color 150ms, border-color 150ms;
}
.mission-drawer-tab:hover { color: var(--text-primary); }
.mission-drawer-tab.active { color: var(--text-primary); border-bottom-color: var(--primary-01); }
.mission-drawer-tab .n {
margin-left: 6px; padding: 1px 6px; border-radius: 999px;
background: var(--bg-app); color: var(--text-tertiary);
font-family: var(--font-mono); font-size: 10px; font-weight: 500;
}
.mission-drawer-tab.active .n { background: rgba(42,133,255,0.08); color: var(--primary-01); }
.mission-drawer-body {
padding: 16px 22px 20px;
overflow-y: auto;
flex: 1;
display: flex; flex-direction: column; gap: 16px;
}
/* checklist rows inside drawer */
.md-check {
display: grid; grid-template-columns: 20px 1fr auto; gap: 10px;
align-items: center;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-app);
}
.md-check:hover { background: var(--bg-depth); }
.md-check .mark {
width: 20px; height: 20px; border-radius: 6px;
display: grid; place-items: center;
}
.md-check.done .mark { background: var(--success-solid); color: white; }
.md-check.pending .mark { background: white; border: 1.5px solid var(--stroke-subtle); }
.md-check .txt {
font-size: 13px; letter-spacing: -0.015em; color: var(--text-primary);
line-height: 1.4;
}
.md-check.done .txt { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.md-check .req-star {
color: var(--danger-solid); margin-left: 4px; font-size: 10px;
}
.md-check .note {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 3px;
display: block;
}
.md-check .meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); flex: none; }
.md-check .attach {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 6px; border-radius: 6px;
background: var(--bg-surface);
font-size: 10.5px; color: var(--text-secondary); font-weight: 500;
box-shadow: 0 0 0 1px var(--stroke-subtle);
}
/* deliverable card in drawer */
.md-deliv {
padding: 12px 14px;
border-radius: 14px;
background: var(--bg-app);
display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center;
}
.md-deliv .prev {
width: 48px; height: 48px; border-radius: 10px;
background: var(--bg-surface);
box-shadow: 0 0 0 1px var(--stroke-subtle);
display: grid; place-items: center;
color: var(--text-tertiary);
}
.md-deliv .n { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.md-deliv .m { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; display: flex; gap: 8px; align-items: center; }
/* attachment card */
.md-att-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.md-att {
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-app);
display: flex; gap: 10px; align-items: center;
}
.md-att .g {
width: 32px; height: 32px; border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-surface); color: var(--text-tertiary);
box-shadow: 0 0 0 1px var(--stroke-subtle);
flex: none;
}
.md-att .n { font-size: 12.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-att .m { font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 1px; }
.mission-drawer-foot {
padding: 12px 22px;
border-top: 1px solid var(--stroke-subtle);
display: flex; align-items: center; justify-content: space-between;
background: var(--bg-highlight);
}
.mission-drawer-foot .open-full {
font-size: 12px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-secondary);
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: 8px;
}
.mission-drawer-foot .open-full:hover { background: var(--bg-depth); color: var(--text-primary); }
/* ---- Feature status distribution (Phase 9) ---- */
.feat-dist {
margin-top: 8px;
padding: 12px 16px;
background: var(--bg-surface);
border-radius: var(--r-md);
box-shadow: var(--shadow-widget);
}
.feat-dist-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.feat-dist-head .fd-eyebrow {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.feat-dist-head .fd-total {
font-size: 11px; font-weight: 600; color: var(--text-secondary);
}
.feat-dist-bar {
display: flex;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: var(--bg-app);
}
.feat-dist-seg {
border-radius: 0;
transition: opacity 150ms, transform 150ms;
min-width: 6px;
}
.feat-dist-seg:hover { opacity: 0.85; }
.feat-dist-seg.active { transform: scaleY(1.6); border-radius: 3px; }
/* ---- Feature Detail · Readiness composition (Phase 9) ---- */
.fd-readiness {
padding: 18px 20px 20px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-depth);
}
.fdr-head {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--stroke-subtle);
}
.fdr-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.fdr-gate {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px; font-weight: 700; letter-spacing: -0.015em;
}
.fdr-gate .fdr-gate-note { font-weight: 500; opacity: 0.85; margin-left: 2px; }
.fdr-gate-green { background: rgba(0,166,86,0.10); color: var(--label-green); }
.fdr-gate-yellow { background: rgba(239,157,14,0.10); color: var(--label-yellow); }
.fdr-gate-red { background: rgba(255,56,28,0.08); color: var(--danger-solid); }
.fdr-gate-gray { background: var(--bg-app); color: var(--text-secondary); }
.fdr-check {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 8px;
font-size: 12px; font-weight: 500; letter-spacing: -0.015em;
color: var(--text-secondary);
background: transparent;
transition: background 150ms, color 150ms;
}
.fdr-check:hover { background: var(--bg-depth); color: var(--text-primary); }
.fdr-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.fdr-pillar {
display: block;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--bg-app);
transition: background 150ms, box-shadow 200ms;
cursor: pointer;
}
.fdr-pillar:hover { background: var(--bg-highlight); box-shadow: var(--shadow-widget); }
.fdr-pillar.fdr-state-ready { box-shadow: inset 2px 0 0 var(--success-solid); }
.fdr-pillar.fdr-state-in-review { box-shadow: inset 2px 0 0 var(--primary-01); }
.fdr-pillar.fdr-state-attention { box-shadow: inset 2px 0 0 var(--warning-solid); }
.fdr-pillar.fdr-state-blocked { box-shadow: inset 2px 0 0 var(--danger-solid); }
.fdr-pillar.fdr-state-ready:hover { box-shadow: inset 2px 0 0 var(--success-solid), var(--shadow-widget); }
.fdr-pillar.fdr-state-in-review:hover { box-shadow: inset 2px 0 0 var(--primary-01), var(--shadow-widget); }
.fdr-pillar.fdr-state-attention:hover { box-shadow: inset 2px 0 0 var(--warning-solid), var(--shadow-widget); }
.fdr-pillar.fdr-state-blocked:hover { box-shadow: inset 2px 0 0 var(--danger-solid), var(--shadow-widget); }
.fdr-pillar-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.fdr-pillar-icon {
width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center;
flex: none;
}
.fdr-pillar-title-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fdr-pillar-title { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.fdr-pillar-meter {
display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
margin-bottom: 10px;
}
.fdr-meter-track {
height: 4px; border-radius: 999px; background: var(--chart-min);
overflow: hidden;
}
.fdr-meter-fill { height: 100%; border-radius: 999px; transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.fdr-meter-num { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.fdr-pillar-summary {
font-size: 12px; letter-spacing: -0.015em; color: var(--text-secondary);
line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Readiness previews strip */
.fdr-previews {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 14px;
}
.fdr-prev {
display: block;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: transform 180ms, box-shadow 180ms;
background: var(--bg-app);
}
.fdr-prev:hover { transform: translateY(-1px); box-shadow: var(--shadow-widget); }
.fdr-prev-visual {
position: relative;
aspect-ratio: 220 / 120;
overflow: hidden;
}
.fdr-prev-badge {
position: absolute; top: 8px; left: 8px;
padding: 2px 7px;
background: rgba(255,255,255,0.9);
border-radius: 999px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.fdr-prev-meta { padding: 8px 10px 10px; }
.fdr-prev-title {
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fdr-prev-sub {
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Readiness AI panel */
.fdr-ai {
margin-top: 14px;
padding: 14px 16px;
border-radius: var(--r-md);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
border-left: 3px solid var(--primary-01);
}
.fdr-ai-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fdr-ai-title { font-size: 13px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.fdr-ai-close { padding: 4px 6px; border-radius: 8px; color: var(--text-tertiary); cursor: pointer; }
.fdr-ai-close:hover { background: var(--bg-depth); color: var(--text-primary); }
.fdr-ai-list { display: flex; flex-direction: column; gap: 6px; }
.fdr-ai-row {
display: grid; grid-template-columns: 14px 1fr; gap: 8px;
align-items: flex-start;
font-size: 12.5px; letter-spacing: -0.015em; color: var(--text-primary);
line-height: 1.45;
}
.fdr-ai-row.done > svg { color: var(--success-solid); margin-top: 2px; }
.fdr-ai-row.miss > svg { color: var(--warning-solid); margin-top: 2px; }
.fdr-ai-row.miss:last-of-type > svg { color: var(--danger-solid); }
.fdr-ai-row b { font-weight: 700; }
.fdr-ai-foot {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--stroke-subtle);
font-size: 12px; letter-spacing: -0.02em; color: var(--text-secondary);
}
.fdr-ai-foot b { color: var(--text-primary); font-weight: 700; }
/* Attachments strip (Feature Detail) */
.fd-attach {
padding: 18px 20px 20px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.fd-attach-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.fd-attach-card {
padding: 10px 12px 12px;
border-radius: 14px;
background: var(--bg-app);
display: flex; flex-direction: column; gap: 10px;
transition: background 150ms, box-shadow 200ms, transform 180ms;
cursor: pointer;
}
.fd-attach-card:hover { background: var(--bg-highlight); box-shadow: var(--shadow-widget); transform: translateY(-1px); }
.fd-attach-preview {
aspect-ratio: 220 / 84;
border-radius: 10px;
display: grid; place-items: center;
position: relative;
}
.fd-attach-kind {
position: absolute; top: 6px; left: 8px;
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
background: rgba(255,255,255,0.8);
padding: 2px 6px; border-radius: 999px;
color: inherit;
}
.fd-attach-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fd-attach-name {
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-attach-sub {
display: flex; align-items: center; gap: 6px;
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-attach-sub .fd-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--text-muted); flex: none; }
/* Mission drawer · Linked tab (Phase 12) */
.md-linked-group + .md-linked-group { margin-top: 6px; }
.md-linked-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 6px 4px 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.md-linked-open {
font-size: 10.5px; font-weight: 500; color: var(--text-secondary);
text-transform: none; letter-spacing: -0.02em;
}
.md-linked-open:hover { color: var(--text-primary); }
.md-linked-row {
display: grid;
grid-template-columns: 26px 1fr auto;
gap: 10px; align-items: center;
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-app);
transition: background 150ms;
margin-bottom: 4px;
}
.md-linked-row:hover { background: var(--bg-highlight); }
.md-linked-icon {
width: 26px; height: 26px;
border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-surface);
color: var(--text-tertiary);
box-shadow: 0 0 0 1px var(--stroke-subtle);
flex: none;
}
.md-linked-body { min-width: 0; }
.md-linked-title {
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-linked-sub {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 2px;
}
.md-linked-req {
color: var(--danger-solid);
font-weight: 600;
}
/* =====================================================================
Research Workspace v2 (Phase 13) — editorial + evidence-driven
===================================================================== */
.rv2 { padding: 20px 24px 32px; }
/* Header + view tabs */
.rv2-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--stroke-subtle);
}
.rv2-head-title h2 {
margin: 0;
font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.1;
}
.rv2-head-sub {
display: block;
margin-top: 4px;
font-size: 12.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.rv2-tabs { display: inline-flex; gap: 4px; }
.rv2-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 12px;
background: transparent;
border-radius: 8px;
color: var(--text-secondary);
font-size: 13px; font-weight: 500; letter-spacing: -0.015em;
transition: color 150ms, background 150ms;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 8px 4px 10px;
margin: 0 8px;
}
.rv2-tab:hover { color: var(--text-primary); }
.rv2-tab.active {
color: var(--text-primary);
font-weight: 600;
border-bottom-color: var(--primary-01);
}
.rv2-tab-count {
padding: 1px 6px;
border-radius: 999px;
background: var(--bg-app);
font-size: 10.5px;
color: var(--text-tertiary);
font-weight: 600;
}
.rv2-tab.active .rv2-tab-count { background: rgba(42,133,255,0.10); color: var(--primary-01); }
/* Section pattern */
.rv2-sec { margin-top: 30px; }
.rv2-sec:first-child { margin-top: 0; }
.rv2-sec-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.rv2-sec-head h3 {
margin: 0;
font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.rv2-sec-sub, .rv2-sec-link {
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.rv2-sec-link {
color: var(--text-secondary); font-weight: 600;
padding: 4px 8px; border-radius: 6px;
cursor: pointer;
}
.rv2-sec-link:hover { color: var(--text-primary); background: var(--bg-depth); }
/* -------------------------------------------------------------
Overview
------------------------------------------------------------- */
.rv2-overview { display: flex; flex-direction: column; gap: 4px; }
/* Current stage context */
.rv2-stage-ctx {
display: grid; grid-template-columns: 1fr auto; gap: 24px;
align-items: center;
padding: 20px 22px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
margin-bottom: 20px;
}
.rv2-ctx-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.rv2-ctx-title {
font-size: 18px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
margin-top: 4px;
}
.rv2-ctx-progress {
display: flex; align-items: center; gap: 12px;
margin-top: 10px;
}
.rv2-ctx-count {
font-size: 12px; color: var(--text-secondary); font-weight: 600;
min-width: 200px;
}
.rv2-ctx-bar {
flex: 1; max-width: 200px;
height: 4px; border-radius: 999px;
background: var(--chart-min);
overflow: hidden;
}
.rv2-ctx-fill {
height: 100%; border-radius: 999px;
background: var(--primary-01);
transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rv2-ctx-next {
display: flex; align-items: center; gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--stroke-subtle);
}
.rv2-ctx-next-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.rv2-ctx-next-study {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 10px 6px 12px;
border-radius: 999px;
background: var(--bg-app);
color: var(--text-primary);
font-size: 13px; font-weight: 500; letter-spacing: -0.015em;
transition: background 150ms;
}
.rv2-ctx-next-study:hover { background: var(--bg-depth); }
.rv2-ctx-next-study .title { font-weight: 600; }
.rv2-ctx-next-study .mono { color: var(--text-tertiary); font-size: 11px; }
.rv2-ctx-action {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border-radius: 999px;
background: var(--text-primary);
color: white;
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
box-shadow: var(--shadow-widget);
transition: transform 150ms, box-shadow 150ms;
}
.rv2-ctx-action:hover { transform: translateY(-1px); box-shadow: var(--shadow-depth); }
/* Active studies list */
.rv2-active-list { display: flex; flex-direction: column; }
.rv2-active-row {
display: grid;
grid-template-columns: 28px 1fr auto 14px;
gap: 14px; align-items: center;
padding: 14px 6px;
border-top: 1px solid var(--stroke-subtle);
cursor: pointer;
transition: background 150ms;
border-radius: 8px;
}
.rv2-active-list .rv2-active-row:first-child { border-top: 0; }
.rv2-active-row:hover { background: var(--bg-depth); }
.rv2-active-typemark {
width: 28px; height: 28px;
border-radius: 8px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-tertiary);
}
.rv2-active-title { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.rv2-active-sub {
display: flex; gap: 6px;
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 2px;
}
/* Recent evidence strip */
.rv2-evidence-strip {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 12px;
}
.rv2-ev-quote {
padding: 14px 16px;
border-radius: var(--r-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
cursor: pointer;
transition: box-shadow 180ms, transform 180ms;
}
.rv2-ev-quote:hover { box-shadow: var(--shadow-depth); transform: translateY(-1px); }
.rv2-ev-quote.compact { padding: 12px 14px; }
.rv2-ev-kind {
display: inline-flex; align-items: center; gap: 4px;
font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
color: var(--text-tertiary);
}
.rv2-ev-text {
font-size: 14px;
line-height: 1.5;
letter-spacing: -0.015em;
color: var(--text-primary);
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
quotes: "\201C" "\201D";
}
.rv2-ev-text:before { content: open-quote; color: var(--text-muted); }
.rv2-ev-text:after { content: close-quote; color: var(--text-muted); }
.rv2-ev-quote.compact .rv2-ev-text {
font-size: 12.5px;
font-style: normal;
font-family: inherit;
}
.rv2-ev-quote.compact .rv2-ev-text:before,
.rv2-ev-quote.compact .rv2-ev-text:after { content: none; }
.rv2-ev-foot {
display: flex; align-items: center; gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--stroke-subtle);
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.rv2-ev-foot .p { font-weight: 600; color: var(--text-primary); font-size: 11.5px; }
.rv2-ev-foot .r { font-size: 10.5px; color: var(--text-tertiary); margin-top: 1px; }
.rv2-ev-date { margin-left: auto; }
/* Insights lists */
.rv2-insights-list { display: flex; flex-direction: column; }
.rv2-insight-row {
padding: 16px 4px;
border-top: 1px solid var(--stroke-subtle);
display: flex; flex-direction: column; gap: 8px;
}
.rv2-insights-list .rv2-insight-row:first-child { border-top: 0; }
.rv2-insight-statement {
font-size: 15.5px; font-weight: 600; letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.4;
max-width: 78ch;
}
.rv2-insight-meta {
display: flex; align-items: center; gap: 6px;
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.rv2-insight-meta b { color: var(--text-primary); font-weight: 700; }
.rv2-meta-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--text-muted);
}
.rv2-insight-links {
display: flex; flex-wrap: wrap; gap: 6px;
}
/* Recent grid */
.rv2-recent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
/* -------------------------------------------------------------
Studies library
------------------------------------------------------------- */
.rv2-studies { display: flex; flex-direction: column; gap: 20px; }
.rv2-filter-bar {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
padding: 12px 14px;
border-radius: var(--r-xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.rv2-search {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: 999px;
background: var(--bg-app);
flex: 1; min-width: 240px; max-width: 320px;
}
.rv2-search input {
flex: 1;
border: 0; background: transparent; outline: none;
font-size: 12.5px; letter-spacing: -0.015em;
color: var(--text-primary);
}
.rv2-search input::placeholder { color: var(--text-tertiary); }
.rv2-search > svg { color: var(--text-tertiary); }
.rv2-filter-group { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rv2-filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 999px;
background: transparent;
color: var(--text-secondary);
font-size: 11.5px; font-weight: 500; letter-spacing: -0.015em;
transition: color 150ms, background 150ms;
}
.rv2-filter-chip:hover { background: var(--bg-depth); color: var(--text-primary); }
.rv2-filter-chip.active {
background: var(--text-primary); color: white;
font-weight: 600;
}
.rv2-filter-chip .n {
font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 999px;
background: rgba(255,255,255,0.14); color: currentColor;
opacity: 0.75;
}
.rv2-filter-chip:not(.active) .n { background: var(--bg-app); color: var(--text-tertiary); }
.rv2-filter-secondary { display: inline-flex; gap: 6px; margin-left: auto; }
.rv2-filter-select {
padding: 6px 24px 6px 10px;
background: var(--bg-app);
border: 0;
border-radius: 8px;
font-size: 11.5px; color: var(--text-secondary); font-weight: 500;
letter-spacing: -0.015em;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.rv2-filter-select:hover { color: var(--text-primary); }
.rv2-studies-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.rv2-empty {
padding: 40px 20px;
text-align: center;
color: var(--text-tertiary);
}
.rv2-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.rv2-empty-sub { font-size: 12px; margin-top: 4px; letter-spacing: -0.02em; }
/* Study card */
.rv2-study-card {
display: block;
border-radius: var(--r-xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
overflow: hidden;
transition: box-shadow 200ms, transform 200ms;
cursor: pointer;
}
.rv2-study-card:hover { box-shadow: var(--shadow-depth); transform: translateY(-1px); }
.rv2-study-card-visual {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-app);
}
.rv2-study-card-typechip {
position: absolute; top: 10px; left: 10px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.9);
color: var(--text-secondary);
font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
backdrop-filter: blur(4px);
}
.rv2-study-card-pin {
position: absolute; top: 10px; right: 10px;
padding: 3px 6px;
border-radius: 999px;
background: rgba(255,255,255,0.9);
color: var(--warning-solid);
backdrop-filter: blur(4px);
}
.rv2-study-card-body {
padding: 14px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
}
.rv2-study-card-titlerow {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 8px;
}
.rv2-study-card-title {
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
line-height: 1.35;
flex: 1; min-width: 0;
}
.rv2-study-card-finding {
font-size: 12.5px; letter-spacing: -0.015em; line-height: 1.5;
color: var(--text-secondary);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv2-study-card-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 8px;
border-top: 1px solid var(--stroke-subtle);
font-size: 11.5px;
}
.rv2-study-card-owner { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 500; }
.rv2-study-card-date { color: var(--text-tertiary); letter-spacing: -0.02em; }
/* -------------------------------------------------------------
Study previews by type
------------------------------------------------------------- */
.rv2-prev { position: absolute; inset: 0; padding: 20px 22px; display: flex; }
/* USER — editorial quote */
.rv2-prev-user {
flex-direction: column; justify-content: center;
background: linear-gradient(180deg, #FBFAF6, #F3F1EB);
}
.rv2-prev-quote {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px; line-height: 1.4; letter-spacing: -0.015em;
color: var(--text-primary);
font-style: italic;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rv2-prev-quoteby {
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 8px;
font-style: normal;
}
.rv2-prev-participants { font-size: 26px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.rv2-prev-role { font-size: 11.5px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 4px; }
/* COMPETITOR — mock frame comparison */
.rv2-prev-competitor {
gap: 10px;
background: linear-gradient(180deg, #F5F5F7, #EBEBEE);
padding: 16px 18px;
}
.rv2-mini-frame {
flex: 1;
background: white;
border-radius: 8px;
padding: 6px;
display: flex; flex-direction: column;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.rv2-mini-frame.accent { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.rv2-mf-topbar { height: 5px; background: var(--bg-app); border-radius: 3px; margin-bottom: 6px; }
.rv2-mf-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 2px 3px; }
.rv2-mf-line { height: 3px; background: rgba(0,0,0,0.10); border-radius: 2px; }
.rv2-mf-block { flex: 1; background: rgba(0,0,0,0.06); border-radius: 4px; margin-top: 4px; }
.rv2-mini-frame.accent .rv2-mf-block { background: rgba(42,133,255,0.14); }
/* MARKET — bar chart */
.rv2-prev-market {
align-items: stretch;
background: linear-gradient(180deg, #F8F8F5, #EEEEEB);
padding: 6px 8px 4px;
}
/* TECHNICAL — architecture */
.rv2-prev-technical {
background: linear-gradient(180deg, #F4F5F7, #E7E9EE);
padding: 6px;
}
/* EXPERIMENT — result bars */
.rv2-prev-experiment {
flex-direction: column; justify-content: center; gap: 8px;
padding: 16px 20px;
background: linear-gradient(180deg, #FBF9F4, #F1EEE5);
}
.rv2-exp-row { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: center; }
.rv2-exp-label {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
color: var(--text-tertiary);
text-align: center;
}
.rv2-exp-label.winner { color: var(--success-solid); }
.rv2-exp-bar { height: 8px; border-radius: 4px; background: var(--chart-min); overflow: hidden; }
.rv2-exp-bar > div { height: 100%; background: var(--text-tertiary); border-radius: 4px; }
.rv2-exp-bar.winner > div { background: var(--success-solid); }
.rv2-exp-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; letter-spacing: 0.02em; }
/* INSIGHT — editorial highlight */
.rv2-prev-insight {
align-items: center; justify-content: center;
padding: 22px 26px;
background: linear-gradient(180deg, #FCFAF3, #F5F1E5);
}
.rv2-prev-insight-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 15px; line-height: 1.4; letter-spacing: -0.02em;
color: var(--text-primary);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
text-align: center;
}
/* -------------------------------------------------------------
Insights view
------------------------------------------------------------- */
.rv2-insights { display: flex; flex-direction: column; gap: 30px; }
.rv2-insights-lead {
padding: 24px 28px 20px;
max-width: 74ch;
}
.rv2-insights-lead-eyebrow {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 10px;
}
.rv2-insights-lead p {
margin: 0;
font-size: 16px; line-height: 1.6; letter-spacing: -0.015em;
color: var(--text-secondary);
max-width: 68ch;
}
.rv2-insights-editorial { display: flex; flex-direction: column; gap: 20px; }
.rv2-insight-editorial {
padding: 24px 28px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.rv2-insight-editorial-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.rv2-insight-editorial-statement {
font-size: 24px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.35;
color: var(--text-primary);
margin: 14px 0 10px;
max-width: 34ch;
}
.rv2-insight-editorial-summary {
margin: 0;
font-size: 14px; line-height: 1.6; letter-spacing: -0.015em;
color: var(--text-secondary);
max-width: 68ch;
}
.rv2-insight-editorial-footer {
display: flex; align-items: center; justify-content: space-between;
gap: 30px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--stroke-subtle);
flex-wrap: wrap;
}
.rv2-insight-editorial-facts { display: inline-flex; gap: 28px; }
.rv2-insight-editorial-facts .k {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.rv2-insight-editorial-facts .v {
font-size: 13px; font-weight: 600; color: var(--text-primary);
margin-top: 4px;
display: inline-flex; align-items: center; gap: 6px;
}
.rv2-insight-editorial-links { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.rv2-finding-linkchip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 999px;
background: var(--bg-app);
color: var(--text-secondary);
font-size: 11px; font-weight: 500; letter-spacing: -0.015em;
transition: background 150ms, color 150ms;
max-width: 30ch;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv2-finding-linkchip:hover { background: var(--bg-depth); color: var(--text-primary); }
.rv2-finding-linkchip svg { color: var(--text-tertiary); flex: none; }
/* -------------------------------------------------------------
Study Detail
------------------------------------------------------------- */
.rv2-study { display: flex; flex-direction: column; gap: 16px; }
.rv2-study-back {
padding-top: 4px;
}
.rv2-study-back a {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px 4px 4px;
border-radius: 8px;
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-secondary);
}
.rv2-study-back a:hover { background: var(--bg-depth); color: var(--text-primary); }
/* Header */
.rv2-study-head {
display: grid; grid-template-columns: 1fr auto; gap: 24px;
align-items: flex-start;
padding: 8px 0 20px;
border-bottom: 1px solid var(--stroke-subtle);
}
.rv2-study-head-main { display: flex; flex-direction: column; gap: 8px; }
.rv2-study-typechip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: 999px;
background: var(--bg-app);
color: var(--text-secondary);
font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
align-self: flex-start;
}
.rv2-study-title {
margin: 0;
font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1.15;
max-width: 24ch;
}
.rv2-study-purpose {
margin: 0;
font-size: 15px; line-height: 1.55; letter-spacing: -0.015em;
color: var(--text-secondary);
max-width: 64ch;
}
.rv2-study-meta {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
margin-top: 6px;
font-size: 12px; color: var(--text-secondary); letter-spacing: -0.015em;
}
.rv2-study-owner { display: inline-flex; align-items: center; gap: 8px; }
.rv2-study-meta-item { display: inline-flex; align-items: center; gap: 5px; color: var(--text-tertiary); }
.rv2-study-head-context {
display: flex; flex-direction: column; gap: 8px;
min-width: 220px;
}
.rv2-study-ctx-chip {
display: block;
padding: 10px 14px;
border-radius: 12px;
background: var(--bg-app);
transition: background 150ms;
}
.rv2-study-ctx-chip:hover { background: var(--bg-depth); }
.rv2-study-ctx-chip .k {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.rv2-study-ctx-chip .v {
font-size: 13px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary);
margin-top: 4px;
}
/* Study body */
.rv2-study-body {
display: grid; grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: flex-start;
}
.rv2-study-article { display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.rv2-study-sec {}
.rv2-study-sec-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px;
}
.rv2-study-sec-head h3 {
margin: 0;
font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.rv2-study-eyebrow {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.rv2-study-lead {
margin: 0;
font-size: 20px; line-height: 1.4; letter-spacing: -0.02em;
color: var(--text-primary);
font-weight: 500;
max-width: 60ch;
}
.rv2-study-para {
margin: 0;
font-size: 14.5px; line-height: 1.65; letter-spacing: -0.015em;
color: var(--text-secondary);
max-width: 62ch;
}
.rv2-study-method {
margin: 0; padding-left: 18px;
display: flex; flex-direction: column; gap: 6px;
}
.rv2-study-method li {
font-size: 13.5px; line-height: 1.55; letter-spacing: -0.015em;
color: var(--text-secondary);
}
.rv2-study-method li::marker { color: var(--text-muted); }
.rv2-study-conclusion {
margin: 0;
padding: 16px 20px;
border-left: 3px solid var(--primary-01);
background: rgba(42, 133, 255, 0.04);
border-radius: 0 12px 12px 0;
font-size: 15px; line-height: 1.6; letter-spacing: -0.015em;
color: var(--text-primary);
font-weight: 500;
max-width: 70ch;
}
/* Findings */
.rv2-findings { display: flex; flex-direction: column; gap: 4px; }
.rv2-finding {
display: grid; grid-template-columns: 28px 1fr; gap: 14px;
padding: 16px 4px;
border-top: 1px solid var(--stroke-subtle);
}
.rv2-findings .rv2-finding:first-child { border-top: 0; padding-top: 4px; }
.rv2-finding-marker {
width: 28px; height: 28px;
border-radius: 8px;
display: grid; place-items: center;
background: rgba(42,133,255,0.08);
color: var(--primary-01);
}
.rv2-finding-statement {
font-size: 15px; font-weight: 500; letter-spacing: -0.015em;
line-height: 1.5;
color: var(--text-primary);
max-width: 68ch;
}
.rv2-finding-meta {
display: flex; align-items: center; gap: 8px;
margin-top: 8px;
font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.rv2-finding-ev { color: var(--text-secondary); font-weight: 600; }
.rv2-finding-links {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
}
.rv2-finding-linkslabel {
font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-muted); margin-right: 4px;
}
/* Evidence grid */
.rv2-evidence-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.rv2-ev-card {
padding: 14px 16px;
border-radius: var(--r-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
}
.rv2-ev-card-head {
display: flex; align-items: center; justify-content: space-between;
font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700;
color: var(--text-tertiary);
}
.rv2-ev-card-kind { display: inline-flex; align-items: center; gap: 4px; }
.rv2-ev-card-date { text-transform: none; letter-spacing: 0.02em; }
.rv2-ev-card-quote {
font-family: Georgia, "Times New Roman", serif;
font-size: 14.5px; line-height: 1.5;
color: var(--text-primary);
font-style: italic;
}
.rv2-ev-card-note {
font-size: 13px; line-height: 1.5; letter-spacing: -0.015em;
color: var(--text-primary);
}
.rv2-ev-card-clip {
display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
padding: 8px 4px;
}
.rv2-ev-card-clip .clip-glyph {
width: 44px; height: 44px; border-radius: 10px;
background: var(--bg-app); color: var(--text-secondary);
display: grid; place-items: center;
}
.rv2-ev-card-clip .clip-text .t { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.rv2-ev-card-clip .clip-text .d { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.rv2-ev-card-shot { display: flex; flex-direction: column; gap: 10px; }
.rv2-shot-visual {
border-radius: 8px;
background: var(--bg-app);
padding: 8px;
overflow: hidden;
}
.rv2-shot-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rv2-shot-tabs span {
width: 10px; height: 4px; border-radius: 2px;
background: rgba(0,0,0,0.10);
}
.rv2-shot-tabs span:nth-child(3) { background: var(--primary-01); opacity: 0.5; }
.rv2-shot-body { display: flex; flex-direction: column; gap: 4px; }
.rv2-shot-body .line { height: 3px; background: rgba(0,0,0,0.10); border-radius: 2px; }
.rv2-ev-card-survey svg { border-radius: 4px; }
.rv2-ev-card-foot {
display: flex; align-items: center; justify-content: space-between;
padding-top: 10px;
border-top: 1px solid var(--stroke-subtle);
gap: 10px;
flex-wrap: wrap;
}
.rv2-ev-card-src { display: inline-flex; align-items: center; gap: 8px; }
.rv2-ev-card-src .p { font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.rv2-ev-card-src .r { font-size: 10.5px; color: var(--text-tertiary); margin-top: 1px; }
.rv2-ev-card-findings { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rv2-ev-card-finding {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px;
border-radius: 999px;
background: var(--bg-app);
color: var(--text-tertiary);
font-size: 10px; font-weight: 600; letter-spacing: -0.015em;
}
.rv2-ev-card-finding svg { color: var(--text-tertiary); }
/* Attach grid */
.rv2-attach-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.rv2-attach {
padding: 10px 12px 12px;
border-radius: 14px;
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
transition: box-shadow 200ms, transform 180ms;
cursor: pointer;
}
.rv2-attach:hover { box-shadow: var(--shadow-depth); transform: translateY(-1px); }
.rv2-attach-prev {
aspect-ratio: 200 / 80;
border-radius: 10px;
background: var(--bg-app);
color: var(--text-tertiary);
display: grid; place-items: center;
position: relative;
}
.rv2-attach-image { position: absolute; inset: 8px; background: white; border-radius: 6px; padding: 6px; }
.rv2-attach-prev.rv2-attach-pdf { background: rgba(255,106,85,0.08); color: var(--label-red); }
.rv2-attach-prev.rv2-attach-image { background: rgba(42,133,255,0.08); color: var(--primary-01); }
.rv2-attach-prev.rv2-attach-doc { background: rgba(0,166,86,0.08); color: var(--label-green); }
.rv2-attach-prev.rv2-attach-link { background: rgba(127,95,255,0.08); color: var(--primary-04); }
.rv2-attach-prev.rv2-attach-sheet { background: rgba(239,157,14,0.08); color: var(--label-yellow); }
.rv2-attach-kind {
position: absolute; top: 6px; left: 8px;
font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
background: rgba(255,255,255,0.85);
padding: 2px 6px; border-radius: 999px;
color: inherit;
}
.rv2-attach-name {
font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv2-attach-sub {
display: flex; align-items: center; gap: 6px;
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv2-attach-sub .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--text-muted); flex: none; }
/* Rail */
.rv2-study-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 220px; }
.rv2-rail-block {
padding: 18px 20px;
border-radius: var(--r-2xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
}
.rv2-rail-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 12px;
}
.rv2-rail-head h4 {
margin: 0;
font-size: 12px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.rv2-rail-count { font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.rv2-rail-link { font-size: 11px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.02em; }
.rv2-rail-link:hover { color: var(--text-primary); }
.rv2-checklist {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.rv2-checklist li {
display: grid; grid-template-columns: 18px 1fr; gap: 10px;
align-items: flex-start;
}
.rv2-checklist .mark {
width: 18px; height: 18px; border-radius: 5px;
display: grid; place-items: center;
margin-top: 2px;
}
.rv2-checklist .done .mark { background: var(--success-solid); color: white; }
.rv2-checklist .pending .mark { background: var(--bg-app); border: 1.5px solid var(--stroke-subtle); }
.rv2-checklist .t {
font-size: 12.5px; letter-spacing: -0.015em; color: var(--text-primary);
line-height: 1.45;
}
.rv2-checklist .done .t { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--text-muted); }
.rv2-checklist .m {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10.5px; color: var(--text-tertiary); letter-spacing: -0.02em;
margin-top: 3px;
}
.rv2-checklist .m .dot { width: 2px; height: 2px; border-radius: 50%; background: var(--text-muted); }
.rv2-checklist .n { font-size: 11px; color: var(--text-secondary); letter-spacing: -0.015em; margin-top: 3px; }
.rv2-checklist .a {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 5px;
padding: 2px 7px;
border-radius: 999px;
background: var(--bg-app);
color: var(--text-secondary);
font-size: 10.5px; font-weight: 500;
}
.rv2-rail-foot {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--stroke-subtle);
font-size: 11px;
}
.rv2-rail-related {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid var(--stroke-subtle);
}
.rv2-rail-sublabel {
font-size: 9.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.rv2-rail-related-row {
display: grid; grid-template-columns: 14px 1fr auto; gap: 8px;
align-items: center;
padding: 6px 8px;
border-radius: 8px;
transition: background 150ms;
font-size: 12px;
color: var(--text-secondary);
}
.rv2-rail-related-row:hover { background: var(--bg-depth); color: var(--text-primary); }
.rv2-rail-related-row .t {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Assist */
.rv2-assist {}
.rv2-assist-actions { display: flex; flex-direction: column; gap: 2px; }
.rv2-assist-actions a {
display: block;
padding: 8px 10px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 12.5px; font-weight: 500; letter-spacing: -0.015em;
cursor: pointer;
transition: color 150ms, background 150ms;
}
.rv2-assist-actions a:hover { color: var(--text-primary); background: var(--bg-depth); }
.rv2-assist-actions a.active { color: var(--text-primary); background: var(--bg-depth); }
.rv2-assist-panel {
margin-top: 12px;
padding: 14px 16px;
border-radius: 12px;
background: var(--bg-app);
border-left: 3px solid var(--primary-01);
}
.rv2-assist-panel-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.rv2-assist-panel-head .t { font-size: 12.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.rv2-assist-panel-head .close { padding: 3px 6px; border-radius: 6px; color: var(--text-tertiary); cursor: pointer; }
.rv2-assist-panel-head .close:hover { background: var(--bg-depth); color: var(--text-primary); }
.rv2-assist-bullets {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.rv2-assist-bullets li {
padding-left: 12px;
position: relative;
font-size: 12px; line-height: 1.5; letter-spacing: -0.015em;
color: var(--text-secondary);
}
.rv2-assist-bullets li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted);
}
.rv2-assist-cites {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--stroke-subtle);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
color: var(--text-tertiary);
}
.rv2-assist-cite {
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-surface);
color: var(--primary-01);
font-weight: 600;
letter-spacing: 0;
text-transform: none;
font-size: 10px;
}
/* Contract → stage links (Phase 12) */
.c-stage-links {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 8px 22px 14px 76px;
background: var(--bg-app);
margin: -4px 0 0;
border-top: 1px solid var(--stroke-subtle);
}
.c-stage-links-lbl {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-muted);
margin-right: 4px;
}
.c-stage-link {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px 3px 3px;
background: var(--bg-surface);
border-radius: 999px;
font-size: 11px; letter-spacing: -0.015em;
color: var(--text-secondary);
transition: background 150ms, color 150ms, box-shadow 150ms;
}
.c-stage-link:hover { color: var(--text-primary); box-shadow: 0 0 0 1px var(--stroke-subtle); }
.c-stage-link .c-sl-stage {
font-family: var(--font-mono);
font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
color: var(--primary-01);
background: rgba(42,133,255,0.10);
padding: 2px 6px;
border-radius: 999px;
}
.c-stage-link .c-sl-label { font-weight: 500; }
.c-stage-link .c-sl-amt { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--text-primary); }
.c-stage-link .c-sl-date { font-size: 10px; color: var(--text-tertiary); }
/* Services row — allow RelatedTo chip under the service name */
.dv-service-row {
grid-template-columns: 30px 1.4fr auto !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 12px 14px !important;
}
.dv-service-row .related-to { margin-top: 6px; }
/* -------------------------------------------------------------
RelatedTo (Phase 12) — a small inline context tag linking a
canonical item to its stage/mission/feature. Never a badge;
never a floating card. One quiet line.
------------------------------------------------------------- */
.related-to {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px 6px;
margin-top: 8px;
font-size: 11px; letter-spacing: -0.015em;
color: var(--text-tertiary);
line-height: 1.4;
}
.related-to .rt-lbl {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-muted);
margin-right: 2px;
}
.related-to .rt-sep { color: var(--text-muted); }
.related-to .rt-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
border-radius: 6px;
color: var(--text-secondary);
font-weight: 500;
transition: background 150ms, color 150ms;
max-width: 26ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.related-to .rt-chip:hover {
background: var(--bg-depth);
color: var(--text-primary);
}
.related-to .rt-chip svg {
color: var(--text-tertiary);
flex: none;
}
.related-to.related-to-compact {
font-size: 10.5px;
gap: 3px 5px;
}
/* Feature Board — lightweight 4-column layout */
.feat-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 14px;
}
.fb-col {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 12px 10px;
box-shadow: var(--shadow-widget);
min-height: 200px;
}
.fb-col-head {
display: flex; align-items: center; gap: 8px;
padding: 4px 10px 10px;
border-bottom: 1px solid var(--stroke-subtle);
margin-bottom: 10px;
}
.fb-col-head .fb-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fb-col-head .fb-dot.gray { background: var(--text-muted); }
.fb-col-head .fb-dot.blue { background: var(--primary-01); }
.fb-col-head .fb-dot.purple { background: var(--primary-04); }
.fb-col-head .fb-dot.green { background: var(--success-solid); }
.fb-label { font-size: 12px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.fb-count { margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--bg-app); }
.fb-col-body { display: flex; flex-direction: column; gap: 8px; }
.fb-empty {
font-size: 12px; color: var(--text-muted); letter-spacing: -0.02em;
padding: 12px 10px 14px;
text-align: center;
}
.fb-card {
display: block;
padding: 12px 12px;
border-radius: 14px;
background: var(--bg-app);
transition: background 150ms, box-shadow 180ms, transform 180ms;
cursor: pointer;
}
.fb-card:hover { background: var(--bg-highlight); box-shadow: var(--shadow-widget); }
.fb-card.blocked { box-shadow: inset 3px 0 0 var(--danger-solid); }
.fb-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fb-prio {
padding: 1px 6px;
border-radius: 4px;
font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
color: white;
}
.fb-prio.P0 { background: var(--text-primary); }
.fb-prio.P1 { background: var(--text-tertiary); }
.fb-prio.P2 { background: transparent; color: var(--text-tertiary); box-shadow: 0 0 0 1px var(--stroke-subtle); }
.fb-stage {
margin-left: auto;
font-size: 10px; color: var(--text-tertiary); font-weight: 600;
padding: 1px 5px; border-radius: 4px;
background: var(--bg-surface);
}
.fb-card-title {
font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-card-purpose {
font-size: 11.5px; color: var(--text-secondary); letter-spacing: -0.02em;
line-height: 1.45;
margin-top: 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fb-card-blocker {
margin-top: 6px;
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
font-size: 10.5px; font-weight: 600; letter-spacing: -0.015em;
color: var(--danger-solid);
background: rgba(255,56,28,0.08);
border-radius: 999px;
}
.fb-card-foot {
display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
margin-top: 10px;
}
.fb-progress { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fb-progress-bar {
flex: 1; height: 3px; border-radius: 999px; background: var(--chart-min);
overflow: hidden;
}
.fb-progress-fill { height: 100%; border-radius: 999px; }
.fb-progress-num { font-size: 10px; color: var(--text-tertiary); font-weight: 600; }
/* Feature Journey — full stage strip using Phase 8 HorizontalStages */
.feat-journey {
margin: 12px 24px 0;
padding: 14px 18px 14px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.fj-head {
display: flex; align-items: center; gap: 16px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.fj-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
flex: none;
}
.fj-summary {
display: inline-flex; align-items: center; gap: 10px;
font-size: 12px; letter-spacing: -0.02em; color: var(--text-secondary);
flex: 1; min-width: 0;
}
.fj-summary b { color: var(--text-primary); font-weight: 600; }
.fj-summary .fj-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
.fj-open {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px 4px 12px;
border-radius: 999px;
border-left: 1px solid var(--stroke-subtle);
font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: -0.015em;
transition: color 150ms;
}
.fj-open:hover { color: var(--text-primary); }
.fj-track {
padding-top: 12px;
border-top: 1px solid var(--stroke-subtle);
}
/* Feature ↔ Plan/Stage stripe: 3-node timeline sitting between header + body */
.feat-stage-stripe {
display: block;
margin: 12px 24px 0;
padding: 14px 16px 16px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
transition: box-shadow 200ms, transform 200ms;
}
.feat-stage-stripe:hover { box-shadow: var(--shadow-depth); }
.fss-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.fss-body { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
.fss-track {
display: grid;
grid-template-columns: 1fr 40px 1fr 40px 1fr;
align-items: center;
gap: 4px;
}
.fss-node {
display: grid;
grid-template-columns: 32px 1fr;
gap: 12px;
align-items: center;
}
.fss-node.current {
padding: 8px 12px 8px 8px;
border-radius: var(--r-md);
background: linear-gradient(180deg, rgba(42,133,255,0.10), rgba(42,133,255,0.04));
border: 1px solid rgba(42,133,255,0.20);
}
.fss-glyph {
width: 32px; height: 32px;
border-radius: 10px;
display: grid; place-items: center;
background: var(--bg-app);
color: var(--text-tertiary);
border: 1px solid var(--stroke-subtle);
}
.fss-node.prev .fss-glyph {
background: var(--success-solid);
color: white;
border-color: rgba(0,166,86,0.35);
box-shadow: 0 2px 6px rgba(0,166,86,0.20);
}
.fss-node.current .fss-glyph {
background: var(--primary-01);
border-color: rgba(42,133,255,0.45);
box-shadow: 0 2px 8px rgba(42,133,255,0.30), inset 0 0 0 3px rgba(255,255,255,0.20);
}
.fss-node.current .fss-dot { width: 10px; height: 10px; border-radius: 50%; background: white; }
.fss-node.next .fss-tick { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.fss-text { min-width: 0; }
.fss-role {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-tertiary);
}
.fss-node.current .fss-role { color: var(--primary-01); }
.fss-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); margin-top: 2px; }
.fss-node.next .fss-name { color: var(--text-secondary); }
.fss-meta { font-size: 11.5px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.4; }
.fss-conn {
height: 2px;
border-radius: 2px;
}
.fss-conn.filled { background: var(--primary-01); }
.fss-conn.dashed { background-image: linear-gradient(90deg, var(--stroke-subtle) 60%, transparent 40%); background-size: 10px 2px; background-repeat: repeat-x; }
.fss-side {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; color: var(--text-secondary); font-weight: 600; letter-spacing: -0.015em;
padding: 6px 10px; border-radius: 8px;
border-left: 1px solid var(--stroke-subtle);
padding-left: 16px;
}
.feat-stage-stripe:hover .fss-side { color: var(--text-primary); }
/* Calmer assist section (replaces the 3 sparkle chips) */
.fd-assist {
padding: 12px 16px 14px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.fd-assist-head {
display: flex; align-items: center; gap: 6px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.fd-assist-actions { display: flex; flex-direction: column; gap: 2px; }
.fd-assist-actions a {
display: block;
padding: 8px 10px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 13px; font-weight: 500; letter-spacing: -0.015em;
cursor: pointer;
transition: background 150ms, color 150ms;
}
.fd-assist-actions a:hover { color: var(--text-primary); background: var(--bg-depth); }
/* Inline suggestion panel (calm) */
.fd-assist-panel {
padding: 14px 16px 14px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
border-left: 3px solid var(--text-tertiary);
}
.fd-assist-panel-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.fd-assist-panel-head .t { font-size: 13px; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); }
.fd-assist-panel-head .close { padding: 4px 6px; border-radius: 8px; color: var(--text-tertiary); cursor: pointer; }
.fd-assist-panel-head .close:hover { color: var(--text-primary); background: var(--bg-depth); }
.fd-assist-suggs { display: flex; flex-direction: column; gap: 4px; }
.fd-assist-sugg {
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
padding: 10px 12px; border-radius: 10px; background: var(--bg-app);
}
.fd-assist-sugg .t { font-size: 12.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.fd-assist-sugg .w { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.4; }
.fd-assist-sugg .add { padding: 6px 10px; border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font-size: 12px; font-weight: 600; letter-spacing: -0.015em; box-shadow: var(--shadow-widget); }
.fd-assist-sugg .add:hover { box-shadow: var(--shadow-depth); }
/* Suggested-requirements inline panel (opens from AI chip) */
.fd-ai-panel { position: relative; padding: 18px 20px 18px; border-radius: var(--r-2xl); background: var(--bg-surface); box-shadow: var(--shadow-widget); }
.fd-ai-panel::before {
content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
background: linear-gradient(120deg, rgba(245,36,149,0.35), rgba(42,133,255,0.35));
z-index: -1;
}
.fd-ai-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fd-ai-panel-head .glyph { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, rgba(245,36,149,0.15), rgba(42,133,255,0.15)); color: var(--accent); display: grid; place-items: center; }
.fd-ai-panel-head .t { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.fd-ai-panel-head .close { margin-left: auto; padding: 4px 6px; border-radius: 8px; color: var(--text-tertiary); }
.fd-ai-panel-head .close:hover { color: var(--text-primary); background: var(--bg-depth); }
.fd-ai-suggs { display: flex; flex-direction: column; gap: 6px; }
.fd-ai-sugg {
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
padding: 10px 12px; border-radius: 10px; background: var(--bg-app);
}
.fd-ai-sugg .t { font-size: 13px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.fd-ai-sugg .w { font-size: 11px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 2px; line-height: 1.4; }
.fd-ai-sugg .add { padding: 6px 10px; border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); font-size: 12px; font-weight: 600; letter-spacing: -0.015em; box-shadow: var(--shadow-widget); }
.fd-ai-sugg .add:hover { box-shadow: var(--shadow-depth); }
/* =========================================================
STAGES — new hero (horizontal journey + current stage + next)
========================================================= */
/* Project estimate strip */
.est-strip {
display: flex; align-items: center; gap: 20px;
padding: 16px 20px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.est-strip .lead { min-width: 0; flex: 0 1 auto; }
.est-strip .lead .num {
font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1;
display: flex; align-items: baseline; gap: 8px;
}
.est-strip .lead .num .approx {
font-size: 13px; color: var(--text-tertiary); font-weight: 500; letter-spacing: -0.02em;
}
.est-strip .lead .sub {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 4px;
}
.est-dots {
display: inline-flex; gap: 3px; align-items: center;
padding: 6px 10px;
background: var(--bg-app);
border-radius: 12px;
flex: 0 1 auto;
min-width: 0;
}
.est-dots > i {
width: 6px; height: 12px; border-radius: 3px;
background: var(--shade-08);
}
.est-dots > i.done { background: linear-gradient(180deg, #34C48F, var(--success-solid)); }
.est-dots > i.now { background: linear-gradient(180deg, #5AA0FF, var(--primary-01)); box-shadow: 0 0 0 2px rgba(42,133,255,0.15); }
.est-metrics {
display: flex; align-items: center; gap: 18px;
flex: 1 1 auto;
justify-content: flex-end;
}
.est-metric {
display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
padding: 0 2px;
}
.est-metric .k {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
color: var(--text-tertiary);
}
.est-metric .v { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.est-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* AI hint on the button */
.btn-ai {
position: relative;
border: 1.5px solid transparent;
background:
linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
linear-gradient(120deg, rgba(245,36,149,0.55), rgba(42,133,255,0.55)) border-box;
color: var(--text-primary);
box-shadow: var(--shadow-widget);
}
.btn-ai:hover { box-shadow: var(--shadow-depth); }
.btn-ai .btn-ai-spark {
width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--accent);
}
/* =========================================================
VISUAL JOURNEY (horizontal)
========================================================= */
.journey-card {
padding: 26px 24px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
position: relative;
overflow: hidden;
}
.journey-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(60% 100% at 50% -30%, rgba(42,133,255,0.06), transparent 60%);
border-radius: inherit;
pointer-events: none;
}
.journey-card > * { position: relative; }
.journey-card-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 22px;
padding: 0 2px;
}
.journey-card-head .t {
font-size: var(--fs-h6); font-weight: 600; letter-spacing: -0.01em;
display: flex; align-items: center; gap: 10px;
}
.journey-card-head .r {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em;
display: inline-flex; align-items: center; gap: 12px;
}
.journey-card-head .legend {
display: inline-flex; gap: 14px; align-items: center;
font-size: 11px; color: var(--text-secondary); letter-spacing: -0.02em;
}
.journey-card-head .legend .lg { display: inline-flex; gap: 6px; align-items: center; }
.journey-card-head .legend .lg > i { width: 10px; height: 10px; border-radius: 3px; }
.journey-canvas {
position: relative;
padding: 46px 20px 40px;
min-height: 220px;
}
/* horizontal base line */
.journey-canvas .base {
position: absolute; left: 40px; right: 40px; top: 116px; height: 2px;
background-image: linear-gradient(to right, rgba(123,123,123,0.45) 0, rgba(123,123,123,0.45) 3px, transparent 3px);
background-repeat: repeat-x;
background-size: 6px 100%;
}
.journey-canvas .fill {
position: absolute; left: 40px; top: 116px; height: 2px;
background-image: linear-gradient(to right, var(--primary-01) 0, var(--primary-01) 3px, transparent 3px);
background-repeat: repeat-x;
background-size: 6px 100%;
}
.journey-stages {
position: relative;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 4px;
padding: 0 40px;
}
.j-stage {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 0;
flex: 1 0 0;
min-width: 0;
}
.j-stage .up {
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-height: 46px; padding-bottom: 8px;
}
.j-stage .up .num {
font-family: var(--font-mono);
font-size: 10px; font-weight: 700;
color: var(--text-tertiary);
padding: 2px 6px;
border-radius: 5px;
background: var(--bg-inset);
letter-spacing: 0;
}
.j-stage .up .num.done { background: rgba(0,166,86,0.10); color: var(--success-solid); }
.j-stage .up .num.now { background: rgba(42,133,255,0.10); color: var(--primary-01); }
.j-stage .up .name {
font-size: 13px; font-weight: 600; letter-spacing: -0.015em;
color: var(--text-primary); text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.j-stage .up .name.upcoming { color: var(--text-tertiary); font-weight: 500; }
.j-stage .up .dur {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
/* Node glyphs */
.j-node {
width: 40px; height: 40px;
border-radius: 12px;
display: grid; place-items: center;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
color: var(--text-tertiary);
position: relative;
z-index: 2;
}
.j-node.done {
background: linear-gradient(180deg, #10B372, var(--primary-02));
border-color: transparent;
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 4px 10px rgba(0,166,86,0.28);
}
.j-node.now {
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-color: transparent;
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.30),
0 0 0 6px rgba(42,133,255,0.14),
0 8px 16px rgba(42,133,255,0.28);
}
.j-node.now::after {
content: "";
position: absolute; inset: -3px;
border-radius: 15px;
border: 1.5px solid rgba(42,133,255,0.4);
animation: pulseNow 2s ease-out infinite;
}
@keyframes pulseNow {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.15); opacity: 0; }
}
.j-node.blocked {
background: linear-gradient(180deg, #FF6A55, var(--danger-solid));
border-color: transparent;
color: white;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.22),
0 4px 10px rgba(255,56,28,0.30);
transform: rotate(45deg);
}
.j-node.blocked > svg { transform: rotate(-45deg); }
.j-node.upcoming { background: var(--bg-surface); }
/* below the node — dates */
.j-stage .down {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding-top: 10px;
}
.j-stage .down .date {
font-size: 11px; color: var(--text-secondary); letter-spacing: -0.02em;
}
.j-stage .down .date.late { color: var(--danger-solid); }
/* "You are here" chip anchored above current */
.j-here {
position: absolute;
top: -8px; left: 50%; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px 4px 8px;
background: var(--gradient-black);
color: white;
font-size: 10.5px; font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 4px 10px rgba(16,16,16,0.28);
white-space: nowrap;
}
.j-here .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-01); box-shadow: 0 0 0 3px rgba(42,133,255,0.35); }
.j-here::after {
content: "";
position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%) rotate(45deg);
width: 6px; height: 6px;
background: linear-gradient(135deg, #2C2C2C, #282828);
}
/* Milestones on connectors */
.j-milestones {
position: absolute; left: 40px; right: 40px; top: 108px; height: 20px;
pointer-events: none;
}
.j-mile {
position: absolute;
transform: translate(-50%, -50%);
pointer-events: auto;
}
.j-mile-dot {
width: 12px; height: 12px;
transform: rotate(45deg);
border-radius: 3px;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
box-shadow: var(--shadow-widget);
}
.j-mile.done .j-mile-dot { background: var(--success-solid); border-color: transparent; }
.j-mile.now .j-mile-dot { background: var(--primary-01); border-color: transparent; }
.j-mile-label {
position: absolute;
top: 14px; left: 50%; transform: translateX(-50%);
white-space: nowrap;
font-size: 10px; color: var(--text-tertiary); letter-spacing: -0.02em;
background: var(--bg-surface);
padding: 1px 5px;
border-radius: 4px;
box-shadow: var(--shadow-widget);
}
.j-mile.done .j-mile-label { color: var(--success-solid); }
.j-mile.now .j-mile-label { color: var(--primary-01); font-weight: 600; }
.j-mile:hover .j-mile-label { z-index: 3; }
/* =========================================================
AI SUGGESTION panel
=========================================================*/
.ai-panel {
position: relative;
padding: 20px 22px 20px;
border-radius: var(--r-3xl);
background: var(--bg-surface);
box-shadow: var(--shadow-widget);
border: 1.5px solid transparent;
background-clip: padding-box;
}
.ai-panel::before {
content: "";
position: absolute; inset: -1.5px;
border-radius: inherit;
background: linear-gradient(120deg, rgba(245,36,149,0.35), rgba(42,133,255,0.35));
z-index: -1;
}
.ai-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ai-panel-head .glyph {
width: 32px; height: 32px; border-radius: 10px;
background: linear-gradient(135deg, rgba(245,36,149,0.15), rgba(42,133,255,0.15));
display: grid; place-items: center;
color: var(--accent);
}
.ai-panel-head .title { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.ai-panel-head .close-btn {
margin-left: auto;
width: 32px; height: 32px; display: grid; place-items: center;
border-radius: 10px; color: var(--text-tertiary);
}
.ai-panel-head .close-btn:hover { color: var(--text-primary); background: var(--bg-depth); }
.ai-panel-sub { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; margin-bottom: 12px; }
.ai-suggestions { display: flex; flex-direction: column; gap: 6px; }
.ai-sugg {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 10px 14px;
border-radius: 12px;
background: var(--bg-app);
}
.ai-sugg .ord { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-tertiary); }
.ai-sugg .name { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; }
.ai-sugg .why { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; margin-top: 2px; }
.ai-sugg .dur { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--primary-01); background: rgba(42,133,255,0.10); padding: 4px 8px; border-radius: 6px; }
.ai-panel-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ai-panel-actions .note { margin-left: auto; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
/* =========================================================
CURRENT STAGE detail block
=========================================================*/
.cur-shell {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 380px);
gap: 16px;
align-items: flex-start;
}
.cur-main { display: flex; flex-direction: column; gap: 12px; }
.cur-side { display: flex; flex-direction: column; gap: 12px; }
/* Header of the current stage main card */
.cur-hero {
padding: 22px 24px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
position: relative;
overflow: hidden;
}
.cur-hero::before {
content: "";
position: absolute; left: 0; top: 20px; bottom: 20px;
width: 4px;
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-radius: 0 4px 4px 0;
}
.cur-hero::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(50% 100% at 100% 0%, rgba(42,133,255,0.06), transparent 60%);
pointer-events: none;
border-radius: inherit;
}
.cur-hero > * { position: relative; }
.cur-hero .head {
display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.cur-hero .stage-num {
font-family: var(--font-mono);
font-size: 12px; font-weight: 700;
padding: 4px 10px;
border-radius: 7px;
background: rgba(42,133,255,0.08);
color: var(--primary-01);
letter-spacing: 0;
}
.cur-hero h2 {
margin: 0;
font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
color: var(--text-primary);
}
.cur-hero .day-of {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
padding: 4px 10px;
background: var(--bg-inset);
border-radius: 7px;
margin-left: auto;
}
.cur-hero .actions {
display: flex; align-items: center; gap: 8px;
}
.cur-hero .goal-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-top: 18px;
display: block;
}
.cur-hero .goal {
font-size: 15px; letter-spacing: -0.015em; line-height: 1.55; color: var(--text-primary);
margin: 8px 0 0; max-width: 68ch;
}
.cur-hero .desc {
font-size: 14px; letter-spacing: -0.015em; line-height: 1.55; color: var(--text-secondary);
margin: 10px 0 0; max-width: 68ch;
}
.cur-hero .prog-row {
display: flex; align-items: center; gap: 12px;
margin-top: 18px;
padding: 12px 14px;
border-radius: 14px;
background: var(--bg-app);
}
.cur-hero .prog-row .n { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cur-hero .prog-row .bar { flex: 1; }
.cur-hero .prog-row .sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; white-space: nowrap; }
/* Complete Stage button — special */
.btn-complete-stage {
background: linear-gradient(180deg, #10B372, var(--primary-02));
color: white;
padding: 0 18px;
height: 40px; border-radius: 999px;
font-weight: 700; font-size: 13px; letter-spacing: -0.015em;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 4px 10px rgba(0,166,86,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-complete-stage:hover { filter: brightness(1.05); }
.btn-complete-stage.disabled {
background: var(--bg-app);
color: var(--text-tertiary);
box-shadow: inset 0 0 0 1.5px var(--stroke-stroke2);
cursor: not-allowed;
}
/* Deliverables */
.deliv-head {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0 4px 8px;
}
.deliv-head h3 {
margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em;
display: flex; align-items: center; gap: 10px;
}
.deliv-head .progress-note { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.deliv-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.deliv-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform 200ms, box-shadow 200ms;
cursor: pointer;
}
.deliv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-depth); }
.deliv-card.done { position: relative; }
.deliv-card.done::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,166,86,0.04), transparent 50%);
border-radius: inherit;
pointer-events: none;
}
.deliv-visual {
height: 118px;
position: relative;
overflow: hidden;
}
.deliv-visual.doc { background: radial-gradient(60% 80% at 0% 0%, rgba(202,189,255,0.28), transparent 60%), linear-gradient(180deg,#FCFAFF,#F1EDF9); }
.deliv-visual.frames { background: radial-gradient(60% 80% at 100% 100%, rgba(255,188,153,0.32), transparent 60%), linear-gradient(180deg,#FFF7F0,#F8ECDF); }
.deliv-visual.summary { background: radial-gradient(60% 80% at 100% 0%, rgba(181,228,202,0.42), transparent 60%), linear-gradient(180deg,#F5FBF7,#ECF6EF); }
.deliv-visual.mobile { background: radial-gradient(60% 80% at 0% 100%, rgba(177,229,252,0.42), transparent 60%), linear-gradient(180deg,#F5FAFE,#EEF6FC); }
.deliv-visual.palette { background: linear-gradient(180deg,#FDFCF9,#F5F3EC); }
.deliv-visual.audit { background: radial-gradient(50% 80% at 100% 0%, rgba(239,157,14,0.16), transparent 60%), linear-gradient(180deg,#FFFBF0,#FFF3D6); }
.deliv-tag {
position: absolute; top: 10px; left: 10px;
height: 22px; padding: 0 8px;
border-radius: 7px;
font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
display: inline-flex; align-items: center;
background: rgba(16,16,16,0.85);
color: white;
backdrop-filter: blur(4px);
}
.deliv-checkmark {
position: absolute; top: 10px; right: 10px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--success-solid);
display: grid; place-items: center; color: white;
box-shadow: 0 2px 6px rgba(0,166,86,0.30);
}
.deliv-meta {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.deliv-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.deliv-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.deliv-row .owner {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em;
}
.deliv-row .due { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* Tasks compact list */
.tasks-card {
padding: 16px 18px 18px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.tasks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tasks-head h4 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; display: flex; gap: 10px; align-items: center; }
.tasks-head .link { font-size: 12px; color: var(--text-secondary); padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.tasks-head .link:hover { background: var(--bg-depth); color: var(--text-primary); }
.task-row {
display: grid;
grid-template-columns: 22px 1fr auto auto auto;
align-items: center;
gap: 12px;
padding: 8px 6px;
border-radius: 8px;
}
.task-row + .task-row { border-top: 1px solid var(--stroke-subtle); border-radius: 0; }
.task-row .cb {
width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid var(--stroke-stroke2);
background: var(--bg-app);
}
.task-row.done .cb {
background: var(--success-solid); border-color: transparent;
position: relative;
}
.task-row.done .cb::after {
content: "✓"; color: white; font-size: 11px; font-weight: 800;
position: absolute; inset: 0; display: grid; place-items: center;
}
.task-row .t-title {
font-size: 13.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.task-row.done .t-title { color: var(--text-tertiary); text-decoration: line-through; }
.task-row .t-owner { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.task-row .t-due { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.task-row .t-status { }
/* Current stage side rail cards */
.cur-side .meta-card {
padding: 16px 18px 18px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.meta-head {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.meta-head h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-tertiary); }
.meta-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
.meta-grid .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 4px; }
.meta-grid .v { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.meta-grid .v-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 1px; }
.dep-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 6px;
background: var(--bg-inset); color: var(--text-secondary);
font-size: 11px; font-weight: 600; letter-spacing: -0.015em;
}
.related-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.related-chips .rc {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 9px;
border-radius: 8px;
background: var(--bg-app);
color: var(--text-secondary);
font-size: 11.5px; font-weight: 600; letter-spacing: -0.015em;
transition: color 150ms, background 150ms;
cursor: pointer;
}
.related-chips .rc:hover { color: var(--text-primary); background: var(--bg-depth); }
.related-chips .rc svg { color: var(--text-tertiary); }
.related-group + .related-group { margin-top: 12px; }
.related-group .g-label {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
display: inline-flex; align-items: center; gap: 6px;
}
/* Blocker card small */
.blocker-item {
display: grid; grid-template-columns: 8px 1fr; gap: 10px;
align-items: flex-start;
padding: 10px 0;
}
.blocker-item + .blocker-item { border-top: 1px solid var(--stroke-subtle); }
.blocker-item .b-dot {
width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none;
}
.blocker-item .b-dot.watch { background: var(--warning-solid); }
.blocker-item .b-dot.block { background: var(--danger-solid); }
.blocker-item .b-dot.info { background: var(--primary-01); }
.blocker-item .b-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; }
.blocker-item .b-note { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; line-height: 1.5; margin-top: 4px; }
.blocker-item .b-owner { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 4px; }
/* =========================================================
NEXT STAGE card (wide)
=========================================================*/
.next-stage {
display: grid;
grid-template-columns: 260px 1fr auto;
align-items: center;
gap: 24px;
padding: 20px 22px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
cursor: pointer;
transition: box-shadow 150ms;
}
.next-stage:hover { box-shadow: var(--shadow-depth); }
.next-stage .lead {
display: flex; align-items: center; gap: 14px;
}
.next-stage .lead-block {}
.next-stage .lead .stage-num {
font-family: var(--font-mono);
font-size: 12px; font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
letter-spacing: 0;
}
.next-stage .lead .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.next-stage .lead h3 { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.next-stage .lead .arrow-glyph {
width: 40px; height: 40px; border-radius: 12px;
background: var(--bg-inset); color: var(--text-secondary);
display: grid; place-items: center;
flex: none;
}
.next-stage .body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 20px;
align-items: flex-start;
}
.next-stage .body .col .k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.next-stage .body .col .v { font-size: 13.5px; font-weight: 600; letter-spacing: -0.015em; margin-top: 4px; }
.next-stage .body .col .v-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; }
.next-stage .body .outputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.next-stage .body .outputs .rc {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border-radius: 8px;
background: var(--bg-app);
color: var(--text-primary);
font-size: 12px; font-weight: 600; letter-spacing: -0.015em;
border: 1.5px solid var(--stroke-subtle);
}
.next-stage .tail {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
/* =========================================================
ALL STAGES compact list
=========================================================*/
.all-stages-card {
padding: 8px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
}
.all-stages-head { padding: 10px 14px 6px; display: flex; align-items: center; gap: 10px; }
.all-stages-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.all-stages-head .sub { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; }
.ss-row {
display: grid;
grid-template-columns: 40px minmax(0, 1.6fr) 100px 110px 160px 100px 16px;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
transition: background 150ms;
cursor: pointer;
}
.ss-row:hover { background: var(--bg-depth); }
.ss-row + .ss-row { border-top: 1px solid var(--stroke-subtle); border-radius: 0; }
.ss-node {
width: 32px; height: 32px; border-radius: 10px;
display: grid; place-items: center;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
font-family: var(--font-mono);
font-size: 11px; font-weight: 700; color: var(--text-secondary);
letter-spacing: 0;
}
.ss-node.done {
background: linear-gradient(180deg, #10B372, var(--primary-02));
border-color: transparent;
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.ss-node.now {
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-color: transparent;
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 4px rgba(42,133,255,0.14);
}
.ss-name { min-width: 0; }
.ss-name .n { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-primary); }
.ss-name .g { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row.upcoming .ss-name .n { color: var(--text-tertiary); font-weight: 500; }
.ss-cell {
font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em;
}
.ss-cell b { color: var(--text-primary); font-weight: 600; }
.ss-owner { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); letter-spacing: -0.02em; }
/* =========================================================
STAGES — vertical hero timeline
========================================================= */
.stages-shell {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 32px;
padding-left: 8px;
}
.stages-rail {
position: sticky; top: 220px;
align-self: start;
display: flex; flex-direction: column;
gap: 0;
padding: 6px 4px;
}
.stages-rail-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 6px 6px;
border-radius: 10px;
transition: background 150ms;
cursor: pointer;
position: relative;
}
.stages-rail-item:hover { background: var(--bg-depth); }
.stages-rail-item.active { background: var(--bg-surface); box-shadow: var(--shadow-widget); }
.stages-rail-item + .stages-rail-item::before {
content: "";
position: absolute;
left: 19px; top: -8px; bottom: calc(100% - 6px);
width: 2px;
background: var(--stroke-stroke2);
border-radius: 2px;
}
.stages-rail-item .r-num {
width: 28px; height: 28px;
border-radius: 8px;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
letter-spacing: 0;
}
.stages-rail-item.done .r-num {
background: linear-gradient(180deg, #10B372, var(--primary-02));
border-color: transparent;
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.stages-rail-item.now .r-num {
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-color: transparent;
color: white;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 4px rgba(42,133,255,0.16);
}
.stages-rail-item .r-name {
font-size: var(--fs-body-2);
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.stages-rail-item.upcoming .r-name { color: var(--text-tertiary); font-weight: 500; }
.stages-rail-item .r-sub {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.02em; margin-top: 2px;
}
.stages-body { display: flex; flex-direction: column; gap: 16px; }
.stage-card {
padding: 22px 26px 24px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
position: relative;
}
.stage-card.now { box-shadow: var(--shadow-depth); }
.stage-card.now::before {
content: "";
position: absolute; left: 0; top: 24px; bottom: 24px;
width: 4px;
background: linear-gradient(180deg, #5AA0FF, var(--primary-01));
border-radius: 0 4px 4px 0;
}
.stage-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.stage-num {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
padding: 3px 8px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
letter-spacing: 0;
}
.stage-num.done { background: rgba(0,166,86,0.08); color: var(--success-solid); }
.stage-num.now { background: rgba(42,133,255,0.08); color: var(--primary-01); }
.stage-title { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.stage-status { margin-left: auto; }
.stage-goal { font-size: var(--fs-body-1); color: var(--text-primary); letter-spacing: -0.015em; line-height: 1.55; margin: 8px 0 6px; max-width: 68ch; }
.stage-desc { font-size: var(--fs-body-2); color: var(--text-secondary); letter-spacing: -0.015em; line-height: 1.55; max-width: 68ch; }
.stage-meta {
display: flex; align-items: center; gap: 20px;
padding-top: 16px; margin-top: 16px;
border-top: 1px solid var(--stroke-subtle);
flex-wrap: wrap;
}
.stage-meta .m {
display: flex; align-items: center; gap: 6px;
font-size: 12px;
color: var(--text-secondary);
letter-spacing: -0.02em;
}
.stage-meta .m b { color: var(--text-primary); font-weight: 600; }
.stage-deliverables {
margin-top: 14px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.stage-deliv {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
background: var(--bg-app);
font-size: 12px;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.stage-deliv svg { color: var(--text-tertiary); flex: none; }
.stage-card.done .stage-title { color: var(--text-secondary); }
.stage-card.done { padding: 16px 22px; }
.stage-card.upcoming { padding: 16px 22px; opacity: 0.85; }
.stage-card.upcoming .stage-title { color: var(--text-tertiary); }
/* =========================================================
Grid helpers + utility
========================================================= */
.grid { display: grid; gap: 12px; }
.g-cols-3-1 { grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr); }
.g-cols-1-1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hstack { display: flex; align-items: center; }
.ml-auto { margin-left: auto; }
/* ============================================================
DESIGN WORKSPACE V2 (Phase 14) — reuses Core 2.0 tokens only.
No new colors. All strong color = semantic.
============================================================ */
.dv-root { padding-block: 4px; }
/* --- top nav row ------------------------------------------- */
.dv-nav-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.dv-seg {
display: inline-flex;
background: var(--bg-surface);
border-radius: var(--r-full);
padding: 4px;
box-shadow: var(--shadow-widget);
gap: 2px;
}
.dv-seg-btn {
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 8px 16px;
font: 500 13px/1 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-secondary);
border-radius: var(--r-full);
transition: background 160ms ease, color 160ms ease;
}
.dv-seg-btn:hover { color: var(--text-primary); }
.dv-seg-btn.active {
background: var(--bg-inset);
color: var(--text-light);
}
.dv-direction {
color: var(--text-tertiary);
font-size: 12px;
letter-spacing: -0.02em;
max-width: 60ch;
text-align: right;
margin-left: auto;
}
.dv-nav-actions { margin-left: auto; display: flex; align-items: center; }
/* --- eyebrow / shared bits --------------------------------- */
.dv-eyebrow {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.dot-sep { color: var(--text-muted); margin: 0 2px; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; }
/* ============================================================
OVERVIEW
============================================================ */
.dv-overview { display: flex; flex-direction: column; gap: 8px; }
/* --- context strip ---------------------------------------- */
.dv-context {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 24px 26px;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 24px;
align-items: center;
}
.dv-context-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dv-context-stage {
display: flex; align-items: baseline; gap: 12px; margin-top: 2px;
}
.dv-stage-code {
font-size: 14px; font-weight: 700; color: var(--text-tertiary);
letter-spacing: -0.02em;
}
.dv-stage-name {
font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
}
.dv-context-mission {
margin-top: 6px;
font-size: 14px; color: var(--text-secondary);
letter-spacing: -0.015em;
display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
}
.dv-context-mission b { color: var(--text-primary); font-weight: 700; }
.dv-context-next {
margin-top: 10px;
display: flex; align-items: center; gap: 4px;
font-size: 13px;
}
.dv-context-next-link {
color: var(--text-primary); font-weight: 600; letter-spacing: -0.015em;
text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms ease;
}
.dv-context-next-link:hover { background: var(--bg-depth); }
.dv-context-right {
display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
border-left: 1px solid var(--stroke-subtle);
padding-left: 24px;
align-self: stretch;
justify-content: center;
}
.dv-readiness {
display: flex; gap: 14px; align-items: center;
}
.dv-readiness-meta { display: flex; flex-direction: column; gap: 4px; }
.dv-readiness-val {
display: flex; align-items: center; gap: 8px;
font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dv-readiness-sub {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em;
}
/* --- readiness strip -------------------------------------- */
.dv-readiness-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin-top: 14px;
}
.dv-rs-cell {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 14px 16px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 4px;
border-top: 2px solid transparent;
}
.dv-rs-neutral { border-top-color: rgba(16,16,16,0.08); }
.dv-rs-green { border-top-color: rgba(0,166,86,0.35); }
.dv-rs-blue { border-top-color: rgba(42,133,255,0.35); }
.dv-rs-gray { border-top-color: rgba(16,16,16,0.14); }
.dv-rs-yellow { border-top-color: rgba(239,157,14,0.40); }
.dv-rs-n { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.dv-rs-lbl { font-size: 12px; color: var(--text-secondary); letter-spacing: -0.015em; }
/* --- large tiles ------------------------------------------ */
.dv-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
/* --- two-column layout ------------------------------------ */
.dv-two-col {
display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px;
margin-top: 22px;
}
.dv-strip { display: flex; flex-direction: column; gap: 8px; }
.dv-strip-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms cubic-bezier(0.4,0,0.2,1), box-shadow 160ms;
}
.dv-strip-row:hover { transform: translateY(-1px); }
.dv-strip-thumb {
width: 84px; height: 52px; border-radius: 8px; overflow: hidden;
background: var(--bg-highlight); flex: none;
border: 1px solid var(--stroke-subtle);
}
.dv-strip-meta { flex: 1; min-width: 0; }
.dv-strip-title {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dv-strip-sub {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em; margin-top: 2px;
display: flex; align-items: center; gap: 5px;
}
.dv-missing { display: flex; flex-direction: column; gap: 8px; }
.dv-missing-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dv-missing-row:hover { transform: translateY(-1px); }
.dv-missing-icon {
width: 32px; height: 32px; border-radius: 8px;
background: rgba(239,157,14,0.10); color: #EF9D0E;
display: flex; align-items: center; justify-content: center; flex: none;
}
.dv-missing-body { flex: 1; min-width: 0; }
.dv-missing-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.dv-missing-sub { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 2px; }
.dv-empty {
padding: 18px 20px; text-align: center;
color: var(--text-tertiary); font-size: 13px; letter-spacing: -0.015em;
border: 1.5px dashed var(--stroke-subtle);
border-radius: var(--r-xl);
}
.dv-empty-large { padding: 40px 20px; font-size: 14px; }
/* ============================================================
DESIGNS GALLERY
============================================================ */
.dv-designs { display: flex; flex-direction: column; gap: 16px; }
.dv-filters {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
}
.dv-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dv-filter-selects { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dv-chip {
appearance: none; border: 1.5px solid var(--stroke-subtle);
background: var(--bg-surface);
padding: 7px 14px;
border-radius: var(--r-full);
font: 500 12px/1 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-secondary);
cursor: pointer;
transition: all 160ms ease;
display: inline-flex; align-items: center; gap: 6px;
}
.dv-chip:hover { color: var(--text-primary); border-color: var(--stroke-stroke2); }
.dv-chip.active {
background: var(--bg-inset);
border-color: var(--bg-inset);
color: var(--text-light);
}
.dv-chip-n {
font-size: 11px; color: inherit; opacity: 0.7;
font-weight: 500;
}
.dv-chip.active .dv-chip-n { opacity: 0.6; }
.dv-select {
appearance: none;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-subtle);
border-radius: var(--r-full);
padding: 7px 30px 7px 12px;
font: 500 12px/1 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-primary);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 12px 12px;
}
.dv-select:hover { border-color: var(--stroke-stroke2); }
.dv-select-sm { padding: 5px 26px 5px 10px; font-size: 11px; }
.dv-clear {
appearance: none; border: 0; background: transparent;
color: var(--text-tertiary); font: 500 12px/1 'Inter', system-ui;
cursor: pointer; padding: 6px 8px;
letter-spacing: -0.015em;
}
.dv-clear:hover { color: var(--text-primary); }
.dv-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* --- gallery card ----------------------------------------- */
.dv-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
overflow: hidden;
text-decoration: none;
display: flex; flex-direction: column;
box-shadow: var(--shadow-widget);
transition: transform 160ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms;
position: relative;
}
.dv-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-depth);
}
.dv-card-preview {
aspect-ratio: 16/10;
background: var(--bg-highlight);
border-bottom: 1px solid var(--stroke-subtle);
position: relative;
overflow: hidden;
}
.dv-flow-badge {
position: absolute; top: 10px; right: 10px;
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 8px;
background: rgba(20,20,20,0.75);
color: white;
border-radius: var(--r-full);
font: 600 10px/1 'Inter', system-ui;
letter-spacing: 0.02em;
backdrop-filter: blur(4px);
}
.dv-card-meta {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.dv-card-title {
font-size: 14px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dv-card-row {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary);
}
.dv-card-bottom { justify-content: space-between; }
.dv-type-chip {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px;
background: var(--bg-app);
color: var(--text-secondary);
border-radius: var(--r-full);
font: 500 10px/1.4 'Inter', system-ui;
letter-spacing: 0.01em;
}
.dv-ver {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; color: var(--text-tertiary);
padding: 2px 6px;
background: var(--bg-app);
border-radius: var(--r-sm);
}
.dv-ver-big {
font-size: 12px; padding: 4px 8px;
}
.dv-owner {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-secondary);
min-width: 0; max-width: 60%;
}
.dv-updated {
font-size: 11px; color: var(--text-muted); letter-spacing: -0.015em;
}
/* ============================================================
FLOW STRIP
============================================================ */
.dv-flow-strip {
display: flex; align-items: center; gap: 10px;
overflow-x: auto;
padding: 20px 4px 12px;
scrollbar-width: thin;
}
.dv-flow-strip-compact { padding: 12px 4px; }
.dv-flow-step { display: flex; flex-direction: column; gap: 8px; flex: none; }
.dv-flow-thumb {
width: 180px; height: 112px;
border-radius: 12px;
overflow: hidden;
background: var(--bg-highlight);
border: 1px solid var(--stroke-subtle);
}
.dv-flow-strip-compact .dv-flow-thumb { width: 140px; height: 88px; }
.dv-flow-label {
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.dv-flow-num {
font-family: 'JetBrains Mono', monospace;
color: var(--text-muted); font-size: 10px;
padding: 2px 5px; border-radius: 4px;
background: var(--bg-app);
}
.dv-flow-arrow { flex: none; color: var(--text-tertiary); padding-bottom: 22px; }
.dv-flow-meta { color: var(--text-tertiary); font-size: 12px; letter-spacing: -0.015em; }
/* ============================================================
ITEM DETAIL
============================================================ */
.dv-detail { display: flex; flex-direction: column; gap: 16px; }
.dv-back {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-tertiary);
font-size: 12px; font-weight: 500; letter-spacing: -0.015em;
text-decoration: none;
width: fit-content;
padding: 6px 10px 6px 6px;
border-radius: var(--r-full);
transition: color 160ms, background 160ms;
}
.dv-back:hover { color: var(--text-primary); background: var(--bg-app); }
/* --- header ----------------------------------------------- */
.dv-detail-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 22px 26px;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
.dv-detail-head-l { min-width: 0; }
.dv-detail-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.dv-detail-title {
font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.2;
margin: 8px 0 12px;
}
.dv-detail-meta {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.dv-detail-meta-item {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-secondary); letter-spacing: -0.015em;
}
.dv-detail-meta-item.link {
text-decoration: none;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms;
}
.dv-detail-meta-item.link:hover { background: var(--bg-depth); color: var(--text-primary); }
.dv-detail-head-r {
display: flex; flex-direction: column; gap: 14px;
align-items: flex-end;
}
.dv-detail-people { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.dv-detail-owner, .dv-detail-reviewers { display: flex; flex-direction: column; gap: 6px; }
.dv-detail-owner-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dv-detail-reviewer-row {
display: flex; gap: 6px; flex-wrap: wrap;
}
.dv-reviewer-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px 3px 3px;
border-radius: var(--r-full);
background: var(--bg-app);
font: 500 12px/1.2 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-secondary);
}
.dv-detail-actions { display: flex; gap: 6px; }
/* --- main split ------------------------------------------- */
.dv-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
gap: 16px;
}
/* --- preview card ----------------------------------------- */
.dv-detail-preview-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 16px;
display: flex; flex-direction: column; gap: 14px;
}
.dv-preview-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.dv-preview-bar-l { display: flex; align-items: center; gap: 8px; }
.dv-preview-bar-r { display: flex; align-items: center; gap: 4px; }
.dv-platform-toggle {
display: inline-flex; background: var(--bg-app);
border-radius: var(--r-full); padding: 3px; gap: 2px;
}
.dv-platform-btn {
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 6px 12px;
font: 500 12px/1 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-tertiary);
border-radius: var(--r-full);
display: inline-flex; align-items: center; gap: 5px;
transition: all 160ms ease;
}
.dv-platform-btn:hover { color: var(--text-primary); }
.dv-platform-btn.active {
background: var(--bg-surface);
color: var(--text-primary);
box-shadow: var(--shadow-widget);
}
.dv-zoom {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; color: var(--text-tertiary);
padding: 0 8px;
}
.icon-btn-sm { width: 30px; height: 30px; }
.dv-preview-frame {
border-radius: var(--r-2xl);
background:
linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)),
repeating-linear-gradient(
45deg,
var(--bg-highlight) 0 8px,
var(--bg-app) 8px 16px
);
padding: 32px;
min-height: 480px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.dv-preview-inner {
width: 100%; max-width: 880px; aspect-ratio: 16/10;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 0 0 1px rgba(0,0,0,0.06),
0 12px 32px rgba(0,0,0,0.10),
0 40px 80px rgba(0,0,0,0.08);
}
.dv-plat-mobile .dv-preview-inner { max-width: 320px; aspect-ratio: 9/16; }
.dv-plat-dialog .dv-preview-inner { max-width: 560px; aspect-ratio: 4/3; }
.dv-preview-caption {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em; text-align: center;
display: flex; align-items: center; gap: 4px; justify-content: center;
}
/* --- rail ------------------------------------------------- */
.dv-detail-rail { display: flex; flex-direction: column; gap: 12px; }
.dv-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.dv-rail-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dv-rail-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.dv-count {
font-size: 12px; color: var(--text-tertiary);
padding: 2px 8px; background: var(--bg-app);
border-radius: var(--r-full);
}
/* review track */
.dv-review-track {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 4px; position: relative;
padding: 4px 0 6px;
}
.dv-review-track::before {
content: ''; position: absolute; top: 12px; left: 6%; right: 6%;
height: 2px; background: var(--bg-depth);
}
.dv-review-node {
display: flex; flex-direction: column; align-items: center;
gap: 6px; position: relative; z-index: 1;
}
.dv-review-dot {
width: 12px; height: 12px; border-radius: 999px;
background: var(--bg-depth);
border: 2px solid var(--bg-surface);
box-shadow: 0 0 0 1px var(--bg-depth);
}
.dv-review-node.active .dv-review-dot {
background: var(--primary-01);
box-shadow: 0 0 0 1px var(--primary-01);
}
.dv-review-node.now .dv-review-dot {
animation: dv-pulse 2.2s ease-in-out infinite;
}
@keyframes dv-pulse {
0%, 100% { box-shadow: 0 0 0 1px var(--primary-01); }
50% { box-shadow: 0 0 0 5px rgba(42,133,255,0.20); }
}
.dv-review-lbl {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em; text-align: center;
}
.dv-review-node.active .dv-review-lbl { color: var(--text-primary); font-weight: 500; }
/* comments */
.dv-comments { display: flex; flex-direction: column; gap: 10px; }
.dv-comment {
display: flex; gap: 10px;
padding: 10px 12px;
background: var(--bg-app);
border-radius: var(--r-lg);
border-left: 3px solid transparent;
}
.dv-comment-approve { border-left-color: rgba(0,166,86,0.55); }
.dv-comment-change { border-left-color: rgba(239,157,14,0.55); }
.dv-comment-update { border-left-color: rgba(42,133,255,0.55); }
.dv-comment-body { flex: 1; min-width: 0; }
.dv-comment-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.dv-comment-head b { color: var(--text-primary); font-weight: 600; letter-spacing: -0.015em; }
.dv-comment-when { color: var(--text-muted); font-size: 11px; }
.dv-comment-text {
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.5;
margin-top: 4px;
}
/* checklist */
.dv-checklist { display: flex; flex-direction: column; gap: 8px; }
.dv-checklist-row {
display: flex; gap: 10px; align-items: flex-start;
padding: 6px 4px;
}
.dv-check {
width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid var(--stroke-stroke2);
display: inline-flex; align-items: center; justify-content: center;
flex: none; margin-top: 1px;
color: white;
transition: all 160ms ease;
}
.dv-checklist-row.done .dv-check {
background: var(--success-solid, #00A656);
border-color: var(--success-solid, #00A656);
}
.dv-checklist-body { flex: 1; min-width: 0; }
.dv-checklist-title {
font-size: 13px; color: var(--text-primary); font-weight: 500;
letter-spacing: -0.015em;
}
.dv-checklist-row.done .dv-checklist-title {
color: var(--text-tertiary); text-decoration: line-through;
text-decoration-color: rgba(16,16,16,0.20);
}
.dv-checklist-meta {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em; margin-top: 3px;
}
/* related */
.dv-related-list { display: flex; flex-direction: column; gap: 6px; }
.dv-related-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--r-lg);
text-decoration: none; color: var(--text-primary);
font-size: 13px; letter-spacing: -0.015em; font-weight: 500;
background: var(--bg-app);
transition: background 160ms;
}
.dv-related-row:hover { background: var(--bg-depth); }
.dv-related-row span:not(.dv-related-tag) { flex: 1; min-width: 0; }
.dv-related-tag {
font-size: 10px; color: var(--text-tertiary);
padding: 2px 6px; background: var(--bg-surface);
border-radius: 5px;
}
/* --- attachments strip ------------------------------------ */
.dv-attach-block { display: flex; flex-direction: column; gap: 4px; }
.dv-attach-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.dv-attach {
display: flex; gap: 12px; align-items: center;
background: var(--bg-surface);
padding: 14px;
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
transition: transform 160ms;
}
.dv-attach:hover { transform: translateY(-1px); }
.dv-attach-thumb {
width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
background: var(--bg-highlight);
display: flex; align-items: center; justify-content: center;
flex: none;
}
.dv-attach-lav .dv-attach-thumb { background: rgba(202,189,255,0.20); }
.dv-attach-peach .dv-attach-thumb { background: rgba(255,188,153,0.20); }
.dv-attach-sky .dv-attach-thumb { background: rgba(177,229,252,0.25); }
.dv-attach-mint .dv-attach-thumb { background: rgba(181,228,202,0.25); }
.dv-attach-meta { flex: 1; min-width: 0; }
.dv-attach-title {
font-size: 13px; color: var(--text-primary); font-weight: 600;
letter-spacing: -0.015em;
}
.dv-attach-sub {
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em;
margin-top: 3px;
}
/* --- flow block ------------------------------------------- */
.dv-flow-block {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 18px 22px 6px;
}
.dv-flow-container { overflow-x: auto; }
/* ============================================================
LIBRARY
============================================================ */
.dv-library { display: flex; flex-direction: column; gap: 18px; }
.dv-lib-sec { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.dv-tokens-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.dv-token-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 16px 18px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 12px;
min-height: 180px;
}
.dv-token-label {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.dv-swatches { display: flex; flex-direction: column; gap: 8px; }
.dv-swatch { display: flex; align-items: center; gap: 10px; }
.dv-swatch-chip {
width: 34px; height: 34px; border-radius: 8px;
border: 1px solid var(--stroke-subtle);
flex: none;
}
.dv-swatch-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-swatch-name { font-size: 12px; color: var(--text-primary); }
.dv-swatch-hex { font-size: 11px; color: var(--text-tertiary); }
.dv-type-samples { display: flex; gap: 16px; align-items: center; }
.dv-type-scale { display: flex; flex-direction: column; gap: 6px; }
.dv-radii { display: flex; flex-wrap: wrap; gap: 10px; }
.dv-radius { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dv-radius-chip {
width: 42px; height: 42px;
background: var(--bg-app);
border: 1.5px solid var(--stroke-stroke2);
}
.dv-radius-lbl { font-size: 10px; color: var(--text-tertiary); }
.dv-elev-samples { display: flex; gap: 12px; }
.dv-elev {
padding: 18px 20px;
border-radius: var(--r-xl);
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em;
background: var(--bg-surface);
}
.dv-elev-widget { box-shadow: var(--shadow-widget); }
.dv-elev-depth { box-shadow: var(--shadow-depth); }
.dv-elev-inset {
background: var(--bg-inset); color: var(--text-light);
box-shadow: none;
}
/* components */
.dv-comp-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.dv-comp {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 16px 18px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 12px;
min-height: 128px;
}
.dv-comp-title {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.dv-comp-body { display: flex; flex: 1; align-items: center; }
/* icons */
.dv-icons-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px;
}
.dv-icon-cell {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 6px;
border-radius: var(--r-md);
color: var(--text-secondary);
transition: background 160ms, color 160ms;
}
.dv-icon-cell:hover { background: var(--bg-app); color: var(--text-primary); }
.dv-icon-name { font-size: 10px; color: var(--text-tertiary); }
/* illustrations */
.dv-illus-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.dv-illus {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 14px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
}
.dv-illus-frame {
aspect-ratio: 3/2;
background: var(--bg-highlight);
border-radius: var(--r-md);
overflow: hidden;
}
.dv-illus-name { font-size: 12px; color: var(--text-primary); letter-spacing: -0.015em; font-weight: 500; }
/* assets */
.dv-assets-row {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.dv-asset-tile {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 12px;
box-shadow: var(--shadow-widget);
display: flex; gap: 12px; align-items: center;
}
.dv-asset-thumb {
width: 56px; height: 42px;
background: var(--bg-highlight);
border-radius: 8px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--stroke-subtle);
}
.dv-asset-body { flex: 1; min-width: 0; }
.dv-asset-name { font-size: 13px; color: var(--text-primary); font-weight: 600; letter-spacing: -0.015em; }
.dv-asset-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
/* ============================================================
RESPONSIVE (light)
============================================================ */
@media (max-width: 1200px) {
.dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-tokens-grid,
.dv-comp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-attach-grid,
.dv-illus-grid,
.dv-assets-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dv-readiness-strip { grid-template-columns: repeat(3, 1fr); }
.dv-detail-grid { grid-template-columns: 1fr; }
.dv-context, .dv-detail-head { grid-template-columns: 1fr; }
.dv-context-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--stroke-subtle); padding-top: 16px; }
.dv-detail-head-r { align-items: flex-start; }
}
/* ============================================================
DEVELOPMENT WORKSPACE V2 (Phase 15) — reuses .dv-* patterns
where semantically identical; adds .dvd-* for new surfaces.
Neutral surfaces. State-only color. No rainbow by category.
============================================================ */
.dvd-root { padding-block: 4px; }
.dvd-overview,
.dvd-systems,
.dvd-delivery,
.dvd-detail { display: flex; flex-direction: column; gap: 18px; }
/* --- current-stage additions ------------------------------- */
.dvd-active-missions {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
margin-top: 8px;
}
.dvd-mission-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font: 500 12px/1 'Inter', system-ui;
letter-spacing: -0.015em;
text-decoration: none;
transition: background 160ms ease;
}
.dvd-mission-chip:hover { background: var(--bg-depth); }
/* --- 5-cell readiness strip ------------------------------- */
.dvd-readiness-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.dvd-rs {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 14px 16px 16px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
}
.dvd-rs-head {
display: flex; align-items: baseline; justify-content: space-between;
}
.dvd-rs-label {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; font-weight: 500;
}
.dvd-rs-frac {
font-size: 14px; color: var(--text-primary);
font-weight: 700;
}
.dvd-rs-bar {
height: 6px; border-radius: 999px;
background: var(--bg-depth);
overflow: hidden;
}
.dvd-rs-fill {
height: 100%; border-radius: 999px;
transition: width 400ms cubic-bezier(0.4,0,0.2,1);
}
.dvd-rs-fill-green { background: #00A656; }
.dvd-rs-fill-blue { background: #2A85FF; }
.dvd-rs-fill-yellow { background: #EF9D0E; }
.dvd-rs-fill-red { background: #FF381C; }
.dvd-rs-fill-gray { background: var(--text-muted); }
.dvd-rs-sub {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
/* ============================================================
ARCHITECTURE MAP
============================================================ */
.dvd-arch-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 20px 22px 12px;
display: flex; flex-direction: column; gap: 12px;
overflow: hidden;
}
.dvd-arch-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.dvd-arch-title {
margin: 4px 0 0;
font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dvd-arch-legend {
display: flex; gap: 16px; align-items: center;
color: var(--text-tertiary);
font-size: 11px; letter-spacing: -0.015em;
}
.dvd-arch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dvd-leg {
display: inline-block; width: 18px; height: 2px; border-radius: 2px;
background: rgba(16,16,16,0.18);
}
.dvd-leg-blue { background: #2A85FF; opacity: 0.6; }
.dvd-leg-gray { background: rgba(16,16,16,0.18); }
.dvd-leg-dash {
background: linear-gradient(90deg,
rgba(16,16,16,0.18) 0 4px, transparent 4px 8px,
rgba(16,16,16,0.18) 8px 12px, transparent 12px 16px,
rgba(16,16,16,0.18) 16px);
}
.dvd-arch-svg-wrap {
border-radius: var(--r-2xl);
padding: 12px;
overflow: hidden;
}
.dvd-node rect { transition: stroke 160ms ease, fill 160ms ease; }
.dvd-node:hover rect:first-of-type {
stroke: #2A85FF;
fill: #FBFAF6;
}
/* ============================================================
CATEGORY GLYPHS — deliberately monochrome. Category is
conveyed by icon + short badge, never by color.
============================================================ */
.dvd-cat-glyph {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--bg-app);
color: var(--text-secondary);
display: flex; align-items: center; justify-content: center;
flex: none;
border: 1px solid var(--stroke-subtle);
}
.dvd-cat-badge {
display: inline-flex; align-items: center;
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font-size: 10px; font-weight: 600;
letter-spacing: 0.02em;
}
/* --- active work list ------------------------------------- */
.dvd-work-list, .dvd-decisions { display: flex; flex-direction: column; gap: 8px; }
.dvd-work-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dvd-work-row:hover { transform: translateY(-1px); }
.dvd-work-body { flex: 1; min-width: 0; }
.dvd-work-title {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dvd-work-sub {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em;
margin-top: 2px;
}
.dvd-work-owner {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-secondary);
letter-spacing: -0.015em;
max-width: 30%; min-width: 0;
}
/* --- decisions list --------------------------------------- */
.dvd-decision {
display: flex; align-items: center; gap: 16px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dvd-decision:hover { transform: translateY(-1px); }
.dvd-decision-body { flex: 1; min-width: 0; }
.dvd-decision-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.dvd-decision-why { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 3px; }
.dvd-decision-meta {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em;
white-space: nowrap;
}
/* ============================================================
SYSTEMS — structured rows
============================================================ */
.dvd-sys-list { display: flex; flex-direction: column; gap: 6px; }
.dvd-sys-row {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms, box-shadow 200ms;
}
.dvd-sys-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-depth); }
.dvd-sys-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dvd-sys-head-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dvd-sys-name {
font-size: 15px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em;
}
.dvd-sys-purpose {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dvd-sys-meta {
display: flex; align-items: center; gap: 14px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 2px;
}
.dvd-sys-tech { display: inline-flex; align-items: center; gap: 5px; }
.dvd-sys-more {
padding: 1px 6px; border-radius: 4px;
background: var(--bg-app);
font-size: 10px;
}
.dvd-sys-deps {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: var(--r-full);
background: var(--bg-app);
}
.dvd-sys-owner {
display: flex; align-items: center; gap: 8px;
flex: none; min-width: 140px;
}
.dvd-sys-owner-meta { display: flex; flex-direction: column; gap: 2px; }
.dvd-sys-owner-name { font-size: 12px; color: var(--text-primary); font-weight: 500; letter-spacing: -0.015em; }
.dvd-sys-owner-when { font-size: 10px; color: var(--text-tertiary); }
/* ============================================================
SYSTEM DETAIL
============================================================ */
.dvd-detail-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 24px 28px;
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
.dvd-detail-head-l { min-width: 0; }
.dvd-detail-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.dvd-detail-title {
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
margin: 8px 0 10px;
}
.dvd-detail-purpose {
font-size: 16px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
margin: 0 0 14px; max-width: 60ch;
}
.dvd-detail-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.dvd-detail-meta-item {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-secondary); letter-spacing: -0.015em;
}
.dvd-detail-meta-item.link {
text-decoration: none;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms;
}
.dvd-detail-meta-item.link:hover { background: var(--bg-depth); color: var(--text-primary); }
.dvd-detail-head-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.dvd-detail-owner-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dvd-detail-owner-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dvd-tech-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; max-width: 320px; }
.dvd-tech-chip {
padding: 3px 9px; border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-secondary);
font-size: 11px; letter-spacing: -0.015em;
}
/* --- body split ------------------------------------------- */
.dvd-detail-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 16px;
}
.dvd-detail-main { display: flex; flex-direction: column; gap: 14px; }
.dvd-detail-rail { display: flex; flex-direction: column; gap: 12px; }
.dvd-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 22px 26px;
display: flex; flex-direction: column; gap: 16px;
}
.dvd-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.dvd-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.dvd-card-head h3 {
margin: 0;
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dvd-card-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.dvd-count-line { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; }
.dvd-prose {
margin: 0;
font-size: 15px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.6;
}
/* --- responsibility --------------------------------------- */
.dvd-resp {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding-top: 6px;
border-top: 1px solid var(--stroke-subtle);
}
.dvd-resp-col { display: flex; flex-direction: column; gap: 8px; }
.dvd-resp-list {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 6px;
}
.dvd-resp-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dvd-resp-check {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 5px;
background: rgba(0,166,86,0.10);
color: #00A656;
flex: none; margin-top: 1px;
}
.dvd-resp-x {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 5px;
background: var(--bg-app);
color: var(--text-muted);
flex: none; margin-top: 1px;
font-weight: 700;
}
.dvd-resp-not li { color: var(--text-secondary); }
/* --- dependencies ----------------------------------------- */
.dvd-deps {
padding: 4px;
border-radius: var(--r-2xl);
overflow-x: auto;
}
/* --- API endpoints table ---------------------------------- */
.dvd-api-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
}
.dvd-api-table th {
text-align: left;
padding: 8px 12px;
color: var(--text-tertiary);
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
border-bottom: 1px solid var(--stroke-subtle);
}
.dvd-api-table td {
padding: 12px;
border-bottom: 1px solid var(--stroke-subtle);
color: var(--text-primary);
letter-spacing: -0.015em;
vertical-align: middle;
}
.dvd-api-table tr:last-child td { border-bottom: 0; }
.dvd-api-table tr:hover td { background: var(--bg-highlight); }
.dvd-api-table td:nth-child(2) { color: var(--text-primary); font-size: 12px; }
.dvd-api-table td:nth-child(3) { color: var(--text-secondary); }
.dvd-http {
display: inline-block;
padding: 3px 8px;
border-radius: 5px;
font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.05em;
min-width: 46px; text-align: center;
}
.dvd-http-get { background: rgba(42,133,255,0.10); color: #2A85FF; }
.dvd-http-post { background: rgba(0,166,86,0.10); color: #00A656; }
.dvd-http-patch { background: rgba(239,157,14,0.12); color: #EF9D0E; }
.dvd-http-delete { background: rgba(255,56,28,0.10); color: #FF381C; }
.dvd-api-example {
margin-top: 12px;
border-top: 1px dashed var(--stroke-subtle);
padding-top: 14px;
display: flex; flex-direction: column; gap: 10px;
}
.dvd-api-ex-head {
display: flex; align-items: center; gap: 10px;
}
.dvd-api-ex-line { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); }
.dvd-api-ex-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.dvd-api-ex-label {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 6px;
}
.dvd-code {
margin: 0;
/* Intentional literal — --bg-inset in tokens.css is a light "inset chrome"
surface (#F1F1F1) used for kbd chips, not a dark code surface. */
background: #141414;
color: rgba(255,255,255,0.90);
border-radius: var(--r-md);
padding: 12px 14px;
font: 500 11.5px/1.55 'JetBrains Mono', ui-monospace, monospace;
overflow-x: auto;
white-space: pre;
}
/* --- linked canonical grid -------------------------------- */
.dvd-linked-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.dvd-linked-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
color: var(--text-primary);
font-size: 12px; font-weight: 500;
letter-spacing: -0.015em;
margin-bottom: 6px;
transition: background 160ms;
}
.dvd-linked-row span:not(.label) { flex: 1; min-width: 0; }
.dvd-linked-row:hover { background: var(--bg-depth); }
/* --- rail lists ------------------------------------------- */
.dvd-env-list { display: flex; flex-direction: column; gap: 6px; }
.dvd-env-row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
font-size: 13px;
}
.dvd-env-name {
color: var(--text-primary); font-weight: 500;
letter-spacing: -0.015em;
}
.dvd-check-list { display: flex; flex-direction: column; gap: 6px; }
.dvd-check-row {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dvd-check-glyph {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid var(--stroke-stroke2);
color: white; flex: none;
transition: all 160ms ease;
}
.dvd-check-glyph-passed { background: #00A656; border-color: #00A656; }
.dvd-check-glyph-pending { background: transparent; }
.dvd-check-glyph-blocked { background: #FF381C; border-color: #FF381C; }
.dvd-risk-list { display: flex; flex-direction: column; gap: 8px; }
.dvd-risk-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px;
background: var(--bg-app);
border-radius: var(--r-lg);
border-left: 3px solid transparent;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dvd-risk-note { border-left-color: rgba(42,133,255,0.55); }
.dvd-risk-attention { border-left-color: rgba(239,157,14,0.55); }
.dvd-risk-blocker { border-left-color: rgba(255,56,28,0.55); }
.dvd-risk-dot {
width: 8px; height: 8px; border-radius: 999px;
background: currentColor; opacity: 0.35;
flex: none; margin-top: 6px;
}
.dvd-decision-links { display: flex; flex-direction: column; gap: 6px; }
.dvd-decision-link {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
color: var(--text-primary);
font-size: 12px; font-weight: 500; letter-spacing: -0.015em;
transition: background 160ms;
}
.dvd-decision-link:hover { background: var(--bg-depth); }
/* ============================================================
DELIVERY
============================================================ */
.dvd-env-grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.dvd-env-tile {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 8px;
border-top: 2px solid transparent;
}
.dvd-env-tone-green { border-top-color: rgba(0,166,86,0.45); }
.dvd-env-tone-blue { border-top-color: rgba(42,133,255,0.45); }
.dvd-env-tone-yellow { border-top-color: rgba(239,157,14,0.45); }
.dvd-env-tone-red { border-top-color: rgba(255,56,28,0.45); }
.dvd-env-tone-gray { border-top-color: rgba(16,16,16,0.14); }
.dvd-env-tile-head {
display: flex; align-items: center; justify-content: space-between;
}
.dvd-env-tile-head .dvd-env-name {
font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary);
}
.dvd-env-url {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dvd-env-counts {
display: flex; flex-wrap: wrap; gap: 10px;
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em;
margin-top: 4px;
}
.dvd-env-counts b {
color: var(--text-primary); margin-right: 3px;
font-weight: 700;
}
.dvd-env-blocked b { color: #FF381C; }
/* --- release readiness ------------------------------------ */
.dvd-release-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.dvd-release {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 22px 24px;
display: flex; flex-direction: column; gap: 14px;
}
.dvd-release-shipped { opacity: 0.85; }
.dvd-release-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.dvd-release-name {
font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary);
}
.dvd-release-when {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 2px;
}
.dvd-release-note {
margin: 0;
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dvd-release-bar {
height: 6px; border-radius: 999px;
background: var(--bg-depth); overflow: hidden;
}
.dvd-release-fill {
height: 100%; background: #2A85FF;
transition: width 400ms cubic-bezier(0.4,0,0.2,1);
}
.dvd-release-fill-blocked { background: #FF381C; }
.dvd-release-stat {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em;
}
.dvd-release-shipped .dvd-release-fill { background: #00A656; }
.dvd-release-items {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 6px;
border-top: 1px solid var(--stroke-subtle);
padding-top: 12px;
}
.dvd-release-item {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dvd-release-item-title { flex: 1; min-width: 0; }
.dvd-release-check {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid var(--stroke-stroke2);
color: white; flex: none;
transition: all 160ms ease;
}
.dvd-release-check.is-done { background: #00A656; border-color: #00A656; }
.dvd-release-check.is-blocked { background: #FF381C; border-color: #FF381C; }
/* --- QA list ---------------------------------------------- */
.dvd-qa-list { display: flex; flex-direction: column; gap: 6px; }
.dvd-qa-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
}
.dvd-qa-body { flex: 1; min-width: 0; }
.dvd-qa-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.dvd-qa-note { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 2px; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.dvd-readiness-strip { grid-template-columns: repeat(3, 1fr); }
.dvd-env-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dvd-release-grid { grid-template-columns: 1fr; }
.dvd-detail-grid { grid-template-columns: 1fr; }
.dvd-detail-head { grid-template-columns: 1fr; }
.dvd-detail-head-r { align-items: flex-start; }
.dvd-tech-chips { justify-content: flex-start; }
.dvd-linked-grid { grid-template-columns: 1fr; }
.dvd-api-ex-body { grid-template-columns: 1fr; }
.dvd-resp { grid-template-columns: 1fr; }
}
/* ============================================================
COMMERCIAL WORKSPACE V2 (Phase 16) — reuses dv-* patterns
where semantically identical; adds cw-* for new surfaces.
Calm / editorial / document-oriented. Money values are NOT
green — big values are text-primary in mono. Semantic color
is reserved for actual state.
============================================================ */
.cw-root { padding-block: 4px; }
.cw-overview, .cw-contracts, .cw-milestones, .cw-detail {
display: flex; flex-direction: column; gap: 22px;
}
.cw-count-line { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; }
.cw-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.cw-eyebrow-inline {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 5px;
}
/* --- client mark (letter chip) ---------------------------- */
.cw-client-mark {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: 6px;
color: rgba(16,16,16,0.72);
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.02em;
}
.cw-client-mark-lg {
width: 44px; height: 44px; border-radius: 12px;
font-size: 14px;
}
/* ============================================================
ACTIVE AGREEMENT (Overview flagship)
============================================================ */
.cw-agreement {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 32px 34px;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
gap: 32px;
align-items: stretch;
}
.cw-agreement-left { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cw-agreement-title {
margin: 0;
font-size: 32px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
}
.cw-agreement-meta {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.cw-agreement-meta-item {
display: inline-flex; align-items: center; gap: 5px;
letter-spacing: -0.015em;
}
.cw-agreement-summary {
margin: 6px 0 0;
font-size: 15px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.6;
max-width: 60ch;
}
.cw-agreement-people {
display: flex; gap: 32px; flex-wrap: wrap;
padding-top: 14px;
margin-top: auto;
border-top: 1px solid var(--stroke-subtle);
}
.cw-person { display: flex; flex-direction: column; gap: 6px; }
.cw-person-row { display: flex; align-items: center; gap: 10px; }
.cw-person-name {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.cw-person-role {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-agreement-right {
display: flex; flex-direction: column; gap: 16px;
padding-left: 32px;
border-left: 1px solid var(--stroke-subtle);
}
.cw-value-block { display: flex; flex-direction: column; gap: 4px; }
.cw-value {
font-size: 44px; font-weight: 700; letter-spacing: -0.03em;
color: var(--text-primary); line-height: 1;
margin-top: 4px;
}
.cw-value-sub {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-primary-doc {
display: flex; align-items: stretch; gap: 12px;
padding: 12px;
border-radius: var(--r-xl);
background: var(--bg-highlight);
text-decoration: none;
transition: background 160ms ease;
}
.cw-primary-doc:hover { background: var(--bg-depth); }
.cw-primary-doc-cover {
width: 62px; height: 82px;
border-radius: 6px;
overflow: hidden;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
flex: none;
}
.cw-primary-doc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.cw-primary-doc-title {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.cw-primary-doc-sub {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-open-cta { justify-content: center; }
/* ============================================================
JOURNEY (timeline)
============================================================ */
.cw-journey-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 22px 24px;
overflow-x: auto;
}
.cw-journey {
display: flex; align-items: flex-start; gap: 0;
min-width: min-content;
}
.cw-jn {
flex: 1 1 0; min-width: 172px;
display: flex; flex-direction: column; align-items: flex-start;
gap: 8px;
padding: 12px 14px;
border-radius: var(--r-xl);
background: transparent;
text-decoration: none;
transition: background 160ms ease;
}
.cw-jn:hover { background: var(--bg-app); }
.cw-jn-dot {
width: 22px; height: 22px;
border-radius: 999px;
background: var(--bg-app);
border: 2px solid var(--bg-surface);
box-shadow: 0 0 0 1px var(--stroke-stroke2);
display: flex; align-items: center; justify-content: center;
color: white;
}
.cw-jn-complete .cw-jn-dot { background: #00A656; box-shadow: 0 0 0 1px #00A656; }
.cw-jn-attention .cw-jn-dot { background: #EF9D0E; box-shadow: 0 0 0 1px #EF9D0E; }
.cw-jn-blocked .cw-jn-dot { background: #FF381C; box-shadow: 0 0 0 1px #FF381C; }
.cw-jn-upcoming .cw-jn-dot { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--stroke-stroke2); }
.cw-jn-not-started .cw-jn-dot { background: var(--bg-surface); box-shadow: 0 0 0 1px var(--stroke-subtle); opacity: 0.5; }
.cw-jn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cw-jn-stage {
font-size: 10px; color: var(--text-tertiary);
letter-spacing: 0.02em;
}
.cw-jn-name {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.4;
}
.cw-jn-meta {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-jn-amount { color: var(--text-primary); font-weight: 600; }
.cw-jn-connect {
flex: 0 0 32px;
align-self: center;
margin-top: 10px;
height: 1.5px;
background: repeating-linear-gradient(90deg,
var(--stroke-stroke2) 0 4px,
transparent 4px 8px
);
}
.cw-journey-dense .cw-jn { padding: 8px 10px; min-width: 132px; }
.cw-journey-dense .cw-jn-name { font-size: 12px; }
/* ============================================================
NEEDS ATTENTION / UPCOMING
============================================================ */
.cw-attn-list { display: flex; flex-direction: column; gap: 6px; }
.cw-attn-row {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
border-left: 3px solid rgba(239,157,14,0.55);
text-decoration: none;
transition: transform 160ms;
}
.cw-attn-row:hover { transform: translateY(-1px); }
.cw-attn-glyph {
width: 32px; height: 32px; border-radius: 10px;
background: rgba(239,157,14,0.10);
color: #EF9D0E;
display: flex; align-items: center; justify-content: center;
flex: none;
}
.cw-attn-body { flex: 1; min-width: 0; }
.cw-attn-title { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-attn-sub {
display: flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-tertiary);
margin-top: 3px;
letter-spacing: -0.015em;
}
.cw-attn-amount {
font-size: 14px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em;
}
.cw-quiet {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-radius: var(--r-xl);
background: rgba(0,166,86,0.06);
color: rgba(0,120,60,0.90);
font-size: 13px; letter-spacing: -0.015em;
border: 1px solid rgba(0,166,86,0.20);
}
.cw-upcoming { display: flex; flex-direction: column; gap: 6px; }
.cw-upcoming-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
}
.cw-upcoming-date {
display: flex; flex-direction: column; align-items: center;
padding: 6px 10px;
border-radius: 8px;
background: var(--bg-app);
min-width: 46px;
}
.cw-upcoming-d {
font-family: 'JetBrains Mono', monospace;
font-size: 16px; font-weight: 700;
color: var(--text-primary); line-height: 1;
}
.cw-upcoming-m {
font-size: 10px; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 1.2px;
margin-top: 2px;
}
.cw-upcoming-body { flex: 1; min-width: 0; }
.cw-upcoming-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-upcoming-sub {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
margin-top: 3px; letter-spacing: -0.015em;
}
.cw-upcoming-amt { font-size: 14px; font-weight: 700; color: var(--text-primary); }
/* ============================================================
COSTS
============================================================ */
.cw-cost-grid { display: flex; flex-direction: column; gap: 6px; }
.cw-cost-row {
display: flex; align-items: center; gap: 16px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
}
.cw-cost-main { flex: 1; min-width: 0; }
.cw-cost-label { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-cost-sub {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
margin-top: 3px; letter-spacing: -0.015em;
}
.cw-cost-amt {
font-size: 15px; font-weight: 700;
color: var(--text-primary); letter-spacing: -0.02em;
white-space: nowrap;
}
.cw-cost-cadence {
font-size: 11px; color: var(--text-tertiary);
font-weight: 500; margin-left: 2px;
}
/* ============================================================
CONTRACTS VIEW — structured rows
============================================================ */
.cw-contracts { display: flex; flex-direction: column; gap: 20px; }
.cw-contract-list { display: flex; flex-direction: column; gap: 8px; }
.cw-contract-row {
display: flex; align-items: center; gap: 18px;
padding: 18px 20px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms, box-shadow 200ms;
}
.cw-contract-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-depth); }
.cw-contract-cover {
width: 68px; height: 90px;
border-radius: 6px;
overflow: hidden;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
flex: none;
}
.cw-contract-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cw-contract-head {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cw-contract-title {
font-size: 16px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em;
}
.cw-contract-code {
font-size: 11px; color: var(--text-tertiary);
padding: 2px 6px; border-radius: 5px;
background: var(--bg-app);
}
.cw-contract-client {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.cw-contract-meta {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 4px;
}
.cw-contract-meta-item {
display: inline-flex; align-items: center; gap: 4px;
}
.cw-contract-next {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: var(--r-full);
background: var(--bg-app);
max-width: 100%;
}
.cw-contract-next-lbl {
font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
font-size: 10px; color: var(--text-tertiary);
}
.cw-contract-next-date { font-weight: 600; color: var(--text-primary); }
.cw-contract-value { display: flex; flex-direction: column; gap: 4px; flex: none; min-width: 96px; text-align: right; }
.cw-contract-value-num {
font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
}
.cw-capacity {
padding: 22px 24px;
border-radius: var(--r-2xl);
background: transparent;
border: 1.5px dashed var(--stroke-subtle);
}
.cw-capacity-line { display: flex; flex-direction: column; gap: 6px; }
.cw-capacity-body { font-size: 13px; color: var(--text-tertiary); letter-spacing: -0.015em; }
/* ============================================================
CONTRACT DETAIL
============================================================ */
.cw-detail-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 26px 30px;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 28px;
align-items: flex-start;
}
.cw-detail-head-l { min-width: 0; }
.cw-detail-title {
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
margin: 8px 0 12px;
}
.cw-detail-meta {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.cw-detail-meta-item {
display: inline-flex; align-items: center; gap: 5px;
letter-spacing: -0.015em;
}
.cw-detail-head-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.cw-detail-actions { display: flex; gap: 6px; }
.cw-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
gap: 16px;
}
.cw-detail-main { display: flex; flex-direction: column; gap: 14px; }
.cw-detail-rail { display: flex; flex-direction: column; gap: 12px; }
.cw-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 22px 26px;
display: flex; flex-direction: column; gap: 14px;
}
.cw-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.cw-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.cw-card-head h3 {
margin: 0;
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.cw-card-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
/* --- summary --------------------------------------------- */
.cw-summary-grid { display: flex; flex-direction: column; gap: 16px; }
.cw-summary-body {
margin: 6px 0 0;
font-size: 15px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.6;
max-width: 65ch;
}
.cw-summary-body-quote {
font-family: Georgia, serif;
font-style: italic;
color: var(--text-secondary);
border-left: 3px solid var(--stroke-stroke2);
padding-left: 14px;
margin-top: 6px;
}
.cw-summary-inline {
display: grid;
grid-template-columns: minmax(140px, auto) minmax(0, 1fr);
gap: 20px;
padding: 12px 0;
border-block: 1px solid var(--stroke-subtle);
align-items: flex-start;
}
.cw-summary-mini { display: flex; flex-direction: column; gap: 4px; }
.cw-summary-mini-val {
font-size: 22px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em;
margin-top: 2px;
}
.cw-summary-mini-sm {
font-size: 13px; font-weight: 400; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
font-family: 'Inter', system-ui;
}
/* --- approvals ------------------------------------------- */
.cw-approvals { display: flex; flex-direction: column; gap: 8px; }
.cw-approval {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 14px;
background: var(--bg-app);
border-radius: var(--r-lg);
border-left: 3px solid transparent;
}
.cw-approval-granted { border-left-color: rgba(0,166,86,0.55); }
.cw-approval-waiting { border-left-color: rgba(239,157,14,0.55); }
.cw-approval-planned { border-left-color: rgba(16,16,16,0.14); }
.cw-approval-check {
width: 20px; height: 20px; border-radius: 6px;
background: var(--bg-surface);
border: 1.5px solid var(--stroke-stroke2);
display: inline-flex; align-items: center; justify-content: center;
color: white; flex: none; margin-top: 1px;
}
.cw-approval-granted .cw-approval-check { background: #00A656; border-color: #00A656; }
.cw-approval-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-approval-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-approval-sub {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-approval-evidence {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
margin-top: 3px;
}
/* --- documents ------------------------------------------- */
.cw-docs-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.cw-doc-tile {
background: var(--bg-highlight);
border-radius: var(--r-2xl);
padding: 14px;
text-decoration: none;
display: flex; flex-direction: column; gap: 12px;
transition: transform 160ms;
}
.cw-doc-tile:hover { transform: translateY(-1px); }
.cw-doc-tile-cover {
width: 100%; aspect-ratio: 4/5;
border-radius: 8px; overflow: hidden;
background: white;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.cw-doc-tile-title { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; line-height: 1.4; }
.cw-doc-tile-sub { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 3px; }
.cw-doc-tile-placeholder { opacity: 0.85; border: 1.5px dashed var(--stroke-subtle); background: transparent; }
/* --- rail: at a glance ----------------------------------- */
.cw-glance-list { display: flex; flex-direction: column; gap: 8px; }
.cw-glance {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-radius: var(--r-md);
background: var(--bg-app);
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.cw-glance b { color: var(--text-primary); font-weight: 600; font-size: 13px; }
/* --- rail: client block ---------------------------------- */
.cw-client-block {
display: flex; align-items: center; gap: 12px;
padding: 12px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
transition: background 160ms;
}
.cw-client-block:hover { background: var(--bg-depth); }
.cw-client-name { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.cw-client-industry { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; letter-spacing: -0.015em; }
.cw-client-contact {
display: flex; align-items: center; gap: 10px;
padding: 8px 4px;
}
.cw-client-contact-name { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-client-contact-role { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em; margin-top: 2px; }
.cw-client-open {
font-size: 12px; color: var(--text-tertiary);
text-decoration: none; letter-spacing: -0.015em;
padding: 6px 4px;
transition: color 160ms;
}
.cw-client-open:hover { color: var(--text-primary); }
/* --- rail: related --------------------------------------- */
.cw-related-list { display: flex; flex-direction: column; gap: 6px; }
.cw-related-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
color: var(--text-primary);
font-size: 12px; font-weight: 500; letter-spacing: -0.015em;
transition: background 160ms;
}
.cw-related-row:hover { background: var(--bg-depth); }
.cw-related-row span:not(.cw-related-tag) { flex: 1; min-width: 0; }
.cw-related-tag {
font-size: 10px; color: var(--text-tertiary);
padding: 2px 6px; background: var(--bg-surface);
border-radius: 5px;
}
/* ============================================================
MILESTONES VIEW — chronological timeline
============================================================ */
.cw-ms-timeline {
display: flex; flex-direction: column; gap: 6px;
padding-left: 4px;
}
.cw-ms-row {
display: grid;
grid-template-columns: 60px 28px minmax(0, 1fr) auto auto;
align-items: center; gap: 14px;
padding: 14px 16px 14px 4px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
}
.cw-ms-date { display: flex; flex-direction: column; align-items: center; }
.cw-ms-date-d { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.cw-ms-date-m { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 3px; }
.cw-ms-track { display: flex; flex-direction: column; align-items: center; }
.cw-ms-node {
width: 22px; height: 22px; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
color: white;
background: var(--bg-app);
border: 2px solid var(--bg-surface);
box-shadow: 0 0 0 1px var(--stroke-stroke2);
}
.cw-ms-node-complete { background: #00A656; box-shadow: 0 0 0 1px #00A656; }
.cw-ms-node-attention { background: #EF9D0E; box-shadow: 0 0 0 1px #EF9D0E; }
.cw-ms-node-blocked { background: #FF381C; box-shadow: 0 0 0 1px #FF381C; }
.cw-ms-node-upcoming { background: var(--bg-surface); }
.cw-ms-node-not-started{ background: var(--bg-surface); opacity: 0.6; }
.cw-ms-body { min-width: 0; }
.cw-ms-title { font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.015em; }
.cw-ms-sub {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em; margin-top: 4px;
}
.cw-ms-approver { display: inline-flex; align-items: center; gap: 4px; }
.cw-ms-contract-link {
color: var(--text-tertiary);
text-decoration: none;
padding: 1px 5px;
border-radius: 4px;
background: var(--bg-app);
transition: color 160ms, background 160ms;
}
.cw-ms-contract-link:hover { color: var(--text-primary); background: var(--bg-depth); }
.cw-ms-evidence {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; margin-top: 4px;
}
.cw-ms-amt {
font-size: 15px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em; white-space: nowrap;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.cw-agreement,
.cw-detail-head { grid-template-columns: 1fr; }
.cw-agreement-right {
border-left: 0; padding-left: 0;
border-top: 1px solid var(--stroke-subtle); padding-top: 18px;
}
.cw-detail-head-r { align-items: flex-start; }
.cw-detail-grid { grid-template-columns: 1fr; }
.cw-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cw-summary-inline { grid-template-columns: 1fr; }
.cw-ms-row { grid-template-columns: 60px 28px minmax(0, 1fr) auto; }
.cw-ms-row > *:nth-child(5) { grid-column: 4; }
}
/* ============================================================
DOCUMENTS WORKSPACE V2 (Phase 17) — reuses .dv-* patterns
where semantically identical; adds .dx-* for new surfaces.
Neutral file-type language. Semantic-only state color.
No folder icons. Preview is the strongest element.
============================================================ */
.dx-root { padding-block: 4px; }
.dx-overview, .dx-library, .dx-collections, .dx-detail {
display: flex; flex-direction: column; gap: 20px;
}
.dx-count-line { font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em; }
/* --- shared type badge ---------------------------------- */
.dx-kind-badge {
display: inline-flex; align-items: center;
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
}
/* --- source-of-truth marker ------------------------------ */
.dx-sot-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: 5px;
background: rgba(42,133,255,0.10);
color: #2A85FF;
flex: none;
}
.dx-sot-inline {
display: inline-flex; align-items: center; margin-right: 4px;
color: #2A85FF;
}
.dx-sot-eyebrow {
display: inline-flex; align-items: center; gap: 4px;
color: #2A85FF; font-weight: 700;
}
/* ============================================================
OVERVIEW
============================================================ */
/* Current-stage context strip (compact, one row) */
.dx-context {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.dx-context-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dx-context-stage {
display: flex; align-items: baseline; gap: 12px; margin-top: 2px;
}
.dx-stage-code {
font-size: 14px; font-weight: 700; color: var(--text-tertiary);
letter-spacing: -0.02em;
}
.dx-stage-name {
font-size: 24px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
}
.dx-context-line {
display: flex; align-items: baseline; gap: 6px;
font-size: 14px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.dx-context-line b { color: var(--text-primary); font-weight: 700; }
/* Tiles for current-stage documents */
.dx-tiles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
/* Recently updated list */
.dx-recent { display: flex; flex-direction: column; gap: 6px; }
.dx-recent-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dx-recent-row:hover { transform: translateY(-1px); }
.dx-recent-glyph { flex: none; }
.dx-recent-body { flex: 1; min-width: 0; }
.dx-recent-title {
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
display: inline-flex; align-items: center;
}
.dx-recent-sub {
display: flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
margin-top: 3px;
letter-spacing: -0.015em;
}
/* Source of truth list */
.dx-sot-list { display: flex; flex-direction: column; gap: 6px; }
.dx-sot-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
border-left: 3px solid rgba(42,133,255,0.55);
text-decoration: none;
transition: transform 160ms;
}
.dx-sot-row:hover { transform: translateY(-1px); }
.dx-sot-icon {
width: 32px; height: 32px; border-radius: 10px;
background: rgba(42,133,255,0.10);
color: #2A85FF;
display: flex; align-items: center; justify-content: center;
flex: none;
}
.dx-sot-body { flex: 1; min-width: 0; }
.dx-sot-title {
font-size: 14px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dx-sot-sub {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary);
margin-top: 3px;
letter-spacing: -0.015em;
}
/* Featured collections grid on overview */
.dx-col-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.dx-col-grid-full {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* ============================================================
CARD (grid) — used across Overview + Library + Collection Detail
============================================================ */
.dx-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
overflow: hidden;
text-decoration: none;
display: flex; flex-direction: column;
box-shadow: var(--shadow-widget);
transition: transform 160ms cubic-bezier(0.4,0,0.2,1), box-shadow 200ms;
position: relative;
}
.dx-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-depth);
}
.dx-card.dx-sot::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
background: #2A85FF; opacity: 0.85;
border-top-left-radius: var(--r-2xl); border-bottom-left-radius: var(--r-2xl);
z-index: 1;
}
.dx-card-preview {
aspect-ratio: 16/10;
background: var(--bg-highlight);
border-bottom: 1px solid var(--stroke-subtle);
position: relative; overflow: hidden;
}
.dx-kind-badge {
position: absolute; top: 10px; right: 10px;
background: rgba(20,20,20,0.75);
color: white;
backdrop-filter: blur(4px);
}
.dx-card-preview .dx-kind-badge { position: absolute; }
.dx-card-meta {
padding: 12px 14px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.dx-card-title-row {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.dx-card-title {
font-size: 14px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
flex: 1; min-width: 0;
}
.dx-card-row {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dx-card-row:last-of-type { justify-content: flex-start; }
.dx-owner {
display: inline-flex; align-items: center; gap: 5px;
color: var(--text-secondary);
min-width: 0; max-width: 60%;
}
.dx-updated { color: var(--text-muted); margin-left: auto; }
.dx-ver {
padding: 2px 6px;
background: var(--bg-app);
border-radius: var(--r-sm);
font-size: 10px;
color: var(--text-tertiary);
}
.dx-ver-big { font-size: 12px; padding: 4px 8px; }
.dx-size { color: var(--text-tertiary); margin-left: auto; }
/* ============================================================
ROW (list) — used in Library list + Overview strips
============================================================ */
.dx-strip, .dx-list { display: flex; flex-direction: column; gap: 6px; }
.dx-row {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
position: relative;
}
.dx-row:hover { transform: translateY(-1px); }
.dx-row.dx-sot::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
background: #2A85FF; opacity: 0.85;
border-top-left-radius: var(--r-xl); border-bottom-left-radius: var(--r-xl);
}
.dx-row-thumb {
width: 74px; height: 48px; border-radius: 6px; overflow: hidden;
background: var(--bg-highlight);
border: 1px solid var(--stroke-subtle);
flex: none;
}
.dx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dx-row-title-line {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dx-row-title { flex: 0 1 auto; min-width: 0; }
.dx-row-sub {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dx-row-size { color: var(--text-tertiary); }
/* ============================================================
LIBRARY (filter bar + view toggle)
============================================================ */
.dx-filter-bar {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
}
.dx-search {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--bg-surface);
border-radius: var(--r-full);
box-shadow: var(--shadow-widget);
color: var(--text-tertiary);
min-width: 280px;
}
.dx-search-input {
border: 0; outline: 0; background: transparent;
font: 500 13px/1 'Inter', system-ui;
letter-spacing: -0.015em;
color: var(--text-primary);
width: 220px;
}
.dx-search-input::placeholder { color: var(--text-tertiary); }
.dx-view-toggle {
display: inline-flex; background: var(--bg-surface);
border-radius: var(--r-full); padding: 3px; gap: 2px;
box-shadow: var(--shadow-widget);
margin-left: auto;
}
.dx-view-btn {
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 6px 10px;
color: var(--text-tertiary);
border-radius: var(--r-full);
display: inline-flex; align-items: center; gap: 4px;
transition: all 160ms ease;
}
.dx-view-btn:hover { color: var(--text-primary); }
.dx-view-btn.active {
background: var(--bg-inset);
color: var(--text-primary);
}
.dx-result-count {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
padding-left: 4px;
}
.dx-result-count .mono { color: var(--text-primary); font-weight: 700; }
.dx-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* ============================================================
COLLECTIONS
============================================================ */
.dx-col-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
padding: 18px;
text-decoration: none;
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--shadow-widget);
transition: transform 160ms, box-shadow 200ms;
}
.dx-col-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-depth); }
.dx-col-mosaic {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 6px;
aspect-ratio: 16/9;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--bg-highlight);
border: 1px solid var(--stroke-subtle);
padding: 6px;
}
.dx-col-mosaic-cell {
background: white;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--stroke-subtle);
}
.dx-col-mosaic-empty {
background: var(--bg-app);
border-style: dashed;
}
.dx-col-meta { display: flex; flex-direction: column; gap: 8px; }
.dx-col-title {
font-size: 15px; font-weight: 700; color: var(--text-primary);
letter-spacing: -0.02em; line-height: 1.35;
}
.dx-col-purpose {
margin: 0;
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dx-col-purpose-lg {
font-size: 15px; line-height: 1.55; max-width: 65ch;
}
.dx-col-foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
padding-top: 8px;
border-top: 1px solid var(--stroke-subtle);
}
.dx-col-count { color: var(--text-primary); font-weight: 700; }
.dx-col-owner {
display: inline-flex; align-items: center; gap: 5px;
color: var(--text-secondary);
}
.dx-col-updated { color: var(--text-muted); margin-left: auto; }
/* Collection detail head */
.dx-col-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 26px 30px;
display: flex; flex-direction: column; gap: 14px;
}
.dx-col-h1 {
margin: 8px 0 4px;
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
}
.dx-col-head-meta {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
margin-top: 8px;
}
.dx-col-stage-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font: 500 11px/1.2 'Inter', system-ui;
letter-spacing: -0.015em;
text-decoration: none;
transition: background 160ms;
}
.dx-col-stage-chip:hover { background: var(--bg-depth); }
/* ============================================================
DOCUMENT DETAIL
============================================================ */
.dx-doc-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 24px 28px;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 28px;
align-items: flex-start;
}
.dx-doc-head-l { min-width: 0; }
.dx-doc-title {
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
margin: 8px 0 12px;
}
.dx-doc-summary {
margin: 0 0 14px;
font-size: 15px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.6;
max-width: 60ch;
}
.dx-doc-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.dx-doc-meta-item {
display: inline-flex; align-items: center; gap: 5px;
letter-spacing: -0.015em;
}
.dx-doc-meta-item.link {
text-decoration: none;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms;
}
.dx-doc-meta-item.link:hover { background: var(--bg-depth); color: var(--text-primary); }
.dx-doc-head-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.dx-doc-owner-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dx-doc-owner-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dx-doc-actions { display: flex; gap: 6px; }
.dx-doc-grid {
display: grid;
grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
gap: 16px;
}
.dx-doc-preview-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 16px;
display: flex; flex-direction: column; gap: 14px;
}
.dx-preview-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 0 4px;
}
.dx-preview-caption {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
display: inline-flex; align-items: center; gap: 4px;
}
.dx-preview-bar-r { display: flex; gap: 4px; }
.dx-preview-frame {
border-radius: var(--r-2xl);
background:
linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)),
repeating-linear-gradient(
45deg,
var(--bg-highlight) 0 8px,
var(--bg-app) 8px 16px
);
padding: 28px;
min-height: 520px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.dx-preview-generic {
width: 100%; max-width: 720px; aspect-ratio: 16/10;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 0 0 1px rgba(0,0,0,0.06),
0 12px 32px rgba(0,0,0,0.10),
0 40px 80px rgba(0,0,0,0.08);
}
/* --- Full spec preview (for doc-1) ----------------------- */
.dx-spec {
width: 100%; max-width: 720px;
}
.dx-spec-page {
background: white;
border-radius: 8px;
padding: 44px 52px;
box-shadow:
0 1px 0 rgba(255,255,255,0.9) inset,
0 0 0 1px rgba(0,0,0,0.06),
0 16px 40px rgba(0,0,0,0.12),
0 48px 96px rgba(0,0,0,0.08);
min-height: 480px;
display: flex; flex-direction: column; gap: 20px;
}
.dx-spec-page-head { border-bottom: 1px solid var(--stroke-subtle); padding-bottom: 14px; }
.dx-spec-title {
margin: 8px 0 4px;
font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
}
.dx-spec-meta {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dx-spec-body { display: flex; flex-direction: column; gap: 18px; }
.dx-spec-section {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 160px;
gap: 16px;
align-items: flex-start;
}
.dx-spec-section-num {
font-size: 13px; color: rgba(42,133,255,0.75);
padding-top: 3px;
font-weight: 700;
}
.dx-spec-section-body { min-width: 0; }
.dx-spec-h {
margin: 0 0 4px;
font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dx-spec-p {
margin: 0;
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.65;
}
.dx-spec-annot {
display: flex; flex-direction: column; gap: 6px;
}
.dx-spec-annot-note {
padding: 8px 10px;
background: #FBFAF6;
border: 1px solid rgba(239,157,14,0.28);
border-radius: var(--r-md);
}
.dx-spec-annot-by {
font-size: 10px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: #EF9D0E;
}
.dx-spec-annot-text {
font-size: 11px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.45; margin-top: 3px;
}
/* --- Rail cards ------------------------------------------ */
.dx-doc-rail { display: flex; flex-direction: column; gap: 12px; }
.dx-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.dx-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.dx-card-head h3 {
margin: 0;
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dx-card-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
/* Reviewers */
.dx-reviewers { display: flex; flex-direction: column; gap: 8px; }
.dx-reviewer {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
}
.dx-reviewer-body { flex: 1; min-width: 0; }
.dx-reviewer-name {
font-size: 12px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.dx-reviewer-role {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em; margin-top: 2px;
}
/* Version history */
.dx-versions { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.dx-version {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 10px;
}
.dx-version-marker {
display: flex; flex-direction: column; align-items: center;
padding-top: 6px;
}
.dx-version-dot {
width: 10px; height: 10px; border-radius: 999px;
background: var(--bg-depth);
border: 2px solid var(--bg-surface);
box-shadow: 0 0 0 1px var(--stroke-stroke2);
}
.dx-version.current .dx-version-dot {
background: #2A85FF;
box-shadow: 0 0 0 1px #2A85FF;
}
.dx-version-line {
flex: 1;
width: 2px;
background: var(--stroke-subtle);
margin-top: 4px;
}
.dx-version-body {
padding: 6px 0 14px;
display: flex; flex-direction: column; gap: 6px;
}
.dx-version-head {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dx-version-v { color: var(--text-primary); font-weight: 700; font-size: 13px; }
.dx-version-cur {
padding: 2px 8px; border-radius: var(--r-full);
background: rgba(42,133,255,0.10); color: #2A85FF;
font-size: 10px; font-weight: 700;
letter-spacing: 0.02em;
}
.dx-version-date { color: var(--text-tertiary); }
.dx-version-note {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
}
.dx-version-by {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
/* Related */
.dx-related-list { display: flex; flex-direction: column; gap: 6px; }
.dx-related-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
color: var(--text-primary);
font-size: 12px; font-weight: 500; letter-spacing: -0.015em;
transition: background 160ms;
}
.dx-related-row span:not(.dx-related-tag) { flex: 1; min-width: 0; }
.dx-related-row:hover { background: var(--bg-depth); }
.dx-related-tag {
font-size: 10px; color: var(--text-tertiary);
padding: 2px 6px; background: var(--bg-surface);
border-radius: 5px;
}
/* Activity */
.dx-activity { display: flex; flex-direction: column; gap: 8px; }
.dx-activity-row {
display: flex; align-items: flex-start; gap: 8px;
padding: 6px 4px;
}
.dx-activity-body { flex: 1; min-width: 0; }
.dx-activity-line {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.4;
}
.dx-activity-line b { color: var(--text-primary); font-weight: 600; margin-right: 3px; }
.dx-activity-when {
font-size: 10px; color: var(--text-muted);
letter-spacing: -0.015em; margin-top: 2px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1200px) {
.dx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-col-grid,
.dx-col-grid-full { grid-template-columns: 1fr; }
.dx-doc-head { grid-template-columns: 1fr; }
.dx-doc-head-r { align-items: flex-start; }
.dx-doc-grid { grid-template-columns: 1fr; }
.dx-spec-section { grid-template-columns: 32px minmax(0, 1fr); }
.dx-spec-annot { grid-column: 1 / -1; }
.dx-context { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
.dx-tiles, .dx-grid { grid-template-columns: 1fr; }
.dx-filter-bar > * { width: 100%; }
.dx-view-toggle { margin-left: 0; }
}
/* ============================================================
MY WORK V2 (Phase 18) — reuses .dv-* + .dx-* patterns where
semantically identical; adds .mw-* for personal-work surfaces.
Neutral surfaces. Semantic-only state color. No rainbow per
project or per work type.
============================================================ */
.mw-root { padding-inline: 24px; padding-block: 20px; max-width: 1240px; margin: 0 auto; }
/* Head block */
.mw-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
margin-bottom: 20px;
}
.mw-h1 {
margin: 0;
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
}
.mw-h1-sub {
margin: 4px 0 0;
font-size: 13px; color: var(--text-tertiary);
letter-spacing: -0.015em;
max-width: 60ch;
}
.mw-head-right { display: flex; align-items: center; gap: 12px; }
.mw-focus, .mw-work, .mw-schedule, .mw-detail {
display: flex; flex-direction: column; gap: 22px;
}
.mw-count {
font-size: 12px; color: var(--text-tertiary);
padding: 2px 8px; background: var(--bg-app);
border-radius: var(--r-full);
}
/* --- Project glyph ---------------------------------------- */
.mw-proj-glyph {
display: inline-flex; align-items: center; justify-content: center;
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
flex: none;
}
.mw-proj-name { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em; font-weight: 500; }
/* --- Canonical chip row ----------------------------------- */
.mw-canon { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.mw-canon-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font: 500 11px/1.2 'Inter', system-ui;
letter-spacing: -0.015em;
text-decoration: none;
transition: background 160ms;
max-width: 100%;
}
.mw-canon-chip:hover { background: var(--bg-depth); }
.mw-canon-sm .mw-canon-chip { padding: 3px 8px; font-size: 10px; }
.mw-canon-inline {
display: inline-flex; align-items: center; gap: 5px;
color: var(--text-tertiary); font-size: 11px;
letter-spacing: -0.015em;
min-width: 0;
}
/* --- Priority (only High shows) --------------------------- */
.mw-prio-high {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px 2px 5px;
border-radius: var(--r-full);
background: rgba(239,157,14,0.10);
color: #EF7A0E;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.02em;
flex: none;
}
/* --- Due chip -------------------------------------------- */
.mw-due {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-tertiary);
font: 500 11px/1 'Inter', system-ui;
letter-spacing: -0.015em;
white-space: nowrap;
flex: none;
}
.mw-due-today {
background: rgba(42,133,255,0.08);
color: #2A85FF;
}
.mw-due-overdue {
background: rgba(255,56,28,0.08);
color: #FF381C;
font-weight: 600;
}
/* ============================================================
FOCUS
============================================================ */
/* Greeting strip */
.mw-greet {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 16px;
}
.mw-greet-title {
margin: 8px 0 6px;
font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
}
.mw-greet-sub {
font-size: 14px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.mw-greet-sub b { color: var(--text-primary); font-weight: 700; }
.mw-attn-num { color: #FF381C; }
/* Current focus card */
.mw-current {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 28px 32px;
border-left: 4px solid #2A85FF;
display: flex; flex-direction: column; gap: 14px;
}
.mw-current-eyebrow {
display: flex; align-items: center; gap: 12px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.mw-current-today {
padding: 3px 8px;
border-radius: var(--r-full);
background: rgba(42,133,255,0.10);
color: #2A85FF;
font-size: 10px;
letter-spacing: 0.06em;
}
.mw-current-title {
font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
line-height: 1.2;
}
.mw-current-outcome {
margin: 0;
font-family: Georgia, serif;
font-style: italic;
font-size: 16px; color: var(--text-primary);
letter-spacing: -0.015em;
line-height: 1.6;
max-width: 65ch;
padding-left: 14px;
border-left: 3px solid rgba(42,133,255,0.35);
}
.mw-current-meta {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding-top: 8px;
border-top: 1px solid var(--stroke-subtle);
}
.mw-current-context {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em;
min-width: 0;
flex-wrap: wrap;
}
.mw-current-actions { display: flex; align-items: center; gap: 8px; }
/* Quiet states */
.mw-quiet {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-radius: var(--r-xl);
background: rgba(0,166,86,0.06);
color: rgba(0,120,60,0.90);
font-size: 13px;
letter-spacing: -0.015em;
border: 1px solid rgba(0,166,86,0.20);
}
.mw-quiet-small {
padding: 10px 12px;
font-size: 12px;
color: var(--text-tertiary);
background: var(--bg-app);
border: 1.5px dashed var(--stroke-subtle);
}
/* Next up (ordered list) */
.mw-nextup { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mw-nextup-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.mw-nextup-row:hover { transform: translateY(-1px); }
.mw-nextup-n {
font-size: 12px; font-weight: 700;
color: var(--text-tertiary);
padding: 4px 8px;
background: var(--bg-app);
border-radius: 5px;
flex: none;
}
.mw-nextup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mw-nextup-title {
font-size: 14px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.mw-nextup-sub {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
/* Waiting on others / Blocked lists */
.mw-waiting-list { display: flex; flex-direction: column; gap: 6px; }
.mw-waiting-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
border-left: 3px solid rgba(239,157,14,0.55);
text-decoration: none;
transition: transform 160ms;
}
.mw-waiting-row:hover { transform: translateY(-1px); }
.mw-waiting-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mw-waiting-lbl {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.mw-waiting-since { color: var(--text-muted); }
.mw-waiting-who { color: var(--text-primary); font-weight: 600; }
.mw-waiting-title {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
margin-top: 2px;
}
.mw-waiting-note {
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
margin-top: 3px;
}
.mw-waiting-blocks {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
background: rgba(255,56,28,0.06);
color: rgba(200,50,20,0.90);
border-radius: var(--r-full);
font-size: 10px;
letter-spacing: -0.015em;
margin-top: 6px;
width: fit-content;
}
.mw-waiting-side {
display: inline-flex; align-items: center; gap: 5px;
flex: none;
padding-top: 2px;
}
.mw-blocked-row { border-left-color: rgba(255,56,28,0.55); }
.mw-blocked-glyph {
width: 32px; height: 32px; border-radius: 10px;
background: rgba(255,56,28,0.10);
color: #FF381C;
display: flex; align-items: center; justify-content: center;
flex: none;
}
/* Upcoming groups */
.mw-upcoming { display: flex; flex-direction: column; gap: 18px; }
.mw-upcoming-group { display: flex; flex-direction: column; gap: 8px; }
.mw-upcoming-lbl {
font: 700 11px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
/* ============================================================
WORK LIST — canonical row
============================================================ */
.mw-list { display: flex; flex-direction: column; gap: 6px; }
.mw-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.mw-row:hover { transform: translateY(-1px); }
.mw-row-dense { padding: 10px 12px; }
.mw-check {
width: 20px; height: 20px; border-radius: 6px;
border: 1.5px solid var(--stroke-stroke2);
display: inline-flex; align-items: center; justify-content: center;
color: white;
flex: none;
background: var(--bg-surface);
transition: all 160ms ease;
}
.mw-check-done, .mw-check.mw-check-done {
background: #00A656; border-color: #00A656;
}
.mw-check-in-progress { background: rgba(42,133,255,0.10); border-color: rgba(42,133,255,0.50); }
.mw-check-blocked { background: rgba(255,56,28,0.10); border-color: rgba(255,56,28,0.50); }
.mw-check-waiting { background: rgba(239,157,14,0.10); border-color: rgba(239,157,14,0.50); }
.mw-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mw-row-title-line {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.mw-row-title {
flex: 0 1 auto; min-width: 0;
}
.mw-row-title.is-done {
color: var(--text-tertiary);
text-decoration: line-through;
text-decoration-color: rgba(16,16,16,0.20);
}
.mw-row-sub {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.mw-row-blocked { border-left: 3px solid rgba(255,56,28,0.35); }
/* Grouping */
.mw-groups { display: flex; flex-direction: column; gap: 22px; }
.mw-group { display: flex; flex-direction: column; gap: 8px; }
.mw-group-head {
display: flex; align-items: baseline; gap: 8px;
}
.mw-group-h {
font: 700 12px/1 'Inter', system-ui;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--text-tertiary);
}
.mw-group-n {
font-size: 11px; color: var(--text-muted);
}
/* Group-by dropdown */
.mw-group-by {
display: inline-flex; align-items: center; gap: 8px;
margin-left: auto;
}
.mw-group-lbl {
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
/* ============================================================
SCHEDULE
============================================================ */
.mw-schedule { gap: 20px; }
.mw-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
padding: 14px;
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
}
.mw-week-cell {
display: flex; flex-direction: column; align-items: center;
padding: 10px 4px;
border-radius: var(--r-lg);
background: transparent;
color: var(--text-tertiary);
position: relative;
}
.mw-week-cell.is-today {
background: var(--bg-inset);
color: var(--text-primary);
}
.mw-week-d {
font-size: 10px; font-weight: 700;
letter-spacing: 0.04em; text-transform: uppercase;
color: inherit;
opacity: 0.7;
}
.mw-week-n {
font-size: 18px; font-weight: 700;
letter-spacing: -0.02em;
color: inherit;
margin-top: 4px;
}
.mw-week-cell.is-today .mw-week-n { color: var(--text-primary); }
.mw-week-dot {
position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 999px;
background: #2A85FF;
}
.mw-schedule-groups { display: flex; flex-direction: column; gap: 20px; }
.mw-sched-group { display: flex; flex-direction: column; gap: 10px; }
.mw-sched-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--stroke-subtle);
}
.mw-sched-lbl {
font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.mw-sched-when {
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 2px;
}
.mw-sched-n {
font-size: 12px; color: var(--text-tertiary);
padding: 3px 10px;
background: var(--bg-app);
border-radius: var(--r-full);
}
/* ============================================================
WORK ITEM DETAIL
============================================================ */
.mw-detail-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 24px 28px;
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
.mw-detail-head-l { min-width: 0; }
.mw-detail-title {
font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.2;
margin: 8px 0 10px;
}
.mw-detail-desc {
margin: 0 0 14px;
font-size: 15px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.6;
max-width: 60ch;
}
.mw-detail-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.mw-detail-meta-item {
display: inline-flex; align-items: center; gap: 5px;
letter-spacing: -0.015em;
}
.mw-detail-meta-item.link {
text-decoration: none;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms;
}
.mw-detail-meta-item.link:hover { background: var(--bg-depth); color: var(--text-primary); }
.mw-detail-head-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.mw-assignee-block { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.mw-assignee-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
.mw-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
gap: 16px;
}
.mw-detail-main { display: flex; flex-direction: column; gap: 14px; }
.mw-detail-rail { display: flex; flex-direction: column; gap: 12px; }
.mw-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-widget);
padding: 22px 26px;
display: flex; flex-direction: column; gap: 14px;
}
.mw-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.mw-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.mw-card-head h3 {
margin: 0;
font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.mw-card-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
/* Outcome */
.mw-outcome {
margin: 0;
font-size: 15px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.65;
font-family: Georgia, serif;
font-style: italic;
padding-left: 14px;
border-left: 3px solid rgba(42,133,255,0.35);
}
/* Definition of Done */
.mw-dod { display: flex; flex-direction: column; gap: 4px; }
.mw-dod-row {
appearance: none; background: transparent; border: 0; cursor: pointer;
display: flex; align-items: center; gap: 12px;
padding: 8px 4px;
border-radius: var(--r-md);
text-align: left;
transition: background 160ms;
}
.mw-dod-row:hover { background: var(--bg-app); }
.mw-dod-check {
width: 20px; height: 20px; border-radius: 6px;
border: 1.5px solid var(--stroke-stroke2);
display: inline-flex; align-items: center; justify-content: center;
color: white; flex: none;
transition: all 220ms cubic-bezier(0.4,0,0.2,1);
}
.mw-dod-check.is-done { background: #00A656; border-color: #00A656; }
.mw-dod-title {
font-size: 14px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.5;
transition: color 220ms, text-decoration-color 220ms;
}
.mw-dod-row.is-done .mw-dod-title {
color: var(--text-tertiary);
text-decoration: line-through;
text-decoration-color: rgba(16,16,16,0.20);
}
/* Dependencies */
.mw-deps { display: flex; flex-direction: column; gap: 12px; }
.mw-dep {
padding: 12px 14px;
border-radius: var(--r-lg);
background: var(--bg-app);
border-left: 3px solid transparent;
display: flex; flex-direction: column; gap: 8px;
}
.mw-dep-waiting { border-left-color: rgba(239,157,14,0.55); }
.mw-dep-blocked { border-left-color: rgba(255,56,28,0.55); }
.mw-dep-lbl {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.mw-dep-body {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em;
}
.mw-dep-name { font-weight: 600; }
.mw-dep-note { color: var(--text-secondary); }
.mw-dep-blocks {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.mw-dep-blocks-lbl {
font: 700 9px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
padding: 2px 6px;
background: var(--bg-surface);
border-radius: 4px;
}
.mw-dep-work-list { display: flex; flex-direction: column; gap: 4px; }
.mw-dep-work {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: var(--r-md);
background: var(--bg-surface);
text-decoration: none;
color: var(--text-primary);
font-size: 13px; font-weight: 500;
letter-spacing: -0.015em;
transition: background 160ms;
}
.mw-dep-work:hover { background: var(--bg-highlight); }
.mw-dep-work span:not(.mw-check):not(.label) { flex: 1; min-width: 0; }
/* Activity */
.mw-activity { display: flex; flex-direction: column; gap: 10px; }
.mw-activity-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 4px 4px;
}
.mw-activity-body { flex: 1; min-width: 0; }
.mw-activity-line {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
}
.mw-activity-line b { color: var(--text-primary); font-weight: 600; margin-right: 3px; }
.mw-activity-when {
font-size: 11px; color: var(--text-muted);
letter-spacing: -0.015em; margin-top: 2px;
}
/* Attachments */
.mw-attach-list { display: flex; flex-direction: column; gap: 6px; }
.mw-attach-row {
display: flex; align-items: center; gap: 10px;
padding: 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
transition: background 160ms;
}
.mw-attach-row:hover { background: var(--bg-depth); }
.mw-attach-thumb {
width: 52px; height: 34px; border-radius: 6px;
background: white; overflow: hidden;
border: 1px solid var(--stroke-subtle);
flex: none;
}
.mw-attach-body { flex: 1; min-width: 0; }
.mw-attach-title {
font-size: 12px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.mw-attach-sub {
font-size: 10px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 2px;
display: inline-flex; align-items: center; gap: 4px;
}
/* At-a-glance */
.mw-glance { display: flex; flex-direction: column; gap: 4px; }
.mw-glance-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-radius: var(--r-md);
background: var(--bg-app);
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.mw-glance-row b {
color: var(--text-primary); font-weight: 600;
font-size: 13px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.mw-detail-head { grid-template-columns: 1fr; }
.mw-detail-head-r { align-items: flex-start; }
.mw-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.mw-head { flex-direction: column; align-items: flex-start; }
.mw-current-meta { flex-direction: column; align-items: flex-start; }
.mw-week { grid-template-columns: repeat(7, minmax(30px, 1fr)); }
}
/* ============================================================
DECISIONS WORKSPACE V2 (Phase 19) — reuses .dv-* + .mw-*
patterns where semantically identical; adds .dc-* for new
surfaces. Editorial + evidence-driven. Neutral surfaces.
Semantic-only state color. No rainbow per decision type.
============================================================ */
.dc-root { padding-inline: 24px; padding-block: 20px; max-width: 1240px; margin: 0 auto; }
.dc-overview, .dc-log, .dc-reviews, .dc-detail {
display: flex; flex-direction: column; gap: 22px;
}
.dc-count {
font-size: 12px; color: var(--text-tertiary);
padding: 2px 8px; background: var(--bg-app);
border-radius: var(--r-full);
}
.dc-count-line {
font-size: 12px; color: var(--text-tertiary); letter-spacing: -0.015em;
}
.dc-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.dc-eyebrow-inline {
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-tertiary);
}
.dc-proj-glyph {
display: inline-flex; align-items: center; justify-content: center;
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace;
letter-spacing: 0.04em;
flex: none;
}
.dc-proj-name { font-size: 11px; color: var(--text-tertiary); letter-spacing: -0.015em; font-weight: 500; }
.dc-type {
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.05em;
}
/* Head row */
.dc-head-row {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.dc-h1 {
margin: 0;
font-size: 26px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary);
}
.dc-h1-sub {
margin: 4px 0 0;
font-size: 13px; color: var(--text-tertiary);
letter-spacing: -0.015em;
max-width: 64ch;
}
.dc-summary-line {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.dc-summary-line b { color: var(--text-primary); font-weight: 700; }
/* Shell summary line — mirrors mw-greet-sub proportions so the
Decisions Overview head-row reads with the same visual weight
as My Work's greeting. */
.dc-shell-summary {
margin-top: 8px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.dc-shell-summary b { color: var(--text-primary); font-weight: 700; }
/* Canonical chip cloud */
.dc-chips { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dc-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font: 500 11px/1.2 'Inter', system-ui;
letter-spacing: -0.015em;
text-decoration: none;
transition: background 160ms;
max-width: 100%;
}
.dc-chip:hover { background: var(--bg-depth); }
.dc-chips-sm .dc-chip { padding: 3px 8px; font-size: 10px; }
.dc-inline {
display: inline-flex; align-items: center; gap: 5px;
color: var(--text-tertiary); font-size: 11px;
letter-spacing: -0.015em;
min-width: 0;
}
/* Quiet state */
.dc-quiet {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 18px;
border-radius: var(--r-xl);
background: rgba(0,166,86,0.06);
color: rgba(0,120,60,0.90);
font-size: 13px;
letter-spacing: -0.015em;
border: 1px solid rgba(0,166,86,0.20);
}
/* ============================================================
NEEDS DECISION (Overview flagship section)
============================================================ */
.dc-needs-list { display: flex; flex-direction: column; gap: 10px; }
.dc-needs-card {
display: flex; align-items: stretch; gap: 20px;
padding: 22px 24px;
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
border-left: 4px solid rgba(239,157,14,0.55);
text-decoration: none;
transition: transform 160ms, box-shadow 200ms;
}
.dc-needs-card:hover { transform: translateY(-1px); }
.dc-needs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.dc-needs-eyebrow { display: flex; align-items: center; gap: 8px; }
.dc-needs-question {
font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary); line-height: 1.35;
max-width: 64ch;
}
.dc-needs-meta {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dc-needs-facts {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
padding-top: 6px;
border-top: 1px solid var(--stroke-subtle);
}
.dc-needs-fact {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--text-secondary);
letter-spacing: -0.015em;
}
.dc-needs-fact b { color: var(--text-primary); font-weight: 600; font-size: 13px; }
.dc-needs-owner { display: inline-flex; align-items: center; gap: 6px; }
.dc-needs-cta {
display: inline-flex; align-items: center; gap: 4px;
padding: 8px 14px;
background: var(--bg-inset);
color: var(--text-primary);
border-radius: var(--r-full);
font: 600 12px/1 'Inter', system-ui;
letter-spacing: -0.015em;
align-self: center;
flex: none;
transition: background 160ms;
}
.dc-needs-card:hover .dc-needs-cta { background: var(--bg-depth); }
/* ============================================================
ROW — used across Overview + Log
============================================================ */
.dc-list { display: flex; flex-direction: column; gap: 6px; }
.dc-row {
display: flex; align-items: center; gap: 16px;
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dc-row:hover { transform: translateY(-1px); }
.dc-row-open { border-left: 3px solid rgba(239,157,14,0.55); }
.dc-row-decided { border-left: 3px solid transparent; }
.dc-row-superseded { opacity: 0.75; }
.dc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dc-row-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dc-row-title {
font-size: 15px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.dc-row-ctx {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.5;
max-width: 74ch;
}
.dc-row-meta {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dc-evidence-count {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-tertiary);
}
.dc-row-side {
display: flex; align-items: center; gap: 8px;
flex: none; min-width: 140px;
}
.dc-row-owner { display: flex; flex-direction: column; gap: 2px; }
.dc-row-owner-name { font-size: 12px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.015em; }
.dc-row-owner-when { font-size: 10px; color: var(--text-tertiary); }
/* ============================================================
DECISION IMPACT CARD (Overview)
============================================================ */
.dc-impact-card {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 24px 26px;
display: flex; flex-direction: column; gap: 16px;
transition: transform 160ms, box-shadow 200ms;
}
.dc-impact-card:hover { transform: translateY(-1px); }
.dc-impact-card-flat { box-shadow: var(--shadow-widget); padding: 18px 22px; }
.dc-impact-head { display: flex; flex-direction: column; gap: 6px; max-width: 65ch; }
.dc-impact-title {
font-size: 22px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.25;
}
.dc-impact-sum {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
}
.dc-impact-map {
width: 100%;
min-height: 320px;
}
.dc-impact-map a { text-decoration: none; }
.dc-impact-map a rect { transition: stroke 160ms, fill 160ms; }
.dc-impact-map a:hover rect:first-of-type {
stroke: #2A85FF;
fill: #FBFAF6;
}
/* ============================================================
REVIEWS + SUPERSEDED
============================================================ */
.dc-review-row {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
transition: transform 160ms;
}
.dc-review-row:hover { transform: translateY(-1px); }
.dc-review-date {
display: flex; flex-direction: column; align-items: center;
padding: 6px 10px;
border-radius: 8px;
background: var(--bg-app);
min-width: 52px;
flex: none;
}
.dc-review-d {
font-size: 16px; font-weight: 700; color: var(--text-primary);
line-height: 1;
}
.dc-review-m {
font-size: 10px; color: var(--text-tertiary);
text-transform: uppercase; letter-spacing: 1.2px;
margin-top: 2px;
}
.dc-review-body { flex: 1; min-width: 0; }
.dc-review-title {
font-size: 14px; font-weight: 600;
color: var(--text-primary); letter-spacing: -0.015em;
}
.dc-review-sub {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 3px;
}
.dc-review-sub b { color: var(--text-primary); font-weight: 600; }
.dc-review-outcomes { display: flex; gap: 4px; flex: none; flex-wrap: wrap; }
.dc-review-outcome {
display: inline-flex; align-items: center;
padding: 3px 8px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-tertiary);
font: 500 10px/1.4 'Inter', system-ui;
letter-spacing: -0.015em;
}
.dc-super-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--bg-surface);
border-radius: var(--r-xl);
box-shadow: var(--shadow-widget);
text-decoration: none;
opacity: 0.85;
}
.dc-super-body { flex: 1; min-width: 0; }
.dc-super-title {
font-size: 13px; font-weight: 600;
color: var(--text-primary); letter-spacing: -0.015em;
text-decoration: line-through;
text-decoration-color: rgba(16,16,16,0.20);
}
.dc-super-sub {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
margin-top: 3px;
}
.dc-super-sub b { color: var(--text-primary); font-weight: 600; }
/* ============================================================
DECISION DETAIL — the flagship
============================================================ */
.dc-detail-head {
background: var(--bg-surface);
border-radius: var(--r-3xl);
box-shadow: var(--shadow-depth);
padding: 26px 30px;
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 24px;
align-items: flex-start;
}
.dc-detail-head-l { min-width: 0; }
.dc-detail-title {
font-size: 30px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.15;
margin: 8px 0 12px;
}
.dc-detail-context {
margin: 0 0 14px;
font-size: 15px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.6;
max-width: 62ch;
}
.dc-detail-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-size: 12px; color: var(--text-secondary);
}
.dc-detail-meta-item {
display: inline-flex; align-items: center; gap: 5px;
letter-spacing: -0.015em;
}
.dc-detail-meta-item.link {
text-decoration: none;
padding: 3px 8px; border-radius: var(--r-full);
background: var(--bg-app);
transition: background 160ms;
}
.dc-detail-meta-item.link:hover { background: var(--bg-depth); color: var(--text-primary); }
.dc-detail-head-r {
display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}
.dc-detail-people { display: flex; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.dc-person { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.dc-person-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 600; color: var(--text-primary);
letter-spacing: -0.015em;
}
/* Supersession banner */
.dc-super-banner {
padding: 12px 18px;
border-radius: var(--r-xl);
background: var(--bg-highlight);
border: 1px solid var(--stroke-subtle);
display: flex; flex-direction: column; gap: 6px;
}
.dc-super-line {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dc-super-link {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px;
border-radius: var(--r-full);
background: var(--bg-app);
color: var(--text-primary);
font-size: 12px; font-weight: 500;
text-decoration: none;
transition: background 160ms;
}
.dc-super-link:hover { background: var(--bg-depth); }
/* Body grid */
.dc-detail-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 20px;
}
.dc-detail-main { display: flex; flex-direction: column; gap: 22px; }
.dc-detail-rail { display: flex; flex-direction: column; gap: 12px; }
/* Story section — editorial */
.dc-story {
display: flex; flex-direction: column; gap: 14px;
padding-bottom: 20px;
border-bottom: 1px solid var(--stroke-subtle);
}
.dc-story:last-child { border-bottom: 0; padding-bottom: 0; }
.dc-story-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.10em; text-transform: uppercase;
color: var(--text-tertiary);
}
.dc-story-num {
padding: 3px 7px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.05em;
}
.dc-story-count {
margin-left: 4px;
padding: 2px 7px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: var(--r-full);
font-size: 10px;
}
.dc-story-question-text {
margin: 0;
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
color: var(--text-primary); line-height: 1.35;
max-width: 60ch;
}
/* Evidence grid */
.dc-ev-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dc-ev-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 16px 18px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
text-decoration: none;
transition: transform 160ms, box-shadow 200ms;
}
.dc-ev-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-depth); }
.dc-ev-head {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.dc-ev-kind {
padding: 2px 6px;
background: var(--bg-app);
color: var(--text-tertiary);
border-radius: 5px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.05em;
}
.dc-ev-title {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.dc-ev-quote {
display: grid;
grid-template-columns: 20px 1fr;
gap: 8px;
padding: 8px 0;
}
.dc-ev-mark {
font-family: Georgia, serif;
font-size: 28px; line-height: 0.8;
color: rgba(42,133,255,0.55);
padding-top: 6px;
}
.dc-ev-quote-text {
font-family: Georgia, serif;
font-style: italic;
font-size: 15px;
color: var(--text-primary);
letter-spacing: -0.015em;
line-height: 1.5;
}
.dc-ev-preview-row {
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 12px;
align-items: center;
}
.dc-ev-preview-thumb {
width: 110px; height: 68px;
border-radius: 6px;
overflow: hidden;
background: white;
border: 1px solid var(--stroke-subtle);
}
.dc-ev-preview-thumb-dev {
background: var(--bg-highlight);
display: flex; align-items: center; justify-content: center;
padding: 4px;
}
.dc-ev-thumb-fallback {
width: 100%; height: 100%;
background: var(--bg-app);
}
.dc-ev-text {
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em;
line-height: 1.55;
}
.dc-ev-owner {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-tertiary);
letter-spacing: -0.015em;
padding-top: 4px;
border-top: 1px solid var(--stroke-subtle);
}
/* Options considered */
.dc-opts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dc-opt {
background: var(--bg-surface);
border-radius: var(--r-2xl);
padding: 18px 20px;
box-shadow: var(--shadow-widget);
display: flex; flex-direction: column; gap: 10px;
border-top: 2px solid transparent;
}
.dc-opt-chosen {
border-top-color: rgba(0,166,86,0.55);
background: linear-gradient(180deg, rgba(0,166,86,0.03), var(--bg-surface) 40%);
}
.dc-opt-head {
display: flex; align-items: center; justify-content: space-between;
}
.dc-opt-letter {
padding: 2px 8px;
background: var(--bg-app);
border-radius: 5px;
font-size: 10px;
color: var(--text-tertiary);
font-weight: 700;
letter-spacing: 0.05em;
}
.dc-opt-pin {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px;
border-radius: var(--r-full);
background: rgba(0,166,86,0.10);
color: #009050;
font: 700 10px/1 'Inter', system-ui;
letter-spacing: 0.02em;
}
.dc-opt-title {
font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
color: var(--text-primary);
}
.dc-opt-summary {
margin: 0;
font-size: 13px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
}
.dc-opt-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding-top: 8px;
border-top: 1px solid var(--stroke-subtle);
}
.dc-opt-col { display: flex; flex-direction: column; gap: 6px; }
.dc-opt-col ul {
margin: 0; padding-left: 16px;
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.55;
}
.dc-opt-col li::marker { color: var(--text-muted); }
.dc-opt-tradeoffs { color: var(--text-secondary); }
/* Decision block — strongest typography on the page */
.dc-story-decision { border-bottom: 0; padding-bottom: 0; }
.dc-decision-block {
padding: 22px 24px;
border-radius: var(--r-2xl);
background: var(--bg-highlight);
border: 1px solid var(--stroke-subtle);
border-left: 4px solid rgba(0,166,86,0.65);
display: flex; flex-direction: column; gap: 8px;
}
.dc-decision-h {
font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
color: var(--text-primary); line-height: 1.2;
}
.dc-decision-p {
margin: 0;
font-size: 16px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
max-width: 60ch;
}
/* Rationale */
.dc-rationale {
margin: 0;
font-size: 15px; color: var(--text-primary);
letter-spacing: -0.015em;
line-height: 1.7;
max-width: 62ch;
}
/* Consequences */
.dc-cons {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
}
.dc-cons-col { display: flex; flex-direction: column; gap: 8px; }
.dc-cons-col ul {
margin: 0; padding-left: 18px;
display: flex; flex-direction: column; gap: 6px;
font-size: 13px; color: var(--text-primary);
letter-spacing: -0.015em; line-height: 1.55;
}
.dc-cons-col li::marker { color: var(--text-muted); }
.dc-cons-accept { color: var(--text-secondary); }
.dc-cons-accept li { font-style: italic; }
/* Impact summary */
.dc-impact-summary {
margin: 0 0 4px;
font-size: 14px; color: var(--text-secondary);
letter-spacing: -0.015em; line-height: 1.55;
max-width: 60ch;
}
/* Rail cards */
.dc-rail-card {
background: var(--bg-surface);
border-radius: var(--r-2xl);
box-shadow: var(--shadow-widget);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 12px;
}
.dc-card-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.dc-card-head h4 {
margin: 0;
font-size: 14px; font-weight: 700; letter-spacing: -0.015em;
color: var(--text-primary);
}
.dc-participants { display: flex; flex-direction: column; gap: 6px; }
.dc-participant {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
font-size: 12px; color: var(--text-primary);
letter-spacing: -0.015em; font-weight: 500;
}
.dc-glance { display: flex; flex-direction: column; gap: 4px; }
.dc-glance-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-radius: var(--r-md);
background: var(--bg-app);
font-size: 12px; color: var(--text-tertiary);
letter-spacing: -0.015em;
}
.dc-glance-row b {
color: var(--text-primary); font-weight: 600; font-size: 13px;
}
.dc-related-work {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border-radius: var(--r-lg);
background: var(--bg-app);
text-decoration: none;
color: var(--text-primary);
font-size: 12px; font-weight: 500;
letter-spacing: -0.015em;
transition: background 160ms;
}
.dc-related-work:hover { background: var(--bg-depth); }
.dc-related-work span { flex: 1; min-width: 0; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
.dc-detail-head { grid-template-columns: 1fr; }
.dc-detail-head-r { align-items: flex-start; }
.dc-detail-grid { grid-template-columns: 1fr; }
.dc-ev-grid { grid-template-columns: 1fr; }
.dc-opts { grid-template-columns: 1fr; }
.dc-cons { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
.dc-needs-card { flex-direction: column; align-items: flex-start; }
.dc-needs-cta { align-self: flex-start; }
.dc-needs-facts { flex-direction: column; align-items: flex-start; gap: 10px; }
.dc-review-outcomes { display: none; }
.dc-ev-preview-row { grid-template-columns: 1fr; }
.dc-ev-preview-thumb { width: 100%; height: 96px; }
}
/* ============================================================
* PHASE 22 — SHELL V2
* Additive. Does NOT modify any Phase 1–21 rule.
* Collapsible sidebar (72px collapsed / 232px expanded),
* animated column, hover tooltips, profile popover.
* ============================================================ */
/* Shell drives BOTH columns from a single custom prop so they
transition in lockstep with no layout jump. Default = collapsed. */
.shell {
--shell-nav-w: 72px;
grid-template-columns: var(--shell-nav-w) 1fr;
min-width: 0;
transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.shell[data-sidebar="expanded"] { --shell-nav-w: 232px; }
/* The main-column min-width guard from Phase 1 is 1440 — keep it,
but allow the app to breathe on tablet. */
@media (min-width: 1200px) { .shell { min-width: 1200px; } }
@media (max-width: 1199px) { .shell { min-width: 0; } }
/* --- Sidebar container (v2 override) --- */
.side.side-v2 {
width: var(--shell-nav-w);
padding: 10px 10px 12px;
overflow: hidden;
transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1),
padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
.side.side-collapsed { padding: 10px 8px 12px; }
/* Workspace mark row */
.side-v2 .side-ws {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 8px;
border-radius: 14px;
cursor: pointer;
position: relative;
background: transparent;
margin-bottom: 8px;
}
.side-v2 .side-ws:hover { background: rgba(15,15,18,0.04); }
.side-v2 .side-ws .brand-mark {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(160deg, #101014 0%, #26262E 100%);
display: flex; align-items: center; justify-content: center;
flex: none;
}
.side-v2 .side-ws .ws-meta { flex: 1; min-width: 0; overflow: hidden; }
.side-v2 .side-ws .ws-1 {
font-size: 11px; font-weight: 500;
color: var(--text-tertiary);
letter-spacing: 0.02em;
text-transform: none;
white-space: nowrap;
}
.side-v2 .side-ws .ws-2 {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.side-collapsed .side-ws { padding: 4px; justify-content: center; }
.side-collapsed .side-ws .ws-meta { display: none; }
/* Toggle buttons (upper + lower) */
.side-toggle {
width: 28px; height: 28px;
border: none; background: transparent;
border-radius: 8px;
color: var(--text-tertiary);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex: none;
transition: background 160ms ease, color 160ms ease;
}
.side-toggle:hover { background: rgba(15,15,18,0.06); color: var(--text-primary); }
.side-toggle-top { margin-left: auto; }
.side-collapsed .side-toggle-top {
position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
}
.side-collapsed .side-toggle-bottom { display: none; }
/* Search row */
.side-v2 .side-search {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
margin: 4px 2px 10px;
border-radius: 12px;
background: var(--bg-surface);
color: var(--text-tertiary);
cursor: pointer;
font-size: 13px;
height: 40px;
position: relative;
}
.side-v2 .side-search .kbd {
margin-left: auto;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
padding: 2px 6px;
border-radius: 6px;
background: var(--bg-inset);
color: var(--text-tertiary);
}
.side-collapsed .side-search {
justify-content: center;
padding: 8px;
}
.side-collapsed .side-search .side-label,
.side-collapsed .side-search .kbd { display: none; }
/* Nav items */
.side-v2 .side-item {
display: flex; align-items: center; gap: 12px;
padding: 8px 12px;
margin: 0 2px;
border-radius: 12px;
color: var(--text-secondary);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
height: 40px;
position: relative;
transition: color 140ms ease, background 140ms ease;
}
.side-v2 .side-item:hover { background: rgba(15,15,18,0.04); color: var(--text-primary); }
.side-v2 .side-item.active {
background: rgba(42,133,255,0.10);
color: var(--text-primary);
font-weight: 600;
}
.side-v2 .side-item.active::before {
content: '';
position: absolute; left: 4px; top: 8px; bottom: 8px;
width: 3px;
border-radius: 2px;
background: var(--primary-01, #2A85FF);
}
.side-v2 .side-item.active::after { display: none; }
.side-v2 .side-item .side-icon { flex: none; }
.side-v2 .side-item .side-label {
flex: 1;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-v2 .side-item .side-badge { flex: none; }
/* Collapsed: icon-only, centered, no label */
.side-collapsed .side-item {
padding: 8px;
justify-content: center;
gap: 0;
}
.side-collapsed .side-item .side-label { display: none; }
.side-collapsed .side-item .side-badge {
position: absolute; top: 4px; right: 4px;
min-width: 16px; height: 16px; padding: 0 4px;
font-size: 9.5px;
}
/* Tooltips — pure CSS. Only shown on hover, only when collapsed
(or on the explicit data-tip on toggle buttons). */
[data-tip]:not([data-tip=""]):not([data-tip="null"])::after {
content: attr(data-tip);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(-4px);
background: #17181C;
color: #ffffff;
padding: 5px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease, transform 120ms ease;
z-index: 200;
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35);
}
[data-tip]:not([data-tip=""]):not([data-tip="null"]):hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
transition-delay: 120ms;
}
/* User tile at the bottom */
.side-v2 .side-user {
margin-top: 8px;
padding: 8px;
border-radius: 14px;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
position: relative;
}
.side-v2 .side-user:hover { background: rgba(15,15,18,0.04); }
.side-v2 .side-user .u-meta { flex: 1; min-width: 0; overflow: hidden; }
.side-v2 .side-user .u-name {
font-size: 13px; font-weight: 600;
color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
letter-spacing: -0.01em;
}
.side-v2 .side-user .u-role {
font-size: 11.5px;
color: var(--text-tertiary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 1px;
}
.side-collapsed .side-user {
justify-content: center;
padding: 6px 0;
}
.side-collapsed .side-user .u-meta { display: none; }
/* Divider */
.side-v2 .side-divider {
height: 1px;
background: var(--border-divider, rgba(15,15,18,0.08));
margin: 10px 8px;
}
.side-collapsed .side-divider { margin: 10px 6px; }
.side-v2 .side-spacer { flex: 1; }
/* --- Header V2 refinements (very light-touch) --- */
.header.header-v2 {
gap: 12px;
}
/* --- Profile popover (top-right of the header) --- */
.profile-popover {
position: absolute;
top: 44px;
right: 0;
min-width: 288px;
background: var(--bg-surface);
border-radius: 20px;
box-shadow:
0 24px 48px -12px rgba(15,15,18,0.22),
0 8px 16px -4px rgba(15,15,18,0.10),
inset 0 0 0 1px rgba(15,15,18,0.06);
padding: 16px;
z-index: 500;
animation: pp-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pp-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.profile-popover .pp-head {
display: flex; align-items: center; gap: 14px;
padding: 4px 4px 12px;
}
.profile-popover .pp-id { min-width: 0; }
.profile-popover .pp-name {
font-size: 15px; font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.profile-popover .pp-role {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
}
.profile-popover .pp-status {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px;
font-size: 11.5px; font-weight: 500;
color: var(--text-secondary);
}
.profile-popover .pp-status .pp-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #1F8A5B;
box-shadow: 0 0 0 3px rgba(31,138,91,0.15);
}
.profile-popover .pp-sep {
height: 1px;
background: var(--border-divider, rgba(15,15,18,0.08));
margin: 4px 0;
}
.profile-popover .pp-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 8px;
border-radius: 10px;
color: var(--text-primary);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
width: 100%;
text-align: left;
}
.profile-popover .pp-row:hover { background: rgba(15,15,18,0.05); }
.profile-popover .pp-row-btn .pp-mock {
margin-left: auto;
font-size: 10px;
color: var(--text-tertiary);
background: var(--bg-inset);
padding: 2px 6px;
border-radius: 6px;
letter-spacing: 0.02em;
}
.profile-popover .pp-foot {
margin-top: 8px;
padding: 6px 4px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-tertiary);
letter-spacing: 0.06em;
text-align: center;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.08));
padding-top: 8px;
}
/* ============================================================
* PHASE 22 — HOME HERO + WORKSPACE VISUAL BANNERS
* Additive. Uses the generated visual family in assets/my-geni/visuals/.
* ============================================================ */
.mg-home-hero {
position: relative;
border-radius: 24px;
overflow: hidden;
min-height: 340px;
margin-bottom: 20px;
background: var(--bg-surface);
box-shadow:
0 32px 64px -24px rgba(15,15,18,0.14),
0 12px 24px -12px rgba(15,15,18,0.08),
inset 0 0 0 1px rgba(15,15,18,0.05);
display: flex;
align-items: stretch;
}
.mg-home-hero-img {
flex: 1.15 1 0;
min-width: 340px;
background-image: url('assets/my-geni/visuals/home-command-center.webp?v=22');
background-size: cover;
background-position: center 55%;
position: relative;
}
.mg-home-hero-img::after {
/* soft right-edge gradient so body copy sits calmly on the surface next
to the image without a hard seam. */
content: '';
position: absolute; inset: 0;
background: linear-gradient(
90deg,
rgba(253,253,253,0) 0%,
rgba(253,253,253,0) 60%,
rgba(253,253,253,0.85) 92%,
rgba(253,253,253,1) 100%
);
pointer-events: none;
}
.mg-home-hero-body {
flex: 1 1 0;
padding: 40px 44px 36px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 380px;
}
.mg-home-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 20px;
}
.mg-home-hero-eyebrow .mg-hh-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #B85A00; /* subtle amber */
box-shadow: 0 0 0 4px rgba(184,90,0,0.10);
}
.mg-home-hero-greet {
font-family: Inter, system-ui, sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--text-primary);
margin: 0 0 10px 0;
}
.mg-home-hero-sub {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
max-width: 46ch;
margin: 0 0 22px 0;
letter-spacing: -0.01em;
}
.mg-home-hero-sub b { color: var(--text-primary); font-weight: 600; }
.mg-home-hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 480px;
}
.mg-hh-stat {
padding: 10px 14px 12px;
border-radius: 14px;
background: rgba(15,15,18,0.03);
text-decoration: none;
color: inherit;
transition: background 140ms ease, transform 140ms ease;
cursor: pointer;
}
.mg-hh-stat:hover {
background: rgba(15,15,18,0.06);
transform: translateY(-1px);
}
.mg-hh-stat .v {
font-family: Inter, system-ui, sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
line-height: 1;
}
.mg-hh-stat .k {
margin-top: 6px;
font-size: 11.5px;
color: var(--text-tertiary);
letter-spacing: -0.005em;
}
/* Responsive fallbacks */
@media (max-width: 1180px) {
.mg-home-hero { flex-direction: column; min-height: 0; }
.mg-home-hero-img { min-height: 200px; min-width: 0; }
.mg-home-hero-img::after {
background: linear-gradient(180deg,
rgba(253,253,253,0) 60%,
rgba(253,253,253,0.90) 92%,
rgba(253,253,253,1) 100%);
}
.mg-home-hero-body { padding: 22px 24px 26px; }
.mg-home-hero-greet { font-size: 26px; }
.mg-home-hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}
/* ==================================================================
* Workspace visual banners — one strong image per workspace overview.
* Kept small, additive, and OPTIONAL: consumers opt in by rendering
* ...
* ================================================================== */
.mg-ws-banner {
position: relative;
height: 200px;
border-radius: 24px;
overflow: hidden;
margin: 12px 0 20px;
background: var(--bg-surface);
box-shadow:
0 24px 48px -20px rgba(15,15,18,0.12),
0 8px 16px -8px rgba(15,15,18,0.06),
inset 0 0 0 1px rgba(15,15,18,0.05);
display: flex;
align-items: flex-end;
}
.mg-ws-banner .mg-ws-banner-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center 55%;
}
.mg-ws-banner .mg-ws-banner-img::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
90deg,
rgba(253,253,253,0.92) 0%,
rgba(253,253,253,0.55) 40%,
rgba(253,253,253,0) 72%
);
}
.mg-ws-banner-body {
position: relative;
z-index: 1;
padding: 24px 28px;
max-width: 60%;
}
.mg-ws-banner-eyebrow {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 8px;
}
.mg-ws-banner-title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 6px 0;
}
.mg-ws-banner-sub {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
max-width: 44ch;
margin: 0;
}
.mg-ws-banner-projects .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/projects.webp?v=22'); }
.mg-ws-banner-research .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/research.webp?v=22'); }
.mg-ws-banner-design .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/design.webp?v=22'); }
.mg-ws-banner-development .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/development.webp?v=22'); }
.mg-ws-banner-commercial .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/commercial.webp?v=22'); }
.mg-ws-banner-documents .mg-ws-banner-img { background-image: url('assets/my-geni/visuals/documents.webp?v=22'); }
/* ============================================================
* PHASE 22 — GENI AI (floating orb + panel)
* ============================================================ */
.geni-orb {
position: fixed;
right: 24px;
bottom: 24px;
width: 60px; height: 60px;
border-radius: 50%;
border: none;
padding: 0;
cursor: pointer;
z-index: 600;
background: transparent;
box-shadow:
0 20px 48px -12px rgba(15,15,18,0.32),
0 8px 16px -4px rgba(15,15,18,0.16),
inset 0 0 0 1px rgba(255,255,255,0.6);
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms ease;
overflow: hidden;
}
.geni-orb:hover {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 24px 56px -12px rgba(15,15,18,0.42),
0 10px 20px -4px rgba(15,15,18,0.20),
inset 0 0 0 1px rgba(255,255,255,0.75);
}
.geni-orb-img {
display: block;
width: 100%; height: 100%;
background-image: url('assets/my-geni/visuals/geni-ai.webp?v=22');
background-size: 175% 175%;
background-position: 50% 45%;
border-radius: 50%;
}
.geni-orb.geni-orb-open {
transform: scale(0.9);
}
/* --- Panel --- */
.geni-panel {
position: fixed;
right: 24px;
bottom: 96px;
width: 420px;
max-width: calc(100vw - 32px);
height: 620px;
max-height: calc(100vh - 120px);
background: var(--bg-surface);
border-radius: 24px;
box-shadow:
0 32px 64px -12px rgba(15,15,18,0.28),
0 16px 32px -8px rgba(15,15,18,0.16),
inset 0 0 0 1px rgba(15,15,18,0.06);
z-index: 599;
display: flex;
flex-direction: column;
overflow: hidden;
animation: geni-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes geni-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.geni-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px 12px 16px;
border-bottom: 1px solid var(--border-divider, rgba(15,15,18,0.08));
background: linear-gradient(180deg, rgba(184,90,0,0.04) 0%, rgba(253,253,253,0) 100%);
}
.geni-header-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.geni-header-orb {
width: 32px; height: 32px;
border-radius: 50%;
background-image: url('assets/my-geni/visuals/geni-ai.webp?v=22');
background-size: 175% 175%;
background-position: 50% 45%;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.06);
flex: none;
}
.geni-header-meta { min-width: 0; }
.geni-header-name {
font-size: 14px; font-weight: 700;
letter-spacing: -0.015em;
color: var(--text-primary);
line-height: 1.1;
}
.geni-header-sub {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-tertiary);
letter-spacing: 0.04em;
margin-top: 2px;
text-transform: uppercase;
}
.geni-header-actions { display: flex; gap: 4px; }
.geni-btn-ghost {
width: 28px; height: 28px;
border-radius: 8px;
border: none;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.geni-btn-ghost:hover { background: rgba(15,15,18,0.06); color: var(--text-primary); }
/* --- Thread --- */
.geni-thread {
flex: 1;
overflow-y: auto;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.geni-empty {
margin: auto;
text-align: center;
padding: 16px;
}
.geni-empty-orb {
width: 72px; height: 72px;
border-radius: 50%;
background-image: url('assets/my-geni/visuals/geni-ai.webp?v=22');
background-size: 175% 175%;
background-position: 50% 45%;
margin: 0 auto 12px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05),
0 8px 24px -8px rgba(184,90,0,0.24);
}
.geni-empty-title {
font-size: 18px; font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 4px;
}
.geni-empty-sub {
font-size: 13px;
color: var(--text-secondary);
max-width: 34ch;
margin: 0 auto;
line-height: 1.5;
}
.geni-msg { display: flex; gap: 10px; }
.geni-msg-ai { justify-content: flex-start; }
.geni-msg-user { justify-content: flex-end; }
.geni-msg-mark {
width: 24px; height: 24px;
border-radius: 50%;
background-image: url('assets/my-geni/visuals/geni-ai.webp?v=22');
background-size: 175% 175%;
background-position: 50% 45%;
flex: none;
margin-top: 2px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.06);
}
.geni-msg-body {
max-width: 82%;
}
.geni-msg-user .geni-msg-body {
background: var(--primary-01, #2A85FF);
color: #ffffff;
padding: 10px 14px;
border-radius: 16px 16px 4px 16px;
}
.geni-msg-user .geni-msg-p { color: #ffffff; }
.geni-msg-user .geni-msg-p b { color: #ffffff; font-weight: 700; }
.geni-msg-ai .geni-msg-body {
background: var(--bg-inset, #F1F1F1);
padding: 10px 14px;
border-radius: 4px 16px 16px 16px;
}
.geni-msg-p {
margin: 0 0 6px 0;
font-size: 13.5px;
line-height: 1.55;
letter-spacing: -0.005em;
color: var(--text-primary);
}
.geni-msg-p:last-child { margin-bottom: 0; }
.geni-msg-p b { font-weight: 600; }
.geni-sources {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.geni-source {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 6px;
background: rgba(15,15,18,0.05);
border-radius: 999px;
text-decoration: none;
color: var(--text-primary);
font-size: 11.5px;
font-weight: 500;
transition: background 120ms ease;
}
.geni-source:hover { background: rgba(15,15,18,0.10); }
.geni-source-kind {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
text-transform: uppercase;
color: var(--text-tertiary);
background: var(--bg-surface);
padding: 2px 6px;
border-radius: 999px;
letter-spacing: 0.04em;
}
.geni-source-label { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Typing indicator */
.geni-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 0; }
.geni-typing span {
width: 6px; height: 6px; border-radius: 50%;
background: var(--text-tertiary);
animation: geni-dot 1.1s ease-in-out infinite;
}
.geni-typing span:nth-child(2) { animation-delay: 0.15s; }
.geni-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes geni-dot {
0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
/* Suggestions strip (above composer) */
.geni-suggestions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 14px 4px;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.06));
background: var(--bg-surface);
}
.geni-suggestion {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border-divider, rgba(15,15,18,0.10));
background: transparent;
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.geni-suggestion:hover {
background: rgba(15,15,18,0.05);
border-color: rgba(15,15,18,0.16);
color: var(--text-primary);
}
/* Composer */
.geni-composer {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 14px;
background: var(--bg-surface);
}
.geni-input {
flex: 1;
height: 40px;
border: 1px solid var(--border-divider, rgba(15,15,18,0.14));
border-radius: 12px;
padding: 0 14px;
background: var(--bg-surface);
font-family: Inter, system-ui, sans-serif;
font-size: 13.5px;
color: var(--text-primary);
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.geni-input:focus {
border-color: var(--primary-01, #2A85FF);
box-shadow: 0 0 0 3px rgba(42,133,255,0.14);
}
.geni-send {
width: 40px; height: 40px;
border-radius: 12px;
border: none;
background: var(--primary-01, #2A85FF);
color: #ffffff;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 120ms ease, background 120ms ease;
}
.geni-send:hover:not(:disabled) { transform: scale(1.03); }
.geni-send:disabled { opacity: 0.4; cursor: not-allowed; }
/* Responsive — panel adapts to narrow viewports */
@media (max-width: 640px) {
.geni-panel {
right: 12px;
left: 12px;
width: auto;
bottom: 80px;
height: calc(100vh - 100px);
}
.geni-orb {
right: 16px; bottom: 16px;
width: 54px; height: 54px;
}
}
/* ============================================================
* PHASE 22 — CLIENTS V2
* ============================================================ */
.cw2-main { padding: 0 32px 40px; }
.cw2-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 24px 0 20px;
flex-wrap: wrap;
}
.cw2-tabs {
display: inline-flex;
background: var(--bg-inset, #F1F1F1);
border-radius: 999px;
padding: 4px;
}
.cw2-tab {
padding: 6px 14px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: background 120ms ease, color 120ms ease;
}
.cw2-tab.active {
background: var(--bg-surface);
color: var(--text-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(15,15,18,0.06);
}
.cw2-body { display: flex; flex-direction: column; gap: 20px; }
.cw2-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.cw2-dot {
width: 6px; height: 6px; border-radius: 50%;
background: #1F8A5B;
box-shadow: 0 0 0 3px rgba(31,138,91,0.15);
}
/* --- Active card --- */
.cw2-active-card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 32px;
background: var(--bg-surface);
border-radius: 24px;
padding: 28px 32px;
box-shadow:
0 24px 48px -20px rgba(15,15,18,0.12),
inset 0 0 0 1px rgba(15,15,18,0.05);
}
.cw2-active-title {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 12px 0 6px;
}
.cw2-active-sub {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
max-width: 46ch;
margin: 0 0 20px 0;
}
.cw2-active-meta { display: flex; flex-direction: column; gap: 10px; }
.cw2-meta-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.06));
font-size: 13px;
}
.cw2-meta-row:first-child { border-top: none; padding-top: 0; }
.cw2-meta-k { color: var(--text-tertiary); flex: 0 0 140px; font-weight: 500; }
.cw2-meta-v { color: var(--text-primary); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.cw2-active-right {
border-left: 1px solid var(--border-divider, rgba(15,15,18,0.06));
padding-left: 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cw2-projects-lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.cw2-project-row, .cw2-project-row-wide {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(15,15,18,0.03);
text-decoration: none;
color: inherit;
transition: background 120ms ease;
}
.cw2-project-row:hover { background: rgba(15,15,18,0.06); }
.cw2-project-glyph {
width: 32px; height: 32px;
border-radius: 10px;
background: var(--bg-inset);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 600;
color: var(--text-secondary);
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0.02em;
}
.cw2-project-meta { flex: 1; min-width: 0; }
.cw2-project-name {
font-size: 13.5px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.cw2-project-code {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-tertiary);
margin-top: 2px;
}
.cw2-project-owner {
font-size: 12px;
color: var(--text-secondary);
display: inline-flex; align-items: center; gap: 6px;
}
.cw2-project-row-wide { padding: 12px 14px; }
.cw2-cta {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: #17181C;
color: #ffffff;
border-radius: 12px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
justify-content: center;
}
.cw2-cta:hover { background: #0A0B0F; }
.cw2-empty-inline {
font-size: 13px;
color: var(--text-tertiary);
padding: 12px 0;
}
/* --- Activity --- */
.cw2-section {
background: var(--bg-surface);
border-radius: 20px;
padding: 20px 24px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
}
.cw2-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cw2-section-title {
font-size: 14px; font-weight: 700; margin: 0;
letter-spacing: -0.01em;
}
.cw2-section-hint { font-size: 11.5px; color: var(--text-tertiary); }
.cw2-activity { display: flex; flex-direction: column; }
.cw2-activity-row {
display: grid;
grid-template-columns: 24px 60px 140px 1fr;
gap: 12px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.05));
font-size: 13px;
color: var(--text-secondary);
}
.cw2-activity-row:first-child { border-top: none; }
.cw2-activity-icon {
width: 24px; height: 24px;
color: var(--text-tertiary);
display: inline-flex; align-items: center; justify-content: center;
}
.cw2-activity-when {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-tertiary);
letter-spacing: 0.02em;
}
.cw2-activity-who {
display: inline-flex; align-items: center; gap: 6px;
font-weight: 500;
color: var(--text-primary);
}
.cw2-activity-what { color: var(--text-secondary); }
.cw2-activity-what b { color: var(--text-primary); font-weight: 600; }
/* --- Empty block --- */
.cw2-empty-block {
padding: 32px;
border: 1px dashed var(--border-divider, rgba(15,15,18,0.14));
border-radius: 20px;
text-align: center;
color: var(--text-secondary);
}
.cw2-empty-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.cw2-empty-sub { font-size: 12.5px; color: var(--text-tertiary); }
/* --- Directory --- */
.cw2-directory-controls {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.cw2-search {
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
height: 40px;
border-radius: 12px;
background: var(--bg-surface);
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.08);
min-width: 280px;
flex: 1;
color: var(--text-tertiary);
}
.cw2-search input {
border: none; background: transparent; outline: none;
flex: 1;
font-family: inherit;
font-size: 13.5px;
color: var(--text-primary);
}
.cw2-filters { display: flex; gap: 6px; }
.cw2-chip {
padding: 7px 12px;
border-radius: 999px;
border: 1px solid transparent;
background: transparent;
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cw2-chip:hover { background: rgba(15,15,18,0.05); color: var(--text-primary); }
.cw2-chip.active {
background: var(--bg-inset);
border-color: rgba(15,15,18,0.10);
color: var(--text-primary);
font-weight: 600;
}
.cw2-chip-count {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-tertiary);
background: var(--bg-surface);
padding: 1px 6px;
border-radius: 6px;
}
.cw2-rows { display: flex; flex-direction: column; gap: 8px; }
.cw2-row {
display: grid;
grid-template-columns: 44px 1.8fr repeat(3, 0.8fr) 100px;
gap: 16px;
align-items: center;
padding: 14px 18px;
border-radius: 16px;
background: var(--bg-surface);
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
text-decoration: none;
color: inherit;
transition: background 120ms ease, transform 120ms ease;
}
.cw2-row:hover { background: rgba(42,133,255,0.03); transform: translateY(-1px); }
.cw2-row-glyph {
width: 44px; height: 44px;
border-radius: 12px;
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
font-size: 12px;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0.02em;
}
.cw2-row-name {
font-size: 14px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.cw2-row-industry {
font-size: 11.5px; color: var(--text-tertiary);
margin-top: 2px;
}
.cw2-row-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cw2-row-k {
font-size: 10.5px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
}
.cw2-row-v {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
}
.cw2-row-status { display: flex; justify-content: flex-end; }
/* --- Detail --- */
.cw2-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px;
color: var(--text-secondary);
text-decoration: none;
padding: 4px 8px;
border-radius: 8px;
align-self: flex-start;
}
.cw2-back:hover { background: rgba(15,15,18,0.04); color: var(--text-primary); }
.cw2-detail-head {
display: flex; align-items: center; gap: 20px;
padding: 12px 0;
}
.cw2-detail-mark {
width: 72px; height: 72px;
border-radius: 20px;
color: var(--text-primary);
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 18px;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0.02em;
flex: none;
}
.cw2-detail-id { flex: 1; min-width: 0; }
.cw2-detail-name {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 6px 0 4px;
}
.cw2-detail-sub {
font-size: 13.5px;
color: var(--text-tertiary);
}
.cw2-detail-rail { flex: 0 0 auto; }
.cw2-detail-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
}
.cw2-detail-main { display: flex; flex-direction: column; gap: 16px; }
.cw2-detail-rail-col { display: flex; flex-direction: column; gap: 16px; }
.cw2-panel {
background: var(--bg-surface);
border-radius: 20px;
padding: 20px 24px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
}
.cw2-panel-h {
font-size: 13px; font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
margin-bottom: 12px;
display: flex; justify-content: space-between; align-items: baseline;
}
.cw2-panel-hint {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--text-tertiary);
font-weight: 500;
}
.cw2-panel-p {
margin: 0;
font-size: 13.5px;
line-height: 1.6;
color: var(--text-secondary);
max-width: 62ch;
}
.cw2-doc-row {
display: grid;
grid-template-columns: 44px 1fr 140px;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: background 120ms ease;
}
.cw2-doc-row:hover { background: rgba(15,15,18,0.04); }
.cw2-doc-kind {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
color: var(--text-tertiary);
background: var(--bg-inset);
padding: 4px 8px;
border-radius: 6px;
text-align: center;
letter-spacing: 0.04em;
font-weight: 600;
}
.cw2-doc-title {
font-size: 13px; font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.cw2-doc-meta {
font-size: 11.5px;
color: var(--text-tertiary);
text-align: right;
}
/* Rail panels */
.cw2-rail-panel {
background: var(--bg-surface);
border-radius: 18px;
padding: 16px 18px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
}
.cw2-rail-h {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 12px;
}
.cw2-rail-contact {
display: flex; align-items: center; gap: 12px;
}
.cw2-rail-contact-name {
font-size: 13.5px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.cw2-rail-contact-role {
font-size: 11.5px;
color: var(--text-tertiary);
margin-top: 2px;
}
.cw2-rail-owner {
display: flex; align-items: center; gap: 10px;
padding: 6px;
border-radius: 10px;
text-decoration: none;
color: inherit;
}
.cw2-rail-owner:hover { background: rgba(15,15,18,0.04); }
.cw2-rail-owner-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cw2-rail-owner-role { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.cw2-rail-facts { display: flex; flex-direction: column; gap: 6px; }
.cw2-rail-facts > div { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--border-divider, rgba(15,15,18,0.05)); font-size: 12.5px; }
.cw2-rail-facts > div:first-child { border-top: none; }
.cw2-rail-k { color: var(--text-tertiary); }
.cw2-rail-v { color: var(--text-primary); font-weight: 500; }
.cw2-rail-contract {
display: block;
padding: 10px;
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: background 120ms ease;
}
.cw2-rail-contract:hover { background: rgba(15,15,18,0.04); }
.cw2-rail-contract-code {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.cw2-rail-contract-title {
font-size: 12.5px; font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.cw2-rail-contract-meta {
font-size: 11px;
color: var(--text-tertiary);
margin-top: 3px;
}
@media (max-width: 1120px) {
.cw2-active-card { grid-template-columns: 1fr; }
.cw2-active-right { border-left: none; padding-left: 0; padding-top: 16px; border-top: 1px solid var(--border-divider, rgba(15,15,18,0.06)); }
.cw2-detail-grid { grid-template-columns: 1fr; }
.cw2-row { grid-template-columns: 44px 1fr 80px; gap: 12px; }
.cw2-row .cw2-row-col:not(:nth-of-type(1)):not(:nth-of-type(2)) { display: none; }
}
/* ============================================================
* PHASE 22 — SETTINGS V2
* ============================================================ */
.sw2-main { padding: 0 32px 40px; }
.sw2-header { padding: 24px 0 20px; }
.sw2-grid {
display: grid;
grid-template-columns: 240px 1fr;
gap: 24px;
align-items: flex-start;
}
.sw2-rail {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px;
background: var(--bg-surface);
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
position: sticky;
top: 20px;
}
.sw2-rail-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border-radius: 12px;
text-decoration: none;
font-size: 13.5px;
color: var(--text-secondary);
font-weight: 500;
transition: background 120ms ease, color 120ms ease;
}
.sw2-rail-item:hover { background: rgba(15,15,18,0.04); color: var(--text-primary); }
.sw2-rail-item.active {
background: rgba(42,133,255,0.10);
color: var(--text-primary);
font-weight: 600;
}
.sw2-rail-item svg { flex: none; color: var(--text-tertiary); }
.sw2-rail-item.active svg { color: var(--primary-01, #2A85FF); }
.sw2-body { display: flex; flex-direction: column; gap: 16px; }
.sw2-panel {
background: var(--bg-surface);
border-radius: 24px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.05);
}
.sw2-panel-head {
padding: 24px 28px 8px;
border-bottom: 1px solid var(--border-divider, rgba(15,15,18,0.05));
}
.sw2-panel-title {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 6px;
}
.sw2-panel-hint {
font-size: 13px;
color: var(--text-tertiary);
margin: 0 0 16px 0;
max-width: 62ch;
line-height: 1.5;
}
.sw2-panel-body { padding: 20px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.sw2-field {
display: grid;
grid-template-columns: 180px 1fr;
gap: 20px;
align-items: center;
padding: 8px 0;
}
.sw2-field-label {
font-size: 12.5px; font-weight: 500;
color: var(--text-secondary);
letter-spacing: -0.005em;
}
.sw2-field-control { min-width: 0; }
.sw2-input {
width: 100%;
padding: 9px 14px;
border-radius: 10px;
border: 1px solid var(--border-divider, rgba(15,15,18,0.10));
background: var(--bg-surface);
font-family: inherit;
font-size: 13.5px;
color: var(--text-primary);
outline: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sw2-input:focus {
border-color: var(--primary-01, #2A85FF);
box-shadow: 0 0 0 3px rgba(42,133,255,0.14);
}
select.sw2-input { cursor: pointer; appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%2377757F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.sw2-panel-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.05));
margin-top: 8px;
}
.sw2-segment {
display: inline-flex;
background: var(--bg-inset);
border-radius: 10px;
padding: 3px;
}
.sw2-segment-btn {
border: none;
background: transparent;
padding: 6px 14px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.sw2-segment-btn.active {
background: var(--bg-surface);
color: var(--text-primary);
font-weight: 600;
box-shadow: 0 1px 3px rgba(15,15,18,0.06);
}
.sw2-toggle-row {
display: flex; justify-content: space-between; align-items: center;
gap: 20px;
padding: 12px 0;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.05));
}
.sw2-toggle-row:first-child { border-top: none; }
.sw2-toggle-body { flex: 1; }
.sw2-toggle-label { font-size: 13.5px; font-weight: 500; color: var(--text-primary); }
.sw2-toggle-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.sw2-toggle {
width: 40px; height: 22px;
border: none;
border-radius: 999px;
background: rgba(15,15,18,0.16);
cursor: pointer;
position: relative;
transition: background 160ms ease;
padding: 0;
flex: none;
}
.sw2-toggle.on { background: var(--primary-01, #2A85FF); }
.sw2-toggle-thumb {
position: absolute;
top: 2px; left: 2px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sw2-toggle.on .sw2-toggle-thumb { transform: translateX(18px); }
.sw2-mark-preview {
display: flex; align-items: center; gap: 16px;
}
.sw2-mark {
width: 48px; height: 48px;
border-radius: 14px;
background: linear-gradient(160deg, #101014 0%, #26262E 100%);
color: #fff;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
font-size: 15px;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0.03em;
}
.sw2-mark-meta { font-size: 12.5px; color: var(--text-tertiary); display: flex; flex-direction: column; gap: 8px; }
.sw2-people { display: flex; flex-direction: column; gap: 4px; }
.sw2-person {
display: flex; align-items: center; gap: 14px;
padding: 12px 12px;
border-radius: 14px;
transition: background 120ms ease;
}
.sw2-person:hover { background: rgba(15,15,18,0.03); }
.sw2-person-body { flex: 1; min-width: 0; }
.sw2-person-name {
font-size: 14px; font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 8px;
}
.sw2-you-chip {
font-size: 9px; font-weight: 700;
letter-spacing: 0.08em;
color: #1F8A5B;
background: rgba(31,138,91,0.08);
border: 1px solid rgba(31,138,91,0.20);
padding: 2px 6px;
border-radius: 999px;
}
.sw2-person-role {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 2px;
}
.sw2-person-role-btn {
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border-divider, rgba(15,15,18,0.10));
background: transparent;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
transition: background 120ms ease;
}
.sw2-person-role-btn:hover { background: rgba(15,15,18,0.04); color: var(--text-primary); }
.sw2-note {
padding: 14px 18px;
border-radius: 14px;
background: rgba(184,90,0,0.05);
border-left: 3px solid #B85A00;
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.55;
}
.sw2-note b { color: var(--text-primary); font-weight: 600; }
.sw2-note .mono { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--bg-inset); }
.sw2-integrations { display: flex; flex-direction: column; gap: 8px; }
.sw2-integration {
display: flex; align-items: center; gap: 14px;
padding: 14px;
border-radius: 14px;
background: rgba(15,15,18,0.03);
}
.sw2-integration-glyph {
width: 40px; height: 40px;
border-radius: 10px;
background: var(--bg-surface);
display: inline-flex; align-items: center; justify-content: center;
font-family: Inter;
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.08);
}
.sw2-integration-body { flex: 1; min-width: 0; }
.sw2-integration-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.sw2-integration-desc { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }
.sw2-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.sw2-action-card {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px;
border-radius: 14px;
background: var(--bg-surface);
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.08);
border: none;
cursor: pointer;
text-align: left;
transition: background 120ms ease, box-shadow 120ms ease;
}
.sw2-action-card:hover { background: rgba(42,133,255,0.03); box-shadow: inset 0 0 0 1px rgba(42,133,255,0.20); }
.sw2-action-card svg { flex: none; margin-top: 2px; color: var(--primary-01, #2A85FF); }
.sw2-action-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.sw2-action-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; }
.sw2-token-card {
padding: 16px 18px;
border-radius: 16px;
background: rgba(15,15,18,0.03);
}
.sw2-token-head { display: flex; justify-content: space-between; align-items: center; }
.sw2-token-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.sw2-token-sub { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.sw2-token-sub .mono { font-family: 'JetBrains Mono', monospace; padding: 1px 5px; border-radius: 4px; background: var(--bg-surface); font-size: 10.5px; }
.sw2-token-value {
margin-top: 12px;
padding: 10px 14px;
border-radius: 10px;
background: var(--bg-surface);
display: flex; align-items: center; gap: 8px;
box-shadow: inset 0 0 0 1px rgba(15,15,18,0.08);
}
.sw2-token-value .mono { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--text-primary); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw2-token-btn {
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--border-divider, rgba(15,15,18,0.10));
background: transparent;
font-size: 11.5px;
color: var(--text-secondary);
cursor: pointer;
}
.sw2-token-btn:hover { background: rgba(15,15,18,0.04); color: var(--text-primary); }
.sw2-audit { display: flex; flex-direction: column; }
.sw2-audit-row {
display: grid;
grid-template-columns: 160px 160px 1fr;
gap: 16px;
align-items: center;
padding: 10px 0;
border-top: 1px solid var(--border-divider, rgba(15,15,18,0.05));
font-size: 13px;
color: var(--text-secondary);
}
.sw2-audit-row:first-child { border-top: none; }
.sw2-audit-when { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.02em; }
.sw2-audit-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text-primary); font-weight: 500; }
.sw2-plan-card {
padding: 24px 28px;
border-radius: 20px;
background: linear-gradient(140deg, rgba(42,133,255,0.05) 0%, rgba(184,90,0,0.03) 100%);
border: 1px solid rgba(42,133,255,0.12);
}
.sw2-plan-head { display: flex; justify-content: space-between; align-items: baseline; }
.sw2-plan-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-tertiary); }
.sw2-plan-name { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); margin-top: 4px; }
.sw2-plan-price { text-align: right; }
.sw2-plan-num { font-family: Inter; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1; }
.sw2-plan-cycle { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.sw2-plan-features {
list-style: none;
padding: 0;
margin: 20px 0;
display: flex; flex-direction: column; gap: 8px;
font-size: 13.5px;
color: var(--text-secondary);
}
.sw2-plan-features li::before {
content: '';
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--primary-01, #2A85FF);
margin-right: 10px;
vertical-align: middle;
}
.sw2-plan-actions { display: flex; gap: 10px; justify-content: flex-end; }
/* --- Toast --- */
.sw2-toast {
position: fixed;
bottom: 96px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: #17181C;
color: #ffffff;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 24px 48px -12px rgba(15,15,18,0.24);
z-index: 700;
animation: sw2-toast-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sw2-toast-in {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.sw2-toast-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: rgba(31,138,91,0.20);
color: #4ADE80;
}
.sw2-toast-chip {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.6);
border-left: 1px solid rgba(255,255,255,0.15);
padding-left: 10px;
margin-left: 4px;
text-transform: uppercase;
}
@media (max-width: 1120px) {
.sw2-grid { grid-template-columns: 1fr; }
.sw2-rail { position: relative; top: 0; flex-direction: row; overflow-x: auto; }
.sw2-field { grid-template-columns: 1fr; }
}