#tempTimelineEmptyState { --bg:#03050b; --ink:#e9eef8; --dim:#8b96ac; --green:#3ee98c; --blue:#4aa9ff; --cyan:#35d6e8; --gold:#f6b83f; --gold-hi:#ffe08a; --purple:#a56bff; --red:#ff5252; /* Deal Room Menu accents — the SAME values the sidebar menu uses, so a section reads in one colour everywhere it appears in the deal room. Section identity lives on the orb + its own controls; the older --green/--cyan/--gold above stay put because they also drive status chips (In Progress / Attention / overdue) and the rail gradient, which are orthogonal to which section you're looking at. Paired with an "r,g,b" triplet for alpha compositing. */ --drm-parts:#2ECC71; --drm-parts-r:46,204,113; --drm-chat:#FF3B4D; --drm-chat-r:255,59,77; --drm-invite:#2D8CFF; --drm-invite-r:45,140,255; --drm-docs:#22D3EE; --drm-docs-r:34,211,238; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); display:flex; justify-content:center; align-items:flex-start; gap:26px; flex-wrap:wrap; padding:34px 16px 60px; background: radial-gradient(1200px 700px at 20% -10%, #0b1226 0%, transparent 60%), radial-gradient(900px 600px at 90% 110%, #120b22 0%, transparent 55%), #03050b; border-radius: 12px; text-align: left; } #tempTimelineEmptyState * { box-sizing: border-box; } #tempTimelineEmptyState .phone{ position:relative;width:402px;max-width:96vw; border-radius:34px;overflow:hidden; background:linear-gradient(180deg,#060a14 0%,#04070f 55%,#070b16 100%); border:1px solid #131c30; box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04); } #tempTimelineEmptyState .screen{position:relative;z-index:2;padding:16px 14px 18px;} #tempTimelineEmptyState .stars{position:absolute;inset:0;z-index:0;pointer-events:none;} #tempTimelineEmptyState .stars i{position:absolute;background:#cfe2ff;border-radius:50%;opacity:.7;animation:twk var(--d,4s) ease-in-out infinite;} @keyframes twk{0%,100%{opacity:.12}50%{opacity:.85}} #tempTimelineEmptyState .neb{position:absolute;border-radius:50%;filter:blur(50px);z-index:0;pointer-events:none;} /* Retention banner — tells the guest their uploads outlive the deal. Uses the Documents cyan (--drm-docs) so it reads as a documents-scoped promise rather than a stage status. Margin is on TOP: it closes the timeline rather than opening it, sitting directly under the last stage, and .export below brings its own 14px. */ #tempTimelineEmptyState .keepbar{ margin-top:12px;padding:12px 13px;border-radius:12px; background:linear-gradient(160deg,rgba(34,211,238,.09),rgba(10,20,32,.55)); border:1px solid rgba(var(--drm-docs-r),.32); box-shadow:0 0 22px -8px rgba(var(--drm-docs-r),.45), inset 0 0 26px -18px rgba(var(--drm-docs-r),.9); } #tempTimelineEmptyState .keepbar .kbtop{display:flex;align-items:center;gap:10px;} #tempTimelineEmptyState .keepbar .kbico{ flex:0 0 auto;width:34px;height:34px;border-radius:10px; display:grid;place-items:center; color:var(--drm-docs);font-size:16px; background:rgba(var(--drm-docs-r),.1); border:1px solid rgba(var(--drm-docs-r),.4); box-shadow:0 0 14px -4px rgba(var(--drm-docs-r),.6); } #tempTimelineEmptyState .keepbar b{font-size:14.5px;font-weight:700;line-height:1.35;color:#eaf6ff;} #tempTimelineEmptyState .keepbar p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--dim);} #tempTimelineEmptyState .keepbar p em{font-style:normal;font-weight:700;color:#cfeffa;} #tempTimelineEmptyState .hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;} #tempTimelineEmptyState .back, #tempTimelineEmptyState .menu{ width:34px;height:34px;border-radius:50%;flex:0 0 auto; display:grid;place-items:center;color:#c6d2e8; background:#0c1324;border:1px solid #1c2740;cursor:pointer;font-size:16px; } /* pill + deal-room clip, side by side. Wraps rather than squeezing: below ~440px the two would each be too narrow to read, so the clip drops under the pill and takes the full width instead. */ #tempTimelineEmptyState .hdr-mid{ flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap; } /* GROWS into whatever the pill leaves rather than sitting at a fixed width. This started as a fixed 168/218px with every type size shrunk to fit, which made the intro clip — a thing people are meant to watch — the smallest element on the board. It is the header's second subject, so it takes the leftover space and keeps the shared .stvid type sizes; only the max-width stops it overwhelming the trace id on a very wide board. */ #tempTimelineEmptyState .hdr-vid{flex:1 1 240px;min-width:0;max-width:420px;} /* a slot with no video in it (STAGE_VIDEOS_ON off) takes no room, so the trace pill sits alone and centred */ #tempTimelineEmptyState [data-stvidslot]:empty{display:none !important;} @media (max-width:440px){ #tempTimelineEmptyState .hdr-vid{flex:1 0 100%;max-width:none;} } /* a header element, not a stage card — the only thing it drops is the card's top margin */ #tempTimelineEmptyState .hdr-vid .stvid{margin-top:0;} #tempTimelineEmptyState .idpill{ flex:1;text-align:center;border-radius:20px;padding:7px 14px; background:linear-gradient(180deg,#0d1322,#0a0f1c); border:1.5px solid rgba(246,184,63,.55); box-shadow:0 0 16px rgba(246,184,63,.12), inset 0 0 18px rgba(246,184,63,.04); } #tempTimelineEmptyState .idpill small{display:block;font-size:12px;color:var(--dim);letter-spacing:.6px;} #tempTimelineEmptyState .idpill b{font-size:16px;font-weight:700;letter-spacing:1.5px;color:#ffedbe;text-shadow:0 0 10px rgba(246,184,63,.5);} /* sits under the trace id, quieter than the "Deal Room" label above it so the pill still reads id-first */ #tempTimelineEmptyState .idpill .idcreated{ display:block; margin-top:3px; font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.4px; white-space:nowrap; } #tempTimelineEmptyState .hdr2{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2px;} #tempTimelineEmptyState .hdr2 small{font-size:11.5px;color:var(--dim);letter-spacing:.8px;text-transform:uppercase;} #tempTimelineEmptyState .hdr2 h2{font-size:16px;font-weight:700;letter-spacing:.3px;color:#ffffff !important;} #tempTimelineEmptyState .tl{position:relative;} #tempTimelineEmptyState .tl::before{ content:"";position:absolute;left:63px;top:40px;bottom:30px;width:2px; background:linear-gradient(180deg, var(--green) 0%, var(--blue) 15%, var(--cyan) 32%, var(--gold) 50%, var(--purple) 66%, var(--green) 78%, #55607a 90%, #3a4256 100%); opacity:.5;filter:drop-shadow(0 0 6px rgba(130,160,255,.35)); } #tempTimelineEmptyState .row{position:relative;display:flex;gap:12px;padding:10px 0;align-items:flex-start;} #tempTimelineEmptyState .row .orbcol{flex:0 0 128px;display:flex;flex-direction:column;align-items:center;gap:6px;} #tempTimelineEmptyState .row .side{flex:1;min-width:0;padding-top:8px;} #tempTimelineEmptyState .orb{position:relative;width:112px;height:112px;} #tempTimelineEmptyState .orb.sm{width:84px;height:84px;} #tempTimelineEmptyState .orb .core{ position:absolute;inset:11px;border-radius:50%;z-index:3; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; text-align:center;color:#eef4ff; } #tempTimelineEmptyState .orb .core .ic{font-size:24px;line-height:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.25));} #tempTimelineEmptyState .orb.sm .core .ic{font-size:17px;} #tempTimelineEmptyState .orb .core .nm{font-size:14px;font-weight:700;letter-spacing:.2px;max-width:94%;line-height:1.15;overflow-wrap:break-word;} #tempTimelineEmptyState .orb.sm .core .nm{font-size:12.5px;} #tempTimelineEmptyState .orb .core .sb{font-size:11.5px;color:rgba(225,236,255,.7);font-weight:500;} /* ── orbital ring ────────────────────────────────────────────── The band circles the planet instead of hovering over it: the far half (.rB) is painted BEHIND the core, the near half (.rF) crosses in FRONT of it, so the ring visibly passes around the sphere. .ring carries the static tilt of the orbital plane and the clip that picks its half; the inner carries the band and does the spinning — keeping the two separate is what stops the spin from dragging the clip around with it. */ /* .46 rather than the hero's flatter plane: the near half has to clear the stage label sitting on the planet's face */ #tempTimelineEmptyState .orb .ring{ position:absolute;inset:-22px;border-radius:50%;pointer-events:none; transform:rotate(-14deg) scaleY(.46); } #tempTimelineEmptyState .orb.sm .ring{inset:-17px;} #tempTimelineEmptyState .orb .ring.rB{z-index:2;clip-path:inset(0 0 50% 0);} #tempTimelineEmptyState .orb .ring.rF{z-index:4;clip-path:inset(50% 0 0 0);} #tempTimelineEmptyState .orb .ring .bd{position:absolute;border-radius:50%;animation:spin var(--sp,10s) linear infinite;} #tempTimelineEmptyState .orb .halo{position:absolute;inset:-16px;border-radius:50%;z-index:1;filter:blur(13px);opacity:.5;} #tempTimelineEmptyState .orb .num{ position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:6; width:17px;height:17px;border-radius:50%; background:color-mix(in srgb, var(--c) 80%, #000); border:1px solid color-mix(in srgb, var(--c) 60%, #fff); font-size:11px;font-weight:800;display:grid;place-items:center;color:#04101c; } #tempTimelineEmptyState .orb canvas.dust{position:absolute;inset:-26px;z-index:4;pointer-events:none;} /* ── PALETTES ──────────────────────────────────────────────────── --c lit side / ring / halo --c2 night side --auA/B/C the three aurora stops, as RGB TRIPLETS because the conic-gradient needs to fade its own hue out to alpha 0 and `transparent` would interpolate through transparent BLACK, which greys the wash instead of dissolving it. Every stage carries all five now. The aurora used to belong to the Documents orb alone; it is what makes that planet read as premium rather than as a coloured circle, so each stage gets its own — lead in the stage's own hue, then two neighbours for depth, so the ring has real hue travel instead of one colour at three opacities. Drawn only on the stage view's planet (see .dglance .orb): ten spinning blurred conics on the rail at once is exactly the compositing cost .hb-lowfx exists to claw back. */ #tempTimelineEmptyState .orb[data-c="green"]{--c:#3ee98c;--c2:#07301d;--auA:62,233,140;--auB:34,211,238;--auC:129,140,248;} #tempTimelineEmptyState .orb[data-c="blue"]{--c:#4aa9ff;--c2:#0a2249;--auA:74,169,255;--auB:129,140,248;--auC:34,211,238;} #tempTimelineEmptyState .orb[data-c="cyan"]{--c:#35d6e8;--c2:#062a33;--auA:53,214,232;--auB:129,140,248;--auC:62,233,140;} #tempTimelineEmptyState .orb[data-c="gold"]{--c:#f6b83f;--c2:#402a06;--auA:246,184,63;--auB:255,138,76;--auC:217,70,239;} #tempTimelineEmptyState .orb[data-c="purple"]{--c:#a56bff;--c2:#240d47;--auA:165,107,255;--auB:217,70,239;--auC:74,169,255;} #tempTimelineEmptyState .orb[data-c="green2"]{--c:#57e07f;--c2:#0a2f1b;--auA:87,224,127;--auB:34,211,238;--auC:246,184,63;} /* Dormant. Slate keeps a cool blue bias rather than going neutral grey — a true grey planet beside these reads as a rendering fault, not as a stage that has not started. Its aurora is suppressed further down. */ #tempTimelineEmptyState .orb[data-c="gray"]{--c:#9aa6bd;--c2:#161c2b;--auA:154,166,189;--auB:154,166,189;--auC:154,166,189;} /* Deal Room Menu accents as orb palettes. Deliberately NEW keys rather than retuning "cyan"/"gold" — those two are shared with the Created / Property / Financing orbs and the rail gradient, so editing them would drag unrelated rows along. */ #tempTimelineEmptyState .orb[data-c="parts"]{--c:#2ECC71;--c2:#07351e;--auA:46,204,113;--auB:34,211,238;--auC:129,140,248;} #tempTimelineEmptyState .orb[data-c="docs"]{--c:#22D3EE;--c2:#0a3b46;--auA:34,211,238;--auB:129,140,248;--auC:217,70,239;} /* Created — crimson gas giant. --c2 is a deep wine rather than a darkened --c so the night side goes plum instead of muddy brown, which is what sells the reference planet's depth. */ #tempTimelineEmptyState .orb[data-c="crimson"]{--c:#FF4D6D;--c2:#3D0716;--auA:255,77,109;--auB:217,70,239;--auC:246,184,63;} /* Offer & Negotiation — amber. User-managed stage; never reset by the payload loops (they exclude .row-offer), so this palette is the orb's one permanent colour. */ #tempTimelineEmptyState .orb[data-c="offer"]{--c:#F6A83F;--c2:#422305;--auA:246,168,63;--auB:255,120,80;--auC:217,70,239;} /* Appraisal — rose. Added late as a .row-extra stage, exactly like Offer above, and like Offer it had no palette of its own: it sat on data-c="gray" and STAGE_COLOR had no key for it, so the painter's `STAGE_COLOR[key] || orb.dataset.c` fallback wrote gray back over gray and the orb never changed colour — not even at Complete. Rose rather than another green/blue because this orb is bracketed by Inspections (#57e07f) and Closing (#35d6e8); gold was unavailable since tspPaintTimelineCards() reserves it for the "attention" state. */ #tempTimelineEmptyState .orb[data-c="appraisal"]{--c:#F472B6;--c2:#3C0A24;--auA:244,114,182;--auB:165,107,255;--auC:34,211,238;} /* ---- RENTAL TRACK ORBS ---- Four palettes chosen the same way Appraisal's was: each orb is bracketed by its neighbours on the rail, so no two adjacent rentals share a hue, and gold is left alone because tspPaintTimelineCards() reserves it for the "attention" state. Deliberately echoing the purchase track's own logic rather than inventing a second language: Tenant Qualification is the rental analogue of Participants-plus-Documents (violet, between the two), Lease is where Offer's amber duty falls (teal to separate it from Documents' cyan), Active Lease is the one stage that means "this is working" (emerald, like Deal Complete), and Purchase Transaction borrows Appraisal's rose family because it CONTAINS the appraisal. */ #tempTimelineEmptyState .orb[data-c="tenantq"]{--c:#818CF8;--c2:#1B1B4B;--auA:129,140,248;--auB:34,211,238;--auC:217,70,239;} #tempTimelineEmptyState .orb[data-c="lease"]{--c:#2DD4BF;--c2:#0A3A38;--auA:45,212,191;--auB:129,140,248;--auC:62,233,140;} #tempTimelineEmptyState .orb[data-c="activelease"]{--c:#34D399;--c2:#07341F;--auA:52,211,153;--auB:246,184,63;--auC:34,211,238;} #tempTimelineEmptyState .orb[data-c="purchasetx"]{--c:#E879F9;--c2:#3B0A42;--auA:232,121,249;--auB:165,107,255;--auC:244,114,182;} /* A row belonging to the OTHER track is removed from the rail entirely, not merely faded: the timeline draws a connecting line through its rows (.tl .row::after), and a hidden-but-present row would leave the rail running through a gap. display:none takes it out of layout so the line closes up. Driven by tempTimelineApplyTrack(). */ #tempTimelineEmptyState #p1 .tl .row.tl-offtrack{ display:none !important; } #tempTimelineEmptyState .orb .core{ background: radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--c) 40%, #fff 8%) 0%, transparent 32%), radial-gradient(circle at 62% 74%, var(--c2) 0%, #05080f 80%); border:1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow:inset 0 0 24px color-mix(in srgb, var(--c) 28%, transparent); } /* the band never goes fully transparent — a continuous ellipse is what makes it read as an orbit rather than a stray arc */ #tempTimelineEmptyState .orb .ring .bd.b1{ inset:0;--sp:10s; background:conic-gradient(from 0deg, color-mix(in srgb,var(--c) 30%, transparent) 0deg, var(--c) 35deg, color-mix(in srgb,var(--c) 45%, #fff) 62deg, var(--c) 95deg, color-mix(in srgb,var(--c) 26%, transparent) 155deg, color-mix(in srgb,var(--c) 32%, transparent) 195deg, var(--c) 245deg, color-mix(in srgb,var(--c) 55%, #fff) 268deg, color-mix(in srgb,var(--c) 30%, transparent) 330deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); filter:drop-shadow(0 0 7px var(--c)); } #tempTimelineEmptyState .orb .ring .bd.b2{ inset:11px;--sp:16s;animation-direction:reverse;opacity:.6; background:conic-gradient(from 120deg, color-mix(in srgb,var(--c) 22%, transparent), var(--c) 30%, color-mix(in srgb,var(--c) 22%, transparent) 58%, color-mix(in srgb,var(--c) 70%, #fff) 82%, color-mix(in srgb,var(--c) 22%, transparent)); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); filter:drop-shadow(0 0 4px var(--c)); } #tempTimelineEmptyState .orb .halo{background:radial-gradient(circle, var(--c) 0%, transparent 68%);} #tempTimelineEmptyState .orb[data-c="gray"] .ring{opacity:.45;} #tempTimelineEmptyState .orb[data-c="gray"] .ring .bd.b1{animation-duration:22s;filter:none;} #tempTimelineEmptyState .orb[data-c="gray"] .ring .bd.b2{display:none;} #tempTimelineEmptyState .orb[data-c="gray"] .halo{opacity:.14;} /* ══ DOCUMENTS & CUSTOM TASKS — the one oversized planet ══════════ Stage 5 is the only orb that has to answer two questions at once (how many files are in, how much is still open), so it is deliberately the largest body on the rail — ~18% over a standard stage — with a two-line name and a pill readout on its face where the other orbs carry a one-line caption. Only this orb: everything below is scoped to .docs-xl, and the shared .orb rules above are left alone. The rail measures orb rects rather than assuming a size, so the connector follows the bigger circle on its own. --c2 goes indigo (not a darkened cyan) so the night side reads blue-violet like the reference. */ #tempTimelineEmptyState .orb.docs-xl{width:132px;height:132px;--c2:#14205c;} #tempTimelineEmptyState .orb.docs-xl .core{inset:9px;gap:3px;} #tempTimelineEmptyState .orb.docs-xl .core .ic{font-size:28px;color:#b5efff;} /* The stacked-folder glyph is a FILLED shape, unlike the stroked outlines the rest of this set uses, so it needs its own contrast: a hard dark shadow underneath it (it sits on the planet's lit half) plus a cyan bloom to sell it as lit. */ #tempTimelineEmptyState .orb.docs-xl .core .ic svg{ fill:currentColor;stroke:none; filter:drop-shadow(0 1px 2px rgba(2,6,20,.9)) drop-shadow(0 0 8px rgba(34,211,238,.7)); } #tempTimelineEmptyState .orb.docs-xl .core .nm{ font-size:13.5px;line-height:1.18;letter-spacing:.2px;max-width:100%; } /* a block span, never
: styles.css hides every
under 991px, which would silently collapse this back to one long line on phones */ #tempTimelineEmptyState .orb.docs-xl .core .nm .l2{display:block;} #tempTimelineEmptyState .orb.docs-xl .core .sb{display:none;} #tempTimelineEmptyState .orb.docs-xl .halo{inset:-17px;opacity:.55;} /* the readout itself — files | open, painted by paintDocsOrbStats() */ /* Width is the constraint, not height: the pill sits BELOW the orb's centre, where the circle has already narrowed, so the padding and gap are tuned to keep both ends inside the limb rather than crossing it. Widen either and the readout starts poking out of the planet. */ #tempTimelineEmptyState .orb.docs-xl .dstats{ display:inline-flex;align-items:center;gap:7px;margin-top:2px; padding:3px 8px;border-radius:11px; background:rgba(3,9,24,.72); border:1.5px solid rgba(103,232,249,.72); box-shadow:0 0 12px rgba(34,211,238,.28), inset 0 1px 0 rgba(255,255,255,.07); } #tempTimelineEmptyState .orb.docs-xl .dstat{display:inline-flex;align-items:center;gap:4px;} #tempTimelineEmptyState .orb.docs-xl .dstat .di{ display:inline-flex;width:12px;height:12px;flex:0 0 auto;color:#67e8f9; filter:drop-shadow(0 0 4px rgba(34,211,238,.55)); } #tempTimelineEmptyState .orb.docs-xl .dstat .di svg{ width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;display:block; } #tempTimelineEmptyState .orb.docs-xl .dv{display:flex;flex-direction:column;align-items:center;line-height:1;} #tempTimelineEmptyState .orb.docs-xl .dv b{ font-size:14px;font-weight:800;color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); } /* lower case, not the uppercase micro-caps the rest of this board uses — the reference reads "files" / "open" as plain words */ #tempTimelineEmptyState .orb.docs-xl .dv em{ font-style:normal;font-size:7px;font-weight:700;letter-spacing:.01em; text-transform:none;color:#67e8f9;margin-top:1px; } /* The stage number is the planet's marker, so it scales with it and clears the limb instead of sitting on it. Lifted onto the rail that already runs into this row — that stroke becomes the connector the reference draws. */ #tempTimelineEmptyState .orb.docs-xl .num{ top:-18px;width:24px;height:24px;font-size:14px; background:radial-gradient(circle at 50% 34%, #10345c 0%, #04101f 100%); border:2px solid #22d3ee;color:#d7f7ff; box-shadow:0 0 13px rgba(34,211,238,.55), inset 0 0 8px rgba(34,211,238,.3); } #tempTimelineEmptyState .orb.docs-xl .dsep{ width:1.5px;height:16px;border-radius:1px;background:rgba(103,232,249,.5); } /* open tasks take the amber this timeline already uses for "needs doing" */ #tempTimelineEmptyState .orb.docs-xl .dstat.op .di{ color:#FFC53D;filter:drop-shadow(0 0 4px rgba(246,184,63,.6)); } #tempTimelineEmptyState .orb.docs-xl .dstat.op .dv em{color:#FFC53D;} /* A pending stage greys the whole orb (the payload loop sets data-c="gray"). The readout's cyan and amber are literal here, not --c, so each one is restated in slate — otherwise a dormant planet still glows through its own pill. */ #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dstats{ border-color:rgba(154,166,189,.45);box-shadow:none; } #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dstat .di, #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dstat .dv em, #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dstat.op .di, #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dstat.op .dv em{ color:#9aa6bd;filter:none; } #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .dsep{background:rgba(154,166,189,.4);} #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .core .ic{color:#aeb9cc;} #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .core .ic svg{filter:none;} #tempTimelineEmptyState .orb.docs-xl[data-c="gray"] .num{ background:radial-gradient(circle at 50% 34%, #222a3b 0%, #0d1220 100%); border-color:#6e7a91;color:#c3ccdd;box-shadow:none; } /* ── the light this planet throws OUTSIDE its limb ──────────────── The shared .halo is a static blurred disc that stops at the edge. On the one orb that carries live numbers that is too quiet: a counter can change while the viewer is reading another part of the board, and nothing on the rail moves to say so. Two layers, both OUTSIDE the body and both behind it (z-index:0, under .halo's 1), so neither touches the face or the readout: ::before a colour wheel — cyan → indigo → magenta — turning once every 18s. Blurred hard enough that what reads is a slowly drifting wash, not a spinning edge. ::after a breathing bloom, the "alive" pulse. The wheel is a conic gradient on a rotating element rather than an animated background, so it composites on the GPU and costs nothing per frame. Both are pointer-events:none — this is light, and it extends past the orb's own hit box. The palette is state-driven, which is the point of the whole thing: cyan while the stage is merely active, amber-magenta the moment a task is actually open (.has-open, set by dpPaint), so "something needs you" is legible from across the board without reading a single number. */ #tempTimelineEmptyState .orb.docs-xl{ --auA:34,211,238; /* lead — cyan */ --auB:129,140,248; /* middle — indigo */ --auC:217,70,239; /* trail — magenta */ } #tempTimelineEmptyState .orb.docs-xl::before{ content:'';position:absolute;inset:-30px;border-radius:50%; z-index:0;pointer-events:none; background:conic-gradient(from 0deg, rgba(var(--auA),0) 0deg, rgba(var(--auA),.46) 58deg, rgba(var(--auB),.44) 132deg, rgba(var(--auC),.40) 208deg, rgba(var(--auA),.34) 288deg, rgba(var(--auA),0) 360deg); filter:blur(19px);opacity:.72; animation:dpAuroraSpin 18s linear infinite; } #tempTimelineEmptyState .orb.docs-xl::after{ content:'';position:absolute;inset:-12px;border-radius:50%; z-index:0;pointer-events:none; background:radial-gradient(circle, rgba(var(--auA),.30) 0%, rgba(var(--auB),.19) 46%, transparent 72%); filter:blur(12px); animation:dpAuroraBreathe 4.8s ease-in-out infinite; } @keyframes dpAuroraSpin{ to{ transform:rotate(360deg); } } @keyframes dpAuroraBreathe{ 0%,100%{ transform:scale(1); opacity:.5; } 50% { transform:scale(1.10); opacity:.95; } } /* something is open — the wash warms and speeds up. Amber leads because that is this timeline's "needs doing" colour everywhere else (the .op half of the readout, .chip.gd, the AI callouts). */ #tempTimelineEmptyState .orb.docs-xl.has-open{ --auA:246,184,63; --auB:217,70,239; --auC:34,211,238; } #tempTimelineEmptyState .orb.docs-xl.has-open::before{ animation-duration:11s;opacity:.85; } #tempTimelineEmptyState .orb.docs-xl.has-open::after{ animation-duration:2.9s; } /* a count actually changed — one extra ring expands off the limb and fades, so the change is visible even on a stage already glowing */ #tempTimelineEmptyState .orb.docs-xl.has-new .halo{ animation:dpHaloPing 2.4s ease-out infinite; } @keyframes dpHaloPing{ 0% { transform:scale(.94); opacity:.45; } 55% { transform:scale(1.17); opacity:.85; } 100%{ transform:scale(1.3); opacity:.30; } } /* A dormant stage throws no light. The pseudo-elements are dropped rather than dimmed — a blurred 30px ring at low opacity still lifts the row's background out of black. */ #tempTimelineEmptyState .orb.docs-xl[data-c="gray"]::before, #tempTimelineEmptyState .orb.docs-xl[data-c="gray"]::after{display:none;} @media (prefers-reduced-motion:reduce){ #tempTimelineEmptyState .orb.docs-xl::before, #tempTimelineEmptyState .orb.docs-xl::after, #tempTimelineEmptyState .orb.docs-xl.has-new .halo{animation:none;} } /* ══ DOCUMENTS & CUSTOM TASKS — the panel beside the planet ════════ Two counters that move for different reasons: files only ever go up, open tasks go both ways. So they get one card each rather than a shared row, and each card owns its own accent — cyan for the archive, magenta for the thing that wants you. Everything that signals CHANGE (.is-bump, the badges, the arrows, the tick on the number) is applied by dpPaint and removed by it again when the change goes stale. Nothing here is decorative-only: if a badge is on screen, a number moved. */ #tempTimelineEmptyState .dpanel{ background:linear-gradient(180deg, rgba(13,21,37,.92), rgba(9,15,28,.94)); border:1px solid rgba(103,232,249,.20); border-radius:15px;padding:12px 13px 11px; box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .3s ease, box-shadow .3s ease; } #tempTimelineEmptyState .dpanel.is-new{ border-color:rgba(103,232,249,.46); box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 24px rgba(34,211,238,.17), inset 0 1px 0 rgba(255,255,255,.05); } #tempTimelineEmptyState .dp-head{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;} #tempTimelineEmptyState .dp-hic{ display:inline-flex;width:17px;height:17px;flex:0 0 auto;color:#67e8f9;margin-top:2px; filter:drop-shadow(0 0 6px rgba(34,211,238,.5)); } /* folder-stack is the one FILLED glyph in the set (see the IC table) */ #tempTimelineEmptyState .dp-hic svg{width:100%;height:100%;fill:currentColor;stroke:none;display:block;} #tempTimelineEmptyState .dp-ht{flex:1;min-width:148px;} #tempTimelineEmptyState .dp-ht b{display:block;font-size:15px;font-weight:800;color:#eaf3ff;letter-spacing:.2px;} #tempTimelineEmptyState .dp-hsub{display:block;font-size:12.5px;color:#8b96ac;margin-top:2px;line-height:1.35;} #tempTimelineEmptyState .dp-live{ display:inline-flex;align-items:center;gap:5px;flex:0 0 auto; font-size:11.5px;font-weight:700;color:#7fe6b4;white-space:nowrap; background:rgba(62,233,140,.10);border:1px solid rgba(62,233,140,.34); border-radius:999px;padding:3px 8px; } #tempTimelineEmptyState .dp-live b{color:#c6f8dc;font-weight:800;margin-left:3px;} #tempTimelineEmptyState .dp-live i{ width:6px;height:6px;border-radius:50%;background:#3ee98c;flex:0 0 auto; box-shadow:0 0 7px rgba(62,233,140,.85);animation:dpBlink 2.1s ease-in-out infinite; } @keyframes dpBlink{0%,100%{opacity:1;}50%{opacity:.26;}} /* the "something landed" banner */ #tempTimelineEmptyState .dp-new{ display:flex;align-items:center;gap:9px;margin-top:10px; padding:8px 10px;border-radius:11px; background:linear-gradient(180deg, rgba(62,233,140,.13), rgba(62,233,140,.05)); border:1px solid rgba(62,233,140,.38); box-shadow:0 0 16px rgba(62,233,140,.13); animation:dpRise .34s ease both; } @keyframes dpRise{from{opacity:0;transform:translateY(-5px);}to{opacity:1;transform:none;}} #tempTimelineEmptyState .dp-newic{display:inline-flex;width:17px;height:17px;flex:0 0 auto;color:#3ee98c;} #tempTimelineEmptyState .dp-newic svg{ width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;display:block; } #tempTimelineEmptyState .dp-newtx{flex:1;min-width:0;} #tempTimelineEmptyState .dp-newtx b{display:block;font-size:13.5px;font-weight:800;color:#d8fbe8;} #tempTimelineEmptyState .dp-newtx span{display:block;font-size:12px;color:#8fb3a2;margin-top:1px;} #tempTimelineEmptyState .dp-newbtn{ flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;cursor:pointer; background:#0b1a16;border:1px solid rgba(62,233,140,.5);border-radius:9px; padding:5px 9px;font-size:12px;font-weight:700;color:#bdf5d6; transition:background .18s ease,border-color .18s ease; } #tempTimelineEmptyState .dp-newbtn:hover{background:#0f241d;border-color:rgba(62,233,140,.85);} #tempTimelineEmptyState .dp-newbtn i{font-size:10px;} /* the two counters */ /* auto-fit, not `1fr 1fr`: the thing that squeezes these cards is the TIMELINE COLUMN, which narrows independently of the viewport, so a width media query is measuring the wrong box. auto-fit drops to one column when two no longer fit whatever width this panel actually has. */ #tempTimelineEmptyState .dp-grid{ display:grid;grid-template-columns:repeat(auto-fit, minmax(124px, 1fr)); gap:9px;margin-top:10px; } #tempTimelineEmptyState .dp-card{ --dpA:#22D3EE; --dpAR:34,211,238; position:relative;overflow:hidden;border-radius:12px;padding:9px 10px 8px; background:linear-gradient(180deg, rgba(var(--dpAR),.11) 0%, rgba(6,12,24,.86) 62%); border:1px solid rgba(var(--dpAR),.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .25s ease, box-shadow .25s ease; } /* Custom Tasks takes magenta, not the amber the rest of the board uses for "needs doing": amber is already the ATTENTION tone inside this card (the badge, the arrow), and a card whose frame and whose alert are the same colour has no alert. */ #tempTimelineEmptyState .dp-card.dp-task{--dpA:#E879F9; --dpAR:232,121,249;} #tempTimelineEmptyState .dp-card.is-bump{ border-color:rgba(var(--dpAR),.75); box-shadow:0 0 20px rgba(var(--dpAR),.30), inset 0 1px 0 rgba(255,255,255,.07); } /* a light crosses the card that changed — the sweep points AT the counter rather than decorating the panel as a whole */ #tempTimelineEmptyState .dp-card.is-bump::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg, transparent 36%, rgba(var(--dpAR),.20) 50%, transparent 64%); animation:dpSweep 2.1s ease-in-out infinite; } @keyframes dpSweep{0%{transform:translateX(-125%);}60%,100%{transform:translateX(125%);}} #tempTimelineEmptyState .dp-ct{ display:flex;align-items:center;justify-content:space-between;gap:6px; font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9fb0c9; } #tempTimelineEmptyState .dp-ci{ display:inline-flex;width:13px;height:13px;flex:0 0 auto;color:var(--dpA); filter:drop-shadow(0 0 5px rgba(var(--dpAR),.5)); } #tempTimelineEmptyState .dp-ci svg, #tempTimelineEmptyState .dp-ri svg{ width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;display:block; } #tempTimelineEmptyState .dp-cv{display:flex;align-items:center;gap:7px;margin-top:3px;} #tempTimelineEmptyState .dp-cv b{ font-size:27px;font-weight:800;line-height:1;color:#fff; text-shadow:0 2px 10px rgba(var(--dpAR),.35); } /* the number flips when it changes — a counter that redraws silently is exactly the update this panel exists to stop people missing */ #tempTimelineEmptyState .dp-cv b.tick{animation:dpTick .5s ease;} @keyframes dpTick{ 0% {transform:translateY(8px) scale(.84);opacity:0;} 62% {transform:none;opacity:1;} 100%{transform:none;} } /* The arrow only ever means "this went UP" — dpDelta shows it solely for a positive delta and hides it otherwise, so there is no down-state to style and no direction class to toggle. */ #tempTimelineEmptyState .dp-arrow{ width:0;height:0;flex:0 0 auto; border-left:6px solid transparent;border-right:6px solid transparent; border-bottom:9px solid #3ee98c; filter:drop-shadow(0 0 5px rgba(62,233,140,.6)); animation:dpArrow 1.5s ease-in-out infinite; } /* more open tasks is not good news, so that arrow is red where the documents one is green — direction and sentiment are two axes */ #tempTimelineEmptyState .dp-card.dp-task .dp-arrow{ border-bottom-color:#ff5f6d;filter:drop-shadow(0 0 5px rgba(255,95,109,.6)); } @keyframes dpArrow{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}} #tempTimelineEmptyState .dp-cl{font-size:12px;color:#8b96ac;margin-top:2px;} #tempTimelineEmptyState .dp-cd{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap;} #tempTimelineEmptyState .dp-badge{ display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.03em; padding:2.5px 7px;border-radius:999px; background:rgba(62,233,140,.14);border:1px solid rgba(62,233,140,.55);color:#bdf5d6; animation:dpPulseGr 1.9s ease-in-out infinite; } #tempTimelineEmptyState .dp-badge.dp-rd{ background:rgba(255,95,109,.14);border-color:rgba(255,95,109,.6);color:#ffc9cd; animation-name:dpPulseRd; } @keyframes dpPulseGr{0%,100%{box-shadow:0 0 0 0 rgba(62,233,140,0);}50%{box-shadow:0 0 11px 0 rgba(62,233,140,.6);}} @keyframes dpPulseRd{0%,100%{box-shadow:0 0 0 0 rgba(255,95,109,0);}50%{box-shadow:0 0 11px 0 rgba(255,95,109,.6);}} #tempTimelineEmptyState .dp-cd em{font-style:normal;font-size:11.5px;color:#8b96ac;} #tempTimelineEmptyState .dp-clink{ display:inline-flex;align-items:center;gap:5px;cursor:pointer;margin-top:7px; background:transparent;border:0;padding:0;font-size:12.5px;font-weight:700;color:var(--dpA); } #tempTimelineEmptyState .dp-clink:hover{text-decoration:underline;} #tempTimelineEmptyState .dp-clink i{font-size:11px;transition:transform .18s ease;} #tempTimelineEmptyState .dp-clink:hover i{transform:translateX(3px);} /* what a Custom Task actually is — asked often enough in the pilot rooms that it belongs on the surface, not behind a tooltip */ #tempTimelineEmptyState .dp-note{ display:flex;gap:7px;align-items:flex-start;margin-top:9px; padding:7px 9px;border-radius:10px; background:rgba(246,184,63,.07);border:1px solid rgba(246,184,63,.26); font-size:12px;line-height:1.4;color:#c2b18d; } #tempTimelineEmptyState .dp-note i{color:#f6b83f;font-size:12px;margin-top:2px;flex:0 0 auto;} #tempTimelineEmptyState .dp-note b{color:#ffe6ae;} /* the change list — REAL log rows only (see dpRecent) */ #tempTimelineEmptyState .dp-recent{margin-top:9px;border-top:1px solid rgba(255,255,255,.07);padding-top:8px;} #tempTimelineEmptyState .dp-rh{ font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:#7d8798;margin-bottom:5px; } #tempTimelineEmptyState .dp-r{ display:flex;align-items:center;gap:7px;padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.055); } #tempTimelineEmptyState .dp-r:last-child{border-bottom:0;} #tempTimelineEmptyState .dp-ri{display:inline-flex;width:13px;height:13px;flex:0 0 auto;color:#67e8f9;} #tempTimelineEmptyState .dp-r.tk .dp-ri{color:#e879f9;} #tempTimelineEmptyState .dp-rt{flex:1;min-width:0;} #tempTimelineEmptyState .dp-rt b{ display:block;font-size:12.5px;font-weight:700;color:#dbe6f7; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #tempTimelineEmptyState .dp-rt span{ display:block;font-size:11.5px;color:#8b96ac; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #tempTimelineEmptyState .dp-rn{ flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em; padding:1.5px 5px;border-radius:4px; background:rgba(62,233,140,.16);border:1px solid rgba(62,233,140,.5);color:#bdf5d6; } #tempTimelineEmptyState .dp-rm{flex:0 0 auto;font-size:11px;color:#7d8798;white-space:nowrap;} /* the counters stack before they squash: two 27px numbers plus their captions do not survive a half-width card */ @media (max-width:560px){ #tempTimelineEmptyState .dp-live{margin-top:2px;} } @media (prefers-reduced-motion:reduce){ #tempTimelineEmptyState .dp-live i, #tempTimelineEmptyState .dp-badge, #tempTimelineEmptyState .dp-arrow, #tempTimelineEmptyState .dp-card.is-bump::after, #tempTimelineEmptyState .dp-cv b.tick, #tempTimelineEmptyState .dp-new{animation:none;} } /* ══ STAGE WALKTHROUGH VIDEO ══════════════════════════════════════ One clip per stage, sitting at the BOTTOM of that stage's card — full width, below the detail text, so nothing above it moves. Two states, and the difference between them is the point: · a stage with a file gets a real play button and a duration; · a stage without one gets neither. It paints itself in the stage's own accent and says so, rather than showing a play control that does nothing. Everything is driven off --sv, the stage's planet colour, set inline by stageVideoHTML(). */ #tempTimelineEmptyState .stvid{ --sv:#4aa9ff; margin-top:10px;border-radius:11px;overflow:hidden; border:1px solid color-mix(in srgb, var(--sv) 32%, transparent); box-shadow:0 6px 18px rgba(0,0,0,.38); } /* 16/9 because the clips ARE 16/9 (1280x720). The poster and the