/* ── LIGHT THEME DESIGN SYSTEM ── */
:root {
--dom-deliver: #1a4f8a;
--dom-vital: #0d6e50;
--dom-evolve: #6224a0;
--dom-spark: #a05c00;
--dom-personal: #9e2050;
--dom-vault: #4a4a4a;
--p-critical-bg: #990000;
--p-veryhigh-bg: #CC0000;
--p-high-bg: #E06666;
--p-medium-bg: #EA9999;
--p-low-bg: #F4CCCC;
--p-dependent-bg: #99C6E5;
--s-open-bg: #3D85C6;
--s-inprog-bg: #46BDC6;
--s-inrev-bg: #EAD1DC;
--s-totest-bg: #E6B8AF;
--s-onhold-bg: #FFE599;
--s-delayed-bg: #FF6D01;
--s-cancelled-bg: #D9D9D9;
--s-upnext-bg: #0B5394;
--sans: "Inter", -apple-system, sans-serif;
--mono: "JetBrains Mono", monospace;
--ease: 0.15s cubic-bezier(0.4,0,0.2,1);
--ease2: 0.28s cubic-bezier(0.4,0,0.2,1);
--sidebar: 52px;
--sidebar-exp: 200px;
--panel: 460px;
--brand-soft: rgba(51,65,85,.10);
--bg: #eceff3;
--bg2: #f2f4f7;
--bg3: #e9edf2;
--bg4: #e1e7ee;
--bg5: #d7dfe8;
--border: rgba(51,65,85,.10);
--border2: rgba(51,65,85,.18);
--text1: #1f2937;
--text2: #334155;
--text3: #64748b;
--text4: #94a3b8;
--blue: #334155;
--green: #5f8f73;
--amber: #a98455;
--red: #a65f5f;
--violet: #6f6f8f;
--teal: #587f8a;
--orange: #9a7656;
--shadow: 0 1px 2px rgba(15,23,42,.04);
--shadow-md: 0 8px 22px rgba(15,23,42,.08);
--shadow-lg: 0 18px 48px rgba(15,23,42,.12);
--brand-dark: #1f2937;
--surface-0: #e9edf2;
--surface-1: #edf1f5;
--surface-2: #f3f5f8;
--surface-3: #f7f8fa;
--line: #cfd8e3;
--line-2: #d8e0e8;
--ink: #1f2937;
--muted: #536174;
--soft-blue: #dfe6ee;
--soft-green: #e2ebe5;
--soft-red: #f0e4e3;
--soft-amber: #eee7dc;
--soft-violet: #ebe8f0;
--soft-cyan: #e2eaed;
--brand-2: #475569;
--premium-bg: #e8edf3;
--premium-panel: #eef2f6;
--premium-card: #f3f6f9;
--premium-card-2: #f7f9fb;
--premium-line: #cbd6e2;
--premium-line-soft: #d8e0ea;
--premium-shadow: 0 1px 1px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.075),inset 0 1px 0 rgba(255,255,255,.60);
--premium-shadow-hover: 0 2px 4px rgba(15,23,42,.055),0 14px 32px rgba(15,23,42,.105),inset 0 1px 0 rgba(255,255,255,.65);
--mood-blue-1: #edf2f7;
--mood-blue-2: #e5ecf3;
--mood-slate-1: #f0f3f7;
--mood-slate-2: #e8ecf2;
--mood-red-1: #f5ecec;
--mood-red-2: #ede3e3;
--mood-green-1: #eef5f1;
--mood-green-2: #e5ede9;
--mood-amber-1: #f5f0e8;
--mood-amber-2: #ede8dc;
--mood-violet-1: #f0ecf7;
--mood-violet-2: #e8e3f0;
--mood-cyan-1: #ecf4f5;
--mood-cyan-2: #e3ecee;
--mood-ink: #334155;
--mood-shadow: 0 1px 0 rgba(255,255,255,.70) inset, 0 10px 24px rgba(15,23,42,.075), 0 2px 6px rgba(15,23,42,.045);
--mood-shadow-hover: 0 1px 0 rgba(255,255,255,.72) inset, 0 14px 32px rgba(15,23,42,.095), 0 3px 8px rgba(15,23,42,.05);
--brand: #334155;
--surface-depth: 0 1px 0 rgba(255,255,255,.82) inset,0 12px 28px rgba(31,41,55,.075),0 2px 8px rgba(31,41,55,.045);
--surface-depth-hover: 0 1px 0 rgba(255,255,255,.88) inset,0 18px 36px rgba(31,41,55,.10),0 4px 12px rgba(31,41,55,.06);
--mood-border: #cbd5df;
--accent-blue-bright: #4f7ef5;
--auth-accent: #c8dff0;
--auth-error-text: #a8c0d8;
--auth-focus: #7ab8d4;
--auth-label-text: #7a9ab8;
--auth-navy-1: #1a2535;
--auth-navy-2: #243347;
--auth-navy-3: #1e2b3c;
--briefing-goal-divider: #b9c5d2;
--chart-inreview: #c4789a;
--chart-onhold: #c4a000;
--chart-totest: #c07060;
--dom-deliver-tint: #dde8f5;
--dom-evolve-tint: #eaddf5;
--dom-evolve-tint-empty: #f3ecfa;
--dom-personal-tint: #f5dde8;
--dom-spark-tint: #fdf0d5;
--dom-spark-tint-empty: #fef7e8;
--dom-vault-tint: #e8e8e8;
--dom-vital-tint: #d6f0e8;
--dom-vital-tint-empty: #eaf6f0;
--generic-card-bg: #f0f4f8;
--generic-card-bg-alt: #f8f9fb;
--gray-333: #333333;
--gray-666: #666666;
--gray-888: #888888;
--gray-999: #999999;
--gray-aaa: #aaaaaa;
--gray-ddd: #dddddd;
--gray-eee: #eeeeee;
--habit-card-name-ink: #5b6a7e;
--habit-mood-1-bg: #eef3f9;
--habit-mood-1-border: #dfe7f1;
--habit-mood-1-ink: #7d8fa6;
--habit-mood-2-bg: #edf5ef;
--habit-mood-2-border: #dfece4;
--habit-mood-2-ink: #78967f;
--habit-mood-3-bg: #f5f0e7;
--habit-mood-3-border: #e9dfcf;
--habit-mood-3-ink: #b49a72;
--habit-mood-4-bg: #f2eff7;
--habit-mood-4-border: #e4deed;
--habit-mood-4-ink: #8b7aa0;
--habit-mood-5-bg: #edf5f6;
--habit-mood-5-border: #dae9ec;
--habit-mood-5-ink: #7894a1;
--heat-0: #ebedf0;
--heat-1: #9be9a8;
--heat-2: #40c463;
--heat-3: #30a14e;
--heat-4: #216e39;
--heat-future: #f6f8fa;
--illust-blue: #a8c8e8;
--profile-card-avatar-bg: #dbe3ea;
--profile-card-bg-1: #f2f5f8;
--profile-card-bg-2: #e3e9ef;
--profile-card-border: #d7dde4;
--status-at-risk: #b5681e;
--status-off-track: #b84040;
--status-on-track: #3a7d5a;
--tw-amber-100: #fef3c7;
--tw-amber-200: #fde68a;
--tw-amber-300: #fcd34d;
--tw-amber-400: #fbbf24;
--tw-amber-500: #f59e0b;
--tw-amber-600: #d97706;
--tw-amber-700: #b45309;
--tw-amber-800: #92400e;
--tw-blue-200: #bfdbfe;
--tw-blue-300: #93c5fd;
--tw-blue-400: #60a5fa;
--tw-blue-50: #eff6ff;
--tw-blue-500: #3b82f6;
--tw-blue-600: #2563eb;
--tw-blue-700: #1d4ed8;
--tw-cyan-500: #06b6d4;
--tw-cyan-600: #0891b2;
--tw-emerald-400: #34d399;
--tw-emerald-500: #10b981;
--tw-emerald-600: #059669;
--tw-gray-200: #e5e7eb;
--tw-green-400: #4ade80;
--tw-green-600: #16a34a;
--tw-green-700: #15803d;
--tw-indigo-500: #6366f1;
--tw-indigo-600: #4f46e5;
--tw-lime-500: #84cc16;
--tw-orange-400: #fb923c;
--tw-orange-50: #fff7ed;
--tw-orange-500: #f97316;
--tw-orange-600: #ea580c;
--tw-orange-900: #7c2d12;
--tw-pink-400: #f472b6;
--tw-pink-500: #ec4899;
--tw-pink-600: #db2777;
--tw-pink-700: #be185d;
--tw-purple-500: #a855f7;
--tw-purple-600: #9333ea;
--tw-red-300: #fca5a5;
--tw-red-400: #f87171;
--tw-red-500: #ef4444;
--tw-red-600: #dc2626;
--tw-rose-600: #e11d48;
--tw-slate-100: #f1f5f9;
--tw-slate-200: #e2e8f0;
--tw-slate-50: #f8fafc;
--tw-slate-800: #1e293b;
--tw-slate-900: #0f172a;
--tw-teal-500: #14b8a6;
--tw-violet-400: #a78bfa;
--tw-violet-500: #8b5cf6;
--tw-violet-600: #7c3aed;
--tw-yellow-100: #fef9c3;
--tw-yellow-200: #fef08a;
--tw-yellow-600: #ca8a04;
--white: #ffffff;
/* ── New button tokens (dark-theme prep) ── */
--btn-primary-bg: #1a2535;
--btn-primary-text: #ffffff;
--btn-primary-border: #1a2535;
--btn-primary-bg-hover: #243448;
--btn-primary-border-hover: #243448;
--btn-secondary-bg: #ffffff;
--btn-secondary-text: #334155;
--btn-secondary-border: rgba(51,65,85,.22);
--btn-secondary-bg-hover: #f8fafc;
--btn-danger-bg: #fef2f2;
--btn-danger-text: #b91c1c;
--btn-danger-border: rgba(220,38,38,.28);
--btn-danger-bg-hover: #fee2e2;
--btn-success-bg: #f0fdf4;
--btn-success-text: #15803d;
--btn-success-border: rgba(22,163,74,.26);
--btn-success-bg-hover: #dcfce7;
/* ── Shell tokens (sidebar/topbar/nitem/role colors) ── */
--sidebar-bg-1: #e1e7ee;
--sidebar-bg-2: #dbe3ec;
--shell-border-1: #d2dae4;
--shell-border-2: #ccd6e1;
--shell-border-3: #cdd6e1;
--topbar-bg: rgba(231,236,242,.96);
--nbadge-bg: #8a5555;
--nitem-hover-bg: #d9e1ea;
--nitem-active-bg: #dbe2ea;
--tbtn-bg: #e4e9ef;
--tbtn-border: #d1d9e3;
--tbtn-bg-hover: #dce3eb;
--tbtn-border-hover: #c5cfda;
--stoggle-color: #7b8797;
--role-manager-bg-1: #edf1f5;
--role-manager-bg-2: #e5ebf1;
--role-manager-border: #c8d1dc;
--role-member-bg-1: #f1f3f5;
--role-member-bg-2: #e8edf1;
--role-member-border: #d2d9e1;
--role-manager-accent: #53657a;
--role-member-accent: #8492a3;
--role-design-accent: #8d7aa8;
--role-ops-accent: #6d9492;
--role-manager-ring: rgba(51,65,85,.11);
--role-member-ring: rgba(132,146,163,.12);
--role-design-ring: rgba(141,122,168,.12);
--role-ops-ring: rgba(109,148,146,.12);
--sidebar-inset-highlight: rgba(255,255,255,.35);
--user-pill-shadow-1: rgba(255,255,255,.75);
--user-pill-shadow-2: rgba(51,65,85,.06);
/* ── Panel/card tokens (dark-theme prep) ── */
--kpi-card-bg-1: #eef2f6;
--kpi-card-bg-2: #e4e9ef;
--kpi-card-border: #d2dae4;
--panel-input-bg: #ffffff;
--panel-input-focus-bg: #f8fafc;
--panel-input-focus-border: #94a3b8;
--panel-input-focus-glow: rgba(100,116,139,.10);
--input-bg: #f3f5f7;
--input-border: #cfd7e2;
--input-color: #1f2937;
--panel-btn-primary-bg: #334155;
--panel-btn-primary-border: #334155;
--panel-btn-primary-bg-hover: #1f2937;
--panel-btn-secondary-bg: #f1f5f9;
--panel-btn-secondary-color: #334155;
--panel-btn-secondary-border: #cbd5e1;
--panel-btn-secondary-bg-hover: #e2e8f0;
--panel-btn-danger-color: #b42318;
--panel-btn-danger-border: #e4a6a1;
--panel-btn-danger-bg-hover: #fff1f0;
--panel-btn-danger-border-hover: #d92d20;
--panel-btn-danger-color-hover: #912018;
--panel-btn-ghost-bg: #f4f6f8;
--panel-btn-ghost-color: #475467;
--panel-btn-ghost-border: #d0d5dd;
--panel-btn-ghost-bg-hover: #e9edf2;
--panel-btn-ghost-color-hover: #27313f;
--panel-header-footer-bg: #f4f5f7;
--briefing-card-bg-1: #edf2f7;
--briefing-card-bg-2: #e4ebf2;
--briefing-card-bg-3: #dce6ee;
--briefing-card-color: #243041;
/* ── Panel/card real-winner tokens ── */
--panel-bg-real: #f2f4f7;
--panel-border-real: #d6dbe3;
--input-bg-real: #f7f8fa;
--input-border-real: #cfd5de;
--input-color-real: #27313f;
--panel-header-bg-real: #eceff3;
--card-bg-real-1: #f1f4f7;
--card-bg-real-2: #e7edf3;
/* ── Hierarchy & Collaborators section tokens ── */
--advsec-bg-1: #f8fafc;
--advsec-bg-2: #eef2f6;
--advsec-card-bg: #fff;
--advsec-card-border: #d7dde4;
--advsec-input-border: #cbd5df;
--advsec-chip-bg: #eef2f6;
--advsec-dp-mini-color: #475569;
/* ── Panel body / thread tokens ── */
--thread-feed-bg: #edf0f4;
--thread-feed-line: #d5dbe4;
--thread-item-border: #d8dde5;
/* ── Card shadow / h-task tokens ── */
--card-inset-highlight: rgba(255,255,255,.45);
--h-task-bg: #ffffff;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
img { outline:none; outline-width:0; border:none; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--text1); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; }
/* ── LAYOUT ── */
#app { display:flex; height:100vh; width:100vw; overflow:hidden; }
/* ── SIDEBAR ── */
#sidebar.exp { width:var(--sidebar-exp); }
.slogo-row { display:flex; align-items:center; gap:9px; padding:0 12px; margin-bottom:14px; }
.slogo-txt { display:none; font-size:14px; font-weight:900; color:var(--text1); white-space:nowrap; letter-spacing:-.02em; }
#sidebar.exp .slogo-txt { display:block; }
.nicon { font-size:15px; flex-shrink:0; width:18px; text-align:center; }
.nlabel { display:none; }
#sidebar.exp .nlabel { display:block; }
.nbadge { margin-left:auto; background:var(--red); color:var(--white); font-size:9px; font-weight:700; padding:1px 5px; border-radius:99px; display:none; }
#sidebar.exp .nbadge { display:block; }
.nbadge:empty { display:none !important; }
/* Muted variant (e.g. All Tasks in Explore) — high specificity so it wins
regardless of the older !important .nbadge color rule elsewhere in this file. */
#sidebar .nbadge.nbadge-muted { background:var(--bg3,#e2e8f0) !important; color:var(--text3,#64748b) !important; }
/* The active-item arrow (.nitem.on::after, right:8px) sits in the same
corner a right-aligned badge occupies (margin-left:auto). Without this,
a badge on the currently-active nav item (e.g. Action Center on load)
renders underneath/behind that arrow and is effectively invisible. */
.nitem.on .nbadge { margin-right:14px; }
.stoggle { margin-top:auto; display:flex; align-items:center; gap:9px; padding:7px 12px; cursor:pointer; color:var(--text4); font-size:15px; border-top:1px solid var(--border); transition:color var(--ease); }
.stoggle:hover { color:var(--text3); }
/* ── MAIN ── */
#main { flex:1; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
/* ── TOPBAR ── */
.tb-title { font-size:15px; font-weight:700; color:var(--text1); letter-spacing:-0.02em; white-space:nowrap; }
.tb-datequote { display:flex; align-items:center; gap:10px; flex:1; overflow:hidden; min-width:0; }
.tb-date { font-family:var(--mono); font-size:11px; color:var(--text3); white-space:nowrap; flex-shrink:0; }
.tb-qwrap { flex:1; overflow:hidden; display:flex; align-items:center; }
/* Marquee container scrolls continuously */
.tb-marquee {
display:inline-flex; align-items:center; gap:0;
white-space:nowrap;
animation:marquee 60s linear infinite;
will-change:transform;
}
.tb-marquee:hover { animation-play-state:paused; }
/* Each quote inside the marquee */
.tb-quote, .tb-quote-2 {
font-size:12px; color:#555; font-style:italic;
white-space:nowrap; display:inline-block;
padding-right:120px; /* gap between quotes */
}
@keyframes marquee {
0% { transform:translateX(0); }
100% { transform:translateX(-50%); }
}
.focus-pill { display:flex; align-items:center; gap:7px; background:#fffbeb; border:1px solid #fcd34d; border-radius:8px; padding:5px 11px; cursor:pointer; transition:all var(--ease); flex-shrink:0; max-width:260px; }
.focus-pill:hover { border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,119,6,0.1); }
.fp-lbl { font-size:9px; font-weight:800; color:var(--amber); text-transform:uppercase; letter-spacing:0.12em; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.fp-txt { font-size:12px; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.streak-pill { display:flex; align-items:center; gap:5px; background:#f0fdf4; border:1px solid #86efac; border-radius:8px; padding:5px 10px; flex-shrink:0; }
.streak-n { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--green); }
.streak-lbl { font-size:11px; color:#15803d; }
.tbtn {
width: 36px;
height: 36px;
border-radius: 8px;
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--ease);
flex-shrink: 0;
background: var(--tbtn-bg) !important;
border-color: var(--tbtn-border) !important;
color: var(--muted) !important;
}
.tbtn:hover {
background: var(--tbtn-bg-hover) !important;
color: var(--text1) !important;
border-color: var(--tbtn-border-hover) !important;
}
/* ── LAYERED PROGRESS TIMEBAR ── */
#timebar {
position:absolute; bottom:0; left:0; right:0; height:7px;
background:rgba(0,0,0,0.04); overflow:visible;
}
/* Zone bands — Active / Break / Sleep across 24h, symbolic colours */
#timebar-zones { position:absolute; inset:0; }
.tb-zone { position:absolute; top:0; height:100%; }
/* Active — confident blue, "focus / go" */
.tb-zone-active { background:linear-gradient(180deg, rgba(59,110,240,0.55), rgba(59,110,240,0.40)); }
/* Break — warm amber, "pause / breathe" */
.tb-zone-break { background:linear-gradient(180deg, rgba(245,158,11,0.45), rgba(245,158,11,0.30)); }
/* Sleep — deep indigo, "night / rest" */
.tb-zone-sleep { background:linear-gradient(180deg, rgba(79,70,229,0.40), rgba(49,46,129,0.30)); }
/* Budget trail — soft secondary under-layer (taken/estimated) */
#timebar-budget {
position:absolute; top:2px; left:0; height:2px;
background:rgba(22,163,74,0.35);
border-radius:0 2px 2px 0;
transition:width 0.8s ease;
}
/* Completion fill — the hero metric, races the horizon line.
Bright, semi-opaque emerald that reads clearly on top of the
vibrant zone bands below it. */
#timebar-fill {
position:absolute; top:0; left:0; height:100%;
background:linear-gradient(180deg, rgba(16,185,129,0.85), rgba(5,150,105,0.9));
border-right:1.5px solid rgba(255,255,255,0.7);
border-radius:0 1px 1px 0;
transition:width 0.8s ease;
z-index:2;
}
/* ── Horizon marker — 3D location pin, "you are here" in your day ──
Geometry: 12×12 teardrop rotated -45° puts its tip 8.5px below its
own center, so left:-6px / top:-14px lands the tip exactly on the
current-time x-position at the strip surface (verified arithmetically,
not visually). The ring uses --topbar-bg — the same cutout-ring
technique as .act-dot/avatars — so it reads as punched through the
bar on any theme. Pace states swap the three gradient stops via
custom properties instead of repainting rules. */
#timebar { --tb-pin:#3b6ef0; --tb-pin-hi:#8fb0ff; --tb-pin-lo:#1e3fae; }
#timebar.tb-state-ahead { --tb-pin:#10b981; --tb-pin-hi:#6ee7b7; --tb-pin-lo:#047857; }
#timebar.tb-state-behind { --tb-pin:#ef4444; --tb-pin-hi:#fca5a5; --tb-pin-lo:#991b1b; }
#timebar.tb-state-close { --tb-pin:#f59e0b; --tb-pin-hi:#fcd34d; --tb-pin-lo:#b45309; }
#timebar.tb-state-break { --tb-pin:#f59e0b; --tb-pin-hi:#fde68a; --tb-pin-lo:#b45309; }
#timebar.tb-state-rest { --tb-pin:#6366f1; --tb-pin-hi:#a5b4fc; --tb-pin-lo:#3730a3; }
#timebar-line {
position:absolute; top:0; width:0; height:0;
background:none; box-shadow:none;
transition:left 60s linear;
z-index:3;
}
/* Both pseudo-elements are masked to a true map-marker silhouette —
NO rotation, so the gloss/hole gradients stay exactly where placed
(the old rotated-teardrop build spun its layers off the head, which
is what produced the detached floating dot). */
#timebar-line::before,
#timebar-line::after {
content:''; position:absolute;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* Ring layer — a slightly larger copy in the topbar's own background,
punching the pin through the strip (cutout-ring technique), and
carrying the ground shadow so it hugs the pin's real silhouette. */
#timebar-line::before {
left:-9px; top:-23px; width:18px; height:23px;
background:var(--topbar-bg, #ffffff);
filter:drop-shadow(0 2px 2px rgba(15,23,42,0.35));
}
/* Pin body — full-colour glossy balloon: one broad specular sheen
sweeping the upper body (no punched hole, no hard sparkle), over a
saturated spherical gradient that deepens toward the tip. */
#timebar-line::after {
left:-8px; top:-22px; width:16px; height:21px;
background:
radial-gradient(ellipse 62% 48% at 32% 20%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 45%, rgba(255,255,255,0) 72%),
radial-gradient(140% 115% at 32% 14%, var(--tb-pin-hi) 0%, var(--tb-pin) 52%, var(--tb-pin-lo) 100%);
animation:tbPinBob 3s ease-in-out infinite;
}
@keyframes tbPinBob {
0%,100% { transform:translateY(0); }
50% { transform:translateY(-1.5px); }
}
/* Behind pace: the bob quickens — gentle urgency, no color shouting */
#timebar.tb-state-behind #timebar-line::after { animation-duration:1.4s; }
/* Sleep hours: even the pin rests — dimmed, still */
#timebar.tb-state-rest #timebar-line::after { animation:none; opacity:0.75; }
/* Hover: pin lifts and swells toward the tooltip it rewards */
#timebar:hover #timebar-line::after { animation:none; transform:translateY(-1.5px) scale(1.15); transform-origin:50% 100%; }
#timebar:hover #timebar-line::before { transform:scale(1.15); transform-origin:50% 100%; }
@media (prefers-reduced-motion: reduce) {
#timebar-line::after { animation:none !important; }
}
/* Tooltip */
#timebar:hover #timebar-tip { display:block; }
#timebar-tip {
display:none; position:absolute; top:12px; left:50%;
transform:translateX(-50%);
background:var(--bg1); border:1px solid var(--border2);
border-radius:8px; padding:6px 12px; white-space:nowrap;
font-size:11px; color:var(--text2); box-shadow:var(--shadow-md);
pointer-events:none; z-index:100000; line-height:1.4;
}
.tb-tip-pace { font-weight:700; }
.tb-tip-pace.tb-ahead { color:#16a34a; }
.tb-tip-pace.tb-behind { color:#dc2626; }
.tb-tip-pace.tb-close { color:#d97706; }
.tb-tip-pace.tb-rest, .tb-tip-pace.tb-break, .tb-tip-pace.tb-neutral { color:var(--text3); }
/* ── CONTENT ── */
#content { flex:1; overflow-y:auto; overflow-x:hidden; padding:22px 26px; scrollbar-width:thin; scrollbar-color:var(--bg4) transparent; }
#content::-webkit-scrollbar { width:5px; }
#content::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }
.page { display:none; animation:fadeUp 0.2s ease; }
.page.on { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
/* ── KPI CARDS — colored gradient, 3D elevation, white text ── */
/* KPI grids now use inline style grids for precise control */
.kpi-card.featured { grid-column:span 1; }
.kpi-card {
background:var(--kc-grad, linear-gradient(135deg,#334155,#1e2d3d));
border:none;
border-radius:18px;
padding:20px 18px;
display:flex; align-items:center; gap:14px;
transition:all 0.22s cubic-bezier(0.34,1.56,0.64,1);
box-shadow:
0 4px 6px rgba(0,0,0,0.12),
0 10px 20px rgba(0,0,0,0.15),
0 2px 4px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.15);
position:relative; overflow:hidden; cursor:default;
}
/* Gloss overlay for 3D feel */
.kpi-card::before {
content:'';
position:absolute; top:0; left:0; right:0; height:50%;
background:linear-gradient(180deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 100%);
pointer-events:none; border-radius:18px 18px 0 0;
}
/* Task Avatars */
.task-avatar{
width:24px;
height:24px;
border-radius:999px;
object-fit:cover;
border:1px solid #cbd5df;
}
.task-avatar-fallback{
width:24px;
height:24px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:700;
background:#e2e8f0;
color:#475569;
border:1px solid #cbd5df;
}
/* Bottom edge shadow for depth */
.kpi-card::after {
content:'';
position:absolute; bottom:0; left:0; right:0; height:3px;
background:rgba(0,0,0,0.15);
border-radius:0 0 18px 18px;
}
.kpi-card:hover {
transform:translateY(-5px) scale(1.02);
box-shadow:
0 8px 12px rgba(0,0,0,0.15),
0 20px 40px rgba(0,0,0,0.2),
0 4px 8px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.2);
}
.kpi-left { flex:1; min-width:0; }
.kpi-value {
font-family:'Bebas Neue', 'Inter', sans-serif;
font-size:52px; font-weight:400; color:#ffffff;
line-height:1; letter-spacing:0.02em;
text-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.kpi-card.featured .kpi-value { font-size:64px; }
.kpi-label {
font-size:10px; font-weight:700; color:rgba(255,255,255,0.75);
text-transform:uppercase; letter-spacing:0.1em; margin-top:4px;
}
.kpi-sub { font-size:10px; color:rgba(255,255,255,0.55); font-family:var(--mono); margin-top:2px; }
.kpi-ico {
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
background:none !important;
border:none !important;
box-shadow:none !important;
color:rgba(255,255,255,0.55);
padding:0;
}
.kpi-ico svg { width:52px !important; height:52px !important; stroke-width:1.2 !important; }
.kpi-card.featured .kpi-ico svg { width:64px !important; height:64px !important; }
/* Progress bar inside KPI card */
.kpi-progress-wrap {
margin-top:10px;
background:rgba(255,255,255,0.2);
border-radius:99px; height:5px; overflow:hidden;
width:100%;
}
.kpi-progress-bar {
height:100%; border-radius:99px;
background:rgba(255,255,255,0.85);
transition:width 0.8s cubic-bezier(0.4,0,0.2,1);
box-shadow:0 0 6px rgba(255,255,255,0.5);
}
/* Completion donut */
.kpi-donut-wrap {
display:flex; align-items:center; gap:14px; margin-top:8px;
}
.kpi-donut {
width:52px; height:52px; flex-shrink:0;
transform:rotate(-90deg);
}
.kpi-donut-bg { fill:none; stroke:rgba(255,255,255,0.2); stroke-width:5; }
.kpi-donut-fg { fill:none; stroke:rgba(255,255,255,0.9); stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset 0.8s cubic-bezier(0.4,0,0.2,1); }
.kpi-donut-label {
font-family:'Bebas Neue','Inter',sans-serif;
font-size:38px; font-weight:400; color:#fff;
line-height:1;
}
.kpi-donut-sub { font-size:10px; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }
/* Sparkline canvas */
.kpi-sparkline { width:100%; height:28px; margin-top:6px; opacity:0.75; }
.vel-pill { display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,0.2);color:#fff;margin-top:4px;font-family:var(--mono); }
/* ── SECTION HEADER ── */
.sec-hdr { display:flex; align-items:center; gap:9px; margin-bottom:9px; margin-top:4px; cursor:pointer; user-select:none; }
.sec-hdr:hover .sec-title { color:var(--text1); }
.sec-icon { font-size:17px; flex-shrink:0; }
.sec-title { font-size:13.5px; font-weight:700; color:var(--text2); letter-spacing:-0.01em; transition:color var(--ease); }
.sec-cnt { background:var(--bg3); border:1px solid var(--border); border-radius:99px; padding:1px 8px; font-size:10.5px; font-family:var(--mono); color:var(--text3); }
.sec-line { flex:1; height:1px; background:var(--border); }
.sec-chev { cursor:pointer; color:var(--text4); display:inline-flex; align-items:center; }
.sec-chev svg { width:11px; height:11px; stroke-width:2.5; transition:transform var(--ease); }
.sec-chev.closed svg { transform:rotate(-90deg); }
/* ── TASK TABLE ── */
.tbl-wrap {
background:var(--bg2); border:1px solid var(--border); border-radius:14px;
overflow:hidden; margin-bottom:18px;
box-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 6px 16px rgba(0,0,0,0.07),
0 1px 0 rgba(255,255,255,0.8) inset;
transition:box-shadow 0.2s ease;
}
.tbl-wrap:hover {
box-shadow:
0 4px 8px rgba(0,0,0,0.06),
0 12px 28px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.8) inset;
}
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th {
padding:10px 13px; text-align:left; font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:0.07em; color:var(--text2);
background:var(--bg3); border-bottom:1px solid var(--border);
white-space:nowrap; cursor:pointer; transition:color var(--ease);
}
.tbl thead th:hover { color:var(--text1); }
.tbl thead th.asc::after { content:' ↑'; color:var(--blue); }
.tbl thead th.desc::after { content:' ↓'; color:var(--blue); }
.tbl tbody tr { border-bottom:1px solid rgba(0,0,0,0.05); cursor:pointer; transition:filter var(--ease); }
.tbl tbody tr:last-child { border-bottom:none; }
.tbl tbody tr:hover {
filter:brightness(0.93);
box-shadow:0 2px 12px rgba(0,0,0,0.1);
transform:translateX(2px);
position:relative; z-index:1;
}
.tbl td { padding:10px 12px; vertical-align:middle; }
/* ── STATUS ROW COLORS — subtle 8-12% tints, dark colored text ── */
tr[data-status="Open"] { background:rgba(61,133,198,0.08); }
tr[data-status="In Progress"] { background:rgba(70,189,198,0.09); }
tr[data-status="In Review"] { background:rgba(234,209,220,0.18); }
tr[data-status="To Be Tested"] { background:rgba(230,184,175,0.18); }
tr[data-status="On Hold"] { background:rgba(255,229,153,0.22); }
tr[data-status="Delayed"] { background:rgba(255,109,1,0.09); }
tr[data-status="Cancelled"] { background:rgba(200,200,200,0.22); }
tr[data-status="Up Next"] { background:rgba(11,83,148,0.08); }
tr[data-status="Closed"] { background:rgba(22,163,74,0.06); }
/* Text colors — dark version of each hue for WCAG AA on tint bg */
tr[data-status="Open"] td { color:#1e4976; }
tr[data-status="In Progress"] td { color:#0e5c63; }
tr[data-status="In Review"] td { color:#6b2d4e; }
tr[data-status="To Be Tested"] td { color:#6b3020; }
tr[data-status="On Hold"] td { color:#6b5500; }
tr[data-status="Delayed"] td { color:#b34a00; }
tr[data-status="Cancelled"] td { color:#5a5a5a; }
tr[data-status="Up Next"] td { color:#0a3560; }
tr[data-status="Closed"] td { color:#14532d; }
/* Task name inherits row text color */
tr[data-status] .task-name { color:inherit !important; font-weight:500; }
tr[data-status] .task-sub { color:inherit !important; opacity:0.65; }
/* Sheet tags adapt to tinted rows */
tr[data-status] .sheet-tag {
background:rgba(255,255,255,0.7);
border-color:rgba(0,0,0,0.12);
color:inherit;
font-weight:600;
}
/* Action buttons on tinted rows */
tr[data-status] .abtn {
background:rgba(255,255,255,0.6);
border-color:rgba(0,0,0,0.12);
color:inherit;
}
tr[data-status] .abtn:hover {
background:rgba(255,255,255,0.9);
}
/* ── PRIORITY CELL — exact spec colors ── */
.pri-cell { padding:10px 12px; vertical-align:middle; }
.p-pip { display:inline-block; padding:3px 10px; border-radius:5px; font-size:11.5px; font-weight:700; white-space:nowrap; letter-spacing:0.01em; }
.p-Critical .p-pip { background:#990000; color:#fff; }
.p-VeryHigh .p-pip { background:#CC0000; color:#fff; }
.p-High .p-pip { background:#E06666; color:#fff; }
.p-Medium .p-pip { background:#EA9999; color:#fff; }
.p-Low .p-pip { background:#F4CCCC; color:#333; }
.p-Dependent .p-pip { background:#99C6E5; color:#fff; }
/* ── DUE DATE — vertical color scale cells ── */
.due-cell { font-family:var(--mono); font-size:11px; white-space:nowrap; padding:10px 12px; vertical-align:middle; }
.due-cell span { display:inline-block; padding:2px 0; font-size:11px; font-weight:650; }
.due-today { color:#2563eb; }
.due-p1 { color:#dc2626; }
.due-p2 { color:#b91c1c; }
.due-p3 { color:#991b1b; }
.due-p4 { color:#7f1d1d; }
.due-f1 { color:#16a34a; }
.due-f2 { color:#15803d; }
.due-f3 { color:#166534; }
/* Status badge (in panel / focus mode) */
.sbadge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:10.5px; font-weight:600; white-space:nowrap; }
.s-Open { background:#dbeafe; color:#1e2d3d; border:1px solid #bfdbfe; }
.s-In-Progress { background:#cffafe; color:#0e7490; border:1px solid #a5f3fc; }
.s-In-Review { background:#fce7f3; color:#9d174d; border:1px solid #fbcfe8; }
.s-To-Be-Tested { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.s-On-Hold { background:#f3f4f6; color:#374151; border:1px solid #d1d5db; }
.s-Delayed { background:#ffedd5; color:#9a3412; border:1px solid #fed7aa; }
.s-Closed { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.s-Cancelled { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.s-Up-Next { background:#ede9fe; color:#5b21b6; border:1px solid #ddd6fe; }
.sheet-tag { display:inline-block; background:var(--bg3); border:1px solid var(--border2); border-radius:5px; padding:2px 7px; font-size:10.5px; font-family:var(--mono); font-weight:500; color:var(--blue); }
.task-name { font-size:13px; font-weight:500; line-height:1.35; }
/* Mobile task layout helpers — invisible wrappers on desktop */
.mob-task-inner { display:contents; } /* on desktop: transparent, children render normally */
.mob-task-left { display:contents; }
.mob-task-right { display:none; } /* hidden on desktop — desktop uses separate | s */
.mob-status-badge { }
.mob-due-badge { }
.task-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.est-cell { font-family:var(--mono); font-size:11.5px; color:var(--text3); padding:10px 12px; vertical-align:middle; }
/* ── TIME BLOCKING ── */
.tb-grid { display:grid; gap:0; }
.tb-hour-label { font-size:10px; font-family:var(--mono); color:var(--text4); text-align:right; padding-right:10px; line-height:1; display:flex; align-items:flex-start; justify-content:flex-end; padding-top:2px; }
.tb-slot { border-top:1px solid var(--border); min-height:52px; position:relative; cursor:pointer; transition:background 0.12s; }
.tb-slot:hover { background:rgba(37,99,235,0.05); }
.tb-slot.slot-30 { min-height:26px; border-top:1px dashed var(--border); }
.tb-block {
position:absolute; left:4px; right:4px; border-radius:7px; padding:5px 8px;
font-size:11px; font-weight:600; cursor:grab; z-index:2; overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.15); user-select:none;
border-left:3px solid rgba(255,255,255,0.4);
}
.tb-block:active { cursor:grabbing; box-shadow:0 4px 16px rgba(0,0,0,0.25); }
.tb-block-title { color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-block-meta { font-size:9px; color:rgba(255,255,255,0.75); margin-top:1px; }
.tb-now-line { position:absolute; left:0; right:0; height:2px; background:var(--red); z-index:10; pointer-events:none; }
.tb-now-line::before { content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; background:var(--red); border-radius:50%; }
.tb-col-header { font-size:11px; font-weight:700; text-align:center; padding:8px 4px; background:var(--bg3); border-bottom:1px solid var(--border); border-radius:6px 6px 0 0; }
.tb-unscheduled { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:12px; height:100%; overflow-y:auto; }
.tb-task-chip { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; margin-bottom:5px; cursor:pointer; font-size:12px; font-weight:500; transition:all 0.15s; border:1px solid var(--border); background:var(--bg3); }
.tb-task-chip:hover { border-color:var(--blue); background:#eff6ff; }
.tb-task-chip .chip-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.abtn { width:27px; height:27px; border-radius:6px; background:rgba(0,0,0,0.04); border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; color:var(--text3); transition:all var(--ease); }
.abtn:hover { background:var(--bg4); color:var(--text1); }
.abtn.close:hover { background:#dcfce7; color:var(--green); border-color:#86efac; }
.abtn.focusbtn:hover{ background:#fef3c7; color:var(--amber); border-color:#fcd34d; }
.empty-row { padding:32px 20px; text-align:center; color:var(--text4); font-size:13px; }
.empty-ico { font-size:0; display:block; margin-bottom:10px; }
.empty-ico svg { width:32px; height:32px; stroke-width:1.25; color:var(--text4); opacity:.7; }
.coll-body { display:none; }
.coll-body.on { display:block; }
/* Overdue section strong accent */
.overdue-wrap .tbl-wrap {
border-color:rgba(220,38,38,0.2);
}
.overdue-hdr {
background:rgba(220,38,38,0.04);
border-radius:6px;
padding:6px 10px;
margin-left:-2px;
}
.sort-indicator {
font-size:10px; font-weight:600; color:var(--red);
background:rgba(220,38,38,0.08);
border:1px solid rgba(220,38,38,0.2);
border-radius:4px; padding:1px 7px;
font-family:var(--mono); white-space:nowrap;
}
.dismiss-btn {
display:inline-flex; align-items:center; gap:4px;
font-size:10.5px; font-weight:600;
color:#b34a00; background:rgba(255,109,1,0.08);
border:1px solid rgba(255,109,1,0.2);
border-radius:5px; padding:3px 8px;
cursor:pointer; transition:all var(--ease);
white-space:nowrap;
}
.dismiss-btn:hover { background:rgba(255,109,1,0.16); border-color:rgba(255,109,1,0.4); }
/* ── FILTERS ── */
.fbar { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.sbox { display:flex; align-items:center; gap:7px; background:var(--bg2); border:1px solid var(--border2); border-radius:8px; padding:7px 11px; flex:1; min-width:180px; transition:all var(--ease); box-shadow:var(--shadow); }
.sbox:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
.sbox input { background:none; border:none; outline:none; color:var(--text1); font-size:13px; font-family:var(--sans); width:100%; }
.sbox input::placeholder { color:var(--text4); }
.fsel { background:var(--bg2); border:1px solid var(--border2); border-radius:8px; padding:7px 11px; color:var(--text2); font-size:12.5px; font-family:var(--sans); outline:none; cursor:pointer; box-shadow:var(--shadow); }
.fsel:focus { border-color:var(--blue); }
/* ── SLIDE PANEL ── */
#povl { position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(3px); z-index:200; opacity:0; pointer-events:none; transition:opacity var(--ease2); }
#povl.on { opacity:1; pointer-events:all; }
#panel { position:fixed; top:0; right:0; bottom:0; width:var(--panel); background:var(--bg2); border-left:1px solid var(--border); z-index:201; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--ease2); box-shadow:-8px 0 32px rgba(0,0,0,0.12); }
#panel.on { transform:none; }
/* ── Security panel — same mechanics, independent z-index/IDs ── */
#sec-povl { position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(3px); z-index:300; opacity:0; pointer-events:none; transition:opacity var(--ease2); }
#sec-povl.on { opacity:1; pointer-events:all; }
#sec-panel { position:fixed; top:0; right:0; bottom:0; width:var(--panel); background:var(--bg2); border-left:1px solid var(--border); z-index:301; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--ease2); box-shadow:-8px 0 32px rgba(0,0,0,0.12); }
#sec-panel.on { transform:none; }
#sec-panel .pb { gap: 14px; }
.ph { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-shrink:0; background:var(--bg3); }
.ph-title { font-size:15px; font-weight:700; flex:1; letter-spacing:-0.02em; }
.px { width:28px; height:28px; border-radius:6px; background:var(--bg2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; color:var(--text3); transition:all var(--ease); }
.px:hover { background:#fee2e2; color:var(--red); border-color:#fca5a5; }
.pb { flex:1; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:13px; scrollbar-width:thin; scrollbar-color:var(--bg4) transparent; }
.pf { padding:12px 20px; border-top:1px solid var(--border); display:flex; gap:7px; flex-shrink:0; background:var(--bg3); }
.fg { display:flex; flex-direction:column; gap:4px; }
.fg2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.flbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text3); }
.fi,.fs,.fta { background:var(--bg3); border:1px solid var(--border2); border-radius:8px; padding:8px 11px; color:var(--text1); font-size:13px; font-family:var(--sans); outline:none; width:100%; transition:all var(--ease); }
.fi:focus,.fs:focus,.fta:focus { border-color:var(--blue); background:var(--bg2); box-shadow:0 0 0 3px rgba(37,99,235,0.08); }
.fta { resize:vertical; min-height:72px; }
.fs option { background:var(--bg2); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:8px; font-size:13px; font-weight:600; font-family:var(--sans); cursor:pointer; border:none; transition:all var(--ease); }
.btn-p { background:var(--blue); color:#fff; flex:1; }
.btn-p:hover { background:#1e2d3d; }
.btn-g { background:var(--bg3); color:var(--text2); border:1px solid var(--border2); }
.btn-g:hover { background:var(--bg4); }
.btn-d { background:#fee2e2; color:var(--red); border:1px solid #fca5a5; }
.btn-d:hover { background:#fecaca; }
.btn-s { background:#dcfce7; color:var(--green); border:1px solid #86efac; }
.btn-s:hover { background:#bbf7d0; }
/* ── CMD PALETTE ── */
#covl { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(6px); z-index:300; display:none; align-items:flex-start; justify-content:center; padding-top:80px; }
#covl.on { display:flex; }
#cbox { width:540px; max-height:420px; background:var(--bg2); border:1px solid var(--border2); border-radius:14px; box-shadow:var(--shadow-md), 0 20px 60px rgba(0,0,0,0.15); display:flex; flex-direction:column; overflow:hidden; }
.ci-row { display:flex; align-items:center; gap:8px; padding:13px 15px; border-bottom:1px solid var(--border); background:var(--bg3); }
.ci-icon { font-size:14px; color:var(--text4); }
#cinput { flex:1; background:none; border:none; outline:none; font-size:15px; color:var(--text1); font-family:var(--sans); }
#cinput::placeholder { color:var(--text4); }
.cresults { overflow-y:auto; max-height:340px; padding:6px; }
.csec { padding:7px 10px 3px; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text4); }
.citem { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:7px; cursor:pointer; transition:background var(--ease); }
.citem:hover { background:var(--bg3); }
.citem-icon { font-size:14px; width:20px; text-align:center; flex-shrink:0; }
.citem-name { flex:1; font-size:13px; color:var(--text1); }
.citem-meta { font-size:11px; color:var(--text4); font-family:var(--mono); }
.citem-sheet { font-size:10px; color:var(--blue); background:#eff6ff; padding:2px 6px; border-radius:4px; }
/* ── CTX MENU ── */
#ctx { position:fixed; background:var(--bg2); border:1px solid var(--border2); border-radius:10px; box-shadow:var(--shadow-md); z-index:400; min-width:170px; padding:5px; display:none; animation:ctxIn 0.12s ease; }
@keyframes ctxIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:none} }
.ctxitem { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px; cursor:pointer; font-size:12.5px; color:var(--text2); transition:all var(--ease); }
.ctxitem:hover { background:var(--bg3); color:var(--text1); }
.ctxitem.red:hover { background:#fee2e2; color:var(--red); }
.ctx-sep { height:1px; background:var(--border); margin:3px 0; }
/* ── INLINE TASK TIMER ── */
.timer-bar {
display:none; align-items:center; gap:8px;
padding:6px 12px; background:linear-gradient(135deg,#1a2535,#4f46e5);
border-radius:8px; margin:4px 0 2px; position:relative;
}
.timer-bar.active { display:flex; }
.timer-display {
font-family:var(--mono); font-size:16px; font-weight:700;
color:#fff; letter-spacing:0.05em; min-width:72px;
}
.timer-task-label {
flex:1; font-size:11px; color:rgba(255,255,255,0.8);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.timer-btn {
width:28px; height:28px; border-radius:6px; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,0.15); color:#fff; flex-shrink:0;
transition:background 0.12s;
}
.timer-btn:hover { background:rgba(255,255,255,0.3); }
.timer-btn svg { width:14px; height:14px; }
.row-timer-btns { display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.row-tbtn {
width:26px; height:26px; border-radius:5px; border:1px solid var(--border2);
background:var(--bg3); cursor:pointer; display:inline-flex; align-items:center;
justify-content:center; color:var(--text3); transition:all 0.12s; vertical-align:middle;
}
.row-tbtn:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.row-tbtn.running { background:#1a2535; color:#fff; border-color:#1a2535; }
.row-timer-display {
font-family:var(--mono); font-size:11px; font-weight:700;
color:var(--blue); min-width:44px; display:inline-block; vertical-align:middle;
}
/* ── FOCUS MODE ── */
#fmode { position:fixed; inset:0; background:rgba(245,245,244,0.97); backdrop-filter:blur(2px); z-index:600; display:none; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:48px; }
#fmode.on { display:flex; }
.fm-exit { position:absolute; top:20px; right:20px; font-size:12.5px; color:var(--text3); cursor:pointer; display:flex; align-items:center; gap:5px; padding:7px 12px; border:1px solid var(--border2); border-radius:7px; background:var(--bg2); transition:all var(--ease); }
.fm-exit:hover { color:var(--text1); border-color:var(--border2); box-shadow:var(--shadow); }
.fm-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.2em; color:var(--text4); }
.fm-task { font-size:clamp(22px,3vw,40px); font-weight:800; text-align:center; max-width:700px; line-height:1.2; color:var(--text1); letter-spacing:-0.03em; }
.fm-meta { display:flex; gap:10px; align-items:center; }
.fm-timer-card { display:flex; flex-direction:column; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--border2); border-radius:16px; padding:24px 36px; box-shadow:var(--shadow-md); }
.fm-timer { font-family:var(--mono); font-size:52px; font-weight:300; color:var(--green); letter-spacing:0.05em; line-height:1; }
.fm-timer.run { color:var(--amber); }
.fm-tbts { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.fm-bt { padding:8px 18px; border-radius:8px; font-size:13px; font-family:var(--sans); font-weight:600; cursor:pointer; border:none; transition:all var(--ease); }
.fm-start { background:var(--green); color:#fff; }
.fm-start:hover { background:#15803d; }
.fm-stop { background:#fee2e2; color:var(--red); border:1px solid #fca5a5; }
.fm-stop:hover { background:#fecaca; }
.fm-reset { background:var(--bg3); color:var(--text2); border:1px solid var(--border2); }
.fm-save { background:#fef3c7; color:var(--amber); border:1px solid #fcd34d; }
.fm-save:hover { background:#fde68a; }
.fm-manual-row { display:flex; align-items:center; gap:8px; }
.fm-manual-lbl { font-size:11px; color:var(--text3); white-space:nowrap; }
#fm-manual { width:72px; background:var(--bg3); border:1px solid var(--border2); border-radius:6px; padding:6px 8px; color:var(--text1); font-size:13px; font-family:var(--mono); outline:none; text-align:center; }
#fm-manual:focus { border-color:var(--blue); background:var(--bg2); }
.fm-msg { font-size:12px; color:var(--green); min-height:18px; font-weight:500; }
/* ── FOD MODAL ── */
#fodm { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(6px); z-index:300; display:none; align-items:center; justify-content:center; }
#fodm.on { display:flex; }
.fod-card { background:var(--bg2); border:1px solid var(--border2); border-radius:16px; padding:26px; width:480px; box-shadow:var(--shadow-md); }
.fod-title { font-size:17px; font-weight:800; margin-bottom:4px; letter-spacing:-0.03em; }
.fod-sub { font-size:12px; color:var(--text3); margin-bottom:14px; }
.fod-sug { background:#fffbeb; border:1px solid #fcd34d; border-radius:9px; padding:11px 14px; margin-bottom:13px; cursor:pointer; transition:all var(--ease); }
.fod-sug:hover { border-color:var(--amber); box-shadow:0 0 0 3px rgba(217,119,6,0.1); }
.fod-sug-lbl { font-size:9px; font-weight:700; color:var(--amber); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px; }
.fod-sug-txt { font-size:13px; color:var(--text1); font-weight:500; }
/* ── STATS ── */
.sbar { display:flex; align-items:center; gap:7px; margin-bottom:18px; flex-wrap:wrap; }
.wbtn { padding:6px 12px; border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; border:1px solid var(--border2); background:var(--bg2); color:var(--text3); transition:all var(--ease); font-family:var(--sans); white-space:nowrap; box-shadow:var(--shadow); }
.wbtn:hover { color:var(--text1); border-color:var(--blue); }
.wbtn.on { background:#eff6ff; border-color:var(--blue); color:var(--blue); }
.di { background:var(--bg2); border:1px solid var(--border2); border-radius:7px; padding:6px 10px; color:var(--text2); font-size:12px; font-family:var(--sans); outline:none; box-shadow:var(--shadow); }
.di:focus { border-color:var(--blue); }
.skpis { margin-bottom:18px; }
/* Featured stat card */
.skpi-feat {
border:none; border-radius:16px; padding:22px 20px;
box-shadow:0 4px 16px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.15);
position:relative; overflow:hidden; transition:transform 0.2s,box-shadow 0.2s;
display:flex; flex-direction:column; justify-content:flex-end;
}
.skpi-feat::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.12),transparent); pointer-events:none; }
.skpi-feat:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,0.2); }
/* Standard stat card */
.skpi {
border:none; border-radius:14px; padding:13px 14px;
box-shadow:0 3px 10px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.12);
position:relative; overflow:hidden; transition:transform 0.2s,box-shadow 0.2s; text-align:left;
}
.skpi::before { content:''; position:absolute; top:0; left:0; right:0; height:45%; background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent); pointer-events:none; }
.skpi:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.16); }
.skpi-v { font-family:'Bebas Neue',var(--mono),sans-serif; font-size:28px; font-weight:400; color:#fff; display:block; line-height:1; letter-spacing:0.03em; text-shadow:0 2px 4px rgba(0,0,0,0.2); }
.skpi-feat .skpi-v { font-size:56px; }
.skpi-l { font-size:10px; color:rgba(255,255,255,0.72); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; font-weight:700; }
.skpi-feat .skpi-l { font-size:11px; margin-top:8px; }
.skpi-sub { font-size:10px; margin-top:4px; }
/* Comparison deltas — every KPI carries its own vs-prior-period signal,
since a number with nothing to compare against ("87%") doesn't say
anything on its own. */
.skpi-delta { display:block; font-size:10px; margin-top:6px; font-weight:600; position:relative; z-index:1; }
.skpi-delta.up { color:#a8e6c3; }
.skpi-delta.down { color:#f5b8b8; }
.skpi-delta.flat { color:rgba(255,255,255,0.55); font-style:italic; font-weight:400; }
#stats-kpi .skpi-delta.up { color:#1a8a4a; }
#stats-kpi .skpi-delta.down { color:#c23a3a; }
#stats-kpi .skpi-delta.flat { color:var(--text4); }
.cgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(400px,1fr)); gap:14px; }
.cc { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:var(--shadow); }
.cc.wide { grid-column:1/-1; }
.cc-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text3); margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.cw { position:relative; height:220px; }
.cw.tall { height:290px; }
/* ── NOTIFICATIONS ── */
.notif-card {
display:flex; align-items:flex-start; gap:12px;
padding:12px 14px; border-radius:12px; margin-bottom:8px;
background:var(--bg2); border:1px solid var(--border);
box-shadow:var(--shadow); position:relative;
animation:slideIn 0.25s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.notif-card.sev-red { border-left:3px solid #b84040; background:#fdf0f0; }
.notif-card.sev-orange { border-left:3px solid var(--amber); background:#fffbf0; }
.notif-card.sev-yellow { border-left:3px solid #ca8a04; background:#fefce8; }
.notif-card.sev-green { border-left:3px solid var(--green); background:#f0fdf4; }
.notif-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.notif-dot.red { background:var(--red); }
.notif-dot.orange { background:var(--amber); }
.notif-dot.yellow { background:#ca8a04; }
.notif-dot.green { background:var(--green); }
.notif-body { flex:1; min-width:0; }
.notif-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:2px; }
.notif-desc { font-size:12px; color:var(--text3); line-height:1.5; }
.notif-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.notif-btn { font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px;
border:1px solid var(--border2); background:var(--bg3); color:var(--text2);
cursor:pointer; transition:all 0.12s; }
.notif-btn:hover { background:var(--bg4); }
.notif-btn.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.notif-btn.primary:hover { background:#1e2d3d; }
.notif-dismiss { position:absolute; top:8px; right:8px; font-size:14px;
color:var(--text4); cursor:pointer; line-height:1; padding:2px 5px; border-radius:4px; }
.notif-dismiss:hover { color:var(--text2); background:var(--bg4); }
.notif-empty { text-align:center; padding:40px 20px; color:var(--text4); font-size:13px; }
.notif-empty-icon { display:block; margin:0 auto 12px; }
.notif-empty-icon svg { width:36px; height:36px; stroke-width:1.5; color:var(--text4); }
.notif-badge { position:absolute; top:-4px; right:-4px; background:var(--red);
color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px;
border-radius:99px; display:flex; align-items:center; justify-content:center;
padding:0 4px; line-height:1; }
.briefing-card::before { content:''; position:absolute; top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent); pointer-events:none; }
.briefing-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.briefing-stat { text-align:center; }
.briefing-stat-val { font-family:'Bebas Neue',sans-serif; font-size:36px; color:#fff; line-height:1; }
.briefing-stat-val-time { font-family:var(--sans); font-size:22px; font-weight:700; }
.briefing-stat-lbl { font-size:9px; font-weight:700; text-transform:uppercase;
letter-spacing:0.1em; color:rgba(255,255,255,0.65); margin-top:2px; }
.briefing-divider { width:1px; height:48px; background:rgba(255,255,255,0.2); flex-shrink:0; }
.briefing-focus { flex:1; min-width:180px; }
.briefing-focus-lbl { font-size:10px; font-weight:700; text-transform:uppercase;
letter-spacing:0.1em; color:rgba(255,255,255,0.6); margin-bottom:4px; }
.briefing-focus-val { font-size:14px; font-weight:700; color:#fff; line-height:1.4; }
/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
/* ── RESET: no horizontal overflow ── */
* { box-sizing:border-box; }
body, html { margin:0; padding:0; overflow-x:hidden; }
#app, #main { overflow-x:hidden; max-width:100%; }
/* ── TOPBAR ── */
.tb-title { font-size:14px !important; }
.tb-qwrap, #topbar-hint, #tod-icon { display:none !important; }
/* ── BOTTOM TAB BAR ── */
.mob-tab {
flex:1; display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:3px; color:var(--text4);
font-size:10px; font-weight:600; text-transform:uppercase;
letter-spacing:0.04em; border:none; background:none;
-webkit-tap-highlight-color:transparent; min-height:44px; cursor:pointer; padding:4px 2px;
}
.mob-tab svg { width:22px; height:22px; }
.mob-drawer-item {
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; padding:14px 8px; font-size:12px; font-weight:600; color:var(--text2);
background:none; border:none; cursor:pointer; width:100%;
-webkit-tap-highlight-color:transparent;
}
.mob-drawer-item:active { background:var(--bg3); }
/* ── PAGES ── */
/* ── FONTS ── */
body { font-size:15px; }
.sec-title { font-size:14px !important; }
.btn { font-size:14px !important; }
.kpi-label { font-size:11px !important; }
/* ── KPI ROW 1: one per row ── */
[style*="grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px"] {
display:flex !important; flex-direction:column !important; gap:8px !important; padding:0 10px;
}
[style*="grid-template-columns:repeat(5,1fr)"] {
grid-template-columns:1fr 1fr !important; gap:8px !important;
}
[style*="grid-template-columns:1.6fr 1fr 1fr"] { grid-template-columns:1fr !important; }
[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns:1fr 1fr !important; }
[style*="repeat(6,1fr)"] { grid-template-columns:1fr 1fr !important; }
.kpi-card { padding:14px 12px !important; }
.kpi-value { font-size:32px !important; }
/* ── INNER CONTENT MARGINS ── */
.briefing-card, .cc, .sbar, #dash-briefing-strip,
.sec-hdr, .fbar { margin-left:10px !important; margin-right:10px !important; }
/* ── FILTER BAR ── */
.fbar { flex-direction:column !important; gap:6px !important; align-items:stretch !important; }
.sbox { width:100% !important; }
.fsel {
width:100% !important; font-size:15px !important;
padding:10px 40px 10px 14px !important;
min-height:44px !important;
-webkit-appearance:auto !important; appearance:auto !important;
}
/* ═══════════════════════════════════════════════════
TASK TABLE → CARD LAYOUT
═══════════════════════════════════════════════════ */
.tbl { display:block !important; overflow:visible !important; }
.tbl tbody { display:block !important; }
/* Hide ALL tds first */
/* Also hide via class */
.col-hide-mobile { display:none !important; }
/* Each row = a card */
.tbl tr {
display:block !important;
padding:0 !important;
margin:0 !important;
border:none !important;
border-bottom:1px solid var(--border) !important;
background:var(--bg2) !important;
cursor:pointer;
}
.tbl tr:last-child { border-bottom:none !important; }
/* Priority left border stripe */
.tbl tr.p-critical { border-left:3px solid #990000 !important; }
.tbl tr.p-very-high { border-left:3px solid #CC0000 !important; }
.tbl tr.p-high { border-left:3px solid #E06666 !important; }
.tbl tr.p-medium { border-left:3px solid #EA9999 !important; }
.tbl tr.p-low { border-left:3px solid #ccc !important; }
.tbl tr.p-dependent { border-left:3px solid #99C6E5 !important; }
/* Show ONLY task-main-cell */
/* Show ONLY the actions td (last child) */
/* Task inner: left=name, right=status+date */
.mob-task-inner {
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:8px !important;
width:100% !important;
}
.mob-task-left {
display:flex !important;
flex-direction:column !important;
flex:1 !important;
min-width:0 !important;
overflow:hidden !important;
}
.mob-task-right {
display:flex !important;
flex-direction:column !important;
align-items:flex-end !important;
flex-shrink:0 !important;
gap:4px !important;
padding-top:2px !important;
max-width:110px !important;
}
/* Task name and sub */
/* Status badge in right panel */
/* Due date in right panel */
/* Action buttons */
.abtn { width:40px !important; height:40px !important; }
.dismiss-btn { font-size:11px !important; padding:5px 8px !important; }
/* tbl-wrap: rounded container, full width of page minus margins */
/* ── SECTION HEADERS ── */
.sec-hdr { padding:8px 0 !important; }
/* ── LAYOUT ── */
[style*="1.4fr 1fr"] { grid-template-columns:1fr !important; }
#health-grid { max-height:none !important; }
#tb-outer { grid-template-columns:1fr !important; }
#tb-unscheduled-col { display:none !important; }
/* ── PANEL: bottom sheet ── */
#panel.on { transform:translateY(0) !important; }
.ph { padding:12px 16px !important; }
.pf { padding:10px 14px !important; }
/* ── MODALS ── */
#wrev-modal { padding:4px !important; align-items:flex-end !important; }
#wrev-modal > div { border-radius:20px 20px 0 0 !important; max-height:94vh !important; }
/* ── BRIEFING CARD ── */
.briefing-row { gap:10px !important; flex-wrap:wrap !important; }
.briefing-stat-val { font-size:26px !important; }
.briefing-focus { width:100% !important; border-top:1px solid rgba(255,255,255,0.2) !important; padding-top:6px !important; margin-top:6px !important; }
.briefing-focus > div { flex-direction:column !important; gap:8px !important; }
.briefing-focus > div > div:first-child { border-top:none !important; padding-top:0 !important; }
/* ── CHARTS ── */
.cw { height:180px !important; }
.cw.tall { height:240px !important; }
}
@media (min-width: 769px) {
#mobile-tabs { display:none !important; }
}
/* ── LOADING SCREEN ── soft warm hue */
#loading::before {
content:''; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(ellipse 70% 55% at 50% 30%, rgba(99,140,190,0.14) 0%, transparent 70%);
}
#loading::after {
content:''; position:absolute; inset:0; pointer-events:none;
background-image:radial-gradient(circle, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:26px 26px;
}
#loading.out { opacity:0; pointer-events:none; }
.l-splash-inner {
display:flex; flex-direction:column; align-items:center; text-align:center;
position:relative; z-index:2; max-width:360px; width:100%; padding:0 32px;
}
.l-icon-shell {
width:88px; height:88px; border-radius:24px;
background:#243347; border:1px solid rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:center;
margin-bottom:36px; flex-shrink:0;
box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 20px 48px rgba(0,0,0,.4);
animation:l-icon-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes l-icon-in { from{transform:scale(.72);opacity:0} to{transform:scale(1);opacity:1} }
.l-arc {
stroke-dasharray:60; stroke-dashoffset:60;
animation:l-draw-arc 1s ease-out .35s forwards;
}
@keyframes l-draw-arc { to{stroke-dashoffset:0} }
.l-spark { animation:l-spark-pulse 2s ease-in-out infinite; }
@keyframes l-spark-pulse { 0%,100%{opacity:.7} 50%{opacity:1} }
.l-brand {
font-family:'Inter','Helvetica Neue',sans-serif;
font-size:clamp(36px,10vw,52px); font-weight:900;
color:#ffffff; letter-spacing:-.03em; line-height:1;
margin-bottom:10px;
animation:l-fade-up .5s ease .42s both;
}
.l-byline {
font-size:10px; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; color:#7a9ab8;
margin-bottom:36px;
animation:l-fade-up .5s ease .56s both;
}
.l-divider {
width:40px; height:1px; margin:0 auto 26px;
background:linear-gradient(90deg,transparent,rgba(168,189,212,.3),transparent);
animation:l-fade-up .5s ease .68s both;
}
.l-pitch {
font-size:14px; line-height:1.8; color:#7a9ab8;
animation:l-fade-up .5s ease .78s both;
}
.l-pitch em { font-style:italic; color:#8bacc6; display:block; }
.l-pitch strong { font-style:normal; font-weight:700; color:#c8dff0; display:block; margin-top:4px; }
@keyframes l-fade-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.l-loader-wrap {
position:absolute;
bottom:max(28px, env(safe-area-inset-bottom, 28px));
left:50%;
width:max-content;
display:flex; flex-direction:column; align-items:center;
gap:8px; z-index:3;
animation:l-fade-up-centered .5s ease .9s both;
}
/* Dedicated keyframe (not the shared l-fade-up) — this element needs
translateX(-50%) permanently for horizontal centering, which the
shared keyframe's own transform (translateY only) would silently
overwrite the moment the fade animation completes. */
@keyframes l-fade-up-centered {
from { opacity:0; transform:translateX(-50%) translateY(10px); }
to { opacity:1; transform:translateX(-50%) translateY(0); }
}
.l-bar {
width:120px; height:2px;
background:rgba(255,255,255,.08);
border-radius:99px; overflow:hidden;
}
.l-fill {
height:100%;
background:linear-gradient(90deg,#4a7fa5,#7ab8d4);
animation:l-load 2.4s ease-in-out forwards;
}
@keyframes l-load { 0%{width:0%} 60%{width:72%} 85%{width:88%} 100%{width:100%} }
.l-loader-label {
font-size:9px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:rgba(122,154,184,.5);
white-space:nowrap;
animation:l-pulse 1.8s ease-in-out infinite;
}
@keyframes l-pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
/* ── TOASTS ── */
#toasts { position:fixed; bottom:20px; right:20px; z-index:7000; display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500; pointer-events:all; animation:tin 0.28s cubic-bezier(0.175,0.885,0.32,1.275); max-width:300px; box-shadow:var(--shadow-md); }
@keyframes tin { from{opacity:0;transform:translateX(24px) scale(0.94)} to{opacity:1;transform:none} }
.toast.out { animation:tout 0.2s ease forwards; }
@keyframes tout { to{opacity:0;transform:translateX(24px)} }
.t-ok { background:#dcfce7; border:1px solid #86efac; color:#166534; }
.t-err { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; }
.t-inf { background:#dbeafe; border:1px solid #93c5fd; color:#1a2535; }
@keyframes spin { to{transform:rotate(360deg)} }
.spin { animation:spin 1s linear infinite; display:inline-block; }
/* ── LUCIDE ICONS — larger, crisper ── */
.icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon svg { display:block; }
.nicon .icon svg { width:20px; height:20px; stroke-width:1.75; }
.kpi-ico .icon svg { width:26px; height:26px; stroke-width:1.5; }
.sec-icon .icon svg { width:18px; height:18px; stroke-width:2; }
.tbtn .icon svg { width:17px; height:17px; stroke-width:2; }
.abtn .icon svg { width:14px; height:14px; stroke-width:2.5; }
.fp-ico svg { width:14px; height:14px; stroke-width:2.5; }
.streak-ico svg { width:16px; height:16px; stroke-width:2; }
.l-icon svg { width:30px; height:30px; stroke:white; stroke-width:1.5; fill:none; }
.panel-icon-wrap svg{ width:20px; height:20px; stroke-width:2; }
.slogo svg { width:18px; height:18px; stroke:white; stroke-width:2; fill:none; }
.ci-icon svg { width:17px; height:17px; stroke-width:2; }
.fm-bt svg { width:15px; height:15px; stroke-width:2.5; }
.ctx-icon svg { width:14px; height:14px; stroke-width:2; }
/* Task detail panel refinement */
#panel { background:#f6f7f9 !important; }
#panel .ph, #panel .pf { background:var(--panel-header-footer-bg) !important; }
#panel .pb { background:#f6f7f9 !important; }
#panel .fi, #panel .fs, #panel .fta { background:var(--panel-input-bg); }
#tab-details, #tab-thread { background:#ffffff; border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,0.03); }
#tab-thread { background:#fbfbfc; }
.panel-tab-icon { width:15px; height:15px; stroke-width:1.75; vertical-align:-3px; margin-right:6px; }
#panel .px svg { width:15px; height:15px; stroke-width:1.9; }
.activity-feed { background:#fbfbfc; }
.activity-avatar { box-shadow:0 0 0 4px #fbfbfc !important; }
/* Added: admin modals, activity feed, CSV import */
#add-client-modal, #client-manager-modal, #csv-import-modal, #add-context-modal, #context-manager-modal {
position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,0.35); backdrop-filter:blur(6px); padding:18px;
}
.admin-modal-card { background:var(--bg2); border:1px solid var(--border2); border-radius:18px; box-shadow:var(--shadow-lg); width:min(680px,96vw); max-height:88vh; overflow:hidden; display:flex; flex-direction:column; }
.admin-modal-head { padding:16px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg3); }
.admin-modal-title { font-size:16px; font-weight:800; color:var(--text1); }
.admin-modal-body { padding:16px 18px; overflow:auto; }
.admin-modal-foot { padding:12px 18px; border-top:1px solid var(--border); display:flex; gap:8px; background:var(--bg3); }
.activity-feed { position:relative; padding:2px 0 0 0; }
.activity-feed::before { content:''; position:absolute; left:15px; top:12px; bottom:10px; width:1px; background:var(--border); }
.activity-item { position:relative; display:grid; grid-template-columns:34px 1fr; gap:12px; padding:12px 0 14px; border-bottom:1px solid var(--border); }
.activity-item:last-child { border-bottom:none; }
.activity-avatar { position:relative; z-index:1; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#4f7ef5,#7c3aed); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; box-shadow:0 0 0 4px var(--bg2); }
.activity-main { min-width:0; }
.activity-meta { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
.activity-user { font-size:12.5px; font-weight:800; color:var(--text1); }
.activity-time { font-size:10px; color:var(--text4); font-family:var(--mono); margin-left:auto; }
.activity-summary { font-size:12.8px; color:var(--text2); line-height:1.45; margin-bottom:5px; }
.activity-summary strong { color:var(--text1); font-weight:700; }
.activity-detail { font-size:12px; color:var(--text3); line-height:1.55; white-space:pre-wrap; }
.activity-change-list { margin:5px 0 0 0; display:flex; flex-direction:column; gap:4px; }
.activity-change { font-size:12px; color:var(--text2); line-height:1.45; padding-left:12px; position:relative; }
.activity-change::before { content:'•'; position:absolute; left:0; color:var(--text4); }
.activity-change-label { font-weight:600; color:var(--text1); }
.activity-diff { color:var(--text3); }
.activity-comment { background:#fffbeb; border:1px solid #fde68a; border-radius:10px; padding:9px 11px; color:var(--text1); font-size:13px; line-height:1.55; white-space:pre-wrap; }
.reaction-row { display:flex; align-items:center; gap:5px; margin-top:8px; flex-wrap:wrap; }
.reaction-pill { border:1px solid var(--border2); background:var(--bg3); border-radius:99px; padding:2px 8px; font-size:12px; cursor:pointer; line-height:1.5; }
.reaction-pill:hover { background:var(--bg4); }
.reaction-pill.mine { background:#eff6ff; border-color:#bfdbfe; color:var(--blue); }
.reaction-add { color:var(--text4); background:transparent; }
.reaction-menu { display:inline-flex; gap:3px; padding:3px; border:1px solid var(--border); border-radius:99px; background:var(--bg2); box-shadow:var(--shadow); }
@media (max-width: 768px) { .activity-feed::before { left:15px; } .activity-item { grid-template-columns:34px 1fr; gap:10px; } .activity-time { width:100%; margin-left:0; } }
@media (max-width: 768px) {
#add-client-modal, #client-manager-modal, #csv-import-modal, #add-context-modal, #context-manager-modal { align-items:flex-end; padding:0; }
}
/* Enterprise task detail + thread refinements */
/* Project overview panel — activity feed must be white */
#proj-ov-panel .activity-feed { background:#ffffff !important; }
/* Restore vertical connecting line for project panel — styled for white bg */
#proj-ov-panel .activity-feed::before { display:block !important; content:"" !important; position:absolute !important; left:27px !important; top:16px !important; bottom:16px !important; width:1px !important; background:#e2e8f0 !important; z-index:0 !important; }
#proj-ov-panel .activity-item { background:#f1f5f9 !important; border:1px solid #e2e8f0 !important; border-bottom:1px solid #e2e8f0 !important; border-radius:10px !important; position:relative !important; z-index:1 !important; }
/* Activity avatar ring — transparent so truly invisible regardless of bg */
#proj-ov-overlay .activity-avatar { box-shadow:none !important; border:none !important; outline:none !important; background:transparent !important; width:30px !important; height:30px !important; }
#proj-ov-overlay .activity-avatar img { box-shadow:none !important; border:none !important; outline:0 !important; outline-width:0 !important; display:block !important; width:30px !important; height:30px !important; }
#proj-ov-overlay .activity-avatar span { box-shadow:none !important; border:none !important; outline:none !important; background:transparent !important; }
#proj-ov-panel .ov-tab-body { background:#ffffff !important; }
/* Comment box — white bg, clear padding so no gray gap above separator line */
#proj-ov-panel .ov-comment-box { background:#ffffff !important; border-top:1px solid #e2e8f0 !important; padding-top:16px !important; margin-top:12px !important; }
#panel {
background:var(--panel-bg-real) !important;
border-left:1px solid var(--panel-border-real) !important;
box-shadow:-8px 0 28px rgba(15,23,42,0.10) !important;
}
#panel .ph,
#panel .pf {
background:var(--panel-header-bg-real) !important;
border-color:var(--panel-border-real) !important;
}
#panel .pb {
background:var(--panel-bg-real) !important;
}
#panel .fi,
#panel .fs,
#panel .fta {
background:var(--input-bg-real) !important;
border-color:var(--input-border-real) !important;
color:var(--input-color-real) !important;
}
#panel .fi:focus,
#panel .fs:focus,
#panel .fta:focus {
background:var(--panel-input-focus-bg) !important;
border-color:var(--panel-input-focus-border) !important;
box-shadow:0 0 0 3px var(--panel-input-focus-glow) !important;
}
#tab-details,
#tab-thread {
background:#eef1f5 !important;
border:1px solid #d6dbe3 !important;
border-radius:14px !important;
padding:14px !important;
box-shadow:none !important;
}
#tab-thread { background:#edf0f4 !important; }
.panel-detail-row {
background:#f4f6f8;
border:1px solid #dce1e8 !important;
border-radius:10px;
padding:9px 10px !important;
margin-bottom:6px;
}
.panel-detail-label { color:#6b7280 !important; }
.panel-detail-value { color:#27313f !important; }
.panel-tabs-wrap {
background:#e9edf2;
border:1px solid #d6dbe3 !important;
border-radius:12px;
padding:4px;
margin-bottom:14px !important;
}
.panel-tab-btn {
border-radius:9px !important;
border-bottom:none !important;
color:#5f6b7a !important;
}
.panel-tab-btn.is-on {
background:#f6f8fb !important;
color:#1f2937 !important;
box-shadow:inset 0 0 0 1px #d6dbe3;
}
.panel-tab-icon { width:15px !important; height:15px !important; stroke-width:1.75 !important; }
#panel .activity-feed,
#tab-thread .activity-feed { background:var(--thread-feed-bg) !important; }
#panel .activity-feed::before,
#tab-thread .activity-feed::before { background:var(--thread-feed-line) !important; }
#panel .activity-item,
#tab-thread .activity-item { border-bottom:1px solid var(--thread-item-border) !important; }
#panel .activity-avatar,
#tab-thread .activity-avatar { box-shadow:0 0 0 4px var(--thread-feed-bg) !important; }
.activity-user { color:#1f2937 !important; font-weight:700 !important; }
.activity-summary { color:#374151 !important; font-weight:500 !important; }
.activity-detail,
.activity-diff { color:#5f6b7a !important; }
.activity-change-label { color:#27313f !important; font-weight:650 !important; }
.activity-comment {
background:#f4f6f8 !important;
border:1px solid #d8dde5 !important;
color:#27313f !important;
box-shadow:none !important;
}
.thread-comment-box {
margin-top:14px;
border-top:1px solid #d6dbe3;
padding-top:14px;
background:#eef1f5;
border:1px solid #d6dbe3;
border-radius:12px;
padding:12px;
}
.thread-comment-title {
display:flex; align-items:center; gap:7px;
font-size:10px; font-weight:750; text-transform:uppercase; letter-spacing:0.08em;
color:#667085; margin-bottom:8px;
}
.thread-comment-title svg { width:14px; height:14px; stroke-width:1.8; }
#comment-input { background:var(--input-bg-real) !important; min-height:72px !important; margin-bottom:10px !important; }
.reaction-row { gap:6px !important; margin-top:9px !important; }
.reaction-pill {
display:inline-flex; align-items:center; gap:5px;
border:none !important;
background:#f3f5f7 !important;
color:#4b5563 !important;
border-radius:999px !important;
padding:3px 8px !important;
font-size:11px !important;
line-height:1.2 !important;
}
.reaction-pill svg { width:13px; height:13px; stroke-width:1.8; }
.reaction-pill:hover { background:#e8edf2 !important; color:#27313f !important; }
.reaction-pill.mine { background:#eef0f3 !important; border-color:#c9d0da !important; color:#27313f !important; }
.reaction-add { background:transparent !important; color:#667085 !important; }
.reaction-menu {
background:#f4f6f8 !important;
border:1px solid #d4dae3 !important;
border-radius:999px !important;
box-shadow:0 6px 18px rgba(15,23,42,0.10) !important;
}
#panel .btn-p,
.thread-comment-box .btn-p {
background:var(--panel-btn-primary-bg) !important;
color:var(--white) !important;
border:1px solid var(--panel-btn-primary-border) !important;
box-shadow:none !important;
}
#panel .btn-p:hover,
.thread-comment-box .btn-p:hover { background:var(--panel-btn-primary-bg-hover) !important; border-color:var(--panel-btn-primary-bg-hover) !important; }
#panel .btn-s,
.admin-modal-card .btn-s {
background:var(--panel-btn-secondary-bg) !important;
color:var(--panel-btn-secondary-color) !important;
border:1px solid var(--panel-btn-secondary-border) !important;
box-shadow:none !important;
}
#panel .btn-s:hover,
.admin-modal-card .btn-s:hover { background:var(--panel-btn-secondary-bg-hover) !important; color:var(--text1) !important; }
#panel .btn-d,
.admin-modal-card .btn-d {
background:transparent !important;
color:var(--panel-btn-danger-color) !important;
border:1px solid var(--panel-btn-danger-border) !important;
box-shadow:none !important;
}
#panel .btn-d:hover,
.admin-modal-card .btn-d:hover { background:var(--panel-btn-danger-bg-hover) !important; border-color:var(--panel-btn-danger-border-hover) !important; color:var(--panel-btn-danger-color-hover) !important; }
#panel .btn-g,
.admin-modal-card .btn-g {
background:var(--panel-btn-ghost-bg) !important;
color:var(--panel-btn-ghost-color) !important;
border:1px solid var(--panel-btn-ghost-border) !important;
}
#panel .btn-g:hover,
.admin-modal-card .btn-g:hover { background:var(--panel-btn-ghost-bg-hover) !important; color:var(--panel-btn-ghost-color-hover) !important; }
#toasts { z-index:99999 !important; }
.toast { z-index:99999 !important; }
/* Profile page and avatar system */
.avatar-img,
.avatar-fallback { width:28px; height:28px; border-radius:999px; flex-shrink:0; object-fit:cover; border:1px solid #d6dbe3; background:#dbe3ea; color:#334155; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; letter-spacing:.02em; }
.avatar-sm { width:32px; height:32px; }
.avatar-lg { width:96px; height:96px; font-size:30px; }
.profile-wrap { max-width:960px; margin:0 auto; display:grid; grid-template-columns:300px 1fr; gap:18px; }
.profile-card { background:#eef1f5; border:1px solid #d6dbe3; border-radius:18px; padding:18px; box-shadow:none; }
.profile-card-title { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#64748b; margin-bottom:14px; }
.profile-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.profile-name { font-size:20px; font-weight:800; color:#1f2937; letter-spacing:-.03em; }
.profile-role { font-size:12px; color:#64748b; }
.profile-photo-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.profile-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.profile-field { display:flex; flex-direction:column; gap:5px; }
.profile-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#64748b; }
.profile-input, .profile-textarea { background:#f7f8fa; border:1px solid #cfd5de; border-radius:10px; color:#27313f; font-family:var(--sans); font-size:13px; padding:10px 11px; outline:none; transition:all .15s; }
.profile-input:focus, .profile-textarea:focus { background:#f8fafc; border-color:#94a3b8; box-shadow:0 0 0 3px rgba(100,116,139,.10); }
.profile-input[readonly] { color:#64748b; background:#e9edf2; cursor:not-allowed; }
.profile-textarea { min-height:110px; resize:vertical; grid-column:1/-1; }
.profile-help { font-size:11px; line-height:1.5; color:#6b7280; }
.profile-save-row { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
.activity-avatar img { width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; outline:none !important; outline-width:0 !important; border:none !important; }
/* ── EXECUTION OS V2: command center, saved views, delegation ── */
.exec-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:16px; align-items:start; }
.exec-grid-delegation { grid-template-columns: 1.6fr 1fr; }
.exec-side-col { display:flex; flex-direction:column; gap:16px; min-width:0; }
.exec-stack { display:flex; flex-direction:column; gap:14px; }
.exec-card { background:#f7f8fa; border:1px solid #d8dde3; border-radius:16px; padding:16px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.exec-card.soft { background:#eef1f4; }
.exec-card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.exec-kicker { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6b7280; }
.exec-title { font-size:15px; font-weight:800; color:#1f2937; letter-spacing:-.02em; }
.exec-sub { font-size:12px; color:#6b7280; line-height:1.5; }
.exec-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; border:1px solid #d1d5db; background:#f3f4f6; color:#475569; font-size:11px; font-weight:700; }
.exec-mini-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.exec-metric { background:#eef1f4; border:1px solid #d8dde3; border-radius:14px; padding:14px; }
.exec-metric-v { font-family:'Bebas Neue','Inter',sans-serif; font-size:34px; line-height:1; color:#1f2937; }
.exec-metric-l { font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#64748b; margin-top:4px; }
.exec-list { display:flex; flex-direction:column; gap:8px; }
.exec-row { display:flex; align-items:flex-start; gap:10px; padding:10px 11px; border:1px solid #d8dde3; border-radius:12px; background:#f3f4f6; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.exec-row:hover { background:#e9edf2; border-color:#cbd5e1; transform:translateY(-1px); }
.exec-row-main { flex:1; min-width:0; }
.exec-row-title { font-size:13px; font-weight:650; color:#1f2937; line-height:1.35; }
.exec-row-meta { font-size:11px; color:#64748b; margin-top:3px; display:flex; gap:8px; flex-wrap:wrap; }
.exec-rank { width:24px; height:24px; border-radius:999px; background:#e2e8f0; color:#334155; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.exec-view-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.exec-view { padding:14px; background:#f7f8fa; border:1px solid #d8dde3; border-radius:14px; cursor:pointer; transition:all .15s; }
.exec-view:hover { background:#eef1f4; transform:translateY(-2px); border-color:#cbd5e1; }
.exec-view-name { font-size:13px; font-weight:800; color:#1f2937; margin-bottom:5px; }
.exec-view-desc { font-size:11px; color:#64748b; line-height:1.45; }
.exec-view-count { font-family:var(--mono); font-size:17px; color:#334155; font-weight:700; margin-top:10px; }
.exec-delegate-person { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid #d8dde3; background:#f7f8fa; border-radius:14px; }
.exec-person-left { display:flex; align-items:center; gap:10px; min-width:0; }
.exec-person-name { font-size:13px; font-weight:750; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.exec-person-meta { font-size:11px; color:#64748b; }
.exec-actions { display:flex; gap:6px; flex-wrap:wrap; }
.exec-action-btn { border:1px solid #cbd5e1; background:#f8fafc; color:#334155; border-radius:8px; padding:6px 10px; font-size:11px; font-weight:700; cursor:pointer; }
.exec-action-btn:hover { background:#e9edf2; }
@media (max-width: 768px) { .exec-grid,.exec-mini-grid { grid-template-columns:1fr !important; } }
/* ===== Extracted from index-split-phase2.html ===== */
/* Safe area insets for phones with notch/home indicator */
@supports(padding: env(safe-area-inset-bottom)) {
#mobile-tabs { padding-bottom:env(safe-area-inset-bottom); height:calc(60px + env(safe-area-inset-bottom)); }
#main { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
#mob-more-drawer { bottom:calc(60px + env(safe-area-inset-bottom)); }
}
/* ===== Extracted from index-split-phase2.html ===== */
/* ──────────────────────────────────────────────────────────────
EXECUTION OS VISUAL SYSTEM v1
Calm gray workspace + #334155 brand system + responsive polish
────────────────────────────────────────────────────────────── */
html, body { background: var(--bg) !important; }
#app, #main { background: var(--bg) !important; }
.slogo-txt { color:#27313f !important; }
.nbadge { background:var(--nbadge-bg) !important; }
.stoggle { border-top-color:var(--tbtn-border) !important; color:var(--stoggle-color) !important; }
.tb-title { color:#1f2937 !important; }
.tb-quote,.tb-quote-2 { color:#64748b !important; }
.focus-pill,
.streak-pill,
#user-pill {
background:#e4e9ef !important;
border:1px solid #d1d9e3 !important;
color:#334155 !important;
box-shadow:none !important;
}
.focus-pill:hover,
#user-pill:hover,
.streak-pill:hover { background:#dce3eb !important; border-color:#c5cfda !important; }
.fp-lbl,.streak-n,.streak-lbl { color:#334155 !important; }
.streak-ico svg { stroke:#5f8f73 !important; }
#content { background:var(--bg) !important; }
.tbl-wrap,.cc,.exec-card,.profile-card,.briefing-card,.notif-card,.tb-unscheduled,
#panel,.fod-card,.admin-modal-card,#cbox {
background:#f2f4f7 !important;
border-color:#d2dae4 !important;
box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
}
.tbl thead th { background:#e8edf3 !important; color:#536174 !important; }
.tbl tbody tr { border-bottom-color:#d7dfe8 !important; }
.tbl tbody tr:hover { filter:none !important; background:#e8edf3 !important; transform:none !important; box-shadow:none !important; }
.sec-line { background:#d2dae4 !important; }
.sec-title { color:#334155 !important; }
.sec-cnt,.sheet-tag,.sort-indicator,.exec-pill {
background:#e4e9ef !important;
border-color:#d1d9e3 !important;
color:#536174 !important;
}
/* Muted KPI dashboard system */
.kpi-card,
.skpi,
.skpi-feat {
background: linear-gradient(135deg,var(--kpi-card-bg-1) 0%,var(--kpi-card-bg-2) 100%) !important;
border:1px solid var(--kpi-card-border) !important;
box-shadow:var(--shadow) !important;
}
.kpi-card::before,.kpi-card::after,.skpi::before,.skpi-feat::before { opacity:.35 !important; }
.kpi-card:hover,.skpi:hover,.skpi-feat:hover { transform:translateY(-1px) !important; box-shadow:0 6px 16px rgba(15,23,42,.07) !important; }
.kpi-value,.skpi-v,.kpi-donut-label,.briefing-stat-val { color:#1f2937 !important; text-shadow:none !important; }
.kpi-label,.skpi-l,.briefing-stat-lbl { color:#64748b !important; }
.kpi-sub,.briefing-focus-lbl,.briefing-focus-val { color:#536174 !important; }
.kpi-ico { color:#64748b !important; }
.kpi-progress-wrap { background:rgba(51,65,85,.10) !important; }
.kpi-donut-bg { stroke:rgba(51,65,85,.12) !important; }
.kpi-donut-fg { stroke:#334155 !important; }
/* Forms and buttons */
.fi,.fs,.fta,.fsel,.di,.profile-input,.profile-textarea,#cinput,#comment-input {
background:var(--input-bg) !important;
border-color:var(--input-border) !important;
color:var(--input-color) !important;
}
.fi:focus,.fs:focus,.fta:focus,.fsel:focus,.di:focus,.profile-input:focus,.profile-textarea:focus,#comment-input:focus {
border-color:#94a3b8 !important;
box-shadow:0 0 0 3px rgba(51,65,85,.10) !important;
}
.btn { white-space:nowrap !important; min-height:36px !important; }
.btn-p,
button.btn-p,
#panel .btn-p,
.thread-comment-box .btn-p {
background:#334155 !important;
border:1px solid #334155 !important;
color:#fff !important;
box-shadow:none !important;
}
.btn-p:hover,
#panel .btn-p:hover,
.thread-comment-box .btn-p:hover { background:var(--panel-btn-primary-bg-hover) !important; border-color:var(--panel-btn-primary-bg-hover) !important; }
.btn-g,.wbtn,.notif-btn,.fm-reset,.fm-save {
background:#e8edf3 !important;
color:#334155 !important;
border:1px solid #cfd7e2 !important;
box-shadow:none !important;
}
.btn-g:hover,.wbtn:hover,.notif-btn:hover { background:#dfe6ee !important; color:#1f2937 !important; }
.wbtn.on,.notif-btn.primary { background:#334155 !important; color:#fff !important; border-color:#334155 !important; }
.btn-d { background:transparent !important; color:#9a4f4f !important; border:1px solid #d9aaaa !important; }
.btn-d:hover { background:#efe1e1 !important; color:#7f3f3f !important; border-color:#c98d8d !important; }
.btn-s,.fm-start { background:#e5ece7 !important; color:#355a43 !important; border:1px solid #bed0c5 !important; }
.btn-s:hover,.fm-start:hover { background:#d9e5dd !important; color:#274433 !important; }
/* Profile polish */
.profile-wrap { max-width:1080px !important; grid-template-columns:320px 1fr !important; }
.profile-card { background:#eef2f6 !important; }
.profile-photo-actions,.profile-save-row { flex-wrap:nowrap !important; }
.profile-photo-actions .btn,.profile-save-row .btn { white-space:nowrap !important; min-width:max-content !important; height:38px !important; padding:0 14px !important; }
.avatar-lg { width:96px !important; height:96px !important; max-width:96px !important; max-height:96px !important; object-fit:cover !important; }
.avatar-img,.avatar-fallback { background:#dbe3ea !important; color:#334155 !important; border-color:#cbd5df !important; }
/* Execution OS cards */
.exec-card { background:#f1f4f7 !important; }
.exec-card.soft,.exec-metric,.exec-row { background:#e8edf3 !important; border-color:#d2dae4 !important; }
.exec-row:hover { background:#dfe6ee !important; }
.exec-rank { background:#d6dee8 !important; color:#334155 !important; }
.exec-metric-v,.exec-title,.exec-row-title { color:#1f2937 !important; }
.exec-kicker,.exec-sub,.exec-row-meta,.exec-metric-l { color:#64748b !important; }
/* Status/priority tones: preserve meaning without saturation */
.s-Open,.s-Up-Next { background:#e7ecf3 !important; color:#334155 !important; border-color:#cfd7e2 !important; }
.s-In-Progress,.s-To-Be-Tested { background:#e7eef0 !important; color:#4f6870 !important; border-color:#cbdadd !important; }
.s-In-Review { background:#ece9ef !important; color:#5f5a70 !important; border-color:#d9d4e0 !important; }
.s-On-Hold { background:#eee9df !important; color:#6f6045 !important; border-color:#ded5c4 !important; }
.s-Delayed { background:#eee4dc !important; color:#7a5a43 !important; border-color:#ddcab9 !important; }
.s-Closed { background:#e2ebe5 !important; color:#355a43 !important; border-color:#c7d8ce !important; }
.s-Cancelled { background:#e5e7eb !important; color:#64748b !important; border-color:#d1d5db !important; }
tr[data-status] { background:#f1f4f7 !important; }
tr[data-status="Closed"] { background:#edf3ef !important; }
tr[data-status="Delayed"],tr[data-status="Overdue"] { background:#f3edeb !important; }
/* Loading/login must fully cover the app */
#loading:not(.out) { opacity:1 !important; pointer-events:all !important; }
#loading:not(.out) + #app { visibility:hidden !important; }
/* Toast readability above modals */
#toasts,.toast { z-index:100000 !important; }
.t-ok { background:#e2ebe5 !important; color:#355a43 !important; border-color:#c7d8ce !important; }
.t-err { background:#f0e1e1 !important; color:#8a4444 !important; border-color:#d9aaaa !important; }
.t-inf { background:#e7ecf3 !important; color:#334155 !important; border-color:#cfd7e2 !important; }
@media (max-width: 1024px) {
#topbar { padding:0 12px !important; gap:8px !important; }
.focus-pill { max-width:180px !important; }
.exec-grid { grid-template-columns:1fr !important; }
.exec-mini-grid { grid-template-columns:repeat(2,1fr) !important; }
.profile-wrap { grid-template-columns:1fr !important; max-width:760px !important; }
}
@media (max-width: 768px) {
html,body { width:100%; overflow-x:hidden !important; }
.tb-datequote,.focus-pill,.streak-pill { display:none !important; }
#user-role-badge { display:none !important; }
.page {
padding: 8px 0 16px !important;
overflow-x: hidden;
padding-left: 0 !important;
padding-right: 0 !important;
}
.exec-row { padding:10px !important; }
.avatar-lg { width:78px !important; height:78px !important; max-width:78px !important; max-height:78px !important; font-size:24px !important; }
.profile-photo-actions .btn { min-width:0 !important; width:100% !important; font-size:12px !important; padding:0 10px !important; }
.profile-save-row .btn { width:100% !important; min-width:0 !important; }
#panel {
top: auto !important;
bottom: 0 !important;
right: 0 !important;
left: 0 !important;
transform: translateY(100%) !important;
border-radius: 20px 20px 0 0 !important;
border-left: none !important;
border-top: 1px solid var(--border) !important;
z-index: 600 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 92dvh !important;
}
.ph,.pf { padding-left:14px !important; padding-right:14px !important; }
.pb { padding:14px !important; }
.panel-tabs-wrap { position:sticky !important; top:0 !important; z-index:2 !important; }
.fg2 { grid-template-columns:1fr !important; }
#covl { padding:64px 10px 0 !important; }
#cbox { width:100% !important; }
.admin-modal-card,.fod-card { width:100% !important; max-width:100% !important; max-height:92dvh !important; border-radius:18px 18px 0 0 !important; }
.cgrid { grid-template-columns:1fr !important; }
.cc {
padding: 10px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}
}
/* =========================================================
VISUAL SYSTEM v1.1 FIXES — contrast, muted stats, status tints, mobile
========================================================= */
html,body,#app,#main,#content { color: var(--ink) !important; }
.nitem:hover {
background: var(--nitem-hover-bg) !important;
color: var(--text1) !important;
}
.nitem.on {
background: var(--nitem-active-bg) !important;
color: var(--brand) !important;
border-left-color: var(--brand) !important;
}
.sdivider {
height: 1px;
margin: 6px 10px;
background: var(--shell-border-2) !important;
}
.slogo {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: none !important;
background: var(--brand) !important;
}
/* Dashboard and stats contrast repair */
.briefing-card,.kpi-card,.skpi,.skpi-feat,.cc,.tbl-wrap,.exec-card,.profile-card{
background:linear-gradient(135deg,var(--card-bg-real-1) 0%,var(--card-bg-real-2) 100%)!important;
border:1px solid var(--line)!important;
box-shadow:0 1px 2px rgba(15,23,42,.04), inset 0 1px 0 var(--card-inset-highlight)!important;
}
.kpi-card::before,.kpi-card::after,.skpi::before,.skpi-feat::before{display:none!important;}
.kpi-value,.skpi-v,.kpi-donut-label,.briefing-stat-val,
.skpi-feat [style*="font-size:72px"],.skpi [style*="font-size:38px"]{
color:#1f2937!important;text-shadow:none!important;letter-spacing:.01em!important;
}
.kpi-label,.skpi-l,.briefing-stat-lbl,.skpi [style*="text-transform:uppercase"],.skpi-feat [style*="text-transform:uppercase"]{
color:#5b6a7e!important;text-shadow:none!important;
}
.kpi-sub,.briefing-focus-val,.briefing-focus-lbl,.briefing-focus [style],.kpi-card [style*="rgba(255,255,255"]{
color:#5f6f83!important;text-shadow:none!important;
}
.kpi-ico,.kpi-ico svg{color:#64748b!important;stroke:#64748b!important;opacity:.95!important;}
.vel-pill{background:#dce3eb!important;color:#334155!important;border:1px solid #cfd8e3!important;}
/* Stats cards: muted, readable, no old stark gradients */
#stats-kpi .skpi,#stats-kpi .skpi-feat { background: linear-gradient(135deg,#eef2f6,#e3e9f0) !important; }
#stats-kpi .skpi:nth-child(1),#stats-kpi .skpi-feat{background:linear-gradient(135deg,#eef2f6,#dfe6ee)!important;}
#stats-kpi .skpi-v,#stats-kpi .skpi-l,#stats-kpi .skpi div,#stats-kpi .skpi-feat div,#stats-kpi span{
color:#1f2937!important;text-shadow:none!important;
}
#stats-kpi .skpi-l,#stats-kpi .skpi div:first-child,#stats-kpi .skpi-feat div:first-child,#stats-kpi .skpi-feat div:last-child{
color:#5b6a7e!important;
}
/* removed: broad stats-kpi sibling gradient overrides that stomped health cards */
/* Project health: remove stark color blocks while preserving health meaning */
/* removed: health-grid > div wildcard overrides that blocked all card styling */
/* Restore refined status row tints — subtle but distinctive */
.tbl tbody tr[data-status="Open"]{background:#eef3f8!important;}
.tbl tbody tr[data-status="In Progress"]{background:#eaf3f4!important;}
.tbl tbody tr[data-status="In Review"]{background:#f0edf3!important;}
.tbl tbody tr[data-status="To Be Tested"]{background:#f1eee8!important;}
.tbl tbody tr[data-status="On Hold"]{background:#f2ecdf!important;}
.tbl tbody tr[data-status="Delayed"]{background:#f3e9e6!important;}
.tbl tbody tr[data-status="Cancelled"]{background:#ebedf0!important;}
.tbl tbody tr[data-status="Up Next"]{background:#e8eef6!important;}
.tbl tbody tr[data-status="Closed"]{background:#e8f0eb!important;}
.tbl tbody tr[data-status="Open"] td{color:#334155!important;}
.tbl tbody tr[data-status="In Progress"] td{color:#315d65!important;}
.tbl tbody tr[data-status="In Review"] td{color:#5f5a70!important;}
.tbl tbody tr[data-status="To Be Tested"] td{color:#695843!important;}
.tbl tbody tr[data-status="On Hold"] td{color:#6e5d3f!important;}
.tbl tbody tr[data-status="Delayed"] td{color:#7b5148!important;}
.tbl tbody tr[data-status="Cancelled"] td{color:#64748b!important;}
.tbl tbody tr[data-status="Up Next"] td{color:#344b69!important;}
.tbl tbody tr[data-status="Closed"] td{color:#355a43!important;}
.tbl tbody tr[data-status]:hover{background:#dde5ee!important;}
/* Weekly review header and progress */
#wrev-modal > div > div:first-child{background:linear-gradient(135deg,#334155,#263445)!important;}
#wrev-progress-bar{background:linear-gradient(90deg,#334155,#52657c)!important;}
/* Command palette: professional icon treatment */
.citem-icon{width:24px!important;height:24px!important;border:1px solid #cfd8e3!important;background:#e8edf3!important;border-radius:7px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#334155!important;font-size:0!important;}
.citem-icon svg{width:14px!important;height:14px!important;stroke:#334155!important;stroke-width:1.8!important;fill:none!important;}
.citem-sheet{background:#dfe6ee!important;color:#334155!important;border:1px solid #cfd8e3!important;}
/* Mobile login and avatar repair */
body:has(#loading:not(.out)) #app{display:none!important;}
#loading > div{max-width:min(400px,92vw)!important;}
#user-pill img,.activity-avatar img,.avatar-img{max-width:32px!important;max-height:32px!important;width:28px!important;height:28px!important;object-fit:cover!important;border-radius:999px!important;}
.avatar-lg,.avatar-lg img,#profile-avatar-large{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;object-fit:cover!important;border-radius:999px!important;}
@media (max-width: 768px) {
#loading > div{width:92vw!important;max-width:360px!important;padding:28px 22px!important;}
.avatar-lg,.avatar-lg img,#profile-avatar-large{width:72px!important;height:72px!important;max-width:72px!important;max-height:72px!important;}
.avatar-img:not(.avatar-lg),#user-pill img,.activity-avatar img{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;}
.kpi-card,.skpi,.skpi-feat{min-height:auto!important;}
#stats-kpi > div{grid-template-columns:1fr!important;}
[style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:1fr!important;}
}
/* =========================================================
VISUAL SYSTEM v1.2 — depth, mood tints, stats/habits/mobile polish
========================================================= */
html,body,#app,#main,#content{background:linear-gradient(180deg,#e8edf3 0%,#e3e9f0 100%)!important;}
.tbl-wrap,.cc,.exec-card,.profile-card,.briefing-card,.notif-card,.admin-modal-card,#cbox,#panel,.fod-card,.kpi-card,.skpi,.skpi-feat{
box-shadow:var(--premium-shadow)!important;
border-color:var(--premium-line)!important;
}
.tbl-wrap:hover,.cc:hover,.exec-card:hover,.profile-card:hover,.kpi-card:hover,.skpi:hover,.skpi-feat:hover{
box-shadow:var(--premium-shadow-hover)!important;
transform:translateY(-1px)!important;
}
/* Top briefing: readable salutation and visible separators */
.briefing-card *{text-shadow:none!important;}
.briefing-card [style*="color:rgba(255,255,255"],
.briefing-card [style*="color:#fff"],
.briefing-card [style*="color: #fff"]{color:#243041!important;}
.briefing-card .briefing-stat-lbl,
.briefing-card [style*="letter-spacing"]{color:#64748b!important;}
.briefing-card .briefing-focus-lbl{color:#5b6a7e!important;}
.briefing-divider,
.briefing-card [style*="width:1px"]{background:#c9d4df!important;opacity:1!important;}
/* Main dashboard KPI cards: differentiated soft mood surfaces */
#page-dashboard .kpi-card{position:relative;overflow:hidden;border:1px solid var(--premium-line)!important;}
#page-dashboard .kpi-card::before{content:''!important;display:block!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 88% 18%,rgba(255,255,255,.62),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0))!important;opacity:.85!important;pointer-events:none!important;}
#page-dashboard .kpi-card::after{content:''!important;display:block!important;position:absolute!important;left:0;right:0;top:0;height:3px!important;border-radius:18px 18px 0 0!important;opacity:.75!important;}
#page-dashboard .kpi-card:nth-of-type(1)::after{background:#7894a1!important;}
#page-dashboard .kpi-card:nth-of-type(2)::after{background:#7d8fa6!important;}
#page-dashboard .kpi-card:nth-of-type(3)::after{background:#b58a8a!important;}
#page-dashboard .kpi-card:nth-of-type(4)::after{background:#8b7aa0!important;}
#page-dashboard .kpi-card:nth-of-type(5)::after{background:#78967f!important;}
#page-dashboard .kpi-card:nth-of-type(6)::after{background:#b49a72!important;}
#page-dashboard .kpi-card .kpi-value,#page-dashboard .kpi-card .kpi-label,#page-dashboard .kpi-card .kpi-sub{position:relative;z-index:1;}
#page-dashboard .kpi-ico{position:relative;z-index:1;color:#66758a!important;}
/* Stronger readable progress bars */
.kpi-progress-wrap,.kpi-card [style*="height:8px"]{background:#ccd7e2!important;border-radius:999px!important;}
.kpi-progress-bar,#pb-done,#pb-remaining{background:#77879a!important;box-shadow:none!important;}
#pb-overdue{background:#a87979!important;}
/* Stats page: rebuild mood treatment and fix broken record cards */
#page-stats .skpis .skpi,#page-stats .skpis .skpi-feat,#stats-kpi .skpi,#stats-kpi .skpi-feat{
background:linear-gradient(135deg,#eef3f9,#dfe7f1)!important;
border:1px solid var(--premium-line)!important;
box-shadow:var(--premium-shadow)!important;
color:#1f2937!important;
min-height:108px!important;
}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div{
background:linear-gradient(135deg,#eef2f6,#e3e9f0)!important;
border:1px solid var(--premium-line)!important;
border-top:3px solid #8c9aad!important;
border-radius:14px!important;
box-shadow:var(--premium-shadow)!important;
color:#1f2937!important;
overflow:hidden!important;
position:relative!important;
}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div::before{
content:'';position:absolute;right:-20px;top:-28px;width:120px;height:120px;border-radius:999px;background:rgba(255,255,255,.34);pointer-events:none;
}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(1){background:linear-gradient(135deg,#edf5ef,#dfece4)!important;border-top-color:#78967f!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(2){background:linear-gradient(135deg,#f5eeee,#eadbdb)!important;border-top-color:#b58a8a!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(3){background:linear-gradient(135deg,#f1f2f4,#d9dde2)!important;border-top-color:#8a94a1!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(4){background:linear-gradient(135deg,#f5f0e7,#e9dfcf)!important;border-top-color:#b49a72!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(5){background:linear-gradient(135deg,#f2eff7,#e4deed)!important;border-top-color:#8b7aa0!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div:nth-child(6){background:linear-gradient(135deg,#edf5f6,#dae9ec)!important;border-top-color:#7894a1!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div *{color:#1f2937!important;text-shadow:none!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div [style*="text-transform"],
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"] > div [style*="font-size:10px"]{color:#5b6a7e!important;}
/* Same premium card pattern, extended to the merged 7-card KPI+Records
row — reuses the identical top-border + corner-bubble treatment
already established for Action Center's Universe Suggests cards,
rather than inventing a second visual language for this page. */
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div{
background:linear-gradient(135deg,#eef2f6,#e3e9f0)!important;
border:1px solid var(--premium-line)!important;
border-top:3px solid #8c9aad!important;
border-radius:14px!important;
box-shadow:var(--premium-shadow)!important;
color:#1f2937!important;
overflow:hidden!important;
position:relative!important;
padding:13px 14px!important;
}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div::before{
content:'';position:absolute;right:-20px;top:-28px;width:120px;height:120px;border-radius:999px;background:rgba(255,255,255,.34);pointer-events:none;
}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(1){background:linear-gradient(135deg,#eef2f9,#dfe7f1)!important;border-top-color:#7686a8!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(2){background:linear-gradient(135deg,#edf5ef,#dfece4)!important;border-top-color:#78967f!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(3){background:linear-gradient(135deg,#f1f2f4,#d9dde2)!important;border-top-color:#8a94a1!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(4){background:linear-gradient(135deg,#f2eff7,#e4deed)!important;border-top-color:#8b7aa0!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(5){background:linear-gradient(135deg,#f5f0e7,#e9dfcf)!important;border-top-color:#c3a76f!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(6){background:linear-gradient(135deg,#f5eeee,#eadbdb)!important;border-top-color:#b58a8a!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div:nth-child(7){background:linear-gradient(135deg,#edf5f6,#dae9ec)!important;border-top-color:#7894a1!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div *{color:#1f2937!important;text-shadow:none!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-l,
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-sub{color:#5b6a7e!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-v{font-size:26px!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-delta.up{color:#1a8a4a!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-delta.down{color:#c23a3a!important;}
#page-stats div[style*="grid-template-columns:repeat(7,1fr)"] > div .skpi-delta.flat{color:#5b6a7e!important;}
/* Project health mood bars */
/* removed: health-grid > div overflow+after rules */
/* Habit page premium cards */
#page-habits{padding-left:14px!important;padding-right:14px!important;}
#page-habits > div:first-child{padding-left:4px!important;padding-right:4px!important;}
#habit-grid-page > div{
background:linear-gradient(135deg,#eef3f9,#dfe7f1)!important;
border:1px solid var(--premium-line)!important;
box-shadow:var(--premium-shadow)!important;
color:#1f2937!important;
}
#habit-grid-page > div:nth-child(2n){background:linear-gradient(135deg,#edf5ef,#dfece4)!important;}
#habit-grid-page > div:nth-child(3n){background:linear-gradient(135deg,#f5f0e7,#e9dfcf)!important;}
#habit-grid-page > div:nth-child(4n){background:linear-gradient(135deg,#f2eff7,#e4deed)!important;}
#habit-grid-page > div *{color:#1f2937!important;text-shadow:none!important;}
#habit-grid-page > div [style*="text-transform"],#habit-grid-page > div [style*="font-size:9px"],#habit-grid-page > div [style*="font-size:10px"]{color:#5b6a7e!important;}
/* Page title padding for edge-heavy pages */
#page-profile > div:first-child,#page-yearreview > div:first-child,#page-timeblock > div:first-child,#page-habits > div:first-child{padding-left:14px!important;padding-right:14px!important;}
/* Admin modals must appear above mobile tabs/drawers and fit small screens */
#add-client-modal,#client-manager-modal,#csv-import-modal,#add-context-modal,#context-manager-modal{z-index:120000!important;position:fixed!important;inset:0!important;}
#add-client-modal[style*="display:none"],#client-manager-modal[style*="display:none"],#csv-import-modal[style*="display:none"],#add-context-modal[style*="display:none"],#context-manager-modal[style*="display:none"]{display:none!important;}
#add-client-modal:not([style*="display:none"]),#client-manager-modal:not([style*="display:none"]),#csv-import-modal:not([style*="display:none"]),#add-context-modal:not([style*="display:none"]),#context-manager-modal:not([style*="display:none"]){display:flex!important;}
.admin-modal-card{width:min(720px,94vw)!important;max-height:88dvh!important;}
.admin-modal-body{overscroll-behavior:contain!important;}
/* Mobile: profile, modals, login, and spacing */
@media (max-width: 768px) {
body,html{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
#page-profile,#page-yearreview,#page-timeblock,#page-habits{padding-left:0!important;padding-right:0!important;}
#page-profile > div:first-child,#page-yearreview > div:first-child,#page-timeblock > div:first-child,#page-habits > div:first-child{padding-left:16px!important;padding-right:16px!important;}
.profile-photo-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
gap: 8px !important;
}
.profile-photo-actions .btn,.profile-save-row .btn{width:100%!important;min-width:0!important;white-space:nowrap!important;height:38px!important;font-size:12px!important;padding:0 10px!important;}
.profile-save-row {
flex-direction: column;
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
gap: 8px !important;
}
#add-client-modal,#client-manager-modal,#csv-import-modal,#add-context-modal,#context-manager-modal{align-items:flex-end!important;justify-content:center!important;padding:0!important;background:rgba(15,23,42,.34)!important;backdrop-filter:blur(6px)!important;}
.admin-modal-card {
width: 100vw !important;
max-width: 100vw !important;
max-height: 92dvh !important;
border-radius: 20px 20px 0 0 !important;
margin: 0 !important;
}
.admin-modal-head,.admin-modal-body,.admin-modal-foot{padding-left:14px!important;padding-right:14px!important;}
.admin-modal-foot{display:grid!important;grid-template-columns:1fr!important;}
#loading:not(.out)+#app{display:none!important;visibility:hidden!important;}
#loading > div:not(.l-splash-inner):not(.l-loader-wrap){max-width:92vw!important;}
#user-pill img,.avatar-img:not(.avatar-lg),.activity-avatar img{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;object-fit:cover!important;border-radius:999px!important;}
#page-stats > div[style*="grid-template-columns:repeat(6,1fr)"]{display:grid!important;grid-template-columns:1fr!important;padding:0 10px!important;gap:10px!important;}
#page-stats .sbar{padding-left:10px!important;padding-right:10px!important;}
#habit-grid-page{grid-template-columns:1fr!important;padding:0 2px 96px!important;gap:12px!important;}
}
/* === Visual System v1.3 targeted refinements === */
.briefing-card .briefing-divider,.briefing-card [style*="width:1px"]{display:block!important;width:1px!important;min-height:48px!important;background:linear-gradient(to bottom,transparent,#b9c5d2 18%,#b9c5d2 82%,transparent)!important;opacity:1!important;flex:0 0 1px!important;}
.briefing-card [style*="border-left:1px"]{border-left:1px solid #b9c5d2!important;}
.briefing-card [style*="rgba(255,255,255"],.briefing-card [style*="color:#fff"]{color:#334155!important;text-shadow:none!important;}
.briefing-card .briefing-stat-val{color:#1f2a37!important;text-shadow:none!important;}
.briefing-card .briefing-stat-lbl,.briefing-card .briefing-focus-lbl{color:#617089!important;}
.briefing-card .briefing-focus-val{color:#334155!important;}
.kpi-card,.exec-card,.exec-metric,.skpi,.skpi-feat,#page-stats .skpis .skpi,#page-stats .skpis .skpi-feat{box-shadow:var(--mood-shadow)!important;border:1px solid var(--mood-border)!important;}
.kpi-card:hover,.exec-card:hover,.exec-metric:hover,.skpi:hover,.skpi-feat:hover{box-shadow:var(--mood-shadow-hover)!important;transform:translateY(-1px)!important;}
.kpi-card::after,.exec-card::after,.exec-metric::after,.skpi::after,.skpi-feat::after{content:'';position:absolute;right:-42px;top:-52px;width:130px;height:130px;border-radius:999px;background:rgba(255,255,255,.32);pointer-events:none;}
.kpi-card,.exec-card,.exec-metric,.skpi,.skpi-feat{position:relative;overflow:hidden;}
.kpi-card *,.exec-card *,.exec-metric *,.skpi *,.skpi-feat *{position:relative;z-index:1;}
.kpi-card .kpi-value,.kpi-card .kpi-label,.kpi-card .kpi-sub,.kpi-card .kpi-ico,.kpi-card [style*="color:rgba(255,255,255"],.kpi-card [style*="color:#fff"]{color:#243041!important;text-shadow:none!important;}
.kpi-card .kpi-label,.kpi-card .kpi-sub{color:#64748b!important;}
.kpi-card .kpi-progress-wrap,.kpi-card [style*="height:8px"]{background:rgba(51,65,85,.12)!important;}
.kpi-card .kpi-progress-bar,#pb-done,#pb-remaining,#pb-open,#pb-overdue{background:linear-gradient(90deg,#64748b,#334155)!important;box-shadow:none!important;}
.kpi-card:nth-of-type(1){background:linear-gradient(135deg,#edf3f8 0%,#e3edf4 100%)!important;}
.kpi-card:nth-of-type(2){background:linear-gradient(135deg,#edf5f1 0%,#e1ece6 100%)!important;}
.kpi-card:nth-of-type(3){background:linear-gradient(135deg,#f4ecec 0%,#eadfdf 100%)!important;}
.exec-mini-grid .exec-metric:nth-child(1){background:linear-gradient(135deg,#edf2f7,#e5ecf3)!important;}
.exec-mini-grid .exec-metric:nth-child(2){background:linear-gradient(135deg,#f5ecec,#ede3e3)!important;}
.exec-mini-grid .exec-metric:nth-child(3){background:linear-gradient(135deg,#eef5f1,#e5ede9)!important;}
.exec-mini-grid .exec-metric:nth-child(4){background:linear-gradient(135deg,#f5f0e8,#ede8dc)!important;}
#page-command .exec-grid .exec-card:nth-child(1),#page-command .exec-stack:nth-child(1) .exec-card:nth-child(1){background:linear-gradient(135deg,#edf2f7,#e5ecf3)!important;}
#saved-view-grid .exec-card:nth-child(8n+1){background:linear-gradient(135deg,#edf2f7,#e5ecf3)!important;}
#saved-view-grid .exec-card:nth-child(8n+2){background:linear-gradient(135deg,#eef5f1,#e5ede9)!important;}
#saved-view-grid .exec-card:nth-child(8n+3){background:linear-gradient(135deg,#f5f0e8,#ede8dc)!important;}
#saved-view-grid .exec-card:nth-child(8n+4){background:linear-gradient(135deg,#f0ecf7,#e8e3f0)!important;}
#saved-view-grid .exec-card:nth-child(8n+5){background:linear-gradient(135deg,#ecf4f5,#e3ecee)!important;}
#saved-view-grid .exec-card:nth-child(8n+6){background:linear-gradient(135deg,#f5ecec,#ede3e3)!important;}
#saved-view-grid .exec-card:nth-child(8n+7){background:linear-gradient(135deg,#f0f3f7,#e8ecf2)!important;}
#saved-view-grid .exec-card:nth-child(8n+8){background:linear-gradient(135deg,#f0f3f7,#e8ecf2)!important;}
#stats-kpi > div:first-child{grid-template-columns:1.15fr 1fr 1fr!important;align-items:stretch!important;}
#stats-kpi .skpi-feat .stat-feature-meta{display:flex!important;align-items:center!important;gap:18px!important;width:100%!important;}
#stats-kpi .stat-feature-icon{margin-left:auto;width:54px;height:54px;border-radius:18px;border:1px solid #cbd5df;background:rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;color:#334155;}
#stats-kpi .skpi,#stats-kpi .skpi-feat{color:#243041!important;text-shadow:none!important;}
#stats-kpi .skpi *,#stats-kpi .skpi-feat *{color:#243041!important;text-shadow:none!important;}
#stats-kpi .skpi-l,#stats-kpi .stat-subtle{color:#64748b!important;}
#stats-kpi .skpi:nth-child(2){background:linear-gradient(135deg,#eef5f1,#e5ede9)!important;}
#stats-kpi .skpi:nth-child(3){background:linear-gradient(135deg,#f5f0e8,#ede8dc)!important;}
#stats-kpi .skpi:nth-child(4){background:linear-gradient(135deg,#edf2f7,#e5ecf3)!important;}
#stats-kpi .skpi:nth-child(5){background:linear-gradient(135deg,#f0ecf7,#e8e3f0)!important;}
#stats-kpi .skpi:nth-child(6){background:linear-gradient(135deg,#f5ecec,#ede3e3)!important;}
#stats-kpi .skpi:nth-child(7){background:linear-gradient(135deg,#ecf4f5,#e3ecee)!important;}
/* records-row > div scoped — health grid not inside .records-row so this is safe */
#page-stats .records-row > div{min-height:96px!important;padding:14px 16px!important;background:linear-gradient(135deg,#f2f5f8,#e5ebf1)!important;color:#243041!important;text-shadow:none!important;border:1px solid #cbd5df!important;box-shadow:var(--mood-shadow)!important;border-radius:14px!important;overflow:hidden!important;}
#page-stats .records-row > div:nth-child(1){background:linear-gradient(135deg,#eef5f1,#e5ede9)!important;border-top:3px solid #8ba99b!important;}
#page-stats .records-row > div:nth-child(2){background:linear-gradient(135deg,#f5ecec,#ede3e3)!important;border-top:3px solid #b99292!important;}
#page-stats .records-row > div:nth-child(3){background:linear-gradient(135deg,#f0f3f7,#e8ecf2)!important;border-top:3px solid #93a0b1!important;}
#page-stats .records-row > div:nth-child(4){background:linear-gradient(135deg,#f5f0e8,#ede8dc)!important;border-top:3px solid #c3a76f!important;}
#page-stats .records-row > div:nth-child(5){background:linear-gradient(135deg,#f0ecf7,#e8e3f0)!important;border-top:3px solid #a394ba!important;}
#page-stats .records-row > div:nth-child(6){background:linear-gradient(135deg,#ecf4f5,#e3ecee)!important;border-top:3px solid #8baab1!important;}
#page-stats .records-row > div *{color:#243041!important;text-shadow:none!important;}
#page-stats .records-row > div [style*="font-size:10px"],#page-stats .records-row > div [style*="font-size:9px"]{color:#64748b!important;}
#page-profile .profile-view-row{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;padding:10px 0;border-bottom:1px solid #d8dde3;}
#page-profile .profile-view-label{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#64748b;}
#page-profile .profile-view-value{font-size:14px;color:#27313f;line-height:1.45;word-break:break-word;}
#page-profile .profile-form-hidden{display:none!important;}
#page-profile .profile-view-card{background:linear-gradient(135deg,#f2f5f8,#e8eef4)!important;}
#page-profile .profile-card{box-shadow:var(--mood-shadow)!important;}
@media (max-width: 768px) {
#page-profile > div:first-child{padding-left:2px!important;padding-right:2px!important;}
#profile-avatar-large,.avatar-lg,.avatar-lg img{width:82px!important;height:82px!important;max-width:82px!important;max-height:82px!important;object-fit:cover!important;border-radius:999px!important;}
.profile-name{font-size:22px!important;line-height:1.15!important;}
.profile-role{font-size:13px!important;line-height:1.35!important;}
.profile-label{font-size:10px!important;display:block!important;margin:0!important;}
#page-profile .profile-view-row{grid-template-columns:1fr!important;gap:4px!important;padding:11px 0!important;}
#page-profile .profile-view-value{font-size:15px!important;}
}
/* ===== Extracted from index-split-phase2.html ===== */
/* ================================
Visual System v1.4 polish fixes
- saved-view mood cards
- alert cards
- stats record card repair
- project health progress bars
- command logo navigation and role icon
================================ */
/* 5. Top-left logo should feel clickable and open Command Center */
.slogo-row{cursor:pointer;border-radius:12px;transition:background .15s ease, transform .15s ease;}
.slogo-row:hover{background:rgba(51,65,85,.06);}
.slogo-row:active{transform:scale(.985);}
/* 6. Replace textual role badge with a restrained symbolic icon */
#user-role-badge{display:none!important;}
.user-role-symbol{
width:24px;height:24px;border-radius:999px;
display:inline-flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#eef2f6,#dfe6ee);
border:1px solid #cbd5df;color:#334155;flex:0 0 24px;
}
.user-role-symbol svg{width:13px;height:13px;stroke-width:2;}
/* 1. One-click task retrieval: soft differentiated cards */
#saved-view-grid .exec-view{
position:relative;overflow:hidden;
border:1px solid var(--mood-border)!important;
box-shadow:var(--surface-depth)!important;
background:linear-gradient(135deg,#f2f5f8 0%,#e6edf4 100%)!important;
min-height:132px;
}
#saved-view-grid .exec-view::after{
content:'';position:absolute;right:-28px;top:-34px;width:116px;height:116px;border-radius:999px;
background:rgba(255,255,255,.35);pointer-events:none;
}
#saved-view-grid .exec-view:hover{transform:translateY(-2px);box-shadow:var(--surface-depth-hover)!important;border-color:#bcc8d4!important;}
#saved-view-grid .exec-view:nth-child(8n+1){background:linear-gradient(135deg,#eef3f8,#dde7f0)!important;}
#saved-view-grid .exec-view:nth-child(8n+2){background:linear-gradient(135deg,#eef5f1,#dfeae4)!important;}
#saved-view-grid .exec-view:nth-child(8n+3){background:linear-gradient(135deg,#f5f0e6,#ebe1d1)!important;}
#saved-view-grid .exec-view:nth-child(8n+4){background:linear-gradient(135deg,#f2eff6,#e6dfed)!important;}
#saved-view-grid .exec-view:nth-child(8n+5){background:linear-gradient(135deg,#eef4f5,#dce9ec)!important;}
#saved-view-grid .exec-view:nth-child(8n+6){background:linear-gradient(135deg,#f5eeee,#eadede)!important;}
#saved-view-grid .exec-view:nth-child(8n+7){background:linear-gradient(135deg,#f2f3ee,#e7eadf)!important;}
#saved-view-grid .exec-view:nth-child(8n+8){background:linear-gradient(135deg,#f1f3f6,#e3e8ee)!important;}
#saved-view-grid .exec-view-name,#saved-view-grid .exec-view-desc,#saved-view-grid .exec-view-count{position:relative;z-index:1;}
#saved-view-grid .exec-view-count{color:#334155!important;}
/* 2. Alerts & Briefing cards: distinct but quiet moods */
.notif-card{
border:1px solid #cbd5df!important;
box-shadow:var(--surface-depth)!important;
border-left:0!important;
position:relative;overflow:hidden;
}
.notif-card::after{content:'';position:absolute;right:-26px;top:-30px;width:100px;height:100px;border-radius:999px;background:rgba(255,255,255,.32);pointer-events:none;}
.notif-card.sev-red{background:linear-gradient(135deg,#f6eeee,#eadfdf)!important;border-color:#d9c5c5!important;}
.notif-card.sev-orange{background:linear-gradient(135deg,#f6f1e8,#ece2d3)!important;border-color:#ddcfba!important;}
.notif-card.sev-yellow{background:linear-gradient(135deg,#f5f2e8,#e9e5d5)!important;border-color:#d8d1b8!important;}
.notif-card.sev-green{background:linear-gradient(135deg,#eef5f1,#e0ebe5)!important;border-color:#c7d8cf!important;}
.notif-card .notif-title{color:#27313f!important;}
.notif-card .notif-desc{color:#5f6b7a!important;}
.notif-dot{box-shadow:none!important;opacity:.72;}
.notif-dot.red{background:#9f6a6a!important;}
.notif-dot.orange{background:#a9875b!important;}
.notif-dot.yellow{background:#9a8e62!important;}
.notif-dot.green{background:#6f927c!important;}
.briefing-card {
border-radius: 14px;
padding: 16px 20px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg,var(--briefing-card-bg-1) 0%,var(--briefing-card-bg-2) 58%,var(--briefing-card-bg-3) 100%) !important;
border: 1px solid var(--mood-border) !important;
color: var(--briefing-card-color) !important;
box-shadow: var(--surface-depth) !important;
}
/* 3. Repair the last three record cards on Stats row */
.records-row{align-items:stretch!important;}
.records-row > div{min-height:112px!important;box-sizing:border-box!important;}
.records-row > div:nth-child(n+4){
position:relative!important;overflow:hidden!important;padding:16px 16px 14px!important;
border:1px solid #cbd5df!important;box-shadow:var(--surface-depth)!important;color:#243041!important;
display:flex!important;flex-direction:column!important;justify-content:center!important;
gap:4px!important;background:linear-gradient(135deg,#f4efe5,#e8decd)!important;
}
.records-row > div:nth-child(5){background:linear-gradient(135deg,#f2eff7,#e5dfed)!important;}
.records-row > div:nth-child(6){background:linear-gradient(135deg,#edf4f5,#dde9ec)!important;}
.records-row > div:nth-child(n+4) > div:first-child{display:none!important;}
.records-row > div:nth-child(n+4)::after{
content:'';position:absolute;right:-26px;top:-34px;width:112px;height:112px;border-radius:999px;background:rgba(255,255,255,.34);pointer-events:none;
}
.records-row > div:nth-child(n+4) [id^="rec-"]{position:relative!important;z-index:1!important;color:#1f2937!important;text-shadow:none!important;line-height:.98!important;}
.records-row > div:nth-child(n+4) [id$="-date"]{font-size:10px!important;color:#5f6b7a!important;margin-top:2px!important;line-height:1.3!important;}
.records-row > div:nth-child(n+4)::before{
position:relative;z-index:1;display:block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#617089;margin-bottom:2px;
}
.records-row > div:nth-child(4)::before{content:'Best Day · Tasks';}
.records-row > div:nth-child(5)::before{content:'Best Day · Hours';}
.records-row > div:nth-child(6)::before{content:'Best Efficiency';}
/* tighten mobile role/header safety */
@media (max-width: 768px) {
.user-role-symbol{width:22px;height:22px;flex-basis:22px;}
#user-pill {
padding: 4px 8px 4px 4px !important;
max-width: 210px !important;
}
#user-name {
max-width: 96px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
/* ===== Extracted from index-split-phase2.html ===== */
/* Dashboard identity card + clean top bar */
#topbar #user-pill{display:none!important;}
.dash-briefing-profile-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:stretch;}
.dash-profile-card{background:linear-gradient(135deg,#eef3f8,#e0e8f0);border:1px solid #cbd5df;border-radius:16px;padding:15px 16px;box-shadow:0 1px 0 rgba(255,255,255,.82) inset,0 12px 28px rgba(31,41,55,.075),0 2px 8px rgba(31,41,55,.045);display:flex;align-items:center;gap:14px;cursor:pointer;min-height:110px;position:relative;overflow:hidden;}
.dash-profile-card::after{content:'';position:absolute;right:-28px;top:-32px;width:112px;height:112px;border-radius:999px;background:rgba(255,255,255,.35);pointer-events:none;}
.dash-profile-card:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.88) inset,0 18px 36px rgba(31,41,55,.10),0 4px 12px rgba(31,41,55,.06);}
.dash-profile-avatar{width:72px!important;height:72px!important;max-width:72px!important;max-height:72px!important;border-radius:999px!important;object-fit:cover!important;border:1px solid #cbd5df!important;background:#dbe3ea!important;color:#334155!important;font-size:22px!important;font-weight:800!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important;position:relative;z-index:1;}
.dash-profile-info{min-width:0;position:relative;z-index:1;}
.dash-profile-kicker{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:4px;}
.dash-profile-name{font-size:17px;font-weight:850;color:#1f2937;line-height:1.15;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-profile-meta{font-size:12px;color:#536174;line-height:1.35;margin-top:4px;}
.dash-profile-action{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.08em;color:#334155;margin-top:9px;}
@media (max-width: 1024px) {.dash-briefing-profile-grid{grid-template-columns:1fr}.dash-profile-card{min-height:auto}}
@media (max-width: 768px) {.dash-profile-card{margin-left:10px;margin-right:10px}.dash-profile-name{font-size:15px}}
/* ===== Extracted from index-split-phase2.html ===== */
/* Restore strategic project health progress bars with the current premium visual language */
#health-grid .health-card-v15{
background:linear-gradient(135deg,#f2f5f8 0%,#e6ebf1 100%) !important;
border:1px solid #cbd5df !important;
border-radius:14px !important;
padding:13px 14px 12px !important;
box-shadow:0 8px 18px rgba(51,65,85,.075), inset 0 1px 0 rgba(255,255,255,.72) !important;
position:relative !important;
overflow:hidden !important;
color:#243041 !important;
flex-shrink:0 !important;
}
#health-grid .health-card-v15:nth-child(4n+1){background:linear-gradient(135deg,#edf5f1 0%,#ddebe5 100%) !important;}
#health-grid .health-card-v15:nth-child(4n+2){background:linear-gradient(135deg,#f5f0e7 0%,#ebe1d2 100%) !important;}
#health-grid .health-card-v15:nth-child(4n+3){background:linear-gradient(135deg,#f1eff6 0%,#e4dfed 100%) !important;}
#health-grid .health-card-v15:nth-child(4n+4){background:linear-gradient(135deg,#edf4f6 0%,#deeaee 100%) !important;}
#health-grid .health-card-v15::after{
content:'';position:absolute;right:-24px;top:-34px;width:112px;height:112px;border-radius:999px;
background:rgba(255,255,255,.28);pointer-events:none;
}
#health-grid .health-card-v15 .health-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1;}
#health-grid .health-card-v15 .health-title{font-size:12px;font-weight:850;color:#27313f;text-transform:uppercase;letter-spacing:.04em;}
#health-grid .health-card-v15 .health-meta{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.09em;margin-top:3px;}
#health-grid .health-card-v15 .health-score{font-family:'Bebas Neue',sans-serif;font-size:31px;line-height:1;color:#243041;min-width:42px;text-align:right;}
#health-grid .health-card-v15 .health-progress-labels{display:flex;justify-content:space-between;align-items:center;margin-top:10px;margin-bottom:5px;font-size:10px;font-weight:700;color:#64748b;position:relative;z-index:1;}
#health-grid .health-card-v15 .health-bar{
display:block !important;height:3.5px !important;border-radius:999px !important;background:rgba(51,65,85,.22) !important;
overflow:hidden !important;position:relative !important;z-index:1 !important;margin-top:0 !important;box-shadow:inset 0 1px 2px rgba(15,23,42,.15) !important;
}
#health-grid .health-card-v15 .health-fill{
display:block !important;height:100% !important;border-radius:999px !important;min-width:6px !important;
background:linear-gradient(90deg,#5c7691 0%,#1c2b3d 100%) !important;box-shadow:0 0 0 1px rgba(0,0,0,.18) !important;
}
#health-grid .health-card-v15[data-health="healthy"] .health-fill{background:linear-gradient(90deg,#4f8069,#1f3d2d) !important;}
#health-grid .health-card-v15[data-health="risk"] .health-fill{background:linear-gradient(90deg,#a3823f,#5c4620) !important;}
#health-grid .health-card-v15[data-health="critical"] .health-fill{background:linear-gradient(90deg,#a34f4f,#5c2323) !important;}
/* Remove duplicate profile/role icon in topbar; replace with quiet role shade indicator */
#user-pill > svg,
#user-pill .user-role-symbol,
#user-role-badge{display:none !important;}
#user-pill.role-manager{
background:linear-gradient(135deg,var(--role-manager-bg-1) 0%,var(--role-manager-bg-2) 100%) !important;
border-color:var(--role-manager-border) !important;
}
#user-pill.role-member{
background:linear-gradient(135deg,var(--role-member-bg-1) 0%,var(--role-member-bg-2) 100%) !important;
border-color:var(--role-member-border) !important;
}
#user-pill .role-shade-indicator{
width:5px;height:28px;border-radius:999px;display:inline-block;flex:0 0 auto;margin-left:2px;margin-right:1px;
background:linear-gradient(180deg,#334155,#708092);opacity:.72;box-shadow:0 0 0 1px rgba(255,255,255,.55) inset;
}
#user-pill.role-member .role-shade-indicator{background:linear-gradient(180deg,#7f8da0,#a2adb8);opacity:.62;}
#user-pill.role-manager .role-shade-indicator{background:linear-gradient(180deg,#334155,#5e7188);opacity:.78;}
.slogo-row{cursor:pointer;}
/* ===== Extracted from index-split-phase2.html ===== */
/* ================================
Visual System v1.6 surgical fixes
- restore Project Health bars safely
- replace topbar role separator with avatar-ring role tinge
- LinkedIn-style subtle profile-page position ribbon
================================ */
/* Hide old role separator treatment completely */
#user-pill .role-shade-indicator,.user-role-symbol,#user-role-badge{display:none!important;}
#user-avatar-pill.avatar-role-manager,
#user-avatar-pill.avatar-role-founder{
border:2px solid var(--text2)!important;
box-shadow:0 0 0 3px var(--role-manager-ring),0 1px 0 rgba(255,255,255,.75) inset!important;
}
#user-avatar-pill.avatar-role-member{
border:2px solid var(--role-member-accent)!important;
box-shadow:0 0 0 3px var(--role-member-ring),0 1px 0 rgba(255,255,255,.75) inset!important;
}
#user-avatar-pill.avatar-role-design{border:2px solid var(--role-design-accent)!important;box-shadow:0 0 0 3px var(--role-design-ring)!important;}
#user-avatar-pill.avatar-role-ops{border:2px solid var(--role-ops-accent)!important;box-shadow:0 0 0 3px var(--role-ops-ring)!important;}
.profile-avatar-ribbon{position:relative;display:inline-flex;width:104px;height:104px;align-items:center;justify-content:center;overflow:visible;}
.profile-avatar-ribbon #profile-avatar-large{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;}
.profile-avatar-ribbon::before{
content:attr(data-label);
position:absolute;left:5px;right:5px;bottom:2px;height:28px;border-radius:0 0 999px 999px;
display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
font-size:8px;font-weight:850;letter-spacing:.11em;text-transform:uppercase;color:var(--white);
background:linear-gradient(135deg,var(--role-accent,#334155),color-mix(in srgb,var(--role-accent,#334155) 72%,#ffffff 28%));
clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);opacity:.94;pointer-events:none;
}
.profile-avatar-ribbon.role-founder{--role-accent:var(--text2);}
.profile-avatar-ribbon.role-manager{--role-accent:var(--role-manager-accent);}
.profile-avatar-ribbon.role-design{--role-accent:var(--role-design-accent);}
.profile-avatar-ribbon.role-ops{--role-accent:var(--role-ops-accent);}
.profile-avatar-ribbon.role-member{--role-accent:var(--role-member-accent);}
@media (max-width: 768px) {.profile-avatar-ribbon{width:90px;height:90px}.profile-avatar-ribbon #profile-avatar-large{width:82px!important;height:82px!important}.profile-avatar-ribbon::before{height:24px;font-size:7px;padding-bottom:4px;}}
/* ===== Extracted from index-split-phase2.html ===== */
/* v1.7: force visible Project Health progress cards without disturbing existing layout */
#health-grid .health-card-v17{
border:1px solid #cbd5df!important;border-radius:14px!important;padding:13px 14px 12px!important;
position:relative!important;overflow:hidden!important;color:#243041!important;
box-shadow:0 1px 0 rgba(255,255,255,.78) inset,0 8px 22px rgba(51,65,85,.08)!important;
background:linear-gradient(135deg,#f1f4f7 0%,#e4eaf0 100%)!important;
}
#health-grid .health-card-v17:nth-child(4n+1){background:linear-gradient(135deg,#edf5f1 0%,#dfebe5 100%)!important;}
#health-grid .health-card-v17:nth-child(4n+2){background:linear-gradient(135deg,#f5f0e7 0%,#ebe2d2 100%)!important;}
#health-grid .health-card-v17:nth-child(4n+3){background:linear-gradient(135deg,#f1eff6 0%,#e5dfed 100%)!important;}
#health-grid .health-card-v17:nth-child(4n+4){background:linear-gradient(135deg,#edf4f6 0%,#deeaee 100%)!important;}
#health-grid .health-card-v17:after{content:'';position:absolute;right:-28px;top:-36px;width:116px;height:116px;border-radius:999px;background:rgba(255,255,255,.28);pointer-events:none;}
.health-v17-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;position:relative!important;z-index:1!important;}
.health-v17-title{font-size:12px!important;font-weight:850!important;color:#27313f!important;text-transform:uppercase!important;letter-spacing:.04em!important;}
.health-v17-meta{font-size:10px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-top:3px!important;line-height:1.35!important;}
.health-v17-score{font-family:'Bebas Neue',sans-serif!important;font-size:31px!important;line-height:1!important;color:#243041!important;min-width:42px!important;text-align:right!important;position:relative!important;z-index:1!important;}
.health-v17-barline{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:11px 0 6px!important;font-size:10px!important;font-weight:800!important;color:#64748b!important;letter-spacing:.06em!important;text-transform:uppercase!important;position:relative!important;z-index:2!important;}
.health-v17-track{display:block!important;width:100%!important;height:8px!important;border-radius:999px!important;background:rgba(51,65,85,.14)!important;overflow:hidden!important;position:relative!important;z-index:3!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.10)!important;}
.health-v17-fill{display:block!important;height:100%!important;min-width:4px!important;border-radius:999px!important;background:linear-gradient(90deg,#8fa2b7 0%,#334155 100%)!important;box-shadow:0 0 0 1px rgba(255,255,255,.35) inset!important;}
.health-card-v17[data-health="healthy"] .health-v17-fill{background:linear-gradient(90deg,#83a992,#3f5d4f)!important;}
.health-card-v17[data-health="risk"] .health-v17-fill{background:linear-gradient(90deg,#b9a16e,#7a6540)!important;}
.health-card-v17[data-health="critical"] .health-v17-fill{background:linear-gradient(90deg,#b98b8b,#7b4c4c)!important;}
/* v1.7: topbar identity uses only avatar ring/halo; no role icon, text badge or separator */
#user-pill > svg,#user-pill .role-shade-indicator,#user-pill .user-role-symbol,#user-role-badge{display:none!important;}
#user-pill {
overflow: hidden;
position: relative !important;
box-shadow: 0 1px 0 var(--user-pill-shadow-1) inset, 0 5px 14px var(--user-pill-shadow-2) !important;
gap: 8px !important;
}
#user-avatar-pill{border:2px solid var(--topbar-role-color,#8492a3)!important;box-shadow:0 0 0 3px var(--topbar-role-glow,rgba(132,146,163,.12)),0 1px 0 rgba(255,255,255,.75) inset!important;}
#user-avatar-pill.role-founder{--topbar-role-color:#334155;--topbar-role-glow:rgba(51,65,85,.13);}
#user-avatar-pill.role-manager{--topbar-role-color:#53657a;--topbar-role-glow:rgba(83,101,122,.13);}
#user-avatar-pill.role-member{--topbar-role-color:#8492a3;--topbar-role-glow:rgba(132,146,163,.12);}
#user-avatar-pill.role-design{--topbar-role-color:#8d7aa8;--topbar-role-glow:rgba(141,122,168,.12);}
#user-avatar-pill.role-ops{--topbar-role-color:#6d9492;--topbar-role-glow:rgba(109,148,146,.12);}
/* v1.7: LinkedIn-inspired curved role ribbon on Profile page only */
.profile-avatar-orbit{position:relative!important;display:inline-flex!important;width:118px!important;height:118px!important;align-items:center!important;justify-content:center!important;overflow:visible!important;flex:0 0 auto!important;}
.profile-avatar-orbit #profile-avatar-large{width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;border-radius:999px!important;object-fit:cover!important;border:3px solid var(--role-color,#334155)!important;box-shadow:0 0 0 4px rgba(255,255,255,.65),0 8px 18px rgba(51,65,85,.14)!important;}
.profile-avatar-orbit .profile-role-arc{position:absolute!important;inset:0!important;width:118px!important;height:118px!important;overflow:visible!important;pointer-events:none!important;z-index:3!important;}
.profile-avatar-orbit .role-band{fill:var(--role-color,#334155)!important;filter:drop-shadow(0 3px 5px rgba(51,65,85,.18));opacity:.96;}
.profile-avatar-orbit .role-band-highlight{fill:rgba(255,255,255,.16)!important;}
.profile-avatar-orbit text{font-family:Inter,-apple-system,sans-serif!important;font-size:7.4px!important;font-weight:850!important;letter-spacing:.11em!important;text-transform:uppercase!important;fill:#fff!important;}
.profile-avatar-orbit.role-founder{--role-color:#334155;}
.profile-avatar-orbit.role-manager{--role-color:#53657a;}
.profile-avatar-orbit.role-member{--role-color:#8492a3;}
.profile-avatar-orbit.role-design{--role-color:#8d7aa8;}
.profile-avatar-orbit.role-ops{--role-color:#6d9492;}
/* disable old flat ribbon treatment */
.profile-avatar-ribbon{width:auto!important;height:auto!important;}
@media (max-width: 768px) {
.profile-avatar-orbit text{font-size:7px!important;}
}
/* ===== Extracted from index-split-phase2.html ===== */
/* Profile avatar role frame: LinkedIn-inspired bottom-left arc, profile page only */
.profile-avatar-orbit{
position:relative!important;
display:inline-flex!important;
width:122px!important;
height:122px!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
flex:0 0 auto!important;
}
.profile-avatar-orbit #profile-avatar-large{
width:98px!important;
height:98px!important;
max-width:98px!important;
max-height:98px!important;
border-radius:999px!important;
object-fit:cover!important;
border:3px solid #fff!important;
box-shadow:0 0 0 1px rgba(51,65,85,.16),0 10px 24px rgba(51,65,85,.18)!important;
position:relative!important;
z-index:1!important;
}
.profile-avatar-orbit .profile-role-arc{
position:absolute!important;
inset:0!important;
width:122px!important;
height:122px!important;
overflow:visible!important;
pointer-events:none!important;
z-index:4!important;
}
.profile-avatar-orbit .role-band{
fill:url(#profileRoleGradient)!important;
filter:drop-shadow(0 4px 7px rgba(71,85,105,.22));
}
.profile-avatar-orbit .role-band-soft{fill:rgba(255,255,255,.14)!important;}
.profile-avatar-orbit .role-label{
font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
font-size:8.6px!important;
font-weight:900!important;
letter-spacing:.10em!important;
text-transform:uppercase!important;
fill:#fff!important;
paint-order:stroke!important;
stroke:rgba(15,23,42,.16)!important;
stroke-width:.55px!important;
}
.profile-avatar-orbit.role-founder{--role-start:#475569;--role-end:#7c3aed;}
.profile-avatar-orbit.role-manager{--role-start:#334155;--role-end:#64748b;}
.profile-avatar-orbit.role-member{--role-start:#64748b;--role-end:#94a3b8;}
.profile-avatar-orbit.role-design{--role-start:#6d5c8f;--role-end:#9b6ac8;}
.profile-avatar-orbit.role-ops{--role-start:#547f7d;--role-end:#79aaa6;}
.profile-avatar-ribbon:before{display:none!important;content:none!important;}
@media (max-width: 768px) {
.profile-avatar-orbit {
width: 112px !important;
height: 112px !important;
}
.profile-avatar-orbit #profile-avatar-large {
width: 90px !important;
height: 90px !important;
max-width: 90px !important;
max-height: 90px !important;
}
.profile-avatar-orbit .profile-role-arc {
width: 112px !important;
height: 112px !important;
}
.profile-avatar-orbit .role-label{font-size:8px!important;}
}
/* Project Health cards: force visible progress bars with premium subtle depth */
#health-grid .health-card-v18{
display:block!important;
background:linear-gradient(135deg,#f4f7fa 0%,#edf2f6 100%)!important;
border:1px solid #d3dbe4!important;
border-radius:14px!important;
padding:12px!important;
min-height:104px!important;
box-shadow:0 8px 18px rgba(51,65,85,.08),0 1px 0 rgba(255,255,255,.78) inset!important;
position:relative!important;
overflow:hidden!important;
}
#health-grid .health-card-v18:after{content:'';position:absolute;right:-30px;top:-28px;width:86px;height:86px;border-radius:50%;background:rgba(255,255,255,.36);pointer-events:none;}
#health-grid .health-card-v18[data-health="healthy"]{background:linear-gradient(135deg,#eef6f1 0%,#e6eef0 100%)!important;border-color:#c8d8d0!important;}
#health-grid .health-card-v18[data-health="risk"]{background:linear-gradient(135deg,#f6f0e5 0%,#edf0f3 100%)!important;border-color:#ddd1bd!important;}
#health-grid .health-card-v18[data-health="critical"]{background:linear-gradient(135deg,#f6eaea 0%,#eef2f6 100%)!important;border-color:#dec9c9!important;}
#health-grid .health-v18-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px!important;position:relative!important;z-index:1!important;}
#health-grid .health-v18-title{font-size:12px!important;font-weight:800!important;color:#27313f!important;letter-spacing:.01em!important;line-height:1.25!important;}
#health-grid .health-v18-meta{font-size:10px!important;font-weight:650!important;color:#64748b!important;margin-top:4px!important;line-height:1.35!important;}
#health-grid .health-v18-score{font-family:'Bebas Neue',Inter,sans-serif!important;font-size:30px!important;line-height:1!important;color:#223044!important;min-width:38px!important;text-align:right!important;}
#health-grid .health-v18-track{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
height:8px!important;
margin-top:13px!important;
border-radius:999px!important;
background:rgba(51,65,85,.13)!important;
overflow:hidden!important;
position:relative!important;
z-index:2!important;
box-shadow:inset 0 1px 2px rgba(15,23,42,.10)!important;
}
#health-grid .health-v18-fill{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:100%!important;
min-width:5px!important;
border-radius:999px!important;
background:linear-gradient(90deg,#94a3b8,#334155)!important;
}
#health-grid .health-card-v18[data-health="healthy"] .health-v18-fill{background:linear-gradient(90deg,#89a98f,#3f5d4f)!important;}
#health-grid .health-card-v18[data-health="risk"] .health-v18-fill{background:linear-gradient(90deg,#c0a86e,#7a6540)!important;}
#health-grid .health-card-v18[data-health="critical"] .health-v18-fill{background:linear-gradient(90deg,#bd8888,#7b4c4c)!important;}
#health-grid .health-v18-foot{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-top:8px!important;font-size:10px!important;font-weight:700!important;color:#64748b!important;position:relative!important;z-index:2!important;}
/* ===== Extracted from index-split-phase2.html ===== */
/* 1) Profile page DP: clean, premium avatar only. Remove all role/ribbon/tag treatments. */
.profile-role-arc,
.profile-role-tag,
.profile-avatar-ribbon::before,
.profile-avatar-orbit .profile-role-arc,
.profile-avatar-orbit .role-band,
.profile-avatar-orbit .role-band-soft,
.profile-avatar-orbit .role-band-highlight,
.profile-avatar-orbit .role-label,
#profile-role,
label[for="profile-role"] { display:none !important; }
.profile-avatar-orbit,
.profile-avatar-ribbon {
position:static !important;
display:inline-flex !important;
width:auto !important;
height:auto !important;
overflow:visible !important;
align-items:center !important;
justify-content:center !important;
background:none !important;
box-shadow:none !important;
}
#profile-avatar-large,
.profile-avatar-orbit #profile-avatar-large,
.profile-avatar-ribbon #profile-avatar-large {
width:96px !important;
height:96px !important;
max-width:96px !important;
max-height:96px !important;
border-radius:999px !important;
object-fit:cover !important;
border:1px solid #cbd5df !important;
box-shadow:0 0 0 4px rgba(255,255,255,.70), 0 10px 24px rgba(51,65,85,.14) !important;
}
@media (max-width: 768px) {
#profile-avatar-large,
.profile-avatar-orbit #profile-avatar-large,
.profile-avatar-ribbon #profile-avatar-large{
width:82px !important;
height:82px !important;
max-width:82px !important;
max-height:82px !important;
}
}
/* 2) Project Health: reliable visible bars using the last working single-div gradient method, restyled subtly. */
#health-grid{display:flex!important;flex-direction:column!important;gap:8px!important;}
#health-grid .health-card-v19{
border-radius:14px !important;
padding:13px 15px 12px !important;
position:relative !important;
overflow:hidden !important;
border:1px solid #cfd8e3 !important;
box-shadow:0 1px 0 rgba(255,255,255,.75) inset,0 8px 22px rgba(51,65,85,.08) !important;
color:#243041 !important;
}
#health-grid .health-card-v19:nth-child(4n+1){background:linear-gradient(135deg,#eef5f1 0%,#e2ece7 100%) !important;}
#health-grid .health-card-v19:nth-child(4n+2){background:linear-gradient(135deg,#f5f0e7 0%,#ebe2d2 100%) !important;}
#health-grid .health-card-v19:nth-child(4n+3){background:linear-gradient(135deg,#f1eff6 0%,#e6dfed 100%) !important;}
#health-grid .health-card-v19:nth-child(4n+4){background:linear-gradient(135deg,#edf4f6 0%,#deeaee 100%) !important;}
#health-grid .health-card-v19::after{content:'';position:absolute;right:-28px;top:-32px;width:104px;height:104px;border-radius:999px;background:rgba(255,255,255,.28);pointer-events:none;}
#health-grid .health-v19-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;position:relative!important;z-index:1!important;margin-bottom:8px!important;}
#health-grid .health-v19-score{font-family:'Bebas Neue',Inter,sans-serif!important;font-size:34px!important;line-height:1!important;color:#223044!important;min-width:42px!important;}
#health-grid .health-v19-label{font-size:12px!important;font-weight:850!important;color:#27313f!important;text-transform:uppercase!important;letter-spacing:.045em!important;}
#health-grid .health-v19-sheet{font-size:10px!important;font-weight:800!important;color:#64748b!important;text-transform:uppercase!important;letter-spacing:.095em!important;margin-top:2px!important;}
#health-grid .health-v19-meta{text-align:right!important;font-size:10px!important;color:#64748b!important;line-height:1.65!important;font-weight:650!important;}
#health-grid .health-v19-barline{display:flex!important;justify-content:space-between!important;font-size:10px!important;color:#64748b!important;margin:0 0 5px!important;position:relative!important;z-index:2!important;font-weight:700!important;}
#health-grid .health-v19-track{
display:block !important;
width:100% !important;
height:7px !important;
min-height:7px !important;
border-radius:999px !important;
position:relative !important;
z-index:3 !important;
box-shadow:inset 0 1px 2px rgba(15,23,42,.12) !important;
}
/* ===== Extracted from index-split-phase2.html ===== */
/* Profile DP: clean premium avatar, no ribbon, no role tag */
.profile-avatar-orbit,
.profile-avatar-ribbon{display:inline-flex!important;position:relative!important;width:auto!important;height:auto!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;border:none!important;clip-path:none!important;}
.profile-avatar-orbit .profile-role-arc,
.profile-avatar-ribbon::before,
.profile-role-arc,
.role-band,
.role-band-soft,
.role-label{display:none!important;visibility:hidden!important;content:none!important;}
#page-profile #profile-avatar-large,
#page-profile img#profile-avatar-large,
#page-profile .avatar-lg#profile-avatar-large,
#page-profile .profile-avatar-clean{
display:inline-flex!important;
width:104px!important;
height:104px!important;
max-width:104px!important;
max-height:104px!important;
min-width:104px!important;
min-height:104px!important;
border-radius:999px!important;
object-fit:cover!important;
flex:0 0 auto!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
border:1px solid #cbd5df!important;
box-shadow:0 12px 28px rgba(51,65,85,.13),0 0 0 6px rgba(255,255,255,.62)!important;
background:linear-gradient(135deg,#dbe3ea,#eef2f6)!important;
color:#334155!important;
font-size:30px!important;
font-weight:800!important;
}
#page-profile .profile-role-tag,
#page-profile .role-tag,
#page-profile [data-role-tag]{display:none!important;}
@media (max-width: 768px) {
#page-profile #profile-avatar-large,
#page-profile img#profile-avatar-large,
#page-profile .avatar-lg#profile-avatar-large,
#page-profile .profile-avatar-clean{
width:84px!important;height:84px!important;max-width:84px!important;max-height:84px!important;min-width:84px!important;min-height:84px!important;font-size:24px!important;
}
}
/* Project Health: fixed visible progress bars */
#health-grid .health-card-fixed{
display:block!important;
position:relative!important;
overflow:hidden!important;
border-radius:14px!important;
padding:13px 14px 12px!important;
min-height:108px!important;
border:1px solid #d2dbe4!important;
background:linear-gradient(135deg,#f4f7fa 0%,#edf2f6 100%)!important;
box-shadow:0 10px 22px rgba(51,65,85,.08),0 1px 0 rgba(255,255,255,.8) inset!important;
}
#health-grid .health-card-fixed:nth-child(4n+1){background:linear-gradient(135deg,#eef6f1 0%,#e5edf0 100%)!important;}
#health-grid .health-card-fixed:nth-child(4n+2){background:linear-gradient(135deg,#f6f0e6 0%,#edf1f4 100%)!important;}
#health-grid .health-card-fixed:nth-child(4n+3){background:linear-gradient(135deg,#f2eff7 0%,#e9eef3 100%)!important;}
#health-grid .health-card-fixed:nth-child(4n+4){background:linear-gradient(135deg,#eef5f7 0%,#e5edf2 100%)!important;}
#health-grid .health-card-fixed::after{content:'';position:absolute;right:-26px;top:-28px;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.34);pointer-events:none;}
#health-grid .health-fixed-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;position:relative!important;z-index:1!important;}
#health-grid .health-fixed-title{font-size:12px!important;font-weight:850!important;color:#263244!important;letter-spacing:.01em!important;line-height:1.25!important;}
#health-grid .health-fixed-meta{font-size:10px!important;font-weight:650!important;color:#64748b!important;margin-top:4px!important;line-height:1.35!important;}
#health-grid .health-fixed-score{font-family:'Bebas Neue',Inter,sans-serif!important;font-size:31px!important;line-height:1!important;color:#223044!important;min-width:40px!important;text-align:right!important;}
#health-grid .health-fixed-labels{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-top:10px!important;margin-bottom:6px!important;font-size:10px!important;font-weight:750!important;color:#64748b!important;position:relative!important;z-index:2!important;}
#health-grid .health-fixed-track{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
height:9px!important;
min-height:9px!important;
border-radius:999px!important;
background:rgba(51,65,85,.14)!important;
overflow:hidden!important;
position:relative!important;
z-index:3!important;
box-shadow:inset 0 1px 2px rgba(15,23,42,.12)!important;
}
#health-grid .health-fixed-fill{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:100%!important;
min-width:5px!important;
border-radius:999px!important;
background:linear-gradient(90deg,#94a3b8,#334155)!important;
box-shadow:0 0 0 1px rgba(255,255,255,.35) inset!important;
}
#health-grid .health-card-fixed[data-health="healthy"] .health-fixed-fill{background:linear-gradient(90deg,#88a991,#3f5d4f)!important;}
#health-grid .health-card-fixed[data-health="risk"] .health-fixed-fill{background:linear-gradient(90deg,#c0a86e,#7a6540)!important;}
#health-grid .health-card-fixed[data-health="critical"] .health-fixed-fill{background:linear-gradient(90deg,#bd8888,#7b4c4c)!important;}
/* Timebar visibility fix - paste at the END of public/css/app.css or load after app.css */
#topbar {
height: 50px;
display: flex;
align-items: center;
padding: 0 22px;
gap: 12px;
flex-shrink: 0;
position: relative;
z-index: 50;
border-bottom: 1px solid var(--shell-border-1) !important;
box-shadow: var(--shadow) !important;
border-bottom-color: var(--shell-border-3) !important;
background: var(--topbar-bg) !important;
backdrop-filter: blur(10px) !important;
overflow: visible !important;
}
#timebar {
overflow: visible !important;
z-index: 80 !important;
}
#timebar:hover #timebar-tip,
#timebar-tip {
background: #f8fafc !important;
background-color: #f8fafc !important;
color: #334155 !important;
border: 1px solid #cbd5df !important;
border-radius: 9px !important;
padding: 7px 11px !important;
box-shadow: 0 12px 28px rgba(15,23,42,.18), 0 1px 0 rgba(255,255,255,.8) inset !important;
z-index: 99999 !important;
opacity: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#timebar-tip::before {
content: '';
position: absolute;
left: 50%;
top: -5px;
transform: translateX(-50%) rotate(45deg);
width: 9px;
height: 9px;
background: #f8fafc !important;
border-left: 1px solid #cbd5df !important;
border-top: 1px solid #cbd5df !important;
}
/* =========================================================
MOBILE REBUILD V2 - final overrides after fixing media scope
Root cause fixed: earlier CSS had 4 nested min-width media blocks,
trapping later theme/mobile rules inside desktop-only scope.
========================================================= */
@media (max-width: 768px) {
:root{
--bg:#e8edf3 !important;
--bg2:#f2f4f7 !important;
--bg3:#e8edf3 !important;
--bg4:#dfe6ee !important;
--border:#cbd5df !important;
--border2:#c3ceda !important;
--text1:#1f2937 !important;
--text2:#334155 !important;
--text3:#64748b !important;
--text4:#94a3b8 !important;
--blue:#334155 !important;
--green:#5f8f73 !important;
--amber:#a98455 !important;
--red:#a65f5f !important;
}
html,body,#app,#main,#content{background:linear-gradient(180deg,#e8edf3,#e3e9f0) !important;color:#1f2937 !important;overflow-x:hidden !important;max-width:100vw !important;}
#content {
padding: 12px 0 88px !important;
}
/* Login/loading fully eclipses app */
#loading {
max-width: 100vw !important;
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
min-height: 100dvh !important;
z-index: 999999 !important;
background: var(--auth-navy-1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
#loading:not(.out) {
display: flex !important;
opacity: 1 !important;
pointer-events: all !important;
visibility: visible !important;
}
#loading:not(.out) ~ #app,#loading:not(.out)+#app{display:none !important;visibility:hidden !important;opacity:0 !important;}
#loading > div[style*="background:#243347"]{width:92vw !important;max-width:400px !important;padding:clamp(24px,5vw,36px) clamp(20px,5vw,32px) !important;border-radius:20px !important;}
/* Topbar: no giant/flickering DP source, only stable compact avatar when present */
#topbar {
gap: 6px;
min-height: 52px !important;
height: auto !important;
padding: 6px 8px !important;
background: #e6ebf1 !important;
border-bottom: 1px solid #cbd5df !important;
box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
overflow: visible !important;
}
.tb-datequote,.focus-pill,.streak-pill,#topbar-hint{display:none !important;}
img#user-avatar-pill,#user-avatar-pill,.avatar-img,.avatar-fallback{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;max-width:28px !important;max-height:28px !important;border-radius:999px !important;object-fit:cover !important;}
.dash-profile-avatar {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
min-height: 58px !important;
max-width: 58px !important;
max-height: 58px !important;
border-radius: 999px !important;
object-fit: cover !important;
}
/* Desktop theme parity for mobile dashboard */
.briefing-card,.kpi-card,.skpi,.skpi-feat,.cc,.tbl-wrap,.exec-card,.profile-card,.notif-card,.project-node,.h-task,.hierarchy-hero,.hierarchy-stat{background:linear-gradient(135deg,#f1f4f7,#e7edf3) !important;border:1px solid #cbd5df !important;box-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 8px 20px rgba(51,65,85,.075) !important;color:#1f2937 !important;}
.kpi-card::before,.kpi-card::after{display:none !important;}
.kpi-value,.kpi-label,.kpi-sub,.kpi-ico,.briefing-stat-val,.briefing-stat-lbl,.briefing-focus-val,.briefing-focus-lbl{color:#1f2937 !important;text-shadow:none !important;}
.kpi-label,.kpi-sub,.briefing-stat-lbl,.briefing-focus-lbl{color:#64748b !important;}
#page-dashboard .kpi-card:nth-of-type(1){background:linear-gradient(135deg,#edf5f6,#dfe9ed) !important;}
#page-dashboard .kpi-card:nth-of-type(2){background:linear-gradient(135deg,#eef3f9,#dfe7f1) !important;}
#page-dashboard .kpi-card:nth-of-type(3){background:linear-gradient(135deg,#f5eeee,#eadbdb) !important;}
/* Prevent old saturated mobile color cards from resurfacing */
[style*="linear-gradient(135deg,#0891b2"],
[style*="linear-gradient(135deg,#334155 0%"],
[style*="linear-gradient(135deg,#dc2626"],
[style*="linear-gradient(135deg,#7c3aed"],
[style*="linear-gradient(135deg,#059669"],
[style*="linear-gradient(135deg,#ea580c"],
[style*="linear-gradient(135deg,#16a34a"],
[style*="linear-gradient(135deg,#d97706"]{background:linear-gradient(135deg,#f1f4f7,#e7edf3) !important;color:#1f2937 !important;}
/* Strategy tab single-column mobile */
.exec-grid,.exec-mini-grid,.command-grid,.strategy-grid,.vf-grid,.vision-grid,#page-command [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
.exec-mini-grid{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;padding:0 10px !important;}
.exec-card {
margin-left: 10px !important;
margin-right: 10px !important;
padding: 13px !important;
border-radius: 14px !important;
}
/* Profile page styled, not raw */
#page-profile {
padding: 10px 12px 96px !important;
overflow-x: hidden !important;
}
.profile-wrap {
grid-template-columns: 1fr;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 12px !important;
}
.profile-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 16px !important;
border-radius: 18px !important;
box-sizing: border-box !important;
background: linear-gradient(135deg,#f1f4f7,#e7edf3) !important;
}
.profile-hero {
text-align: center !important;
align-items: center !important;
}
#profile-avatar-large,#page-profile #profile-avatar-large,img#profile-avatar-large,.avatar-lg#profile-avatar-large{width:84px !important;height:84px !important;min-width:84px !important;min-height:84px !important;max-width:84px !important;max-height:84px !important;border-radius:999px !important;object-fit:cover !important;box-shadow:0 0 0 5px rgba(255,255,255,.62),0 10px 22px rgba(51,65,85,.13) !important;}
.profile-grid {
grid-template-columns: 1fr !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
.profile-field {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.profile-input,.profile-textarea {
max-width: 100% !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
background: #f7f8fa !important;
border: 1px solid #cbd5df !important;
border-radius: 12px !important;
color: #27313f !important;
font-size: 14px !important;
padding: 11px 12px !important;
}
.profile-save-row,.profile-photo-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
}
.profile-save-row .btn,.profile-photo-actions .btn {
white-space: nowrap !important;
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
}
/* Mobile task/cards using same muted theme */
.tbl-wrap {
background: var(--bg2) !important;
border: 1px solid var(--border) !important;
padding: 0 !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
margin: 4px 10px 18px !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.tbl thead{display:none !important;}
.tbl,.tbl tbody,.tbl tr{display:block !important;width:100% !important;}
.tbl tbody tr{background:#f1f4f7 !important;border-bottom:1px solid #d7dfe8 !important;transform:none !important;box-shadow:none !important;}
.tbl tbody tr[data-status="Open"]{background:#eef3f8 !important;}
.tbl tbody tr[data-status="In Progress"]{background:#eaf3f4 !important;}
.tbl tbody tr[data-status="In Review"]{background:#f0edf3 !important;}
.tbl tbody tr[data-status="To Be Tested"]{background:#f1eee8 !important;}
.tbl tbody tr[data-status="On Hold"]{background:#f2ecdf !important;}
.tbl tbody tr[data-status="Delayed"]{background:#f3e9e6 !important;}
.tbl tbody tr[data-status="Closed"]{background:#e8f0eb !important;}
.tbl td {
padding: 0 !important;
display: none !important;
}
.tbl td.task-main-cell {
width: 100% !important;
overflow: hidden !important;
display: block !important;
padding: 10px 12px !important;
}
.tbl td:last-child {
align-items: center !important;
gap: 8px !important;
display: flex !important;
justify-content: flex-end !important;
padding: 7px 10px !important;
border-top: 1px solid #d7dfe8 !important;
}
.task-name {
line-height: 1.4 !important;
font-size: 14px !important;
font-weight: 650 !important;
color: #1f2937 !important;
white-space: normal !important;
word-break: break-word !important;
}
.task-sub {
margin-top: 2px !important;
font-size: 11px !important;
color: #64748b !important;
}
/* Mobile nav */
#mobile-tabs {
align-items: stretch;
display: flex !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 62px !important;
z-index: 90000 !important;
background: #e8edf3 !important;
border-top: 1px solid #cbd5df !important;
box-shadow: 0 -12px 28px rgba(15,23,42,.11) !important;
}
.mob-tab.on {
color: #334155 !important;
}
#mob-more-drawer {
border-top-color: #cbd6e2 !important;
overflow: auto !important;
z-index: 110000 !important;
max-height: 72dvh !important;
overflow-y: auto !important;
background: #e8edf3 !important;
border-top: 1px solid #cbd5df !important;
box-shadow: 0 -16px 36px rgba(15,23,42,.16) !important;
}
#mob-more-overlay {
z-index: 109000 !important;
background: rgba(15,23,42,.18) !important;
}
}
@media (min-width: 769px) {
#mobile-tabs,#mob-more-drawer,#mob-more-overlay{display:none !important;}
}
/* Mobile topbar — show avatar pill, hide text labels inside it */
@media (max-width: 768px) {
#topbar #user-pill #user-name,
#topbar #user-pill #user-role-badge{ display:none!important; }
#topbar #user-pill img,
#topbar #user-pill .avatar-fallback,
#topbar #user-pill .avatar-img,
#topbar #user-pill #user-avatar-pill{
width:28px!important;height:28px!important;
min-width:28px!important;max-width:28px!important;
border-radius:999px!important;object-fit:cover!important;
font-size:10px!important;font-weight:800!important;
}
}
/* Mobile — show avatar pill on topbar, hide text labels */
@media (max-width: 768px) {
#topbar #user-pill {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 34px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
max-width: 34px !important;
padding: 2px !important;
border-radius: 999px !important;
overflow: hidden !important;
}
#topbar #user-pill #user-name,#topbar #user-pill #user-role-badge{display:none!important;}
#topbar #user-pill img,#topbar #user-pill .avatar-fallback,#topbar #user-pill .avatar-img,#topbar #user-pill #user-avatar-pill{width:28px!important;height:28px!important;min-width:28px!important;border-radius:999px!important;object-fit:cover!important;}
}
/* ══ NTL Action Centre ══ */
.ntl-row{border-bottom:1px solid var(--border);border-left:3px solid var(--domain-col,#94a3b8);transition:background .12s;}
.ntl-row:hover{background:var(--bg3)!important;}
.ntl-row td{padding:5px 6px;vertical-align:middle;}
.ntl-row.p-Critical{background:rgba(153,0,0,.04);}
.ntl-row.p-VeryHigh{background:rgba(204,0,0,.04);}
.ntl-row.p-High{background:rgba(224,102,102,.04);}
.ntl-row.p-Medium{background:rgba(234,153,153,.04);}
.ntl-row.p-Low{background:var(--bg1);}
.ntl-row.p-Dependent{background:rgba(153,198,229,.06);}
.ntl-chev-cell{width:22px;padding:0 2px 0 6px!important;}
.ntl-chev-ph{display:inline-block;width:16px;}
.ntl-chev{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;cursor:pointer;color:var(--text3);transition:transform .2s,color .15s;}
.ntl-chev:hover{color:var(--text1);background:var(--bg4);}
.ntl-chev.open{transform:rotate(90deg);}
.ntl-avatar-cell{width:34px;padding:0 4px!important;}
.ntl-task-cell{min-width:0;flex:1;}
.ntl-task-top{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;}
.ntl-task-name{font-size:13px;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1;}
.ntl-task-name.ntl-done{text-decoration:line-through;color:var(--text4);}
.ntl-task-sub{display:flex;align-items:center;gap:4px;margin-top:2px;flex-wrap:nowrap;}
.ntl-sheet-tag{font-size:10px;font-weight:800;white-space:nowrap;}
.ntl-proj-tag{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ntl-client-tag{font-size:9.5px;background:#eff6ff;color:var(--blue);border:1px solid #bfdbfe;border-radius:4px;padding:0 5px;font-weight:600;white-space:nowrap;flex-shrink:0;}
.ntl-dot{font-size:9px;color:var(--text4);flex-shrink:0;}
.ntl-child-tag{font-size:9px;font-weight:700;color:var(--text4);background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:1px 5px;white-space:nowrap;flex-shrink:0;}
.ntl-subtask-chip{font-size:9px;font-weight:700;color:var(--blue);background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.2);border-radius:4px;padding:1px 5px;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.ntl-subtask-chip:hover{background:rgba(37,99,235,.15);}
.ntl-rec-badge{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:700;color:var(--blue);background:rgba(37,99,235,.08);border-radius:4px;padding:1px 5px;white-space:nowrap;flex-shrink:0;}
.ntl-add-sub{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text4);cursor:pointer;opacity:0;transition:opacity .15s;flex-shrink:0;}
.ntl-row:hover .ntl-add-sub{opacity:1;}
.ntl-add-sub:hover{background:var(--bg4);color:var(--text1);}
.ntl-child-row .ntl-task-cell{padding-left:28px!important;}
.ntl-child-row .ntl-task-name{font-size:12.5px;font-weight:500;}
.ntl-mob-right{display:none;}
.ntl-mob-actions{display:none;}
.ntl-due-cell{width:105px;white-space:nowrap;}
.ntl-due-time{display:block;font-family:var(--mono);font-size:10px;color:var(--blue);font-weight:700;}
.ntl-pri-label{display:block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-top:1px;}
.ntl-status-cell{width:68px;white-space:nowrap;}
.ntl-last-cell{width:250px;white-space:nowrap;}
.ntl-last-inner{display:flex;align-items:center;justify-content:flex-end;gap:4px;}
.ntl-timer-live{font-family:var(--mono);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--blue);width:0;overflow:hidden;opacity:0;transition:width .3s,opacity .3s;white-space:nowrap;flex-shrink:0;}
.ntl-timer-live.running{width:54px;overflow:visible;opacity:1;}
/* Hide static est/taken when live timer is running — no overlap */
.ntl-timer-live.running ~ .ntl-time-est{display:none;}
.ntl-time-est{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;}
.ntl-est{color:var(--text3);font-weight:500;}
.ntl-sep{color:var(--text4);margin:0 2px;}
.ntl-tkn{color:var(--green);font-weight:700;}
.ntl-act-btns{display:inline-flex;align-items:center;gap:2px;margin-left:4px;}
.ntl-table{width:100%;table-layout:fixed;}.ntl-table thead{display:none;}
#sidebar {
width: var(--sidebar);
height: 100vh;
display: flex;
flex-direction: column;
padding: 12px 0;
gap: 1px;
flex-shrink: 0;
z-index: 100;
transition: width var(--ease2);
border-right: 1px solid var(--shell-border-1) !important;
box-shadow: inset -1px 0 0 var(--sidebar-inset-highlight) !important;
border-right-color: var(--shell-border-2) !important;
background: linear-gradient(180deg,var(--sidebar-bg-1),var(--sidebar-bg-2)) !important;
overflow-x: hidden;
overflow-y: auto;
}
@media (max-width: 768px) {
.ntl-desktop{display:none!important;}
}
/* ══ Task Assignee Avatar Pill ══ */
.task-dp-wrap { display:inline-flex; align-items:center; justify-content:center; }
.task-dp-pill { width:28px; height:28px; border-radius:999px; object-fit:cover; border:1px solid #cbd5df; background:#f8fafc; box-shadow:0 2px 6px rgba(15,23,42,.08); vertical-align:middle; flex-shrink:0; }
.task-dp-pill-sm { width:22px; height:22px; }
.task-dp-pill-fallback { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; border:1px solid #cbd5df; background:linear-gradient(135deg,#f8fafc,#e2e8f0); color:#475569; font-size:11px; font-weight:800; line-height:1; box-shadow:0 2px 6px rgba(15,23,42,.08); vertical-align:middle; flex-shrink:0; }
.task-dp-pill-fallback.task-dp-pill-sm { width:22px; height:22px; font-size:9px; }
/* ══ Mobile layout fixes ══ */
@media (max-width: 768px) {
#sidebar {
display: none !important;
}
#app{display:flex!important;flex-direction:column!important;}
#main {
padding: 0 !important;
margin-left: 0 !important;
padding-left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
.briefing-divider {
opacity: 0 !important;
display: none !important;
width: 0 !important;
min-width: 0 !important;
}
#dash-profile-card,#dashboard-profile-card,.dash-profile-wrap{margin:0 10px!important;width:calc(100% - 20px)!important;}
}
@media (max-width: 768px) {
/* Profile card — centre on mobile, remove float */
#dashboard-profile-card { float:none !important; width:calc(100% - 20px) !important; margin:0 10px 14px 10px !important; }
#dashboard-profile-card > div { float:none !important; min-width:0 !important; width:100% !important; margin:0 !important; }
/* Greeting card — hide the vertical separator lines between focus rows */
.briefing-focus > div > div {
border-top: 1px solid rgba(255,255,255,0.15) !important;
padding-top: 6px !important;
border-left: none !important;
padding-left: 0 !important;
}
.briefing-focus-lbl::before { display:none !important; }
}
/* ══ Stage5 Hierarchy & Collaborators ══ */
.task-advanced-section{margin-top:14px;border:1px solid var(--border);background:linear-gradient(135deg,var(--advsec-bg-1),var(--advsec-bg-2));border-radius:14px;overflow:hidden}
.task-advanced-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:none;background:transparent;padding:11px 13px;cursor:pointer;color:var(--text2);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.09em}
.task-advanced-head .chev{transition:transform .18s;color:var(--text4)}.task-advanced-section.open .task-advanced-head .chev{transform:rotate(180deg)}
.task-advanced-body{display:none;padding:0 13px 13px;gap:12px}.task-advanced-section.open .task-advanced-body{display:grid;grid-template-columns:1fr}
.task-mini-plus-row{border:1px solid var(--advsec-card-border);background:var(--advsec-card-bg);border-radius:12px;padding:10px;min-height:54px}.task-mini-plus-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.task-mini-plus-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.task-mini-plus-btn{width:28px;height:28px;border-radius:10px;border:1px solid var(--advsec-input-border);background:var(--advsec-bg-1);color:var(--text2);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.task-mini-plus-btn:hover{background:var(--advsec-chip-bg)}
.stage5-picker{display:none;margin-top:9px;position:relative}.stage5-picker.open{display:block}.stage5-search{width:100%;border:1px solid var(--advsec-input-border);border-radius:10px;padding:8px 10px;font-size:12px;background:var(--advsec-card-bg);color:var(--text1);outline:none}.stage5-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,126,245,.12)}
.stage5-results{display:none;position:absolute;left:0;right:0;top:38px;z-index:9000;background:var(--advsec-card-bg);border:1px solid var(--advsec-input-border);border-radius:12px;box-shadow:0 14px 34px rgba(15,23,42,.14);max-height:210px;overflow:auto;padding:5px}.stage5-results.open{display:block}.stage5-result{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;cursor:pointer;font-size:12px;color:var(--text2)}.stage5-result:hover{background:var(--advsec-chip-bg);color:var(--text1)}.stage5-result-main{font-weight:700;line-height:1.2}.stage5-result-sub{font-size:10px;color:var(--text4);margin-top:1px;line-height:1.2}
.stage5-selected-parent{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--text2)}.stage5-parent-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 8px;border-radius:999px;background:var(--advsec-chip-bg);border:1px solid var(--advsec-input-border);font-size:11px;font-weight:700;color:var(--text2)}.stage5-chip-x{border:none;background:transparent;color:var(--text3);cursor:pointer;font-weight:900;padding:0 2px}
.stage5-collab-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;min-height:24px}.stage5-dp-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 6px 2px 2px;border:1px solid var(--advsec-input-border);background:var(--advsec-chip-bg);border-radius:999px}.stage5-dp-chip .chip-x{font-size:11px;color:var(--text3);cursor:pointer;border:0;background:transparent;font-weight:900;padding:0 1px}.stage5-dp-mini{width:22px;height:22px;border-radius:999px;object-fit:cover;border:1px solid var(--advsec-input-border);background:var(--advsec-card-bg);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--advsec-dp-mini-color)}.task-form-hint{font-size:10.5px;color:var(--text4);margin-top:7px;line-height:1.35}
@media (max-width: 900px) {.task-advanced-section.open .task-advanced-body{grid-template-columns:1fr}.stage5-results{position:static;margin-top:6px}}
@media (min-width: 1100px) {.project-node-head{grid-template-columns:auto 1fr auto;padding:11px 14px}.project-head-main{display:flex;align-items:center;gap:12px;min-width:0}.project-title-main{flex:0 1 auto;min-width:0}.project-meta{margin-top:0;white-space:nowrap;justify-content:flex-end;margin-left:auto}.h-task-row{padding:7px 10px}.h-task-main{display:grid;grid-template-columns:minmax(320px,1fr) auto;align-items:center;gap:16px}.h-task-title span.task-text{font-size:12.5px}.h-task-sub{margin-top:0;justify-content:flex-end;white-space:nowrap}.h-subtasks{padding-top:4px;padding-bottom:4px}.h-subtask{padding:5px 0}.h-subtask>div:first-child{display:grid;grid-template-columns:minmax(320px,1fr) auto;align-items:center;gap:16px}.h-subtask-meta{margin-top:0;justify-content:flex-end;white-space:nowrap}.project-node-body{padding-top:4px;padding-bottom:8px}}
/* ══ Panel body scroll fix ══ */
.pb{min-height:0!important;}
.pb>*{flex-shrink:0!important;}
/* ══ project-hierarchy-style ══ */
.hierarchy-wrap{display:flex;flex-direction:column;gap:14px;padding-bottom:42px}
.hierarchy-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#f8fafc,#eef2f6);box-shadow:var(--shadow)}
.hierarchy-kicker{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#64748b;margin-bottom:4px}
.hierarchy-title{font-size:20px;font-weight:800;color:var(--text1);letter-spacing:-.03em;line-height:1.1}
.hierarchy-sub{font-size:13px;color:var(--text3);margin-top:4px}
.hierarchy-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hierarchy-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hierarchy-summary{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}
.hierarchy-stat{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.hierarchy-tree{display:flex;flex-direction:column;gap:10px}
.project-node{border:1px solid var(--border);border-radius:16px;background:var(--bg2);box-shadow:var(--shadow);overflow:hidden}
.project-node-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:13px 15px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);cursor:pointer;user-select:none}
.project-caret{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#e8edf3;border:1px solid #cbd5df;color:#475569;transition:transform .18s}
.project-node.closed .project-caret{transform:rotate(-90deg)}
.project-title-main{display:flex;align-items:center;gap:8px;min-width:0}
.project-title-main strong{font-size:14px;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:11px;color:var(--text3)}
.project-pill{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid #cbd5df;background:#eef2f6;color:#475569}
.project-node-actions{display:flex;align-items:center;gap:6px}
.project-node-body{padding:8px 10px 12px}
.project-node.closed .project-node-body{display:none}
.h-task{border:1px solid var(--border);border-radius:13px;background:var(--h-task-bg);margin-top:8px;overflow:hidden}
.h-task-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.h-task-row:hover{background:var(--bg3)}
.h-task-caret{width:22px;height:22px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#64748b;background:#f1f5f9;border:1px solid #d7dde4;transition:transform .18s}
.h-task.no-children .h-task-caret{opacity:.35}
.h-task.closed .h-task-caret{transform:rotate(-90deg)}
.h-task-main{min-width:0}
.h-task-title{display:flex;align-items:center;gap:8px;min-width:0}
.h-task-title span.task-text{font-size:13px;font-weight:700;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-task-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:10.5px;color:var(--text3)}
.h-task-actions{display:flex;align-items:center;gap:5px}
.h-subtasks{border-top:1px solid var(--border);background:#fbfdff;padding:6px 10px 8px 42px}
.h-task.closed .h-subtasks{display:none}
.h-subtask{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px dashed #d7dde4}
.h-subtask:last-child{border-bottom:none}
.h-subtask-title{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--text1)}
.h-subtask-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-subtask-meta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px;font-size:10px;color:var(--text4)}
.h-muted{font-size:11px;color:var(--text4);font-style:italic;padding:10px 12px}
.h-mini-btn{border:1px solid #cbd5df;background:#f8fafc;border-radius:9px;padding:5px 8px;font-size:10.5px;font-weight:700;color:#475569;cursor:pointer}
.h-mini-btn:hover{background:#eef2f6;color:#1f2937}
@media (max-width: 900px) {
.hierarchy-hero{align-items:flex-start;flex-direction:column}
.hierarchy-summary{grid-template-columns:repeat(2,1fr)}
.project-node-head,.h-task-row{grid-template-columns:auto 1fr}
.project-node-actions,.h-task-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
.h-subtasks{padding-left:18px}
}
.fg3.task-time-sheet-row{grid-template-columns:1fr 1fr 1fr}.work-lens-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}.work-lens-table{width:100%;border-collapse:collapse;min-width:920px}.work-lens-table th{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--text3);text-align:left;padding:11px 12px;border-bottom:1px solid var(--border)}.work-lens-table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}.work-lens-task-title{font-size:13px;font-weight:750;color:var(--text1);line-height:1.25}.work-lens-task-sub{font-size:10.5px;color:var(--text3);margin-top:3px}.work-lens-empty{padding:28px;text-align:center;color:var(--text3);font-size:13px}.lens-tabbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.lens-chip{border:1px solid var(--border);background:var(--bg2);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;cursor:pointer;color:var(--text2)}.lens-chip.on{background:var(--text1);color:#fff;border-color:var(--text1)}@media (max-width: 760px) {.fg3.task-time-sheet-row{grid-template-columns:1fr}.work-lens-table{min-width:760px}}
/* ══ metrics-desktop-ui-v3 ══ */
.metrics-topbar{margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.metrics-title-block{min-width:240px;}
.metrics-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:8px 10px;box-shadow:var(--shadow);}
.metrics-controls .fs{min-width:150px;padding:7px 9px;font-size:12px;}
.metrics-controls .wbtn{font-size:11px;padding:7px 10px;white-space:nowrap;}
.metrics-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.metrics-kpi-grid .skpi{min-width:0;}
.metrics-entry-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end;}
.metrics-entry-actions{display:flex;gap:8px;align-items:end;}
.metrics-entry-actions .btn{max-width:150px;}
@media (max-width: 1100px) {.metrics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.metrics-entry-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.metrics-controls{width:100%;}.metrics-controls .fs{flex:1 1 150px;}}
@media (max-width: 760px) {.metrics-topbar{align-items:stretch;}.metrics-controls{flex-direction:column;align-items:stretch;}.metrics-controls .fs,.metrics-controls .wbtn{width:100%;}.metrics-kpi-grid{grid-template-columns:1fr;}.metrics-entry-grid{grid-template-columns:1fr;}.metrics-entry-actions{flex-direction:column;align-items:stretch}.metrics-entry-actions .btn{max-width:none;width:100%;}}
/* ══ vault-v1-style ══ */
.vault-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#f8fafc,#eef2f6);box-shadow:var(--shadow)}
.vault-kicker{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.13em;color:#64748b;margin-bottom:4px}
.vault-title{font-size:22px;font-weight:850;color:var(--text1);letter-spacing:-.03em;line-height:1.1}
.vault-sub{font-size:13px;color:var(--text3);margin-top:4px;max-width:620px}
.vault-brief{min-width:200px;background:rgba(255,255,255,.7);border:1px solid #cbd5df;border-radius:14px;padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.vault-brief-k{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
.vault-brief-v{font-family:'Bebas Neue',sans-serif;font-size:30px;line-height:1;color:#1f2937;margin-top:3px}
.vault-brief-s{font-size:11px;color:#64748b;margin-top:2px}
.vault-strip{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;margin-bottom:14px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:8px 10px;box-shadow:var(--shadow);overflow-x:auto}
.vault-strip .sbox{min-width:220px;flex:1}.vault-strip .fs{min-width:110px}
.vault-strip-divider{width:1px;height:24px;background:var(--border2);flex-shrink:0;margin:0 2px}
.vault-strip-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border:1px solid var(--border2);border-radius:9px;background:var(--bg2);font-size:11px;font-weight:700;color:var(--text2);cursor:pointer;white-space:nowrap;transition:all var(--ease);flex-shrink:0;box-shadow:var(--shadow)}
.vault-strip-btn:hover{background:var(--bg3);border-color:var(--blue);color:var(--blue)}
.vault-strip-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.25)}
.vault-strip-btn.primary:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}
.vault-strip-btn svg{width:12px;height:12px;flex-shrink:0;stroke-width:2}
.vault-view-toggle{display:flex;gap:1px;border:1px solid var(--border2);border-radius:8px;overflow:hidden;flex-shrink:0}
.vault-view-btn{display:flex;align-items:center;justify-content:center;width:30px;height:28px;background:var(--bg3);border:none;cursor:pointer;color:var(--text3);transition:all var(--ease)}
.vault-view-btn.on{background:var(--text1);color:#fff}
.vault-view-btn svg{width:13px;height:13px;stroke-width:1.75}
.vault-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:200;background:var(--bg2);border:1px solid var(--border2);border-radius:12px;box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;display:none}
.vault-search-results.open{display:block}
.vault-search-result-item{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);transition:background var(--ease)}
.vault-search-result-item:last-child{border-bottom:none}
.vault-search-result-item:hover{background:var(--bg3)}
.vault-search-result-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vault-search-result-title{font-size:13px;font-weight:650;color:var(--text1);line-height:1.2}
.vault-search-result-meta{font-size:10px;color:var(--text3);margin-top:1px}
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.vault-card{border:none;border-top:2px solid transparent;border-radius:14px;padding:0;box-shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 12px rgba(0,0,0,0.07);position:relative;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease}
.vault-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.10),0 12px 28px rgba(0,0,0,0.10);transform:translateY(-2px)}
/* Muted white geometric circle top-right */
.vault-card::after{content:"";position:absolute;right:-28px;top:-28px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,0.22);pointer-events:none;z-index:0;}
.vault-card::before{content:"";position:absolute;right:30px;top:10px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.14);pointer-events:none;z-index:0;}
.vault-card[data-type="DOCUMENT"]{background:#dde8f5;border-top-color:#1a4f8a;}
.vault-card[data-type="NOTE"]{background:#d6f0e8;border-top-color:#0d6e50;}
.vault-card[data-type="REFERENCE"]{background:#fdf0d5;border-top-color:#a05c00;}
.vault-card[data-type="TEMPLATE"]{background:#eaddf5;border-top-color:#6224a0;}
.vault-card[data-type="ARCHIVE"]{background:#e8e8e8;border-top-color:#4a4a4a;}
.vault-card-inner{padding:13px 14px 12px 17px}
.vault-card-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.vault-card[data-type="DOCUMENT"] .vault-card-icon{background:rgba(255,255,255,0.55)}.vault-card[data-type="NOTE"] .vault-card-icon{background:rgba(255,255,255,0.55)}.vault-card[data-type="REFERENCE"] .vault-card-icon{background:rgba(255,255,255,0.55)}.vault-card[data-type="TEMPLATE"] .vault-card-icon{background:rgba(255,255,255,0.55)}.vault-card[data-type="ARCHIVE"] .vault-card-icon{background:rgba(255,255,255,0.55)}
.vault-card-icon svg{width:16px;height:16px;stroke-width:1.75}
.vault-card[data-type="DOCUMENT"] .vault-card-icon svg{color:#1a4f8a}.vault-card[data-type="NOTE"] .vault-card-icon svg{color:#0d6e50}.vault-card[data-type="REFERENCE"] .vault-card-icon svg{color:#a05c00}.vault-card[data-type="TEMPLATE"] .vault-card-icon svg{color:#6224a0}.vault-card[data-type="ARCHIVE"] .vault-card-icon svg{color:#4a4a4a}
.vault-card-inner{position:relative;z-index:1;}
.vault-card-top{display:flex;align-items:flex-start;gap:10px}
.vault-card-heading{flex:1;min-width:0}
.vault-card-title{font-size:13.5px;font-weight:750;color:var(--text1);line-height:1.3;word-break:break-word}
.vault-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.vault-tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:9px;font-weight:700;letter-spacing:.03em}
.vault-tag.type-doc{background:rgba(37,99,235,.1);color:#1e40af}.vault-tag.type-note{background:rgba(22,163,74,.1);color:#15803d}.vault-tag.type-ref{background:rgba(217,119,6,.1);color:#92400e}.vault-tag.type-tpl{background:rgba(124,58,237,.1);color:#5b21b6}.vault-tag.type-arc{background:rgba(100,116,139,.12);color:#475569}
.vault-tag.dom-deliver{background:rgba(8,145,178,.1);color:#0e7490}.vault-tag.dom-personal{background:rgba(124,58,237,.08);color:#6d28d9}.vault-tag.dom-vital{background:rgba(220,38,38,.08);color:#b91c1c}.vault-tag.dom-evolve{background:rgba(22,163,74,.08);color:#166534}.vault-tag.dom-spark{background:rgba(245,158,11,.1);color:#92400e}.vault-tag.dom-vault{background:rgba(100,116,139,.1);color:#334155}
.vault-tag.user-tag{background:rgba(0,0,0,0.05);color:var(--text3)}
.vault-desc{font-size:11.5px;color:var(--text3);line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vault-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid rgba(0,0,0,0.06)}
.vault-card-file{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--blue);text-decoration:none;transition:color var(--ease)}
.vault-card-file:hover{color:#1d4ed8;text-decoration:underline}
.vault-card-file svg{width:12px;height:12px;stroke-width:1.75;flex-shrink:0}
.vault-card-file-btn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text3);background:none;border:none;padding:0;cursor:pointer;transition:color var(--ease)}
.vault-card-file-btn:hover{color:var(--text1)}
.vault-card-file-btn svg{width:12px;height:12px;stroke-width:1.75;flex-shrink:0}
.vault-card-filesize{font-size:9px;color:var(--text4);margin-left:2px;font-weight:500}
.vault-card-actions{display:flex;align-items:center;gap:3px}
.vault-icon-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text3);transition:all var(--ease);box-shadow:var(--shadow)}
.vault-icon-btn:hover{background:var(--bg3);color:var(--text2);border-color:var(--border2)}
.vault-icon-btn.danger:hover{background:#fee2e2;color:#dc2626;border-color:#fca5a5}
.vault-icon-btn svg{width:13px;height:13px;stroke-width:1.75;display:block}
.vault-list{display:flex;flex-direction:column;gap:5px}
.vault-list-row{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(145deg,#ffffff,#f4f7fa);border:1px solid rgba(0,0,0,0.07);border-radius:12px;position:relative;overflow:hidden;transition:box-shadow var(--ease)}
.vault-list-row[data-type="DOCUMENT"]{background:linear-gradient(145deg,#fafcff,#eef4ff)}
.vault-list-row[data-type="NOTE"]{background:linear-gradient(145deg,#fafffe,#eefaf3)}
.vault-list-row[data-type="REFERENCE"]{background:linear-gradient(145deg,#fffdf7,#fef9ec)}
.vault-list-row[data-type="TEMPLATE"]{background:linear-gradient(145deg,#fdfaff,#f5f0ff)}
.vault-list-row[data-type="ARCHIVE"]{background:linear-gradient(145deg,#fafafa,#f1f5f9)}
.vault-list-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px}
.vault-list-row[data-type="DOCUMENT"]::before{background:var(--blue)}.vault-list-row[data-type="NOTE"]::before{background:var(--green)}.vault-list-row[data-type="REFERENCE"]::before{background:var(--amber)}.vault-list-row[data-type="TEMPLATE"]::before{background:var(--violet)}.vault-list-row[data-type="ARCHIVE"]::before{background:#64748b}
.vault-list-row:hover{box-shadow:var(--shadow-md)}
.vault-list-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vault-list-icon svg{width:15px;height:15px;stroke-width:1.75}
.vault-list-main{min-width:0}
.vault-list-title{font-size:13px;font-weight:700;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault-list-sub{display:flex;align-items:center;gap:4px;margin-top:3px;flex-wrap:wrap}
.vault-list-link{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--blue);text-decoration:none}
.vault-list-link:hover{text-decoration:underline}
.vault-list-link svg{width:11px;height:11px;stroke-width:1.75}
.vault-list-actions{display:flex;align-items:center;gap:3px;flex-shrink:0}
.vault-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(5px);z-index:600;display:none;align-items:center;justify-content:center;padding:24px}
.vault-modal-overlay.open{display:flex}
.vault-modal{background:var(--bg2);border-radius:20px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.vault-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8fafc,#eef2f6)}
.vault-modal-title{font-size:14px;font-weight:800;color:var(--text1);letter-spacing:-.02em}
.vault-modal-body{padding:18px 20px}
.vault-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:13px 20px;border-top:1px solid var(--border);background:var(--bg3)}
.vault-modal-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:8px;background:var(--bg3);cursor:pointer;color:var(--text3);transition:all var(--ease)}
.vault-modal-close:hover{background:var(--bg4);color:var(--text1)}
.vault-modal-close svg{width:13px;height:13px;stroke-width:2}
.vault-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vault-form-grid .wide{grid-column:1/-1}
.vault-form-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* ── Share modal ── */
.vault-share-modal{background:var(--bg2);border-radius:20px;width:100%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.vault-share-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8fafc,#eef2f6)}
.vault-share-body{padding:20px}
.vault-share-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.vault-share-link{font-family:var(--mono);font-size:11px;padding:8px 10px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;flex:1;word-break:break-all;color:var(--text2);line-height:1.4}
.vault-share-copy{flex-shrink:0}
.vault-active-shares{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.vault-active-shares-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);margin-bottom:8px}
.vault-share-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;margin-bottom:6px}
.vault-share-item-meta{flex:1;min-width:0}
.vault-share-item-exp{font-size:11px;color:var(--text3)}
.vault-share-item-token{font-family:var(--mono);font-size:9px;color:var(--text4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width: 1100px) {.vault-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
@media (max-width: 900px) {.vault-hero{flex-direction:column}.vault-brief{width:100%;box-sizing:border-box}.vault-form-grid{grid-template-columns:1fr}.vault-strip{flex-wrap:wrap}.vault-strip .sbox{min-width:0;flex:1 1 100%}.vault-strip .fs{flex:1 1 auto}}
@media (max-width: 600px) {.vault-grid{grid-template-columns:1fr}}
/* ══ metrics-v6-final-style ══ */
#page-metrics .metrics-v6-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:14px;align-items:stretch;margin-bottom:12px;}
#page-metrics .metrics-v6-title-wrap,#page-metrics .metrics-v6-brief{background:linear-gradient(135deg,#f8fafc,#eef2f6);border:1px solid var(--border);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow);}
#page-metrics .metrics-v6-kicker,.metrics-v6-brief-k{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin-bottom:5px;}
#page-metrics .metrics-v6-title{font-size:26px;font-weight:900;color:var(--text1);letter-spacing:-.045em;line-height:1.05;text-transform:none;}
#page-metrics .metrics-v6-sub,.metrics-v6-brief-s{font-size:13px;color:var(--text3);margin-top:5px;line-height:1.4;}
#page-metrics .metrics-v6-brief-v{font-size:24px;font-weight:900;letter-spacing:-.04em;color:var(--text1);line-height:1.1;}
#page-metrics .metrics-v6-strip{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:8px 10px;margin-bottom:16px;box-shadow:var(--shadow);overflow-x:auto;}
#page-metrics .metrics-v6-strip label{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);white-space:nowrap;}
#page-metrics .metrics-v6-strip .fs{min-width:150px;padding:7px 9px;font-size:12px;}
/* ══ metrics-v6-final-style ══ */
/* ── METRICS PAGE v8 ── */
#page-metrics .metrics-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px;padding:18px 20px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(135deg,#f8fafc,#eef2f6);box-shadow:var(--shadow)}
#page-metrics .metrics-kicker{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.13em;color:#64748b;margin-bottom:4px}
#page-metrics .metrics-page-title{font-size:22px;font-weight:850;color:var(--text1);letter-spacing:-.03em;line-height:1.1}
#page-metrics .metrics-sub{font-size:13px;color:var(--text3);margin-top:4px}
#page-metrics .metrics-brief-box{min-width:180px;background:rgba(255,255,255,.7);border:1px solid #cbd5df;border-radius:14px;padding:12px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
#page-metrics .metrics-brief-k{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#64748b}
#page-metrics .metrics-brief-v{font-family:'Bebas Neue',sans-serif;font-size:28px;line-height:1;color:#1f2937;margin-top:3px}
#page-metrics .metrics-brief-s{font-size:11px;color:#64748b;margin-top:2px}
/* Overview action bar */
#page-metrics .metrics-overview-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
#page-metrics .metrics-overview-bar .wbtn{flex-shrink:0}
/* Single metric header */
#page-metrics .metrics-metric-header{display:none;align-items:center;gap:12px;padding:14px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:16px;margin-bottom:14px;box-shadow:var(--shadow)}
#page-metrics .metrics-metric-header.active{display:flex}
#page-metrics .metrics-back-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--border2);background:var(--bg3);cursor:pointer;color:var(--text3);transition:all var(--ease);flex-shrink:0}
#page-metrics .metrics-back-btn:hover{background:var(--bg4);color:var(--text1)}
#page-metrics .metrics-back-btn svg{width:15px;height:15px;stroke-width:2}
#page-metrics .metrics-metric-name{font-size:18px;font-weight:800;color:var(--text1);letter-spacing:-.02em;flex:1;min-width:0}
#page-metrics .metrics-metric-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#page-metrics .metrics-type-badge{font-size:9px;font-weight:800;padding:2px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.06em}
#page-metrics .metrics-header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
#page-metrics .metrics-period-select{font-size:11px;padding:5px 8px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text1);cursor:pointer;max-width:100px}
/* All-cards section label */
#page-metrics .metrics-section-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);margin-bottom:10px}
/* Edit buttons on table rows */
#page-metrics .metric-row-edit-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);cursor:pointer;color:var(--text3);transition:all var(--ease)}
#page-metrics .metric-row-edit-btn:hover{background:var(--bg3);color:var(--text1)}
#page-metrics .metric-row-edit-btn svg{width:11px;height:11px;stroke-width:1.75}
/* Edit entry inline row */
#page-metrics .metric-edit-row td{background:var(--bg3)!important;padding:6px 8px!important}
#page-metrics .metric-edit-row input{width:100%;padding:4px 7px;border:1px solid var(--border2);border-radius:6px;font-size:12px;background:var(--bg2);color:var(--text1)}
#page-metrics .metrics-v6-strip .wbtn{font-size:11px;padding:7px 10px;white-space:nowrap;}
#page-metrics .metrics-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
#page-metrics .metrics-entry-grid,#page-metrics .metrics-definition-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;}
#page-metrics .metric-soft-note{font-size:11px;color:var(--text3);line-height:1.35;margin-top:3px;}
@media (max-width: 1100px) {#page-metrics .metrics-v6-hero{grid-template-columns:1fr;}#page-metrics .metrics-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}#page-metrics .metrics-entry-grid,#page-metrics .metrics-definition-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 760px) {#page-metrics .metrics-v6-strip{flex-direction:column;align-items:stretch;}#page-metrics .metrics-v6-strip .fs,#page-metrics .metrics-v6-strip .wbtn{width:100%;}#page-metrics .metrics-kpi-grid,#page-metrics .metrics-entry-grid,#page-metrics .metrics-definition-grid{grid-template-columns:1fr;}}
/* ══ Horizon Buckets ══ */
.horizon-bucket { margin-bottom:12px; border:1px solid var(--border2); border-radius:12px; overflow:hidden; }
.horizon-bucket-hdr { display:flex; align-items:center; justify-content:space-between; padding:9px 16px; background:var(--bg2); cursor:pointer; user-select:none; }
.horizon-bucket-hdr:hover { background:var(--bg3); }
.horizon-arr { width:14px; height:14px; color:var(--text3); transition:transform .2s; }
.horizon-arr.rotated { transform:rotate(-90deg); }
/* ══ Task Detail Panel (pd) ══ */
.pd-wrap {
padding: 4px 0 8px;
margin: -14px -14px 0; /* extend to panel edges, counteract pb padding */
padding: 18px 14px 8px;
border-radius: 0;
background: radial-gradient(ellipse at top left, rgba(var(--pd-dom-rgb,37,99,235),0.08) 0%, transparent 60%);
}
.pd-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; min-width: 0; }
.pd-row-title { align-items: flex-start; padding: 6px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.pd-row-meta { color: var(--text3); }
.pd-avatar { flex-shrink: 0; }
.pd-task-name { font-size: 15px; font-weight: 700; color: var(--text1); line-height: 1.3; flex: 1; min-width: 0; }
.pd-chip {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; font-weight: 700;
background: var(--bg3); border: 1px solid var(--border2);
border-radius: 5px; padding: 2px 7px; white-space: nowrap;
color: var(--text3);
}
.pd-divider { border: none; border-top: 1px solid var(--border); margin: 10px 0; }
.pd-section-title {
font-size: 9px; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; color: var(--text4); margin: 8px 0 4px;
}
/* Action buttons */
.pd-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0; }
.pd-act-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border2);
font-size: 12px; font-weight: 700; cursor: pointer;
background: var(--bg2); color: var(--text2);
transition: background .12s, color .12s;
flex: 1; justify-content: center;
}
.pd-act-btn:hover { background: var(--bg3); color: var(--text1); }
.pd-act-timer { color: var(--blue); border-color: rgba(37,99,235,.3); background: rgba(37,99,235,.06); }
.pd-act-timer:hover { background: rgba(37,99,235,.12); }
.pd-act-defer { color: #d97706; border-color: rgba(217,119,6,.3); background: rgba(217,119,6,.06); }
.pd-act-defer:hover { background: rgba(217,119,6,.12); }
/* Subtask rows */
.pd-subtasks { display: flex; flex-direction: column; gap: 4px; }
.pd-subtask-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 8px; cursor: pointer;
transition: background .12s;
}
.pd-subtask-row:hover { background: var(--bg3); }
@media (max-width: 768px) {
.pd-act-btn { padding: 9px 10px; font-size: 11px; }
.pd-task-name { font-size: 14px; }
}
/* ══ Panel Detail Updates ══ */
/* Action footer: Edit + Delete */
.pd-act-footer { display:flex; align-items:center; justify-content:space-between; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.pd-act-edit:hover { opacity:.9; }
.pd-delete-link { font-size:11px; color:#dc2626; cursor:pointer; font-weight:600; padding:4px 8px; border-radius:6px; }
.pd-delete-link:hover { background:rgba(220,38,38,.08); }
/* Complete as primary */
/* ══ NTL Row — remove left border, use gradient via inline style ══ */
.ntl-row { border-left: none !important; }
.ntl-row:hover { filter: brightness(0.97); }
/* ══ Mobile ultra-minimal ══ */
@media (max-width: 768px) {
/* No avatar on mobile */
.ntl-avatar-cell {
width: 32px !important;
padding: 0 4px !important;
display: none !important;
}
/* Minimal two-line row */
.ntl-row td {
padding: 6px 4px !important;
vertical-align: middle !important;
}
.ntl-chev-cell {
padding: 0 2px 0 4px !important;
display: table-cell !important;
width: 18px !important;
}
/* Title row compact */
.ntl-task-top {
justify-content: space-between !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
gap: 4px !important;
}
/* Sub row minimal: domain + project only */
.ntl-task-sub {
margin-top: 2px !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
.ntl-client-tag { display: none !important; }
.ntl-child-tag {
display: none !important;
}
.ntl-add-sub {
display: none !important;
}
.ntl-rec-badge { display: none !important; }
.ntl-subtask-chip { display: none !important; }
/* Mob-right: status badge + date only, no action buttons */
.ntl-mob-actions {
align-items: center !important;
gap: 4px !important;
margin-top: 2px !important;
display: none !important;
}
}
/* ══ Pass: Panel + Mobile + Celebration ══ */
/* Panel notes */
.pd-notes-body { font-size:12px; color:var(--text2); line-height:1.6; white-space:pre-wrap; padding:4px 0 16px; }
/* Panel action buttons — single row, all icons */
.pd-actions {
display:flex; align-items:center; gap:6px; padding:8px 0; flex-wrap:nowrap;
}
.pd-act-timer-wrap { position:relative; display:inline-flex; flex-direction:column; align-items:center; }
.pd-timer-display {
font-family:var(--mono); font-size:9px; font-weight:700; color:var(--blue);
position:absolute; top:-16px; left:50%; transform:translateX(-50%);
white-space:nowrap; background:var(--bg1); padding:1px 4px;
border-radius:4px; border:1px solid rgba(37,99,235,.3);
}
.pd-act-icon {
width:36px; height:36px; border-radius:10px; border:1px solid var(--border2);
display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
background:var(--bg2); transition:background .12s, transform .1s; flex-shrink:0;
}
.pd-act-icon:hover { background:var(--bg3); transform:scale(1.06); }
.pd-act-icon:active { transform:scale(0.94); }
.pd-act-timer { color:var(--blue); border-color:rgba(37,99,235,.25); background:rgba(37,99,235,.06); }
.pd-act-timer.running { background:rgba(37,99,235,.18); border-color:var(--blue); }
.pd-act-done {
color: #fff !important;
border-color: transparent !important;
background: var(--green,#16a34a) !important;
}
.pd-act-done:hover {
opacity: .9;
background: #15803d !important;
}
.pd-act-edit {
background: var(--ink,#1e293b) !important;
color: #fff !important;
border-color: transparent !important;
flex: 1;
}
.pd-act-text {
display:inline-flex; align-items:center; gap:6px; padding:0 14px;
height:36px; border-radius:10px; border:1px solid var(--border2);
font-size:12px; font-weight:700; cursor:pointer; flex:1;
background:var(--ink,#1e293b); color:#fff; border-color:transparent;
justify-content:center; transition:opacity .12s; white-space:nowrap;
}
.pd-act-text:hover { opacity:.88; }
.pd-act-defer { color:#d97706; border-color:rgba(217,119,6,.25); background:rgba(217,119,6,.06); }
.pd-act-delete { color:#dc2626; border-color:rgba(220,38,38,.2); background:rgba(220,38,38,.04); }
/* Row flash — vibrant rainbow burst */
@keyframes ntl-flash-overlay {
0% { opacity:0; background:linear-gradient(to right,#f87171,#fb923c,#fbbf24,#4ade80,#34d399,#60a5fa,#a78bfa); }
10% { opacity:1; background:linear-gradient(to right,#f87171,#fb923c,#fbbf24,#4ade80,#34d399,#60a5fa,#a78bfa); }
40% { opacity:0.7; background:linear-gradient(to right,#fca5a5,#fdba74,#fde68a,#86efac,#6ee7b7,#93c5fd,#c4b5fd); }
75% { opacity:0.3; background:linear-gradient(to right,#fee2e2,#ffedd5,#fef9c3,#dcfce7,#d1fae5,#dbeafe,#ede9fe); }
100% { opacity:0; }
}
.ntl-flash-div {
position:fixed;
pointer-events:none;
z-index:9000;
animation:ntl-flash-overlay 1000ms ease-out forwards;
border-radius:4px;
}
/* Done counter pulse */
@keyframes kpi-pulse-green {
0% { transform:scale(1); }
40% { transform:scale(1.3); color:var(--green); }
100% { transform:scale(1); }
}
.kpi-pulse-green { animation: kpi-pulse-green 600ms ease-out; display:inline-block; }
/* Mobile: p-body — space above bottom tab bar */
@media (max-width: 768px) {
.pb, #p-body { padding-bottom: 80px !important; }
/* Mobile task name — wrap to fill row, no truncation */
.ntl-task-name {
font-size: 13px !important;
font-weight: 600 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
max-width: none !important;
flex: 1 !important;
line-height: 1.3 !important;
word-break: break-word !important;
}
/* Mobile: hide status/date — task name gets full width */
.ntl-mob-right {
flex-direction: column !important;
align-items: flex-end !important;
gap: 2px !important;
flex-shrink: 0 !important;
display: none !important;
}
.ntl-task-cell {
max-width: none !important;
display: table-cell !important;
width: calc(100vw - 40px) !important;
padding-right: 12px !important;
}
.mob-status-badge {
white-space: nowrap !important;
font-size: 9px !important;
padding: 1px 5px !important;
}
.mob-due-badge {
padding: 2px 6px !important;
background: var(--bg3) !important;
border-radius: 4px !important;
border: 1px solid var(--border2) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 110px !important;
font-size: 9px !important;
color: var(--text3) !important;
font-family: var(--mono) !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
/* Comfortable row height */
.ntl-row {
max-height: 64px !important;
height: auto !important;
min-height: 44px !important;
}
}
/* Domain gradient + priority — desktop multi-background */
/* Priority backgrounds blended into gradient via JS inline style */
.ntl-row.p-Critical { --pri-bg: rgba(153,0,0,.04); }
.ntl-row.p-VeryHigh { --pri-bg: rgba(204,0,0,.04); }
.ntl-row.p-High { --pri-bg: rgba(224,102,102,.04); }
.ntl-row.p-Medium { --pri-bg: rgba(234,153,153,.04); }
.ntl-row.p-Low { --pri-bg: var(--bg1); }
.ntl-row.p-Dependent { --pri-bg: rgba(153,198,229,.06); }
/* ══ MOBILE PANEL BOTTOM PADDING — FINAL OVERRIDE ══ */
@media (max-width: 768px) {
html body #panel div.pb,
html body div.pb,
.pb { padding-bottom: 80px !important; }
}
/* Big digit celebration */
@keyframes bigCounterPop {
0% { opacity:0; transform:scale(0.5); }
20% { opacity:1; transform:scale(1.1); }
60% { opacity:1; transform:scale(1.0); }
100% { opacity:0; transform:scale(1.2); }
}
/* Defer off state */
.pd-act-defer-off { color:var(--text4) !important; }
tr.ntl-row[data-status] { background: var(--ntl-bg,rgba(242,243,245,1)) !important; }
/* Mobile: p-foot fixed floating above bottom tab bar */
@media (max-width: 768px) {
.pf, #p-foot {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 700 !important;
background: var(--bg1, #f2f3f5) !important;
border-top: 1px solid var(--border) !important;
padding: 10px 16px !important;
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
display: flex !important;
gap: 8px !important;
box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
}
.pf .btn, #p-foot .btn {
flex: 1 !important;
min-height: 44px !important;
font-size: 13px !important;
}
/* Add bottom padding to p-body so content not hidden behind fixed footer */
#panel .pb {
padding-bottom: 160px !important;
}
}
/* ══ Milestone Celebrations ══ */
@keyframes milestoneIn {
from { opacity:0; transform:scale(0.95); }
to { opacity:1; transform:scale(1); }
}
@keyframes milestoneOut {
from { opacity:1; transform:scale(1); }
to { opacity:0; transform:scale(1.05); }
}
@keyframes milestoneEmoji {
0% { transform:scale(0) rotate(-20deg); }
60% { transform:scale(1.3) rotate(5deg); }
100% { transform:scale(1) rotate(0deg); }
}
@keyframes milestoneIn {
from { opacity:0; transform:scale(0.95); }
to { opacity:1; transform:scale(1); }
}
@keyframes milestoneOut {
from { opacity:1; transform:scale(1); }
to { opacity:0; transform:scale(1.05); }
}
@keyframes milestoneEmoji {
0% { transform:scale(0) rotate(-20deg); }
60% { transform:scale(1.3) rotate(5deg); }
100% { transform:scale(1) rotate(0deg); }
}
/* ══════════════════════════════════════════════════════════
OVERDUE BANNER CARD — Pass 1 dashboard restructure
Full-width single card replacing the old 3-column KPI row.
Compact horizontal layout — not a tall hero card.
══════════════════════════════════════════════════════════ */
#kpi-overdue-card {
padding: 14px 20px !important;
min-height: 0 !important;
align-items: center !important;
border-radius: 12px !important;
}
/* Count number — smaller than default 52px */
#kpi-overdue-card .kpi-value {
font-size: 36px !important;
line-height: 1 !important;
}
/* Label */
#kpi-overdue-card .kpi-label {
margin-top: 0 !important;
}
/* Icon — smaller than default 52px */
#kpi-overdue-card .kpi-ico svg {
width: 32px !important;
height: 32px !important;
}
/* All clear state — mute the card slightly */
#kpi-overdue-card.all-clear {
--kc-grad: linear-gradient(135deg,#16a34a 0%,#15803d 60%,#166534 100%);
}
/* ══════════════════════════════════════════════════════════
OVERDUE ALERT BANNER #dash-overdue-banner
══════════════════════════════════════════════════════════ */
#dash-overdue-banner {
border-radius: 10px;
overflow: hidden;
background: #e6ebf2;
border: 1px solid #fca5a5;
cursor: pointer;
box-shadow: 0 1px 3px rgba(220,38,38,.08);
transition: box-shadow .2s, transform .2s;
}
#dash-overdue-banner:hover {
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(220,38,38,.18);
}
.dob-inner {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; gap: 12px;
}
.dob-left {
display: flex; align-items: center; gap: 10px;
min-width: 0; flex: 1;
}
.dob-right {
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.dob-icon {
width: 16px; height: 16px; stroke-width: 2;
color: #dc2626; flex-shrink: 0;
}
.dob-count {
font-family: 'Bebas Neue', sans-serif;
font-size: 22px; line-height: 1; color: #991b1b;
flex-shrink: 0;
}
.dob-label {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; color: #b91c1c;
flex-shrink: 0;
}
.dob-div {
width: 1px; height: 14px; background: #fca5a5;
flex-shrink: 0;
}
.dob-task {
font-size: 13px; font-weight: 600; color: #7f1d1d;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0;
}
.dob-meta {
font-size: 11px; color: #b91c1c;
white-space: nowrap;
}
.dob-more {
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: .05em;
color: #b91c1c;
background: rgba(220,38,38,0.08);
border: 1px solid rgba(220,38,38,0.2);
border-radius: 99px; padding: 1px 6px;
white-space: nowrap; flex-shrink: 0;
}
.dob-view {
font-size: 10px; font-weight: 700; color: #dc2626;
letter-spacing: .04em; white-space: nowrap;
}
.dob-progress {
height: 3px; background: var(--border);
}
.dob-progress-fill {
height: 100%; background: #fca5a5;
transition: width .8s ease; width: 0%;
}
/* ── All clear banner ────────────────────────────────────── */
#dash-allclear-banner {
border-radius: 10px;
background: linear-gradient(to right, #166534 0%, #16a34a 55%, #22c55e 100%);
box-shadow: 0 2px 8px rgba(22,163,74,.2);
}
.dab-inner {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
}
.dab-icon {
width: 15px; height: 15px; stroke-width: 2;
color: rgba(255,255,255,.85); flex-shrink: 0;
}
.dab-text {
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
}
/* ══════════════════════════════════════════════════════════
MORE METRICS INLINE STRIP .dms-strip
══════════════════════════════════════════════════════════ */
.dms-strip {
display: flex; align-items: stretch;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; overflow: hidden;
padding: 0;
}
.dms-cell {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; flex: 1; min-width: 0;
transition: background .15s;
}
.dms-cell:hover { background: var(--bg3); }
.dms-icon {
flex-shrink: 0; color: var(--text4);
}
.dms-icon svg {
width: 16px; height: 16px; stroke-width: 1.75;
display: block;
}
.dms-donut {
width: 28px; height: 28px; display: block;
}
.dms-body { min-width: 0; flex: 1; }
.dms-val {
font-family: 'Bebas Neue', sans-serif;
font-size: 20px; line-height: 1; color: var(--text1);
letter-spacing: .02em; display: flex; align-items: center; gap: 4px;
}
.dms-lbl {
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--text4); margin-top: 1px;
}
.dms-sub {
font-size: 9px; color: var(--text4); margin-top: 1px;
}
/* Mini progress bar inside budget cell */
.dms-bar-wrap {
position: relative; height: 3px; border-radius: 99px;
background: var(--border); margin: 4px 0 2px; overflow: hidden;
}
.dms-bar-fill {
position: absolute; top: 0; left: 0; height: 100%;
background: var(--blue); border-radius: 99px;
transition: width .8s ease;
}
.dms-bar-rem {
background: var(--border2);
}
.dms-div {
width: 1px; background: var(--border); flex-shrink: 0;
align-self: stretch; margin: 8px 0;
}
/* Responsive — collapse to 2-row wrap on narrow screens */
@media (max-width: 900px) {
.dms-strip { flex-wrap: wrap; }
.dms-cell { flex: 0 0 calc(50% - 1px); }
.dms-div { display: none; }
}
@media (max-width: 480px) {
.dms-cell { flex: 0 0 100%; }
}
/* ══════════════════════════════════════════════════════════
DASHBOARD TWO-COLUMN LAYOUT — Pass 2 Team Pulse
══════════════════════════════════════════════════════════ */
/* Two-column grid: task list left, pulse right */
#dash-two-col {
display: grid;
grid-template-columns: 1fr 252px;
gap: 0 20px;
align-items: start;
}
#dash-task-col { min-width: 0; }
/* Collapse to single column on narrow screens */
@media (max-width: 1100px) {
#dash-two-col { grid-template-columns: 1fr; }
#dash-pulse-panel { display: none; }
}
/* ── Team Pulse panel ────────────────────────────────────── */
#dash-pulse-panel {
position: sticky;
top: 16px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
/* Header */
.dtp-header {
display: flex; align-items: center; gap: 6px;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--border);
}
.dtp-title {
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; color: var(--text3);
flex: 1;
}
.dtp-title-icon {
width: 13px; height: 13px; stroke-width: 1.75;
color: var(--text4); flex-shrink: 0;
}
/* Live pulse dot */
.dtp-live-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--green, #16a34a);
box-shadow: 0 0 0 0 rgba(22,163,74,.4);
animation: dtp-pulse 2.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes dtp-pulse {
0% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
60% { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.dtp-view-all {
font-size: 10px; font-weight: 600; color: var(--blue);
cursor: pointer; white-space: nowrap; flex-shrink: 0;
text-decoration: none;
}
.dtp-view-all:hover { text-decoration: underline; }
/* Feed container */
#dtp-feed {
max-height: 520px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
position: relative;
}
/* Loading / empty */
.dtp-loading {
padding: 24px 14px;
font-size: 11px; color: var(--text4);
text-align: center;
}
.dtp-empty {
padding: 28px 14px;
font-size: 12px; color: var(--text4);
text-align: center; line-height: 1.5;
}
/* Individual event row — no horizontal divider; connection between rows
comes from the single continuous vertical thread line instead (below),
which is a much quieter way to convey "these are all part of one feed"
than a hard line breaking every row apart from its neighbours. */
.dtp-row {
display: flex; align-items: flex-start; gap: 9px;
padding: 9px 14px;
position: relative;
transition: background .15s;
}
.dtp-row:hover { background: var(--bg3); }
/* One continuous vertical line running behind every avatar in the feed
— a plain thread, not the full branching tree used on the detail
pages, since this is meant to stay a lightweight glimpse. Aligns with
the avatar's own horizontal center (14px padding + 12px half the
avatar's own width). */
#dtp-feed::before {
content: ''; position: absolute; left: 25px; top: 18px; bottom: 18px;
width: 1px; background: var(--border); z-index: 0;
}
/* Avatar */
.dtp-av {
width: 24px; height: 24px; border-radius: 50%;
object-fit: cover; flex-shrink: 0; margin-top: 1px;
border: 1.5px solid var(--border2);
position: relative; z-index: 1; background: var(--bg2);
}
.dtp-av-fb {
width: 24px; height: 24px; border-radius: 50%;
background: var(--bg3); color: var(--text3);
font-size: 8px; font-weight: 700; text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
border: 1.5px solid var(--border);
position: relative; z-index: 1;
}
/* Text body */
.dtp-body { flex: 1; min-width: 0; }
.dtp-line1 {
font-size: 10.5px; color: var(--text3); line-height: 1.35;
display: flex; align-items: baseline; gap: 4px;
}
.dtp-in { color: var(--text4); }
.dtp-domain { font-weight: 700; }
.dtp-time { margin-left: auto; color: var(--text4); flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dtp-line2 {
font-size: 12px; color: var(--text1); margin-top: 3px; line-height: 1.35;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dtp-verb { font-style: italic; font-weight: 400; color: var(--text2); }
.dtp-detail {
font-size: 12px; color: var(--text2); margin-top: 3px; line-height: 1.4;
overflow-wrap: break-word;
}
/* ══════════════════════════════════════════════════════════
ACTIVITY FEED PAGE GRID — restored after app.css rebuild
══════════════════════════════════════════════════════════ */
#page-activity.on {
display: grid !important;
grid-template-columns: 1fr 220px;
grid-template-areas:
"header header"
"controls controls"
"feed stats";
gap: 16px 24px;
align-items: start;
}
#act-page-header { grid-area: header; }
#act-controls-bar { grid-area: controls; }
#act-feed-body { grid-area: feed; min-width: 0; }
#act-stats-panel { grid-area: stats; position: sticky; top: 16px; }
@media (max-width: 960px) {
#page-activity.on { grid-template-columns: 1fr 180px; }
}
@media (max-width: 680px) {
#page-activity.on {
grid-template-columns: 1fr;
grid-template-areas: "header" "stats" "controls" "feed";
gap: 10px;
}
#act-stats-panel {
position: static !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.afe-stat-card { flex-direction: column !important; align-items: flex-start !important; padding: 8px 10px !important; gap: 2px !important; }
.afe-stat-icon { display: none !important; }
.afe-stat-n { font-size: 18px !important; }
.afe-stat-l { font-size: 9px !important; }
}
/* Source toggle */
.afe-src-btn {
font-size: 11px; font-weight: 600; padding: 5px 12px;
border: none; background: transparent; border-radius: 6px;
color: var(--text3); cursor: pointer; transition: all .15s;
}
.afe-src-btn.on { background: var(--blue); color: #fff; }
.afe-src-btn:not(.on):hover { background: var(--bg3); color: var(--text1); }
/* Stats panel */
#act-stats-panel { display: flex; flex-direction: column; gap: 8px; }
.afe-stat-card {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; padding: 12px 14px;
display: flex; align-items: center; gap: 10px;
transition: box-shadow .2s;
}
.afe-stat-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.afe-stat-icon {
width: 28px; height: 28px; border-radius: 7px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background: var(--bg3); color: var(--text3); border: 1px solid var(--border);
}
.afe-stat-right { flex: 1; min-width: 0; }
.afe-stat-n { font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; color: var(--text1); }
.afe-stat-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text4); margin-top: 1px; }
/* Date separator */
.afe-date-sep { display: flex; align-items: center; gap: 10px; margin: 24px 0 16px; }
.afe-date-sep:first-child { margin-top: 4px; }
.afe-date-sep-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border) 40%, var(--border) 60%, transparent); }
.afe-date-sep-label {
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--text4);
background: var(--bg); padding: 3px 10px; border-radius: 99px;
border: 1px solid var(--border); white-space: nowrap; flex-shrink: 0;
}
/* Event rows */
.afe-row { display: flex; align-items: stretch; gap: 12px; margin-bottom: 8px; }
.afe-thread-col { width: 20px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 14px; }
.afe-thread-line { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--border); z-index: 0; }
.afe-thread-line.afe-last { background: linear-gradient(to bottom, var(--border) 50%, transparent 100%); }
.afe-dot { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg); }
.afe-card { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.afe-card:hover { box-shadow: var(--shadow); border-color: var(--border2); }
.afe-card-inner { padding: 10px 14px; }
.afe-line1 { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: nowrap; }
.afe-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1.5px solid var(--border2); }
.afe-av-fb { background: var(--bg3); color: var(--text3); font-size: 8px; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); flex-shrink: 0; }
.afe-actor { font-size: 12px; font-weight: 700; color: var(--text1); white-space: nowrap; flex-shrink: 0; }
.afe-arrow { font-size: 11px; color: var(--text4); flex-shrink: 0; }
.afe-headline { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.afe-headline svg { width:13px; height:13px; vertical-align:-2px; margin-right:1px; stroke-width:1.8; }
.afe-rxn-on, .dtp-rxn-on { color:var(--text4); font-style:italic; }
.dtp-line2 svg { width:12px; height:12px; vertical-align:-2px; margin-right:1px; stroke-width:1.8; }
.afe-headline-comment { font-style: italic; color: var(--text2); font-weight: 400; white-space: normal; overflow-wrap: break-word; word-break: break-word; line-height: 1.45; }
.afe-line2 { margin-top: 5px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: var(--text4); min-width: 0; }
.afe-detail { margin-top: 4px; }
.afe-change-line {
font-size: 12px; color: var(--text2); line-height: 1.5;
padding-left: 10px; position: relative;
}
.afe-change-line::before {
content: ''; position: absolute; left: 0; top: 7px;
width: 4px; height: 4px; border-radius: 50%; background: var(--text4);
}
.afe-detail-more { display: none; }
.afe-detail-more.expanded { display: block; }
.afe-detail-toggle {
background: none; border: none; padding: 2px 0 0 10px; margin-top: 2px;
font-size: 11px; font-weight: 700; color: var(--blue); cursor: pointer;
}
.afe-detail-toggle:hover { text-decoration: underline; }
.afe-meta-sep { color: var(--border2); }
.afe-meta-time { color: var(--text4); white-space: nowrap; }
.afe-meta-proj { font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.afe-meta-proj[data-code="DELIVER"] { color: var(--dom-deliver); }
.afe-meta-proj[data-code="VITAL"] { color: var(--dom-vital); }
.afe-meta-proj[data-code="EVOLVE"] { color: var(--dom-evolve); }
.afe-meta-proj[data-code="SPARK"] { color: var(--dom-spark); }
.afe-meta-proj[data-code="PERSONAL"] { color: var(--dom-personal); }
.afe-meta-proj[data-code="VAULT"] { color: var(--dom-vault); }
.afe-meta-proj:not([data-code]) { color: var(--blue); }
.afe-meta-client { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--bg3); color: var(--text3); border: 1px solid var(--border); border-radius: 99px; padding: 1px 7px; white-space: nowrap; }
.afe-meta-type { font-style: italic; color: var(--text4); white-space: nowrap; }
.afe-meta-on { font-style: italic; color: var(--text4); white-space: nowrap; }
.afe-meta-task { color: var(--text3); }
/* Loading / empty */
#act-loading { text-align: center; padding: 48px 0; color: var(--text4); font-size: 13px; }
.afe-empty { text-align: center; padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
@keyframes afe-spin { to { transform: rotate(360deg); } }
.afe-spin { animation: afe-spin 1s linear infinite; }
/* ══════════════════════════════════════════════════════════
CLOSED TODAY — 2-column card grid
══════════════════════════════════════════════════════════ */
.closed-task-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 4px 0 8px;
}
.closed-grid-empty {
grid-column: 1 / -1;
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 24px;
font-size: 13px; color: var(--text4);
font-style: italic;
}
/* Card */
.closed-card {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 9px;
padding: 10px 12px;
cursor: pointer;
transition: box-shadow .15s, border-color .15s;
display: flex; flex-direction: column; gap: 5px;
}
.closed-card:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.07);
border-color: var(--border2);
}
/* Line 1: checkmark + task name */
.closed-card-top {
display: flex; align-items: flex-start; gap: 7px;
min-width: 0;
}
.closed-card-check {
width: 13px; height: 13px; stroke-width: 2;
flex-shrink: 0; margin-top: 1px;
}
.closed-card-name {
font-size: 12px; font-weight: 600; color: var(--text3);
text-decoration: line-through; text-decoration-color: var(--border2);
line-height: 1.4;
/* Allow wrapping for long names */
word-break: break-word;
}
/* Line 2: domain + project + client */
.closed-card-meta {
display: flex; align-items: center; gap: 5px;
flex-wrap: wrap; font-size: 10px;
}
.closed-card-sheet { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.closed-card-sep { color: var(--border2); }
.closed-card-proj { color: var(--text4); }
.closed-card-client {
font-size: 9px; font-weight: 700; text-transform: uppercase;
background: var(--bg3); color: var(--text4);
border: 1px solid var(--border); border-radius: 99px;
padding: 1px 6px;
}
/* Line 3: avatar + time + days + date */
.closed-card-footer {
display: flex; align-items: center; gap: 6px;
margin-top: 2px; flex-wrap: wrap;
}
.closed-card-av { flex-shrink: 0; }
.closed-card-time {
font-family: var(--mono); font-size: 10px; color: var(--text4);
white-space: nowrap;
}
.closed-card-days {
font-size: 9px; font-weight: 700; color: var(--text4);
background: var(--bg3); border: 1px solid var(--border);
border-radius: 99px; padding: 1px 6px; white-space: nowrap;
}
.closed-card-date {
font-size: 10px; color: var(--text4);
margin-left: auto; white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════
MINDSCAPE PAGE
══════════════════════════════════════════════════════════ */
.ms-loading {
display: flex; align-items: center; gap: 10px;
padding: 48px; color: var(--text4); font-size: 13px;
}
.ms-page {
display: grid;
grid-template-columns: 1fr 360px;
gap: 24px;
align-items: start;
padding: 4px 0 40px;
}
.ms-left-col {
display: flex; flex-direction: column; gap: 24px;
min-width: 0;
}
.ms-right-col {
position: sticky;
top: 16px;
display: flex; flex-direction: column; gap: 0;
min-width: 0;
}
@media (max-width: 900px) {
.ms-page {
grid-template-columns: 1fr;
}
.ms-right-col { position: static; }
}
/* ── Section ─────────────────────────────────────────────── */
.ms-section {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.ms-section-hdr {
display: flex; align-items: center; gap: 8px;
padding: 14px 18px 12px;
border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; color: var(--text3);
}
.ms-sec-icon {
width: 14px; height: 14px; stroke-width: 1.75;
color: var(--text4); flex-shrink: 0;
}
.ms-sec-count {
margin-left: auto; font-size: 10px; font-weight: 600;
color: var(--text4); text-transform: none; letter-spacing: 0;
}
/* ── Horizon cards ───────────────────────────────────────── */
.ms-horizons {
display: flex; flex-direction: column;
}
.ms-horizon-card {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
transition: background .15s;
}
.ms-horizon-card:last-child { border-bottom: none; }
.ms-horizon-card:hover { background: var(--bg3); }
.ms-hc-top {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.ms-hc-label {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; flex-shrink: 0;
}
.ms-hc-period {
font-size: 10px; color: var(--text4);
margin-left: auto; white-space: nowrap;
}
.ms-carry-chip {
font-size: 9px; font-weight: 700; color: var(--blue);
background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.2);
border-radius: 99px; padding: 1px 6px; flex-shrink: 0;
}
.ms-hc-title {
font-size: 15px; font-weight: 650; color: var(--text1);
line-height: 1.35; cursor: pointer; margin-bottom: 8px;
}
.ms-hc-title:hover { color: var(--blue); }
.ms-hc-empty {
display: flex; align-items: center; gap: 5px;
font-size: 13px; color: var(--text4); cursor: pointer;
padding: 4px 0; font-style: italic;
transition: color .15s;
}
.ms-hc-empty:hover { color: var(--blue); }
.ms-hc-meta {
font-size: 11px; color: var(--text4); margin-top: 5px;
}
.ms-close-link {
color: var(--blue); cursor: pointer; text-decoration: none;
}
.ms-close-link:hover { text-decoration: underline; }
/* Progress bar */
.ms-prog-track {
height: 3px; background: var(--border);
border-radius: 99px; overflow: hidden;
}
.ms-prog-fill {
height: 100%; border-radius: 99px;
transition: width .6s ease;
}
/* ── Parking lot ─────────────────────────────────────────── */
.ms-capture-wrap {
display: flex; gap: 8px; padding: 12px 18px;
border-bottom: 1px solid var(--border);
}
.ms-capture-in {
flex: 1; font-size: 13px; padding: 8px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text1);
outline: none; transition: border-color .15s;
font-family: inherit;
}
.ms-capture-in:focus { border-color: var(--blue); }
.ms-capture-btn {
width: 36px; height: 36px; border-radius: 8px;
background: var(--blue); color: #fff; border: none;
font-size: 20px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
line-height: 1; transition: opacity .15s;
}
.ms-capture-btn:hover { opacity: .85; }
.ms-ideas-list { padding: 8px 0; }
.ms-idea-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 18px; transition: background .15s;
}
.ms-idea-row:hover { background: var(--bg3); }
.ms-idea-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ms-idea-body { flex: 1; min-width: 0; }
.ms-idea-title {
font-size: 13px; font-weight: 600; color: var(--text1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-idea-meta {
font-size: 10px; color: var(--text4); margin-top: 2px;
}
.ms-idea-acts {
display: flex; gap: 4px; flex-shrink: 0;
}
.ms-ia-btn {
width: 28px; height: 28px; border-radius: 6px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text3); font-size: 13px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.ms-ia-btn:hover { background: var(--bg3); color: var(--text1); }
.ms-ia-strike:hover { color: var(--red); border-color: var(--red); }
.ms-empty-ideas {
padding: 24px 18px; font-size: 13px; color: var(--text4);
font-style: italic;
}
/* Struck off */
.ms-struck-wrap {
padding: 10px 18px;
border-top: 1px solid var(--border);
}
.ms-struck-toggle {
background: none; border: none; color: var(--text4);
font-size: 11px; font-weight: 600; cursor: pointer;
padding: 4px 0; letter-spacing: .04em;
}
.ms-struck-list { padding-top: 8px; }
.ms-struck-row {
display: flex; align-items: baseline; gap: 8px;
padding: 4px 0; border-bottom: 1px solid var(--border);
}
.ms-struck-row:last-child { border-bottom: none; }
.ms-struck-title {
font-size: 12px; color: var(--text4);
text-decoration: line-through; flex: 1;
}
.ms-struck-note {
font-size: 10px; color: var(--text4); font-style: italic;
}
/* ── Past goals timeline ─────────────────────────────────── */
.ms-timeline {
padding: 8px 0;
}
.ms-tl-row {
display: flex; gap: 14px; padding: 12px 18px;
border-bottom: 1px solid var(--border);
}
.ms-tl-row:last-child { border-bottom: none; }
.ms-tl-dot {
width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0; margin-top: 5px;
}
.ms-tl-body { flex: 1; min-width: 0; }
.ms-tl-top {
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px; flex-wrap: wrap;
}
.ms-tl-horizon {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; flex-shrink: 0;
}
.ms-tl-period {
font-size: 10px; color: var(--text4); flex-shrink: 0;
}
.ms-tl-title {
font-size: 13px; font-weight: 600; color: var(--text2);
}
.ms-tl-note {
font-size: 11px; color: var(--text4); margin-top: 3px;
font-style: italic;
}
.ms-chip {
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; border: 1px solid;
border-radius: 99px; padding: 1px 7px; flex-shrink: 0;
}
/* ── Edit / outcome modal ────────────────────────────────── */
.ms-edit-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.35);
z-index: 9000; display: flex; align-items: center;
justify-content: center; padding: 20px;
}
.ms-edit-modal {
background: var(--bg2); border: 1px solid var(--border);
border-radius: 14px; padding: 20px; width: 100%;
max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.2);
}
.ms-edit-hdr {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; font-size: 14px;
}
.ms-edit-close {
background: none; border: none; color: var(--text4);
font-size: 16px; cursor: pointer; padding: 2px 6px;
border-radius: 4px;
}
.ms-edit-close:hover { background: var(--bg3); color: var(--text1); }
.ms-edit-ta {
width: 100%; min-height: 80px; padding: 10px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text1);
font-size: 14px; font-family: inherit; resize: vertical;
outline: none; box-sizing: border-box;
transition: border-color .15s;
}
.ms-edit-ta:focus { border-color: var(--blue); }
.ms-edit-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 12px;
}
.ms-outcome-btns {
display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.ms-out-btn {
text-align: left; padding: 10px 14px; border-radius: 8px;
border: 1px solid var(--border); background: var(--bg);
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background .15s;
}
.ms-out-btn:hover { background: var(--bg3); }
/* ══════════════════════════════════════════════════════════
WEEKLY SYNTHESIS CARD — Strategy Center
══════════════════════════════════════════════════════════ */
.exec-synthesis-card {
background: linear-gradient(135deg, #edf2f7, #e3eaf3) !important;
border-color: #cdd8e6 !important;
}
.synth-loading {
font-size: 12px; color: var(--text4); font-style: italic;
padding: 4px 0;
}
/* Header row */
.synth-header {
display: flex; align-items: center;
justify-content: space-between; margin-bottom: 10px;
}
.synth-title-wrap {
display: flex; align-items: center; gap: 10px;
}
.synth-kicker {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; color: var(--text4);
}
.synth-week {
font-size: 10px; color: var(--text4);
}
.synth-refresh-btn {
font-size: 11px; font-weight: 600; color: var(--text4);
background: none; border: 1px solid var(--border);
border-radius: 6px; padding: 3px 10px; cursor: pointer;
transition: all .15s;
}
.synth-refresh-btn:hover { color: var(--text1); border-color: var(--border2); }
/* Headline */
.synth-headline {
font-size: 15px; font-weight: 700; color: var(--text1);
margin-bottom: 10px; line-height: 1.3;
}
/* Trajectory vs Agency ratio bar */
.synth-ratio-wrap { margin-bottom: 14px; }
.synth-ratio-bar {
display: flex; height: 6px; border-radius: 99px;
overflow: hidden; background: var(--border);
margin-bottom: 5px;
}
.synth-ratio-ext {
background: #dc2626; /* red — external/trajectory */
height: 100%; transition: width .6s ease;
}
.synth-ratio-self {
background: var(--green); /* green — self/agency */
height: 100%; transition: width .6s ease;
}
.synth-ratio-labels {
display: flex; justify-content: space-between;
}
.synth-ratio-lbl {
font-size: 10px; font-weight: 700;
}
.synth-ratio-lbl.ext { color: #dc2626; }
.synth-ratio-lbl.self { color: var(--green); }
/* Pattern sentences */
.synth-sentences {
display: flex; flex-direction: column; gap: 8px;
}
.synth-sentence {
display: flex; align-items: baseline; gap: 8px;
font-size: 13px; color: var(--text2); line-height: 1.5;
}
.synth-icon {
font-size: 11px; color: var(--text4);
flex-shrink: 0; width: 14px; text-align: center;
}
/* Footer stats */
.synth-footer {
margin-top: 12px; font-size: 10px; color: var(--text4);
border-top: 1px solid var(--border); padding-top: 8px;
font-variant-numeric: tabular-nums;
}
/* ══════════════════════════════════════════════════════════
NOTES TAB — Notebooks + Sticky Notes (v2)
Visual system: coloured bars, no emoji icons, clean hierarchy
══════════════════════════════════════════════════════════ */
#page-notebook.on { display: flex !important; height: calc(100vh - 56px); overflow: hidden; }
.nb-root { display: flex; width: 100%; height: 100%; overflow: hidden; }
/* ── Sidebar ─────────────────────────────────────────────── */
.nb-sidebar {
width: 232px; flex-shrink: 0;
border-right: 1px solid var(--border);
background: var(--bg2);
display: flex; flex-direction: column;
overflow: hidden;
}
/* Mode toggle */
.nb-mode-toggle {
display: flex; flex-wrap: wrap; padding: 8px 8px 0;
gap: 4px; flex-shrink: 0;
}
.nb-mode-btn {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 5px; padding: 6px 8px; font-size: 11px; font-weight: 600;
border: 1px solid var(--border); border-radius: 7px;
background: var(--bg); color: var(--text3); cursor: pointer;
transition: all .15s;
}
/* Plan Day Ahead's label is longer than Notebooks/Stickies — rather
than cramming three equal thirds into one row (which wraps the
text mid-word), it gets its own full-width row underneath. */
#nb-mode-planday { flex-basis: 100%; }
.nb-mode-btn:hover { background: var(--bg3); color: var(--text1); }
.nb-mode-btn.nb-mode-active {
background: var(--blue); color: #fff;
border-color: var(--blue);
}
/* Sidebar header — action buttons */
.nb-sidebar-hdr {
padding: 6px 8px 4px;
display: flex; align-items: center; gap: 4px;
flex-shrink: 0;
}
.nb-sidebar-acts { display: flex; gap: 4px; width: 100%; }
.nb-icon-btn {
width: 28px; height: 28px; border-radius: 6px;
border: 1px solid var(--border); background: var(--bg);
color: var(--text3); cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: all .15s; flex-shrink: 0;
}
.nb-icon-btn:hover { background: var(--bg3); color: var(--text1); border-color: var(--border2); }
.nb-delete-btn:hover { color: var(--red); border-color: var(--red); }
/* Search */
.nb-search-wrap {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px 8px; flex-shrink: 0;
}
.nb-search {
flex: 1; padding: 5px 8px; font-size: 12px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg); color: var(--text1); outline: none;
font-family: inherit; transition: border-color .15s;
}
.nb-search:focus { border-color: var(--blue); }
/* Tree */
.nb-tree {
flex: 1; overflow-y: auto; padding: 4px 0 12px;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.nb-loading, .nb-tree-empty {
padding: 16px 12px; font-size: 12px; color: var(--text4); font-style: italic;
}
/* Tree items — coloured bar system */
.nb-tree-item {
display: flex; align-items: center; gap: 6px;
padding: 5px 10px; cursor: pointer; font-size: 12px;
color: var(--text2); border-radius: 0;
transition: background .1s; white-space: nowrap; overflow: hidden;
user-select: none; position: relative;
}
.nb-tree-item:hover { background: var(--bg3); }
.nb-tree-item.nb-active { background: rgba(37,99,235,.08); color: var(--text1); font-weight: 600; }
.nb-tree-item[data-level="notebook"] { font-weight: 700; color: var(--text1); margin-top: 4px; }
.nb-tree-item[data-level="section"] { font-weight: 600; color: var(--text2); }
.nb-tree-item[data-level="page"] { font-weight: 400; color: var(--text2); }
.nb-tree-item[data-level="subpage"] { font-weight: 400; color: var(--text3); font-size: 11px; }
/* Coloured vertical bar */
.nb-bar {
flex-shrink: 0; border-radius: 99px;
height: 14px; min-width: 2px; align-self: center;
transition: opacity .15s;
}
.nb-tree-item[data-level="notebook"] .nb-bar { height: 16px; }
/* Chevron */
.nb-chev {
width: 14px; flex-shrink: 0; display: flex; align-items: center;
justify-content: center; color: var(--text4); transition: transform .18s;
}
.nb-chev.nb-chev-open { transform: rotate(90deg); }
.nb-chev-ph { width: 14px; flex-shrink: 0; }
.nb-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nb-shared-dot { color: var(--blue); flex-shrink: 0; opacity: .7; }
.nb-drag-handle {
opacity: 0; color: var(--text4); flex-shrink: 0;
cursor: grab; transition: opacity .15s;
}
.nb-tree-item:hover .nb-drag-handle { opacity: 1; }
/* Drag states */
.nb-dragging { opacity: .4; }
.nb-drag-over { background: rgba(37,99,235,.12) !important; outline: 2px dashed var(--blue); }
/* Inline rename */
.nb-inline-rename {
flex: 1; font-size: 12px; font-weight: inherit;
border: 1px solid var(--blue); border-radius: 4px;
padding: 1px 4px; background: var(--bg2); color: var(--text1);
outline: none; font-family: inherit;
}
/* ── Editor area ─────────────────────────────────────────── */
.nb-editor-wrap {
flex: 1; display: flex; flex-direction: column;
overflow: hidden; background: var(--bg);
}
/* ── Level icon in sidebar tree — all 18px, coloured ────── */
.nb-level-icon {
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0; width: 20px; height: 20px;
margin-right: 3px;
}
/* Diary items — bold label */
.nb-tree-item[data-level="notebook"] .nb-item-title {
font-weight: 700; color: var(--text1);
}
/* Chapter items */
.nb-tree-item[data-level="section"] .nb-item-title {
font-weight: 600; color: var(--text1);
}
/* Page items */
.nb-tree-item[data-level="page"] .nb-item-title {
font-weight: 500; color: var(--text2);
}
/* Note items — lightest */
.nb-tree-item[data-level="subpage"] .nb-item-title {
font-weight: 400; color: var(--text3);
}
/* ── Page editor background — tint set by JS + bubble decoration ── */
#nb-editor-panel {
display: flex; flex-direction: column; overflow: hidden;
}
/* Bubble decoration — moved to bottom-right and enlarged. Previously
top-right, which now directly collides with the new band; relocating
avoids the conflict entirely rather than trying to make two
decorations compete for the same corner. */
#nb-editor-panel::before {
content: '';
position: absolute;
right: -70px; bottom: -90px;
width: 280px; height: 280px;
border-radius: 50%;
background: var(--nb-page-color, transparent);
opacity: .08;
pointer-events: none;
z-index: 0;
}
#nb-editor-panel::after {
content: '';
position: absolute;
right: 40px; bottom: 60px;
width: 160px; height: 160px;
border-radius: 50%;
background: var(--nb-page-color, transparent);
opacity: .05;
pointer-events: none;
z-index: 0;
}
/* All editor content sits above bubbles */
#nb-editor-panel > * { position: relative; z-index: 1; }
/* Quill editor transparent so panel tint shows through */
.nb-quill-editor { background: transparent !important; }
.nb-quill-editor .ql-editor { background: transparent !important; }
.ql-container.ql-bubble { background: transparent !important; }
.nb-empty-state {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 12px; color: var(--text4); font-size: 13px;
text-align: center; padding: 40px;
}
/* ── The band — a thick, solid strip in the diary's own color,
containing breadcrumb, title, and Created/Edited info, all flipped
to white for contrast against the color. Consolidated from what were
previously two duplicate rules (the source of the "line keeps
disappearing" bug — both carried `transition: border-color`, on
what's supposed to be a static, per-page color that should never
animate in the first place). Background color itself is set inline
by JS to the diary's own color, same as the rest of the app. ── */
#nb-band-wrap {
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
border-radius: 14px 14px 0 0; overflow: hidden;
}
.nb-band {
padding: 16px 32px 22px; color: #fff;
}
.nb-band-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-right: 40px; }
.nb-breadcrumb { font-size: 11px; color: rgba(255,255,255,.8); }
.nb-editor-acts { display: flex; gap: 8px; align-items: center; }
.nb-editor-meta {
font-size: 10px; color: rgba(255,255,255,.72); line-height: 1.3;
white-space: nowrap; margin-right: 4px; text-align: right;
}
.nb-editor-meta span { display: block; }
.nb-share-btn {
display: flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; padding: 4px 10px;
border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
transition: background .15s;
}
.nb-share-btn:hover { background: rgba(255,255,255,.24); }
.nb-band .nb-icon-btn { background: transparent; border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.85); }
.nb-band .nb-icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.nb-modal-close {
position: absolute; top: 14px; right: 16px; z-index: 5;
width: 28px; height: 28px; border-radius: 7px; border: none;
background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.nb-modal-close:hover { background: rgba(255,255,255,.26); }
/* Title now lives on the band — larger, white, no separate padding
wrapper needed since the band already provides it. */
.nb-title-wrap { flex-shrink: 0; }
.nb-title-input {
width: 100%; font-size: 38px; font-weight: 800;
color: #fff; border: none; background: transparent;
outline: none; font-family: 'Inter', var(--sans); letter-spacing: -.025em;
line-height: 1.2; box-sizing: border-box;
}
.nb-title-input::placeholder { color: rgba(255,255,255,.55); }
/* Crisp border in a lighter shade of the band's own color, replacing
the earlier soft gradient fade — a defined edge rather than a blur. */
.nb-band-fade {
height: 3px; flex-shrink: 0;
background: var(--nb-page-color, transparent);
opacity: .35;
}
/* Editor body — the left vertical rule runs down this wrapper, in the
diary's own color, matching the "aristocrat document" reference. */
.nb-editor-body {
flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
border-left: 3px solid var(--nb-page-color, transparent);
margin-left: 28px; padding-left: 4px; padding-top: 150px;
}
/* Quill */
.nb-quill-editor {
flex: 1; min-height: 0; overflow-y: auto; padding: 0 28px;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
position: relative; /* positioning context for the floating toolbar below */
}
.nb-quill-editor .ql-editor {
font-size: 14px; line-height: 1.7; color: var(--text1);
font-family: inherit; min-height: 400px; padding: 8px 0 40px;
}
.nb-quill-editor .ql-editor h1 { font-size: 22px; font-weight: 800; margin: 18px 0 6px; font-family: 'Inter', var(--sans); }
.nb-quill-editor .ql-editor h2 { font-size: 18px; font-weight: 700; margin: 14px 0 5px; font-family: 'Inter', var(--sans); }
.nb-quill-editor .ql-editor h3 { font-size: 15px; font-weight: 700; margin: 12px 0 4px; color: var(--text2); font-family: 'Inter', var(--sans); }
.nb-quill-editor .ql-editor .ql-subtitle {
font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--text3); margin: 6px 0 10px; font-family: 'Inter', var(--sans);
}
/* Icon embed — large, colored, deliberately no background box or
circular badge behind it, per direct instruction. */
.nb-doc-icon { display: inline-flex; vertical-align: middle; margin: 0 4px; }
.nb-doc-icon i { font-size: 40px; line-height: 1; vertical-align: middle; }
/* Icon picker — same confirmed 24-icon set as the preview, shown large
with no background, colored to match the diary. */
.nb-icon-picker {
display: none; position: absolute; z-index: 220; width: 300px;
grid-template-columns: repeat(6, 1fr); gap: 4px;
background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px;
padding: 10px; box-shadow: 0 8px 24px rgba(15,23,42,.18);
}
.nb-icon-picker-item {
background: none; border: none; cursor: pointer; padding: 8px;
border-radius: 7px; display: flex; align-items: center; justify-content: center;
}
.nb-icon-picker-item i { font-size: 26px; }
.nb-icon-picker-item:hover { background: var(--bg3); }
.nb-quill-editor .ql-editor blockquote {
border-left: 3px solid var(--blue); padding-left: 14px;
color: var(--text3); font-style: italic; margin: 10px 0;
}
.nb-quill-editor .ql-editor pre {
background: var(--bg3); border: 1px solid var(--border);
border-radius: 7px; padding: 10px 14px; font-size: 12px;
}
/* Bubble theme's own container needs the same transparent/flex
treatment the old snow container had — nothing else here, since
Quill's bubble theme ships its own floating-tooltip styling and
positioning logic natively (replacing the entire custom hide/show/
fixed-position hack that used to exist for the persistent snow
toolbar). */
.ql-container.ql-bubble { border: none !important; display: flex; flex-direction: column; flex: 1; }
/* Slash-command menu — Notion/Attio-style block picker, opened by
typing "/" as the first character of a blank line. Each item gets
a small icon box, a bold title, and a muted description line —
text-based icon glyphs throughout (H1/H2/H3/Tt matching Attio's own
convention, simple symbolic marks for the rest) rather than a full
icon library, kept deliberately simple and reliable. */
.nb-slash-menu {
display: none; position: absolute; z-index: 220; min-width: 260px; max-width: 260px;
background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px;
padding: 6px; box-shadow: 0 8px 24px rgba(15,23,42,.18);
max-height: 340px; overflow-y: auto;
}
.nb-slash-item {
display: flex; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.nb-slash-item.on, .nb-slash-item:hover { background: var(--bg3); }
.nb-slash-icon {
flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center;
justify-content: center; border-radius: 7px; border: 1px solid var(--border2);
background: var(--bg1); font-size: 12px; font-weight: 700; color: var(--text2);
}
.nb-slash-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nb-slash-title { font-size: 13px; font-weight: 600; color: var(--text1); }
.nb-slash-desc { font-size: 11.5px; color: var(--text4); }
/* Share panel */
.nb-share-panel {
position: absolute; top: 54px; right: 32px; z-index: 10;
padding: 12px 16px; border: 1px solid var(--border2); border-radius: 10px;
background: var(--bg1); box-shadow: 0 8px 24px rgba(15,23,42,.18);
min-width: 280px;
}
.nb-share-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nb-share-label { font-size: 11px; font-weight: 600; color: var(--text3); flex-shrink: 0; }
.nb-share-url {
flex: 1; min-width: 180px; font-size: 11px; padding: 5px 10px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--bg3); color: var(--text2); outline: none;
font-family: var(--mono);
}
.nb-revoke-btn { background: none; color: var(--red); border-color: var(--red); font-size: 12px; }
/* Colour picker */
.nb-color-picker {
position: fixed; z-index: 1000; background: var(--bg2);
border: 1px solid var(--border); border-radius: 10px;
padding: 8px; display: flex; flex-wrap: wrap; gap: 5px; width: 148px;
box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.nb-color-swatch {
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid transparent; cursor: pointer;
transition: transform .12s, border-color .12s;
}
.nb-color-swatch:hover { transform: scale(1.2); }
.nb-color-swatch.nb-color-active { border-color: var(--text1); transform: scale(1.15); }
/* Context menu */
.nb-ctx-menu {
position: fixed; z-index: 9999; background: var(--bg2);
border: 1px solid var(--border); border-radius: 8px;
padding: 4px; min-width: 168px;
box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.nb-ctx-item {
padding: 7px 12px; font-size: 12px; cursor: pointer;
border-radius: 5px; color: var(--text2); transition: background .1s;
}
.nb-ctx-item:hover { background: var(--bg3); color: var(--text1); }
.nb-ctx-danger:hover { background: rgba(220,38,38,.08); color: var(--red); }
/* ── STICKY NOTES ─────────────────────────────────────────── */
.nb-sticky-board {
flex: 1; overflow-y: auto; padding: 20px 24px;
column-count: auto;
column-width: 220px;
column-gap: 16px;
align-content: flex-start;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.nb-sticky-card {
width: 100%;
min-height: 120px;
border-radius: 3px 3px 3px 24px;
box-shadow: 2px 4px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
display: flex; flex-direction: column;
transition: box-shadow .2s, transform .2s;
position: relative;
overflow: hidden;
break-inside: avoid;
margin-bottom: 16px;
}
.nb-sticky-card:hover {
box-shadow: 4px 8px 20px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.1);
transform: translateY(-2px) rotate(0.5deg);
}
.nb-sticky-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 28px; background: rgba(0,0,0,.06);
border-radius: 3px 3px 0 0;
z-index: 0;
}
/* Bubble decoration — top right corner, subtle white circles */
.nb-sticky-card::after {
content: '';
position: absolute;
right: -20px; top: -25px;
width: 80px; height: 80px;
border-radius: 50%;
background: rgba(255,255,255,.22);
box-shadow:
-45px 40px 0 -8px rgba(255,255,255,.14),
-20px 65px 0 5px rgba(0,0,0,.04),
-70px 15px 0 12px rgba(255,255,255,.08);
pointer-events: none;
z-index: 0;
}
/* Sticky toolbar — palette/delete fade in on hover; drag handle stays visible */
.nb-sticky-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 4px;
padding: 4px 8px; position: relative; z-index: 1; height: 28px;
}
.nb-sticky-toolbar .nb-sticky-palette-btn,
.nb-sticky-toolbar .nb-sticky-del {
opacity: 0; transition: opacity .2s;
}
.nb-sticky-card:hover .nb-sticky-palette-btn,
.nb-sticky-card:hover .nb-sticky-del { opacity: 1; }
/* Drag handle — left side of toolbar, grab cursor signals draggable.
Explicit size (not just icon-sized) so it's reliably clickable/
draggable, and visible by default rather than hover-gated like
the rest of the toolbar — a hidden element can't be dragged. */
.nb-sticky-drag-handle {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
cursor: grab; opacity: .65; color: rgba(0,0,0,.65);
border-radius: 4px;
transition: opacity .15s, background .15s;
flex-shrink: 0;
}
.nb-sticky-drag-handle:hover { opacity: 1; background: rgba(0,0,0,.08); }
.nb-sticky-card[draggable="true"]:active .nb-sticky-drag-handle { cursor: grabbing; }
/* Wrap the palette + delete buttons together on the right side */
.nb-sticky-toolbar > button { margin-left: 0; }
/* Drag visual feedback */
.nb-sticky-card.nb-sticky-dragging {
opacity: .45; transform: scale(.97);
}
.nb-sticky-card.nb-sticky-drag-over {
outline: 2px dashed rgba(0,0,0,.35); outline-offset: 3px;
}
/* Colour panel — hidden by default, toggled by JS */
.nb-sticky-color-panel {
position: absolute; top: 28px; right: 8px; z-index: 100;
background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.12);
border-radius: 8px; padding: 6px; display: none;
flex-wrap: wrap; gap: 4px; width: 116px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.nb-sticky-palette-btn {
background: none; border: none; cursor: pointer;
color: rgba(0,0,0,.35); padding: 2px; border-radius: 3px;
display: flex; align-items: center; transition: color .15s;
}
.nb-sticky-palette-btn:hover { color: rgba(0,0,0,.7); }
.nb-sticky-colors { display: flex; gap: 3px; align-items: center; }
.nb-sticky-swatch {
width: 12px; height: 12px; border-radius: 50%;
border: 1.5px solid transparent; cursor: pointer;
transition: transform .12s; flex-shrink: 0;
}
.nb-sticky-swatch:hover { transform: scale(1.3); }
.nb-sticky-swatch.active { border-color: rgba(0,0,0,.4); transform: scale(1.2); }
.nb-sticky-del {
background: none; border: none; cursor: pointer;
color: rgba(0,0,0,.3); padding: 2px; border-radius: 3px;
display: flex; align-items: center; transition: color .15s;
}
.nb-sticky-del:hover { color: rgba(0,0,0,.7); }
/* Sticky content — editable */
.nb-sticky-content {
flex: 1; padding: 8px 12px 12px;
font-size: 13px; line-height: 1.5;
outline: none; border: none; resize: none;
font-family: inherit; min-height: 100px;
word-break: break-word;
}
.nb-sticky-content:empty::before {
content: attr(data-placeholder); opacity: .35; pointer-events: none;
}
.nb-sticky-content strong { font-weight: 700; }
.nb-sticky-content ul, .nb-sticky-content ol {
padding-left: 16px; margin: 4px 0;
}
.nb-sticky-content li { margin: 2px 0; }
/* Sticky highlight on click from sidebar */
@keyframes nb-sticky-ping {
0% { box-shadow: 0 0 0 0 rgba(37,99,235,.4); }
70% { box-shadow: 0 0 0 10px rgba(37,99,235,0); }
100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); }
}
/* ══════════════════════════════════════════════════════════
PLAN DAY AHEAD — 3-column quick-capture layout
══════════════════════════════════════════════════════════ */
.nb-planday-board {
flex: 1; overflow-y: auto; padding: 20px 24px;
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
align-items: start;
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
/* Quick Capture spans the full row on its own — the instruction text
and typed lines both need real width, which a one-third column
couldn't give them (task lines were wrapping to a second line). */
.pd-col-capture { grid-column: 1 / -1; }
.pd-col { display: flex; flex-direction: column; min-width: 0; }
.pd-col-title {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--text3); margin-bottom: 8px;
}
.pd-legend {
background: var(--bg3); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.pd-legend-title {
font-size: 12px; font-weight: 700; color: var(--text1); margin-bottom: 5px;
}
.pd-legend-row { font-size: 11px; color: var(--text2); line-height: 1.6; }
.pd-legend-row code {
background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
padding: 0 4px; font-family: var(--mono); font-size: 10.5px; color: var(--blue);
}
.pd-legend-muted { color: var(--text4); margin-top: 4px; }
/* The capture card gets a distinct dashed accent border and a subtle
glow — it's the "special" input surface, should read differently
from the plain log/ideas cards next to it. */
.pd-capture-card {
border: 2px dashed rgba(217,164,6,.45) !important;
box-shadow: 0 2px 14px rgba(217,164,6,.14), 2px 4px 12px rgba(0,0,0,.10) !important;
min-height: 220px;
}
.pd-capture-content, .pd-log-content, .pd-ideas-content { min-height: 160px; }
.pd-capture-footer {
padding: 8px 12px 12px; display: flex; justify-content: flex-end; position: relative; z-index: 1;
}
.pd-convert-btn {
display: inline-flex; align-items: center; gap: 6px;
background: #27313f; color: #fff; border: none; border-radius: 8px;
padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
transition: background .15s;
}
.pd-convert-btn:hover { background: #1a2129; }
.pd-convert-btn:disabled { opacity: .6; cursor: default; }
/* Converted lines render struck-through and slightly faded — a
visual "done, already sent" cue, matching how completed tasks
read elsewhere in the app. */
.pd-log-content s { opacity: .6; }
.pd-log-content div { margin: 3px 0; }
@media (max-width: 900px) {
.nb-planday-board { grid-template-columns: 1fr; }
}
.nb-sticky-highlight { animation: nb-sticky-ping .6s ease; }
/* Sticky sidebar items */
.nb-sticky-item { border-left: 3px solid transparent; border-radius: 0; }
.nb-sticky-item:hover { background: var(--bg3); }
/* Mobile */
@media (max-width: 680px) {
.nb-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 45vh; }
.nb-root { flex-direction: column; }
.nb-title-input { font-size: 20px; }
.nb-quill-editor { padding: 0 16px; }
.nb-sticky-card { width: 100%; }
}
/* ── Loading screen stays dark navy always (kept from dark-mode removal) ── */
#loading {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.5s;
padding: env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
z-index: 99999 !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: 100dvh !important;
overflow: hidden !important;
isolation: isolate !important;
background: var(--auth-navy-1) !important;
}
/* ══════════════════════════════════════════════════════════
LIGHT MODE FIXES — v8
══════════════════════════════════════════════════════════ */
/* ── 1. Sidebar active item — right arrow indicator ─────── */
.nitem {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-left: 3px solid transparent;
transition: all var(--ease);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
border-left-width: 2px !important;
color: var(--muted) !important;
border-left-color: transparent !important;
position: relative;
}
.nitem.on::after {
content: '';
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid currentColor;
opacity: 0.6;
}
/* ── 2. Closed Today — 4 columns desktop ────────────────── */
.closed-task-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 10px !important;
padding: 4px 12px 8px !important; /* left/right padding matching column gaps */
}
@media (max-width: 900px) {
.closed-task-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 680px) {
.closed-task-grid {
grid-template-columns: 1fr !important;
padding: 4px 0 8px !important;
}
}
/* ── 4. Horizon — flush domain gradient rows ─────────────── */
/* Bucket body must be transparent so row domain gradients show */
.horizon-bucket > div:not(.horizon-bucket-hdr) {
background: transparent !important;
}
/* Ensure ntl-row reads its inline --ntl-bg variable */
.horizon-bucket .ntl-row {
background: var(--ntl-bg, rgba(242,243,245,1)) !important;
}
.horizon-bucket .ntl-row:hover {
filter: brightness(0.97) !important;
background: var(--bg3) !important;
}
/* Priority tints still apply on top via specificity */
.horizon-bucket tr.ntl-row.p-Critical[data-status] { background: rgba(153,0,0,.05) !important; }
.horizon-bucket tr.ntl-row.p-VeryHigh[data-status] { background: rgba(204,0,0,.04) !important; }
.horizon-bucket tr.ntl-row.p-High[data-status] { background: rgba(224,102,102,.04) !important; }
.horizon-bucket tr.ntl-row.p-Medium[data-status] { background: rgba(234,153,153,.03) !important; }
.horizon-bucket tr.ntl-row.p-Low[data-status] { background: var(--ntl-bg, rgba(242,243,245,1)) !important; }
.horizon-bucket tr.ntl-row.p-Dependent[data-status] { background: rgba(153,198,229,.05) !important; }
/* ── 5. Strategy Center — richer card backgrounds with multi-circle decoration ── */
/* Must Do (top-left metric card) — deep blue tint */
#page-command .exec-mini-grid .exec-metric:nth-child(1) {
background: linear-gradient(135deg,#dce8f5,#c8d9ed) !important;
}
/* Overdue metric */
#page-command .exec-mini-grid .exec-metric:nth-child(2) {
background: linear-gradient(135deg,#f5ecec,#ede3e3) !important;
}
/* Waiting metric */
#page-command .exec-mini-grid .exec-metric:nth-child(3) {
background: linear-gradient(135deg,#d9eede,#c8e4ce) !important;
}
/* Upcoming Risk metric */
#page-command .exec-mini-grid .exec-metric:nth-child(4) {
background: linear-gradient(135deg,#f5ead8,#edddC4) !important;
}
/* Weekly Synthesis — deeper slate with more contrast */
.exec-synthesis-card {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border-color: #cdd8e5 !important;
}
/* Today's Focus (right col top) */
/* Overdue Recovery (left col) */
/* Accountability */
/* Risk Radar */
#page-command .exec-stack:nth-child(2) .exec-card:nth-child(3) {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border-color: #d9c4a4 !important;
}
/* Listed items INSIDE all exec cards — transparent background */
#page-command .exec-card .exec-list-item,
#page-command .exec-card .exec-item,
#page-command .exec-card [class*="exec-row"],
#page-command .exec-card .exec-task-item {
background: transparent !important;
border-color: rgba(0,0,0,.06) !important;
}
/* ── Multi-circle decorative system on exec cards ───────── */
/* Primary large circle — top right */
#page-command .exec-card::after,
.exec-synthesis-card::after,
#page-command .exec-mini-grid .exec-metric::after {
content: '' !important;
position: absolute !important;
right: -40px !important; top: -50px !important;
width: 140px !important; height: 140px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.28) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Secondary medium circle — bottom right */
#page-command .exec-card::before,
.exec-synthesis-card::before,
#page-command .exec-mini-grid .exec-metric::before {
content: '' !important;
position: absolute !important;
right: 30px !important; bottom: -30px !important;
width: 80px !important; height: 80px !important;
border-radius: 999px !important;
background: rgba(255,255,255,.18) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Tiny accent circle — mid right (JS can't do 3 pseudos so use box-shadow trick) */
#page-command .exec-card,
.exec-synthesis-card,
#page-command .exec-mini-grid .exec-metric {
box-shadow:
var(--mood-shadow, 0 1px 4px rgba(0,0,0,.08), 0 6px 20px rgba(0,0,0,.06)),
/* tiny circle accent via inset shadow trick */
inset -60px 40px 0 -52px rgba(255,255,255,.22),
inset -100px 80px 0 -75px rgba(255,255,255,.15) !important;
}
/* ── 6. Stats — constrain large charts, free Project Health column ── */
/* The two-column grid (inline style) is already 1.4fr 1fr
We just need to ensure charts don't overflow their containers */
.cw canvas,
.cw.tall canvas {
max-width: 100% !important;
max-height: 100% !important;
}
.cw { overflow: hidden !important; }
.cw.tall { overflow: hidden !important; }
/* Ensure the two main charts (trend + weekcmp) are fully contained */
#ch-trend, #ch-weekcmp {
max-width: 100% !important;
width: 100% !important;
}
/* ── 7. Floating Timer Widget ────────────────────────────── */
#floating-timer {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9000;
width: 248px;
background: #1a2535;
border-radius: 14px;
padding: 14px 16px;
box-shadow: 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
display: flex;
flex-direction: column;
gap: 5px;
animation: ftSlideUp .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ftSlideUp {
from { transform: translateY(32px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ft-kicker {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: rgba(255,255,255,.45);
}
.ft-name {
font-size: 13px;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
.ft-time {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 24px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
line-height: 1.2;
}
.ft-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.ft-view-link {
font-size: 11px;
color: rgba(255,255,255,.5);
cursor: pointer;
transition: color .15s;
}
.ft-view-link:hover { color: rgba(255,255,255,.85); }
.ft-stop-btn {
background: #dc2626;
color: #fff;
border: none;
border-radius: 6px;
padding: 5px 13px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background .15s;
font-family: var(--sans, 'Inter', sans-serif);
}
.ft-stop-btn:hover { background: #b91c1c; }
/* Mobile — sit above the bottom tab bar */
@media (max-width: 768px) {
#floating-timer {
bottom: 72px;
right: 12px;
left: 12px;
width: auto;
}
}
/* ── Stats first card — match layout of cards 2 & 3 ─────── */
#stats-kpi .skpi-feat .stat-feature-meta,
#stats-kpi .stat-feature-icon { display: none !important; }
#stats-kpi .skpi-feat .skpi-v { color: var(--text1) !important; text-shadow: none !important; }
#stats-kpi .skpi-feat .skpi-l { color: var(--text3) !important; }
/* ── Closed Today card — consistent internal padding ─────── */
.closed-card {
padding: 12px 14px !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.closed-card-name {
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
}
.closed-card-meta {
display: flex !important;
align-items: center !important;
gap: 5px !important;
flex-wrap: wrap !important;
margin-top: auto !important;
}
/* ── Stats layout — true 50/50 charts vs Project Health ─── */
/* Reduce tall chart height so two stacked charts fit better */
#page-stats .cw.tall { height: 240px !important; }
#page-stats .cc { overflow: hidden !important; }
#page-stats canvas { max-width: 100% !important; }
/* ══════════════════════════════════════════════════════════
THEME BACKGROUND SYSTEM — v9
Bubble circles floated right on cards/panels/sections
Two pseudo-elements + box-shadow rings = 5-7 circles per element
Mix of white and darker card-colour tint bubbles
══════════════════════════════════════════════════════════ */
/* ── Reusable theme-bg mixin via class ───────────────────── */
.tbg {
position: relative !important;
overflow: hidden !important;
}
/* Large bubble cluster — top right */
.tbg::before {
content: '';
position: absolute;
right: -50px; top: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.22);
box-shadow:
-90px 70px 0 -10px rgba(255,255,255,.12),
-50px 130px 0 10px rgba(0,0,0,.04),
-160px 40px 0 20px rgba(255,255,255,.07);
pointer-events: none;
z-index: 0;
}
/* Medium bubble cluster — bottom right */
.tbg::after {
content: '';
position: absolute;
right: 30px; bottom: -45px;
width: 110px; height: 110px;
border-radius: 50%;
background: rgba(255,255,255,.14);
box-shadow:
-65px -25px 0 15px rgba(255,255,255,.08),
-110px 10px 0 -10px rgba(0,0,0,.035),
-30px 60px 0 25px rgba(255,255,255,.05);
pointer-events: none;
z-index: 0;
}
/* All direct children sit above bubbles */
.tbg > * { position: relative; z-index: 1; }
/* ── Mood tint variants ──────────────────────────────────── */
.tbg-blue { background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border-color: #cdd8e5 !important; }
.tbg-green { background: linear-gradient(135deg,#eef5f1,#e5ede9) !important; border-color: #cce0d4 !important; }
.tbg-amber { background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border-color: #ddd4c4 !important; }
.tbg-violet { background: linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; border-color: #cfc8e0 !important; }
.tbg-teal { background: linear-gradient(135deg,#ecf4f5,#e3ecee) !important; border-color: #c4d8dc !important; }
.tbg-slate { background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; border-color: #ccd4de !important; }
.tbg-red { background: linear-gradient(135deg,#f5ecec,#ede3e3) !important; border-color: #dccece !important; }
/* ── PROJECTS PAGE ───────────────────────────────────────── */
/* Layout: left 70% main, right 30% brief card sticky */
/* Brief card (hierarchy-hero) moves to right column */
/* Apply theme bg to hero */
/* Toolbar, summary, tree body in left column */
/* Project KPI/summary cards — theme bg */
/* Apply tbg to specific project elements */
#page-projects .hierarchy-hero,
#page-projects .hierarchy-stat { }
/* Project panel (slide-in) — theme bg full panel */
/* NOTE: position:absolute is set by hierarchy.js — do NOT override position */
#proj-ov-panel {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
overflow: hidden !important;
}
#proj-ov-panel::before {
content: '';
position: absolute;
right: -60px; top: -70px;
width: 220px; height: 220px;
border-radius: 50%;
background: rgba(255,255,255,.20);
box-shadow:
-100px 90px 0 -15px rgba(255,255,255,.12),
-60px 160px 0 15px rgba(0,0,0,.04),
-180px 50px 0 25px rgba(255,255,255,.07);
pointer-events: none;
z-index: 0;
}
#proj-ov-panel::after {
content: '';
position: absolute;
right: 40px; bottom: -55px;
width: 130px; height: 130px;
border-radius: 50%;
background: rgba(255,255,255,.13);
box-shadow:
-75px -30px 0 18px rgba(255,255,255,.08),
-130px 15px 0 -12px rgba(0,0,0,.035);
pointer-events: none;
z-index: 0;
}
#proj-ov-panel > * { position: relative; z-index: 1; }
/* ── MINDSCAPE PAGE ──────────────────────────────────────── */
/* Horizon Goals section */
.ms-section:nth-child(1),
#ms-horizon-section {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border-color: #cdd8e5 !important;
position: relative !important;
overflow: hidden !important;
}
/* Parking Lot */
.ms-section:nth-child(2),
#ms-parking-section {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border-color: #ddd4c4 !important;
position: relative !important;
overflow: hidden !important;
}
/* Past Goals */
.ms-section:nth-child(3),
#ms-past-section {
background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important;
border-color: #ccd4de !important;
position: relative !important;
overflow: hidden !important;
}
/* Apply bubble system to all ms-sections */
.ms-section {
position: relative !important;
overflow: hidden !important;
}
.ms-section::before {
content: '';
position: absolute;
right: -45px; top: -55px;
width: 160px; height: 160px;
border-radius: 50%;
background: rgba(255,255,255,.20);
box-shadow:
-85px 65px 0 -8px rgba(255,255,255,.11),
-45px 120px 0 12px rgba(0,0,0,.035),
-150px 35px 0 18px rgba(255,255,255,.06);
pointer-events: none;
z-index: 0;
}
.ms-section::after {
content: '';
position: absolute;
right: 25px; bottom: -40px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,.13);
box-shadow:
-60px -22px 0 14px rgba(255,255,255,.07),
-100px 10px 0 -8px rgba(0,0,0,.03);
pointer-events: none;
z-index: 0;
}
.ms-section > * { position: relative; z-index: 1; }
/* Right column (Parking Lot) */
.ms-right-col .ms-section {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border-color: #ddd4c4 !important;
}
/* ── DELEGATION PAGE ─────────────────────────────────────── */
/* All exec cards on delegation page */
#page-delegation .exec-card {
position: relative !important;
overflow: hidden !important;
}
#page-delegation .exec-primary {
background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important;
border-color: #ccd4de !important;
}
#page-delegation .exec-byme {
background: linear-gradient(135deg,#ecf4f5,#e3ecee) !important;
border-color: #c4d8dc !important;
}
#page-delegation .exec-waiting-person {
background: linear-gradient(135deg,#f0ecf7,#e8e3f0) !important;
border-color: #cfc8e0 !important;
}
/* Bubble system on delegation cards */
#page-delegation .exec-card::before {
content: '';
position: absolute;
right: -45px; top: -55px;
width: 160px; height: 160px;
border-radius: 50%;
background: rgba(255,255,255,.20);
box-shadow:
-80px 60px 0 -8px rgba(255,255,255,.11),
-40px 115px 0 12px rgba(0,0,0,.03),
-145px 30px 0 18px rgba(255,255,255,.06);
pointer-events: none;
z-index: 0;
}
#page-delegation .exec-card::after {
content: '';
position: absolute;
right: 25px; bottom: -40px;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,.12);
box-shadow:
-55px -20px 0 14px rgba(255,255,255,.07),
-95px 8px 0 -8px rgba(0,0,0,.03);
pointer-events: none;
z-index: 0;
}
#page-delegation .exec-card > * { position: relative; z-index: 1; }
/* Listed task rows inside delegation cards — transparent */
#page-delegation .exec-list-item,
#page-delegation .exec-item,
#page-delegation .exec-delegate-person {
background: transparent !important;
border-color: rgba(0,0,0,.07) !important;
}
#page-delegation .exec-delegate-person:hover {
background: rgba(255,255,255,.25) !important;
}
/* ── YEAR REVIEW PAGE ────────────────────────────────────── */
/* All chart cards (.cc) on year review */
#page-yearreview .cc {
background: linear-gradient(135deg,#f0ecf7,#e8e3f0) !important;
border-color: #cfc8e0 !important;
position: relative !important;
overflow: hidden !important;
}
#page-yearreview .cc::before {
content: '';
position: absolute;
right: -50px; top: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.18);
box-shadow:
-90px 75px 0 -10px rgba(255,255,255,.10),
-50px 140px 0 12px rgba(0,0,0,.03),
-165px 40px 0 22px rgba(255,255,255,.06);
pointer-events: none;
z-index: 0;
}
#page-yearreview .cc::after {
content: '';
position: absolute;
right: 35px; bottom: -50px;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,.12);
box-shadow:
-70px -28px 0 16px rgba(255,255,255,.07),
-115px 12px 0 -10px rgba(0,0,0,.03);
pointer-events: none;
z-index: 0;
}
/* Heatmap wrap sits above bubbles */
#page-yearreview .cc > * { position: relative; z-index: 1; }
/* ── DOMAIN PULSE PAGE ───────────────────────────────────── */
/* Main chart card */
#page-domainpulse .cc {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border-color: #cdd8e5 !important;
position: relative !important;
overflow: hidden !important;
}
/* Individual heatmap cards inside domain-pulse-body */
#domain-pulse-body > div {
background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important;
border: 1px solid #ccd4de !important;
border-radius: 12px !important;
padding: 16px !important;
position: relative !important;
overflow: hidden !important;
}
#page-domainpulse .cc::before,
#domain-pulse-body > div::before {
content: '';
position: absolute;
right: -50px; top: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.18);
box-shadow:
-90px 75px 0 -10px rgba(255,255,255,.10),
-50px 140px 0 12px rgba(0,0,0,.03),
-165px 40px 0 22px rgba(255,255,255,.06);
pointer-events: none;
z-index: 0;
}
#page-domainpulse .cc::after,
#domain-pulse-body > div::after {
content: '';
position: absolute;
right: 35px; bottom: -50px;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,.12);
box-shadow:
-70px -28px 0 16px rgba(255,255,255,.07),
-115px 12px 0 -10px rgba(0,0,0,.03);
pointer-events: none;
z-index: 0;
}
#page-domainpulse .cc > *,
#domain-pulse-body > div > * { position: relative; z-index: 1; }
/* ── METRICS PAGE ────────────────────────────────────────── */
/* Top hero section */
.metrics-hero {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border: 1px solid #cdd8e5 !important;
border-radius: 14px !important;
position: relative !important;
overflow: hidden !important;
padding: 20px 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
.metrics-hero::before {
content: '';
position: absolute;
right: -50px; top: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.22);
box-shadow:
-90px 75px 0 -10px rgba(255,255,255,.12),
-50px 140px 0 12px rgba(0,0,0,.04),
-165px 40px 0 22px rgba(255,255,255,.07);
pointer-events: none;
z-index: 0;
}
.metrics-hero::after {
content: '';
position: absolute;
right: 35px; bottom: -50px;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,.14);
box-shadow:
-70px -28px 0 16px rgba(255,255,255,.08),
-115px 12px 0 -10px rgba(0,0,0,.035);
pointer-events: none;
z-index: 0;
}
.metrics-hero > * { position: relative; z-index: 1; }
/* ── VAULT PAGE ──────────────────────────────────────────── */
/* Top hero section */
.vault-hero {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border: 1px solid #ddd4c4 !important;
border-radius: 14px !important;
position: relative !important;
overflow: hidden !important;
padding: 20px 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 16px !important;
}
.vault-hero::before {
content: '';
position: absolute;
right: -50px; top: -60px;
width: 180px; height: 180px;
border-radius: 50%;
background: rgba(255,255,255,.22);
box-shadow:
-90px 75px 0 -10px rgba(255,255,255,.12),
-50px 140px 0 12px rgba(0,0,0,.04),
-165px 40px 0 22px rgba(255,255,255,.07);
pointer-events: none;
z-index: 0;
}
.vault-hero::after {
content: '';
position: absolute;
right: 35px; bottom: -50px;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,.14);
box-shadow:
-70px -28px 0 16px rgba(255,255,255,.08),
-115px 12px 0 -10px rgba(0,0,0,.035);
pointer-events: none;
z-index: 0;
}
.vault-hero > * { position: relative; z-index: 1; }
/* ── Projects page 70/30 layout ─────────────────────────── */
/* Brief card (hero) — right column, sticky */
/* Main left column */
/* ══════════════════════════════════════════════════════════
FIX PASS — Project panel, Delegation, Year Review colours,
Domain Pulse colours
══════════════════════════════════════════════════════════ */
/* ── Project panel theme bg — override JS-injected !important ── */
/* Must use maximum specificity to beat hierarchy.js inline style */
/* NOTE: Do NOT set position — JS sets position:absolute for slide animation */
body #proj-ov-panel,
html body #proj-ov-panel {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
overflow: hidden !important;
}
body #proj-ov-panel::before {
content: '' !important;
position: absolute !important;
right: -60px !important; top: -70px !important;
width: 220px !important; height: 220px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.20) !important;
box-shadow:
-100px 90px 0 -15px rgba(255,255,255,.12),
-60px 160px 0 15px rgba(0,0,0,.04),
-180px 50px 0 25px rgba(255,255,255,.07) !important;
pointer-events: none !important;
z-index: 0 !important;
}
body #proj-ov-panel::after {
content: '' !important;
position: absolute !important;
right: 40px !important; bottom: -55px !important;
width: 130px !important; height: 130px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.13) !important;
box-shadow:
-75px -30px 0 18px rgba(255,255,255,.08),
-130px 15px 0 -12px rgba(0,0,0,.035) !important;
pointer-events: none !important;
z-index: 0 !important;
}
body #proj-ov-panel > * { position: relative; z-index: 1; }
/* Tab body areas inside panel — keep them white/light */
body #proj-ov-panel .ov-tab-body,
html body #proj-ov-panel .ov-tab-body {
background: rgba(237,242,247,.80) !important;
}
body #proj-ov-panel #proj-ov-tab-tasks,
body #proj-ov-panel #proj-ov-tab-activity {
background: rgba(237,242,247,.80) !important;
}
/* ── Delegation — fix exec-list-item transparency ───────── */
#page-delegation .exec-list-item {
background: transparent !important;
border-color: rgba(0,0,0,.07) !important;
}
#page-delegation .exec-list-item:hover {
background: rgba(255,255,255,.30) !important;
}
/* ── Year Review — unique colour per chart card ─────────── */
/* Override the uniform violet we set earlier */
/* Card 1: Annual Heatmap — blue */
#page-yearreview .cc:nth-of-type(1) {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border-color: #cdd8e5 !important;
}
/* Card 2: Quarterly Breakdown — green */
#page-yearreview .cc:nth-of-type(2) {
background: linear-gradient(135deg,#eef5f1,#e5ede9) !important;
border-color: #cce0d4 !important;
}
/* Card 3: Completions by Project — amber */
#page-yearreview .cc:nth-of-type(3) {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border-color: #ddd4c4 !important;
}
/* Card 4: Monthly Tasks — teal */
#page-yearreview .cc:nth-of-type(4) {
background: linear-gradient(135deg,#ecf4f5,#e3ecee) !important;
border-color: #c4d8dc !important;
}
/* Card 5: Month-on-Month — violet */
#page-yearreview .cc:nth-of-type(5) {
background: linear-gradient(135deg,#f0ecf7,#e8e3f0) !important;
border-color: #cfc8e0 !important;
}
/* Card 6+ fallback — slate */
#page-yearreview .cc:nth-of-type(n+6) {
background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important;
border-color: #ccd4de !important;
}
/* Match ::before bubble tint to each card colour */
#page-yearreview .cc:nth-of-type(2)::before { background: rgba(255,255,255,.18); }
#page-yearreview .cc:nth-of-type(3)::before { background: rgba(255,255,255,.20); }
#page-yearreview .cc:nth-of-type(4)::before { background: rgba(255,255,255,.16); }
#page-yearreview .cc:nth-of-type(5)::before { background: rgba(255,255,255,.18); }
/* ── Domain Pulse — unique colour per heatmap card ──────── */
/* Main wrapper card — blue */
#page-domainpulse .cc {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border-color: #cdd8e5 !important;
}
/* Individual heatmap rows inside domain-pulse-body — cycle colours */
#domain-pulse-body > div:nth-child(6n+1) {
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
border: 1px solid #cdd8e5 !important;
}
#domain-pulse-body > div:nth-child(6n+2) {
background: linear-gradient(135deg,#eef5f1,#e5ede9) !important;
border: 1px solid #cce0d4 !important;
}
#domain-pulse-body > div:nth-child(6n+3) {
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
border: 1px solid #ddd4c4 !important;
}
#domain-pulse-body > div:nth-child(6n+4) {
background: linear-gradient(135deg,#ecf4f5,#e3ecee) !important;
border: 1px solid #c4d8dc !important;
}
#domain-pulse-body > div:nth-child(6n+5) {
background: linear-gradient(135deg,#f0ecf7,#e8e3f0) !important;
border: 1px solid #cfc8e0 !important;
}
#domain-pulse-body > div:nth-child(6n+6) {
background: linear-gradient(135deg,#f0f3f7,#e8ecf2) !important;
border: 1px solid #ccd4de !important;
}
/* ══════════════════════════════════════════════════════════
ULTRA-SOFT COLOUR SEQUENCE — no adjacent repeats
══════════════════════════════════════════════════════════ */
/* ── Dashboard KPI cards — 6 unique soft tints ───────────── */
#page-dashboard .kpi-card:nth-of-type(1) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; }
#page-dashboard .kpi-card:nth-of-type(2) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; }
#page-dashboard .kpi-card:nth-of-type(3) { background:linear-gradient(135deg,#f5ecec,#ede3e3) !important; }
#page-dashboard .kpi-card:nth-of-type(4) { background:linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; }
#page-dashboard .kpi-card:nth-of-type(5) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; }
#page-dashboard .kpi-card:nth-of-type(6) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; }
/* ── Strategy Center metric tiles — 4 unique ────────────── */
#page-command .exec-mini-grid .exec-metric:nth-child(1) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; }
#page-command .exec-mini-grid .exec-metric:nth-child(2) { background:linear-gradient(135deg,#f5ecec,#ede3e3) !important; }
#page-command .exec-mini-grid .exec-metric:nth-child(3) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; }
#page-command .exec-mini-grid .exec-metric:nth-child(4) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; }
/* Strategy Center exec cards — unique per card */
#page-command .exec-synthesis-card { background:linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; }
#page-command .exec-stack:nth-child(1) .exec-card:nth-child(2) {
border-color: #deb8b8 !important;
background: linear-gradient(135deg,#f5ecec,#ede3e3) !important;
}
#page-command .exec-stack:nth-child(2) .exec-card:nth-child(1) {
border-color: #aed4bc !important;
background: linear-gradient(135deg,#eef5f1,#e5ede9) !important;
}
#page-command .exec-stack:nth-child(2) .exec-card:nth-child(2) {
border-color: #d9c4a4 !important;
background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important;
}
#page-command .exec-stack:nth-child(2) .exec-card:nth-child(3) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; }
/* ── Stats KPI row — 3 unique ────────────────────────────── */
#stats-kpi .skpi-feat {
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0 !important;
padding: 18px 20px !important;
background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important;
}
#stats-kpi .skpi:nth-child(2) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; }
#stats-kpi .skpi:nth-child(3) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; }
#stats-kpi .skpi:nth-child(4) { background:linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; }
#stats-kpi .skpi:nth-child(5) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; }
#stats-kpi .skpi:nth-child(6) { background:linear-gradient(135deg,#f5ecec,#ede3e3) !important; }
#stats-kpi .skpi:nth-child(7) { background:linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; }
/* ── Saved Views — 8 unique cycling ─────────────────────── */
#saved-view-grid .exec-card:nth-child(8n+1) { background:linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; }
#saved-view-grid .exec-card:nth-child(8n+2) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; }
#saved-view-grid .exec-card:nth-child(8n+3) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; }
#saved-view-grid .exec-card:nth-child(8n+4) { background:linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; }
#saved-view-grid .exec-card:nth-child(8n+5) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; }
#saved-view-grid .exec-card:nth-child(8n+6) { background:linear-gradient(135deg,#f5ecec,#ede3e3) !important; }
#saved-view-grid .exec-card:nth-child(8n+7) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; }
#saved-view-grid .exec-card:nth-child(8n+8) { background:linear-gradient(135deg,#f5ede8,#ede5dc) !important; }
/* ── Delegation panel colours — see .exec-primary / .exec-byme / .exec-waiting-person above ── */
/* ── Year Review — 5 unique ──────────────────────────────── */
#page-yearreview .cc:nth-of-type(1) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border-color:#cdd8e5 !important; }
#page-yearreview .cc:nth-of-type(2) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; border-color:#cce0d4 !important; }
#page-yearreview .cc:nth-of-type(3) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border-color:#ddd4c4 !important; }
#page-yearreview .cc:nth-of-type(4) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; border-color:#c4d8dc !important; }
#page-yearreview .cc:nth-of-type(5) { background:linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; border-color:#cfc8e0 !important; }
/* ── Domain Pulse heatmaps — 6 unique cycling ───────────── */
#domain-pulse-body > div:nth-child(6n+1) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border:1px solid #cdd8e5 !important; }
#domain-pulse-body > div:nth-child(6n+2) { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; border:1px solid #cce0d4 !important; }
#domain-pulse-body > div:nth-child(6n+3) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border:1px solid #ddd4c4 !important; }
#domain-pulse-body > div:nth-child(6n+4) { background:linear-gradient(135deg,#ecf4f5,#e3ecee) !important; border:1px solid #c4d8dc !important; }
#domain-pulse-body > div:nth-child(6n+5) { background:linear-gradient(135deg,#f0ecf7,#e8e3f0) !important; border:1px solid #cfc8e0 !important; }
#domain-pulse-body > div:nth-child(6n+6) { background:linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; border:1px solid #ccd4de !important; }
/* ── Mindscape sections — 3 unique ──────────────────────── */
.ms-section:nth-child(1) { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border-color:#cdd8e5 !important; }
.ms-section:nth-child(2) { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border-color:#ddd4c4 !important; }
.ms-section:nth-child(3) { background:linear-gradient(135deg,#f0f3f7,#e8ecf2) !important; border-color:#ccd4de !important; }
.ms-right-col .ms-section { background:linear-gradient(135deg,#eef5f1,#e5ede9) !important; border-color:#cce0d4 !important; }
/* ── Metrics hero ────────────────────────────────────────── */
.metrics-hero { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border-color:#cdd8e5 !important; }
/* ── Vault hero ──────────────────────────────────────────── */
.vault-hero { background:linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border-color:#ddd4c4 !important; }
/* ── Projects panel ──────────────────────────────────────── */
body #proj-ov-panel,
html body #proj-ov-panel { background:linear-gradient(135deg,#edf2f7,#e5ecf3) !important; }
/* ── Delegation items — ensure transparency ──────────────── */
#page-delegation .exec-list-item,
#page-delegation .exec-item,
#page-delegation .exec-delegate-person,
#del-people-list .exec-delegate-person,
#del-byme-list .exec-list-item,
#del-tome-list .exec-list-item {
background: transparent !important;
border-color: rgba(0,0,0,.07) !important;
}
#page-delegation .exec-delegate-person:hover,
#del-people-list .exec-delegate-person:hover {
background: rgba(255,255,255,.35) !important;
}
/* Avatar-sm size fix */
.avatar-sm {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
object-fit: cover !important;
flex-shrink: 0 !important;
}
.avatar-fallback.avatar-sm {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
background: var(--bg4) !important;
color: var(--text2) !important;
}
/* ── Projects KPI stats — theme bg with unique tints ────── */
/* Bubble system on KPI cards */
#page-projects .hierarchy-stat::before {
content: '';
position: absolute;
right: -30px; top: -40px;
width: 110px; height: 110px;
border-radius: 50%;
background: rgba(255,255,255,.28);
box-shadow: -55px 45px 0 -8px rgba(255,255,255,.15), -25px 80px 0 8px rgba(0,0,0,.02);
pointer-events: none; z-index: 0;
}
#page-projects .hierarchy-stat > * { position: relative; z-index: 1; }
.hierarchy-stat-v {
font-family: var(--bebas,"Bebas Neue",sans-serif);
font-size: 32px;
color: var(--text1);
line-height: 1;
}
.hierarchy-stat-l {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--text3);
margin-top: 4px;
}
/* ── Projects layout — KPI stats move under right hero card ─ */
/* Left column: toolbar (row1) + project cards (row2+) */
/* Right column: hero (row1) + KPI stats (row2) */
/* KPIs stacked vertically in right column */
/* Remove the main-col wrapper */
@media (max-width: 900px) {
#page-projects .hierarchy-hero,
#page-projects .hierarchy-summary { grid-column:1 !important; position:static !important; }
}
/* ══════════════════════════════════════════════════════════
FIX PASS — Avatar URLs, delegation transparency,
projects blank space
══════════════════════════════════════════════════════════ */
/* ── Delegation + Strategy Center — exec-row transparent ─── */
#page-delegation .exec-row,
#page-command .exec-row {
background: transparent !important;
border-color: rgba(0,0,0,.06) !important;
}
#page-delegation .exec-row:hover,
#page-command .exec-row:hover {
background: rgba(255,255,255,.35) !important;
}
/* exec-list-item also transparent */
#page-delegation .exec-list-item,
#page-command .exec-list-item {
background: transparent !important;
border-color: rgba(0,0,0,.06) !important;
}
/* ── Projects — fix blank space between toolbar and cards ── */
/* The hierarchy-main-col with display:contents causes auto-placement gaps */
/* Switch to explicit grid layout without display:contents */
/* Ensure toolbar and tree are inside main-col flex container */
#page-projects .hierarchy-toolbar {
grid-column: 1 !important;
grid-row: 1 !important;
flex-shrink: 0;
}
#page-projects .hierarchy-tree {
grid-column: 1 !important;
grid-row: 2 !important;
flex: 1;
}
@media (max-width: 900px) {
#page-projects .hierarchy-hero {
grid-column: 1 !important;
grid-row: 2 !important;
position: static !important;
}
}
/* ── Projects — KPI cards compact in right column ─────────── */
/* Override the full-width layout that was showing huge cards */
#page-projects .hierarchy-summary .hierarchy-stat {
width: 100% !important;
padding: 12px 16px !important;
min-height: unset !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
}
/* ── Accountability row — force transparent ───────────────── */
#exec-waiting-list .exec-delegate-person,
.exec-waiting-list .exec-delegate-person,
#page-command .exec-delegate-person {
background: transparent !important;
border-color: rgba(0,0,0,.06) !important;
}
#exec-waiting-list .exec-delegate-person:hover,
#page-command .exec-delegate-person:hover {
background: rgba(255,255,255,.35) !important;
}
/* ── Projects — clean 2-col layout with right-col wrapper ── */
#page-projects .hierarchy-wrap {
grid-template-rows: auto auto 1fr !important;
display: grid !important;
grid-template-columns: 1fr 280px !important;
gap: 16px 20px !important;
align-items: start !important;
}
/* Left column: toolbar + project cards */
#page-projects .hierarchy-main-col {
order: 1 !important;
grid-column: 1 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
/* Right column: hero + KPI stats stacked */
#page-projects .hierarchy-right-col {
grid-column: 2 !important;
grid-row: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
position: sticky !important;
top: 16px !important;
}
/* Hero card inside right col */
#page-projects .hierarchy-hero {
border-radius: 14px !important;
padding: 20px !important;
border: 1px solid #cdd8e5 !important;
order: 2 !important;
grid-column: 2 !important;
grid-row: 1 !important;
top: 16px !important;
position: static !important;
width: 100% !important;
}
/* KPI summary inside right col */
#page-projects .hierarchy-summary {
grid-template-columns: repeat(4,1fr) !important;
grid-column: 2 !important;
grid-row: 2 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
/* Each KPI card — compact horizontal */
#page-projects .hierarchy-stat {
border-radius: 12px !important;
padding: 12px 16px !important;
border: 1px solid var(--border) !important;
position: relative !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-direction: row !important;
}
#page-projects .hierarchy-stat-v {
order: 1 !important;
font-family: "Bebas Neue", sans-serif !important;
font-size: 28px !important;
line-height: 1 !important;
color: var(--text1) !important;
}
#page-projects .hierarchy-stat-l {
order: 2 !important;
text-align: right !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
color: var(--text3) !important;
}
/* Unique tints per KPI card */
#page-projects .hierarchy-stat:nth-child(1) { background: linear-gradient(135deg,#edf2f7,#e5ecf3) !important; border-color:#cdd8e5 !important; }
#page-projects .hierarchy-stat:nth-child(2) { background: linear-gradient(135deg,#eef5f1,#e5ede9) !important; border-color:#cce0d4 !important; }
#page-projects .hierarchy-stat:nth-child(3) { background: linear-gradient(135deg,#f5f0e8,#ede8dc) !important; border-color:#ddd4c4 !important; }
#page-projects .hierarchy-stat:nth-child(4) { background: linear-gradient(135deg,#f5ecec,#ede3e3) !important; border-color:#dccece !important; }
@media (max-width: 900px) {
#page-projects .hierarchy-wrap {
grid-template-columns: 1fr !important;
}
#page-projects .hierarchy-main-col {
grid-column: 1 !important;
grid-row: 2 !important;
}
#page-projects .hierarchy-right-col { grid-column: 1 !important; grid-row: 1 !important; position: static !important; }
#page-projects .hierarchy-summary {
grid-column: 1 !important;
grid-row: 3 !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
#page-projects .hierarchy-stat { flex: 1; min-width: 120px; }
}
/* ── Sidebar group labels ─────────────────────────────────── */
.s-group-label {
font-size: 9px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--text4);
padding: 12px 14px 4px;
display: none; /* only shows when sidebar is expanded */
white-space: nowrap;
user-select: none;
}
#sidebar.exp .s-group-label { display: flex; }
/* Explore toggle — clickable group label with chevron */
.s-explore-toggle {
cursor: pointer;
align-items: center;
justify-content: space-between;
transition: color .15s;
}
.s-explore-toggle:hover { color: var(--text3); }
.s-explore-chev {
display: inline-flex;
transition: transform .2s ease;
opacity: .6;
}
/* Collapsed sidebar — hide explore group too */
#sidebar:not(.exp) #explore-group { display: none !important; }
/* ── Day Designer Panel (Day Pulse Phase 2) ───────────────── */
#day-povl { position:fixed; inset:0; background:rgba(0,0,0,0.3); backdrop-filter:blur(3px); z-index:300; opacity:0; pointer-events:none; transition:opacity var(--ease2); }
#day-povl.on { opacity:1; pointer-events:all; }
#day-panel { position:fixed; top:0; right:0; bottom:0; width:var(--panel); background:var(--bg2); border-left:1px solid var(--border); z-index:301; display:flex; flex-direction:column; transform:translateX(100%); transition:transform var(--ease2); box-shadow:-8px 0 32px rgba(0,0,0,0.12); }
#day-panel.on { transform:none; }
/* Live preview strip */
.day-preview-wrap { margin-bottom: 18px; }
.day-preview-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.day-active-total { font-weight:600; color:var(--text2); text-transform:none; letter-spacing:0; }
#day-preview-strip { position:relative; height:14px; border-radius:4px; overflow:hidden; background:rgba(0,0,0,0.05); }
.day-prev-zone { position:absolute; top:0; height:100%; }
.day-prev-active { background:linear-gradient(180deg, rgba(59,110,240,0.55), rgba(59,110,240,0.40)); }
.day-prev-break { background:linear-gradient(180deg, rgba(245,158,11,0.45), rgba(245,158,11,0.30)); }
.day-prev-sleep { background:linear-gradient(180deg, rgba(79,70,229,0.40), rgba(49,46,129,0.30)); }
.day-preview-legend { display:flex; gap:14px; margin-top:8px; font-size:11px; color:var(--text3); }
.day-preview-legend span { display:flex; align-items:center; gap:5px; }
.day-leg { width:10px; height:10px; border-radius:3px; display:inline-block; }
.day-leg-active { background:rgba(59,110,240,0.55); }
.day-leg-break { background:rgba(245,158,11,0.45); }
.day-leg-sleep { background:rgba(79,70,229,0.45); }
/* Block rows */
.day-blocks-hdr { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text3); margin:6px 0 8px; }
.day-block-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.day-block-type { flex:0 0 82px; padding:6px 8px; border:1px solid var(--border2); border-radius:6px; background:var(--bg1); color:var(--text1); font-size:12px; }
.day-block-time { flex:1; padding:6px 8px; border:1px solid var(--border2); border-radius:6px; background:var(--bg1); color:var(--text1); font-size:12px; }
.day-block-sep { color:var(--text4); font-size:12px; }
.day-block-del { flex:0 0 24px; width:24px; height:24px; border:none; background:transparent; color:var(--text4); font-size:16px; cursor:pointer; border-radius:5px; transition:all .15s; }
.day-block-del:hover { background:rgba(220,38,38,.1); color:var(--red); }
.day-add-btn { width:100%; margin-top:6px; font-size:12px; }
/* ══════════════════════════════════════════════════════════
DARK THEME — token overrides only. Structural layers build on
the existing auth-navy family (the login/loading screen colors).
Mood/habit/domain color families use a translucent-overlay
technique on the dark card surface rather than solid pastels,
each keeping its own hue so identity stays distinguishable.
Tailwind chart-accent tokens (--tw-*) and saturated priority/
status colors are intentionally left unchanged — mid-tone
accent colors are designed to read on both light and dark.
══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
--accent-blue-bright: #5b8def;
--amber: #fcd34d;
--bg: #111827;
--bg2: #1a2535;
--bg3: #1e2b3c;
--bg4: #243347;
--bg5: #2b3b52;
--blue: #7a9ab8;
--border: rgba(255,255,255,.08);
--border2: rgba(255,255,255,.15);
--brand: #4a7abf;
--brand-2: #7a9ab8;
--brand-dark: #e8eaf0;
--brand-soft: rgba(74,122,191,.14);
--briefing-goal-divider: rgba(255,255,255,.14);
--btn-danger-bg: rgba(248,113,113,.12);
--btn-danger-bg-hover: rgba(248,113,113,.18);
--btn-danger-border: rgba(248,113,113,.30);
--btn-danger-text: #fca5a5;
--btn-primary-bg: #2a4a6e;
--btn-primary-bg-hover: #335580;
--btn-primary-border: #3a5a82;
--btn-primary-border-hover: #4a6a92;
--btn-primary-text: #e2eaf3;
--btn-secondary-bg: #1a2535;
--btn-secondary-bg-hover: #1e2d40;
--btn-secondary-border: rgba(255,255,255,.15);
--btn-secondary-text: #b0b4c8;
--btn-success-bg: rgba(52,211,153,.10);
--btn-success-bg-hover: rgba(52,211,153,.16);
--btn-success-border: rgba(52,211,153,.26);
--btn-success-text: #6ee7b7;
--chart-inreview: #e0a8c0;
--chart-onhold: #e8c96a;
--chart-totest: #e0a090;
--dom-deliver-tint: rgba(26,79,138,0.18);
--dom-evolve-tint: rgba(98,36,160,0.18);
--dom-evolve-tint-empty: rgba(98,36,160,0.08);
--dom-personal-tint: rgba(158,32,80,0.18);
--dom-spark-tint: rgba(160,92,0,0.18);
--dom-spark-tint-empty: rgba(160,92,0,0.08);
--dom-vault-tint: rgba(136,146,176,0.18);
--dom-vital-tint: rgba(13,110,80,0.18);
--dom-vital-tint-empty: rgba(13,110,80,0.08);
--generic-card-bg: #1a2535;
--generic-card-bg-alt: #1e2b3c;
--gray-333: #cccccc;
--gray-666: #999999;
--gray-888: #8892b0;
--gray-999: #666666;
--gray-aaa: #555555;
--gray-ddd: #333333;
--gray-eee: #222222;
--green: #6ee7b7;
--habit-card-name-ink: #b0b4c8;
--habit-mood-1-bg: rgba(59,110,240,0.12);
--habit-mood-1-border: rgba(59,110,240,0.3);
--habit-mood-1-ink: #93c5fd;
--habit-mood-2-bg: rgba(52,211,153,0.12);
--habit-mood-2-border: rgba(52,211,153,0.3);
--habit-mood-2-ink: #6ee7b7;
--habit-mood-3-bg: rgba(251,191,36,0.12);
--habit-mood-3-border: rgba(251,191,36,0.3);
--habit-mood-3-ink: #fcd34d;
--habit-mood-4-bg: rgba(167,139,250,0.12);
--habit-mood-4-border: rgba(167,139,250,0.3);
--habit-mood-4-ink: #c4b5fd;
--habit-mood-5-bg: rgba(20,184,166,0.12);
--habit-mood-5-border: rgba(20,184,166,0.3);
--habit-mood-5-ink: #5eead4;
--heat-0: #1e2b3c;
--heat-1: #0e4429;
--heat-2: #006d32;
--heat-3: #26a641;
--heat-4: #39d353;
--heat-future: #161f2e;
--ink: #e8eaf0;
--line: rgba(255,255,255,.10);
--line-2: rgba(255,255,255,.16);
--mood-amber-1: rgba(251,191,36,0.14);
--mood-amber-2: rgba(251,191,36,0.09);
--mood-blue-1: rgba(59,110,240,0.14);
--mood-blue-2: rgba(59,110,240,0.09);
--mood-border: rgba(255,255,255,.14);
--mood-cyan-1: rgba(20,184,166,0.14);
--mood-cyan-2: rgba(20,184,166,0.09);
--mood-green-1: rgba(52,211,153,0.14);
--mood-green-2: rgba(52,211,153,0.09);
--mood-ink: #e8eaf0;
--mood-red-1: rgba(248,113,113,0.14);
--mood-red-2: rgba(248,113,113,0.09);
--mood-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 24px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.24);
--mood-shadow-hover: 0 1px 0 rgba(255,255,255,.06) inset, 0 14px 32px rgba(0,0,0,.38), 0 3px 8px rgba(0,0,0,.28);
--mood-slate-1: rgba(148,163,184,0.14);
--mood-slate-2: rgba(148,163,184,0.09);
--mood-violet-1: rgba(167,139,250,0.14);
--mood-violet-2: rgba(167,139,250,0.09);
--muted: #8892b0;
--orange: #fdba74;
--premium-bg: #111827;
--premium-card: #1e2b3c;
--premium-card-2: #243347;
--premium-line: rgba(255,255,255,.12);
--premium-line-soft: rgba(255,255,255,.08);
--premium-panel: #1a2535;
--premium-shadow: 0 1px 1px rgba(0,0,0,.30),0 8px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04);
--premium-shadow-hover: 0 2px 4px rgba(0,0,0,.35),0 14px 32px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
--profile-card-avatar-bg: #243347;
--profile-card-bg-1: #1a2535;
--profile-card-bg-2: #1e2b3c;
--profile-card-border: rgba(255,255,255,.12);
--red: #fca5a5;
--shadow: 0 1px 2px rgba(0,0,0,.30);
--shadow-lg: 0 18px 48px rgba(0,0,0,.48);
--shadow-md: 0 8px 22px rgba(0,0,0,.38);
--soft-amber: rgba(251,191,36,0.14);
--soft-blue: rgba(59,110,240,0.14);
--soft-cyan: rgba(20,184,166,0.14);
--soft-green: rgba(52,211,153,0.14);
--soft-red: rgba(248,113,113,0.14);
--soft-violet: rgba(167,139,250,0.14);
--status-at-risk: #fcd34d;
--status-off-track: #fca5a5;
--status-on-track: #6ee7b7;
--surface-0: #1a2535;
--surface-1: #1e2b3c;
--surface-2: #243347;
--surface-3: #2b3b52;
--surface-depth: 0 1px 0 rgba(255,255,255,.05) inset,0 12px 28px rgba(0,0,0,.34),0 2px 8px rgba(0,0,0,.26);
--surface-depth-hover: 0 1px 0 rgba(255,255,255,.06) inset,0 18px 36px rgba(0,0,0,.40),0 4px 12px rgba(0,0,0,.30);
--teal: #5eead4;
--text1: #e8eaf0;
--text2: #b0b4c8;
--text3: #98a1c2;
--text4: #959ebd;
--violet: #c4b5fd;
/* ── Shell tokens ── */
--sidebar-bg-1: #1a2535;
--sidebar-bg-2: #1e2b3c;
--shell-border-1: rgba(255,255,255,.10);
--shell-border-2: rgba(255,255,255,.12);
--shell-border-3: rgba(255,255,255,.10);
--topbar-bg: rgba(26,37,53,.92);
--nbadge-bg: #b5686b;
--nitem-hover-bg: rgba(255,255,255,.06);
--nitem-active-bg: rgba(122,154,184,.16);
--tbtn-bg: #1e2b3c;
--tbtn-border: rgba(255,255,255,.14);
--tbtn-bg-hover: #243347;
--tbtn-border-hover: rgba(255,255,255,.20);
--stoggle-color: #8892b0;
--role-manager-bg-1: rgba(122,154,184,.14);
--role-manager-bg-2: rgba(122,154,184,.09);
--role-manager-border: rgba(122,154,184,.30);
--role-member-bg-1: rgba(148,163,184,.10);
--role-member-bg-2: rgba(148,163,184,.06);
--role-member-border: rgba(148,163,184,.22);
--role-manager-accent: #7a9ab8;
--role-member-accent: #8892b0;
--role-design-accent: #c4b5fd;
--role-ops-accent: #5eead4;
--role-manager-ring: rgba(122,154,184,.22);
--role-member-ring: rgba(136,146,176,.22);
--role-design-ring: rgba(167,139,250,.22);
--role-ops-ring: rgba(94,231,212,.22);
--sidebar-inset-highlight: rgba(255,255,255,.04);
--user-pill-shadow-1: rgba(255,255,255,.06);
--user-pill-shadow-2: rgba(0,0,0,.20);
/* ── Panel/card tokens ── */
--kpi-card-bg-1: #1a2535;
--kpi-card-bg-2: #1e2b3c;
--kpi-card-border: rgba(255,255,255,.10);
--panel-input-bg: #243347;
--panel-input-focus-bg: #2b3b52;
--panel-input-focus-border: #7a9ab8;
--panel-input-focus-glow: rgba(122,154,184,.20);
--input-bg: #1e2b3c;
--input-border: rgba(255,255,255,.14);
--input-color: #e8eaf0;
--panel-btn-primary-bg: #2a4a6e;
--panel-btn-primary-border: #3a5a82;
--panel-btn-primary-bg-hover: #335580;
--panel-btn-secondary-bg: #1a2535;
--panel-btn-secondary-color: #b0b4c8;
--panel-btn-secondary-border: rgba(255,255,255,.15);
--panel-btn-secondary-bg-hover: #1e2d40;
--panel-btn-danger-color: #fca5a5;
--panel-btn-danger-border: rgba(248,113,113,.30);
--panel-btn-danger-bg-hover: rgba(248,113,113,.18);
--panel-btn-danger-border-hover: rgba(248,113,113,.45);
--panel-btn-danger-color-hover: #fecaca;
--panel-btn-ghost-bg: #1e2b3c;
--panel-btn-ghost-color: #8892b0;
--panel-btn-ghost-border: rgba(255,255,255,.12);
--panel-btn-ghost-bg-hover: #243347;
--panel-btn-ghost-color-hover: #e8eaf0;
--panel-header-footer-bg: #1a2535;
--briefing-card-bg-1: #1a2535;
--briefing-card-bg-2: #1e2b3c;
--briefing-card-bg-3: #243347;
--briefing-card-color: #e8eaf0;
/* ── Panel/card real-winner tokens ── */
--panel-bg-real: #1a2535;
--panel-border-real: rgba(255,255,255,.12);
--input-bg-real: #243347;
--input-border-real: rgba(255,255,255,.14);
--input-color-real: #e8eaf0;
--panel-header-bg-real: #1e2b3c;
--card-bg-real-1: #1a2535;
--card-bg-real-2: #1e2b3c;
/* ── Hierarchy & Collaborators section tokens ── */
--advsec-bg-1: #1a2535;
--advsec-bg-2: #1e2b3c;
--advsec-card-bg: #243347;
--advsec-card-border: rgba(255,255,255,.14);
--advsec-input-border: rgba(255,255,255,.16);
--advsec-chip-bg: rgba(255,255,255,.08);
--advsec-dp-mini-color: #b0b4c8;
/* ── Panel body / thread tokens ── */
--thread-feed-bg: #1a2535;
--thread-feed-line: rgba(255,255,255,.14);
--thread-item-border: rgba(255,255,255,.10);
/* ── Card shadow / h-task tokens ── */
--card-inset-highlight: rgba(255,255,255,.06);
--h-task-bg: #1a2535;
}
/* ══════════════════════════════════════════════════════════
MOBILE-ONLY: Action Center simplification
Removes the profile/salutation row and "The Universe Suggests"
cards on small screens, and makes the "More Metrics" strip
always-expanded (no collapsible title) so the page goes
straight from the overdue ribbon into the metrics content.
Desktop layout is completely unaffected.
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#dashboard-profile-card { display: none !important; }
#dash-briefing-strip { display: none !important; }
#dashboard-signal-row { display: none !important; }
#kpi-row2-toggle { display: none !important; }
#kpi-row2-body { display: block !important; }
/* More Metrics: Budget takes the full-width top row; the remaining
6 metrics fill a 3-column grid below it (2 rows of 3). */
.dms-strip {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--border);
}
.dms-cell {
flex: unset !important;
background: var(--bg2);
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 10px 12px;
}
.dms-cell-budget {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
}
.dms-div { display: none !important; }
/* Notification count already shows in the topbar bell (#notif-badge),
which stays visible on mobile — no need to duplicate it here too. */
#mob-notif-badge { display: none !important; }
}
/* ══════════════════════════════════════════════════════════
App-styled confirmation modal (replaces native confirm())
Reuses the existing --btn-primary/--btn-secondary tokens from
the dark-theme work, so it matches both themes automatically
with no extra dark-mode-specific rules needed.
══════════════════════════════════════════════════════════ */
.cx-confirm-overlay {
position: fixed; inset: 0; z-index: 10000;
background: rgba(0,0,0,.45);
display: flex; align-items: center; justify-content: center;
animation: cx-confirm-fade .15s ease;
}
@keyframes cx-confirm-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-confirm-modal {
background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 20px 50px rgba(0,0,0,.28);
max-width: 400px; width: calc(100% - 40px);
padding: 20px 22px;
}
.cx-confirm-title {
font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
color: var(--text3); margin-bottom: 10px;
}
.cx-confirm-body {
font-size: 14px; color: var(--text1); line-height: 1.55;
margin-bottom: 18px; white-space: pre-line;
}
.cx-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cx-confirm-btn {
padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 700;
cursor: pointer; transition: background .15s;
}
.cx-confirm-secondary {
background: var(--btn-secondary-bg); color: var(--btn-secondary-color);
border: 1px solid var(--btn-secondary-border);
}
.cx-confirm-secondary:hover { background: var(--btn-secondary-bg-hover); }
.cx-confirm-primary {
background: var(--btn-primary-bg); color: var(--btn-primary-text);
border: 1px solid var(--btn-primary-border);
}
.cx-confirm-primary:hover { background: var(--btn-primary-bg-hover); }
/* ══════════════════════════════════════════════════════════
TASK DETAIL ACTIVITY TREE — unified, continuous version
Every node (domain, sub-project, task, every activity dot,
every avatar, every reply) shares ONE coordinate system and
ONE connector technique: a full-height vertical line per node
(so consecutive nodes chain into a single unbroken stem) plus
a short curved branch at that node's own anchor point, where
its dot/avatar sits. The last node in any list gets its line
truncated to its own anchor — never a tail hanging into empty
space below the last item.
══════════════════════════════════════════════════════════ */
.act-tree { position: relative; }
.act-node { position: relative; padding-left: 40px; }
.act-node::before {
content: ''; position: absolute; left: 4px; top: 0; bottom: 0;
width: 1px; background: var(--border); z-index: 0;
}
.act-node-domain {
padding-left: 0; margin-bottom: 6px;
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
}
.act-node-domain::before { display: none; } /* the root has nothing above it to connect to */
.act-node-branch {
font-size: 12px; color: var(--text3); min-height: 16px; padding-bottom: 3px;
}
.act-node-task { font-weight: 700; color: var(--text1); font-size: 13px; padding-bottom: 12px; }
/* The curved branch at this node's own anchor point — a separate short
element from the full-height line above, so the line can keep going
past the curve for nodes that aren't last, or stop exactly at the
curve for ones that are. */
.act-stem {
position: absolute; left: 4px; top: 0; width: 18px;
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-bottom-left-radius: 9px;
}
.act-stem-short { height: 9px; }
.act-stem-to-dot { height: 10px; }
.act-stem-to-avatar { height: 15px; }
/* Last node in the main list: remove the separate full trunk line
entirely rather than trying to truncate it to match the stem — the
stem element already draws its own short vertical bit plus the curve
self-contained, so a second overlapping line was creating a visible
seam right where the two independently-positioned pieces met. */
#thread-wrap > .act-node:last-child::before { display: none; }
.afe-episode-leaves > .act-node:last-child::before { display: none; }
.afe-episode { margin-bottom: 22px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.afe-episode:last-child { border-bottom: none; }
.act-avatar-fallback {
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg3); color: var(--text3); font-size: 11px; font-weight: 700;
}
.act-leaf { padding-bottom: 14px; }
.act-leaf-system { padding-bottom: 6px; min-height: 20px; display: flex; align-items: flex-start; }
.act-dot {
position: relative; z-index: 1; flex-shrink: 0;
width: 6px; height: 6px; border-radius: 50%;
background: var(--text4); margin-left: -21px; margin-right: 12px; margin-top: 7px;
box-shadow: 0 0 0 3px var(--panel-bg-real);
}
.act-sys-body { flex: 1; min-width: 0; }
.act-sys-verb { font-size: 11px; color: var(--text3); font-weight: 600; }
.act-sys-verb svg { width: 13px; height: 13px; stroke-width: 1.8; vertical-align: -2px; margin: 0 1px; }
.act-sys-line { font-size: 11px; color: var(--text4); margin-top: 1px; }
.act-change-label { color: var(--text3); }
.act-diff-old { color: var(--text4); }
.act-diff-new { color: var(--text1); font-weight: 600; }
.act-diff-arrow { color: var(--text4); }
.act-diff-text { color: var(--text3); }
.act-time { font-size: 10.5px; color: var(--text4); margin-left: auto; flex-shrink: 0; white-space: nowrap; padding-left: 8px; }
.act-show-original { font-size: 10.5px; color: var(--blue); cursor: pointer; margin-left: 4px; font-weight: 600; }
.act-show-original:hover { text-decoration: underline; }
.act-original-value { color: var(--text4); }
.act-leaf-comment { padding-bottom: 16px; }
.act-avatar {
position: absolute; z-index: 1; left: 7px; top: 0;
width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--panel-bg-real);
}
.act-avatar-sm { width: 24px; height: 24px; left: 10px; }
.act-comment-body { min-width: 0; }
.act-comment-head { display: flex; align-items: baseline; gap: 8px; }
.act-comment-head strong { font-size: 13px; color: var(--text1); }
.act-comment-text { font-size: 13.5px; color: var(--text2); line-height: 1.5; margin-top: 3px; overflow-wrap: break-word; }
.act-reply-btn {
background: none; border: none; padding: 0; margin-top: 6px; display: block;
font-size: 11.5px; font-weight: 700; color: var(--text3); cursor: pointer;
}
.act-reply-btn:hover { color: var(--blue); }
/* Reply threads reuse the exact same .act-node/.act-stem system, just
inside an indented container — so a reply-to-a-reply nests the same
way a reply does, recursively, with no separate/special-cased markup. */
.act-reply-thread { position: relative; margin-top: 10px; margin-left: 4px; padding-left: 14px; }
.act-reply-thread > .act-node:last-child::before { display: none; }
.act-reply-box { margin-top: 10px; margin-left: 18px; }
.act-reply-input { font-size: 13px; }
/* Activity Feed timeline: constrained and centered on desktop so
timestamps don't end up flung to the far edge of a wide page with a
huge empty gap in between — full width on mobile, where there's no
such gap to begin with. */
#act-timeline {
max-width: 50%; min-width: 640px; margin-left: auto; margin-right: auto;
}
@media (max-width: 1100px) {
#act-timeline { min-width: 0; max-width: 100%; }
}
/* Daily digest — a compact summary strip sitting between each day's
separator and its detailed episodes. Deliberately lightweight/muted
so it reads as "here's the shape of the day" without competing with
the actual detailed entries below it. */
.afe-day-digest {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 0 4px 14px; margin-top: -6px;
}
.afe-digest-chip {
font-size: 11px; font-weight: 600; color: var(--text3);
background: var(--bg3); border-radius: 999px;
padding: 4px 10px;
}
/* ══════════════════════════════════════════════════════════════════════════
CHRONICLE — the work writes the blog (chr-*)
Editorial layout: centered reading column, masthead + standfirst brief
on top, headline-driven posts below. Post bodies reuse the act-tree
system defined above (.act-node / .act-stem / .act-dot / .act-leaf).
══════════════════════════════════════════════════════════════════════════ */
#chr-wrap {
max-width: 760px; min-width: 640px; margin: 0 auto;
}
@media (max-width: 1100px) {
#chr-wrap { max-width: 100%; min-width: 0; padding: 0 16px; box-sizing: border-box; }
}
/* Masthead + creative brief */
#chr-brief { padding: 6px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.chr-mast-kicker {
font-size: 10px; font-weight: 800; text-transform: uppercase;
letter-spacing: .16em; color: var(--text4); margin-bottom: 4px;
}
.chr-mast-date { font-size: 21px; font-weight: 800; color: var(--text1); letter-spacing: -.02em; line-height: 1.15; }
.chr-mast-edition { font-size: 12px; font-weight: 600; color: var(--text4); letter-spacing: 0; margin-left: 2px; }
.chr-standfirst { font-size: 12.5px; color: var(--text3); margin-top: 5px; }
.chr-brief-lines { margin-top: 12px; border-top: 1px solid var(--border); }
.chr-brief-line {
font-size: 12px; color: var(--text2); padding: 7px 0;
border-bottom: 1px solid var(--border); line-height: 1.5;
}
.chr-brief-line:last-child { border-bottom: none; padding-bottom: 0; }
.chr-brief-k {
display: inline-block; min-width: 96px; font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: .08em; color: var(--text4);
margin-right: 8px;
}
.chr-dom { font-weight: 800; }
/* Posts */
.chr-post { padding: 16px 0 10px; border-bottom: 1px solid var(--border); position: relative; }
.chr-post:last-child { border-bottom: none; }
.chr-dateline { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text4); }
.chr-headline {
font-size: 15px; font-weight: 700; color: var(--text1);
letter-spacing: -.01em; line-height: 1.35; margin: 4px 0 10px;
}
.chr-lead { padding-top: 6px; }
.chr-body { margin-top: 2px; }
/* Continuous stem must terminate at the last VISIBLE leaf (padding, not
margin, keeps the ::before lines chained — see act-tree notes above).
Folded: last shown leaf ends the stem. Open: stem runs through the
shown leaves into the fold and ends at its last leaf. */
.chr-body.folded .chr-shown > .act-node:last-child::before { display: none; }
.chr-body:not(.folded) .chr-fold > .act-node:last-child::before { display: none; }
.chr-body:not(.folded) .chr-shown:last-child > .act-node:last-child::before { display: none; }
.chr-fold { display: none; }
.chr-fold.open { display: block; }
.chr-quote { font-style: italic; font-size: 13px; }
.chr-fold-btn {
display: inline-block; margin: 2px 0 4px 40px; padding: 0;
border: none; background: none; cursor: pointer;
font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--blue);
}
.chr-fold-btn:hover { text-decoration: underline; }
.chr-error { text-align: center; padding: 48px 20px; color: var(--text3); font-size: 13px; }
#chr-loading { text-align: center; padding: 32px 0; color: var(--text3); font-size: 12.5px; }
/* Chronicle brief: month-time breakdown wraps to its own indented line
under the crux sentence, aligned with the value column. */
.chr-brief-month { display: block; margin-top: 3px; padding-left: 104px; color: var(--text3); }
@media (max-width: 700px) { .chr-brief-month { padding-left: 0; } }
/* Month strip — a single flattened proportional bar for the month's
total-so-far (from the 1st to today), not a day-by-day view. Same
domain colors and fixed ordering as the archive row strips, just
sized larger since this sits in the header summary area. */
.chr-month-strip-wrap { margin-top: 8px; padding-left: 104px; }
@media (max-width: 700px) { .chr-month-strip-wrap { padding-left: 0; } }
.chr-month-strip {
display: flex; gap: 1.5px; height: 4px; width: 100%; max-width: 480px; border-radius: 2px;
overflow: hidden; background: var(--bg3); cursor: default;
}
.chr-month-strip-seg { height: 100%; }
/* Archive row time strip — compact proportional bar between the date
and the headline, same domain colors and fixed ordering, so the
whole app's time-visual language stays one language. */
.arc-row-strip {
display: flex; gap: 1.5px; height: 3px; width: 100%; border-radius: 1.5px;
overflow: hidden; background: var(--bg3);
}
.arc-row-strip-seg { height: 100%; }
/* Chronicle: today's edition header + day-paged load-more */
.chr-day-today { color: var(--text2); border-bottom-color: var(--border2); }
/* Chronicle: today's live-headline draft indicator */
.chr-draft-tag {
display: inline-block; margin-left: 8px; vertical-align: middle;
font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0;
color: var(--text4); background: var(--bg3); border: 1px solid var(--border2);
border-radius: 99px; padding: 2px 9px;
}
/* Recent frozen titles + archive link — replaces the old multi-day
"Load older editions" pagination now that the main page shows only
today. */
.chr-recent-wrap { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }
.chr-recent-heading {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .1em; color: var(--text4); margin-bottom: 6px;
}
.chr-recent-row {
display: flex; align-items: baseline; gap: 10px; width: 100%;
text-align: left; background: none; border: none; border-bottom: 1px solid var(--border);
padding: 9px 0; cursor: pointer; font-family: inherit;
}
.chr-recent-row:hover { background: var(--bg3); }
.chr-recent-date { font-size: 11px; color: var(--text4); min-width: 64px; flex-shrink: 0; }
.chr-recent-kicker { font-size: 11px; color: var(--blue); font-weight: 700; flex-shrink: 0; }
.chr-recent-headline { font-size: 12.5px; color: var(--text2); flex: 1; }
.chr-archive-link {
display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700;
color: var(--blue); text-decoration: none; cursor: pointer;
}
.chr-archive-link:hover { text-decoration: underline; }
/* Chronicle masthead v2 — small all-caps nameplate (sans, not serif),
fixed date-aware kicker + rotating headline, small date/edition
subtitle, plain summary line, optional note box. */
.chr-mast-fixed {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .14em; color: var(--text3);
}
.chr-mast-b {
border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px;
}
.chr-mast-kicker {
font-size: 10.5px; font-weight: 800; text-transform: uppercase;
letter-spacing: .12em; color: var(--blue);
}
.chr-mast-headline {
font-size: 30px; font-weight: 700; color: var(--text1);
letter-spacing: -.02em; line-height: 1.2; margin-top: 3px;
}
.chr-mast-headline.placeholder { color: var(--text3); font-weight: 500; font-style: italic; }
.chr-mast-date { font-size: 11.5px; color: var(--text4); margin-top: 8px; }
.chr-mast-edition { margin-left: 2px; }
.chr-mast-summary {
font-size: 11px; font-weight: 700; color: var(--text2); margin-top: 10px;
}
/* Archived-day viewing banner — lives at the BOTTOM of the page */
.chr-view-banner {
font-size: 12px; color: var(--text3); background: var(--bg3);
border: 1px solid var(--border2); border-radius: 8px;
padding: 8px 12px; margin: 20px 0 4px;
}
.chr-view-banner button {
margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--blue);
background: none; border: none; cursor: pointer; padding: 0;
}
.chr-view-banner button:hover { text-decoration: underline; }
/* Optional day-level note */
.chr-note { margin-top: 14px; }
.chr-note-add-btn, .chr-note-edit-btn {
font-size: 11.5px; font-weight: 700; color: var(--text4);
background: none; border: 1px dashed var(--border2); border-radius: 8px;
padding: 5px 10px; cursor: pointer;
}
.chr-note-add-btn:hover, .chr-note-edit-btn:hover { color: var(--blue); border-color: var(--blue); }
/* Quote/note text — matches the plain activity-feed comment style
(.act-comment-text): sans, not italic, not serif. Only the left
accent border carries the "note" identity. */
.chr-quote {
font-family: inherit; font-style: normal; font-size: 12.5px;
color: var(--text2); line-height: 1.5;
}
.chr-note-text {
font-family: inherit; font-style: normal; font-size: 12.5px;
color: var(--text2); line-height: 1.5; background: var(--bg3);
border-left: 2px solid var(--border2); cursor: pointer;
padding: 8px 12px; border-radius: 0 8px 8px 0;
}
.chr-note-form { margin-top: 8px; }
.chr-note-form textarea {
width: 100%; min-height: 64px; font-size: 13px; font-family: inherit;
border: 1px solid var(--border2); border-radius: 8px; padding: 8px 10px;
resize: vertical; background: var(--bg2); color: var(--text1);
}
.chr-note-actions { margin-top: 6px; display: flex; gap: 8px; }
.chr-note-save-btn, .chr-note-cancel-btn {
font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 5px 12px; cursor: pointer;
}
.chr-note-save-btn { background: var(--blue); color: #fff; border: none; }
.chr-note-cancel-btn { background: none; border: 1px solid var(--border2); color: var(--text3); }
/* Inline hover-only "+" note trigger — lives next to the last leaf's
own timestamp, inside existing text flow. It never claims layout
space of its own (a normal inline element that's just invisible),
so hovering the post can never shift the line above or below it. */
/* Reserve identical space on EVERY row inside Chronicle, whether or
not that row happens to have a note trigger — this guarantees
.act-time's own flex math (margin-left:auto) sees the exact same
row width every time, so its position can never shift. Scoped to
#chr-feed only; the shared .act-comment-head/.act-leaf-system
classes are also used by the plain Activity Feed, which has no
trigger and must not be affected by this. */
#chr-feed .act-comment-head,
#chr-feed .act-leaf-system {
padding-right: 20px; position: relative;
}
.chr-note-plus {
position: absolute; right: 0; top: 50%; transform: translateY(-50%);
opacity: 0; pointer-events: none; transition: opacity .12s ease;
width: 15px; height: 15px; line-height: 14px;
text-align: center; font-size: 12px; font-weight: 700; color: var(--text4);
background: var(--bg2); border: 1px solid var(--border2); border-radius: 50%;
padding: 0; cursor: pointer;
}
.chr-post:hover .chr-note-plus { opacity: 1; pointer-events: auto; }
.chr-note-plus:hover { color: var(--blue); border-color: var(--blue); }
/* Shared floating popover — one instance, repositioned to whichever
trigger was clicked. Only ever appears on a deliberate click, so
it's fine for it to overlay content the way any click-triggered
menu would; that's a different concern from the hover-shake issue
the inline trigger above is designed to avoid entirely. */
.chr-note-popover {
display: none; position: absolute; z-index: 50; width: 250px;
background: var(--bg2); border: 1px solid var(--border2);
border-radius: 8px; padding: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.14);
}
.chr-note-popover.open { display: block; }
.chr-note-popover textarea {
width: 100%; min-height: 52px; font-size: 12px; font-family: inherit;
border: 1px solid var(--border2); border-radius: 6px; padding: 6px 8px;
resize: vertical; background: var(--bg1); color: var(--text1); box-sizing: border-box;
}
/* Archive page */
#arc-wrap { max-width: 640px; margin: 0 auto; }
.arc-header { padding: 6px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.arc-sub { font-size: 12px; color: var(--text4); margin-top: 4px; }
.arc-row {
display: flex; flex-direction: column; gap: 6px; width: 100%;
text-align: left; background: none; border: none; border-bottom: 1px solid var(--border);
padding: 12px 4px; cursor: pointer; font-family: inherit;
}
.arc-row:hover { background: var(--bg3); }
.arc-row-top { display: flex; align-items: baseline; gap: 12px; width: 100%; }
.arc-row-date { font-size: 11.5px; color: var(--text4); min-width: 108px; flex-shrink: 0; }
.arc-row-headline { font-size: 13.5px; color: var(--text1); flex: 1; }
.arc-row-note { color: var(--text4); font-size: 13px; }
/* System remark — a quiet, occasional aside from the app itself.
Deliberately NOT avatar/comment-styled: a muted sparkle mark, no
name, softer text weight, so it can never compete with or be
mistaken for a real person's comment in the same tree. */
.act-leaf-remark { padding-bottom: 10px; }
.act-remark-icon {
position: relative; z-index: 1; flex-shrink: 0;
width: 20px; height: 20px; border-radius: 50%;
background: var(--bg3); color: var(--blue);
display: flex; align-items: center; justify-content: center;
margin-right: 10px;
}
.act-remark-text {
font-size: 12.5px; font-style: italic; color: var(--text3);
line-height: 1.5; flex: 1; padding-top: 2px;
}
/* ── BULLET JOURNAL (BJ) ─────────────────────────────────────────────────
A manually-written hourly log, separate from Chronicle. Ruled-paper
feel: fixed row height in the 3-day compact view (so all three
columns align), free-flowing height in single-day view. Three colors
mark today/past/future at a glance — Blue for today, muted Gray for
past (settled, not urgent — deliberately not red, which already
means "critical" everywhere else in this app), White for future
(blank, unwritten). */
.chr-tab-switcher { display: flex; gap: 4px; margin-bottom: 14px; }
.chr-tab {
font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 8px;
border: 1px solid var(--border2); background: var(--bg2); color: var(--text3);
cursor: pointer; transition: all .12s ease;
}
.chr-tab:hover { color: var(--text1); }
.chr-tab.on { background: var(--blue); color: #fff; border-color: var(--blue); }
#bj-view { width: 100%; padding: 0 28px; box-sizing: border-box; }
.bj-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bj-nav-btn, .bj-today-btn, .bj-mode-btn {
font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 7px;
border: 1px solid var(--border2); background: var(--bg2); color: var(--text2);
cursor: pointer;
}
.bj-nav-btn:hover, .bj-today-btn:hover, .bj-mode-btn:hover { color: var(--text1); border-color: var(--text4); }
.bj-mode-btn { margin-left: auto; }
.bj-date-picker {
font-size: 12px; padding: 6px 8px; border-radius: 7px; border: 1px solid var(--border2);
background: var(--bg1); color: var(--text2); font-family: inherit;
}
.bj-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.bj-grid-single { display: block; width: 100%; }
.bj-grid-single .bj-stickie { width: 100%; }
.bj-stickie {
border-radius: 12px; border: 1px solid var(--border2); overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06); position: relative;
}
.bj-stickie::after {
content: '';
position: absolute;
right: -20px; top: -25px;
width: 80px; height: 80px;
border-radius: 50%;
background: rgba(255,255,255,.22);
box-shadow:
-45px 40px 0 -8px rgba(255,255,255,.14),
-20px 65px 0 5px rgba(0,0,0,.04),
-70px 15px 0 12px rgba(255,255,255,.08);
pointer-events: none;
z-index: 0;
}
.bj-stickie.bj-today { background: #bfdbfe; }
.bj-stickie.bj-past { background: #e2e8f0; }
.bj-stickie.bj-future { background: #f1f5f9; }
.bj-stickie-date {
position: absolute; top: 8px; right: 12px; font-size: 10.5px; font-weight: 700;
color: rgba(30,41,59,0.55); letter-spacing: .02em; z-index: 1;
}
.bj-rows { padding: 28px 0 6px; position: relative; z-index: 1; }
.bj-row {
display: flex; align-items: flex-start; gap: 8px; padding: 4px 12px;
border-bottom: 1px solid rgba(30,41,59,0.08);
height: 34px; overflow: hidden; position: relative;
}
.bj-grid-single .bj-row { height: auto; min-height: 34px; overflow: visible; }
.bj-hour-label {
flex-shrink: 0; width: 52px; font-size: 10.5px; font-weight: 700;
color: rgba(30,41,59,0.5); padding-top: 2px; user-select: none;
}
.bj-hour-text {
flex: 1; font-size: 12.5px; color: #1e293b; line-height: 1.4;
outline: none; word-wrap: break-word; overflow-wrap: break-word;
min-width: 0; caret-color: #1e293b;
}
.bj-hour-text:empty::before { content: ''; }
.bj-hour-text:focus { background: transparent; outline: none; }
/* Sleep/break hours (from Design Your Day, read-only display hint —
zero data coupling with that feature) render fainter. */
.bj-row.bj-faint .bj-hour-label { color: rgba(30,41,59,0.28); }
.bj-row.bj-faint .bj-hour-text { color: rgba(30,41,59,0.55); }
/* Current hour — only ever shown on the column that's actually today. */
.bj-row.bj-current { background: rgba(255,255,255,0.4); }
.bj-row.bj-current .bj-hour-label { color: #1e3a5f; font-weight: 800; }
/* Overflow in compact (3-day) view — a soft fade at the bottom edge
instead of a scrollbar or a hard cut, honest that there's more to
read without breaking the fixed-height grid alignment. Clicking
jumps into single-day view for that date, where there's no height
constraint at all. */
.bj-row.bj-overflow { cursor: pointer; }
.bj-row.bj-overflow::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16px;
pointer-events: none;
}
/* Each stickie's fade uses its own color family, a shade or two darker
than its base background, instead of a generic white gradient that
clashed against the blue/gray stickies. */
.bj-stickie.bj-today .bj-row.bj-overflow::after { background: linear-gradient(180deg, transparent, rgba(167,199,242,0.85)); }
.bj-stickie.bj-past .bj-row.bj-overflow::after { background: linear-gradient(180deg, transparent, rgba(203,213,225,0.85)); }
.bj-stickie.bj-future .bj-row.bj-overflow::after { background: linear-gradient(180deg, transparent, rgba(226,232,240,0.85)); }
.bj-row.bj-overflow:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 900px) {
.bj-grid-3col { grid-template-columns: 1fr; }
}
/* ── Custom formatting toolbar (replaces Quill's own bubble tooltip) ──────
Multi-view floating pill: default (block label + Text/Highlight color
dots + inline styles), type-switcher, and a 10-swatch color picker —
the exact three-state flow Quill's stock bubble theme has no way to
render, since it only ever draws one flat row of buttons. Default
styling matches the app's own light theme; a dark-mode variant below
takes over automatically under [data-theme="dark"], same mechanism
the rest of the app already uses for theme switching. */
.nb-format-bar {
display: none; position: absolute; z-index: 220; align-items: center;
gap: 2px; background: var(--bg2); border: 1px solid var(--border2);
border-radius: 8px; padding: 5px 6px;
box-shadow: 0 6px 20px rgba(15,23,42,.18); flex-wrap: nowrap;
max-width: 90vw; overflow-x: auto;
}
.nb-fb-btn {
background: none; border: none; color: var(--text2); font-size: 12.5px;
font-weight: 600; padding: 5px 9px; border-radius: 6px; cursor: pointer;
white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.nb-fb-btn:hover { background: var(--bg3); }
.nb-fb-label { color: var(--text1); }
.nb-fb-dot {
width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border2);
display: inline-block;
}
.nb-fb-dot-empty { background: transparent !important; }
.nb-fb-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 3px; flex-shrink: 0; }
.nb-fb-icon {
background: none; border: none; color: var(--text2); font-size: 13px;
width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nb-fb-icon:hover { background: var(--bg3); }
.nb-fb-icon.on { background: var(--bg4); color: var(--text1); }
.nb-fb-back {
background: none; border: none; color: var(--text2); font-size: 16px;
width: 26px; height: 28px; border-radius: 6px; cursor: pointer; flex-shrink: 0;
}
.nb-fb-back:hover { background: var(--bg3); }
.nb-fb-swatch {
width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border2);
cursor: pointer; flex-shrink: 0; margin: 0 2px;
}
.nb-fb-swatch:hover { transform: scale(1.12); }
/* "No color" swatch — a slashed circle rather than a solid fill,
clearing whichever of Text/Highlight is currently active. */
.nb-fb-swatch-none {
background: var(--bg1) !important;
background-image: linear-gradient(45deg, transparent 46%, #e11d48 48%, #e11d48 52%, transparent 54%) !important;
}
/* Dark-mode variant — same dark floating pill Notion/Attio's own
toolbars use, taking over under this app's real dark-mode attribute
instead of being permanently dark regardless of page theme. */
[data-theme="dark"] .nb-format-bar { background: #1e293b; border-color: rgba(255,255,255,.1); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
[data-theme="dark"] .nb-fb-btn, [data-theme="dark"] .nb-fb-icon, [data-theme="dark"] .nb-fb-back { color: #e2e8f0; }
[data-theme="dark"] .nb-fb-label { color: #fff; }
[data-theme="dark"] .nb-fb-btn:hover, [data-theme="dark"] .nb-fb-icon:hover, [data-theme="dark"] .nb-fb-back:hover { background: rgba(255,255,255,.1); }
[data-theme="dark"] .nb-fb-icon.on { background: rgba(255,255,255,.18); color: #fff; }
[data-theme="dark"] .nb-fb-dot { border-color: rgba(255,255,255,.35); }
[data-theme="dark"] .nb-fb-sep { background: rgba(255,255,255,.16); }
[data-theme="dark"] .nb-fb-swatch { border-color: rgba(255,255,255,.25); }
/* ── Notebook editor as a modal popup (not full-width inline) ─────────────
Matches Attio's own note view: a centered, elevated card over a
dimmed backdrop, rather than replacing the whole page at full width.
#nb-editor-panel's own open/close logic (scattered across several
existing call sites) is untouched — a MutationObserver keeps the
backdrop in sync with whatever already shows/hides the panel. */
.nb-modal-backdrop {
position: fixed; inset: 0; background: rgba(15,23,42,.45);
z-index: 200; backdrop-filter: blur(1px);
}
.nb-modal-panel {
position: fixed; top: 66px; left: 50%; transform: translateX(-50%);
width: 90vw; height: calc(100vh - 66px - 24px); max-height: calc(100vh - 66px - 24px);
background: var(--bg1); border-radius: 14px; z-index: 201;
box-shadow: 0 24px 60px rgba(15,23,42,.35);
display: flex; flex-direction: column; overflow: hidden;
}
/* .nb-modal-close styling now lives with the band rules above, since
the close button sits on the colored band and needs matching
white-on-color treatment, not the neutral styling this used to have. */
@media (max-width: 680px) {
.nb-modal-panel { top: 0; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
}
/* ── Children-listing view — main-frame card grid for a selected
notebook/section, shown before opening any single page/note ── */
.nb-listing-view { padding: 28px 32px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.nb-listing-hdr { font-size: 22px; font-weight: 800; margin-bottom: 18px; color: var(--text1); font-family: 'Inter', var(--sans); }
.nb-listing-grid {
display: flex; flex-direction: column; gap: 22px;
}
.nb-cluster { display: flex; flex-direction: column; }
.nb-cluster-notes {
display: flex; flex-wrap: wrap; gap: 10px;
margin-top: 10px; margin-left: 28px;
}
/* Connector — a dot anchored under the parent card, then a horizontal
line whose width scales with how many children there are (capped at
100%), rather than a fixed decoration. Only rendered once expanded. */
.nb-cluster-line-wrap {
display: flex; align-items: center; margin: 8px 0 0 28px; height: 10px;
}
.nb-cluster-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--text4);
flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg1);
}
.nb-cluster-line { height: 2px; background: var(--border2); border-radius: 1px; }
.nb-listing-card {
border: 1px solid var(--border2); border-radius: 10px;
padding: 12px; cursor: pointer; transition: box-shadow .12s ease;
width: 220px; flex-shrink: 0; position: relative;
}
.nb-listing-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); }
/* Icon sits beside the name/date now, not stacked above them. */
.nb-listing-card-row { display: flex; align-items: center; gap: 10px; }
.nb-listing-card-icon { flex-shrink: 0; }
.nb-listing-card-text { min-width: 0; }
.nb-listing-card-title {
font-size: 13.5px; font-weight: 700; color: var(--text1);
font-family: 'Inter', var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-listing-card-meta { font-size: 11px; color: var(--text4); margin-top: 2px; }
/* Notes render smaller than Pages — a second hierarchy signal beyond
position/indentation alone. */
.nb-listing-card-note { width: 160px; padding: 9px; }
.nb-listing-card-note .nb-listing-card-icon svg { width: 16px; height: 16px; }
.nb-listing-card-note .nb-listing-card-title { font-size: 12px; }
.nb-listing-card-note .nb-listing-card-meta { font-size: 10px; }
/* Expand arrow — bottom-right corner, only present when a card
actually has children; collapsed by default, rotates on expand. */
.nb-listing-expand-btn {
position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px;
border-radius: 5px; border: none; background: var(--bg3); color: var(--text3);
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: transform .15s ease, background .15s ease;
}
.nb-listing-expand-btn:hover { background: var(--bg4); color: var(--text1); }
.nb-listing-expand-btn.on { transform: rotate(90deg); background: var(--bg4); color: var(--text1); }
|