/* ============ Young Ventures - Network + Back Office ============ */
:root {
/* Brand - pure black canvas + brand accents (matches the public YV site) */
--bg: #000000; /* pure black */
--bg-deep: #000000; /* globe on pure black */
--bg-elev: #121214; /* elevated, neutral dark grey */
--bg-card: #161619; /* card / panel bg */
--bg-hover: #1F1F23; /* hover row / item */
--line: #262629; /* neutral border */
--line-2: #34343B; /* stronger border */
--text: #F5F6F8;
--text-mute: #9A9AA6;
--text-dim: #5E5E68;
/* Brand accents: hot-pink + cyan + mint (from the geometric mark) */
--magenta: #FF1A78; /* primary hot-pink */
--cyan: #22E6E6; /* brand cyan */
--mint: #6BC34A; /* brand green (grass) - tertiary accent */
--lime: #6BC34A; /* legacy alias → green */
--green: #6BC34A; /* explicit alias (label) */
--orange: #FF6A2B; /* orange accent (stat icons) */
--red: #FF3B3B; /* Lost (LP kanban) */
/* Ochre: NOT a status colour. It marks a database entity that is already on
LP's Relations, and it is deliberately outside the pipeline palette so it
cannot be misread as a stage. 7.6:1 on --bg-card, 8.7:1 on --bg. */
--ochre: #C9A227;
--grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 100%);
--display: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
--serif: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
--sans: 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
--mono: 'Barlow Condensed', ui-monospace, Menlo, monospace; /* tutto Barlow Condensed (Davide) */
--sb-w: 248px;
--intro-side-w: 380px;
--pad: 32px;
/* Flat/squared identity: radius is 0 everywhere (legacy var kept for old rules). */
--radius: 0px;
/* RGB triplets so alpha variants derive from ONE source of truth. */
--cyan-rgb: 34, 230, 230;
--magenta-rgb: 255, 26, 120;
--green-rgb: 107, 195, 74;
--red-rgb: 255, 59, 59;
/* Motion scale: one easing family, three speeds, used app-wide. */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
--tr-fast: 0.15s var(--ease);
--tr-base: 0.25s var(--ease);
--tr-slow: 0.35s var(--ease-pop);
/* Z-index layers (content < sticky < dropdown < modal < toast < cursors). */
--z-sticky: 10;
--z-dropdown: 100;
--z-modal: 1000;
--z-toast: 1200;
--z-cursor: 9999;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-weight: 500;
/* THE global type lever: every font-size in the app is rem (base 15px at
<=1440w), so this single fluid value scales ALL typography with the
monitor: 15px @1440 -> ~17px @1920 -> ~19.7px @2560 -> 21px cap @3440+.
(Text inside SVG viewBoxes stays px: it already stretches with the SVG.) */
font-size: clamp(15px, 0.42vw + 8.95px, 21px);
line-height: 1.5;
letter-spacing: 0.005em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern', 'liga', 'tnum';
}
body { overflow: hidden; }
button { font-family: inherit; cursor: pointer; }
/* Form controls do NOT inherit font-family by default -> force them onto the
site font (Barlow Condensed) so every input/select/textarea matches. */
input, textarea, select { font-family: inherit; }
::selection { background: var(--cyan); color: var(--bg); }
/* Scrollbars hidden app-wide (scrolling still works) - user preference. */
* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
.screen { display: none; }
.screen.active { display: block; animation: yvScreenIn 0.32s var(--ease) both; }
/* Opacity-only entry (no transform: screen roots host position:fixed children). */
@keyframes yvScreenIn { from { opacity: 0; } to { opacity: 1; } }
/* Keyboard navigation: visible focus without polluting mouse interaction.
Squared cyan outline = brand-coherent replacement for the UA ring. */
:focus-visible {
outline: 1px solid rgba(var(--cyan-rgb), 0.75);
outline-offset: 0.1333rem;
border-radius: 0;
}
.logo-mark { width: 1.8667rem; height: 1.8667rem; color: var(--text); flex-shrink: 0; }
/* ====================================================================== */
/* ========================== INTRO ================================== */
/* ====================================================================== */
#intro.active {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
background: var(--bg-deep);
position: relative;
overflow: hidden;
}
#intro::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60rem 40rem at 75% 40%, rgba(34, 230, 230,0.06), transparent 60%),
radial-gradient(46.6667rem 33.3333rem at 20% 70%, rgba(255, 26, 120,0.04), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* === Laboratory dot grid background (sotto al globo) === */
.intro-stage::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
background-position: 0 0;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 70%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 70%, transparent 95%);
}
/* === Globe HTML pin - single bright cyan dot === */
.globe-pin {
width: 9px;
height: 9px;
border-radius: 50%;
background: #22E6E6;
box-shadow:
0 0 6px rgba(34, 230, 230,0.9),
0 0 14px rgba(34, 230, 230,0.55),
0 0 24px rgba(34, 230, 230,0.25);
transform: translate(-50%, -50%);
cursor: pointer;
transition: transform .15s ease;
pointer-events: auto;
}
.globe-pin:hover {
transform: translate(-50%, -50%) scale(1.35);
}
.globe-pin.selected {
background: #FFFFFF;
box-shadow:
0 0 8px rgba(255,255,255,0.95),
0 0 18px rgba(34, 230, 230,0.7),
0 0 32px rgba(34, 230, 230,0.35);
}
/* ===== Top bar ===== */
.intro-top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.9333rem 1.8667rem;
border-bottom: 1px solid var(--line);
background: rgba(13, 13, 15,0.6);
backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.8rem);
position: relative;
z-index: 5;
}
/* ===== AUM display in top bar ===== */
.aum-display {
display: inline-flex;
align-items: center;
gap: 0.8rem;
justify-self: center;
padding: 0.4rem 0.9333rem;
border: 1px solid var(--line);
border-radius: 0;
background: rgba(13, 13, 15,0.55);
cursor: pointer;
position: relative;
transition: border-color .15s ease;
}
.aum-display:hover { border-color: var(--line-2); }
.aum-display.open { border-color: var(--cyan); }
/* Dropdown - appare sotto al click, no indicatori visibili */
.aum-dropdown {
position: absolute;
top: calc(100% + 0.5333rem);
left: 50%;
transform: translateX(-50%);
min-width: 16rem;
background: var(--bg-elev);
border: 1px solid var(--line-2);
border-radius: 0;
padding: 0.6667rem 0.9333rem;
box-shadow: 0 1.0667rem 2.6667rem rgba(0,0,0,0.65);
z-index: 100;
cursor: default;
}
.aum-dropdown[hidden] { display: none; }
.aum-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.4rem 0;
font-family: var(--mono);
font-size: 0.7333rem;
border-bottom: 1px solid var(--line);
gap: 0.8rem;
}
.aum-row:last-child { border-bottom: none; }
.aum-row-label {
color: var(--text-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.aum-row-value {
color: var(--text);
font-weight: 600;
font-size: 0.8rem;
}
.aum-row-count {
color: var(--text-mute);
font-size: 0.6667rem;
margin-left: 0.4rem;
}
.aum-row-total {
border-top: 1px solid var(--line-2);
border-bottom: none;
margin-top: 0.2667rem;
padding-top: 0.5333rem;
}
.aum-row-total .aum-row-label { color: var(--cyan); }
.aum-row-total .aum-row-value { font-family: var(--serif); font-size: 1.0667rem; font-weight: 500; }
.aum-label {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.22em;
color: var(--green);
}
.aum-value {
font-family: var(--serif);
font-size: 1.2rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
line-height: 1;
}
.live-tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--lime);
background: rgba(107, 195, 74,0.10);
border: 1px solid rgba(107, 195, 74,0.45);
padding: 0.2rem 0.5333rem;
border-radius: 0;
text-transform: uppercase;
line-height: 1;
}
.live-tag::before {
content: "";
display: inline-block;
width: 0.4rem; height: 0.4rem;
background: var(--lime);
border-radius: 0;
box-shadow: 0 0 0.4rem var(--lime);
animation: pulse 1.6s ease-in-out infinite;
}
.intro-brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--text);
text-decoration: none;
justify-self: start;
}
.brand-mark {
display: inline-flex;
width: 1.7333rem;
height: 1.7333rem;
flex-shrink: 0;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.intro-brand-text {
font-family: var(--serif);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.14em;
padding-left: 0;
}
.intro-nav {
display: inline-flex;
gap: 1.8667rem;
}
.intro-nav a {
font-family: var(--sans);
font-weight: 500;
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-mute);
text-decoration: none;
position: relative;
padding: 0.2667rem 0;
transition: color .15s ease;
}
.intro-nav a:hover { color: var(--text); }
.intro-nav a.active {
color: var(--text);
}
.intro-nav a.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -0.4rem;
height: 1px;
background: var(--cyan);
box-shadow: 0 0 0.5333rem var(--cyan);
}
.intro-top-right {
display: inline-flex;
align-items: center;
gap: 0.9333rem;
justify-self: end;
}
.live-pill {
display: inline-flex;
align-items: center;
gap: 0.5333rem;
padding: 0.4rem 0.8rem;
border: 1px solid rgba(107, 195, 74,0.3);
background: rgba(107, 195, 74,0.06);
border-radius: 0;
font-family: var(--mono);
font-size: 0.7333rem;
font-weight: 500;
color: var(--lime);
letter-spacing: 0.16em;
}
.live-dot {
width: 0.4667rem; height: 0.4667rem;
border-radius: 50%;
background: var(--lime);
box-shadow: 0 0 0.6667rem var(--lime);
animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
.btn-arrow {
background: transparent;
border: none;
color: var(--text);
padding: 0.5333rem 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform .25s ease, color .2s ease;
line-height: 0;
}
.btn-arrow svg { display: block; transition: transform .25s ease; }
.btn-arrow:hover { color: var(--cyan); }
.btn-arrow:hover svg { transform: translateX(0.2667rem); }
/* ===== Stage (side + globe) ===== */
.intro-stage {
position: relative;
min-height: 0;
z-index: 1;
overflow: hidden;
}
/* ===== Floating glass panels (left + right stack) ===== */
.intro-side,
.intro-panel {
position: absolute;
display: flex;
flex-direction: column;
border: 1px solid var(--line-2);
border-radius: 0;
background: rgba(13, 13, 15,0.72);
backdrop-filter: blur(1.2rem) saturate(140%);
-webkit-backdrop-filter: blur(1.2rem) saturate(140%);
box-shadow:
0 1.6rem 4rem rgba(0,0,0,0.55),
0 0.1333rem 0 rgba(255,255,255,0.03) inset,
0 0 0 1px rgba(255,255,255,0.02);
overflow: hidden;
z-index: 4;
}
.intro-side {
top: 0.9333rem;
left: 1.4667rem;
bottom: 1.4667rem;
width: 21.6rem;
}
.right-stack {
position: absolute;
top: 0.9333rem;
right: 1.4667rem;
bottom: 1.4667rem;
width: 21.6rem;
display: grid;
grid-template-rows: auto 1fr; /* news = 3 voci (content), allocation = resto */
gap: 0.8rem;
z-index: 4;
}
.intro-panel {
position: relative;
top: auto; left: auto; right: auto; bottom: auto;
width: 100%;
min-height: 0;
}
/* Panel header (right panels) */
.panel-h {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
padding: 1.0667rem 1.2rem 0.8rem;
border-bottom: 1px solid var(--line);
}
.panel-h-left { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.panel-h-title {
font-family: var(--serif);
font-weight: 700;
font-size: 1.4667rem;
margin: 0;
color: var(--text);
line-height: 1;
letter-spacing: -0.02em;
}
.panel-h-act {
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
font-size: 0.8667rem;
width: 1.7333rem; height: 1.7333rem;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all .15s ease;
}
.panel-h-act:hover { color: var(--cyan); border-color: var(--cyan); }
.panel-tabs {
display: inline-flex;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 0;
padding: 0.1333rem;
flex-shrink: 0;
}
.ptab {
background: transparent;
border: none;
color: var(--text-mute);
font-family: var(--sans);
font-weight: 600;
font-size: 0.7333rem;
letter-spacing: 0.08em;
padding: 0.3333rem 0.6667rem;
border-radius: 0;
text-transform: uppercase;
transition: all .15s ease;
}
.ptab:hover { color: var(--text); }
.ptab.active { background: var(--text); color: var(--bg); }
/* News feed */
.news-list {
flex: 1;
overflow-y: auto;
padding: 0.4rem 0 0.5333rem;
min-height: 0;
max-height: 15.6rem; /* 3 items visible (0.4rem pad + 3x5.0667rem); the 4th only on scroll */
}
.news-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.8rem;
padding: 0.6667rem 1.2rem;
border-bottom: 1px solid var(--line);
transition: background .12s ease;
cursor: pointer;
height: 5.0667rem; /* righe uniformi → 3 visibili pulite, niente "pezzettino" */
align-content: start;
}
.news-item:hover { background: rgba(255,255,255,0.02); }
.news-item:last-child { border-bottom: none; }
.news-time {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
color: var(--text-mute);
letter-spacing: 0.06em;
padding-top: 0.1333rem;
width: 2.5333rem;
}
.news-body { min-width: 0; }
.news-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.18em;
padding: 0.1333rem 0.4rem;
border-radius: 0;
border: 1px solid;
margin-bottom: 0.2667rem;
}
.news-tag.t-eu { color: var(--cyan); border-color: rgba(34, 230, 230,0.4); background: rgba(34, 230, 230,0.06); }
.news-tag.t-us { color: var(--lime); border-color: rgba(107, 195, 74,0.4); background: rgba(107, 195, 74,0.06); }
.news-tag.t-asia { color: var(--magenta); border-color: rgba(255, 26, 120,0.4); background: rgba(255, 26, 120,0.06); }
.news-tag.t-global { color: var(--text-mute); border-color: var(--line-2); background: rgba(255,255,255,0.02); }
.news-text {
font-family: var(--sans);
font-size: 0.8667rem;
color: var(--text);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-meta-row {
display: flex;
align-items: center;
gap: 0.5333rem;
margin-bottom: 0.2667rem;
}
.news-source {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
color: var(--text-mute);
text-transform: uppercase;
}
.news-item.clickable { cursor: pointer; }
.news-item.clickable:hover .news-text { color: var(--cyan); }
.news-item.clickable:hover .news-source { color: var(--cyan); }
/* ============ Modal (LP add) ============ */
.modal {
border: none;
padding: 0;
background: transparent;
color: var(--text);
max-width: 92vw;
}
.modal::backdrop {
background: rgba(5, 8, 18, 0.78);
backdrop-filter: blur(0.4rem);
-webkit-backdrop-filter: blur(0.4rem);
}
.modal-form {
width: 36rem;
max-width: 92vw;
background: var(--bg-elev);
border: 1px solid var(--line-2);
border-radius: 0;
box-shadow: 0 2rem 5.3333rem rgba(0,0,0,0.7);
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-h {
padding: 1.4667rem 1.7333rem 1.0667rem;
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 0.5333rem;
}
.modal-h h3 {
font-family: var(--serif);
font-weight: 500;
font-size: 1.7333rem;
margin: 0;
letter-spacing: -0.01em;
}
.modal-body {
padding: 1.4667rem 1.7333rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.0667rem 1.2rem;
}
.field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.field.full { grid-column: 1 / -1; }
.field label {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}
.field input,
.field select {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 0;
color: var(--text);
padding: 0.6rem 0.8rem;
font-family: var(--sans);
font-size: 0.9333rem;
font-weight: 500;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,
.field select:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 0.2rem rgba(34, 230, 230,0.12);
}
.field input::placeholder { color: var(--text-mute); }
.modal-foot {
padding: 1.0667rem 1.7333rem 1.3333rem;
border-top: 1px solid var(--line);
display: flex;
justify-content: flex-end;
gap: 0.6667rem;
}
/* ============ Stage pills (Fundraising table) ============ */
.stage-pill {
display: inline-block;
padding: 0.2rem 0.6rem;
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 0;
border: 1px solid;
}
.stage-pill.stage-in-conversation { color: var(--cyan); border-color: rgba(34, 230, 230,0.4); background: rgba(34, 230, 230,0.08); }
.stage-pill.stage-soft { color: var(--magenta); border-color: rgba(255, 26, 120,0.4); background: rgba(255, 26, 120,0.08); }
.stage-pill.stage-hard { color: var(--lime); border-color: rgba(107, 195, 74,0.4); background: rgba(107, 195, 74,0.08); }
.stage-pill.stage-closed { color: var(--lime); border-color: rgba(107, 195, 74,0.5); background: rgba(107, 195, 74,0.12); }
.stage-pill.stage-passed { color: var(--text-mute); border-color: var(--line-2); background: rgba(255,255,255,0.02); }
.row-date {
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
}
.row-del {
margin-left: 0.6667rem;
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
width: 1.4667rem;
height: 1.4667rem;
border-radius: 0;
font-size: 0.9333rem;
line-height: 1;
cursor: pointer;
transition: all .15s ease;
vertical-align: middle;
}
.row-del:hover { color: var(--magenta); border-color: var(--magenta); }
/* Pie / donut - sharp neon */
.pie-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 1.4667rem;
padding: 1.2rem 1.4667rem 1.4667rem;
flex: 1;
min-height: 0;
}
.pie-svg-wrap {
position: relative;
width: 8.6667rem;
height: 8.6667rem;
flex-shrink: 0;
}
.pie-svg {
width: 100%;
height: 100%;
display: block;
overflow: visible;
filter: drop-shadow(0 0 0.6667rem rgba(34, 230, 230,0.10));
}
.pie-svg circle {
transition: stroke-dasharray .55s cubic-bezier(.5,0,.2,1),
stroke-dashoffset .55s cubic-bezier(.5,0,.2,1);
}
.pie-center {
font-family: var(--serif);
}
.pie-center-num {
font-family: var(--serif);
font-size: 22px;
font-weight: 700;
fill: var(--text);
letter-spacing: -0.015em;
}
.pie-center-sub {
font-family: var(--mono);
font-size: 5.5px;
font-weight: 700;
fill: var(--text-dim);
letter-spacing: 0.32em;
}
.pie-legend {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.pie-legend-item {
display: grid;
grid-template-columns: 0.6667rem 1fr auto;
gap: 0.6667rem;
align-items: center;
}
.pie-dot {
width: 0.6667rem;
height: 0.6667rem;
border-radius: 0;
box-shadow: 0 0 0.5333rem currentColor;
}
.pie-label {
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.7333rem;
font-weight: 600;
color: var(--text);
white-space: nowrap;
}
.pie-val {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--text);
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.panel-h-center { align-items: center; }
.side-head {
padding: 1.2rem 1.7333rem 1.0667rem;
border-bottom: 1px solid var(--line);
}
.clock-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.4rem;
margin-bottom: 1.3333rem;
}
.clock {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
padding: 0.4rem 0.5333rem;
border: 1px solid var(--line);
border-radius: 0;
background: rgba(13, 13, 15,0.5);
}
.clock-zone {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--text-mute);
}
.clock-time {
font-family: var(--mono);
font-size: 0.8667rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
.mono-tag {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 500;
letter-spacing: 0.16em;
color: var(--green);
padding: 0.2rem 0.5333rem;
border: 1px solid rgba(107, 195, 74, 0.22);
border-radius: 0;
background: rgba(107, 195, 74, 0.06);
text-transform: uppercase;
}
.mono-tag.accent-cyan {
color: var(--cyan);
border-color: rgba(34, 230, 230,0.3);
background: rgba(34, 230, 230,0.05);
}
.side-title {
font-family: var(--serif);
font-weight: 800;
font-size: 2rem;
line-height: 1.04;
margin: 0 0 0.6667rem;
letter-spacing: -0.015em;
text-transform: uppercase;
color: var(--text);
}
.side-title em {
font-style: normal;
font-weight: 800;
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.side-sub {
margin: 0;
font-size: 0.8667rem;
color: var(--text-mute);
line-height: 1.5;
}
.side-filters {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-bottom: 1px solid var(--line);
}
.seg {
background: transparent;
border: none;
border-right: 1px solid var(--line);
padding: 0.9333rem 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
color: var(--text-mute);
font-family: var(--sans);
font-size: 0.7333rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
transition: all .15s ease;
position: relative;
}
.seg:last-child { border-right: none; }
.seg:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.seg.active {
color: var(--text);
background: var(--bg-card);
}
.seg.active::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 0.1333rem;
background: var(--cyan);
box-shadow: 0 0 0.5333rem var(--cyan);
}
.seg-count {
font-family: var(--mono);
font-size: 1.2rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0;
}
.seg-dot { display: none; }
.side-filter {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding: 0.8rem 1.2rem;
border-bottom: 1px solid var(--line);
}
.fchip {
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
font-family: var(--sans);
font-weight: 600;
font-size: 0.7333rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3333rem 0.6667rem;
border-radius: 0;
transition: all .15s ease;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.fchip:hover { color: var(--text); border-color: var(--line-2); }
.fchip.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.fchip-count {
font-family: var(--mono);
font-size: 0.6667rem;
opacity: 0.7;
}
.side-list {
flex: 1;
overflow-y: auto;
padding: 0.5333rem 0.8rem 1.2rem;
min-height: 0;
}
.side-item {
display: grid;
grid-template-columns: 1.0667rem 1fr auto;
gap: 0.8rem;
padding: 0.8rem 0.8rem;
border-radius: 0;
cursor: pointer;
transition: background .12s ease;
align-items: center;
border: 1px solid transparent;
}
.side-item:hover { background: var(--bg-hover); }
.side-item.selected {
background: var(--bg-hover);
border-color: rgba(34, 230, 230,0.35);
}
.side-item-dot {
width: 0.5333rem; height: 0.5333rem;
border-radius: 50%;
margin: 0 auto;
}
.side-item-main { min-width: 0; }
.side-item-name {
font-size: 0.9333rem;
font-weight: 500;
color: var(--text);
/* Niente truncation: nomi lunghi (es. "Gianfranco Manco") si vedono per intero */
word-break: break-word;
line-height: 1.25;
}
.side-item-loc {
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
margin-top: 0.1333rem;
}
.side-item-tag {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.2rem 0.4667rem;
border-radius: 0;
border: 1px solid;
align-self: center;
}
.side-item-tag.r-eu { color: var(--cyan); border-color: rgba(34, 230, 230,0.4); background: rgba(34, 230, 230,0.06); }
.side-item-tag.r-us { color: var(--lime); border-color: rgba(107, 195, 74,0.4); background: rgba(107, 195, 74,0.06); }
.side-item-tag.r-sea { color: var(--magenta); border-color: rgba(255, 26, 120,0.4); background: rgba(255, 26, 120,0.06); }
/* side-item-loc wrap behavior: all in line (no break) o tutti a capo */
.side-item-loc {
display: flex;
flex-wrap: wrap;
gap: 0 0.4rem;
align-items: baseline;
}
.side-item-loc .si-sep { color: var(--text-dim); }
.side-item-loc .si-time { color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* === Detail panel (sostituisce news+chart al click su un nodo) === */
.detail-panel {
position: absolute;
top: 0.9333rem;
right: 1.4667rem;
bottom: 1.4667rem;
width: 21.6rem;
display: flex;
flex-direction: column;
border: 1px solid var(--line-2);
border-radius: 0;
background: rgba(13, 13, 15,0.78);
backdrop-filter: blur(1.2rem) saturate(140%);
-webkit-backdrop-filter: blur(1.2rem) saturate(140%);
box-shadow:
0 1.6rem 4rem rgba(0,0,0,0.6),
0 0.1333rem 0 rgba(255,255,255,0.03) inset;
overflow: hidden;
z-index: 5;
animation: panelIn .25s ease;
}
.detail-panel[hidden] { display: none; }
@keyframes panelIn {
from { opacity: 0; transform: translateX(0.5333rem); }
to { opacity: 1; transform: none; }
}
.detail-close {
position: absolute;
top: 0.8rem;
right: 0.8rem;
width: 1.8667rem;
height: 1.8667rem;
border-radius: 0;
background: rgba(13, 13, 15,0.6);
border: 1px solid var(--line);
color: var(--text-mute);
font-size: 1.2rem;
line-height: 1;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s ease;
}
.detail-close:hover { color: var(--magenta); border-color: rgba(255, 26, 120,0.5); }
.detail-photo {
height: 9.2rem;
background:
linear-gradient(135deg, #131318, #0c0c10 60%, #08080a);
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
overflow: hidden;
background-size: cover;
background-position: center;
}
.detail-photo::before {
content: "";
position: absolute;
inset: 0;
background:
repeating-linear-gradient(0deg, transparent 0 0.2rem, rgba(34, 230, 230,0.025) 0.2rem 0.2667rem),
radial-gradient(ellipse at 50% 100%, rgba(34, 230, 230,0.18), transparent 70%);
pointer-events: none;
}
/* Color tint stile intel/Palantir - uniformare tutte le foto */
.detail-photo.has-photo {
filter: grayscale(1) sepia(0.55) hue-rotate(165deg) saturate(1.45) brightness(0.6) contrast(1.05);
}
.detail-photo.has-photo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(13, 13, 15,0.05) 0%, rgba(13, 13, 15,0.85) 100%),
linear-gradient(135deg, rgba(34, 230, 230,0.22), rgba(15,35,65,0.30));
pointer-events: none;
}
.detail-photo-tag {
font-family: var(--mono);
font-size: 0.6667rem;
letter-spacing: 0.18em;
color: var(--text-mute);
z-index: 2;
position: relative;
}
.detail-photo.has-photo .detail-photo-tag { display: none; }
.detail-body {
padding: 1.2rem 1.3333rem 0.9333rem;
display: flex;
flex-direction: column;
gap: 0.5333rem;
border-bottom: 1px solid var(--line);
}
.detail-tag {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.2rem 0.5333rem;
border-radius: 0;
border: 1px solid;
align-self: flex-start;
}
.detail-tag.t-uni { color: var(--lime); border-color: rgba(107, 195, 74,0.4); background: rgba(107, 195, 74,0.08); }
.detail-tag.t-partner { color: var(--magenta); border-color: rgba(255, 26, 120,0.4); background: rgba(255, 26, 120,0.08); }
.detail-title {
font-family: var(--serif);
font-weight: 700;
font-size: 1.6rem;
margin: 0.2667rem 0 0;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--text);
}
.detail-loc {
font-family: var(--mono);
font-size: 0.7333rem;
letter-spacing: 0.14em;
color: var(--text-mute);
margin: 0 0 0.4rem;
text-transform: uppercase;
}
.detail-loc .dl-sep { color: var(--line-2); margin: 0 0.2667rem; }
.detail-loc .dl-country { color: var(--text-mute); }
.detail-desc {
font-size: 0.8667rem;
color: var(--text-mute);
margin: 0;
line-height: 1.5;
}
.detail-meta-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6667rem;
margin-top: 0.6667rem;
}
.detail-meta {
display: flex;
flex-direction: column;
gap: 0.1333rem;
}
.detail-meta-label {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--green);
text-transform: uppercase;
}
.detail-meta-val {
font-family: var(--serif);
font-size: 0.9333rem;
color: var(--text);
}
.detail-person {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5333rem;
padding: 0.6667rem 1.0667rem 0.8rem;
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.detail-person::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Card singola Professor / Student - compatte */
.person-card {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.5333rem 0.6667rem;
border: 1px solid var(--line);
border-radius: 0;
background: rgba(255,255,255,0.012);
transition: border-color .2s ease;
}
.person-card:hover { border-color: var(--line-2); }
.person-tag-prof {
color: var(--lime);
border-color: rgba(107, 195, 74,0.38);
background: rgba(107, 195, 74,0.06);
align-self: flex-start;
}
.person-tag-stud {
color: var(--magenta);
border-color: rgba(255, 26, 120,0.38);
background: rgba(255, 26, 120,0.06);
align-self: flex-start;
}
.person-row {
display: grid;
grid-template-columns: 2.6667rem 1fr;
gap: 0.6667rem;
align-items: center;
}
.person-avatar {
width: 2.6667rem;
height: 2.6667rem;
border-radius: 50%;
background: radial-gradient(circle at 35% 28%, var(--bg-hover), var(--bg-card));
border: 1px solid var(--line);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.person-avatar svg {
width: 100%;
height: 100%;
display: block;
color: var(--text-mute);
filter: drop-shadow(0 0 0.2667rem rgba(34, 230, 230,0.18));
}
.person-info { display: flex; flex-direction: column; gap: 0.1333rem; min-width: 0; }
.person-name {
font-family: var(--serif);
font-weight: 600;
font-size: 0.8667rem;
color: var(--text);
line-height: 1.15;
}
.person-mail {
font-family: var(--mono);
font-size: 0.6rem;
color: var(--cyan);
text-decoration: none;
word-break: break-all;
letter-spacing: 0.04em;
}
.person-mail:hover { text-decoration: underline; }
/* ===== Globe wrap ===== */
.intro-globe-wrap {
position: absolute;
inset: 0;
overflow: hidden;
background: var(--bg-deep);
z-index: 1;
}
#globe {
width: 100%;
height: 100%;
}
/* corner overlays */
.globe-overlay-tl { position: absolute; top: 1.2rem; left: 1.4667rem; z-index: 3; }
.globe-overlay-tr { position: absolute; top: 1.2rem; right: 1.4667rem; z-index: 3; }
.globe-overlay-bl { position: absolute; bottom: 1.2rem; left: 1.4667rem; z-index: 3; }
.ovbtn {
background: rgba(13, 13, 15,0.6);
border: 1px solid var(--line);
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.7333rem;
letter-spacing: 0.14em;
padding: 0.4rem 0.6667rem;
border-radius: 0;
backdrop-filter: blur(0.4rem);
-webkit-backdrop-filter: blur(0.4rem);
transition: all .15s ease;
}
.ovbtn:hover { color: var(--cyan); border-color: rgba(34, 230, 230,0.4); }
.legend {
display: inline-flex;
align-items: center;
gap: 1.2rem;
background: rgba(13, 13, 15,0.6);
border: 1px solid var(--line);
border-radius: 0;
padding: 0.5333rem 1.0667rem;
backdrop-filter: blur(0.4rem);
-webkit-backdrop-filter: blur(0.4rem);
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
letter-spacing: 0.06em;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 0.5333rem;
}
.globe-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
pointer-events: none;
transition: opacity .4s ease;
}
.globe-loading.hidden { opacity: 0; }
/* ===== Bottom strip ===== */
.intro-bottom {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6667rem;
padding: 0.4rem 1.4667rem;
border-top: 1px solid var(--line);
background: rgba(13, 13, 15,0.78);
backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.8rem);
position: relative;
z-index: 5;
min-height: 2.1333rem;
}
.bot-label {
font-family: var(--mono);
font-size: 0.5667rem;
letter-spacing: 0.2em;
color: var(--green);
font-weight: 600;
}
.bot-val.mono {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 500;
color: var(--text);
}
.btn-ghost {
background: transparent;
color: var(--text);
border: 1px solid var(--line-2);
padding: 0.6rem 1.0667rem;
border-radius: 0;
font-family: var(--sans);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: all .15s ease;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
/* ====================================================================== */
/* ===================== APP - BRAIN / VALUE CHAIN =================== */
/* ====================================================================== */
#app.active {
display: flex;
flex-direction: column;
height: 100vh; /* fixed frame: no page scroll while the brain is on screen */
overflow: hidden;
background: var(--bg-deep);
position: relative;
}
/* Opening a stage (full-page detail) restores scrolling */
#app.active.in-stage {
height: auto;
min-height: 100vh;
overflow: visible;
}
body:has(#app.active:not(.in-stage)) { overflow: hidden; }
body:has(#app.active.in-stage) { overflow: auto; }
#app.active::before {
content: "";
position: fixed;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
}
#app.active > * { position: relative; z-index: 1; }
/* === Top bar === */
.bb-top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.9333rem 1.8667rem;
border-bottom: 1px solid var(--line);
background: rgba(13, 13, 15,0.55);
backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.8rem);
}
.bb-top-center {
display: inline-flex;
align-items: center;
gap: 0.8rem;
justify-self: center;
}
.bb-checkin {
display: inline-flex;
align-items: center;
gap: 0.5333rem;
background: rgba(107, 195, 74,0.06);
border: 1px solid rgba(107, 195, 74,0.45);
color: var(--lime);
padding: 0.4rem 0.9333rem;
border-radius: 0;
font-family: var(--mono);
font-weight: 700;
font-size: 0.7333rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
transition: all .15s ease;
}
.bb-checkin:hover {
background: rgba(107, 195, 74,0.14);
color: var(--text);
border-color: var(--lime);
box-shadow: 0 0 0 0.2rem rgba(107, 195, 74,0.08);
}
.bb-brand {
font-family: var(--sans);
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.32em;
color: var(--text);
text-decoration: none;
justify-self: start;
}
.bb-back {
background: transparent;
border: none;
color: var(--text);
padding: 0.5333rem 0.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
justify-self: end;
transition: transform .25s ease, color .2s ease;
line-height: 0;
}
.bb-back svg { display: block; transition: transform .25s ease; }
.bb-back:hover { color: var(--cyan); }
.bb-back:hover svg { transform: translateX(-0.2667rem); }
/* === Brain stage === */
.bb-stage {
padding: 2.1333rem 2.1333rem;
position: relative;
min-height: calc(100vh - 4rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.bb-graph {
position: relative;
width: 100%;
max-width: 93.3333rem;
margin: 0 auto;
}
#brainSvg {
display: block;
width: 100%;
height: auto;
max-height: 37.3333rem;
overflow: visible;
}
/* === Brain nodes (SVG) === */
/* === Brain - pillar cards on a flat single arc === */
.bb-stage {
padding: 0;
flex: 1;
min-height: 0;
overflow: hidden;
}
.bb-graph {
position: relative;
width: 100%;
max-width: none;
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.3333rem 0;
overflow: hidden;
}
/* Single arc - anchor al bordo top delle card (sta dentro a .brain-cards) */
.brain-arc {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%); /* center on top edge of cards row */
width: 130vw; /* sborda dal viewport sui due lati */
height: 2rem;
pointer-events: none;
z-index: 0;
overflow: visible;
}
.arc-line {
fill: none;
stroke: rgba(34, 230, 230,0.55);
stroke-width: 1.2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
filter: drop-shadow(0 0 0.4rem rgba(34, 230, 230,0.35));
}
/* Pillar cards - sopra all'arco, dritte (no 3D) */
.brain-cards {
display: flex;
gap: 2.5333rem;
position: relative;
z-index: 2;
padding: 0 1.6rem;
}
.brain-card {
width: 18.6667rem;
height: 30.6667rem;
background: linear-gradient(180deg,
rgba(19,26,48,0.85) 0%,
rgba(10,15,28,0.96) 100%);
border: 1px solid rgba(34, 230, 230,0.32);
border-radius: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-family: inherit;
color: inherit;
position: relative;
overflow: hidden;
transition:
transform .35s cubic-bezier(.34,1.4,.64,1),
border-color .25s ease,
background .25s ease,
box-shadow .25s ease;
}
/* Linea di luce sottile in cima alla card */
.brain-card::before {
content: "";
position: absolute;
top: 0; left: 14%; right: 14%;
height: 1px;
background: linear-gradient(to right,
transparent, rgba(34, 230, 230,0.7), transparent);
opacity: 0.4;
transition: opacity .25s ease;
}
/* "Neural" port on the top edge: the card talks to the line */
.brain-card::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: var(--cyan);
box-shadow:
0 0 0 0.2rem var(--bg-deep),
0 0 0.8rem rgba(34, 230, 230,0.65);
z-index: 3;
transition: box-shadow .25s ease, transform .25s ease;
}
.brain-card:hover::after {
box-shadow:
0 0 0 0.2rem var(--bg-deep),
0 0 1.2rem var(--cyan),
0 0 1.8667rem rgba(34, 230, 230,0.5);
}
.brain-card:hover {
transform: scale(1.05) translateY(-0.4rem);
border-color: var(--cyan);
background: linear-gradient(180deg,
rgba(26,37,64,0.92) 0%,
rgba(10,15,28,0.98) 100%);
box-shadow:
0 0 0 1px rgba(34, 230, 230,0.4),
0 1.0667rem 3.3333rem rgba(34, 230, 230,0.18);
}
.brain-card:hover::before { opacity: 1; }
.brain-card:focus { outline: none; }
.brain-card.selected {
border-color: var(--cyan);
box-shadow: 0 0 0 1px rgba(34, 230, 230,0.45);
}
.brain-card-title {
font-family: var(--sans);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--text);
text-align: center;
padding: 0 0.8rem;
}
/* === Utility cards: 25% size, orizzontali, stesso stile === */
.brain-utility {
display: flex;
gap: 0.9333rem;
justify-content: center;
margin-top: 2.6667rem;
position: relative;
z-index: 2;
}
.brain-util {
width: 13.3333rem;
height: 4.2667rem;
background: linear-gradient(180deg,
rgba(19,26,48,0.85) 0%,
rgba(10,15,28,0.96) 100%);
border: 1px solid rgba(34, 230, 230,0.32);
border-radius: 0;
cursor: pointer;
font-family: var(--sans);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition:
transform .25s cubic-bezier(.34,1.3,.64,1),
border-color .25s ease,
background .25s ease,
box-shadow .25s ease;
}
.brain-util::before {
content: "";
position: absolute;
top: 0; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(to right,
transparent, rgba(34, 230, 230,0.6), transparent);
opacity: 0.3;
transition: opacity .25s ease;
}
.brain-util:hover {
transform: scale(1.06) translateY(-0.1333rem);
border-color: var(--cyan);
background: linear-gradient(180deg,
rgba(26,37,64,0.92) 0%,
rgba(10,15,28,0.98) 100%);
box-shadow:
0 0 0 1px rgba(34, 230, 230,0.4),
0 0.5333rem 1.7333rem rgba(34, 230, 230,0.15);
}
.brain-util:hover::before { opacity: 1; }
/* Old SVG card classes (kept for compatibility, no longer used) === */
.bb-card {
cursor: pointer;
transform-box: fill-box;
transform-origin: center;
transition: transform .35s cubic-bezier(.34,1.3,.64,1);
}
.bb-card:hover { transform: scale(1.07); }
.bb-card.selected { transform: scale(1.04); }
.bb-card-fill {
fill: rgba(13, 13, 15,0.7);
transition: fill .25s ease;
}
.bb-card-stroke {
fill: none;
stroke: rgba(34, 230, 230,0.30);
stroke-width: 1;
transition: stroke .25s ease, stroke-width .25s ease, filter .25s ease;
}
.bb-card-glow {
fill: none;
stroke: rgba(34, 230, 230,0);
stroke-width: 6;
transition: stroke .25s ease;
pointer-events: none;
}
.bb-card:hover .bb-card-fill { fill: rgba(15,22,42,0.85); }
.bb-card:hover .bb-card-stroke { stroke: var(--cyan); stroke-width: 1.6; }
.bb-card:hover .bb-card-glow { stroke: rgba(34, 230, 230,0.20); }
.bb-card.selected .bb-card-stroke { stroke: var(--cyan); stroke-width: 1.8; }
.bb-card.selected .bb-card-fill { fill: rgba(15,22,42,0.92); }
/* Card content */
.bb-card-step {
fill: var(--cyan);
font-family: var(--mono);
font-weight: 600;
font-size: 0.8667rem;
letter-spacing: 0.32em;
pointer-events: none;
}
.bb-card-divider {
stroke: rgba(34, 230, 230,0.18);
stroke-width: 0.8;
}
.bb-card-label {
fill: var(--text);
font-family: var(--sans);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.18em;
text-transform: uppercase;
pointer-events: none;
}
.bb-card-count {
fill: var(--text-dim);
font-family: var(--mono);
font-weight: 500;
font-size: 0.7333rem;
letter-spacing: 0.14em;
pointer-events: none;
}
/* Orphan tiles slightly smaller */
.bb-orphan .bb-card-stroke { stroke: rgba(34, 230, 230,0.22); stroke-dasharray: 4 4; }
.bb-orphan:hover .bb-card-stroke { stroke-dasharray: 0; }
.bb-orphan .bb-card-label { font-size: 0.9333rem; letter-spacing: 0.22em; }
/* === Links between nodes === */
.bb-link-bg {
stroke: var(--line);
stroke-width: 0.8;
fill: none;
}
.bb-link-anim {
stroke: rgba(34, 230, 230,0.45);
stroke-width: 0.9;
fill: none;
stroke-dasharray: 3 6;
animation: bbDash 4.5s linear infinite;
}
@keyframes bbDash { to { stroke-dashoffset: -36; } }
.bb-arrow {
fill: none;
stroke: rgba(34, 230, 230,0.55);
stroke-width: 0.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.bb-particle {
fill: var(--cyan);
opacity: 0.7;
}
/* === Ambient background dots === */
.bb-ambient-dot {
fill: rgba(255,255,255,0.13);
animation: bbAmbientFlicker ease-in-out infinite;
}
@keyframes bbAmbientFlicker {
0%, 100% { opacity: 0.04; }
50% { opacity: 0.30; }
}
/* === Detail panel - opens as a full new "page" === */
.bb-detail {
background: var(--bg);
animation: bbDetailIn .28s cubic-bezier(.5,0,.2,1);
min-height: calc(100vh - 4rem);
}
@keyframes bbDetailIn {
from { opacity: 0; transform: translateY(0.5333rem); }
to { opacity: 1; transform: none; }
}
/* In-stage mode: hide the brain while inside a section */
#app.in-stage .bb-stage { display: none; }
.bb-detail-h {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
padding: 1.4667rem 2.1333rem 1.2rem;
border-bottom: 1px solid var(--line);
gap: 1.6rem;
}
.bb-detail-back {
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
padding: 0.4667rem 0.9333rem;
border-radius: 0;
font-family: var(--sans);
font-weight: 700;
font-size: 0.7333rem;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: all .15s ease;
display: inline-flex;
align-items: center;
gap: 0.5333rem;
}
.bb-detail-back:hover { border-color: var(--cyan); color: var(--cyan); }
.bb-detail-h-text {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
text-align: center;
align-items: center;
}
.bb-detail-title {
font-family: var(--serif);
font-weight: 500;
font-size: 1.7333rem;
margin: 0;
letter-spacing: -0.01em;
color: var(--text);
line-height: 1.1;
}
/* Spacer per simmetria grid */
.bb-detail-h-spacer { width: 5.3333rem; }
.bb-detail-body { padding: 1.8667rem 2.1333rem 3.2rem; max-width: 93.3333rem; margin: 0 auto; }
.bb-detail-body .view { display: none; }
.bb-detail-body .view.active { display: block; }
.bb-detail-body .view .topbar {
position: static;
margin-bottom: 1.4667rem;
padding: 0;
border-bottom: none;
background: transparent;
}
.bb-detail-body .view .crumb { display: none; }
.bb-detail-body .view .view-head { margin-bottom: 1.6rem; }
.bb-detail-body .view .view-head .view-title { display: none; }
.bb-detail-body .view .view-sub {
text-align: center;
margin: 0 auto;
}
/* === Palantir-style sub-tabs (per ogni sezione) === */
.view-tabs {
display: flex;
gap: 0;
margin-bottom: 1.8667rem;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.vtab {
background: transparent;
border: none;
color: var(--text-mute);
padding: 0.8rem 1.2rem;
font-family: var(--sans);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
border-bottom: 0.1rem solid transparent;
margin-bottom: -1px;
transition: all .15s ease;
cursor: pointer;
}
.vtab:hover { color: var(--text); }
.vtab.active {
color: var(--text);
border-bottom-color: var(--cyan);
}
.vtab-pane { display: none; }
.vtab-pane.active { display: block; }
/* Pane vuoto / coming soon */
.empty-pane {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5.3333rem 1.6rem;
border: 1px dashed var(--line);
border-radius: 0;
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
gap: 0.5333rem;
}
.empty-pane-big {
font-family: var(--serif);
font-size: 1.4667rem;
letter-spacing: -0.01em;
text-transform: none;
color: var(--text-mute);
}
/* ===== Sidebar ===== */
.sidebar {
background: var(--bg-elev);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
padding: 1.4667rem 1.0667rem 1.0667rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sb-brand {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.2667rem 0.5333rem 1.4667rem;
border-bottom: 1px solid var(--line);
margin-bottom: 0.9333rem;
}
.sb-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.sb-brand-name {
font-family: var(--serif);
font-style: italic;
font-size: 1.1333rem;
font-weight: 500;
color: var(--text);
}
.sb-brand-tag {
font-family: var(--sans);
font-size: 0.6667rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
margin-top: 0.2667rem;
}
.sb-back {
display: flex;
align-items: center;
gap: 0.6667rem;
padding: 0.5333rem 0.8rem;
margin-bottom: 0.9333rem;
background: transparent;
border: 1px solid var(--line);
border-radius: 0;
color: var(--text-mute);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
text-align: left;
width: 100%;
transition: all .15s ease;
}
.sb-back:hover {
border-color: var(--cyan);
color: var(--cyan);
background: rgba(34, 230, 230,0.04);
}
.sb-back .sb-icon { color: inherit; }
.sb-nav { display: flex; flex-direction: column; gap: 0.1333rem; flex: 1; }
.sb-label {
font-family: var(--sans);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
padding: 0 0.6667rem;
margin: 0.5333rem 0 0.6667rem;
}
.sb-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.6667rem 0.8rem;
width: 100%;
border: none;
border-radius: 0;
background: transparent;
color: var(--text-mute);
font-size: 0.9333rem;
font-weight: 500;
text-align: left;
transition: background .15s ease, color .15s ease;
position: relative;
}
.sb-item:hover { background: var(--bg-hover); color: var(--text); }
.sb-item.active { background: var(--bg-hover); color: var(--text); }
.sb-item.active::before {
content: "";
position: absolute;
left: -1.0667rem;
top: 0.5333rem;
bottom: 0.5333rem;
width: 0.1333rem;
background: var(--cyan);
border-radius: 0 0.1333rem 0.1333rem 0;
box-shadow: 0 0 0.8rem var(--cyan);
}
.sb-icon {
font-family: var(--mono);
font-size: 0.8667rem;
width: 1.3333rem;
text-align: center;
color: var(--text-dim);
flex-shrink: 0;
}
.sb-item.active .sb-icon { color: var(--cyan); }
.sb-item:hover .sb-icon { color: var(--text-mute); }
.sb-icon-accent { color: var(--lime) !important; }
.sb-text { flex: 1; }
.sb-count {
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
background: var(--bg-card);
padding: 0.1333rem 0.5333rem;
border-radius: 0;
border: 1px solid var(--line);
}
.sb-item.active .sb-count {
color: var(--cyan);
border-color: rgba(34, 230, 230,0.3);
}
.sb-bottom {
margin-top: 1.0667rem;
padding-top: 0.9333rem;
border-top: 1px solid var(--line);
}
.sb-sources { margin-bottom: 0.6667rem; }
.sb-foot {
display: flex;
align-items: center;
gap: 0.5333rem;
padding: 0.5333rem 0.8rem;
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
}
/* ===== Main ===== */
.main {
min-width: 0;
padding: 0 var(--pad) var(--pad);
overflow-y: auto;
height: 100vh;
}
.view { display: none; }
.view.active { display: block; }
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 0;
border-bottom: 1px solid var(--line);
margin-bottom: 1.8667rem;
gap: 1.0667rem;
position: sticky;
top: 0;
background: var(--bg);
z-index: 5;
}
.crumb {
display: flex;
align-items: center;
gap: 0.6667rem;
font-family: var(--sans);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.crumb-current { color: var(--text); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }
.searchbar {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 0;
color: var(--text);
padding: 0.6rem 0.9333rem;
font-size: 0.8667rem;
font-family: var(--sans);
width: 18.6667rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbar::placeholder { color: var(--text-mute); }
.searchbar:focus {
outline: none;
border-color: var(--cyan);
box-shadow: 0 0 0 0.2rem rgba(34, 230, 230,0.1);
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5333rem;
padding: 0.6rem 1.0667rem;
font-family: var(--sans);
font-weight: 600;
font-size: 0.8667rem;
letter-spacing: 0.06em;
border-radius: 0;
border: 1px solid transparent;
cursor: pointer;
transition: all .15s ease;
line-height: 1.2;
}
.btn-primary {
background: var(--text);
color: var(--bg);
border-color: var(--text);
}
.btn-primary:hover { background: var(--cyan); border-color: var(--cyan); }
.view-head { margin-bottom: 1.8667rem; }
.view-title {
font-family: var(--serif);
font-weight: 500;
font-size: 2.5333rem;
line-height: 1.1;
margin: 0 0 0.5333rem;
color: var(--text);
letter-spacing: -0.01em;
}
.title-tag {
font-family: var(--sans);
font-size: 0.7333rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--lime);
background: rgba(107, 195, 74,0.1);
border: 1px solid rgba(107, 195, 74,0.3);
padding: 0.2rem 0.6rem;
border-radius: 0;
vertical-align: middle;
margin-left: 0.8rem;
font-weight: 600;
}
.view-sub { margin: 0; color: var(--text-mute); font-size: 0.9333rem; }
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.0667rem;
margin-bottom: 1.8667rem;
}
.kpi {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.2rem 1.3333rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.kpi-label {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
font-weight: 600;
}
.kpi-value {
font-family: var(--serif);
font-size: 1.8667rem;
font-weight: 500;
color: var(--text);
line-height: 1.1;
}
.kpi-meta { font-size: 0.8rem; }
.placeholder { color: var(--text-mute); font-family: var(--mono); }
.progress {
margin-top: 0.4rem;
height: 0.2667rem;
background: var(--line);
border-radius: 0;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(to right, var(--cyan), var(--lime));
border-radius: 0;
}
.panel {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
margin-bottom: 1.6rem;
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.0667rem;
padding: 1.0667rem 1.3333rem;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.panel-title {
font-family: var(--sans);
font-weight: 700;
font-size: 0.9333rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
color: var(--text);
}
.panel-actions { display: flex; gap: 0.5333rem; flex-wrap: wrap; }
.chip {
background: transparent;
border: 1px solid var(--line-2);
color: var(--text-mute);
padding: 0.4rem 0.8rem;
border-radius: 0;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.04em;
transition: all .15s ease;
}
.chip:hover { color: var(--text); border-color: var(--text-dim); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.filter-row { display: flex; gap: 0.5333rem; flex-wrap: wrap; margin-bottom: 1.3333rem; }
.table { width: 100%; border-collapse: collapse; font-size: 0.8667rem; }
.table thead th {
text-align: left;
font-family: var(--sans);
font-weight: 600;
font-size: 0.7333rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-mute);
padding: 0.8rem 1.3333rem;
background: var(--bg-elev);
border-bottom: 1px solid var(--line);
}
.table tbody td { padding: 1.0667rem 1.3333rem; border-bottom: 1px solid var(--line); color: var(--text); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-hover); }
.row-placeholder td {
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.8rem;
text-align: center;
padding: 1.8667rem 1.3333rem !important;
}
/* ===== Kanban ===== */
.kanban {
display: grid;
grid-template-columns: repeat(6, minmax(14.6667rem, 1fr));
gap: 0.9333rem;
overflow-x: auto;
padding-bottom: 0.5333rem;
}
.kb-col {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
min-height: 24rem;
}
.kb-col-muted { opacity: 0.7; }
.kb-head {
display: flex;
align-items: center;
gap: 0.6667rem;
padding: 0.9333rem 1.0667rem;
border-bottom: 1px solid var(--line);
}
.kb-title {
font-family: var(--sans);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
flex: 1;
}
.kb-count {
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
background: var(--bg-elev);
padding: 0.1333rem 0.5333rem;
border-radius: 0;
border: 1px solid var(--line);
}
.kb-dot { width: 0.5333rem; height: 0.5333rem; border-radius: 50%; display: inline-block; }
.kb-body { padding: 0.9333rem; display: flex; flex-direction: column; gap: 0.6667rem; flex: 1; }
.kb-empty {
border: 1px dashed var(--line-2);
border-radius: 0;
padding: 1.6rem 0.8rem;
text-align: center;
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.7333rem;
}
/* ===== Doc / Source cards ===== */
.grid { display: grid; gap: 1.0667rem; }
.grid-doc { grid-template-columns: repeat(3, 1fr); }
.grid-source { grid-template-columns: repeat(4, 1fr); }
.doc-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.3333rem;
display: flex;
flex-direction: column;
gap: 0.6667rem;
min-height: 13.3333rem;
transition: border-color .15s ease, transform .15s ease;
}
.doc-card:hover { border-color: var(--line-2); transform: translateY(-1px); }
.doc-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5333rem; }
.tag {
font-family: var(--sans);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.2rem 0.5333rem;
border-radius: 0;
border: 1px solid;
}
.tag-lime { color: var(--lime); border-color: rgba(107, 195, 74,0.4); background: rgba(107, 195, 74,0.08); }
.tag-cyan { color: var(--cyan); border-color: rgba(34, 230, 230,0.4); background: rgba(34, 230, 230,0.08); }
.tag-magenta { color: var(--magenta); border-color: rgba(255, 26, 120,0.4); background: rgba(255, 26, 120,0.08); }
.doc-date { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); }
.doc-title {
font-family: var(--serif);
font-weight: 500;
font-size: 1.2rem;
margin: 0;
line-height: 1.25;
color: var(--text);
}
.doc-excerpt { margin: 0; font-size: 0.8667rem; color: var(--text-mute); flex: 1; }
.doc-foot {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
padding-top: 0.5333rem;
border-top: 1px solid var(--line);
}
.doc-author { color: var(--text-mute); font-family: var(--mono); }
.doc-link { color: var(--cyan); font-weight: 600; letter-spacing: 0.04em; }
.add-card {
background: transparent;
border: 1px dashed var(--line-2);
border-radius: var(--radius);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6667rem;
min-height: 13.3333rem;
color: var(--text-mute);
font-family: var(--sans);
font-size: 0.8667rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
transition: all .15s ease;
cursor: pointer;
}
.add-card:hover { border-color: var(--cyan); color: var(--cyan); }
.add-plus { font-size: 2.1333rem; font-weight: 300; line-height: 1; }
.legal-tabs {
display: flex;
gap: 0.2667rem;
margin-bottom: 1.3333rem;
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.tab {
background: transparent;
border: none;
color: var(--text-mute);
padding: 0.8rem 1.0667rem;
font-size: 0.8667rem;
font-weight: 500;
letter-spacing: 0.04em;
border-bottom: 0.1333rem solid transparent;
margin-bottom: -1px;
transition: all .15s ease;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--cyan); font-weight: 600; }
.status-legend {
display: flex;
gap: 1.6rem;
flex-wrap: wrap;
font-size: 0.8rem;
color: var(--text-mute);
padding: 0.8rem 0.2667rem;
}
.src-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.0667rem;
display: flex;
flex-direction: column;
gap: 0.5333rem;
min-height: 10.6667rem;
transition: border-color .15s ease;
}
.src-card:hover { border-color: var(--line-2); }
.src-type {
font-family: var(--sans);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--magenta);
}
.src-title {
font-family: var(--serif);
font-size: 1.0667rem;
font-weight: 500;
margin: 0;
color: var(--text);
line-height: 1.3;
}
.src-note { margin: 0; font-size: 0.8rem; color: var(--text-mute); flex: 1; }
.src-foot {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
padding-top: 0.5333rem;
border-top: 1px solid var(--line);
}
.src-tag {
font-family: var(--mono);
font-size: 0.6667rem;
color: var(--text-mute);
background: var(--bg-elev);
padding: 0.1333rem 0.4667rem;
border-radius: 0;
}
.dot {
display: inline-block;
width: 0.5333rem; height: 0.5333rem;
border-radius: 50%;
flex-shrink: 0;
}
.dot-cyan { background: var(--cyan); box-shadow: 0 0 0.5333rem rgba(34, 230, 230,0.5); }
.dot-lime { background: var(--lime); box-shadow: 0 0 0.5333rem rgba(107, 195, 74,0.5); }
.dot-magenta { background: var(--magenta); box-shadow: 0 0 0.5333rem rgba(255, 26, 120,0.5); }
.dot-mute { background: var(--text-dim); }
.muted { color: var(--text-mute); }
.accent-lime { color: var(--lime); }
.accent-cyan { color: var(--cyan); }
.accent-magenta { color: var(--magenta); }
.placeholder-card { opacity: 0.85; }
/* ====================================================================== */
/* =========================== Responsive ============================ */
/* ====================================================================== */
@media (max-width: 1100px) {
.kpi-row { grid-template-columns: repeat(2, 1fr); }
.grid-doc { grid-template-columns: repeat(2, 1fr); }
.grid-source { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.intro-top { grid-template-columns: 1fr auto; }
.aum-display { display: none; }
.intro-side { width: auto; left: 0.9333rem; right: 0.9333rem; top: 0.9333rem; bottom: auto; max-height: 50%; }
}
@media (max-width: 820px) {
#app.active { grid-template-columns: 1fr; }
.sidebar {
position: static;
height: auto;
border-right: none;
border-bottom: 1px solid var(--line);
}
.main { padding: 0 1.0667rem 1.0667rem; height: auto; }
.topbar { flex-direction: column; align-items: flex-start; }
.searchbar { width: 100%; }
.topbar-actions { width: 100%; }
.kpi-row { grid-template-columns: 1fr; }
}
/* ====================================================================== */
/* =================== Back office (parte dietro) ==================== */
/* ====================================================================== */
/* Bottone in top bar che porta al back office */
.bo-btn {
display: inline-flex;
align-items: center;
gap: 0.5333rem;
justify-self: end;
background: transparent;
border: 1px solid var(--line-2);
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.7333rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.4667rem 0.9333rem;
transition: all .15s ease;
}
.bo-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.bo-btn svg { display: block; }
/* Icon-only square variant (sign out). Left-aligned in its header cell. */
.bo-btn-ico { gap: 0; padding: 0.4667rem; justify-self: start; }
#backoffice.active {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg);
position: relative;
}
#backoffice.active::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
}
#backoffice.active > * { position: relative; z-index: 1; }
.bo-top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0.9333rem 1.8667rem;
border-bottom: 1px solid var(--line);
background: rgba(0,0,0,0.6);
backdrop-filter: blur(0.8rem);
-webkit-backdrop-filter: blur(0.8rem);
}
.bo-back {
display: inline-flex;
align-items: center;
gap: 0.6rem;
justify-self: start;
background: transparent;
border: 1px solid var(--line-2);
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.7333rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.4667rem 0.9333rem;
transition: all .15s ease;
}
.bo-back:hover { color: var(--cyan); border-color: var(--cyan); }
.bo-back svg { display: block; }
.bo-title {
justify-self: center;
font-family: var(--serif);
font-weight: 800;
font-size: 1.0667rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
}
.bo-spacer { justify-self: end; }
/* Shell: Notion-style nav (sinistra) + main (Palantir flow) */
.bo-shell {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 19.3333rem 1fr;
}
.bo-sidebar {
border-right: 1px solid var(--line);
background: rgba(0,0,0,0.45);
overflow-y: auto;
padding: 1.3333rem 1.0667rem 1.6rem;
display: flex;
flex-direction: column;
}
.bo-side-head {
padding: 0 0 0.9333rem;
margin-bottom: 0.6667rem;
border-bottom: 1px solid var(--line);
}
.bo-masterfile-btn {
display: flex;
align-items: center;
gap: 0.6667rem;
width: 100%;
background: transparent;
border: 1px solid var(--line);
padding: 0.6667rem 0.8rem;
cursor: pointer;
text-align: left;
color: var(--text);
transition: background .15s ease, border-color .15s ease;
}
.bo-masterfile-btn:hover { background: var(--bg-hover); border-color: var(--line-2); }
.bo-masterfile-btn.active { background: var(--bg-hover); border-color: var(--cyan); }
/* Masterfile row: square Drive shortcut on the left, Masterfile card filling
the rest. The stretch matches heights; the width must be explicit because
aspect-ratio cannot transfer a stretched (indefinite) cross size on a flex
item - 2.6667rem is the Masterfile card's own height (2x0.6667rem padding
+ 1.2rem line + borders), so both stay square together on the fluid scale. */
.bo-mf-row { display: flex; align-items: stretch; gap: 0.4667rem; }
.bo-mf-row .bo-masterfile-btn { flex: 1; min-width: 0; }
.bo-drive-btn {
flex: 0 0 auto;
width: 2.6667rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
background: transparent;
color: var(--text-mute);
transition: background var(--tr-fast), color var(--tr-fast),
border-color var(--tr-fast);
}
.bo-drive-btn:hover { background: var(--bg-hover); border-color: var(--line-2); color: var(--text); }
.bo-drive-btn svg { width: 1.0667rem; height: 1.0667rem; }
.bo-mf-icon { font-size: 1.1333rem; line-height: 1; }
.bo-mf-name {
font-family: var(--serif);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.02em;
}
/* Software Brainstorming: hidden twin card under the Masterfile button.
Collapsed to zero height by default; Office.tsx toggles .open when the user
wheel-scrolls DOWN over the sidebar head (wheel-up collapses it again). */
.bo-mf-reveal {
overflow: hidden;
max-height: 0;
opacity: 0;
margin-top: 0;
transform: translateY(-0.3333rem);
transition: max-height .28s ease, opacity .22s ease,
transform .28s ease, margin-top .28s ease;
}
.bo-mf-reveal.open {
max-height: 4rem;
opacity: 1;
margin-top: 0.5333rem;
transform: none;
}
/* Advisors: LP's Relations' hidden sub-tool (wheel-down reveal). The highlight
box is left-indented (sub-entry look) but still ENDS at the same right edge
as every other entry. Cyan light comes from the fundraising section rules. */
.bo-tool.bo-tool-sub { margin-left: 1.6rem; width: calc(100% - 1.6rem); }
.bo-tools .bo-mf-reveal.open { margin-top: 1px; }
/* Spina-processo (consequenziale) cyan → verde → magenta */
.bo-nav {
position: relative;
padding-left: 0.9333rem;
display: flex;
flex-direction: column;
gap: 0.2667rem;
}
.bo-nav::before {
content: "";
position: absolute;
left: 0.1333rem;
top: 0.6667rem;
bottom: 0.6667rem;
width: 0.1333rem;
background: linear-gradient(180deg, var(--cyan), var(--green) 50%, var(--magenta));
opacity: 0.5;
}
.bo-section { display: flex; flex-direction: column; }
.bo-section-head {
display: grid;
grid-template-columns: 1.7333rem 1fr;
align-items: center;
gap: 0.6667rem;
background: transparent;
border: none;
padding: 0.6667rem 0.4rem 0.5333rem;
text-align: left;
}
.bo-sec-step {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
color: #000;
background: var(--cyan);
height: 1.2rem;
padding: 0 0.3333rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bo-section:nth-of-type(2) .bo-sec-step { background: var(--green); }
.bo-section:nth-of-type(3) .bo-sec-step { background: var(--magenta); color: var(--bg); }
.bo-sec-name {
font-family: var(--sans);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
}
.bo-sec-chev { color: var(--text-dim); transition: transform .2s ease; }
.bo-section.collapsed .bo-sec-chev { transform: rotate(-90deg); }
.bo-tools {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 1.2rem;
}
.bo-section.collapsed .bo-tools { display: none; }
.bo-tool {
display: grid;
grid-template-columns: 0.9333rem 1fr;
align-items: center;
gap: 0.6667rem;
/* buttons shrink-to-fit by default: force full width so the hover/active
highlight box is the same length on every entry */
width: 100%;
background: transparent;
border: none;
padding: 0.5333rem 0.6667rem;
cursor: pointer;
text-align: left;
color: var(--text-mute);
transition: background .12s ease, color .12s ease;
position: relative;
}
.bo-tool-ic {
width: 0.4rem;
height: 0.4rem;
background: var(--text-dim);
justify-self: center;
transition: background .12s ease, box-shadow .12s ease;
}
.bo-tool-name {
font-family: var(--sans);
font-weight: 500;
font-size: 0.8667rem;
letter-spacing: 0.02em;
}
.bo-tool:hover { background: var(--bg-hover); color: var(--text); }
/* Tool lights coloured by batch: Fundraising cyan, Investments green, Operations magenta */
.bo-section[data-section="fundraising"] .bo-tool-ic { background: var(--cyan); }
.bo-section[data-section="investments"] .bo-tool-ic { background: var(--green); }
.bo-section[data-section="operations"] .bo-tool-ic { background: var(--magenta); }
.bo-tool.active { background: var(--bg-hover); color: var(--text); }
.bo-section[data-section="fundraising"] .bo-tool.active .bo-tool-ic { box-shadow: 0 0 0.5333rem var(--cyan); }
.bo-section[data-section="investments"] .bo-tool.active .bo-tool-ic { box-shadow: 0 0 0.5333rem var(--green); }
.bo-section[data-section="operations"] .bo-tool.active .bo-tool-ic { box-shadow: 0 0 0.5333rem var(--magenta); }
.bo-tool.active::after {
content: "";
position: absolute;
left: -1.2rem;
top: 0.4rem;
bottom: 0.4rem;
width: 0.1333rem;
}
.bo-section[data-section="fundraising"] .bo-tool.active::after { background: var(--cyan); box-shadow: 0 0 0.5333rem var(--cyan); }
.bo-section[data-section="investments"] .bo-tool.active::after { background: var(--green); box-shadow: 0 0 0.5333rem var(--green); }
.bo-section[data-section="operations"] .bo-tool.active::after { background: var(--magenta); box-shadow: 0 0 0.5333rem var(--magenta); }
/* Main */
.bo-main { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: clamp(16px, 2.6vh, 30px) clamp(18px, 2.4vw, 34px); }
#boToolView:not([hidden]) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#boMasterfile:not([hidden]), #boBrainstorm:not([hidden]) { flex: 1; min-height: 0; overflow-y: auto; }
.bo-tool-head {
display: flex;
flex-direction: column;
gap: 0.6667rem;
margin-bottom: 1.7333rem;
padding-bottom: 1.2rem;
border-bottom: 1px solid var(--line);
}
/* Etichetta di sezione sopra il titolo strumento (es. "OPERATIONS"): rimossa su richiesta. */
.bo-tool-head .mono-tag { display: none; }
.bo-tool-title {
font-family: var(--serif);
font-weight: 800;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: -0.01em;
margin: 0;
color: var(--text);
}
/* Tool title + the team roster on one baseline (HR page). The avatars sit to
the RIGHT of the title rather than at the far edge of the head, so they read
as belonging to "HR" and not as a floating toolbar. */
.bo-tool-title-row { display: flex; align-items: center; gap: 1.0667rem; flex-wrap: wrap; }
.bo-title-avatars { gap: 0.4rem; }
.bo-title-avatars .yv-avatar { width: 2.1333rem; height: 2.1333rem; }
.bo-tool-placeholder {
border: 1px dashed var(--line-2);
padding: 3.2rem 2.1333rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
color: var(--text-mute);
max-width: 42.6667rem;
}
.bo-tool-placeholder p { margin: 0; font-size: 0.9333rem; line-height: 1.55; }
/* Masterfile - pagina stile Notion (dark) editabile */
.bo-doc .doc-page {
max-width: 48rem;
margin: 0 auto;
padding: 0.8rem 0 8rem;
}
.doc-icon { font-size: 3.6rem; line-height: 1; margin-bottom: 0.8rem; }
.doc-title {
font-family: var(--serif);
font-weight: 800;
font-size: 2.6667rem;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 1.2rem;
}
.doc-body {
font-family: var(--sans);
font-size: 1.0667rem;
line-height: 1.6;
color: rgba(245,246,248,0.82);
outline: none;
}
.doc-body h1 { font-size: 2rem; font-weight: 700; color: var(--text); margin: 2rem 0 0.4rem; letter-spacing: -0.01em; }
.doc-body h2 { font-size: 1.5333rem; font-weight: 700; color: var(--text); margin: 1.7333rem 0 0.2667rem; letter-spacing: -0.01em; }
.doc-body h3 { font-size: 1.2667rem; font-weight: 600; color: var(--text); margin: 1.3333rem 0 0.2667rem; }
.doc-body p { margin: 0.4rem 0; }
.doc-body ul, .doc-body ol { margin: 0.4rem 0; padding-left: 1.6rem; }
.doc-body li { margin: 0.2rem 0; }
.doc-body hr { border: none; border-top: 1px solid var(--line-2); margin: 1.4667rem 0; }
.doc-body a { color: var(--cyan); }
.doc-callout {
background: rgba(107,195,74,0.07);
border: 1px solid rgba(107,195,74,0.25);
border-left: 0.2rem solid var(--green);
padding: 0.9333rem 1.0667rem;
margin: 0.5333rem 0 1.4667rem;
font-size: 0.9667rem;
color: var(--text-mute);
}
.bo-doc ::selection { background: rgba(34,230,230,0.28); }
/* LP Pipeline - kanban CRM (stile dark/squadrato/brand) */
.lp-board {
display: flex;
gap: 0.8rem;
/* stretch (not flex-start): .lp-col carries the drop handlers and is
transparent, so stretching it makes the whole column strip droppable
with zero visual change - the body box still hugs its cards. */
align-items: stretch;
overflow-x: auto;
padding-bottom: 0.6667rem;
}
.lp-col {
flex: 1 1 0;
min-width: 0;
max-width: 17.3333rem;
display: flex;
flex-direction: column;
}
.lp-col-head {
display: flex;
align-items: center;
gap: 0.5333rem;
padding: 0.6rem 0.7333rem;
border: 1px solid var(--line);
border-bottom: none;
background: var(--bg-elev);
}
.lp-dot { width: 0.5333rem; height: 0.5333rem; flex-shrink: 0; }
.lp-col-name {
font-family: var(--sans);
font-weight: 700;
font-size: 0.7333rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text);
flex: 1;
}
.lp-col-count {
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--text-mute);
white-space: nowrap;
margin-left: auto;
padding-left: 0.4rem;
}
.lp-col-body {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 0.5333rem;
border: 1px solid var(--line);
background: rgba(0,0,0,0.30);
min-height: 3.7333rem;
/* Never shrink below the cards: the explicit min-height above disables the
flex "min-height:auto" floor, so inside the fixed-height board a long
(or "+ N more"-expanded) column would keep its box at viewport height
while the cards spill past the border. The board scrolls instead. */
flex-shrink: 0;
transition: background .12s ease, border-color .12s ease;
}
.lp-col-body.drag-over { border-color: var(--col-color, var(--cyan)); background: color-mix(in srgb, var(--col-color, var(--cyan)) 9%, transparent); }
.lp-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0.6667rem;
border: 1px solid var(--line);
background: var(--bg-card);
cursor: grab;
transition: border-color .12s ease, background .12s ease;
}
.lp-card:hover { border-color: var(--line-2); background: var(--bg-hover); }
.lp-card.dragging { opacity: 0.45; cursor: grabbing; }
.lp-card-ic { color: var(--text-dim); flex-shrink: 0; }
.lp-card-name {
font-family: var(--sans);
font-weight: 500;
font-size: 0.8667rem;
color: var(--text);
letter-spacing: 0.01em;
min-width: 0;
word-break: break-word;
}
.lp-card-del {
background: transparent;
border: none;
color: var(--text-mute);
font-size: 1rem;
line-height: 1;
width: 1.2rem;
height: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .12s ease, color .12s ease;
flex-shrink: 0;
}
/* Revealed by hover OR by focus. Tab reaches this button whatever the pointer
is doing, so a hover-only reveal meant landing on an invisible control that
deletes a card on Enter - the one keyboard trap on the boards. */
.lp-card:hover .lp-card-del,
.lp-card:focus-within .lp-card-del,
.lp-card-del:focus-visible { opacity: 1; }
.lp-card-del:hover, .lp-card-del:focus-visible { color: var(--magenta); }
/* Special-edition branded cards (YC/a16z-style skin, like the sheet uc-cards):
--lp-brand is set inline per card from brand.color; standard cards untouched. */
/* Doubled class throughout: the responsive block near the end of this file
re-declares .lp-card padding/gap, so a single-class rule would lose the tie. */
.lp-card.lp-card-brand {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5333rem;
padding: 0.8rem 0.8rem 0.9333rem;
border-color: color-mix(in srgb, var(--lp-brand) 55%, var(--line));
border-top: 3px solid var(--lp-brand);
background:
linear-gradient(color-mix(in srgb, var(--lp-brand) 10%, transparent),
color-mix(in srgb, var(--lp-brand) 10%, transparent)),
var(--bg-card);
position: relative;
}
.lp-card.lp-card-brand:hover {
border-color: color-mix(in srgb, var(--lp-brand) 80%, var(--line));
background:
linear-gradient(color-mix(in srgb, var(--lp-brand) 16%, transparent),
color-mix(in srgb, var(--lp-brand) 16%, transparent)),
var(--bg-card);
}
.lp-card.lp-card-brand.selected { border-color: var(--lp-brand); }
/* Logo plate: the white field a brand mark needs to read correctly, sized
like the uc-card hero rather than the one-line kanban icon. */
.lp-brand-plate {
height: 3.6rem;
background: #FFFFFF;
display: flex; align-items: center; justify-content: center;
padding: 0.4667rem 0.8rem;
}
.lp-brand-plate img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lp-card-brand .lp-card-name {
color: var(--lp-brand);
font-weight: 700;
font-size: 1rem;
line-height: 1.15;
}
.lp-brand-meta {
font-family: var(--mono);
font-size: 0.6rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-mute);
}
.lp-brand-meta:empty { display: none; }
/* The del button is the grid's 3rd column on standard cards; on the stacked
branded card it has to float over the plate instead. */
.lp-card-brand .lp-card-del {
position: absolute; top: 0.4rem; right: 0.4rem;
background: rgba(0, 0, 0, 0.55);
}
.lp-brand-badge {
width: 1.6rem; height: 1.6rem; flex-shrink: 0;
background: #FFFFFF;
display: inline-flex; align-items: center; justify-content: center;
padding: 0.1333rem;
}
.lp-brand-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Branded detail card: brand top bar + logo/name strip above the name. */
/* Doubled class: the base .lp-detail border is declared LATER in this file,
so a single-class rule here would lose the cascade tie. */
.lp-detail.lp-detail-brand { border-top: 3px solid var(--lp-brand); }
.lp-detail-brand .lp-d-name { color: var(--lp-brand); }
.lp-d-brand { display: flex; align-items: center; gap: 0.6667rem; }
.lp-d-brand .lp-brand-badge { width: 2.6667rem; height: 2.6667rem; padding: 0.2rem; }
.lp-d-brand-name {
font-family: var(--mono);
font-size: 0.6667rem; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--lp-brand);
}
/* "Skin in the game" flag on the Advisors Target raise row (toggleable in
read mode too - a quick flag, not a data-entry field). */
.lp-d-skin {
display: inline-flex; align-items: center; gap: 0.4667rem;
font-family: var(--mono); font-size: 0.6667rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-mute); cursor: pointer; user-select: none;
margin-top: 0.2667rem;
}
.lp-d-skin.on { color: var(--green); }
.lp-d-skin input {
appearance: none; width: 0.9333rem; height: 0.9333rem; margin: 0;
border: 1px solid var(--line-2); background: var(--bg-card); cursor: pointer;
display: inline-grid; place-content: center;
transition: background .12s ease, border-color .12s ease;
}
.lp-d-skin input:checked { border-color: var(--green); background: var(--green); }
.lp-d-skin input:checked::before {
content: ""; width: 0.5333rem; height: 0.5333rem;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
background: #000;
}
.lp-add {
background: transparent;
border: 1px dashed var(--line-2);
color: var(--text-mute);
font-family: var(--sans);
font-weight: 500;
font-size: 0.8333rem;
letter-spacing: 0.04em;
padding: 0.5333rem 0.6667rem;
text-align: left;
cursor: pointer;
transition: color .12s ease, border-color .12s ease;
}
.lp-add:hover { color: var(--cyan); border-color: var(--cyan); }
/* "+ N more" curtain: lists longer than 10 items collapse behind it
(kanban columns + sheet rankings). */
.lp-more {
background: transparent;
border: 0;
color: var(--text-mute);
font-family: var(--mono);
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.4rem 0.6667rem;
text-align: center;
cursor: pointer;
transition: color var(--tr-fast);
}
.lp-more:hover { color: var(--cyan); }
.lp-add-input {
background: var(--bg-card);
border: 1px solid var(--cyan);
color: var(--text);
font-family: var(--sans);
font-size: 0.8667rem;
padding: 0.5333rem 0.6667rem;
outline: none;
width: 100%;
}
.lp-add-input::placeholder { color: var(--text-mute); }
/* LP Pipeline v2 - board+detail / chart+pie, forecast, card detail */
.bo-tool-head-lp { flex-direction: row; align-items: flex-start; justify-content: space-between; }
.lp-chart-toggle {
background: transparent; border: 1px solid var(--line-2); color: var(--text-mute);
width: 2.2667rem; height: 2.2667rem; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0; transition: all .15s ease;
}
.lp-chart-toggle:hover { color: var(--cyan); border-color: var(--cyan); }
.lp-chart-toggle.active { color: #000; background: var(--cyan); border-color: var(--cyan); }
.lp-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 22vw, 300px); gap: 1.0667rem; align-items: stretch; flex: 1; min-height: 0; }
.lp-left, .lp-right { min-width: 0; }
/* App-shell fit-to-height: vista chart in pagina senza scroll (no barra a destra) */
.lp-mode-chart .lp-left { display: flex; flex-direction: column; min-height: 0; }
.lp-mode-chart .lp-metrics { flex-shrink: 0; }
.lp-mode-chart .lp-chartbox { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
.lp-mode-chart .lp-fcsvg { flex: 1; min-height: 0; }
.lp-mode-chart .lp-fclegend { flex-shrink: 0; }
.lp-mode-chart .lp-right { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.lp-mode-chart .lp-bub-svg { flex: 1; min-height: 0; }
/* MODEL panel: the explanation is longer than the box it lives in, and the
bubble chart above must not pay for that. Collapsed the panel is capped at
its share of the column - so the bubble keeps the size it has always had -
and the overflow is clipped under a fade. EXPAND hands the whole pane over
to the text.
That handover is a MOVEMENT, not a swap. The chart folds its share of the
column away on the same curve the panel grows on, so the text rises into
exactly the room the chart gives up; flex-grow and max-height are both
animatable numbers, which is why the panel keeps flex-basis auto in both
states rather than switching to the 0 the shorthand would set. The chart
folds its padding and border away too, or 22px of empty card would sit
there after its content has gone. It used to be unmounted while open, and
a box that is not there cannot animate out of the way. */
.lp-mode-chart .lp-bub-wrap {
flex: 1; min-height: 0; overflow: hidden;
transition: flex-grow .34s cubic-bezier(.4, 0, .2, 1), padding .34s cubic-bezier(.4, 0, .2, 1),
border-width .34s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}
.lp-mode-chart .lp-bub-wrap.is-folded {
flex-grow: 0; opacity: 0;
padding-top: 0; padding-bottom: 0; border-top-width: 0; border-bottom-width: 0;
}
.lp-mode-chart .lp-modelinfo {
flex: 0 1 auto; min-height: 0; max-height: 46%; overflow: hidden; position: relative;
transition: flex-grow .34s cubic-bezier(.4, 0, .2, 1), max-height .34s cubic-bezier(.4, 0, .2, 1);
}
.lp-mode-chart .lp-modelinfo.is-open { flex-grow: 1; max-height: 100%; overflow-y: auto; }
.lp-mode-chart .lp-modelinfo::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2rem;
background: linear-gradient(to bottom, rgba(0,0,0,0), var(--bg-card)); pointer-events: none;
opacity: 1; transition: opacity .22s ease;
}
.lp-mode-chart .lp-modelinfo.is-open::after { opacity: 0; }
/* Collapsed, the panel is a PREVIEW, and the clip line landed halfway through
the P10 row: a legend cut in two reads as broken, where the fade can only
sell "there is more below" over running text. So the percentiles belong to
the open panel, and they fold on the same curve rather than blinking out.
max-height, not display, precisely because display cannot be animated. */
.lp-mode-chart .lp-modelinfo .lp-mi-legend {
max-height: 8rem; overflow: hidden;
transition: max-height .34s cubic-bezier(.4, 0, .2, 1), opacity .22s ease, margin .34s cubic-bezier(.4, 0, .2, 1);
}
.lp-mode-chart .lp-modelinfo:not(.is-open) .lp-mi-legend { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; }
.lp-mode-board .lp-left { min-height: 0; overflow: hidden; }
.lp-mode-board .lp-board { height: 100%; overflow: auto; }
.lp-mode-board .lp-right { min-height: 0; overflow-y: auto; }
/* Sheet boards (HR, Potential outreach, Potential opportunities, VC Partners
sheets) reuse `.lp-mode-board` but put an `.hr-grid` row list in the left
column, never an `.lp-board`. The scroller above therefore matched nothing,
`.lp-left` stayed `overflow: hidden`, and `.bo-main { overflow: hidden }`
clipped every row past the fold with no way to reach it. Scroll the column
itself: that is the only scroll container these boards ever get. */
.us-body .lp-mode-board .lp-left { overflow-y: auto; }
@media (max-width: 1180px) {
/* single column: the page scrolls, the column must not */
.us-body .lp-mode-board .lp-left { overflow: visible; }
.lp-layout { grid-template-columns: 1fr; flex: none; min-height: 0; }
.bo-main { overflow-y: auto; display: block; }
.lp-mode-chart .lp-left, .lp-mode-board .lp-left { display: block; overflow: visible; }
.lp-mode-chart .lp-chartbox { display: block; flex: none; margin-bottom: 0.6667rem; }
.lp-mode-chart .lp-fcsvg { flex: none; }
.lp-mode-board .lp-board { height: auto; }
.lp-mode-chart .lp-right, .lp-mode-board .lp-right { overflow: visible; }
/* One column, no fight for height: nothing to clamp and nothing to fade. */
.lp-mode-chart .lp-modelinfo { max-height: none; overflow: visible; }
.lp-mode-chart .lp-modelinfo.is-open { max-height: none; }
.lp-mode-chart .lp-modelinfo::after { content: none; }
}
.lp-detail, .lp-detail-empty {
border: 1px solid var(--line); background: rgba(0,0,0,0.30); padding: 1.0667rem;
display: flex; flex-direction: column; gap: 0.8rem;
}
.lp-detail-empty { align-items: flex-start; color: var(--text-mute); }
.lp-detail-empty p { margin: 0; font-size: 0.8667rem; line-height: 1.5; }
.lp-d-status {
align-self: flex-start; font-family: var(--mono); font-size: 0.6667rem; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid; padding: 0.2rem 0.5333rem;
}
/* Clickable stage pill (DetailBits StatusPill with options): the badge is
the control that restages the card, so a stage change no longer requires
a drag across the board - or, on the sheets and the startup page, is
possible at all. Same popover grammar as the board filter. */
.sp-wrap { position: relative; align-self: flex-start; display: inline-flex; }
.sp-btn {
display: inline-flex; align-items: center; gap: 0.3333rem;
background: transparent; cursor: pointer;
transition: background var(--tr-fast);
}
.sp-btn:hover, .sp-btn.open { background: rgba(245, 246, 248, 0.08); }
.sp-caret { flex-shrink: 0; opacity: 0.75; transition: transform var(--tr-fast); }
.sp-btn.open .sp-caret { transform: rotate(180deg); }
.sp-menu {
position: absolute; top: calc(100% + 0.3333rem); left: 0;
z-index: var(--z-dropdown);
min-width: 12.6667rem;
background: var(--bg-elev); border: 1px solid var(--line-2);
box-shadow: 0 1.2rem 3.3333rem rgba(0, 0, 0, 0.6);
padding: 0.2667rem;
display: flex; flex-direction: column; gap: 0.1333rem;
animation: yvToolIn 0.16s var(--ease) both;
}
.sp-opt {
display: flex; align-items: center; gap: 0.4667rem;
background: transparent; border: 0; cursor: pointer; text-align: left;
font-family: var(--mono); font-size: 0.6667rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute);
padding: 0.3333rem 0.4667rem;
transition: background var(--tr-fast), color var(--tr-fast);
}
.sp-opt:hover { background: rgba(245, 246, 248, 0.08); color: var(--text); }
.sp-opt.on { color: var(--text); }
.sp-dot { width: 0.4rem; height: 0.4rem; flex-shrink: 0; }
.sp-opt-l { flex: 1; min-width: 0; }
.sp-check { flex-shrink: 0; opacity: 0.85; }
.lp-d-name { font-family: var(--serif); font-weight: 800; font-size: 1.4667rem; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.lp-d-pill { display: flex; flex-direction: column; gap: 0.2667rem; }
.lp-d-label { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); }
.lp-d-type, .lp-d-ticket, .lp-d-notes, .lp-d-owner, .lp-d-linker, .lp-d-city {
background: var(--bg-card); border: 1px solid var(--line); color: var(--text);
font-family: var(--sans); font-size: 0.9333rem; padding: 0.5333rem 0.6667rem; outline: none; width: 100%;
}
.lp-d-type:focus, .lp-d-ticket:focus, .lp-d-notes:focus, .lp-d-owner:focus, .lp-d-linker:focus, .lp-d-city:focus { border-color: var(--cyan); }
.lp-d-notes { resize: vertical; min-height: 4.5333rem; line-height: 1.45; }
.lp-d-closed { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); padding: 0.5333rem 0.6667rem; }
.lp-d-closed-v { font-family: var(--mono); font-size: 0.8rem; color: var(--green); }
.lp-addform { display: flex; flex-direction: column; gap: 0.4rem; border: 1px solid var(--cyan); background: var(--bg-card); padding: 0.5333rem; }
.lp-af-row { display: flex; gap: 0.4rem; }
.lp-af-name, .lp-af-type, .lp-af-ticket {
background: var(--bg-elev); border: 1px solid var(--line); color: var(--text);
font-family: var(--sans); font-size: 0.8667rem; padding: 0.4667rem 0.5333rem; outline: none; width: 100%;
}
.lp-af-name:focus, .lp-af-type:focus, .lp-af-ticket:focus { border-color: var(--cyan); }
.lp-af-ok, .lp-af-cancel { flex: 1; border: 1px solid var(--line-2); background: transparent; color: var(--text-mute); font-family: var(--sans); font-weight: 600; font-size: 0.8rem; padding: 0.4667rem; cursor: pointer; transition: all .12s ease; }
.lp-af-ok:hover { color: #000; background: var(--cyan); border-color: var(--cyan); }
.lp-af-cancel:hover { color: var(--text); }
.lp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5333rem; margin-bottom: 0.6667rem; }
.lp-metric { border: 1px solid var(--line); background: var(--bg-card); padding: 0.6667rem 0.8rem; display: flex; flex-direction: column; gap: 0.2667rem; }
.lp-metric-k { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.lp-metric-v { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; color: var(--text); }
.lp-chartbox { border: 1px solid var(--line); background: rgba(0,0,0,0.30); padding: 0.6667rem; margin-bottom: 0.6667rem; }
.lp-fcsvg { width: 100%; height: auto; display: block; }
.lp-axt { font-family: var(--mono); font-size: 7px; fill: var(--text-dim); }
.lp-fclegend { display: flex; flex-wrap: wrap; gap: 0.9333rem; margin-top: 0.5333rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.lp-fcleg { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.06em; color: var(--text-mute); text-transform: uppercase; }
.lp-fcleg svg { display: block; }
.lp-assume { border: 1px solid var(--line); background: rgba(0,0,0,0.30); padding: 0.8rem; }
.fc-table { width: 100%; border-collapse: collapse; margin-top: 0.5333rem; }
.fc-table th { font-family: var(--mono); font-size: 0.5333rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); text-align: left; padding: 0.2rem 0.2rem; border-bottom: 1px solid var(--line); }
.fc-table td { padding: 0.2rem 0.2rem; border-bottom: 1px solid var(--line); }
.fc-rl { font-family: var(--sans); font-size: 0.6667rem; color: var(--text-mute); white-space: nowrap; }
.fc-tc { display: flex; gap: 0.1333rem; }
.fc-in { background: var(--bg-card); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 0.6rem; padding: 0.2rem 0.1333rem; width: 1.4667rem; outline: none; text-align: center; }
.fc-cr { width: 1.8667rem; }
.fc-t { width: 1.3333rem; }
.fc-in:focus { border-color: var(--cyan); }
/* The chart takes whatever height the card has left over and the legend sits
on the bottom edge of it. A max-height used to cap the svg in short
viewports: it stopped growing, and since the legend follows it, the card
ended with a dead band under the labels. The cap was not buying anything -
in chart mode the svg is a flex item with min-height 0 inside a card whose
height is already fixed by the column, so it cannot push anything out.
margin-top on the legend keeps it on the bottom edge even where the chart
is not the one absorbing the slack. */
.lp-bub-wrap { border: 1px solid var(--line); background: rgba(0,0,0,0.30); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5333rem; }
.lp-bub-svg { width: 100%; height: auto; display: block; }
.lp-bub-wrap .lp-pie-legend { margin-top: auto; }
.lp-bub-n { font-family: var(--serif); font-weight: 800; font-size: 14px; fill: #06110E; }
.lp-pie-wrap { border: 1px solid var(--line); background: rgba(0,0,0,0.30); padding: 1.0667rem; display: flex; flex-direction: column; gap: 0.9333rem; align-items: center; }
.lp-pie-wrap .mono-tag { align-self: flex-start; }
.lp-pie-svg { width: 10rem; height: 10rem; display: block; }
.lp-pie-num { font-family: var(--serif); font-weight: 800; font-size: 1.7333rem; fill: var(--text); }
.lp-pie-sub { font-family: var(--mono); font-size: 0.4rem; letter-spacing: 0.2em; fill: var(--text-dim); }
.lp-pie-legend { width: 100%; display: flex; flex-direction: column; gap: 0.5333rem; }
.lp-pie-li { display: grid; grid-template-columns: 0.6667rem 1fr auto; gap: 0.6667rem; align-items: center; }
.lp-pie-dot { width: 0.6667rem; height: 0.6667rem; }
.lp-pie-lab { font-family: var(--sans); font-size: 0.8667rem; color: var(--text); }
.lp-pie-val { font-family: var(--mono); font-size: 0.8rem; color: var(--text-mute); }
.lp-card.selected { border-color: var(--cyan); background: var(--bg-hover); }
.crm-card-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.crm-card-sub { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.03em; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* CRM funnel + toggle view/edit + valori read-only + info box modello */
.crm-funnel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; flex-shrink: 0; }
.crm-funnel-box { display: flex; flex-direction: column; gap: 0.1333rem; border: 1px solid var(--line); background: var(--bg-card); padding: 0.4667rem 0.9333rem; }
.crm-funnel-k { font-family: var(--mono); font-size: 0.5667rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }
.crm-funnel-v { font-family: var(--serif); font-weight: 800; font-size: 1.2667rem; color: var(--text); }
.crm-funnel-arrow { color: var(--text-dim); font-size: 0.9333rem; }
.crm-edit-toggle { background: transparent; border: 0; color: var(--text-mute); width: 2.2667rem; height: 2.2667rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: color .15s ease; }
.crm-edit-toggle:hover { color: var(--cyan); }
.crm-edit-toggle.active { color: var(--cyan); background: transparent; }
.crm-val { font-family: var(--sans); font-size: 0.9333rem; color: var(--text); word-break: break-word; }
.crm-val.empty { color: var(--text-mute); }
.crm-link { color: var(--cyan); text-decoration: none; font-size: 0.9333rem; word-break: break-all; }
.crm-link:hover { text-decoration: underline; }
.crm-notes-view { font-size: 0.8667rem; color: var(--text-mute); line-height: 1.5; white-space: pre-wrap; }
.lp-modelinfo { border: 1px solid var(--line); background: var(--bg-card); padding: 0.9333rem; display: flex; flex-direction: column; gap: 0.5333rem; }
.lp-modelinfo p { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-mute); }
.lp-mi-hi { color: var(--text); }
/* Matita modifica DENTRO la card, in alto a destra (drag sempre attivo) */
.lp-detail, .lp-detail-empty { position: relative; }
.crm-edit-card { position: absolute; top: 0.8rem; right: 0.8rem; width: 2rem; height: 2rem; z-index: 3; }
.lp-detail > .lp-d-name { padding-right: 2.2667rem; }
.lp-detail-empty > .mono-tag { padding-right: 2.5333rem; }
/* Cestino sui Lost: accanto alla matita, senza quadrato intorno */
.lp-trash { position: absolute; top: 0.8rem; right: 3.3333rem; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-mute); cursor: pointer; z-index: 3; transition: color .15s ease; }
.lp-trash:hover { color: var(--red); }
.lp-detail-lost > .lp-d-name { padding-right: 4.5333rem; }
/* Funnel: rettangoli di uguale grandezza + tasto info (apre Sankey snapshot) */
.crm-funnel-row { display: flex; align-items: center; gap: 0.6667rem; margin-bottom: 0.8rem; flex-shrink: 0; }
.crm-funnel-row .crm-funnel { flex: 1; margin-bottom: 0; flex-wrap: nowrap; }
.crm-funnel-row .crm-funnel-box { flex: 1 1 0; min-width: 0; align-items: center; text-align: center; }
.crm-funnel-info { flex-shrink: 0; width: 1.7333rem; height: 1.7333rem; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text-mute); font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 0.9333rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; }
.crm-funnel-info:hover { color: var(--cyan); border-color: var(--cyan); }
/* KPI strip (VC Partners) */
.crm-kpis { display: flex; gap: 0.6667rem; margin-bottom: 0.8rem; flex-shrink: 0; }
.crm-kpi { flex: 1; border: 1px solid var(--line); background: var(--bg-card); padding: 0.6667rem 0.9333rem; display: flex; flex-direction: column; gap: 0.2667rem; }
.crm-kpi-v { font-family: var(--serif); font-weight: 800; font-size: 1.6rem; }
.crm-kpi-k { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
/* Sankey snapshot overlay */
.crm-sankey-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(0.2667rem); -webkit-backdrop-filter: blur(0.2667rem); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1.3333rem; }
.crm-sankey-modal { background: var(--bg-card); border: 1px solid var(--line-2); border-top: 0.1333rem solid var(--cyan); padding: 1.2rem 1.3333rem 1.3333rem; width: min(44rem, 94vw); box-shadow: 0 1.6rem 4.6667rem rgba(0,0,0,0.55); }
.crm-sankey-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.crm-sankey-close { background: transparent; border: none; color: var(--text-mute); font-size: 1.4667rem; line-height: 1; cursor: pointer; padding: 0 0.2667rem; }
.crm-sankey-close:hover { color: var(--text); }
/* ---- Team strip: one squared avatar per member (between logout and FoF);
each tile opens that member's full-screen dossier. ---- */
.yv-avatars { display: inline-flex; align-items: center; gap: 0.2667rem; flex-shrink: 0; }
.yv-avatar {
width: 1.8667rem; height: 1.8667rem; padding: 0; flex-shrink: 0;
background: rgba(34, 230, 230, 0.05); border: 1px solid var(--line-2);
display: inline-flex; align-items: center; justify-content: center;
overflow: hidden; cursor: pointer;
transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.yv-avatar:hover { border-color: var(--cyan); transform: translateY(-1px); }
.yv-avatar.me { border-color: var(--cyan); }
/* Student names on the university rows open the member's dossier. */
.si-member { cursor: pointer; text-decoration: underline dotted transparent; text-underline-offset: 3px; transition: color var(--tr-fast); }
.si-member:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.yv-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-ini {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-weight: 700; font-size: 0.7333rem; letter-spacing: 0.08em;
color: var(--cyan);
}
/* Full-screen dossier (TeamPage). Same dotted war-room backdrop as FoF. */
.tpp-screen {
position: fixed; inset: 0; z-index: var(--z-modal);
background: var(--bg); overflow-y: auto;
}
.tpp-screen::before {
content: "";
position: fixed; inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
}
.tpp-inner {
position: relative;
max-width: 100rem; margin: 0 auto;
padding: 1.2rem 2rem 2rem;
display: flex; flex-direction: column; gap: 0.8rem;
}
.tpp-top { display: flex; align-items: center; gap: 1.0667rem; }
.tpp-switch { margin-left: auto; flex: 0 1 auto; justify-content: flex-end; }
/* Hero = three zones separated by hairlines: WHO (photo + identity),
HOW (highlight strip), FORM (rating + radar). It used to be a
3-column grid whose middle column was the identity text stretched to
1fr, so on a wide screen the block was two islands with a black hole
between them. The identity is now sized to its content, and the strip
is what absorbs the leftover width. */
.tpp-hero {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
gap: 1.6rem; align-items: center;
border: 1px solid var(--line); background: rgba(0, 0, 0, 0.30);
padding: 1rem 1.2rem;
}
/* Editing: the fields need the width the strip was using. */
.tpp-hero.editing { grid-template-columns: minmax(0, 1fr) auto; }
.tpp-idblock { display: flex; align-items: center; gap: 1.0667rem; min-width: 0; }
.tp-photo.tpp-photo { width: 7.3333rem; height: 7.3333rem; flex: 0 0 auto; }
.tpp-id { display: flex; flex-direction: column; gap: 0.5333rem; min-width: 0; }
.tpp-name { margin: 0; font-size: 1.8667rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.tpp-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5333rem; }
.tpp-meta .tp-role { padding-right: 0.5333rem; border-right: 1px solid var(--line-2); }
/* Flex, not a grid with a fixed track count: the cells come from a config
list, so the row has to stay one row whatever its length. */
.tpp-hi {
display: flex; gap: 1.0667rem;
border-left: 1px solid var(--line); padding-left: 1.6rem;
}
.tpp-hi-c { flex: 1 1 0; display: flex; flex-direction: column; gap: 0.2667rem; min-width: 0; }
.tpp-hi-v { font-size: 1.3333rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tpp-hi-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
/* Rating BESIDE the radar, not above it: the hero is the tallest block on
the page and stacking them pushed the metrics below the fold. */
.tpp-form { display: flex; flex-direction: row; align-items: center; gap: 1.0667rem; border-left: 1px solid var(--line); padding-left: 1.6rem; }
.tpp-rate { display: flex; flex-direction: column; align-items: center; }
.tpp-rate-v { font-size: 2.9333rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.tpp-rate-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; color: var(--text-mute); }
.tpp-radar { width: 13.3333rem; height: auto; }
.tpp-radar-l { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; fill: var(--text-dim); }
.tpp-group { display: flex; flex-direction: column; gap: 0.5333rem; }
.tpp-glabel { font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.18em; color: var(--text-mute); }
/* Metric wall: the three groups side by side, each one accent colour. The
accent is set inline per group (--tpp-accent) and read by the label and
every value inside, so colour reads as "which group" instead of the old
per-tile rainbow, which meant nothing. */
.tpp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; align-items: stretch; }
.tpp-mgroup {
display: flex; flex-direction: column; gap: 0.5333rem;
border: 1px solid var(--line); border-top: 0.1333rem solid var(--tpp-accent);
background: rgba(0, 0, 0, 0.30); padding: 0.8rem 0.9333rem 0.9333rem;
}
.tpp-mlabel { color: var(--tpp-accent); }
.tpp-mtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.tpp-mgroup .tp-kpi { border-color: var(--line-2); background: rgba(0, 0, 0, 0.25); padding: 0.5333rem 0.6667rem; gap: 0.2rem; }
.tpp-mgroup .tp-kpi-v { color: var(--tpp-accent); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
/* Trends and leaderboard share a row instead of stacking. */
.tpp-lower { display: grid; grid-template-columns: minmax(0, 1fr) 24.6667rem; gap: 0.8rem; align-items: stretch; }
/* The leaderboard is the only card on this row you act ON - clicking a row
reselects the member the whole page is about - so its frame is lit rather
than neutral like the trend strips beside it. Frame only: the tinted border
and the soft outward glow, nothing inside the card. */
.tpp-lbcard {
border: 1px solid rgba(var(--cyan-rgb), 0.28); background: rgba(0, 0, 0, 0.30);
padding: 0.9333rem 1.0667rem;
box-shadow: 0 0 1.3333rem -0.5333rem rgba(var(--cyan-rgb), 0.45);
}
/* The two trend strips STACK, they no longer sit side by side: they plot 12
months on a shared axis, and a monthly series wants width, not height.
Stacked they also fill the column the leaderboard sets the height of,
instead of leaving a hole under each drawing. */
.tpp-trends { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 0.8rem; }
.tpp-trend {
display: flex; flex-direction: column; gap: 0.5333rem; min-width: 0;
border: 1px solid var(--line); background: rgba(0, 0, 0, 0.30); padding: 0.9333rem 1.0667rem;
}
.tpp-thead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5333rem; flex-wrap: wrap; }
.tpp-tsum { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.06em; color: var(--text-mute); font-variant-numeric: tabular-nums; }
/* The card is as tall as the leaderboard makes it; centring the drawing in
whatever is left reads as padding rather than as a gap. */
.tpp-trend-svg { width: 100%; height: auto; margin-block: auto; }
.tpp-ax { font-family: var(--mono); font-size: 9.5px; fill: var(--text-mute); }
.tpp-ax.dim { fill: var(--text-dim); }
.tpp-ax.faint { fill: var(--text-dim); opacity: 0.65; }
.tpp-ax.acc { fill: var(--green); font-weight: 700; }
.tpp-lb-tabs { margin-bottom: 0.2667rem; }
.tpp-lb { display: flex; flex-direction: column; gap: 0.2667rem; }
.tpp-lb-row {
display: grid; grid-template-columns: 1.4667rem 8.6667rem minmax(0, 1fr) 5.3333rem;
align-items: center; gap: 0.6667rem;
border: 1px solid var(--line); background: rgba(0, 0, 0, 0.25);
padding: 0.4rem 0.6667rem; cursor: pointer;
transition: border-color var(--tr-fast), background var(--tr-fast);
}
.tpp-lb-row:hover { border-color: var(--text-dim); }
.tpp-lb-row.me { border-color: var(--cyan); background: rgba(34, 230, 230, 0.05); }
.tpp-lb-rank { font-family: var(--mono); font-size: 0.7333rem; font-weight: 700; color: var(--text-mute); }
.tpp-lb-row.me .tpp-lb-rank { color: var(--cyan); }
.tpp-lb-name { font-weight: 600; font-size: 0.8667rem; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpp-lb-bar { height: 0.5333rem; background: rgba(245, 246, 248, 0.06); overflow: hidden; }
.tpp-lb-bar span { display: block; height: 100%; background: var(--cyan); opacity: 0.85; }
.tpp-lb-row.me .tpp-lb-bar span { background: var(--magenta); }
.tpp-lb-val { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); text-align: right; font-variant-numeric: tabular-nums; }
.tp-switch { display: flex; align-items: center; gap: 0.3333rem; flex: 1; flex-wrap: wrap; justify-content: center; }
.tp-sw {
width: 1.8667rem; height: 1.8667rem; padding: 0;
background: transparent; border: 1px solid var(--line-2);
display: inline-flex; overflow: hidden; cursor: pointer; opacity: 0.6;
transition: border-color var(--tr-fast), opacity var(--tr-fast);
}
.tp-sw:hover, .tp-sw:focus-visible { opacity: 1; }
.tp-sw.active { border-color: var(--cyan); opacity: 1; }
.tp-sw-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-sw .tp-ini { font-size: 0.6rem; }
.tp-photo {
width: 13.3333rem; height: 13.3333rem; border: 1px solid var(--line-2);
background: rgba(0, 0, 0, 0.35); overflow: hidden;
}
.tp-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The initials fallback shares the class of the ![]()
it replaces, and
that class sets display:block LATER in this file - so .tp-ini's own
centering lost and every photoless avatar showed its initials wedged
in the top-left corner. Re-assert it where it wins on specificity. */
.tp-photo .tp-ini, .tp-sw .tp-ini { display: flex; align-items: center; justify-content: center; }
.tp-photo .tp-ini { font-size: 2rem; letter-spacing: 0.12em; }
.tp-idrow { display: flex; align-items: center; gap: 0.5333rem; }
.tp-edit { position: static; }
.tp-role { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.tp-li {
align-self: center;
font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.14em;
color: var(--cyan); text-decoration: none; border: 1px solid var(--line-2); padding: 0.3333rem 0.6667rem;
transition: border-color var(--tr-fast);
}
.tp-li:hover { border-color: var(--cyan); }
.tp-fields { display: flex; flex-direction: column; gap: 0.4667rem; margin-top: 0.2667rem; }
.tp-f { display: flex; flex-direction: column; gap: 0.2rem; }
.tp-f span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.tp-f input {
background: rgba(0, 0, 0, 0.40); border: 1px solid var(--line-2); color: var(--text);
font-family: var(--mono); font-size: 0.7333rem; padding: 0.4rem 0.5333rem; outline: none;
}
.tp-f input:focus { border-color: var(--cyan); }
.tp-kpi {
border: 1px solid var(--line); background: rgba(0, 0, 0, 0.30);
padding: 0.6667rem 0.8rem; display: flex; flex-direction: column; gap: 0.2667rem;
}
.tp-kpi-v { font-size: 1.4667rem; font-weight: 800; line-height: 1; }
.tp-kpi-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.tp-unis-k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--text-mute); }
.tp-uchip {
font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.06em;
color: var(--green); border: 1px solid var(--line-2); padding: 0.2rem 0.5333rem;
}
.tp-uchip-none { color: var(--text-mute); }
.tp-note { margin: 0.8rem 0 0; font-size: 0.7333rem; line-height: 1.5; color: var(--text-mute); }
@media (max-width: 1280px) {
.tpp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tpp-lower { grid-template-columns: 1fr; }
/* Not enough width for three zones: the strip drops under the other
two and its hairline moves from the left edge to the top. */
.tpp-hero { grid-template-columns: minmax(0, 1fr) auto; }
.tpp-form { grid-column: 2; grid-row: 1; }
.tpp-hi { grid-column: 1 / -1; grid-row: 2; border-left: 0; border-top: 1px solid var(--line); padding: 0.8rem 0 0; }
}
@media (max-width: 1100px) {
.tpp-hero { grid-template-columns: minmax(0, 1fr); }
.tp-photo.tpp-photo { width: 6rem; height: 6rem; }
.tpp-form { grid-column: 1; grid-row: auto; justify-content: center; gap: 1.6rem; border-left: 0; padding-left: 0; }
.tpp-hi { grid-row: auto; }
.tpp-metrics { grid-template-columns: 1fr; }
.tpp-lb-row { grid-template-columns: 1.4667rem 6.6667rem minmax(0, 1fr) 4.6667rem; }
}
.crm-sankey-svg { width: 100%; height: auto; display: block; }
.crm-sank-main { font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; fill: var(--text-mute); }
.crm-sank-n { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--text); }
.crm-sank-pct { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; fill: var(--cyan); opacity: 0.85; }
.crm-sank-drop { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--red); }
/* Still open at a stage. --text-mute, not --text-dim: the bar it labels can
be dim because it is a shape, but the number has to stay readable. */
.crm-sank-held { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--text-mute); }
.crm-sank-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; fill: var(--text-dim); }
.crm-sankey-cap { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.8rem; padding-top: 0.7333rem; border-top: 1px solid var(--line); }
.crm-sankey-leg { display: inline-flex; align-items: center; gap: 0.4667rem; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.04em; color: var(--text-mute); }
.crm-sankey-sw { width: 0.7333rem; height: 0.7333rem; border-radius: 0.1333rem; flex-shrink: 0; }
/* What the drawing is counting. A funnel without this line is a number
without a population. */
.crm-sankey-note { margin: 0.5333rem 0 0; font-family: var(--mono); font-size: 0.6rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--text-mute); }
/* --- Visible vs tracked: the funnel's scope switch (see components/office/Crm) --- */
.crm-scope { display: flex; flex-direction: column; gap: 0.2rem; flex-shrink: 0; }
.crm-scope-b {
display: flex; align-items: center; justify-content: space-between; gap: 0.5333rem;
min-width: 5.6rem; padding: 0.2667rem 0.4667rem;
border: 1px solid var(--line); background: transparent; color: var(--text-mute);
cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.crm-scope-b:hover { color: var(--text); border-color: var(--line-2); }
.crm-scope-b.on { color: var(--cyan); border-color: var(--cyan); }
.crm-scope-k { font-family: var(--mono); font-size: 0.5333rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.crm-scope-n { font-family: var(--serif); font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* --- The card's own stage history, on the startup page --- */
.startup-pill-journey { align-items: flex-start; }
.crm-journey { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2667rem; justify-content: flex-end; }
.crm-journey-step { display: inline-flex; align-items: center; gap: 0.3333rem; }
.crm-journey-dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; flex-shrink: 0; }
.crm-journey-l { font-family: var(--mono); font-size: 0.5667rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.crm-journey-t { font-family: var(--mono); font-size: 0.5667rem; color: var(--text-mute); }
.crm-journey-arr { color: var(--text-dim); font-size: 0.8rem; margin-right: 0.1333rem; }
/* Forgetting a recorded move. Shown only while the card is in edit mode, so
it is never a hover-only control the keyboard can land on blind - and it
turns red on focus as well as on hover, since the strip is tabbable. */
.crm-journey-x {
margin-left: 0.1333rem; padding: 0 0.1333rem;
background: none; border: 0; border-radius: 0;
font-family: var(--mono); font-size: 0.7333rem; line-height: 1;
color: var(--text-mute); cursor: pointer;
transition: color var(--tr-fast);
}
.crm-journey-x:hover, .crm-journey-x:focus-visible { color: var(--red); }
/* Pannello info modello - header allineato + legenda percentili */
.lp-mi-head { display: flex; align-items: center; gap: 0.5333rem; }
.lp-mi-badge { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; color: #000; background: var(--cyan); padding: 0.1333rem 0.4667rem; }
.lp-mi-more { margin-left: auto; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; color: var(--text-mute); background: transparent; border: 1px solid var(--line); padding: 0.1333rem 0.4667rem; cursor: pointer; }
.lp-mi-more:hover { color: var(--text); border-color: var(--text-dim); }
.lp-mi-legend { display: flex; flex-direction: column; gap: 0.4667rem; margin: 0.1333rem 0; }
.lp-mi-row { display: grid; grid-template-columns: 0.6667rem 2rem 1fr; align-items: center; gap: 0.6667rem; }
.lp-mi-dot { width: 0.6667rem; height: 0.6667rem; border-radius: 50%; }
.lp-mi-pk { font-family: var(--mono); font-size: 0.7333rem; font-weight: 700; color: var(--text); letter-spacing: 0.04em; }
.lp-mi-pd { font-family: var(--sans); font-size: 0.8333rem; color: var(--text-mute); }
.lp-mi-foot { font-size: 0.7333rem !important; color: var(--text-mute) !important; }
/* HR - university tabs (squared cyan "glass" chips) + manual drag ranking */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9333rem; flex-shrink: 0; }
.hr-tab { background: transparent; border: 1px solid var(--line); border-radius: 0; color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.4667rem 0.8667rem; cursor: pointer; transition: all .12s ease; }
.hr-tab:hover { color: var(--text); border-color: var(--line-2); }
.hr-tab.active { background: rgba(34, 230, 230, 0.12); border-color: var(--cyan); color: var(--cyan); }
.hr-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.hr-row { display: flex; align-items: center; gap: 0.7333rem; border: 1px solid var(--line); background: var(--bg-card); padding: 0.6rem 0.8rem; cursor: grab; transition: border-color .12s ease, background .12s ease; }
.hr-row:hover { background: var(--bg-hover); }
.hr-row.selected { border-color: var(--cyan); background: var(--bg-hover); }
.hr-row.dragging { opacity: 0.45; }
.hr-row.drop-before { box-shadow: inset 0 0.1333rem 0 0 var(--cyan); }
.hr-rank { font-family: var(--serif); font-weight: 800; font-size: 1.2rem; color: var(--text-mute); min-width: 1.7333rem; text-align: center; flex-shrink: 0; }
.hr-row.selected .hr-rank { color: var(--cyan); }
.hr-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hr-row-name { font-family: var(--sans); font-size: 0.9333rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-row-sub { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.03em; color: var(--text-mute); }
.hr-stage-chip { font-family: var(--mono); font-size: 0.5667rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; padding: 0.1333rem 0.4667rem; white-space: nowrap; flex-shrink: 0; }
.hr-del { flex-shrink: 0; }
.hr-empty { border: 1px dashed var(--line-2); padding: 1.3333rem; color: var(--text-mute); display: flex; flex-direction: column; gap: 0.5333rem; align-items: flex-start; }
.hr-empty p { margin: 0; font-size: 0.8667rem; line-height: 1.5; }
.hr-add { margin-top: 0.2667rem; }
.hr-d-stage { background: var(--bg-card); border: 1px solid var(--line); color: var(--text); font-family: var(--sans); font-size: 0.9333rem; padding: 0.5333rem 0.6667rem; outline: none; width: 100%; }
.hr-d-stage:focus { border-color: var(--cyan); }
.us-snap-hint { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); }
/* University sheets: body filling the height + Markdown snapshot */
.us-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.us-snap { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.6667rem; }
.us-snap-head { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.us-snap-back { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.04em; padding: 0.4rem 0.7333rem; cursor: pointer; transition: all .12s ease; }
.us-snap-back:hover { color: var(--text); border-color: var(--text-mute); }
.us-snap-md-tag { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; color: #000; background: var(--cyan); padding: 0.1333rem 0.4667rem; cursor: help; }
.us-snap-ta { flex: 1; min-height: 0; resize: none; background: rgba(0,0,0,0.30); border: 1px solid var(--line); color: var(--text); font-family: var(--mono); font-size: 0.8667rem; line-height: 1.6; padding: 1.0667rem 1.2rem; outline: none; }
.us-snap-ta:focus { border-color: var(--cyan); }
/* Detail toolbar: matita + ingranaggio liberi (senza riquadro), spaziati per respirare */
/* Sheet detail toolbar: icons row on top, filter centered below - a triangle
(same figure as the Pipeline funnel tools). */
.us-tools { position: absolute; top: 0.8rem; right: 0.9333rem; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.1333rem; }
.us-tools-top { display: flex; align-items: center; gap: 0.9333rem; }
.us-tool-btn { background: transparent; border: 0; border-radius: 0; padding: 0.1333rem; margin: 0; color: var(--text-mute); cursor: pointer; display: inline-flex; line-height: 0; transition: color .15s ease; }
.us-tool-btn:hover { color: var(--cyan); }
.us-tool-btn.active { color: var(--cyan); }
.us-tool-trash:hover { color: var(--red); }
.us-body .lp-detail > .lp-d-name { padding-right: 6.1333rem; }
.us-body .lp-detail-empty > .mono-tag { padding-right: 4.6667rem; }
/* Pagina impostazioni (dietro all'ingranaggio) + card rettangolari, stile brand squadrato */
.us-settings { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.9333rem; overflow-y: auto; }
.us-set-head { display: flex; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.us-set-title { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--text-mute); text-transform: uppercase; }
.us-set-done { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 0; padding: 0.1333rem; color: var(--cyan); cursor: pointer; flex-shrink: 0; line-height: 0; transition: color .15s ease; }
.us-set-done:hover { color: var(--text); }
.us-set-empty { color: var(--text-mute); font-size: 0.8667rem; }
.us-set-empty p { margin: 0; }
.us-set-hint { margin: -0.1333rem 0 0.1333rem; font-size: 0.8rem; color: var(--text-mute); flex-shrink: 0; }
.us-set-hint b { color: var(--cyan); font-weight: 600; }
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.6667rem, 1fr)); gap: 0.8rem; align-content: start; }
.uc-card { position: relative; display: flex; flex-direction: column; gap: 0.6667rem; border: 1px solid var(--line); background: var(--bg-card); padding: 0.8rem 0.8rem 0.9333rem; }
.uc-title { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--cyan); font-family: var(--mono); font-weight: 600; font-size: 0.9333rem; letter-spacing: 0.02em; padding: 0 1.7333rem 0.5333rem 0; outline: none; }
.uc-title::placeholder { color: var(--text-mute); }
.uc-drop { display: flex; align-items: center; justify-content: center; min-height: 4rem; border: 1px dashed var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer; transition: all .15s ease; }
.uc-drop:hover, .uc-drop.over { color: var(--cyan); border-color: var(--cyan); background: rgba(34, 230, 230, 0.05); }
.uc-drop.busy { color: var(--cyan); border-style: solid; }
.uc-file { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); padding: 0.5333rem 0.6667rem; }
.uc-file-ic { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; color: #000; background: var(--cyan); padding: 0.2rem 0.4rem; flex-shrink: 0; }
.uc-file-name { flex: 1; min-width: 0; color: var(--text); font-size: 0.8rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uc-file-name:hover { color: var(--cyan); }
.uc-file-del { background: transparent; border: 0; color: var(--text-mute); font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; flex-shrink: 0; }
.uc-file-del:hover { color: var(--red); }
.uc-del { position: absolute; top: 0.5333rem; right: 0.5333rem; width: 1.4667rem; height: 1.4667rem; background: transparent; border: 0; border-radius: 0; color: var(--text-mute); font-size: 1.0667rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; transition: color .15s ease; }
.uc-del:hover { color: var(--red); }
.uc-add { border: 1px dashed var(--line-2); border-radius: 0; background: transparent; color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; cursor: pointer; min-height: 7.2rem; display: flex; align-items: center; justify-content: center; transition: all .15s ease; }
.uc-add:hover { color: var(--cyan); border-color: var(--cyan); }
/* Azioni di riga ✓/✗ (Potential outreach / opportunities) */
.us-row-acts { display: inline-flex; gap: 0.3333rem; flex-shrink: 0; }
.us-act { width: 1.7333rem; height: 1.7333rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-2); cursor: pointer; transition: all .12s ease; }
.us-act-ok { color: var(--green); }
.us-act-ok:hover { background: var(--green); color: #000; border-color: var(--green); }
.us-act-no { color: var(--red); }
.us-act-no:hover { background: var(--red); color: #000; border-color: var(--red); }
/* Toast undo (7s) */
.us-undo { position: fixed; left: 50%; bottom: 1.7333rem; transform: translateX(-50%); z-index: 1200; display: flex; align-items: center; gap: 1.0667rem; background: var(--bg-elev); border: 1px solid var(--line-2); padding: 0.7333rem 1.0667rem; box-shadow: 0 0.6667rem 2rem rgba(0,0,0,0.55); overflow: hidden; }
.us-undo-msg { font-family: var(--sans); font-size: 0.8667rem; color: var(--text); }
.us-undo-btn { background: transparent; border: none; color: var(--cyan); font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.us-undo-btn:hover { text-decoration: underline; }
.us-undo-bar { position: absolute; left: 0; bottom: 0; height: 0.1333rem; background: var(--cyan); width: 100%; animation: usUndoBar 7s linear forwards; }
@keyframes usUndoBar { from { width: 100%; } to { width: 0; } }
/* Commitments & AUM - the fund captable (donut + holders list) */
.cm-cap { flex: 1; min-height: 0; display: flex; gap: 1.6rem; align-items: stretch; }
.cm-donut-wrap { flex: 1.1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9333rem; }
.cm-donut { width: 100%; max-width: 26.6667rem; height: auto; display: block; }
/* Hover isolates - no click, so no pointer cursor lying about one. */
/* Hover emphasis is OPACITY ONLY. The hovered arc used to grow its stroke
(30 -> 38) with a transition on stroke-width, and that is what made the
rim lag: tracing the donut's edge fires enter/leave in bursts, and every
crossing restarted a GEOMETRY transition on every arc - a style-recalc
and repaint storm. Dimming the others says the same thing and moves no
geometry under the cursor. */
.cm-arc { transition: opacity var(--tr-fast); }
.cm-cap.has-sel .cm-arc:not(.on) { opacity: 0.3; }
.cm-donut-num { font-family: var(--serif); font-size: 30px; font-weight: 700; fill: var(--text); letter-spacing: -0.015em; }
.cm-donut-sub { font-family: var(--mono); font-size: 8px; font-weight: 700; fill: var(--text-dim); letter-spacing: 0.32em; }
.cm-target { font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.04em; color: var(--text-mute); }
.cm-target b { color: var(--text); font-weight: 700; }
.cm-sel { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; max-width: 26.6667rem; }
.cm-sel-name { font-size: 1.0667rem; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.cm-sel-facts { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); }
.cm-cap-list { flex: 1; min-width: 0; overflow-y: auto; border-left: 1px solid var(--line); padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.1333rem; align-content: flex-start; }
.cm-hold { display: grid; grid-template-columns: 0.6667rem 1fr auto 3.4667rem; gap: 0.6667rem; align-items: center; width: 100%; padding: 0.4rem 0.5333rem; background: transparent; border: 0; border-radius: 0; cursor: pointer; text-align: left; transition: background var(--tr-fast); }
.cm-hold:hover { background: var(--bg-hover); }
.cm-hold.on { background: var(--bg-hover); box-shadow: inset 0.1333rem 0 0 var(--cyan); }
.cm-hold:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.cm-hold-sw { width: 0.6667rem; height: 0.6667rem; flex-shrink: 0; }
.cm-hold-name { font-size: 0.8667rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-hold-amt { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; color: var(--text); text-align: right; }
.cm-hold-pct { font-family: var(--mono); font-size: 0.8rem; color: var(--text-mute); text-align: right; }
/* Header row: labels, not data - the one place --text-dim style tags belong. */
.cm-hold-head { cursor: default; padding-bottom: 0.5333rem; border-bottom: 1px solid var(--line); margin-bottom: 0.2667rem; }
.cm-hold-head:hover { background: transparent; }
.cm-hold-head .cm-hold-name, .cm-hold-head .cm-hold-amt, .cm-hold-head .cm-hold-pct { font-family: var(--mono); font-size: 0.6333rem; font-weight: 600; letter-spacing: 0.12em; color: var(--text-mute); }
.cm-cap-empty { font-size: 0.8667rem; color: var(--text-mute); line-height: 1.5; padding: 0.6667rem 0.5333rem 0; max-width: 24rem; }
.cm-fx { font-family: var(--mono); font-size: 0.6333rem; letter-spacing: 0.04em; color: var(--text-dim); }
/* Holder rows wrap so a scenario row can carry its remove button OUTSIDE the
row button (a button inside a button is not a thing). */
.cm-hold-wrap { display: flex; align-items: center; gap: 0.2667rem; }
.cm-hold-wrap .cm-hold { flex: 1; min-width: 0; }
.cm-wi-tag { font-family: var(--mono); font-size: 0.5333rem; font-weight: 700; letter-spacing: 0.12em; color: var(--orange); border: 1px solid var(--orange); padding: 0.0667rem 0.2667rem; margin-left: 0.4667rem; vertical-align: middle; }
.cm-wi-x { width: 1.4667rem; height: 1.4667rem; flex-shrink: 0; background: transparent; border: 0; border-radius: 0; color: var(--text-mute); font-size: 1rem; line-height: 1; cursor: pointer; transition: color var(--tr-fast); }
.cm-wi-x:hover { color: var(--red); }
.cm-wi-x:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.cm-wi-open { margin-top: 0.4rem; padding: 0.4667rem 0.5333rem; background: transparent; border: 1px dashed var(--line-2); border-radius: 0; color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.04em; text-align: left; cursor: pointer; transition: color var(--tr-fast), border-color var(--tr-fast); }
.cm-wi-open:hover { color: var(--cyan); border-color: var(--cyan); }
.cm-wi-open:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.cm-wi-form { display: flex; gap: 0.4rem; margin-top: 0.4rem; align-items: center; }
.cm-wi-in { flex: 1; min-width: 0; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 0; color: var(--text); font-family: var(--sans); font-size: 0.8rem; padding: 0.3333rem 0.4667rem; }
.cm-wi-in:focus-visible { outline: 1px solid var(--cyan); outline-offset: 0; }
.cm-wi-amt { flex: 0 1 9.3333rem; }
.cm-wi-add, .cm-wi-cancel { background: transparent; border: 1px solid var(--line-2); border-radius: 0; font-family: var(--mono); font-size: 0.6333rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3333rem 0.6667rem; cursor: pointer; transition: color var(--tr-fast), border-color var(--tr-fast); }
.cm-wi-add { color: var(--cyan); border-color: var(--cyan); }
.cm-wi-add:disabled { color: var(--text-dim); border-color: var(--line-2); cursor: default; }
.cm-wi-cancel { color: var(--text-mute); }
.cm-wi-cancel:hover { color: var(--text); }
.cm-wi-add:focus-visible, .cm-wi-cancel:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.cm-wi-note { font-family: var(--mono); font-size: 0.6333rem; color: var(--text-dim); padding: 0.4rem 0.5333rem 0; }
/* Marketing - the calendar button beside the title + the month wall */
.mkt-cal-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.8667rem; height: 1.8667rem; background: transparent; border: 0; border-radius: 0; color: var(--text-mute); cursor: pointer; transition: color var(--tr-fast); }
.mkt-cal-btn:hover { color: var(--text); }
.mkt-cal-btn.active { color: var(--cyan); }
.mkt-cal-btn:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
/* Unscrollable by request: the month always fits the screen - the weeks
split whatever height is there, and a crowded day folds into "+ N more"
instead of pushing the wall past the fold. */
.mcal { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mcal-head { display: flex; align-items: baseline; gap: 0.8rem; padding-bottom: 0.6667rem; }
.mcal-month { font-family: var(--serif); font-size: 1.3333rem; font-weight: 400; color: var(--text); }
.mcal-month b { font-weight: 800; }
.mcal-count { font-family: var(--mono); font-size: 0.6333rem; letter-spacing: 0.08em; color: var(--text-mute); }
.mcal-nav { margin-left: auto; display: flex; gap: 0.2667rem; }
.mcal-nav button { background: transparent; border: 1px solid var(--line-2); border-radius: 0; color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; font-weight: 600; padding: 0.2rem 0.6rem; cursor: pointer; transition: color var(--tr-fast), border-color var(--tr-fast); }
.mcal-nav button:hover { color: var(--text); }
.mcal-nav button:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
.mcal-week { display: grid; grid-template-columns: repeat(7, 1fr); border-left: 1px solid var(--line); flex: 1; min-height: 0; }
.mcal-wd { border-left: 0; flex: 0 0 auto; }
.mcal-wd-c { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; color: var(--text-mute); padding: 0.2667rem 0.4667rem; text-align: right; }
.mcal-cell { min-height: 0; overflow: hidden; border-right: 1px solid var(--line); border-top: 1px solid var(--line); padding: 0.2667rem 0.3333rem 0.4rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mcal-week:last-of-type .mcal-cell { border-bottom: 1px solid var(--line); }
.mcal-cell.out { background: rgba(0,0,0,0.35); }
.mcal-cell.out .mcal-day { color: var(--text-dim); }
.mcal-day { font-family: var(--mono); font-size: 0.6667rem; font-weight: 600; color: var(--text-mute); align-self: flex-end; }
.mcal-cell.today .mcal-day { color: #000; background: var(--cyan); padding: 0 0.3333rem; }
.mcal-ev { display: flex; align-items: center; gap: 0.3333rem; min-width: 0; padding: 0.1333rem 0.2667rem; background: var(--bg-elev); border-left: 0.1333rem solid var(--ev, var(--line-2)); }
.mcal-ev-dot { width: 0.4rem; height: 0.4rem; flex-shrink: 0; background: var(--ev, var(--line-2)); }
.mcal-ev .mcal-ev-dot { display: none; }
.mcal-ev-t { font-size: 0.7333rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.mcal-ev-s { font-family: var(--mono); font-size: 0.5333rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); flex-shrink: 0; }
.mcal-more { font-family: var(--mono); font-size: 0.6rem; color: var(--text-mute); padding-left: 0.2667rem; }
.mcal-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.0667rem; align-items: center; padding-top: 0.6667rem; }
.mcal-leg { display: inline-flex; align-items: center; gap: 0.4667rem; font-family: var(--mono); font-size: 0.6333rem; letter-spacing: 0.03em; color: var(--text-mute); }
.mcal-leg-note { color: var(--text-mute); font-family: var(--mono); font-size: 0.6333rem; }
/* Commitments - the NETWORK view (neural-network force graph, react-force-graph) */
.cm-graph { position: relative; flex: 1; min-height: 0; background: rgba(0,0,0,0.30); overflow: hidden; }
@keyframes cmBlink { 0%, 100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.13); } }
.cm-legend { position: absolute; left: 0.8rem; bottom: 0.8rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.0667rem; max-width: calc(100% - 1.6rem); pointer-events: none; }
.cm-leg { display: inline-flex; align-items: center; gap: 0.4667rem; font-family: var(--mono); font-size: 0.6333rem; letter-spacing: 0.03em; color: var(--text-mute); }
.cm-leg-sw { width: 0.7333rem; height: 0.7333rem; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.cm-leg-blink { animation: cmBlink 2s ease-in-out infinite; transform-origin: center; }
.cm-leg-dash { background: transparent; border: 0.1rem dashed rgba(245,246,248,0.7); }
.cm-leg-note { color: var(--text-mute); }
/* View switch (HR: Team tasks <-> HR Pipeline; Commitments: Captable <-> Network) */
.hr-view { display: flex; gap: 0.2667rem; flex-shrink: 0; }
.hr-view-b { background: transparent; border: 1px solid var(--line-2); border-radius: 0; color: var(--text-mute); font-family: var(--mono); font-size: 0.6333rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3333rem 0.6667rem; cursor: pointer; transition: color var(--tr-fast), border-color var(--tr-fast); }
.hr-view-b:hover { color: var(--text); border-color: var(--line-2); }
.hr-view-b.on { color: var(--cyan); border-color: var(--cyan); }
.hr-view-b:focus-visible { outline: 1px solid var(--cyan); outline-offset: 1px; }
/* Short viewports: compact the chart view so it fits without scrolling */
@media (max-height: 770px) {
.lp-metric { padding: 0.4667rem 0.6667rem; }
.lp-metric-v { font-size: 1.0667rem; }
.lp-metrics, .lp-chartbox { margin-bottom: 0.5333rem; }
.lp-bub-wrap { padding: 0.6667rem; gap: 0.4rem; }
.lp-assume { padding: 0.6667rem; }
.fc-table td, .fc-table th { padding: 0.1333rem 0.2rem; }
}
/* ===== Responsive tablet/mobile - stack che evita rotture/sovrapposizioni ===== */
@media (max-width: 820px) {
/* Back office: sidebar sopra (capped), contenuto sotto a tutta larghezza */
.bo-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.bo-sidebar { border-right: none; border-bottom: 1px solid var(--line); max-height: 34vh; }
/* Front: globo in alto + pannelli impilati, niente overlap tra side e right-stack */
.intro-stage { display: flex; flex-direction: column; overflow-y: auto; }
.intro-globe-wrap { position: relative; inset: auto; height: 40vh; flex-shrink: 0; order: -1; }
.intro-side, .right-stack, .detail-panel {
position: static; inset: auto; width: auto; height: auto; max-height: none; margin: 0.8rem 0.8rem 0; flex-shrink: 0;
}
.right-stack { display: grid; grid-template-rows: auto auto; gap: 0.8rem; }
.detail-panel[hidden] { display: none; }
.side-list, .detail-person { flex: none; min-height: auto; overflow: visible; }
}
/* ====================================================================== */
/* ========================== LOGIN ================================== */
/* ====================================================================== */
.login-screen {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 1.6rem;
background: var(--bg);
overflow: hidden;
}
/* same brand glow + laboratory dot-grid as the war-room, for continuity */
.login-screen::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(60rem 40rem at 72% 32%, rgba(34, 230, 230, 0.07), transparent 60%),
radial-gradient(46.6667rem 34.6667rem at 22% 78%, rgba(255, 26, 120, 0.05), transparent 60%);
pointer-events: none;
z-index: 0;
}
.login-screen::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,0.35) 65%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, rgba(0,0,0,0.35) 65%, transparent 95%);
}
.login-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 25.6rem;
background: var(--bg-card);
border: 1px solid var(--line);
padding: 2.5333rem 2.2667rem 2rem;
display: flex;
flex-direction: column;
gap: 1.6rem;
}
/* top hairline = brand gradient (cyan -> magenta) */
.login-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 0.1333rem;
background: var(--grad-brand);
}
.login-brand { display: flex; align-items: center; gap: 0.8rem; }
.login-mark {
position: relative;
width: 2rem;
height: 2rem;
flex-shrink: 0;
background: var(--grad-brand);
}
.login-mark::after {
content: "";
position: absolute;
inset: 0.4667rem;
background: var(--bg-card);
}
.login-brand-text { display: flex; flex-direction: column; gap: 0.2rem; }
.login-wordmark {
font-family: var(--display);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.14em;
color: var(--text);
line-height: 1;
}
.login-kicker {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--text-mute);
}
.login-head { display: flex; flex-direction: column; gap: 0.4667rem; }
.login-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: 1.5333rem;
letter-spacing: -0.01em;
color: var(--text);
}
.login-sub {
margin: 0;
font-family: var(--sans);
font-size: 0.9rem;
color: var(--text-mute);
line-height: 1.45;
}
.login-form { display: flex; flex-direction: column; gap: 1.0667rem; }
.login-field { display: flex; flex-direction: column; gap: 0.5333rem; }
.login-field label {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}
.login-field input {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 0;
color: var(--text);
padding: 0.8rem 0.9333rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 500;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.login-field input:focus {
border-color: var(--cyan);
box-shadow: 0 0 0 0.2rem rgba(34, 230, 230, 0.12);
}
.login-field input::placeholder { color: var(--text-mute); }
.login-error {
font-family: var(--mono);
font-size: 0.7333rem;
letter-spacing: 0.03em;
color: var(--red);
min-height: 0.8667rem;
margin-top: -0.2667rem;
}
.login-btn {
margin-top: 0.1333rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
background: var(--grad-brand);
border: none;
border-radius: 0;
color: #000;
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 0.8667rem 1.0667rem;
transition: filter .15s ease, transform .05s ease;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: 0.5; cursor: default; filter: none; transform: none; }
.login-btn svg { display: block; }
.login-google {
margin-top: 0.1333rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6667rem;
width: 100%;
background: #F5F6F8;
border: 1px solid #F5F6F8;
border-radius: 0;
color: #15151A;
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.8rem 1.0667rem;
cursor: pointer;
transition: filter .15s ease, transform .05s ease;
}
.login-google:hover { filter: brightness(0.94); }
.login-google:active { transform: translateY(1px); }
.login-google:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; }
.login-google svg { display: block; }
.login-divider {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0.1333rem 0;
color: var(--text-mute);
font-family: var(--mono);
font-size: 0.6333rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(245, 246, 248, 0.12);
}
.login-gnote {
text-align: center;
font-family: var(--mono);
font-size: 0.6667rem;
letter-spacing: 0.04em;
color: var(--text-mute);
margin-top: -0.1333rem;
}
.login-foot {
text-align: center;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-mute);
}
@media (max-width: 480px) {
.login-card { padding: 2rem 1.4667rem 1.7333rem; }
.login-title { font-size: 1.4rem; }
}
/* ---- Live multiplayer cursors (Office) ---- */
.yv-cursor-layer {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none; /* never intercept clicks/hover */
overflow: hidden;
}
.yv-cursor {
position: absolute;
top: 0;
left: 0;
/* Start off-screen so a just-mounted cursor never flashes at (0,0); the rAF
loop sets the real transform on the next frame. */
transform: translate(-666.6rem, -666.6rem);
will-change: transform;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.yv-cursor-arrow {
display: block;
filter: drop-shadow(0 0.1333rem 0.2rem rgba(0, 0, 0, 0.45));
}
.yv-cursor-label {
margin: 1px 0 0 0.8rem;
padding: 0.1333rem 0.4667rem 0.2rem;
border-radius: 0.4667rem;
font-family: var(--mono);
font-size: 0.7333rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
color: #06121a; /* dark ink on the colored chip */
white-space: nowrap;
box-shadow: 0 0.1333rem 0.5333rem rgba(0, 0, 0, 0.35);
}
/* ---- Startup detail page (pipeline) + Google Drive data-room embed ---- */
.lp-layout.lp-solo { grid-template-columns: 1fr; }
/* keep the edit toggle inline inside the funnel row (it is absolute elsewhere) */
.crm-funnel-row .crm-edit-toggle { position: static; margin-left: 0.2667rem; flex-shrink: 0; }
.startup-page { display: flex; flex-direction: column; gap: 1.0667rem; flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.1333rem; }
.startup-top { display: flex; align-items: center; gap: 0.9333rem; }
.startup-top .bo-back { flex-shrink: 0; }
.startup-top .lp-d-status { position: static; flex-shrink: 0; }
.startup-top .sp-wrap { flex-shrink: 0; align-self: center; }
.startup-top .crm-edit-toggle { position: static; flex-shrink: 0; margin-left: auto; }
.startup-name { margin: 0; font-size: 1.3333rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.startup-cols { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 1.3333rem; align-items: start; flex: 1; min-height: 0; }
@media (max-width: 860px) { .startup-cols { grid-template-columns: 1fr; } }
.startup-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.startup-pill { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; background: var(--bg-card); border: 1px solid var(--line); }
.startup-pill .lp-d-label { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); flex-shrink: 0; }
.startup-pill-notes { flex-direction: column; align-items: stretch; gap: 0.4667rem; }
.startup-pill-notes .lp-d-notes { width: 100%; min-height: 4.6667rem; }
/* Data room = a dark squared panel (app-coherent chrome around the external,
unavoidably-white Google Drive embed: header bar + inset frame). */
.startup-vdr { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.32); }
.startup-vdr-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6667rem; padding: 0.6667rem 0.8rem; border-bottom: 1px solid var(--line); }
.startup-vdr-head .mono-tag { color: var(--text-mute); }
.startup-vdr-open { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); text-decoration: none; border: 1px solid var(--line-2); padding: 0.2667rem 0.6rem; transition: border-color .15s ease; white-space: nowrap; }
.startup-vdr-open:hover { border-color: var(--cyan); }
.startup-vdr-input { margin: 0.8rem 0.8rem 0; background: rgba(0, 0, 0, 0.40); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 0.8rem; padding: 0.5333rem 0.6667rem; }
.startup-vdr-input:focus { outline: none; border-color: var(--cyan); }
/* Sealed data-room vault (replaces the white Google embed): flat black
panel, cyan corner ticks, shield, ONE action that opens Drive. */
.startup-vault {
position: relative;
margin: 0.8rem;
min-height: 28rem;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.8rem;
border: 1px solid var(--line-2);
background: rgba(0, 0, 0, 0.40);
}
.vault-corner { position: absolute; width: 1.2rem; height: 1.2rem; border: 0 solid var(--cyan); opacity: 0.5; }
.vault-corner.tl { top: 0.5333rem; left: 0.5333rem; border-top-width: 1px; border-left-width: 1px; }
.vault-corner.tr { top: 0.5333rem; right: 0.5333rem; border-top-width: 1px; border-right-width: 1px; }
.vault-corner.bl { bottom: 0.5333rem; left: 0.5333rem; border-bottom-width: 1px; border-left-width: 1px; }
.vault-corner.br { bottom: 0.5333rem; right: 0.5333rem; border-bottom-width: 1px; border-right-width: 1px; }
.vault-shield { color: var(--cyan); }
.vault-tag { font-family: var(--mono); font-size: 0.7333rem; font-weight: 700; letter-spacing: 0.2em; color: var(--text); text-align: center; padding: 0 1rem; }
.vault-meta { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.14em; color: var(--text-mute); text-align: center; padding: 0 1rem; }
.vault-enter {
margin-top: 0.5333rem;
font-family: var(--mono); font-size: 0.7333rem; font-weight: 700; letter-spacing: 0.18em;
color: var(--cyan); text-decoration: none;
border: 1px solid var(--cyan);
padding: 0.6rem 1.2rem;
transition: background var(--tr-fast), color var(--tr-fast);
}
.vault-enter:hover { background: var(--cyan); color: #000; }
.startup-vdr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5333rem; min-height: 13.3333rem; margin: 0.8rem; border: 1px dashed var(--line-2); color: var(--text-mute); text-align: center; padding: 1.6rem; }
.startup-vdr-empty p { margin: 0; font-size: 0.8667rem; line-height: 1.5; max-width: 21.3333rem; }
/* ---- Reporting board (monthly folders + TOOLS markdown rail) ---- */
.rep-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 340px); gap: 1.0667rem; flex: 1; min-height: 0; }
.rep-main { min-width: 0; min-height: 0; overflow-y: auto; }
.rep-board { display: flex; flex-direction: column; gap: 1.2rem; }
.rep-monthrow { display: flex; flex-direction: column; gap: 0.5333rem; }
.rep-month-label { font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.rep-lane { display: flex; flex-direction: column; gap: 0.4rem; }
.rep-folder { width: 100%; display: flex; flex-direction: row; align-items: center; gap: 0.6667rem; padding: 0.6667rem 0.8rem; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; }
.rep-folder:hover { border-color: var(--cyan); }
.rep-folder-ic { color: var(--cyan); flex-shrink: 0; display: inline-flex; }
.rep-folder-name { flex: 1; min-width: 0; font-size: 0.8667rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-folder-count { flex-shrink: 0; font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); }
.rep-folder.hl { border-color: var(--magenta); box-shadow: inset 0.2rem 0 0 var(--magenta); }
.rep-folder.hl .rep-folder-ic, .rep-folder.hl .rep-folder-name { color: var(--magenta); }
.rep-folder-new { justify-content: center; color: var(--text-mute); border-style: dashed; font-family: var(--mono); font-size: 0.8rem; }
.rep-folder-new:hover { color: var(--cyan); }
.rep-folder-form { flex-direction: row; gap: 0.5333rem; }
.rep-folder-form .rep-add-input { flex: 1; }
.rep-add-input { width: 100%; background: rgba(0,0,0,0.4); border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 0.8rem; padding: 0.4rem 0.5333rem; }
.rep-add-input:focus { outline: none; border-color: var(--cyan); }
.rep-add-actions { display: flex; gap: 0.4rem; }
.rep-add-actions button { flex: 1; font-family: var(--mono); font-size: 0.7333rem; padding: 0.2667rem; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); cursor: pointer; }
.rep-add-actions button:hover { border-color: var(--cyan); color: var(--text); }
.rep-folderview { display: flex; flex-direction: column; gap: 0.9333rem; }
.rep-fv-top { display: flex; align-items: center; gap: 0.8rem; }
.rep-fv-name { flex: 1; min-width: 0; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--text); font-size: 1.2rem; font-weight: 600; padding: 0.2667rem 0; }
.rep-fv-name:focus { outline: none; border-bottom-color: var(--cyan); }
.rep-fv-month { font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.06em; color: var(--text-mute); flex-shrink: 0; }
.rep-fv-del { background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); padding: 0.4rem; cursor: pointer; flex-shrink: 0; }
.rep-fv-del:hover { color: var(--red); border-color: var(--red); }
.rep-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 8rem; border: 1px dashed var(--line-2); background: rgba(0,0,0,0.25); color: var(--text-mute); cursor: pointer; text-align: center; padding: 1.2rem; transition: border-color .15s ease, background .15s ease; }
.rep-drop:hover, .rep-drop.over { border-color: var(--cyan); background: rgba(34,230,230,0.05); }
.rep-drop.busy { opacity: 0.7; cursor: progress; }
.rep-drop p { margin: 0; font-size: 0.8rem; }
.rep-err { font-family: var(--mono); font-size: 0.7333rem; color: var(--red); padding: 0.5333rem 0.6667rem; border: 1px solid var(--red); background: rgba(255,59,59,0.08); }
.rep-files { display: flex; flex-direction: column; gap: 0.4rem; }
.rep-empty { font-size: 0.8667rem; color: var(--text-mute); padding: 1.0667rem 0.1333rem; }
.rep-file { display: flex; align-items: center; gap: 0.6667rem; padding: 0.6rem 0.8rem; background: var(--bg-card); border: 1px solid var(--line); }
.rep-file-ic { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--cyan); border: 1px solid var(--line-2); padding: 0.2rem 0.3333rem; flex-shrink: 0; }
.rep-file-name { flex: 1; min-width: 0; color: var(--text); text-decoration: none; font-size: 0.8667rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-file-name:hover { color: var(--cyan); }
.rep-file-size { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); flex-shrink: 0; }
.rep-file-del { background: transparent; border: none; color: var(--text-mute); font-size: 1.2rem; line-height: 1; cursor: pointer; flex-shrink: 0; padding: 0 0.1333rem; }
.rep-file-del:hover { color: var(--red); }
.rep-tools { border: 1px solid var(--line); background: rgba(0,0,0,0.30); min-height: 0; display: flex; flex-direction: column; }
.rep-tools-head { padding: 0.6667rem 0.8rem; border-bottom: 1px solid var(--line); }
.rep-tools-strip { display: flex; flex-wrap: wrap; gap: 0.5333rem; padding: 0.8rem; overflow-y: auto; align-content: flex-start; }
.rep-tool { display: flex; align-items: center; gap: 0.4667rem; padding: 0.5333rem 0.6667rem; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .15s ease; }
.rep-tool:hover { border-color: var(--cyan); }
.rep-tool-ic { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; color: var(--cyan); }
.rep-tool-name { font-size: 0.8rem; max-width: 8.6667rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-tool-new { color: var(--text-mute); border-style: dashed; font-family: var(--mono); font-size: 0.7333rem; }
.rep-tool-new:hover { color: var(--cyan); }
.rep-tool-form { flex-direction: column; align-items: stretch; gap: 0.5333rem; width: 100%; }
.rep-tool-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(0.2667rem); -webkit-backdrop-filter: blur(0.2667rem); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1.6rem; }
.rep-tool-modal { background: var(--bg-card); border: 1px solid var(--line-2); border-top: 0.1333rem solid var(--cyan); width: min(54.6667rem, 96vw); height: min(80vh, 48rem); display: flex; flex-direction: column; box-shadow: 0 1.6rem 4.6667rem rgba(0,0,0,0.55); }
.rep-tool-mhead { display: flex; align-items: center; gap: 0.6667rem; padding: 0.6667rem 0.8rem; border-bottom: 1px solid var(--line); }
.rep-tool-mtag { font-family: var(--mono); font-size: 0.6rem; font-weight: 700; color: var(--cyan); flex-shrink: 0; }
.rep-tool-title { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text); font-size: 1rem; font-weight: 600; padding: 0.1333rem 0; }
.rep-tool-title:focus { outline: none; }
.rep-tool-tabs { display: flex; border: 1px solid var(--line-2); flex-shrink: 0; }
.rep-tool-tab { background: transparent; border: none; color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; padding: 0.2667rem 0.6667rem; cursor: pointer; }
.rep-tool-tab.active { background: var(--cyan); color: var(--bg); }
.rep-tool-del, .rep-tool-close { background: transparent; border: none; color: var(--text-mute); cursor: pointer; flex-shrink: 0; }
.rep-tool-del:hover { color: var(--red); }
.rep-tool-close { font-size: 1.4667rem; line-height: 1; padding: 0 0.1333rem; }
.rep-tool-close:hover { color: var(--text); }
.rep-tool-edit { flex: 1; min-height: 0; resize: none; background: rgba(0,0,0,0.35); border: none; color: var(--text); font-family: var(--mono); font-size: 0.8667rem; line-height: 1.6; padding: 1.0667rem; }
.rep-tool-edit:focus { outline: none; }
.rep-tool-md { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem 1.4667rem; color: var(--text); font-size: 0.9333rem; line-height: 1.65; }
.rep-tool-md h1, .rep-tool-md h2, .rep-tool-md h3, .rep-tool-md h4 { margin: 1.1em 0 0.5em; line-height: 1.25; }
.rep-tool-md h1 { font-size: 1.5em; }
.rep-tool-md h2 { font-size: 1.25em; }
.rep-tool-md h3 { font-size: 1.08em; }
.rep-tool-md p { margin: 0.6em 0; }
.rep-tool-md ul, .rep-tool-md ol { margin: 0.6em 0; padding-left: 1.4em; }
.rep-tool-md li { margin: 0.2em 0; }
.rep-tool-md code { font-family: var(--mono); font-size: 0.88em; background: rgba(255,255,255,0.07); padding: 1px 0.3333rem; }
.rep-tool-md .md-pre { background: rgba(0,0,0,0.4); border: 1px solid var(--line); padding: 0.8rem 0.9333rem; overflow-x: auto; margin: 0.8em 0; }
.rep-tool-md .md-pre code { background: transparent; padding: 0; }
.rep-tool-md a { color: var(--cyan); }
.rep-tool-md hr { border: none; border-top: 1px solid var(--line); margin: 1.2em 0; }
/* ---- Marketing: tile mosaic entry + PR/Noise tables (brandkit reuses .rep-*) ----
The entry is a four-tile mosaic (hero + narrow column + two wide bands), one
tile per section, each carrying its OWN live counts - so opening Marketing
reads as a status board instead of a menu. Section colour is set once here
(--c on .mk-) and consumed by the rail, the label and the chips.
A tile carries its NAME and its numbers - no kicker, no pitch, no CTA. */
.mk-social { --c: var(--magenta); }
.mk-pr { --c: var(--cyan); }
.mk-noise { --c: var(--green); }
.mk-brandkit { --c: var(--orange); }
.mkt-head-stats { display: flex; gap: 1.7333rem; align-items: flex-end; }
.mkt-hs { text-align: right; }
.mkt-hs b { display: block; font-size: 1.4667rem; font-weight: 700; line-height: 1; }
.mkt-hs span { font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.mkt-grid {
display: grid; flex: 1; min-height: 0;
grid-template-columns: 1.32fr 0.78fr 1.6fr;
grid-template-rows: 1fr 1fr;
gap: 0.8rem;
}
.mkt-tile {
position: relative; overflow: hidden; text-align: left;
background: var(--bg-card); border: 1px solid var(--line); color: var(--text);
cursor: pointer; padding: 0; min-width: 0; min-height: 0;
transition: border-color var(--tr-fast), transform var(--tr-fast);
}
.mkt-tile:hover { border-color: var(--c); transform: translateY(-2px); }
.mkt-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
/* The ONE small-caps line a tile may carry: it names a live slot (PR's next
publication), never a pitch. Kickers, one-line descriptions and "Open ->"
used to live here and were removed - a tile shows its name and its data. */
.mkt-lab { display: block; font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c); }
.mkt-stat b { display: block; font-size: 1.3333rem; font-weight: 700; line-height: 1; }
.mkt-stat span { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.mkt-foot { display: flex; align-items: flex-end; gap: 1.2rem; }
/* align-items: flex-start, else a column flex stretches every chip to the full
tile width and three counts read as three empty input fields. */
.mkt-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3333rem; margin-top: auto; }
.mkt-chip { border: 1px solid var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .1em; text-transform: uppercase; padding: 0.1333rem 0.4667rem; }
.mkt-chip.on { border-color: var(--c); color: var(--c); }
/* Hero (Social Contents): artwork behind, the title anchored to the bottom.
Restrained by design - a faint grid, ONE soft wash and thin geometry. The
blurred double glow + speed-diagonals this replaces read as a sports card. */
.mkt-hero { grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem; }
.mkt-art { position: absolute; inset: 0; overflow: hidden; }
.mkt-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Descendant selector, not a lone class: .mkt-mesh is declared further down
(wide bands) and would otherwise win on source order and restore opacity .5. */
.mkt-art .mkt-hero-mesh { opacity: .3; }
.mkt-wash { position: absolute; inset: 0; background: radial-gradient(112% 82% at 62% 26%, rgba(var(--magenta-rgb), .13), transparent 62%); }
.mkt-veil { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg-card) 6%, rgba(0, 0, 0, .55) 34%, rgba(0, 0, 0, 0) 76%); }
.mkt-hero-body { position: relative; display: flex; flex-direction: column; gap: 0.6667rem; }
.mkt-hero-title { display: block; font-size: 3.0667rem; font-weight: 700; line-height: .92; letter-spacing: .01em; }
/* Narrow column (PR): the name, then the slot that matters - what publishes next. */
.mkt-narrow { grid-row: 1 / 3; display: flex; flex-direction: column; gap: 0.8rem; padding: 1.2rem 1.0667rem; }
.mkt-narrow-head { display: flex; flex-direction: column; gap: 0.2rem; }
.mkt-narrow-title { display: block; font-size: 1.7333rem; font-weight: 700; line-height: 1.02; letter-spacing: .02em; }
.mkt-vs { display: flex; flex-direction: column; align-items: center; gap: 0.4667rem; padding: 0.9333rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.mkt-vs-empty { color: var(--text-mute); font-size: 0.8667rem; }
.mkt-crest { width: 2.5333rem; height: 2.5333rem; border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 0.8667rem; font-weight: 700; color: var(--text-mute); }
.mkt-vs-name { font-size: 0.8667rem; letter-spacing: .1em; color: var(--text-mute); }
.mkt-vs-v { font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .3em; color: var(--c); }
.mkt-vs-topic { font-size: 0.8rem; color: var(--text-mute); margin-top: 0.2667rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Wide bands (Noise, Brandkit): copy left, a picture-panel right. */
.mkt-wide { display: flex; align-items: stretch; }
.mkt-wide-left { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.2rem 1.3333rem; }
.mkt-wide-title { display: block; font-size: 1.7333rem; font-weight: 700; line-height: 1.02; letter-spacing: .01em; }
.mkt-wide-right { position: relative; width: 14.1333rem; flex-shrink: 0; border-left: 1px solid var(--line); }
.mkt-mesh { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 2.2667rem 2.2667rem; }
.mkt-post { position: absolute; inset: 1.0667rem; border: 1px solid var(--line-2); background: #0c0c0e; padding: 0.8rem; display: flex; flex-direction: column; justify-content: space-between; gap: 0.5333rem; }
.mkt-post-title { display: block; font-size: 1.0667rem; font-weight: 700; line-height: 1.1; }
.mkt-post-meta { display: block; font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin-top: 0.4rem; }
.mkt-aa { position: absolute; top: 1.0667rem; left: 1.0667rem; font-size: 2rem; font-weight: 700; }
/* One row, always: the palette is the brand: wrapping it puts black on a line
of its own and it reads as a stray tile. Squares shrink instead. */
.mkt-swatches { position: absolute; left: 1.0667rem; right: 1.0667rem; bottom: 1.0667rem; display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.mkt-sw { flex: 1 1 0; min-width: 0; max-width: 2.6667rem; aspect-ratio: 1; border: 1px solid var(--line); }
.mk-section { display: flex; flex-direction: column; gap: 0.9333rem; flex: 1; min-height: 0; }
.mk-pills { display: flex; align-items: center; gap: 0.5333rem; flex-wrap: wrap; flex-shrink: 0; }
.mk-back { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .04em; text-transform: uppercase; padding: 0.4rem 0.6667rem; cursor: pointer; margin-right: 0.4rem; }
.mk-back:hover { color: var(--text); border-color: var(--text-dim); }
.mk-pill { background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-mute); font-size: 0.8667rem; font-weight: 600; padding: 0.4667rem 0.9333rem; cursor: pointer; transition: all .12s ease; }
.mk-pill:hover { color: var(--text); }
/* Pills inherit --c from the .mk- classes above: ONE place decides
what colour a section is, on the tile and on its tab alike. */
.mk-pill.active { background: var(--c); border-color: var(--c); color: #06121a; }
.mk-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.mk-wip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6667rem; flex: 1; min-height: 16rem; color: var(--text-mute); text-align: center; }
.mk-wip-big { font-size: 1.7333rem; font-weight: 600; color: var(--text-mute); letter-spacing: .01em; }
.mk-wip p { margin: 0; font-size: 0.8667rem; }
/* ---- Social Contents: the pace strip + the content kanban -------------
The board itself reuses .lp-board / .lp-col / .lp-card (see
components/office/SocialContent.tsx); what is declared here is the READING
above it - the one thing a kanban cannot show on its own - plus the two
states of a card that opens in place instead of in a side panel. */
.soc { display: flex; flex-direction: column; gap: 1.0667rem; min-height: 0; }
.soc-sub { display: flex; flex-direction: column; gap: 0.9333rem; flex: 1; min-height: 0; }
/* Three readings side by side, never stacked while there is room: the verdict
is only trustworthy next to the two measurements it is drawn from. */
.soc-pace {
display: grid;
grid-template-columns: minmax(14rem, 1.1fr) minmax(11rem, 0.95fr) minmax(15rem, 1.35fr);
gap: 1.3333rem;
border: 1px solid var(--line);
border-left: 3px solid var(--text-dim);
background: var(--bg-card);
padding: 0.9333rem 1.2rem;
flex-shrink: 0;
}
/* The verdict colour lives on the left rail of the WHOLE strip: it is the one
thing that has to be legible from across the room. */
/* Over-production is MAGENTA, not orange: orange is the "in flight" colour on
every other board (PR in progress, Due Diligence, Post Production right here
in this board's own columns), and reusing it for a verdict made a warning
read as a stage. Magenta is the brand's alarm colour and is used nowhere else
in this strip. */
.soc-pace-under { border-left-color: var(--red); }
.soc-pace-on { border-left-color: var(--green); }
.soc-pace-over { border-left-color: var(--magenta); }
.soc-verdict { display: flex; flex-direction: column; gap: 0.2667rem; min-width: 0; }
.soc-verdict-v { font-size: 1.6rem; font-weight: 700; line-height: 1.05; letter-spacing: .01em; }
.soc-pace-under .soc-verdict-v { color: var(--red); }
.soc-pace-on .soc-verdict-v { color: var(--green); }
.soc-pace-over .soc-verdict-v { color: var(--magenta); }
.soc-pace-unset .soc-verdict-v { color: var(--text-mute); }
.soc-verdict-why { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--text-mute); }
.soc-target { display: flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; font-family: var(--mono); font-size: 0.7333rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
/* No spinner arrows: the cadence is typed, and the stepper put two tiny click
targets inside a 3.4rem box where they only got hit by accident. */
.soc-target input { width: 3.4rem; background: #0c0c0e; border: 1px solid var(--line-2); color: var(--text); font-family: var(--mono); font-size: 0.8667rem; text-align: center; padding: 0.2rem 0.3333rem; outline: none; -moz-appearance: textfield; appearance: textfield; }
.soc-target input::-webkit-outer-spin-button,
.soc-target input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.soc-target input:focus { border-color: var(--cyan); }
/* Runway gauge: the healthy band is drawn ON the track, so "2.3 weeks" is read
as a position between starving and over-stocked instead of as a bare number
the reader has to hold a scale for. */
.soc-gauge-wrap { display: flex; flex-direction: column; gap: 0.2667rem; min-width: 0; }
.soc-gauge-v { font-size: 1.6rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.soc-gauge { position: relative; display: flex; height: 0.5333rem; margin-top: auto; }
.soc-gz { height: 100%; }
.soc-gz-thin { background: rgba(255, 59, 59, 0.38); }
.soc-gz-ok { background: rgba(var(--green-rgb), 0.45); }
.soc-gz-heavy { background: rgba(var(--magenta-rgb), 0.30); }
.soc-needle { position: absolute; top: -0.2667rem; bottom: -0.2667rem; width: 2px; background: var(--text); transform: translateX(-1px); }
.soc-gauge-ax { position: relative; height: 0.9333rem; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .08em; color: var(--text-mute); }
.soc-gauge-ax span { position: absolute; top: 0.1333rem; transform: translateX(-50%); white-space: nowrap; }
.soc-gauge-ax span.start { transform: none; }
.soc-gauge-ax span.end { transform: translateX(-100%); }
/* Coverage: the next weeks by target publication DATE against the cadence
line. The sharpest of the three readings - a bar under the line is a hole in
the calendar, a bar far over it is a pile-up, and a stock count shows neither. */
.soc-cov-wrap { display: flex; flex-direction: column; gap: 0.2667rem; min-width: 0; }
.soc-cov { position: relative; display: flex; align-items: flex-end; gap: 0.4rem; height: 4.4rem; margin-top: auto; border-bottom: 1px solid var(--line-2); }
.soc-cov-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; height: 100%; }
.soc-cov-bar { position: relative; width: 100%; min-height: 2px; background: var(--text-dim); transition: height .18s var(--ease); }
.soc-cov-bar b { position: absolute; left: 0; right: 0; top: -1.0667rem; text-align: center; font-family: var(--mono); font-size: 0.6667rem; font-weight: 600; color: var(--text-mute); }
.soc-cov-bar[data-load="thin"] { background: rgba(255, 59, 59, 0.6); }
.soc-cov-bar[data-load="ok"] { background: var(--green); }
.soc-cov-bar[data-load="heavy"] { background: var(--magenta); }
.soc-cov-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--text-mute); pointer-events: none; }
.soc-cov-target b { position: absolute; right: 0; bottom: 0.1333rem; font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: .08em; color: var(--text-mute); }
.soc-cov-ax { display: flex; gap: 0.4rem; }
.soc-cov-ax span { flex: 1 1 0; min-width: 0; text-align: center; font-family: var(--mono); font-size: 0.6rem; letter-spacing: .05em; color: var(--text-mute); white-space: nowrap; overflow: hidden; }
.soc-cov-note { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
/* Per-stage meter in a column head: the runway gauge shrunk to a strip - the
healthy band on the track, and a tick that SLIDES to where this column
stands. It is what turns "we are behind" into "we are behind BECAUSE
post-production is jammed".
It used to be a fill bar with a fixed tick at the thin/healthy threshold;
that tick landed at nearly the same place in all four columns, so it read as
decoration and the eye stopped looking at it. The moving part has to be the
measurement, not the scale. */
.soc-col-head { flex-wrap: wrap; }
.soc-meter { position: relative; display: flex; flex: 0 0 100%; height: 3px; margin-top: 0.2667rem; }
.soc-mz { height: 100%; }
.soc-mz-thin { background: rgba(255, 59, 59, 0.32); }
.soc-mz-ok { background: rgba(var(--green-rgb), 0.40); }
.soc-mz-heavy { background: rgba(var(--magenta-rgb), 0.26); }
.soc-mtick { position: absolute; top: -0.2rem; bottom: -0.2rem; width: 2px; background: var(--text-mute); transform: translateX(-1px); transition: left .18s var(--ease); }
.soc-mtick[data-load="thin"] { background: var(--red); }
.soc-mtick[data-load="healthy"] { background: var(--green); }
.soc-mtick[data-load="heavy"] { background: var(--magenta); }
.soc-meter-unset { opacity: .35; }
/* The door out of the Ideas column, into the raw material behind it: a square
next to the stage name, icon only - the head is a label row, and a word there
would compete with the stage it sits beside. */
.soc-bank { display: inline-flex; align-items: center; justify-content: center; width: 1.2667rem; height: 1.2667rem; flex-shrink: 0; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); padding: 0; cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.soc-bank:hover { color: var(--magenta); border-color: var(--magenta); }
/* The card: the .lp-card grid, plus a fourth child that spans it - the editor.
No side panel, so the card grows downward and the board keeps the width. */
.soc-card { align-items: start; }
.soc-card-body { display: flex; flex-direction: column; gap: 0.1333rem; min-width: 0; }
.soc-chip { width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; color: var(--text-mute); flex-shrink: 0; }
.soc-date { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); white-space: nowrap; }
.soc-date.empty { color: var(--text-mute); }
.soc-card.open { cursor: default; border-color: var(--cyan); background: var(--bg-hover); }
.soc-editor { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.3333rem; margin-top: 0.4rem; padding-top: 0.5333rem; border-top: 1px solid var(--line); cursor: default; }
.soc-in-row { display: flex; gap: 0.3333rem; }
.soc-in { flex: 1 1 0; width: 100%; min-width: 0; background: #0c0c0e; border: 1px solid var(--line); color: var(--text); font-family: var(--sans); font-size: 0.8rem; padding: 0.3333rem 0.4rem; outline: none; }
.soc-in:focus { border-color: var(--cyan); }
.soc-in-title { font-weight: 600; }
.soc-notes { resize: vertical; line-height: 1.35; }
input.soc-in[type="date"] { color-scheme: dark; }
select.soc-in, .soc-af { cursor: pointer; }
.soc-af { flex: 1 1 0; min-width: 0; background: #0c0c0e; border: 1px solid var(--line-2); color: var(--text); font-size: 0.8rem; padding: 0.2667rem 0.3333rem; outline: none; }
.soc-ed-foot { display: flex; justify-content: space-between; gap: 0.4rem; }
.soc-ed-del, .soc-ed-ok { background: transparent; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .12em; text-transform: uppercase; padding: 0.2667rem 0.6rem; cursor: pointer; }
/* Both footer buttons wear their colour at rest and light up on hover: the
destructive one must read as destructive BEFORE the pointer is on it. */
.soc-ed-del { color: var(--red); border-color: var(--red); }
.soc-ed-del:hover { background: rgba(var(--red-rgb), 0.12); }
.soc-ed-ok { color: var(--cyan); border-color: var(--cyan); }
.soc-ed-ok:hover { background: rgba(var(--cyan-rgb), 0.12); }
/* ---- The Ideas Bank: the room behind the Ideas column -----------------
It takes the WHOLE SCREEN (same contract as the team dossier, .tpp-screen):
it is not a panel inside a tool, it is a place you go to read the platform,
and a feed squeezed under a sidebar reads as a widget.
Two things on it, and deliberately only two: the FEED - the mass of a CRM
packed into something that reads like a social - and the RAIL, whose top row
IS the hot topic and therefore needs no banner repeating it. The authoring
surface (the retro, behind the icon at the end of the bar) is a door, not a
column: filling this bank is an agent's job over MCP, so it must not cost
the feed a pixel.
Drawn by components/office/IdeasBank.tsx; the arithmetic is lib/bank.ts. */
.bank-screen {
position: fixed; inset: 0; z-index: var(--z-modal);
display: flex; flex-direction: column;
background: var(--bg);
}
/* The bar: back, where you are, how much of it you are looking at, search,
and the door to the retro. One row, because everything else is the feed. */
.bank-bar {
display: flex; align-items: center; gap: 0.6rem;
flex-shrink: 0;
padding: 0.6rem 1.0667rem;
border-bottom: 1px solid var(--line);
background: var(--bg-elev);
}
.bank-x { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; flex-shrink: 0; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); padding: 0; cursor: pointer; }
.bank-x:hover { color: var(--magenta); border-color: var(--magenta); }
.bank-title { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; }
.bank-title b { font-family: var(--sans); font-size: 1.0667rem; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--text); }
.bank-count { font-family: var(--mono); font-size: 0.7333rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.bank-chip { background: transparent; border: 1px solid var(--magenta); color: var(--magenta); font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .08em; padding: 0.1333rem 0.4rem; cursor: pointer; }
.bank-chip:hover { background: rgba(var(--magenta-rgb), 0.12); }
.bank-search { margin-left: auto; width: min(22rem, 32vw); background: #0c0c0e; border: 1px solid var(--line); color: var(--text); font-family: var(--sans); font-size: 0.8rem; padding: 0.3333rem 0.5333rem; outline: none; }
.bank-search:focus { border-color: var(--cyan); }
.bank-retro-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; flex-shrink: 0; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); padding: 0; cursor: pointer; }
.bank-retro-btn:hover, .bank-retro-btn.on { color: var(--cyan); border-color: var(--cyan); }
.bank-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; }
.bank-feed-wrap { min-width: 0; min-height: 0; overflow-y: auto; padding: 1.0667rem; display: flex; flex-direction: column; gap: 0.8rem; }
/* No scrollbars anywhere in this room. It is a wall of white cards on black;
a grey gutter down the side of each scrolling area (and a second one inside
every embed) was the only thing on screen that belonged to the browser
rather than to the feed. The content still scrolls - it just does not
advertise it. */
.bank-feed-wrap, .bank-rail, .bank-table-wrap { scrollbar-width: none; -ms-overflow-style: none; }
.bank-feed-wrap::-webkit-scrollbar, .bank-rail::-webkit-scrollbar, .bank-table-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* The wall. auto-fill rather than a fixed count: on a 27" it packs four
columns and on a laptop two, and a feed that cannot use the screen it took
over would not have deserved to take it. The 24rem floor is what keeps a
column above the ~400px the platform's embed needs before it starts
wrapping its own header. */
.bank-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: 0.8rem; align-items: start; }
.bank-post { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; border: 1px solid var(--line); background: var(--bg-card); padding: 0.6667rem; transition: border-color .12s ease; }
.bank-post:hover { border-color: var(--line-2); }
.bank-post-head { display: flex; align-items: center; gap: 0.4667rem; min-width: 0; }
/* A feed needs a face where a table needs a column, and the author's own
picture is not ours to fetch - so: initials, squared like everything else. */
.bank-av { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; flex-shrink: 0; background: #0c0c0e; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; letter-spacing: .04em; color: var(--text-mute); }
.bank-post-who { display: flex; flex-direction: column; min-width: 0; }
.bank-post-who b { font-size: 0.8667rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-post-who i { font-style: normal; font-family: var(--mono); font-size: 0.6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
/* The post itself, from the platform's own embed endpoint - the room shows
content, not a list of links.
The box is deliberately TALL (and grows with the screen, since every length
here is rem and the root font is fluid): the iframe is cross-origin, so
nothing can tell us how tall a post is, and the only way to show a whole one
is to give it more room than it usually needs. Paired with scrolling="no" on
the iframe - a box that has to be scrolled inside a wall of boxes is a wall
of scrollbars. */
.bank-embed { height: 40rem; background: #0c0c0e; border: 1px solid var(--line); }
.bank-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.bank-noembed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3333rem; height: 100%; padding: 1rem; text-align: center; color: var(--text-mute); }
.bank-noembed p { margin: 0; font-size: 0.7333rem; line-height: 1.35; }
.bank-noembed a { color: var(--cyan); text-decoration: none; font-size: 0.7333rem; }
.bank-hook { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--text-mute); }
.bank-post-foot { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: auto; }
.bank-eng { display: inline-flex; align-items: center; gap: 0.2667rem; flex-shrink: 0; font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.bank-eng svg { opacity: .8; }
.bank-eng svg:nth-of-type(2) { margin-left: 0.2667rem; }
.bank-tags { display: flex; flex-wrap: wrap; gap: 0.2667rem; min-width: 0; }
.bank-tag { background: transparent; border: 1px solid var(--line); color: var(--text-mute); font-family: var(--mono); font-size: 0.6rem; letter-spacing: .06em; padding: 0.1333rem 0.3333rem; cursor: pointer; }
.bank-tag:hover { color: var(--cyan); border-color: var(--cyan); }
/* The rail: the ranking IS what the room is for, so it never scrolls away. */
.bank-rail { display: flex; flex-direction: column; gap: 0.4rem; min-height: 0; overflow-y: auto; padding: 1.0667rem 1.0667rem 1.0667rem 0.8rem; border-left: 1px solid var(--line); background: var(--bg-elev); }
.bank-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-shrink: 0; }
.bank-clear { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.bank-clear:hover { color: var(--cyan); }
.bank-rail-note { margin: auto 0 0; padding-top: 0.6rem; font-size: 0.6667rem; line-height: 1.4; color: var(--text-mute); }
.bank-trend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1333rem; }
.bank-trend-row { display: grid; grid-template-columns: minmax(0, 1fr) 1.3rem 4.2rem 2.8rem; align-items: center; gap: 0.4rem; width: 100%; background: transparent; border: 0; border-left: 2px solid transparent; padding: 0.2667rem; cursor: pointer; text-align: left; }
.bank-trend-row:hover { background: var(--bg-hover); }
.bank-trend-row.sel { background: var(--bg-hover); border-left-color: var(--magenta); }
.bank-trend-tag { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-trend-n { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); text-align: right; }
.bank-trend-bar { height: 0.3333rem; background: #0c0c0e; }
.bank-trend-bar span { display: block; height: 100%; background: var(--text-dim); }
/* Magenta is the brand's alarm colour, kept for MOVEMENT (new / surging); a
tag that is merely large and flat is cyan, one that is cooling gets none. */
.bank-trend-bar span[data-state="new"], .bank-trend-bar span[data-state="surging"] { background: var(--magenta); }
.bank-trend-bar span[data-state="steady"] { background: var(--cyan); }
.bank-trend-bar span[data-state="cooling"] { background: var(--line-2); }
.bank-trend-mom { font-family: var(--mono); font-size: 0.6667rem; text-align: right; }
.bank-st-new, .bank-st-surging { color: var(--magenta); }
.bank-st-steady { color: var(--text-mute); }
.bank-st-cooling { color: var(--text-mute); }
/* The retro: raw rows, no embeds, one screen. This is the write side of the
same data the feed reads - and the same side an agent writes over MCP. */
.bank-retro { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.6667rem; padding: 1.0667rem; overflow-y: auto; }
.bank-paste { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex-shrink: 0; }
.bank-paste .soc-in { flex: 1 1 22rem; }
.bank-retro-hint { flex: 1 1 100%; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .06em; color: var(--text-mute); }
.bank-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); }
.bank-table { width: 100%; border-collapse: collapse; font-size: 0.7333rem; }
.bank-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-elev); border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); text-align: left; padding: 0.3333rem 0.4rem; white-space: nowrap; }
.bank-table td { border-bottom: 1px solid var(--line); padding: 0; }
.bank-table tr:hover td { background: var(--bg-hover); }
.bank-cell { width: 100%; min-width: 4rem; background: transparent; border: 0; color: var(--text); font-family: var(--sans); font-size: 0.7333rem; padding: 0.3333rem 0.4rem; outline: none; }
.bank-cell:focus { background: #0c0c0e; box-shadow: inset 0 0 0 1px var(--cyan); }
.bank-cell.num { text-align: right; font-family: var(--mono); -moz-appearance: textfield; appearance: textfield; }
.bank-cell.num::-webkit-outer-spin-button, .bank-cell.num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input.bank-cell[type="date"] { color-scheme: dark; }
select.bank-cell { cursor: pointer; }
.bank-cell-ok { display: block; padding: 0.3333rem 0.4rem; font-family: var(--mono); font-size: 0.7333rem; color: var(--green); text-align: center; }
.bank-del { background: transparent; border: 0; color: var(--text-mute); font-size: 1rem; line-height: 1; padding: 0.2rem 0.4rem; cursor: pointer; }
.bank-del:hover { color: var(--red); }
.bank-empty { margin: 0; font-size: 0.7333rem; color: var(--text-mute); }
.bank-act { align-self: flex-start; background: transparent; border: 1px solid var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.6667rem; letter-spacing: .12em; text-transform: uppercase; padding: 0.2667rem 0.6rem; cursor: pointer; }
.bank-act:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan); }
.bank-act:disabled { opacity: .4; cursor: default; }
/* Under ~1100px the rail cannot hold its column without squeezing the embeds
below readable width, so it goes above the feed as a strip. */
@media (max-width: 1100px) {
.bank-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.bank-rail { order: -1; border-left: 0; border-bottom: 1px solid var(--line); max-height: 12rem; padding: 0.8rem 1.0667rem; }
.bank-search { width: 10rem; }
}
/* The same verdict on the Marketing mosaic: you should not have to open the
room to find out we stopped producing. */
.mkt-hero-chips { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 0; }
.soc-pill { font-weight: 600; }
.soc-pill-under { border-color: var(--red); color: var(--red); }
.soc-pill-on { border-color: var(--green); color: var(--green); }
.soc-pill-over { border-color: var(--magenta); color: var(--magenta); }
.soc-pill-unset { border-color: var(--line-2); color: var(--text-mute); }
/* Below this the three readings would each be too narrow to read; stacked they
stay honest, they just take more height. */
@media (max-width: 1180px) {
.soc-pace { grid-template-columns: 1fr; gap: 0.9333rem; }
.soc-gauge, .soc-cov { margin-top: 0.4rem; }
}
.mpr { display: flex; flex-direction: column; gap: 0.9333rem; min-height: 0; }
.mpr-table { display: flex; flex-direction: column; gap: 0.4rem; }
.mpr-head, .mpr-row { display: grid; grid-template-columns: minmax(8.6667rem, 1.7fr) minmax(6rem, 1fr) 9.2rem minmax(6rem, 1.2fr) 8rem 1.8667rem; gap: 0.5333rem; align-items: center; }
.mpr-head { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); padding: 0 0.1333rem 0.1333rem; }
.mpr-row { background: var(--bg-card); border: 1px solid var(--line); padding: 0.4rem 0.5333rem; }
.mpr-cell { background: transparent; border: 1px solid transparent; color: var(--text); font-size: 0.8667rem; padding: 0.4rem 0.5333rem; outline: none; width: 100%; min-width: 0; }
.mpr-cell:hover { border-color: var(--line); }
.mpr-cell:focus { border-color: var(--cyan); background: rgba(0,0,0,0.3); }
.mpr-date, .mpr-status { color-scheme: dark; }
.mpr-status { cursor: pointer; }
.mpr-status.st-in-corso { color: var(--orange); }
.mpr-status.st-pubblicato { color: var(--green); }
/* Noise (blog) reuses the PR table; its own status domain gets the same
colour grammar: neutral draft, orange while moving, green once out. */
.mpr-status.st-review { color: var(--orange); }
.mpr-status.st-live { color: var(--green); }
.mnz-table .mpr-head, .mnz-table .mpr-row { grid-template-columns: minmax(11.3333rem, 2.2fr) minmax(6rem, 1fr) 9.2rem minmax(6rem, 1.3fr) 8rem 1.8667rem; }
.mpr-del { background: transparent; border: none; color: var(--text-mute); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; }
.mpr-del:hover { color: var(--red); }
.mpr-empty { font-size: 0.8667rem; color: var(--text-mute); padding: 1.0667rem 0.1333rem; }
.mpr-add { align-self: flex-start; margin-top: 0.2667rem; background: transparent; border: 1px dashed var(--line-2); color: var(--text-mute); font-family: var(--mono); font-size: 0.8rem; padding: 0.4667rem 0.8rem; cursor: pointer; }
.mpr-add:hover { color: var(--cyan); border-color: var(--cyan); }
.bk-lane { max-width: 44rem; }
/* ====================================================================== */
/* ===== POLISH PASS (v13): coherent motion + interaction feedback ===== */
/* Same identity (black / cyan / magenta / green, Barlow Condensed, flat */
/* squared) - this section only unifies HOW things move and respond. */
/* ====================================================================== */
/* --- Office: tool switch cross-fade (main is keyed by tool id) --- */
.bo-main { animation: yvToolIn 0.28s var(--ease) both; }
@keyframes yvToolIn {
from { opacity: 0; transform: translateY(0.4rem); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Dashboard: side list rows enter with a short stagger --- */
.side-list .side-item { animation: yvItemIn 0.32s var(--ease) backwards; }
@keyframes yvItemIn {
from { opacity: 0; transform: translateX(-0.4rem); }
to { opacity: 1; transform: translateX(0); }
}
.side-list .side-item:nth-child(1) { animation-delay: 0.02s; }
.side-list .side-item:nth-child(2) { animation-delay: 0.05s; }
.side-list .side-item:nth-child(3) { animation-delay: 0.08s; }
.side-list .side-item:nth-child(4) { animation-delay: 0.11s; }
.side-list .side-item:nth-child(5) { animation-delay: 0.14s; }
.side-list .side-item:nth-child(6) { animation-delay: 0.17s; }
.side-list .side-item:nth-child(7) { animation-delay: 0.20s; }
.side-list .side-item:nth-child(8) { animation-delay: 0.23s; }
.side-list .side-item:nth-child(9) { animation-delay: 0.26s; }
.side-list .side-item:nth-child(10) { animation-delay: 0.29s; }
.side-list .side-item:nth-child(n+11) { animation-delay: 0.32s; }
/* --- Detail panel: photo fades in when it arrives (no hard swap) --- */
.detail-photo { transition: background-color var(--tr-base); }
.detail-photo.has-photo { animation: yvPhotoIn 0.4s var(--ease) both; }
@keyframes yvPhotoIn { from { opacity: 0.25; } to { opacity: 1; } }
/* --- Cards (kanban LP + CRM + sheet rows): one hover language --- */
.lp-card, .hr-row {
transition: border-color var(--tr-fast), background var(--tr-fast),
transform var(--tr-fast), box-shadow var(--tr-fast);
}
.lp-card:hover, .hr-row:hover {
transform: translateY(-1px);
box-shadow: 0 0.2rem 0.9333rem rgba(0, 0, 0, 0.45);
}
.lp-card.dragging, .hr-row.dragging { transform: none; box-shadow: none; }
/* --- Buttons / chips / sidebar tools: unified response speed --- */
.bo-btn, .bo-back, .bo-tool, .bo-masterfile-btn, .seg, .fchip, .mpr-add, .us-set-done {
transition: background var(--tr-fast), color var(--tr-fast),
border-color var(--tr-fast), box-shadow var(--tr-fast);
}
/* --- Drag & drop: clearer insertion line on sheet rows --- */
.hr-row.drop-before { box-shadow: inset 0 0.1333rem 0 0 var(--cyan), 0 0 0 0 transparent; }
/* --- Masterfile: transient "Saved" pulse next to the title --- */
.bo-doc .doc-page { position: relative; }
.doc-saved {
position: absolute;
top: 1.7333rem;
right: 0;
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--green);
animation: yvSavedPulse 1.6s var(--ease) forwards;
pointer-events: none;
}
@keyframes yvSavedPulse {
0% { opacity: 0; transform: translateY(0.1333rem); }
12% { opacity: 1; transform: translateY(0); }
70% { opacity: 1; }
100% { opacity: 0; }
}
/* --- Empty states: same quiet voice everywhere --- */
.lp-detail-empty .mono-tag, .bo-tool-placeholder .mono-tag { color: var(--text-mute); }
/* --- Accessibility: honor reduced-motion (kills only the polish layer) --- */
@media (prefers-reduced-motion: reduce) {
.screen.active, .bo-main, .side-list .side-item, .detail-photo.has-photo, .doc-saved,
.cm-leg-blink {
animation: none;
}
.lp-card:hover, .hr-row:hover { transform: none; }
/* EXPAND is deliberately NOT in this list. It was, for one deploy, and on a
machine that asks for reduced motion - which the office runs on - the
panel went back to jumping, which is the thing it was built to stop
doing. The travel is not decoration here: it is what says the text came
from the space the chart just gave up. It is also a 0.34s resize of one
box, with nothing that flies across the screen, so it costs a
motion-sensitive reader far less than the jump costs everyone. */
}
/* ====================================================================== */
/* ===== UPWARD RESPONSIVE (v14): the app scales UP on big monitors ===== */
/* Every clamp() minimum equals today's value at <=1440px wide, so nothing */
/* changes on laptops; panels, type, cards and modals grow fluidly up to */
/* their caps around 2560-3440px. No CSS zoom: canvases stay razor-sharp. */
/* ====================================================================== */
:root {
/* Structural widths (fluid). --intro-side-w was dead (panels hardcoded */
/* 324px) - it is now the live single source for all three stage panels. */
--intro-side-w: clamp(324px, 13vw + 137px, 470px);
--bo-sb-w: clamp(290px, 8vw + 175px, 380px);
--news-row-h: clamp(76px, 2.5vw + 40px, 104px);
--stage-inset-x: clamp(22px, 1.5vw, 40px);
--stage-inset-t: clamp(14px, 1vw, 24px);
}
/* ---------- Dashboard: the three glass panels over the globe ---------- */
.intro-side {
width: var(--intro-side-w);
top: var(--stage-inset-t);
left: var(--stage-inset-x);
bottom: var(--stage-inset-x);
}
.right-stack {
width: var(--intro-side-w);
top: var(--stage-inset-t);
right: var(--stage-inset-x);
bottom: var(--stage-inset-x);
}
.detail-panel { width: var(--intro-side-w); }
.side-title { font-size: 2rem; }
.side-sub { font-size: 0.8667rem; }
.seg { font-size: 0.7333rem; }
.seg-count { font-size: 1.2rem; }
.fchip { font-size: 0.7333rem; }
.side-item { padding: clamp(12px, 0.45vw + 5.5px, 17px) clamp(12px, 0.36vw + 6.8px, 16px); }
.side-item-name { font-size: 0.9333rem; }
.side-item-loc { font-size: 0.7333rem; }
.side-item-tag { font-size: 0.6667rem; }
/* News: the row height and the 3-rows-visible cap derive from ONE var so */
/* the invariant survives scaling (they were hand-coupled px before). */
.news-item { height: var(--news-row-h); }
.news-list { max-height: calc(0.4rem + 3 * var(--news-row-h)); }
.news-text { font-size: 0.8667rem; }
.news-tag, .news-source { font-size: 0.6rem; }
.news-time { font-size: 0.6667rem; width: clamp(38px, 0.9vw + 25px, 48px); }
/* Allocation donut: wrapper scales, the inner SVG viewBox scales its text */
/* for free (do not clamp .pie-center-*). */
.pie-svg-wrap { width: clamp(130px, 7.1vw + 28px, 210px); height: clamp(130px, 7.1vw + 28px, 210px); }
.pie-label { font-size: 0.7333rem; }
.pie-val { font-size: 0.8rem; }
/* AUM centerpiece: the most glanced-at number on the dashboard. */
.aum-value { font-size: 1.2rem; }
.aum-label { font-size: 0.6667rem; }
.aum-dropdown { min-width: clamp(240px, 8vw + 125px, 330px); }
/* Detail panel internals. */
.detail-photo { height: clamp(138px, 7.3vw + 33px, 220px); }
.detail-title { font-size: 1.6rem; }
.detail-desc { font-size: 0.8667rem; }
.detail-tag { font-size: 0.6667rem; }
.person-name { font-size: 0.8667rem; }
/* ---------- Office: shell, sidebar, boards, cards ---------- */
.bo-shell { grid-template-columns: var(--bo-sb-w) 1fr; }
.bo-sec-name { font-size: 0.8rem; }
.bo-tool-name { font-size: 0.8667rem; }
.bo-tool-title { font-size: 2rem; }
.bo-main { padding: clamp(16px, 2.6vh, 34px) clamp(18px, 2.4vw, 48px); }
/* Kanban: columns widen (the "schede" finally fill the board), cards and */
/* their type grow with them. */
.lp-board { gap: clamp(12px, 0.7vw + 2px, 20px); }
.lp-col { max-width: clamp(260px, 14.3vw + 54px, 420px); }
.lp-col-name { font-size: 0.7333rem; }
.lp-card { padding: clamp(9px, 0.36vw + 3.8px, 13px) clamp(10px, 0.45vw + 3.5px, 15px); gap: clamp(9px, 0.27vw + 5.1px, 12px); }
.lp-card-name { font-size: 0.8667rem; }
.crm-card-sub { font-size: 0.6667rem; }
/* Detail rail (LP / CRM / Sheet share this grid): cap raised 300 -> 470. */
.lp-layout { grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 470px); gap: clamp(16px, 1vw, 24px); }
.lp-detail, .lp-detail-empty { padding: clamp(16px, 0.7vw + 6px, 24px); }
.lp-d-name { font-size: 1.4667rem; }
.crm-val, .crm-link { font-size: 0.9333rem; }
.crm-notes-view { font-size: 0.8667rem; }
/* CRM funnel strip + KPIs. */
.crm-funnel-box { padding: clamp(7px, 0.45vw + 0.5px, 12px) clamp(14px, 0.7vw + 4px, 22px); }
.crm-funnel-k { font-size: 0.5667rem; }
.crm-funnel-v { font-size: 1.2667rem; }
.crm-kpi-v { font-size: 1.6rem; }
/* Sheets (HR / outreach / opportunities). */
.hr-row-name { font-size: 0.9333rem; }
.hr-rank { font-size: 1.2rem; }
/* Masterfile: wider page + larger type on big monitors (line length ~75ch). */
.bo-doc .doc-page { max-width: clamp(720px, 23vw + 390px, 980px); }
.doc-title { font-size: 2.6667rem; }
.bo-doc .doc-body { font-size: 1rem; }
.doc-callout { font-size: 0.9667rem; }
/* Startup page: fields column + Data Room fill the screen. */
.startup-cols { grid-template-columns: minmax(0, clamp(360px, 14.3vw + 154px, 520px)) minmax(0, 1fr); }
.startup-vault { min-height: clamp(420px, 52vh, 820px); }
.startup-name { font-size: 1.3333rem; }
/* Reporting: rail + tools modal grow. */
.rep-layout { grid-template-columns: minmax(0, 1fr) clamp(260px, 12.5vw + 80px, 400px); }
.rep-tool-modal { width: min(clamp(820px, 34vw + 330px, 1200px), 96vw); height: min(80vh, 64rem); }
.rep-folder-name, .rep-file-name { font-size: 0.8667rem; }
/* Marketing: the mosaic grows with the monitor (hero type + picture panels). */
.mkt-hero-title { font-size: clamp(46px, 1.9vw + 19px, 76px); }
.mkt-wide-right { width: clamp(212px, 8.4vw + 91px, 320px); }
.mkt-wide-title { font-size: clamp(26px, 0.9vw + 13px, 40px); }
/* Sankey modal. */
.crm-sankey-modal { width: min(clamp(660px, 27vw + 271px, 960px), 94vw); }
/* Login gate: the branded card scales with the monitor too. */
.login-card { max-width: clamp(384px, 7.7vw + 273px, 470px); }
.login-title { font-size: 1.5333rem; }
.login-sub { font-size: 0.9rem; }
/* ---------- Pipeline board filter (the "triangle" tools cluster) ---------- */
/* Info + pencil on top, filter centered below; popover with stage / */
/* geography / vertical chip groups. */
.crm-tools { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; }
.crm-tools-top { display: flex; align-items: center; gap: 0.2667rem; }
.crm-tools .crm-edit-toggle { position: static; margin-left: 0; }
/* BoardFilter wrapper: anchors the popover wherever the filter lives
(funnel tools, KPI row, LP head, sheet detail toolbar). */
.crm-filter-wrap { position: relative; display: flex; justify-content: center; }
/* KPI strip (VC Partners) shares the funnel row so the filter sits beside it. */
.crm-funnel-row .crm-kpis { flex: 1; margin-bottom: 0; }
/* LP's Relations head: search + filter + forecast toggle side by side. */
.lp-head-tools { display: flex; align-items: center; gap: 0.4667rem; }
/* ---- BoardSearch: the find box that sits beside the board filter. -------
One hairline box, no fill, no radius - the same grammar as every other
control in this toolbar. The accent is the border and the count, both at
1px/Micro, because on a black canvas that is already loud enough.
Width is a clamp so it grows with the monitor like the rest of the app;
a fixed px width here would look right on the laptop and wrong at 2560. */
.bo-search {
display: inline-flex; align-items: center; gap: 0.4rem;
height: 2rem; padding: 0 0.4rem 0 0.5333rem;
border: 1px solid var(--line-2); background: transparent;
flex-shrink: 0;
transition: border-color var(--tr-fast);
}
.bo-search:focus-within, .bo-search.on { border-color: var(--cyan); }
.bo-search-ic { color: var(--text-mute); flex-shrink: 0; }
.bo-search:focus-within .bo-search-ic, .bo-search.on .bo-search-ic { color: var(--cyan); }
.bo-search-in {
width: clamp(150px, 11vw, 240px);
background: transparent; border: 0; outline: none;
color: var(--text);
font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
letter-spacing: 0.01em;
padding: 0;
}
.bo-search-in::placeholder { color: var(--text-mute); }
/* The UA search widget: kill its own clear cross, we ship a labelled one. */
.bo-search-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* The narrowed board says so in TEXT, not only by a border turning cyan. */
.bo-search-n {
font-family: var(--mono); font-size: 0.6667rem; font-weight: 700;
letter-spacing: 0.06em; color: var(--cyan);
font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}
.bo-search-x {
background: transparent; border: 0; padding: 0;
width: 1.2rem; height: 1.2rem; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-mute); font-size: 1rem; line-height: 1; cursor: pointer;
transition: color var(--tr-fast);
}
.bo-search-x:hover, .bo-search-x:focus-visible { color: var(--magenta); }
.crm-filter-btn {
position: relative;
background: transparent; border: 0;
color: var(--text-mute);
width: 2rem; height: 1.6rem;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: color var(--tr-fast);
}
.crm-filter-btn:hover, .crm-filter-btn.active { color: var(--cyan); }
.crm-filter-dot {
position: absolute; top: 1px; right: 0.3333rem;
width: 0.4rem; height: 0.4rem;
background: var(--cyan);
box-shadow: 0 0 0.4rem var(--cyan);
}
.crm-filter-pop {
position: absolute; top: calc(100% + 0.6667rem); right: 0;
z-index: var(--z-dropdown);
width: clamp(300px, 18vw, 380px);
background: var(--bg-elev);
border: 1px solid var(--line-2);
border-top: 0.1333rem solid var(--cyan);
box-shadow: 0 1.2rem 3.3333rem rgba(0, 0, 0, 0.6);
padding: 0.9333rem;
display: flex; flex-direction: column; gap: 0.8rem;
animation: yvToolIn 0.18s var(--ease) both;
}
.crm-fp-head { display: flex; align-items: center; justify-content: space-between; }
.crm-fp-title { font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.16em; color: var(--text-mute); }
.crm-fp-clear { background: transparent; border: 0; color: var(--magenta); font-family: var(--mono); font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 0; }
.crm-fp-clear:hover { text-decoration: underline; }
.crm-fp-group { display: flex; flex-direction: column; gap: 0.4rem; }
.crm-fp-label { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; color: var(--text-mute); }
.crm-fp-chips { display: flex; flex-wrap: wrap; gap: 0.3333rem; }
.crm-fp-chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: transparent;
border: 1px solid var(--line-2);
color: var(--text-mute);
font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em;
padding: 0.2667rem 0.6rem;
cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.crm-fp-chip:hover { color: var(--text); border-color: var(--text-dim); }
.crm-fp-chip.active { color: var(--cyan); border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.08); }
.crm-fp-chip .fp-dot { width: 0.4667rem; height: 0.4667rem; flex-shrink: 0; }
.crm-fp-chip .fp-n { color: var(--text-mute); font-size: 0.6333rem; }
.crm-fp-chip.active .fp-n { color: inherit; }
/* Forecast chart wrapper (the SVG regenerates at a responsive logical width). */
.lp-fcwrap { width: 100%; min-width: 0; }
/* ===== Context-card .md inline editor (v17): pencil on the card's file ===== */
.uc-file-edit {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0;
color: var(--text-mute);
width: 1.4667rem; height: 1.4667rem;
cursor: pointer; padding: 0; flex-shrink: 0;
transition: color var(--tr-fast);
}
.uc-file-edit:hover { color: var(--cyan); }
.uc-md-loading { padding: 2.6667rem; text-align: center; color: var(--text-mute); letter-spacing: 0.18em; }
.uc-md-foot {
display: flex; align-items: center; gap: 0.8rem;
border-top: 1px solid var(--line);
padding: 0.6667rem 0.9333rem;
flex-shrink: 0;
}
.uc-md-info {
font-family: var(--mono); font-size: 0.7333rem; letter-spacing: 0.06em;
color: var(--text-mute);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uc-md-save {
margin-left: auto;
background: var(--cyan); border: 0;
color: #000;
font-family: var(--sans); font-weight: 700; font-size: 0.8333rem; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.4667rem 1.4667rem;
cursor: pointer; flex-shrink: 0;
transition: opacity var(--tr-fast), background var(--tr-fast);
}
.uc-md-save:disabled { background: var(--bg-hover); color: var(--text-mute); cursor: default; }
.uc-md-save:not(:disabled):hover { opacity: 0.85; }
/* "Signal Factories" settings-only tab (Potential opportunities): looks like
every other tab; a small star icon marks it as the cross-university one. */
.hr-tab-sig { display: inline-flex; align-items: center; gap: 0.4rem; }
.hr-tab-sig svg { flex-shrink: 0; }
/* ===== Branded context cards (v23): "special edition" skin ===== */
/* A card with a `brand` field renders like a FIFA special card: its own
logo badge (white patch), brand-coloured top bar / border / glow / title.
Standard cards are untouched. --uc-brand is set inline per card. */
.uc-card-branded {
border-color: color-mix(in srgb, var(--uc-brand) 55%, var(--line));
border-top: 3px solid var(--uc-brand);
background:
linear-gradient(color-mix(in srgb, var(--uc-brand) 9%, transparent),
color-mix(in srgb, var(--uc-brand) 9%, transparent)),
var(--bg-card);
transition: border-color var(--tr-base);
}
.uc-brand { display: flex; align-items: center; gap: 0.6667rem; }
.uc-brand-badge {
width: 2.6667rem; height: 2.6667rem; flex-shrink: 0;
background: #FFFFFF;
display: inline-flex; align-items: center; justify-content: center;
padding: 0.2rem;
}
.uc-brand-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.uc-brand-name {
font-family: var(--mono);
font-size: 0.6667rem; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--uc-brand);
}
.uc-card-branded .uc-title { color: var(--uc-brand); font-weight: 700; }
.uc-card-branded .uc-file-ic { background: var(--uc-brand); color: #000; border-color: var(--uc-brand); }
/* ===== .md editor v18: bigger surface, Split live preview, toolbar ===== */
.ucmd-modal {
width: min(clamp(880px, 40vw + 420px, 1460px), 96vw);
height: min(88vh, 69.3333rem);
}
.ucmd-bar {
display: flex; align-items: center; gap: 0.1333rem;
padding: 0.3333rem 0.6667rem;
border-bottom: 1px solid var(--line);
flex-shrink: 0;
}
.ucmd-b {
min-width: 1.7333rem; height: 1.6rem;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent;
color: var(--text-mute);
font-family: var(--mono); font-size: 0.7333rem; font-weight: 600;
padding: 0 0.3333rem;
cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.ucmd-b:hover { color: var(--cyan); border-color: var(--line-2); background: rgba(0, 0, 0, 0.3); }
.ucmd-sep { width: 1px; height: 1.0667rem; background: var(--line); margin: 0 0.4rem; flex-shrink: 0; }
.ucmd-hint { margin-left: auto; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.06em; color: var(--text-mute); }
/* Body: single pane (View / Edit) or two panes (Split = editor + live preview). */
.ucmd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ucmd-body.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ucmd-body .rep-tool-edit, .ucmd-body .rep-tool-md { height: 100%; min-height: 0; overflow-y: auto; }
.ucmd-body .rep-tool-edit { font-size: 0.9rem; line-height: 1.65; tab-size: 2; }
.ucmd-prev { border-left: 1px solid var(--line); }
@media (max-width: 1000px) {
.ucmd-body.split { grid-template-columns: minmax(0, 1fr); }
.ucmd-body.split .ucmd-prev { display: none; }
}
/* Dirty dot on the editing tabs + footer status. */
.rep-tool-tab.ucmd-dirty:not(.active)::after { content: " ●"; color: var(--orange); font-size: 0.5333rem; }
.ucmd-status { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-mute); white-space: nowrap; }
.ucmd-status-dirty { color: var(--orange); }
/* ====================================================================== */
/* ===== MARKETING > PR (v64): the two-axis board, one per university ===== */
/* Columns = pipeline -> published (WHEN). Rows = giornale / podcast / */
/* evento (WHAT). It replaced a media-directory spreadsheet plus a flat */
/* coverage table, which held the same outlet twice with nothing linking */
/* the two - so the sheet-grid rules that lived here are gone with it. */
/* */
/* A cell is not a list but a PILE: the front card whole, the ones behind */
/* offset RIGHT. Hovering fans it open using exactly the room the cell has */
/* - the step is computed HERE from the cell width and the card count */
/* (--pr-gap-open), so it can never overflow and never needs measuring in */
/* JS, at any column width. Clicking TURNS the pile (see PrBoard.tsx); */
/* double-clicking opens the card in place, over its own stack. */
/* */
/* The card is a PLAIN .lp-card - the same object as every other card in */
/* the back office, with the same dot, name, sub-line and hover lift. It */
/* had a glowing coloured spine carrying the outlet's initials; that read */
/* as an indicator light rather than as paper, and made a stack of three */
/* look like a rack of equipment. What a card needs to say from under */
/* another card is "there is one more here", and its own edge says that. */
/* So the only thing added below is POSITION: absolute, offset, stacked. */
/* ====================================================================== */
.mpr { overflow-y: auto; }
/* Section headers: prominent Terminal-style bars (accent block + title +
hairline rule). Shared with the Noise section (.prm-sec-grn). */
.prm-sec {
display: flex; align-items: center; gap: 0.6667rem;
font-family: var(--sans);
font-size: 0.8667rem;
font-weight: 800; letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text);
margin: 0.2667rem 0 0.6667rem;
}
.prm-sec::before {
content: "";
width: 0.2667rem; height: 1rem; flex-shrink: 0;
background: var(--cyan);
box-shadow: 0 0 0.5333rem var(--cyan);
}
.prm-sec::after {
content: "";
flex: 1; height: 1px;
background: var(--line);
}
.prm-sec-mag::before { background: var(--magenta); box-shadow: 0 0 0.5333rem var(--magenta); }
.prm-sec-grn::before { background: var(--green); box-shadow: 0 0 0.5333rem var(--green); }
/* --- The grid ------------------------------------------------------- */
.prb-wrap { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.prb {
display: grid;
/* The row gutter is as narrow as one word needs. It used to be 110px of
mostly empty space, and every pixel of it was width the piles did not
get - which is the whole budget the fan has to open in.
minmax(0, 1fr) twice, not 1fr: a grid track's automatic minimum is its
content, so a wide pile would push the two columns out of true and the
board would stop being two equal halves the moment one cell filled up. */
grid-template-columns: 4.6667rem minmax(0, 1fr) minmax(0, 1fr);
gap: 0.5333rem;
align-items: stretch;
min-width: 0;
}
.prb-colhead {
display: flex;
align-items: center;
gap: 0.5333rem;
padding: 0.6rem 0.7333rem;
border: 1px solid var(--line);
background: var(--bg-elev);
}
/* The row name, ruled in the row's colour - the same colour the dot on every
card of that row carries, so a card read out of context still says which
row it belongs to. */
.prb-rowlab {
display: flex;
align-items: center;
justify-content: flex-end;
text-align: right;
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-mute);
padding: 0 0.5333rem 0 0;
border-right: 0.1333rem solid var(--kind-color, var(--line));
}
/* --- A cell -------------------------------------------------------- */
.pr-cell {
position: relative;
display: flex;
flex-direction: column;
gap: 0.5333rem;
padding: 0.5333rem;
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.30);
min-width: 0;
transition: background .12s ease, border-color .12s ease;
}
.pr-cell.drag-over {
border-color: var(--kind-color, var(--cyan));
background: color-mix(in srgb, var(--kind-color, var(--cyan)) 9%, transparent);
}
/* A cell holding an open card stacks above its neighbours, so the editor
growing past the cell is drawn over the row below rather than under it. */
.pr-cell:has(.pr-card.open) { z-index: 5; }
/* --- The pile ------------------------------------------------------- */
/* The pile and the add square share a row, so the plus sits BESIDE the stack
the eye is already reading sideways - and the pipeline cells stop being
taller than the published ones, which is what a button underneath did. */
.pr-cell-row { display: flex; align-items: center; gap: 0.5333rem; min-width: 0; }
.pr-pile {
position: relative;
flex: 1 1 auto;
min-width: 0;
--pr-card-w: min(17.3333rem, 100%);
--pr-card-h: 5.7333rem;
/* At rest: a slice of the card behind, enough to count the stack. */
--pr-gap: 1.8rem;
/* Fanned: every pixel the cell has and not one more. Capped so the cards
always keep an overlap - a two-card pile in a wide cell would otherwise
separate completely and read as a list, which is the thing the pile
exists to not be. */
--pr-gap-open: min(
calc(var(--pr-card-w) - 1.2rem),
calc((100% - var(--pr-card-w)) / var(--n1))
);
height: var(--pr-card-h);
}
/* Everything below is POSITION. The look comes from .lp-card, which the card
also carries - one object, one appearance, everywhere in the back office. */
.pr-card {
position: absolute;
top: 0;
left: calc(var(--i) * var(--pr-gap));
width: var(--pr-card-w);
height: var(--pr-card-h);
z-index: calc(var(--n) - var(--i));
overflow: hidden;
cursor: pointer;
/* The shared .lp-card transition plus `left`, so the fan animates. */
transition: left .18s cubic-bezier(.2, .7, .3, 1), filter .18s ease,
border-color var(--tr-fast), background var(--tr-fast),
transform var(--tr-fast), box-shadow var(--tr-fast);
}
.pr-pile:hover .pr-card { left: calc(var(--i) * var(--pr-gap-open)); }
/* Only the front card drags, so only the front card offers the grab cursor. */
.pr-card.pr-front { cursor: grab; }
.pr-card.pr-front:active { cursor: grabbing; }
/* Depth: the cards behind are dimmer. Fanning lifts them most of the way, and
the one under the pointer all the way - a depth cue, not a disabled state.
No transform here: .lp-card:hover already lifts every card by 1px, and a
scale would either fight it or lose to it. */
.pr-card:not(.pr-front) { filter: brightness(0.82); }
.pr-pile:hover .pr-card:not(.pr-front) { filter: brightness(0.95); }
.pr-card:not(.pr-front):hover { filter: none; }
/* The right edge in the row's colour: the one thing a card says from under
another one. A hairline, not a lit bar. */
.pr-card,
/* Restated on :hover because the shared .lp-card:hover sets border-COLOR (all
four sides), which outranks the plain .pr-card rule and would grey the edge
out from under the pointer - exactly when you are looking at the stack. */
.pr-card:hover { border-right: 0.1333rem solid color-mix(in srgb, var(--accent) 55%, transparent); }
.pr-card-body { display: flex; flex-direction: column; gap: 0.1333rem; min-width: 0; }
.pr-date {
font-family: var(--mono);
font-size: 0.6667rem;
color: var(--text-mute);
white-space: nowrap;
}
.pr-date.empty { color: var(--text-mute); }
.pr-pile-empty {
display: flex;
align-items: center;
border: 1px dashed var(--line);
padding: 0 0.6667rem;
font-family: var(--mono);
font-size: 0.6667rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mute);
}
.pr-add {
flex: 0 0 auto;
width: 3.8667rem;
height: 3.8667rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 1px dashed var(--line-2);
color: var(--text-mute);
cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.pr-add:hover {
color: var(--kind-color, var(--cyan));
border-color: var(--kind-color, var(--cyan));
background: color-mix(in srgb, var(--kind-color, var(--cyan)) 10%, transparent);
}
/* --- The open card: the editor, in place, over its own pile ---------- */
.pr-card.open {
left: 0;
width: 100%;
height: auto;
overflow: visible;
z-index: 40;
cursor: default;
align-items: start;
border-color: var(--cyan);
background: var(--bg-elev);
filter: none;
}
/* Beats `.pr-pile:hover .pr-card` (0,2,0 vs 0,2,0, but this one is later) so
fanning the pile cannot slide the card you are typing in. */
.pr-pile:hover .pr-card.open { left: 0; }
.pr-card.open:hover { transform: none; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.55); }
.pr-editor {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.4667rem;
padding-top: 0.5333rem;
border-top: 1px solid var(--line);
cursor: default;
}
.pr-ed-row { display: flex; gap: 0.3333rem; flex-wrap: wrap; }
.pr-in {
width: 100%;
min-width: 0;
background: #0c0c0e;
border: 1px solid var(--line);
color: var(--text);
font-family: var(--sans);
font-size: 0.8rem;
padding: 0.3333rem 0.4rem;
outline: none;
}
.pr-in:focus { border-color: var(--cyan); }
.pr-in-outlet { flex: 1 1 9.3333rem; font-weight: 600; }
.pr-in-kind, .pr-in-stage { flex: 0 0 auto; width: auto; cursor: pointer; color-scheme: dark; }
.pr-in-date { color-scheme: dark; }
.pr-in-stage.st-in-corso { color: var(--orange); }
.pr-in-stage.st-pubblicato { color: var(--green); }
.pr-ed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.3333rem, 1fr)); gap: 0.4rem; }
.pr-fl { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.pr-notes { font-family: var(--sans); resize: vertical; }
.pr-ed-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.pr-visit {
margin-right: auto;
font-family: var(--mono);
font-size: 0.7333rem;
color: var(--cyan);
text-decoration: none;
}
.pr-visit:hover { text-decoration: underline; }
@media (max-width: 1100px) {
.prb { grid-template-columns: 3.7333rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; }
.prb-rowlab { font-size: 0.6rem; letter-spacing: 0.06em; padding-right: 0.3333rem; }
.pr-cell { padding: 0.4rem; }
.pr-pile { --pr-card-w: min(15.3333rem, 100%); }
}
/* =====================================================================
FoF Radar (owner-only screen, opened from the Dashboard top bar)
===================================================================== */
.intro-top-left {
display: inline-flex;
align-items: center;
gap: 0.9333rem;
justify-self: start;
}
/* Full-screen shell: same dotted war-room backdrop as the Office. */
.fof-screen {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background: var(--bg);
position: relative;
}
.fof-screen::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 0.08rem);
background-size: 1.4667rem 1.4667rem;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, rgba(0,0,0,0.35) 70%, transparent 95%);
}
.fof-screen > * { position: relative; z-index: 1; }
.fof-private-tag {
justify-self: end;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
border: 1px dashed var(--line-2);
padding: 0.2667rem 0.5333rem;
}
.fof-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.9333rem;
padding: 1.4667rem 1.8667rem 1.0667rem;
animation: yvFofIn 0.28s ease both;
}
@keyframes yvFofIn {
from { opacity: 0; transform: translateY(0.4rem); }
to { opacity: 1; transform: none; }
}
.fof-kpis { flex-shrink: 0; }
/* ------------------------------------------------------------ toolbar -- */
.fof-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5333rem;
flex-shrink: 0;
}
.fof-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3333rem; }
.fof-toolbar-sep { width: 1px; height: 1.2rem; background: var(--line-2); margin: 0 0.4rem; }
.fof-search {
flex: 1;
min-width: 11rem;
background: transparent;
border: 1px solid var(--line);
color: var(--text);
font-family: var(--mono);
font-size: 0.7333rem;
letter-spacing: 0.04em;
padding: 0.4rem 0.6667rem;
transition: border-color var(--tr-fast);
}
.fof-search::placeholder { color: var(--text-mute); }
.fof-search:focus { outline: none; border-color: var(--cyan); }
/* --------------------------------------------- body: cards + detail ---- */
.fof-body {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.0667rem;
}
.fof-body.has-detail { grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); }
/* Wheel-scrollable, scrollbar HIDDEN by request (scroll still works). */
.fof-scroll {
min-height: 0;
overflow-y: auto;
padding-bottom: 1.6rem;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge/IE */
}
.fof-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* ------------------------------------------------------- geo groups ---- */
.fof-geo-group { margin-bottom: 1.2rem; }
.fof-geo-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5333rem;
}
.fof-geo-name {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
}
.fof-geo-count { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); }
.fof-geo-rule { flex: 1; height: 1px; background: var(--line); }
/* ------------------------------------------------------------- cards --- */
.fof-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
gap: 0.6rem;
}
.fof-card {
display: flex;
flex-direction: column;
gap: 0.3333rem;
background: var(--bg-card);
border: 1px solid var(--line);
border-left: 2px solid var(--line-2);
padding: 0.7333rem 0.8rem 0.6rem;
cursor: pointer;
transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.fof-card:hover { border-color: var(--line-2); background: var(--bg-hover); transform: translateY(-1px); }
.fof-card.anchor { border-left-color: var(--magenta); }
.fof-card.anchor:hover { box-shadow: 0 0 0.8rem rgba(255, 26, 120, 0.12); }
.fof-card.selected { border-color: var(--cyan); border-left-color: var(--cyan); }
.fof-card-top { display: flex; align-items: baseline; gap: 0.5333rem; }
.fof-card-name {
margin: 0;
font-family: var(--serif);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.01em;
color: var(--text);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fof-anchor-badge {
flex-shrink: 0;
margin-left: auto;
font-family: var(--mono);
font-size: 0.5333rem;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--magenta);
border: 1px solid var(--magenta);
padding: 0.1333rem 0.3333rem;
}
.fof-card-city {
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fof-card-face {
margin: 0;
font-size: 0.7333rem;
line-height: 1.4;
color: var(--text-mute);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.05rem;
}
.fof-card-foot {
display: flex;
align-items: center;
gap: 0.5333rem;
margin-top: 0.2rem;
padding-top: 0.4rem;
border-top: 1px solid var(--line);
}
.fof-card-aum {
font-family: var(--mono);
font-size: 0.6667rem;
color: var(--text-mute);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fof-conf {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
flex-shrink: 0;
}
.fof-conf.high { color: var(--green); }
.fof-conf.medium { color: var(--orange); }
.fof-conf.low { color: var(--text-mute); }
.fof-card-status {
margin-left: auto;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 0.3333rem;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fof-card-status i { width: 0.3333rem; height: 0.3333rem; border-radius: 50%; display: inline-block; }
/* ------------------------------------------------------------ detail --- */
.fof-detail {
min-height: 0;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
position: relative;
animation: yvFofIn 0.2s ease both;
}
.fof-detail::-webkit-scrollbar { display: none; width: 0; }
.fof-detail-close {
position: absolute;
top: 0.6rem;
right: 0.6rem;
width: 1.6rem;
height: 1.6rem;
background: transparent;
border: 1px solid var(--line);
color: var(--text-mute);
font-size: 0.9333rem;
line-height: 1;
cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast);
}
.fof-detail-close:hover { color: var(--cyan); border-color: var(--cyan); }
.fof-detail-toprow {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.4rem;
}
.fof-status {
width: 100%;
background: var(--bg-card);
border: 1px solid var(--line);
color: var(--text);
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.3333rem 0.4rem;
cursor: pointer;
transition: border-color var(--tr-fast);
}
.fof-status:focus { outline: none; border-color: var(--cyan); }
.fof-status option { background: var(--bg); color: var(--text); }
.fof-detail-links { display: flex; gap: 0.4rem; }
.fof-detail-links a {
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-mute);
border: 1px solid var(--line);
padding: 0.2667rem 0.5333rem;
text-decoration: none;
transition: color var(--tr-fast), border-color var(--tr-fast);
}
.fof-detail-links a:hover { color: var(--cyan); border-color: var(--cyan); }
.fof-detail-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.fof-detail .lp-d-label { color: var(--cyan); }
.fof-detail .lp-d-notes { min-height: 3.4667rem; font-size: 0.8rem; }
.fof-detail .lp-d-type { font-size: 0.8rem; padding: 0.4rem 0.5333rem; }
.fof-del { align-self: flex-end; }
.fof-del:hover { color: var(--red); border-color: var(--red); }
.fof-empty {
padding: 3.2rem 1rem;
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5333rem;
align-items: center;
color: var(--text-mute);
border: 1px dashed var(--line);
}
.fof-empty p { margin: 0; font-size: 0.8rem; }
@media (max-width: 1000px) {
.fof-body.has-detail { grid-template-columns: minmax(0, 1fr); }
.fof-detail {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(24rem, 92vw);
z-index: 30;
background: rgba(10,10,12,0.97);
border-left: 1px solid var(--line-2);
box-shadow: -1rem 0 3rem rgba(0,0,0,0.6);
}
}
/* =====================================================================
Global undo/redo feedback pulse (Ctrl+Z / Ctrl+Y, see lib/state-context)
===================================================================== */
.yv-undo-pulse {
position: fixed;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
z-index: 200;
font-family: var(--mono);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cyan);
background: rgba(0,0,0,0.85);
border: 1px solid var(--cyan);
padding: 0.3333rem 0.8rem;
pointer-events: none;
animation: yvUndoPulse 1.1s ease both;
}
@keyframes yvUndoPulse {
0% { opacity: 0; transform: translateX(-50%) translateY(0.4rem); }
12% { opacity: 1; transform: translateX(-50%) translateY(0); }
75% { opacity: 1; }
100% { opacity: 0; }
}
/* ==================================================================== */
/* IL DATABASE (ex FoF Radar) - category rail + card tags */
/* ==================================================================== */
.db-shell {
flex: 1;
min-height: 0;
display: flex;
align-items: stretch;
}
.db-rail {
flex-shrink: 0;
width: 13.6rem;
min-height: 0;
overflow-y: auto;
border-right: 1px solid var(--line);
padding: 1rem 0.6667rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.2667rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.db-rail::-webkit-scrollbar { display: none; width: 0; }
.db-rail-head {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-mute);
margin: 0.8rem 0.4rem 0.2667rem;
}
.db-rail-group { display: flex; flex-direction: column; gap: 0.1333rem; }
.db-rail-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
width: 100%;
background: transparent;
border: 1px solid transparent;
color: var(--text-mid, var(--text));
font-family: var(--mono);
font-size: 0.6933rem;
letter-spacing: 0.03em;
text-align: left;
padding: 0.3333rem 0.4667rem;
cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
}
.db-rail-item span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.db-rail-item:hover { color: var(--text); border-color: var(--line-2); }
.db-rail-item.active {
color: var(--cyan);
border-color: var(--cyan);
background: rgba(34, 230, 230, 0.06);
}
.db-rail-all { margin-bottom: 0.2667rem; }
.db-rail-count {
flex-shrink: 0;
font-size: 0.6rem;
color: var(--text-mute);
border: 1px solid var(--line-2);
padding: 0 0.2667rem;
min-width: 1.2rem;
text-align: center;
}
.db-rail-item.active .db-rail-count { color: var(--cyan); border-color: var(--cyan); }
.db-main { flex: 1; min-width: 0; }
.db-filter-sel { width: auto; flex-shrink: 0; }
.db-prio {
flex-shrink: 0;
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
border: 1px solid var(--line-2);
color: var(--text-mute);
padding: 0 0.3333rem;
line-height: 1.2rem;
}
.db-prio-a { color: var(--magenta); border-color: var(--magenta); }
.db-prio-b { color: var(--cyan); border-color: var(--cyan); }
.db-cat-tag, .db-sub-tag {
display: inline-block;
font-family: var(--mono);
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--line-2);
color: var(--text-mute);
padding: 0 0.2667rem;
margin-right: 0.3333rem;
}
.db-cat-tag { color: var(--cyan); border-color: rgba(34, 230, 230, 0.4); }
.fof-card.db-excluded { opacity: 0.45; }
/* --- IL DATABASE x LP's Relations -----------------------------------------
An entity that is ALSO an investor we are already talking to. Derived every
render from the LP board (lib/db-link.ts), never stored on the card.
Ochre is the one colour in this room that is not a pipeline status, which is
the point: it answers "have we already tapped them" without competing with
Mapped / Contacted / Committed for meaning. And it is never the only signal -
the card carries an LP badge, the list has its own LP board column, and the
detail panel spells it out in words. */
.fof-card.db-lp-linked {
border-left-color: var(--ochre);
background: linear-gradient(90deg, rgba(var(--ochre-rgb), 0.07), transparent 40%), var(--bg-card);
}
.fof-card.db-lp-linked:hover { border-color: rgba(var(--ochre-rgb), 0.5); }
/* Anchor keeps the magenta edge: it is the rarer flag and must stay legible. */
.fof-card.anchor.db-lp-linked { border-left-color: var(--magenta); }
.db-lp-badge {
display: inline-block;
font-family: var(--mono);
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ochre);
border: 1px solid rgba(var(--ochre-rgb), 0.5);
padding: 0 0.2667rem;
margin-right: 0.3333rem;
white-space: nowrap;
}
.db-lp-line {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 0 0.5333rem;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.04em;
color: var(--text-mute);
}
.db-table tr.db-lp-row td:first-child {
box-shadow: inset 0.2rem 0 0 var(--ochre);
color: var(--ochre);
}
.db-table td.db-lp-cell { color: var(--ochre); }
.fchip.db-lp-chip.active {
background: var(--ochre);
border-color: var(--ochre);
color: var(--bg);
}
.db-flag-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2667rem;
margin-bottom: 0.5333rem;
}
.db-chip-sm { font-size: 0.6rem; padding: 0.1333rem 0.4rem; }
.db-dedup {
margin-left: auto;
font-family: var(--mono);
font-size: 0.56rem;
color: var(--text-mute);
max-width: 9rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 960px) {
.db-shell { flex-direction: column; }
.db-rail {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
border-right: none;
border-bottom: 1px solid var(--line);
padding: 0.6rem 1rem;
}
.db-rail-group { flex-direction: row; flex-wrap: wrap; }
.db-rail-head { display: none; }
.db-rail-item { width: auto; }
}
/* ----------------------------------------- plain header (no KPI strip) -- */
.db-head-plain {
display: flex;
align-items: baseline;
gap: 0.6667rem;
min-width: 0;
flex-shrink: 0;
}
.db-tag {
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
white-space: nowrap;
}
.db-rule-plain {
font-size: 0.7333rem;
color: var(--text-mute);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ------------------------------------- Excel-like list view (plain) ----- */
.db-table-scroll { overflow-x: auto; overscroll-behavior: contain; }
.db-table-scroll:focus { outline: none; }
.db-table {
border-collapse: separate;
border-spacing: 0;
width: max-content;
min-width: 100%;
font-family: var(--mono);
font-size: 0.6667rem;
line-height: 1.4;
}
.db-table th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg);
color: var(--text-mute);
font-weight: 600;
font-size: 0.6rem;
letter-spacing: 0.02em;
text-align: left;
padding: 0.2667rem 0.5333rem;
border-bottom: 1px solid var(--line-2);
white-space: nowrap;
}
.db-table td {
background: var(--bg);
color: var(--text);
border-bottom: 1px solid var(--line);
padding: 0.2rem 0.5333rem;
max-width: 15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: cell;
user-select: none;
}
.db-table th:first-child, .db-table td:first-child {
position: sticky;
left: 0;
}
.db-table th:first-child { z-index: 3; }
.db-table td:first-child { z-index: 1; font-weight: 600; }
.db-table td.sel { background: #14262B; }
.db-table td.active {
background: #17323A;
outline: 1px solid #2E6E75;
outline-offset: -1px;
}
.db-statusbar {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
border-top: 1px solid var(--line);
padding: 0.2667rem 0.1333rem 0;
font-family: var(--mono);
font-size: 0.6rem;
color: var(--text-mute);
}
/* --------------------------------- "+ entity" pick-or-create combobox --- */
.db-add { position: relative; flex-shrink: 0; }
.db-add-input { flex: none; min-width: 12rem; }
.db-add-pop {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 100%;
width: max-content;
max-width: 24rem;
z-index: 50;
background: #15151A;
border: 1px solid var(--line-2);
padding: 4px;
max-height: 240px;
overflow-y: auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.db-add-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.3333rem 0.5333rem;
font-family: var(--mono);
font-size: 0.6667rem;
color: var(--text);
cursor: pointer;
white-space: nowrap;
}
.db-add-row.hi { background: rgba(34, 230, 230, 0.12); }
.db-add-row.create { color: var(--cyan); border-top: 1px solid var(--line); margin-top: 2px; }
.db-add-row.off { color: var(--text-dim); cursor: default; }
.db-add-cat { color: var(--text-mute); }
/* --- Signal-factory rows on a university tab -------------------------------
A row whose `source` is a signal factory (Y Combinator, a16z Speedrun) is
filed under the university its founder came from, next to that campus's own
deals. Without an accent "Harvard via YC" and plain "Harvard" look identical.
Same idiom as .uc-card-branded: --sig-brand is set inline per row from
SIGNAL_FACTORY_BRAND (lib/config.ts), so a new factory needs no CSS.
Placed after the shared .hr-row:hover rule above, which it must override. */
.hr-row-sig {
border-color: color-mix(in srgb, var(--sig-brand) 55%, var(--line));
box-shadow: inset 0.2rem 0 0 0 var(--sig-brand);
background:
linear-gradient(color-mix(in srgb, var(--sig-brand) 9%, transparent),
color-mix(in srgb, var(--sig-brand) 9%, transparent)),
var(--bg-card);
}
.hr-row-sig:hover {
background:
linear-gradient(color-mix(in srgb, var(--sig-brand) 14%, transparent),
color-mix(in srgb, var(--sig-brand) 14%, transparent)),
var(--bg-hover);
}
/* Selection must still read as selection: cyan border wins, the factory bar
stays so you never lose track of where the row came from. */
.hr-row-sig.selected { border-color: var(--cyan); }
.hr-row-sig-tag { color: var(--sig-brand); font-weight: 700; }
/* ====================================================================== */
/* ===================== ACCESSI (admin-only) ========================= */
/* ====================================================================== */
/* Who may open which section. One accent only - cyan means GRANTED - because
the sidebar already spends three colours on the batches, and a screen where
four things are coloured has nothing important on it. Everything else is
carried by type, space and hairlines. */
.yv-acc-intro {
margin: 0 0 1.6rem;
max-width: 68ch;
color: var(--text-mute);
}
/* The batch list is the only tall thing on this page, so it is the page's
scroll container: `.bo-main` is `overflow: hidden`, and without this the
sections below the fold were clipped with no way to reach them. Both axes:
the grid grows a column per joiner, and the sticky header/first column
below assume THIS is the scrollport - a nested overflow wrapper around the
table would break the vertical stick. */
.yv-acc-list {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.6rem;
flex: 1;
min-height: 0;
overflow: auto;
}
.yv-acc-list > .yv-acc-batch {
align-self: stretch;
}
.yv-acc-batch {
display: flex;
flex-direction: column;
}
.yv-acc-batch-head {
display: flex;
align-items: baseline;
gap: 0.5333rem;
padding-bottom: 0.5333rem;
border-bottom: 1px solid var(--line-2);
}
/* Micro */
.yv-acc-step {
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-mute);
}
/* Label */
.yv-acc-batch-name {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text);
}
/* ---- The matrix: rows are tools, columns are the teams then the people. ---
One decision per cell, the whole page readable without opening anything.
border-collapse stays `separate` because collapsed borders detach from
position:sticky cells and the header row would scroll away from its own
bottom rule. */
.yv-acc-matrix {
border-collapse: separate;
border-spacing: 0;
}
.yv-acc-matrix th,
.yv-acc-matrix td {
padding: 0;
border-bottom: 1px solid var(--line);
}
/* Sticky on both axes: the header row against vertical scroll, the tool
column against horizontal. Sticky cells need their own opaque background
or the grid shows through them mid-scroll. */
.yv-acc-matrix thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--bg);
border-bottom: 1px solid var(--line-2);
vertical-align: bottom;
padding: 0 0.2667rem 0.5333rem;
}
.yv-acc-m-corner {
left: 0;
z-index: 3;
text-align: left;
padding-left: 0;
}
/* Label */
.yv-acc-m-corner,
.yv-acc-m-ghead {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-mute);
}
.yv-acc-m-phead {
min-width: 4.2667rem;
}
/* Sentence case, weight for hierarchy: a person's name is a value, and
condensed capitals destroy the shapes a reader recognises it by. */
.yv-acc-m-pname {
display: block;
font-weight: 600;
color: var(--text);
margin-bottom: 0.2667rem;
}
/* Micro. The word carries the state; the border repeats it. */
.yv-acc-m-all {
min-height: 1.6rem;
padding: 0.1333rem 0.4rem;
background: none;
border: 1px solid var(--line-2);
color: var(--text-mute);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: border-color var(--tr-fast), color var(--tr-fast);
}
.yv-acc-m-all.is-on {
border-color: var(--cyan);
color: var(--text);
}
.yv-acc-m-all:hover,
.yv-acc-m-all:focus-visible {
border-color: var(--text-mute);
color: var(--text);
}
.yv-acc-m-sec th {
position: sticky;
left: 0;
z-index: 1;
background: var(--bg);
text-align: left;
padding: 1.0667rem 0.5333rem 0.5333rem 0;
border-bottom: 1px solid var(--line-2);
}
.yv-acc-m-sec .yv-acc-step {
margin-right: 0.5333rem;
}
/* Body size, sticky against horizontal scroll like the header row above. */
.yv-acc-m-tool {
position: sticky;
left: 0;
z-index: 1;
background: var(--bg);
font-weight: 500;
text-align: left;
color: var(--text);
padding: 0 1.0667rem 0 0;
min-width: 12rem;
white-space: nowrap;
}
.yv-acc-m-cell {
text-align: center;
}
/* One cell, one grant. The button fills the cell so the target is the full
32px row, and the state is a GLYPH - check, dash, empty - because about one
man in twelve cannot tell the cyan from the grey by hue. */
.yv-acc-m-sw {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 4.2667rem;
min-height: 2.1333rem;
background: none;
border: 0;
color: var(--text-dim);
font-size: 0.8rem;
font-weight: 700;
transition: background var(--tr-fast), color var(--tr-fast);
}
/* The empty square a denied cell shows: shape, not absence, so a denied cell
still reads as a decision rather than a hole in the grid. */
.yv-acc-m-sw.is-off span::before {
content: '';
display: block;
width: 0.4rem;
height: 0.4rem;
border: 1px solid var(--line-2);
}
.yv-acc-m-sw.is-on {
background: rgba(var(--cyan-rgb), 0.1);
color: var(--cyan);
}
.yv-acc-m-sw.is-mixed {
color: var(--text-mute);
}
.yv-acc-m-sw:hover {
background: var(--bg-hover);
}
.yv-acc-m-sw.is-on:hover {
background: rgba(var(--cyan-rgb), 0.18);
}
/* The stylesheet has exactly one global focus-visible rule; a new control
inherits no focus state, so these declare their own. */
.yv-acc-m-sw:focus-visible,
.yv-acc-m-all:focus-visible {
outline: 1px solid var(--cyan);
outline-offset: -1px;
}
/* The alwaysOpen row: not a switch anyone failed to unlock, a rule. */
.yv-acc-m-open {
padding: 0.2667rem 0.5333rem;
}
.yv-acc-m-open .mono-tag {
color: var(--text-mute);
margin-right: 0.5333rem;
}
.yv-acc-m-openwhy {
color: var(--text-mute);
font-size: 0.8rem;
letter-spacing: 0.005em;
}
.yv-acc-note {
margin: 0;
padding: 0.5333rem 0;
max-width: 68ch;
color: var(--text-mute);
}
.yv-acc-row {
display: flex;
align-items: center;
gap: 0.5333rem;
min-height: 2.1333rem;
padding: 0.2667rem 0;
}
/* Sentence case, set in the markup. Never uppercase a person's name. */
.yv-acc-who {
flex: 1 1 auto;
min-width: 0;
color: var(--text);
}
.yv-acc-why {
color: var(--text-mute);
flex: 0 0 auto;
}
/* --- Accessi: the people list (addresses, not roster rows) --- */
/* The address beside a resolved name. Muted and small: the name is what a
reader scans, the address is what the machine matches on. */
.yv-acc-mail {
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--text-mute);
flex: 0 1 auto;
min-width: 0;
}
.yv-acc-team {
flex: 0 0 auto;
min-height: 1.6rem;
padding: 0.2667rem 0.5333rem;
background: var(--bg-hover);
border: 1px solid var(--line-2);
color: var(--text);
font-size: 0.8rem;
letter-spacing: 0.04em;
}
.yv-acc-input {
flex: 1 1 auto;
min-width: 0;
min-height: 1.6rem;
padding: 0.2667rem 0.5333rem;
background: var(--bg-hover);
border: 1px solid var(--line-2);
color: var(--text);
transition: border-color var(--tr-fast);
}
.yv-acc-input::placeholder { color: var(--text-dim); }
.yv-acc-input:focus { border-color: var(--cyan); }
.yv-acc-drop {
flex: 0 0 auto;
min-height: 1.6rem;
padding: 0.2667rem 0.5333rem;
background: none;
border: 1px solid var(--line-2);
color: var(--text-mute);
font-size: 0.6667rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: border-color var(--tr-fast), color var(--tr-fast);
}
.yv-acc-drop:hover:not(:disabled) { border-color: var(--text-mute); color: var(--text); }
/* Disabled, not read-only: there is genuinely nothing to add yet, and the
cursor says so as well as the dimming. */
.yv-acc-drop:disabled { opacity: 0.4; cursor: not-allowed; }
/* ==========================================================================
TASKS - the admin notebook, one page per team member (components/office/
Tasks.tsx). Dense and quiet on purpose: it is read far more often than it
is written, and the one thing that must carry across the room is which row
is late. Status is a WORD everywhere; the colour is the second signal.
========================================================================== */
.yv-tk-intro { margin: 0 0 1.3333rem; max-width: 68ch; color: var(--text-mute); }
/* Roster on the left, the selected notebook on the right. The split is the
page's height, and each side scrolls on its own: .bo-main is
overflow:hidden, so anything past the fold would otherwise be unreachable -
and a roster that scrolled away with a long notebook would make switching
person a scroll-up-first gesture. */
.yv-tk-split { display: grid; grid-template-columns: 13.3333rem 1fr; gap: 1.6rem; flex: 1; min-height: 0; }
.yv-tk-roster { display: flex; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--line); padding-right: 0.5333rem; }
.yv-tk-person {
display: flex; align-items: center; gap: 0.5333rem; width: 100%; text-align: left;
background: none; border: 0; border-left: 2px solid transparent; border-radius: 0;
cursor: pointer; padding: 0.3333rem 0.4rem;
transition: background var(--tr-fast), border-color var(--tr-fast);
}
.yv-tk-person:hover { background: rgba(245, 246, 248, 0.03); }
/* Selected: a cyan edge AND a brighter name, so the position of the switch is
not carried by colour alone. */
.yv-tk-person.on { background: rgba(34, 230, 230, 0.06); border-left-color: var(--cyan); }
.yv-tk-face { width: 1.4667rem; height: 1.4667rem; flex-shrink: 0; object-fit: cover; border: 1px solid var(--line-2); }
.yv-tk-person-name { flex: 1; font-size: 0.8667rem; color: var(--text-mute); }
.yv-tk-person.on .yv-tk-person-name { color: var(--text); font-weight: 600; }
.yv-tk-person-n {
font-family: var(--mono); font-size: 0.6rem; color: var(--text-mute); flex-shrink: 0;
border: 1px solid var(--line-2); padding: 0 0.2667rem; min-width: 1.0667rem; text-align: center;
}
/* The notebook itself is the other scroll container. */
.yv-tk-body { display: flex; flex-direction: column; gap: 0.5333rem; min-height: 0; overflow-y: auto; }
.yv-tk-head { display: flex; align-items: baseline; gap: 0.8rem; padding-bottom: 0.2667rem; border-bottom: 1px solid var(--line-2); }
/* A person's name is a value, not a frame around one - never uppercased. */
.yv-tk-who { margin: 0; font-size: 1.0667rem; font-weight: 600; color: var(--text); }
.yv-tk-open { font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.yv-tk-silent { margin-left: auto; font-family: var(--mono); font-size: 0.6667rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
/* Two weeks of nothing is the failure this screen exists to catch, so it is
allowed to be loud - and it still says the words, not just the colour. */
.yv-tk-silent.loud { color: var(--orange); }
.yv-tk-add { display: flex; align-items: center; gap: 0.2667rem; margin: 0.5333rem 0; }
.yv-tk-add input, .yv-tk-add select, .yv-tk-ctl input, .yv-tk-ctl select,
.yv-tk-f input, .yv-tk-f select, .yv-tk-say input, .yv-tk-ent-in {
background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 0;
color: var(--text); font-family: var(--sans); font-size: 0.8rem;
padding: 0.2667rem 0.4rem; transition: border-color var(--tr-fast);
}
.yv-tk-add input:focus, .yv-tk-add select:focus, .yv-tk-f input:focus,
.yv-tk-say input:focus, .yv-tk-ent-in:focus { border-color: var(--cyan); outline: none; }
.yv-tk-add-text { flex: 1; }
.yv-tk-add button, .yv-tk-say button {
background: none; border: 1px solid var(--line-2); border-radius: 0; cursor: pointer;
color: var(--text-mute); font-family: var(--mono); font-size: 0.6667rem;
letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3333rem 0.6667rem;
transition: color var(--tr-fast), border-color var(--tr-fast);
}
.yv-tk-add button:hover:not(:disabled), .yv-tk-say button:hover:not(:disabled),
.yv-tk-add button:focus-visible, .yv-tk-say button:focus-visible { color: var(--cyan); border-color: var(--cyan); }
.yv-tk-add button:disabled, .yv-tk-say button:disabled { opacity: 0.4; cursor: not-allowed; }
.yv-tk-item { border-bottom: 1px solid var(--line); }
.yv-tk-row {
width: 100%; display: flex; align-items: baseline; gap: 0.6667rem; text-align: left;
background: none; border: 0; border-radius: 0; cursor: pointer;
padding: 0.4rem 0.2667rem; transition: background var(--tr-fast);
}
.yv-tk-row:hover, .yv-tk-row.open { background: rgba(245, 246, 248, 0.03); }
.yv-tk-row.done .yv-tk-text { color: var(--text-mute); text-decoration: line-through; }
.yv-tk-st { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; min-width: 4.6667rem; }
.yv-tk-st.todo { color: var(--text-mute); }
.yv-tk-st.blocked { color: var(--orange); }
.yv-tk-st.done { color: var(--green); }
/* The task text is the value on this row: not uppercased, not truncated to a
width that would make two different asks read the same. */
.yv-tk-text { flex: 1; font-size: 0.8667rem; color: var(--text); }
.yv-tk-pri { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; }
.yv-tk-pri.high { color: var(--magenta); }
.yv-tk-pri.low { color: var(--text-mute); }
.yv-tk-due { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); flex-shrink: 0; }
.yv-tk-due.late { color: var(--red); }
.yv-tk-cn {
font-family: var(--mono); font-size: 0.6rem; color: var(--text-mute); flex-shrink: 0;
border: 1px solid var(--line-2); padding: 0 0.2667rem; min-width: 1.0667rem; text-align: center;
}
.yv-tk-detail { display: flex; flex-direction: column; gap: 0.5333rem; padding: 0.5333rem 0.2667rem 0.8rem 4.6667rem; }
.yv-tk-ctl { display: flex; align-items: flex-end; gap: 0.5333rem; flex-wrap: wrap; }
.yv-tk-f { display: flex; flex-direction: column; gap: 0.1333rem; }
.yv-tk-f.wide input { width: 100%; }
.yv-tk-del {
margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 0;
color: var(--text-mute); font-family: var(--mono); font-size: 0.6667rem;
letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3333rem 0.6667rem; cursor: pointer;
transition: color var(--tr-fast), border-color var(--tr-fast);
}
.yv-tk-del:hover, .yv-tk-del:focus-visible { color: var(--red); border-color: var(--red); }
/* The entity link. When there is none, this renders an input and nothing
else - no dash and no "not linked", because a slot that looks unfinished
pushes the writer to invent a link, and a link that lies is worse than none. */
.yv-tk-ent { position: relative; display: flex; align-items: center; gap: 0.4rem; }
.yv-tk-ent-in { width: 16rem; }
.yv-tk-ent-name { font-size: 0.8rem; color: var(--cyan); }
.yv-tk-ent-x { background: none; border: 0; border-radius: 0; color: var(--text-mute); cursor: pointer; font-family: var(--mono); font-size: 0.8rem; line-height: 1; padding: 0 0.1333rem; transition: color var(--tr-fast); }
.yv-tk-ent-x:hover, .yv-tk-ent-x:focus-visible { color: var(--red); }
.yv-tk-ent-hits { position: absolute; top: 100%; left: 0; z-index: var(--z-dropdown); display: flex; flex-direction: column; min-width: 16rem; background: var(--bg-elev); border: 1px solid var(--line-2); }
.yv-tk-ent-hit { background: none; border: 0; border-radius: 0; text-align: left; cursor: pointer; color: var(--text); font-size: 0.8rem; padding: 0.2667rem 0.4rem; transition: background var(--tr-fast); }
.yv-tk-ent-hit:hover, .yv-tk-ent-hit:focus-visible { background: rgba(34, 230, 230, 0.08); }
.yv-tk-comments { display: flex; flex-direction: column; gap: 0.2667rem; }
.yv-tk-comment { display: flex; align-items: baseline; gap: 0.5333rem; font-size: 0.8rem; }
.yv-tk-c-by { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); flex-shrink: 0; min-width: 4rem; }
.yv-tk-c-at { font-family: var(--mono); font-size: 0.6rem; color: var(--text-mute); flex-shrink: 0; min-width: 3.3333rem; }
.yv-tk-c-text { color: var(--text); }
.yv-tk-say { display: flex; align-items: center; gap: 0.2667rem; margin-top: 0.2667rem; }
.yv-tk-say input { flex: 1; }
.yv-tk-empty { color: var(--text-mute); margin: 0.8rem 0; }
/* =====================================================================
Chief of Staff - the executive monitor (components/office/ChiefOfStaff).
A read-only page: health strip, six KPIs, the change feed and the
attention list. All type from the six steps; hairlines do the structure;
the ONE loud thing on the screen is the health level word. No new hex,
no px type outside the svg viewBox, nothing animated beyond the shared
tool entry. */
.yv-cos { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1.0667rem; padding-right: 0.2667rem; }
/* Health strip: level word (inverted-weight border chip), the headline
sentence, and the committed-over-time line on the right. */
.yv-cos-health { display: flex; align-items: center; gap: 1.6rem; border: 1px solid var(--line); padding: 0.8rem 1.0667rem; flex-shrink: 0; }
.yv-cos-level { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; padding: 0.2667rem 0.8rem; flex-shrink: 0; }
.yv-cos-head-body { display: flex; flex-direction: column; gap: 0.2667rem; min-width: 0; }
.yv-cos-period { font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.yv-cos-headline { margin: 0; color: var(--text); max-width: 68ch; }
.yv-cos-spark { margin-left: auto; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.2667rem; width: clamp(13.3333rem, 20vw, 21.3333rem); }
.yv-cos-spark svg { display: block; width: 100%; height: 2.9333rem; }
.yv-cos-spark-k { font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
/* KPI row: label frames (Micro), value speaks (Section step), sub explains. */
.yv-cos-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.6667rem, 1fr)); gap: 0.5333rem; flex-shrink: 0; }
.yv-cos-kpi { display: flex; flex-direction: column; gap: 0.2667rem; border: 1px solid var(--line); padding: 0.8rem 1.0667rem; min-width: 0; }
.yv-cos-kpi-l { font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.yv-cos-kpi-v { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.yv-cos-kpi-s { font-size: 0.8rem; color: var(--text-mute); }
/* The two panels: What changed | Needs attention. */
.yv-cos-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.0667rem; align-items: start; }
.yv-cos-panel { border: 1px solid var(--line); padding: 0.8rem 1.0667rem 1.0667rem; min-width: 0; }
.yv-cos-h3 { margin: 0 0 0.5333rem; padding-bottom: 0.5333rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.yv-cos-h4 { margin: 0.8rem 0 0.2667rem; font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.yv-cos-attn-group:first-of-type .yv-cos-h4 { margin-top: 0.2667rem; }
/* Rows. Names wrap rather than truncate - a name you cannot read is a
data-loss bug wearing a layout costume. */
.yv-cos-row { display: flex; align-items: baseline; gap: 0.5333rem; padding: 0.2667rem 0; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
.yv-cos-row:last-child { border-bottom: 0; }
.yv-cos-when { font-family: var(--mono); font-size: 0.6667rem; color: var(--text-mute); min-width: 3.2rem; flex-shrink: 0; }
.yv-cos-tag { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); min-width: 4.2667rem; flex-shrink: 0; }
.yv-cos-name { color: var(--text); flex: 1; min-width: 0; }
.yv-cos-move { color: var(--text-mute); flex-shrink: 0; }
.yv-cos-move b { font-weight: 600; }
.yv-cos-meta { margin-left: auto; color: var(--text-mute); flex-shrink: 0; }
.yv-cos-meta.loud { color: var(--red); font-weight: 600; }
.yv-cos-empty { color: var(--text-mute); margin: 0.5333rem 0 0; max-width: 52ch; }
.yv-cos-more { margin: 0.5333rem 0 0; font-size: 0.6667rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
@media (max-width: 1100px) {
.yv-cos-cols { grid-template-columns: 1fr; }
.yv-cos-health { flex-wrap: wrap; }
.yv-cos-spark { margin-left: 0; }
}