/* Evolve Shell — tokens + components. Sections appended per task. */ /* ============ Evolve Shell tokens ============ */ .evsh-root { --evsh-white: #ffffff; --evsh-neutral-1: #00202f; /* primary text */ --evsh-neutral-2: #666666; /* secondary text */ --evsh-neutral-3: #b2b2b2; /* Figma `neutral/neutral 3` — control borders, outline stroke */ --evsh-neutral-4: #d9d9d9; /* Figma `neutral/neutral 4` — input field border */ --evsh-neutral-5: #ebebeb; /* Figma `neutral/neutral 5` — disabled input fill (#500) */ --evsh-neutral-blue-1: #7a8d97; /* Figma `netural blue/neutral blue 1` — disabled nav label (D32) */ --evsh-neutral-blue-2: #a2b0b7; /* Figma `netural blue/neutral blue 2` */ --evsh-neutral-blue-3: #dbddde; /* Figma `netural blue/neutral blue 3` — menu divider */ --evsh-neutral-blue-4: #f1f5f8; /* hover fill */ /* pass-3 #59 — the member chip's fill, Figma `4:3885`. Purpose-named, not a palette entry: Figma builds it from rgba(255,255,255,0.75) over rgb(41,161,240) and gives it no token. */ --evsh-tokenfield-token-bg: #cae8fb; --evsh-neutral-blue-5: #f6f9fa; /* sidebar bg */ --evsh-bg-light-blue: #e8eef3; /* app canvas bg */ --evsh-bg-light-purple: #efe6f2; /* Figma `background/light-purple` — personal workspace mark (D31) */ --evsh-blue-0: #196ba0; /* active text / links */ --evsh-blue-1: #1e7fbd; /* Figma `blue/blue 1` — Accent button fill, focused input border */ --evsh-blue-2: #2b89c5; /* Figma `blue/blue 2` — Accent-button hover, progress rail, checked checkbox. ⛔ NOT the credits bar, despite the comment it carried until #498 said so: the bar is `blue/blue 4` below. Two blues, and the wrong one was named. */ --evsh-blue-4: #7cc4f2; /* credits usage-bar fill (#498). VALUE measured on component 1:1020, in file 3gwifp9Rkgj4R7FiQ8ac2l — ⛔ those ids are DEAD in the screens file fYvRupTfIiOEBXYGOcvZZZ, which is how the ticket first talked itself into "the design is silent" about two of the three bands. The `-4` follows the Suite app's pre-existing `--color-blue-4`, byte-identical and already painting the Members usage bar and the sign-up progress bar; the ramp position is inherited from that, not re-read here. */ --evsh-green-1: #54a966; /* Figma `green/green 1` — SupportDialog's success check. NOT a substitute for --evsh-green-3 (#5fc575): different colour. */ --evsh-green-3: #5fc575; /* Figma `green/green 3` */ /* Figma `gold/gold 2` — EDGE's brand fill for its rail Icon Container. Measured over REST 2026-09-21 on the placed instance `I695:45206;1:198;1:189` ("App: Edge") in the Nav Bar `695:45206`, file `fYvRupTfIiOEBXYGOcvZZZ`. ⛔ NOT `--evsh-gold` below. That one is #edb835, the credits usage-bar band, and its own comment already warns it is neither `gold/gold 1` nor `gold/gold 2`. Reusing it would paint Edge a colour Figma never gives it — the same class of mistake as painting it Coach blue. */ --evsh-gold-2: #d4a83a; --evsh-gold: #edb835; /* credits usage-bar gold band, measured on component 1:1020 (#498). VERIFIED — the old "verify vs DS gold1" TODO is answered: it held #c19528, which is `gold/gold 1` (the Suite's `--color-gold-1`), and the bar draws neither that nor `gold/gold 2`. */ --evsh-red: #c5273a; /* credits usage-bar red band. VERIFIED TWICE and left alone: component 1:1020 draws the red band #C5273A (#498), and frame 4:9416 fills the destructive confirm button the same. The "verify vs DS red2" TODO is answered — this was the one band of three that already matched. */ --evsh-red-1: #b12031; /* Figma `red/red 1` — inline error text */ --evsh-red-3: #d45463; /* Figma `red/red 3` — input field error border */ --evsh-red-4: #f0aeb6; /* Figma `red/red 4` — risky menu-item tint (spec MSxs1dktxb) */ --evsh-purple-2: #b878e2; --evsh-logo-ink: #090b0f; /* the mobile Tool Bar logo's outline and product name (#627, Coach `I2827:20202;152:1754`) — no named Figma variable */ --evsh-switch-off: var(--evsh-neutral-blue-2); /* Figma `netural blue/neutral blue 2` */ --evsh-switch-on: var(--evsh-green-3); /* Figma `green/green 3` */ --evsh-benefit-check: #89cf98; /* Credits Detailed benefit-line check circle (wiki 3XDQoF0G2E, Figma 1:720/1:769) */ --evsh-toast-border: #a2b0b7; /* Toast pill border, success/undoable (FND-008 #575) — value-duplicate of --evsh-neutral-blue-2, minted as its own semantic token so the toast surface isn't coupled to an unrelated nav-palette token */ --evsh-toast-border-error: #d68b94; /* Toast pill border, error variant (FND-008 #575) */ --evsh-toast-border-warning: #c9b585; /* Toast pill border, warning variant (#1024, Figma 343:4010) — #977114 at 48% white, the error token's method */ --evsh-toast-green-4: #89cf98; /* Toast success pill background base (FND-008 #575) — value-duplicate of --evsh-benefit-check, minted as its own semantic token for the same reason as --evsh-toast-border */ --evsh-shadow-med: 0 4px 12px rgba(0, 32, 47, 0.13); --evsh-shadow-nav-active: 0 4px 6px rgba(0, 32, 47, 0.13); /* D30 — Figma drop-shadow on the active nav item: blur 6, NOT --evsh-shadow-med's 12 */ --evsh-radius-item: 14px; /* sidebar item pill — DESIGN.md "off-scale" 14px */ --evsh-radius-card: 12px; /* Skeleton shimmer sweep (evolve-suite, owner ask 2026-09-11). UNMEASURED — Figma has no shimmer/loading motion anywhere in fYvRupTfIiOEBXYGOcvZZZ (see the shimmer section below), so there is no prototype to read a duration or sweep width from. Picked to read as a calm, continuous sweep rather than a flashing one — slow enough not to be distracting on a load that can take seconds, fast enough that the row still visibly reads as "busy". One constant drives both `background-size` (how wide the gradient canvas is) and the `background-position` travel distance in the keyframes below, which are the same number in this technique. */ --evsh-skeleton-shimmer-duration: 1.6s; --evsh-skeleton-shimmer-band: 200%; --evsh-font: 'Lato', system-ui, -apple-system, sans-serif; font-family: var(--evsh-font); color: var(--evsh-neutral-1); } /* type scale (Figma: subtitle-1 16/24 600 · subtitle-2 15/20 700 · body-2 15/20 500 · body-3 14/18 500 · subtitle-4 12/18 900) */ /* subtitle-1 carries a 640px arm in Coach's own utility (14/20). It is deliberately NOT ported: this file has exactly one @media rule in 1600+ lines and no responsive typography anywhere, so porting it would make subtitle-1 the only responsive entry in the scale. Revisit when the Suite defines mobile type generally. */ /* Figma `heading/heading-3` — Lato Black. ADDED for the Detailed credits card's title (#account billing), which named `.evsh-subtitle-2` and so shipped 15/20/700 where Figma declares 18/24/900. */ /* `margin: 0` on every type-scale class (evolve-suite#1019). Each heading and paragraph the shell renders carries one of these classes (or a component class that zeroes its own margin — the accordion heading, the create-workspace intro). The Suite and Coach load a Tailwind preflight that zeroes block margins, so the shell was designed against margin 0 without owning it; Edge has no reset, and the UA `h2` default (0.83em = 13.28px) made the SupportDialog 27px taller there. Owned HERE, on the class the element carries, not as a `.evsh-root h2` descendant rule: `evsh-root` also wraps host content in Popover/Tooltip/Menu/Accordion slots, and an unlayered descendant reset would silently beat the host's margin utilities on that content. */ .evsh-heading-3 { font-size: 18px; line-height: 24px; font-weight: 900; margin: 0; } .evsh-subtitle-1 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; } .evsh-subtitle-2 { font-size: 15px; line-height: 20px; font-weight: 700; margin: 0; } /* Figma `subtitle/subtitle-3` — Lato SemiBold. ADDED for the credits card's "Add credits to:" label, which borrowed `.evsh-body-2` (15/20/500) against a declared 14/18/600. Same reason `.evsh-body-1` above exists: a scale step the system was missing, not a one-screen value. */ .evsh-subtitle-3 { font-size: 14px; line-height: 18px; font-weight: 600; margin: 0; } /* Figma `body/body-1` — Lato Regular. ADDED for the create-workspace step label (pass-1 #21), which had no scale step to name and borrowed `.evsh-body-2`/`.evsh-body-3` instead: a different size, leading AND weight. It is a scale step the design system was missing, not a value local to one screen, so it belongs here rather than inline in the app. */ .evsh-body-1 { font-size: 15px; line-height: 26px; font-weight: 400; margin: 0; } .evsh-body-2 { font-size: 15px; line-height: 20px; font-weight: 500; margin: 0; } .evsh-body-3 { font-size: 14px; line-height: 18px; font-weight: 500; margin: 0; } .evsh-body-4 { font-size: 12px; line-height: 18px; font-weight: 500; margin: 0; } .evsh-subtitle-4 { font-size: 12px; line-height: 18px; font-weight: 900; margin: 0; } /* ============ User Avatar (wiki: User Avatar / User Color) ============ */ .evsh-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; /* circle at all sizes, per User Avatar spec */ color: var(--evsh-white); font-family: var(--evsh-font); /* font-size and font-weight are NOT declared here — both vary per size (Figma 113:61: 20/28/30 are Bold 700, 32 is Semi Bold 600) and are set inline per instance by UserAvatar. A single hardcoded font-weight: 700 here previously forced every size to Bold, which was wrong for 32. */ } /* ==== CreditsSection (wiki: Credits Billing Section — Compact variant) ==== */ .evsh-credits { width: 232px; /* sits in the 264px sidebar with 16px side padding on each side */ background: var(--evsh-white); /* D33 radius 16 (not --evsh-radius-card's 12). D34: NO shadow — on the #f6f9fa sidebar the design is a deliberately flat white card. D35: no padding-bottom, because the Add credits button below supplies its own (D46) and is separated by a hairline (D45); the three are one change. D36: 12px between sections. */ border-radius: 16px; padding: 10px 16px 0; display: flex; flex-direction: column; gap: 12px; } .evsh-credits-summary { display: flex; flex-direction: column; gap: 8px; width: 100%; background: none; border: none; padding: 0 0 16px; /* D36: Usage Info carries pb-16 */ margin: 0; font: inherit; color: inherit; text-align: left; } button.evsh-credits-summary { cursor: pointer; } /* ">" affordance row — only the clickable (canManage) variant has this; the read-only summary is a single line, no row wrapper needed. */ .evsh-credits-summary-row { display: flex; align-items: center; /* D40: no space-between — the text takes the slack (flex-1 below) and the icon simply trails it, at a 4px gap. */ gap: 4px; width: 100%; } /* D38: Figma styles the line as runs, not one uniform block — the leading count in Bold 15/20 #00202f, the remainder in Medium 14/18 #666. The wrapper carries the #666 so only the count needs to restate a colour. Type comes from the existing scale classes. */ .evsh-credits-line { flex: 1 1 0; min-width: 0; color: var(--evsh-neutral-2); } .evsh-credits-count { color: var(--evsh-neutral-1); } .evsh-credits-chevron { flex-shrink: 0; display: flex; color: var(--evsh-neutral-2); } /* Two segments (filled + remainder) in a flex row with a 4px gap between them — Figma component 1:1020 models both the Compact and Detailed bars this way (fill ends, THEN a 4px gap, THEN the remainder starts), not a single fill overlaying a track background. The filled/remainder segments are each rendered only when non-zero (see CreditsBar in credits-section.tsx), so the gap collapses for free at 0%/100% — `gap` only inserts space BETWEEN children that exist. */ .evsh-credits-bar { display: flex; width: 100%; height: 6px; /* D41. Detailed restates 8px via --lg, so this value is Compact's alone. */ gap: 4px; } /* D42/D43 — r16 and the #E8EEF3 remainder live on the SHARED rules, reaching both variants. They used to hang off `.evsh-credits`, scoped to the Compact card on purpose because only Compact had been measured (R-N12). That scope was silently dead for the billing page: `credits-section.tsx` renders Detailed as `evsh-credits-detailed`, a DIFFERENT CLASS and not a modifier on `evsh-credits`, so the Detailed bar fell through to 2px corners and a #f1f5f8 remainder. #498 measured the Detailed instance on component 1:1020 and it wants the same two values, so the scope comes off rather than being duplicated — one rule, one value, no drift. */ .evsh-credits-bar-fill { display: block; height: 100%; border-radius: 16px; } .evsh-credits-bar-remainder { display: block; height: 100%; border-radius: 16px; background: var(--evsh-bg-light-blue); /* unfilled track colour — #E8EEF3 in all three bands */ } .evsh-credits-bar-fill--blue { background: var(--evsh-blue-4); } .evsh-credits-bar-fill--gold { background: var(--evsh-gold); } .evsh-credits-bar-fill--red { background: var(--evsh-red); } .evsh-credits-add { display: block; width: 100%; background: none; border: none; /* D45/D46: the button carries the card's missing bottom padding and is separated from the usage block by a hairline — the other half of D35. D44: Figma's label is Bold; .evsh-body-2 supplies the 15/20 but its 500 weight is wrong here. */ border-top: 0.5px solid var(--evsh-neutral-blue-3); padding: 8px 12px 12px; font-weight: 700; color: var(--evsh-blue-0); cursor: pointer; text-align: center; } /* ==== CreditsSection Detailed variant (wiki: Credits Billing Section — Detailed, FND-009 #577) ==== 764px fixed width — all four Detailed frames in Figma (1:720, 1:867, 1:769, 1:818) are consistently 764 wide, the same pattern as Compact's fixed 232px sidebar card above. max-width: 100% clamps it inside a narrower container instead of overflowing (same fixed-width-plus-clamp pattern as .evsh-legal-dialog-card). */ .evsh-credits-detailed { width: 764px; max-width: 100%; /* Figma keeps the 18/20 padding INSIDE the 764 — instance `22:42104` is 764 wide and its Header frame is 728 = 764 - 2*18 (re-measured 2026-09-21; the component id `588:41875` this once cited is dead in all four estate files, #961) — so the box must include the padding. ⛔ CORRECTION. This comment used to end "or the card renders 36px wide", stating a failure mode that CANNOT REPRODUCE IN EITHER APP. Both `apps/suite` and Coach's frontend `@import 'tailwindcss'`, and Tailwind v4's preflight (`preflight.css:7-16`, measured on the pinned 4.3.3) already declares `box-sizing: border-box` on `*, ::after, ::before, ::backdrop, ::file-selector-button`. So the content-box overflow never happens there, and anyone who "verifies" the 36px will find nothing and may then delete this line as dead. ⭐ IT IS STILL RIGHT TO DECLARE, for the same reason `.evsh-root` restates its own tokens: this package ships its stylesheet to consumers that may carry no global reset, and that is a real audience rather than a hypothetical one — `.evsh-shell-main` (:362) and `.evsh-sidebar` (:516) already declare it for themselves on exactly that reasoning. What changed is the PROVENANCE, not the value: kept as defence-in-depth for a consumer without preflight, not because a measured overflow was observed in this repo. (Caught by `billing-page-dev`, who grepped the built bundle rather than taking the comment at its word.) */ box-sizing: border-box; display: flex; flex-direction: column; /* THE CARD'S OWN itemSpacing, 20. The balance/bar/limits trio sits 12px apart inside `.evsh-credits-detailed-usage-info`, which is a SEPARATE frame in Figma (1:870 / 1:723). One flat gap cannot express both, and the 12 that used to be here was Usage Info's number applied to the card — so the Header sat 8px too close to the balance in every state. */ gap: 20px; /* The card treatment itself, which this rule simply did not have: Figma draws a filled, rounded, padded panel and the page drew a bare flex column on the page background. Measured identically on `22:42104` (unpaid): padding 20/18, itemSpacing 20, cornerRadius 26 — so these are component values. ⚠️ Its two companions in this claim, `22:42444` (paid) and the component `588:41875`, are BOTH dead in all four estate files (measured 2026-09-21, #961). The surviving instance still carries every number this rule states. The Workspace Billing frame 4:10143 mounts the SAME instance (4:10174, same child ids), so correcting it here corrects both pages rather than making them diverge. */ padding: 20px 18px; background: var(--evsh-neutral-blue-5); border-radius: 26px; } /* Figma's `Usage Info` frame — the 12px stack the card's gap used to stand in for. Full width so the progress bar still spans the card's 728px content box. */ .evsh-credits-detailed-usage-info { display: flex; flex-direction: column; gap: 12px; width: 100%; } /* Actions live in the header, top-right (Figma 1:856/1:809 — "Plan Actions" sits at the header's vertical position, not in a trailing row below the card; wave-4 review, finding 1a). */ .evsh-credits-detailed-header { display: flex; justify-content: space-between; align-items: center; } /* height only — the container itself paints nothing (see .evsh-credits-bar above), so a radius here has no visible effect; each segment carries its own 16px radius regardless of size. */ .evsh-credits-bar--lg { height: 8px; } /* The balance line: leading count, trailing label, then the info tooltip — all one row, gap 4px, items aligned to the label's baseline-ish bottom edge (Figma "Analysis used" 1:1023: flex, items-end, gap 4). The tooltip sits HERE, not in the header — Figma's Header frame (1:819/1:770) has the title as its only child (wave-4 review, finding 1b). */ .evsh-credits-detailed-balance { display: flex; align-items: flex-end; gap: 4px; } /* Distinct, larger display type for the leading number (Figma: NOT one of this package's Lato type-scale utilities) — 28px/28px, a display face with a Lato fallback since this package loads no font of its own (wave-4 review, finding 1d). */ .evsh-credits-detailed-balance-count { font-family: 'Gluten', var(--evsh-font); font-size: 28px; line-height: 28px; font-weight: 500; color: var(--evsh-neutral-1); } .evsh-credits-detailed-balance-label { font-family: var(--evsh-font); font-size: 15px; line-height: 26px; font-weight: 400; color: var(--evsh-neutral-2); } .evsh-credits-detailed-balance-tooltip { padding-bottom: 3px; /* Figma "Tooltip Container" 1:1027 — nudges the icon toward the text baseline */ } /* DEV-2 — the CREDITS CARD's ⓘ is blue-2; every other caller's stays neutral-blue-2. ⛔ SCOPED ON PURPOSE. THE OBVIOUS FIX — swapping `.evsh-tooltip-trigger`'s colour — WOULD REVERT #483, A DEFECT THE OWNER HIMSELF REPORTED ("a saturated blue dot beside grey type"). Both readings are right; they are different instances: 22:42104 I22:42104;1:723;1:1028;1:1260 #2B89C5 <- the credits card, this rule (re-cited 2026-09-21, #961: the previous pair `22:42413` / `I22:42444;…` is dead) 4:3920 I4:3951;4:804;1:1260 (+3 more) #A2B0B7 <- pack cards, #483's frames 4:4110 I4:4115;1:1260 #A2B0B7 <- balance row, #483's frame Measured over REST on 2026-09-11, counting non-null and checking the returned file name. ⚠️ The component MASTER in `3gwifp9Rkgj4R7FiQ8ac2l` says #2B89C5 and the screen INSTANCES override it — so reading the master alone says "blue everywhere" and reading #483's two frames alone says "grey everywhere". Neither is the whole answer. ⛔ AND #483'S PREMISE IS STALE: it states "those two are the only production callers". There are SIX — step-balance-view, pack-card, charge-day-field, input-label, workspace-menu, and credits-section, the last being exactly the one that disagrees. The other three are NOT measured here and keep the shared default; that is a deliberate non-claim, not a verdict. */ .evsh-credits-detailed-balance-tooltip .evsh-tooltip-trigger { color: var(--evsh-blue-2); } /* Status line + usage summary are ONE justified row (Figma "Limits" 1:1036: a single h=18 frame, status left, usage+arrow right-aligned), not two stacked paragraphs (wave-4 review, finding 1c). These two classes previously had no CSS rule at all. */ .evsh-credits-detailed-limits { display: flex; justify-content: space-between; align-items: center; gap: 16px; } /* Figma paints both lines `neutral/neutral 2` #666 (1:1037, 1:1039, 1:1041). They declared no colour at all, so they inherited `.evsh-root`'s neutral-1 #00202f and rendered near-black. */ .evsh-credits-detailed-status, .evsh-credits-detailed-usage { margin: 0; color: var(--evsh-neutral-2); } .evsh-credits-detailed-usage-link { background: none; border: none; padding: 0; margin: 0; font: inherit; /* Figma gives the whole "0 credits used · Last 30 days ↗" line ONE colour (#666) and lets the arrow carry the affordance; `--evsh-blue-0` turned the trailing run blue mid-sentence. */ color: inherit; cursor: pointer; } /* Measured on the live instance `22:42104`: the benefits block `I22:42104;1:724` spaces label-to-list by 12, the list `I22:42104;1:726` ("Benefits (Hidden)") spaces rows by 16, and one row `I22:42104;1:727` spaces its 18px icon from its text by 12. All three shipped as 8. Re-cited 2026-09-21 (#961): the component ids this named — 588:41875/41894/41896/41897 — are all dead in the four estate files, and every spacing above was RE-MEASURED on the live nodes rather than carried over. */ .evsh-credits-detailed-benefits { display: flex; flex-direction: column; gap: 12px; } /* `I22:42104;1:725` ("Label", TEXT 14px/600; re-cited 2026-09-21 — `588:41895` is dead) is `subtitle/subtitle-3` in neutral-2; the weight/size come from the class the component names, the colour has to be stated because `.evsh-root` inherits neutral-1. */ .evsh-credits-detailed-benefits-label { color: var(--evsh-neutral-2); } .evsh-credits-detailed-benefit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .evsh-credits-detailed-benefit { display: flex; align-items: center; gap: 12px; } .evsh-credits-detailed-actions { display: flex; gap: 8px; } /* ==== CompactRail (wiki: Suite Navigation — Compact sidebar) ==== */ .evsh-rail { width: 64px; /* Kept even though `.evsh-shell` now paints the same white behind it: `CompactRail` is a public export and must look right rendered on its own (preview app, host-side experiments). Retint both together if Figma ever changes the Nav Bar surface. */ background: var(--evsh-white); display: flex; flex-direction: column; align-items: center; justify-content: space-between; /* `pt-16 px-8`, and NO padding-bottom — the 16px below the Account button now comes from `.evsh-shell`'s `padding: 16px 0`, which is where Figma puts it (the "Stack" wraps the rail AND the sidebar). Total: TOP 32 = shell 16 + this 16, matching `I4:3751;1:198`'s own `pt-16` inside that Stack. BOTTOM 16 = shell 16 + this 0. ⛔ A previous pass parked the bottom 16 HERE, because the rail was in scope and the sidebar was not, and called the top "an unresolved 16-vs-32 conflict between two components". Neither was right. `891:20840` is the rail EXTRACTED STANDALONE, with the parent's inset re-absorbed as `py-16` and its own `pt-16` dropped — so it agrees with the screens once you read the parent. That is the same "one level too low" mistake that produced the missing bottom padding in the first place, made twice on two edges. ⚠️ RESTORING A `padding-bottom` HERE WOULD DOUBLE THE INSET TO 32. The D5 GUARD in `navbar-figma.test.tsx` asserts it is supplied exactly once, by one side or the other. */ padding: 16px 8px 0; height: 100%; box-sizing: border-box; } .evsh-rail-top, .evsh-rail-bottom { display: flex; flex-direction: column; /* Figma reads flex-start on both stacks (D6) — `891:20842` / `891:20849` are both `items-start`, so this is agreement, not a layout change. ⛔ A NOTE HERE USED TO CLAIM THIS RULE HAD NO VISUAL CONSEQUENCE, on the grounds that every child of these stacks is 48px wide. THAT WAS FALSE, and it is why the divider stayed off-centre through a 46-item audit: the divider is 32px, and flex-start pinned it to this column's LEFT edge. The stack's alignment is right; the narrow child now opts out with its own `align-self`. See .evsh-rail-divider. */ align-items: flex-start; gap: 4px; } /* Anchors MoreAppsMenu (`position: absolute`) under the More button — the consumer wraps just the button, not the whole `.evsh-rail-top` stack, so the menu's `top: 100%` measures from the button's own box. */ .evsh-rail-more-wrap { position: relative; } /* Figma `891:20844` draws this as a full-width row (`flex justify-center px-[8px] py-[4px] w-full`) whose border child is `flex-[1_0_0] h-px` — i.e. a 32px line CENTRED in the 48px column. Drawn directly as a 32px block it inherits the stack's `align-items: flex-start` and hugs the left edge instead, 8px off, under tiles that are all centred. `align-self` re-centres this one child without touching the stack's own (correct) flex-start. */ .evsh-rail-divider { display: block; align-self: center; width: 32px; height: 1px; margin: 4px 0; background: var(--evsh-neutral-blue-3, #dbddde); } .evsh-rail-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 48px; padding: 8px 8px 6px; border-radius: var(--evsh-radius-card); background: none; border: none; font: inherit; color: inherit; text-decoration: none; cursor: pointer; } .evsh-rail-item--selected { background: var(--evsh-neutral-blue-5); } /* Progressive tool-bar states (Coach #632, spec eqb7VfpiM2), the rail counterpart of the .evsh-nav-item--skeleton/--disabled rules below. Both render as s, so this only removes the affordance the base .evsh-rail-item rule sets. */ .evsh-rail-item--skeleton, .evsh-rail-item--disabled { cursor: default; } /* D10/D11 — Figma's rail skeleton: the 32px icon box filled neutral-blue-2 @ 50%, and the label slot kept at 18px holding a 4px full-width bar (radius 16) in the same fill. The bar is a pseudo-element so the slot keeps its height and the tile does not shrink. */ .evsh-rail-item--skeleton .evsh-rail-icon { background: var(--evsh-neutral-blue-2); opacity: 0.5; } .evsh-rail-item--skeleton .evsh-rail-label { width: 100%; height: 18px; display: flex; align-items: center; } .evsh-rail-item--skeleton .evsh-rail-label::before { content: ''; display: block; width: 100%; height: 4px; border-radius: 16px; background: var(--evsh-neutral-blue-2); opacity: 0.5; } .evsh-rail-item--disabled .evsh-rail-icon, .evsh-rail-item--disabled .evsh-rail-label { /* Confirmed against Figma (pass 1, R-N6): the "App: Edge" tile I4:3736;1:198;1:189 dims BOTH the icon container and the label to 0.5 and keeps the brand fill. Code already matched. */ opacity: 0.5; } .evsh-rail-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; /* ⚠️ REQUIRED BY THE HOVER RULE BELOW, NOT COSMETIC. Figma's hovered More tile puts a 1px border on this box; without `border-box` that border would grow it 32 → 34 and shift the glyph off centre — a hover that visibly nudges the icon. No-op today in every other state, since nothing else here has a border or padding. */ box-sizing: border-box; border-radius: 9.6px; /* Figma rounded-[9.6px] icon container — off-scale, verified via design context */ color: var(--evsh-neutral-2); } /* Figma `332:85233` State=Hovered, Type=More — the rail had NO `:hover` treatment at all, while the sibling `.evsh-nav-item` in the same stylesheet has a four-rule ladder. A missing element, not a wrong value, which is why no per-property audit found it. THE TILE GAINS NOTHING: `332:85233`'s own background is none — only the ICON CONTAINER changes, from no border to a 1px `background/light-blue` #e8eef3. The glyph and label stay full strength, because a More tile never dims in any state. ⛔ SCOPED TO THE GLYPH CLASS ON PURPOSE. A generic `.evsh-rail-item:hover { background: … }` would also paint the ACCOUNT tile — which inherits `.evsh-rail-item`'s 12px radius that Figma's Account frame `891:20858` does not have, so a background there would suddenly reveal a corner the design never specified. Account carries no `.evsh-rail-icon` at all, so this cannot reach it. ⚠️ The APP tiles' hover is deliberately NOT here: its defining feature is the icon container going to FULL strength, which only means something once the resting-opacity question is ruled. Building it first risks encoding the wrong half. Parked with that ruling, not forgotten. */ /* #625 — SUPPORT TAKES THE SAME HOVER, because it is the same component. #626 was titled "the More tile" and cited the VARIANT; it never enumerated the variant's INSTANCES, and `compact-rail.tsx` gives Support a different class, so the rule could not reach it. ⭐ A variant-list is not an instance-list: a state is specified once and consumed many times. Measured over REST — all 181 nodes under Nav Bar `695:45206`, matching on `componentId`: I695:45206;1:198;1:190 More Apps componentId=332:85231 I695:45206;1:198;37:1568 Support componentId=332:85231 Exactly two instances; the enumeration is complete. Border read on the hovered variant itself, `1:273` in `3gwifp9Rkgj4R7FiQ8ac2l` (name verified "Evolve Components"): the TILE `1:273` has no stroke, its child `1:274` Icon Container has `#E8EEF3` at 1px — which is why this is scoped to the glyph class and not the tile. */ .evsh-rail-item:hover .evsh-rail-icon--more, .evsh-rail-item:hover .evsh-rail-icon--support { border: 1px solid var(--evsh-bg-light-blue); } /* Figma `332:85270` paints the More tile's "+" **#00202F** (`--evsh-neutral-1`), NOT the `--evsh-neutral-2` #666666 that `.evsh-rail-icon` hands every glyph. The tile's LABEL is the #666 one — icon and label are different colours here, which is exactly what made this invisible. Same defect `apps/suite/.../apps/more-icon.tsx` already fixed on the Apps page. Declared BEFORE `--selected` so an open More menu still wins the cascade and paints white. */ .evsh-rail-icon--more { color: var(--evsh-neutral-1); } /* Figma `891:20852` paints the Support glyph **#00202F** (`--evsh-neutral-1`), exactly like the More tile's "+" — both are the "plain" rail tiles, whose Icon Container has no fill, so the glyph carries the weight instead of a white-on-brand mark. ⚠️ Kept as its OWN rule rather than folded into `--more`'s selector list: `css-rule.ts`'s `declaration()` refuses to read a selector that appears only as one member of a group, so grouping them would break the per-rule pins both glyphs have. Two rules, one value, stated. */ .evsh-rail-icon--support { color: var(--evsh-neutral-1); } /* ⛔ THIS RULE USED TO BE `.evsh-rail-icon--selected { background: var(--evsh-blue-2); color: var(--evsh-white) }` — ONE colour for every product, keyed by STATE. That is Eli item 2: with Coach selected the tile went #2b89c5 (its own colour, so it looked fine) and with EDGE selected it went #2b89c5 too, where Figma gives it #d4a83a. ⭐ THE TRAP THAT PRODUCED IT, worth carrying: in the component set `1:225`, ALL THREE App variants — Default `1:226`, Selected `1:237`, Hovered `1:248` — carry Icon Container fill **#2B89C5**. It is Coach's colour used as the component's PLACEHOLDER, and every placed instance overrides it. Reading a brand colour off a STATE therefore returns Coach blue for everything. ⇒ Product identity is the Icon Container FILL and is keyed by PRODUCT, never by state. Measured on the placed instances in Nav Bar `695:45206` (file `fYvRupTfIiOEBXYGOcvZZZ`): Suite `I695:45206;1:198;1:185` #00202F · Coach `…;1:188` #2B89C5 · Edge `…;1:189` #D4A83A, each holding the SAME white 24x24 mark in every state. ⚠️ DELIBERATELY PARTIAL, and that is the honest fallback, not a gap: a key with no measured colour gets NO fill rather than a borrowed one. `ShellApp.key`'s own comment says never to hardcode the set, and this respects it — an unknown product still renders, just untinted. A wrong brand colour looks deliberate; a missing one looks like what it is. */ .evsh-rail-icon--suite { background: var(--evsh-neutral-1); color: var(--evsh-white); } .evsh-rail-icon--coach { background: var(--evsh-blue-2); color: var(--evsh-white); } .evsh-rail-icon--edge { background: var(--evsh-gold-2); color: var(--evsh-white); } /* The More tile is the ONE tile whose icon container is filled by its STATE rather than by a brand, so what the deleted shared rule used to do for it is restated here with its own node. Figma `1:266` State=Selected, Type=More: Icon Container **#F1F5F8**, and the "+" stays **#00202F** (`.evsh-rail-icon--more` above already paints it). The old rule gave it #2B89C5 with a WHITE glyph — wrong on both axes, invisible because nobody separated "selected" from "a product". */ .evsh-rail-icon--more.evsh-rail-icon--selected { background: var(--evsh-neutral-blue-4); } /* ─── Eli item 15a — the PRODUCT tiles' resting, hover and selected strengths ─────────────────── `rail-hover-figma.test.tsx` and `rail-support-hover-figma.test.ts` both recorded this as deliberately parked: *"its defining feature is the icon container going to FULL strength, which only means something once the resting-opacity question is ruled."* This is that ruling, measured over REST 2026-09-21 on component set `1:225` in `3gwifp9Rkgj4R7FiQ8ac2l`: `1:226` Default — tile bg none · Icon Container AND Label at opacity **0.5** `1:237` Selected — tile bg #F6F9FA · both at opacity **1** `1:248` Hovered — tile bg #F1F5F8 · both at opacity **1** The label is #666666 in EVERY variant; only its opacity moves, which is why no label colour changes here and no `--muted` class comes back (navbar D8 deleted it for exactly that reason). ⚠️ SCOPED TO `--app`, NOT TO `.evsh-rail-item`. More, Support and Account never dim — Figma gives their labels opacity 1 in every variant (`1:259`, `1:266`, `1:273`) — and the Account tile must stay out of reach of any tile background: its frame `I695:45206;1:198;1:192` is 48x48 with NO corner radius (measured; it is the live replacement for the dead `891:20858` this file used to cite), so painting it would reveal a 12px corner the design never specifies. ⚠️ HOVER IS EXCLUDED ON A SELECTED TILE. Figma has no Selected+Hovered variant, so rather than invent a blend the selected tile simply holds its #F6F9FA. Stated, not assumed — revisit if a Selected+Hovered frame ever appears. */ .evsh-rail-item--app .evsh-rail-icon, .evsh-rail-item--app .evsh-rail-label { opacity: 0.5; } .evsh-rail-item--app:not(.evsh-rail-item--selected):hover { background: var(--evsh-neutral-blue-4); } .evsh-rail-item--app:not(.evsh-rail-item--selected):hover .evsh-rail-icon, .evsh-rail-item--app:not(.evsh-rail-item--selected):hover .evsh-rail-label, .evsh-rail-item--app.evsh-rail-item--selected .evsh-rail-icon, .evsh-rail-item--app.evsh-rail-item--selected .evsh-rail-label { opacity: 1; } .evsh-rail-label { /* Settled in the Task 7 pixel pass: Figma dev-mode (get_design_context on node 2766:7164, the "Suite" rail label) reports `text-[12px]`, not the 11px carried over from Task 4's brief — using the confirmed value. D1: the weight is Lato SemiBold (600), measured twice — I4:3780;1:198;1:185;1:247 and I4:3736;1:198;1:189;1:236. A note here previously claimed the hosted Lato ships only 400/700/900 and kept 700 on that basis. It was true when written and is not now: `ea94c7e` self-hosts five weights including Lato-SemiBold.woff2, and 600 already renders elsewhere in this file. Checked across consumers before changing it — Suite and Coach both host the 600 face and both render this label; Edge hosts 400/700/900 and does not render the rail, where a 600 would fall back to the nearest face rather than break. */ font-size: 12px; line-height: 16px; font-weight: 600; color: var(--evsh-neutral-2); text-align: center; white-space: nowrap; } /* Figma `891:20850` Support is 48x**46**, not 48x48 — the label slot is hidden, so the tile keeps the SAME padding as every other rail item and is simply shorter. ⛔ THIS RULE SAID `padding: 8px`, WHICH MADE IT 48 (8 + 32 + 8). It looks like a copy of `.evsh-rail-avatar-btn` below, where `8px` IS right — the Account frame `891:20858` really is 48x48. One tile's correct value applied to its neighbour, which is 2px shorter. The value below is identical to `.evsh-rail-item`'s own; it is kept as an explicit override rather than deleted so the next reader sees 46 was measured, not inherited by accident. */ .evsh-rail-support { padding: 8px 8px 6px; } /* #384 part 3 — the rail's Account tile. Figma draws it as a `` (I4:3780;1:198;1:193): a 32px circle in #b878e2 with 16px SemiBold white initials. It was rendering UserAvatar, and the shared table's regression made it ACCIDENTALLY CORRECT at 16 — so reverting that table without this rule would have dropped this tile to 14px and shipped a new defect as the repair. Its size now comes from here, not from that table. #103: NO background here. Figma's #b878e2 is that instance's sample fill; the tile is the USER's mark, so compact-rail.tsx paints their STORED colour inline (neutral when none is stored). */ .evsh-rail-avatar-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--evsh-white); font-family: var(--evsh-font); font-size: 16px; font-weight: 600; } .evsh-rail-avatar-btn { padding: 8px; } /* ==== SidebarNav (wiki: Suite Navigation — Full sidebar) ==== */ .evsh-sidebar { width: 264px; height: 100%; box-sizing: border-box; background: var(--evsh-neutral-blue-5); border-radius: 20px; /* Figma rounded-[20px] outer sidebar — off-scale, verified via design context */ display: flex; flex-direction: column; /* Figma `1:200` "Primary Menu Items" — the sidebar's FIRST block — is `paddingTop: 12`, and it wraps the Workspace Dropdown AND the Nav Bar Items. That block has no element of its own here (the DOM hoists its children straight into this column), so the 12px lands on the sidebar. Geometrically identical: Figma's `1:199` "Sidebar" declares NO paddingTop — measured, the key is absent and `1:200` sits at the sidebar's own y=852 — so a top padding on the sidebar and a top padding on its first child put the same 12px in the same place. The footer does not move: `.evsh-nav-list` is `flex: 1 1 0` and absorbs the whole reduction. ⛔ IT USED TO SIT ON `.evsh-nav-list`, i.e. BELOW the workspace selector instead of above it. Not a missing value — a MISPLACED one, and that distinction is the whole repair: · The nav rows land identically either way, because `12 + 70 + 0 === 0 + 70 + 12 === 98`. So every row below the selector was already pixel-exact against Figma `1:205` (rel 98), and only the selector and its 36px mark were displaced — 12px up, to 33 where Figma draws 45 (`I1:201;1:320` y=881 against Stack `1:197` y=836). That is why a 46-item audit walked past it: the error was invisible everywhere except the one row at the top of the column. · ⚠️ SO THE FIX IS A MOVE, NEVER AN ADD. Adding a second 12px here while leaving the nav list's in place corrects the mark and pushes all four nav rows from 98 to 110 — one number fixed, four broken, and the two are indistinguishable at the only element anyone is watching. `sidebar-header-offset-figma.test.tsx` pins the first nav ROW at 98 for exactly that reason; pinning `.evsh-nav-list` itself would NOT catch it, since that box resolves to 98 under both. ⚠️ The reported symptom was "the rail tile and the sidebar mark should read as one row". THEY SHOULD NOT. Figma puts the mark's top 5px BELOW the rail icon's (45 against 40) and its centre 7px below. The browser had it 7px ABOVE with centres 5px apart — the same two magnitudes with the sign flipped. Equalising them would be a second defect, not a fix. */ padding-top: 12px; padding-bottom: 8px; } .evsh-sidebar-header { padding: 8px 16px; /* Anchors WorkspaceMenu (`position: absolute`) under the workspace selector — the consumer wraps this header row, not the whole `.evsh-sidebar` column, so the menu's `top: 100%` measures from the header's own box instead of the full-height sidebar. */ position: relative; } .evsh-sidebar-workspace-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px 8px 8px; border-radius: 18px; background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } .evsh-sidebar-workspace-btn:hover { background: var(--evsh-neutral-blue-4); } /* D29: while the workspace menu is open the selector takes the background/light-blue fill. Driven by a prop, the same way CompactRail drives .evsh-rail-item--selected from `moreOpen`. */ .evsh-sidebar-workspace-btn--open { background: var(--evsh-bg-light-blue); } .evsh-sidebar-workspace-mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9.6px; color: var(--evsh-white); font-weight: 700; font-family: var(--evsh-font); } /* D12: the TEAM selector mark — a white tile with a hairline border carrying the building glyph from 13:1352. Geometry comes from the rule above. `color` is restated because that rule paints text white for the old initial, and the glyph inherits it as `currentColor`. */ .evsh-sidebar-workspace-mark--team { box-sizing: border-box; background: var(--evsh-white); border: 1px solid rgba(0, 0, 0, 0.04); /* R-N16: the asset's own stroke is #7A8D97 — exactly --evsh-neutral-blue-1, the token D32 added. MEASURED, replacing the #00202f that was inferred while R-N14 stood. */ color: var(--evsh-neutral-blue-1); } /* D28: Figma draws the PERSONAL selector mark as a 36px rounded square in background/light-purple with dark initials — not the round UserAvatar. Geometry is inherited from the rule above; only the fill, border and type differ. box-sizing keeps the 1px border inside the measured 36px. */ .evsh-sidebar-workspace-mark--personal { box-sizing: border-box; background: var(--evsh-bg-light-purple); border: 1px solid rgba(0, 0, 0, 0.04); color: var(--evsh-neutral-1); /* M4: 16px / 21.333 SemiBold — the same type the 32px menu mark carries. Initials do not scale with tile size. */ font-size: 16px; line-height: 21.333px; font-weight: 600; } /* evolve-suite#928 — the TEAM selector mark when the workspace has a photo (Figma `1:317`, Type=Team Completed=True `1:330`): the photo fills the 36px / 9.6px tile inherited from the base rule, with a 1px black-at-4% INSIDE stroke painted OVER it. Outline pulled 1px inward rather than a border: a border would inset the image by 1px and leave a pale ring between photo and edge, while an outline paints above the content, as the frame does. The white fill is the team tile's own, so nothing shows through at the rounded corners. A photo that FAILS to load is not left to this tile — a browser draws its broken-image glyph inside it — the component swaps in the default icon instead (`usePhotoFallback`). */ .evsh-sidebar-workspace-mark--photo { background: var(--evsh-white); outline: 1px solid rgba(0, 0, 0, 0.04); outline-offset: -1px; overflow: hidden; } .evsh-sidebar-workspace-photo { display: block; width: 100%; height: 100%; /* `cover`, as the switcher's photo: the tile is a filled square in Figma, and letterboxing a non-square logo would leave bars inside it. */ object-fit: cover; } .evsh-sidebar-workspace-details { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .evsh-sidebar-workspace-name, .evsh-sidebar-workspace-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* D4: Figma declares #00202f on the name itself. Its own rule, not the grouped one above — that group also covers the subtitle, which must stay #666. */ .evsh-sidebar-workspace-name { color: var(--evsh-neutral-1); } .evsh-sidebar-workspace-subtitle { color: var(--evsh-neutral-2); } /* evolve-suite#1030 (Figma verifier D2): `#A2B0B7` = neutral-blue-2 on `I966:1244;1:325` and on the Nav Bar's `I45:64366;1:201;1:325`. It was neutral-2 (#666), the subtitle's colour, not the icon's. */ .evsh-sidebar-chevron { flex-shrink: 0; display: flex; color: var(--evsh-neutral-blue-2); } /* ⛔ NO `padding-top` HERE. It carried Figma `1:200`'s 12px, which belongs ABOVE the workspace selector, not below it — see the long note on `.evsh-sidebar`, which now owns it. Figma stacks the Workspace Dropdown `1:201` and the first Nav Bar Item `1:205` with NO gap between them (`1:201` y=864 h=70 ends exactly where `1:205` y=934 begins), so this element's own top inset is zero. Restoring a value here would ADD to the sidebar's rather than replace it, pushing every nav row from Figma's 98 to 110 while the selector still looked correct. */ .evsh-nav-list { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; overflow-y: auto; } .evsh-nav-item-wrap { padding: 4px 16px; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 4px; } /* Sits after the (flex: 1) nav list, so it settles at the bottom of the column. 16px each side gives CreditsSection's hardcoded 232px width exactly (264 - 32), matching its own CSS comment. */ .evsh-sidebar-footer { padding: 4px 16px 12px; /* D37: pt-4 pb-12 px-16 */ width: 100%; box-sizing: border-box; } .evsh-nav-item { display: flex; align-items: center; gap: 16px; width: 100%; flex: 1; min-width: 0; box-sizing: border-box; padding: 10px 16px; border-radius: var(--evsh-radius-item); background: none; border: none; font: inherit; color: var(--evsh-neutral-1); text-decoration: none; cursor: pointer; text-align: left; } /* N1: measured on the component, nodes 1:293/1:294 — background/light-blue, not the neutral-blue-4 the code carried. */ .evsh-nav-item:hover { background: var(--evsh-bg-light-blue); } .evsh-nav-item--active { background: var(--evsh-white); box-shadow: var(--evsh-shadow-nav-active); color: var(--evsh-blue-0); font-weight: 700; } /* ⛔ THE WEIGHT MUST BE RE-DECLARED ON THE LABEL, NOT LEFT TO INHERIT FROM THE RULE ABOVE. `sidebar-nav.tsx` renders the text in a nested ``, and `.evsh-body-2` declares `font-weight: 500` ON THAT SPAN. A declared value beats an inherited one unconditionally — inheritance only supplies a value to an element that has none of its own — so the 700 above reached the anchor and never the text. The parent still looked mostly right (its white pill and `blue-0` survive, because `color` DOES inherit and the label re-declares nothing), which is what kept the missing bold invisible. Guarded by `nav-active-weight-cascade.test.tsx`. */ .evsh-nav-item--active .evsh-nav-item-label { font-weight: 700; } .evsh-nav-item--active:hover { /* Higher specificity than the plain :hover rule above, so hovering the active item keeps its white pill instead of reverting to the hover fill. */ background: var(--evsh-white); } /* Progressive-sidebar states (Coach #632, spec eqb7VfpiM2). Both are non-interactive by construction — they render as
s, so the cursor and hover rules below only remove the affordance the base .evsh-nav-item rule sets, in the same spirit as the Button disabled rule at L826-837. */ .evsh-nav-item--skeleton, .evsh-nav-item--disabled { cursor: default; } .evsh-nav-item--skeleton:hover, .evsh-nav-item--disabled:hover { background: none; } /* D13 — Figma's nav skeleton: a 14px placeholder (radius 4) centred in the untouched 20px icon slot, and a 4px x 79px bar (radius 16) for the label. Both neutral-blue-2 @ 50%. The placeholder is a pseudo-element so the 20px slot keeps the geometry measured as a MATCH; drawing it by resizing the slot itself would have moved the row. */ .evsh-nav-item--skeleton .evsh-nav-item-icon::before { content: ''; display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--evsh-neutral-blue-2); opacity: 0.5; } .evsh-nav-item--skeleton .evsh-nav-item-label { flex: 0 0 auto; width: 79px; height: 4px; border-radius: 16px; background: var(--evsh-neutral-blue-2); opacity: 0.5; } .evsh-nav-item--disabled { /* D32: #7a8d97, CONFIRMED ON THE COMPONENT (node 167:3212), not only on the instance it was first measured from ("Apps", I4:4225;1:209;1:286, step-2 frame 4:4211). Figma's own token name there is `netural blue/neutral blue 1`, matching --evsh-neutral-blue-1 by name as well as value. The label's type — Lato Medium 15/20 — already comes from .evsh-body-2 on the base rule, so only the colour was ever wrong. */ color: var(--evsh-neutral-blue-1); } /* Optional trailing action on a nav item (Edge's Create-Brief "+"). No Figma variant defines this — "Nav Bar | Item" (1:280) has no trailing-action state — so it deliberately borrows the nav item's own hover treatment rather than inventing a second visual language. */ .evsh-nav-item-action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: none; background: none; border-radius: var(--evsh-radius-item); color: var(--evsh-neutral-1); cursor: pointer; line-height: 0; } .evsh-nav-item-action:hover { background: var(--evsh-neutral-blue-4); } .evsh-nav-item-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .evsh-nav-item-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Nav item sub-tree — read directly off Figma fYvRupTfIiOEBXYGOcvZZZ 4:10143 (Sub Items I4:10168;1:218, rows 1:219/1:220/1:221; readings in the chapter's t7-figma-readings.md). Rows keep the PARENT geometry (16px margin, 14px radius, text at 52px so sub-labels align with parent labels) with a 6px vertical padding (32px container in a 40px row). The left rule is the frame's own construction: a 1px neutral-blue-3 line centred in the 20px icon column (asset 76f9968c…, #DBDDDE, spanning the full row so it runs continuously). */ .evsh-nav-subnav { display: flex; flex-direction: column; position: relative; margin: 0 16px 4px 16px; } .evsh-nav-subnav::before { /* The continuous rule, at the icon column's centre: 16px item padding + 10px to the centre of the 20px icon slot (line x=10.5 on node 1:219;1:289). */ content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 1px; background: var(--evsh-neutral-blue-3); } .evsh-nav-subitem { display: flex; align-items: center; width: 100%; box-sizing: border-box; /* 52px left = 16px padding + 20px icon column + 16px gap — text aligns with parent labels exactly (node 1:219;1:291 x=52). */ padding: 6px 16px 6px 52px; border-radius: var(--evsh-radius-item); background: none; border: none; font: inherit; color: var(--evsh-neutral-1); text-decoration: none; text-align: left; cursor: pointer; } /* N2: the sub-item hovers by a DIFFERENT MECHANISM from the row above it. Figma 1:299/1:300 has NO background on hover at all; the label recolours #00202f -> #666 (node 1:303). Assuming the main row's answer covered this one would have painted a fill the design does not have. */ .evsh-nav-subitem:hover { color: var(--evsh-neutral-2); } .evsh-nav-subitem--active { /* Node 1:220;1:315 (the selected "Billing" sub-item): Lato Bold, neutral-1 — the white card + shadow + blue treatment belongs to the PARENT item (1:217;1:306) only. Re-measured on `695:45206` for this fix: the active sub-item is `Lato:Bold` and its two siblings are `Lato:Medium`, and ALL THREE are `#00202f`. ⚠️ There is no colour change — darkening the active label would contradict the node. Weight is the whole treatment. */ font-weight: 700; } /* ⛔ Same override as the parent item above, and here it is the WHOLE selected state rather than half of it: bold is the sub-item's only treatment, so `.evsh-body-2`'s 500 on the label span left the active row byte-identical to its siblings — a sub-menu with no visible selected state at all, while the model, the CSS rule and 21 passing nav tests were each individually correct. */ .evsh-nav-subitem--active .evsh-nav-subitem-label { font-weight: 700; } /* Both non-default states render as
s, so these rules only remove the affordance the base .evsh-nav-subitem rule sets — same spirit as the nav-item states above. */ .evsh-nav-subitem--skeleton, .evsh-nav-subitem--disabled { cursor: default; } .evsh-nav-subitem--skeleton:hover, .evsh-nav-subitem--disabled:hover { background: none; } .evsh-nav-subitem--skeleton .evsh-nav-subitem-label { /* No skeleton sub-item variant exists in 4:10143's component set (verified in the T7 pass) — mirroring .evsh-nav-item--skeleton is the deliberate treatment, not a placeholder. D13 moved that treatment to a 4px bar in neutral-blue-2 @ 50%. The nav item's measured 79px width is deliberately NOT mirrored: it belongs to that node, and a sub-item bar width was never measured. Width stays flexible, as it always was here. */ background: var(--evsh-neutral-blue-2); opacity: 0.5; border-radius: 16px; height: 4px; } .evsh-nav-subitem--disabled { /* Same: no disabled sub-item variant in the frame; mirrors .evsh-nav-item--disabled, which D32 moved to neutral-blue-1. DERIVED from that rule, not separately measured. */ color: var(--evsh-neutral-blue-1); } .evsh-nav-subitem-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ Skeleton shimmer (evolve-suite, owner ask 2026-09-11) ============ * Owner, on the Create-workspace loading state (static grey rail tiles + sidebar rows): * "this should be a real shimmer effect, check if its viable to implement our own (fast and easy) * or if need to use a specific library for that". It is — this package already had 7 `@keyframes` * blocks and a working reduced-motion precedent (the shake above, #471) before this section * existed, so this is one more instance of an established technique, not a new one. * * ⚠️ FIGMA IS SILENT ON THE MOTION — checked over REST (`X-Figma-Token` header, file key as a * parameter), never the desktop MCP, which only reads the active tab and cannot tell "no node * found" from "wrong tab". File `fYvRupTfIiOEBXYGOcvZZZ` ("Evolve Suite"): every "Skeleton" frame * in it (Create workspace > Mobile, Navigation / Switch apps > Mobile — 10 instances, all * non-null) is a flat solid "bone" rectangle — zero `effects`, zero `interactions`/reactions, no * gradient fill. The one node literally named "Creating workspace" (`11:23730`, Index page) is a * table-of-contents link to the wizard frame, not a design frame. So this sweep is the owner's * direct ask, not a Figma-specified motion — noted here so neither the wiki nor a future ticket * implies Figma drew it. The highlight band below reuses --evsh-neutral-blue-3, already in the * palette (menu divider) — no colour is minted for this. * * ⭐ ADDITIVE ON PURPOSE, NOT A REPLACEMENT OF THE RULES ABOVE. Each selector below already has its * own rule declaring `background: var(--evsh-neutral-blue-2)` (D10/D11/D13 — Figma-measured, and * pinned byte-for-byte by navbar-figma.test.tsx). This rule adds ONLY `background-image` + * `animation` on top of that flat fill, so those Figma-parity pins stay untouched and the block * still reads as the correct flat grey if this rule is ever removed. * * Duration and sweep width: see --evsh-skeleton-shimmer-duration / --evsh-skeleton-shimmer-band on * .evsh-root — UNMEASURED, no Figma prototype exists to read them from. */ .evsh-rail-item--skeleton .evsh-rail-icon, .evsh-rail-item--skeleton .evsh-rail-label::before, .evsh-nav-item--skeleton .evsh-nav-item-icon::before, .evsh-nav-item--skeleton .evsh-nav-item-label, .evsh-nav-subitem--skeleton .evsh-nav-subitem-label { background-image: linear-gradient(90deg, transparent 0%, var(--evsh-neutral-blue-3) 50%, transparent 100%); background-size: var(--evsh-skeleton-shimmer-band) 100%; background-repeat: no-repeat; animation: evsh-skeleton-shimmer var(--evsh-skeleton-shimmer-duration) linear infinite; } @keyframes evsh-skeleton-shimmer { 0% { background-position: var(--evsh-skeleton-shimmer-band) 0; } 100% { background-position: calc(-1 * var(--evsh-skeleton-shimmer-band)) 0; } } /* ==== WorkspaceMenu (wiki: Suite Navigation — Workspace menu; Create Workspace — Workspace menu open/hovered) ==== */ /* Measured from the OPEN instance 4:3749 (inside frame 4:3735) — D14-D27. The note that stood here, claiming no open-state instance existed in Figma and that these values were a brief's fallback, was refuted by that read and is deleted rather than amended. No portal — position:absolute relative to the nearest positioned ancestor the consumer wraps around the workspace selector button. */ .evsh-workspace-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 278px; z-index: 10; box-sizing: border-box; background: var(--evsh-white); border-radius: 24px; box-shadow: var(--evsh-shadow-med); padding: 12px; display: flex; flex-direction: column; gap: 12px; } /* D17 is two gaps, not one: 12px between the menu's sections (overline / list / divider / create) on the rule above, and 8px between the workspace rows here (I4:3749;1:497). */ .evsh-workspace-menu-list { display: flex; flex-direction: column; gap: 8px; /* The LIST scrolls, not the panel — so "In {email}" above and the "Create workspace" row below stay reachable at any workspace count. Scrolling the whole panel would push Create off-screen, which is the bug: with 14 workspaces the panel ran past the viewport and Create was unreachable with no scrollbar anywhere. THE CAP IS DERIVED, NOT PICKED — AND IT CUTS THE FIRST HIDDEN ROW IN HALF, because that half-visible row is the affordance that tells you there is more. With the scrollbar hidden (evolve-suite#1027, below) it is the ONLY one, so it must hold at every window height. A row is 8+8 padding around two lines (20+18) = 54px, plus the 8px gap = a 62px pitch, so half a row is 27px. (Pinned against those rules by workspace-menu-scroll.test.ts: change a padding, line-height or the gap and re-derive these numbers.) - Tall windows: 5 rows + half the sixth = 5*62 + 27 = 337px. - Short windows: the room below the anchor, snapped DOWN to whole rows, plus half a row. 239px is what sits above and around the list, measured in Chromium 2026-09-22: the panel's top edge at 102px (.evsh-shell is position: fixed, and no host restyles it — Suite, Coach and Edge main checked 2026-09-22 — so this holds in all three) plus the panel's own chrome — overline, divider, Create row, three 12px gaps, 12px padding — at 137px. Both parts include the divider's 12px gaps and the menu's 4px offset; if either changes, re-measure 239. A smaller real value only makes this cap cautious, a larger one would let the panel run off-screen again. So the cut always lands 27px into the first hidden row. Measured on the BUILT row in Chromium 149, Firefox 151 and WebKit 26.5, at every window height 400-1100px: 16px of its 32px avatar and 19px of its 20px name line show, and the subtitle is hidden. Figma is silent here: the Workspace Menu (Evolve Components `3gwifp9Rkgj4R7FiQ8ac2l`, `150:1648`) only ever draws 2 workspaces, with no scrollbar, fade or cut row (read over REST by figma-1027, 2026-09-22). The half row is this stylesheet's own cue, not a Figma one. ⛔ The previous cap, `min(320px, calc(80vh - 120px))`, claimed the same half-row cue and never delivered it: 320px cut the sixth row 10px in, inside its transparent top padding, so five whole rows sat above blank space (Marcos's #1027 screenshot); the `80vh` term cut at arbitrary points (a cue at 8 of 71 window heights, 400-1100px); and its ~120px chrome estimate was 17px short, so below ~560px tall the panel ran past the viewport and clipped the Create row. It stays as the FIRST declaration only as the fallback for engines without CSS `round()` (Chromium <125, Firefox <118, Safari <15.4 per MDN browser-compat-data, read 2026-09-22), which drop the second one as invalid. `min-height: 0` is load-bearing: this is a flex child, and without it `overflow-y` never engages because the default `min-height: auto` refuses to shrink below content height. `overscroll-behavior: contain` stops a scroll that reaches the end from chaining to the page behind the menu. */ max-height: min(320px, calc(80vh - 120px)); max-height: min(337px, calc(round(down, 100vh - 239px - 27px, 62px) + 27px)); min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* evolve-suite#1027 — scroll WITHOUT a visible bar. `overflow-y: auto` draws the platform scrollbar on any system set to always show one (or with a mouse attached). Measured 2026-09-22 in Chromium 149, Firefox 151 and WebKit 26.5: this property alone hid the bar in all three, while the `::-webkit-scrollbar` rule below alone left it in Firefox. That rule is kept for engines older than this property (Chromium <121, Safari <18.2 per MDN browser-compat-data — not measured here). The list still scrolls — only the bar is gone. */ scrollbar-width: none; } .evsh-workspace-menu-list::-webkit-scrollbar { display: none; } /* D24: "In {email}", Lato Black 12/18 via .evsh-subtitle-4. Inset 8px to sit over the rows' own left padding. */ .evsh-workspace-menu-overline { padding: 0 8px; color: var(--evsh-neutral-2); /* evolve-suite#1049 — ONE line, ellipsis, never a wrap. ⛔ FIGMA-vs-OWNER: Figma is SILENT on truncation for this node and in fact draws it WRAPPING. Measured on `4:3749` "Workspace Menu" (278x245, p-12) in the file the shell's other node citations resolve against: the overline text `I4:3749;1:496` (238x18, inside container `I4:3749;1:495` 254x18 px-8) carries `[word-break:break-word] flex-[1_0_0] min-w-px` and NO overflow/ellipsis/nowrap class. That is a CONTROLLED negative, not an unread one — the sibling subtitle nodes in the SAME component ("Private", "Team workspace", "Manage people and usage") each DO carry `overflow-hidden text-ellipsis w-full whitespace-nowrap`, so the generator emits those classes when the design asks for them and simply was not asked here. The owner overrode the design directly: "this should not break line, show an ellipsis and a tooltip when hovering". Recorded so the conflict is visible rather than looking like drift. The three properties below are this stylesheet's own established truncation idiom — the same trio used by .evsh-sidebar-workspace-name, .evsh-nav-item-label, .evsh-workspace-menu-item-name and four others. */ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The Tooltip wrapper is the overline's width bound: it must fill the menu's 254px content box and be allowed to shrink, or the button inside it sizes to its text and never clips. */ .evsh-workspace-menu-overline-tip { display: flex; min-width: 0; } /* D25: a 1px rule inset by that same 8px, between the workspace list and Create workspace. The line is a pseudo-element so the wrapper keeps Figma's px-8 py-2 box. */ .evsh-workspace-menu-divider { padding: 2px 8px; } .evsh-workspace-menu-divider::before { content: ''; display: block; height: 1px; background: var(--evsh-neutral-blue-3); } .evsh-workspace-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; /* D18: no fixed height — it is content-driven. The old 36px could not hold a row's two lines of text plus its 8px padding. */ padding: 8px 12px 8px 8px; border-radius: 18px; background: none; border: none; font: inherit; color: var(--evsh-neutral-1); cursor: pointer; text-align: left; } /* R-N15 — WHY THESE TWO MUST NOT SHARE A VALUE. D27 put the arrow on EVERY row and D21 measured SELECTED as neutral-blue-4 (#f1f5f8). Each was correct alone; together they cancelled, because #f1f5f8 was already the hover fill — leaving the menu with no cue at all for which workspace is active. Selected keeps Figma's measured #f1f5f8. Hover takes #f6f9fa, the value THIS APP used for selected before D21 — an existing in-repo value preserved for a state Figma cannot currently tell us, not a colour invented to fill the gap. BOTH VALUES ARE NOW MEASURED on the component: 1:412's variant logic gives Hovered + Private/Team `neutral-blue-5` #f6f9fa, and Selected #f1f5f8. ⚠️ #f6f9fa WAS INVENTED BEFORE IT WAS MEASURED, AND IT HAPPENED TO BE RIGHT. Nothing in the reasoning that produced it had access to 1:412 — it was this app's own pre-D21 selected value, reused because the menu needed SOME distinction. One shade off and it would have shipped looking exactly as justified. The value is kept because it is measured, not because it was guessed correctly. */ .evsh-workspace-menu-item:hover { background: var(--evsh-neutral-blue-5); } .evsh-workspace-menu-item--selected { background: var(--evsh-neutral-blue-4); } .evsh-workspace-menu-item-details { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .evsh-workspace-menu-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evsh-workspace-menu-item-subtitle { font-size: 12px; line-height: 18px; color: var(--evsh-neutral-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* D27: a right arrow replaces the checkmark, and it sits on EVERY workspace row — selection is carried by the fill alone. No colour is declared: the arrow is no longer an active-state marker, so the old --evsh-blue-0 would be wrong, and the read did not give one. It inherits the row's own #00202f. */ .evsh-workspace-menu-item-arrow { flex-shrink: 0; display: flex; } /* pitchiq#361 — the Create row's ONLY consumer of this class, so both changes below are scoped to it by construction (verified: no other component renders `.evsh-workspace-menu-item-icon`). Resized 20px -> 32px, radius 9.6, matching `.evsh-workspace-menu-mark`'s own footprint (Figma I4:3749;1:502: a 32x32 avatar-tile slot, no fill/stroke by default, holding a 20x20 "Add Icon" frame). The 20px glyph centres inside it via the flex-centring already below — unchanged. Without the tile the icon's own gap:12 put the row's label 12px LEFT of every other row's name (Eli's screenshot, next to "TapTrap LLC"). */ .evsh-workspace-menu-item-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9.6px; display: flex; align-items: center; justify-content: center; /* Figma I4:3749;1:502, bound variable 42:29 — the SAME variable every other row's name uses, #00202f / --evsh-neutral-1. Was --evsh-neutral-2 (#666), a deviation. */ color: var(--evsh-neutral-1); } /* Figma I4:3749;1:502, bound variable 42:29 — the SAME variable every other row's name uses, #00202f / --evsh-neutral-1. Was --evsh-blue-0, a deviation (the row rendered blue). */ .evsh-workspace-menu-item--create { color: var(--evsh-neutral-1); } /* N3: in Figma's 1:412 the `More` type takes NO row fill in either hover or selected — the fill moves to its 32px avatar tile (1:431/1:485). This row was inheriting the generic row hover. Only the suppression is applied here; see the report for why the tile half is not. */ .evsh-workspace-menu-item--create:hover { background: none; } /* pitchiq#361 — completing N3 above: the TILE fill it deferred. At 7a0c4415 (N3's own commit) the Create row's icon was still a bare 20px box, not a tile — there was nothing to fill, which is why only the suppression landed then. Figma Hovered 1:430 (canonical library 3gwifp9Rkgj4R7FiQ8ac2l, component set 1:412) fills the 32px tile neutral-blue-5 (#f6f9fa), the same value the ordinary row hover already uses (:1298 above). The row itself still fills nothing — the rule above is unchanged. */ .evsh-workspace-menu-item--create:hover .evsh-workspace-menu-item-icon { background: var(--evsh-neutral-blue-5); } /* M2: 32px at radius 9.6, measured on rows 891:19190 / 891:19198 / 891:19208. ⛔ M4 CORRECTS THE FONT. This rule carried 14px, DERIVED from UserAvatar's 32px row on the theory that initials track the tile. They do not: 891:19191 measures Lato SemiBold 16 / 21.333, the same type as the 36px selector mark. The derivation was the error, not the arithmetic. No COLOUR here since #928: the white initial it carried was the colour-hashed team mark's, and that mark is gone — every kind now sets its own colour in the modifiers below. */ .evsh-workspace-menu-mark { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9.6px; font-weight: 600; font-family: var(--evsh-font); font-size: 16px; line-height: 21.333px; } /* ⛔ MODIFIERS GO AFTER THE BASE (evolve-suite#386). The base and every modifier are a SINGLE class, so a property both set resolves by ORDER — the later rule wins. #386 shipped this block BEFORE the base, and the base's white `color` beat its dark one. Since #928 the base sets no `color` and shares no property with a modifier at a different value, so the order changes nothing TODAY. It is kept anyway, and pinned by `test/cascade-computed.test.tsx`, so the first property added to both cannot silently lose. The sidebar pair above (.evsh-sidebar-workspace-mark and its --team/--personal) has always been ordered this way. A declared value is not a computed value: `declaration()` read this rule correctly and truthfully the whole time. The cascade test asks the DOM instead. */ /* #384 part 2 — the PERSONAL menu row's mark. Figma draws it as a `` (I4:3749;…;1:468): a 32px rounded square in background/light-purple with dark initials. It was rendering the circular UserAvatar, which is a different component that merely looks similar. Geometry comes from the base rule below; fill, border and type are this slot's own. box-sizing keeps the 1px border inside the measured 32px. --evsh-bg-light-purple already exists (D31) — not minted here. */ .evsh-workspace-menu-mark--personal { box-sizing: border-box; background: var(--evsh-bg-light-purple); border: 1px solid rgba(0, 0, 0, 0.04); color: var(--evsh-neutral-1); font-size: 16px; font-weight: 600; } /* #928 — a TEAM row with no photo draws the DEFAULT WORKSPACE ICON (ruled from the Suite file's instance `I459:25843;152:1795;1:449`): a white 32px tile, the 1px black-at-4% INSIDE stroke Figma `1:412` gives every mark, and the 18px building glyph, whose `currentColor` stroke is #7A8D97 — the same tile the sidebar's `--team` modifier draws at 36px. After the base, per the order note above. */ .evsh-workspace-menu-mark--team { box-sizing: border-box; background: var(--evsh-white); border: 1px solid rgba(0, 0, 0, 0.04); color: var(--evsh-neutral-blue-1); } /* #1009 — the workspace PHOTO variant of the mark. ⛔ PLACED AFTER THE BASE ON PURPOSE, per the order note above: this modifier and the base are both single classes, so specificity ties and the later rule wins. evolve-suite#386 shipped a modifier BEFORE its base and made the whole block dead code that still read correctly in the source. Geometry (32px, radius, flex centring) is inherited from the base; this only changes the fill, clips the image to the tile, and draws Figma's hairline. #928: the 1px black-at-4% INSIDE stroke of `1:412` paints OVER the photo, so it is an outline pulled 1px inward — a border would inset the image and leave a pale ring. The same treatment as the sidebar's `--photo` modifier. */ .evsh-workspace-menu-mark--photo { /* The default tile's own white behind the image, so nothing shows through at the rounded corners. A photo that FAILS to load is swapped for the default icon by the component (`usePhotoFallback`), because a browser draws its broken-image glyph inside this tile rather than leaving it empty. */ background: var(--evsh-white); outline: 1px solid rgba(0, 0, 0, 0.04); outline-offset: -1px; overflow: hidden; padding: 0; } .evsh-workspace-menu-photo { display: block; width: 100%; height: 100%; /* `cover`, not `contain`: the tile is a filled brand mark in Figma, and letterboxing a non-square logo would leave bars inside a 32px square. The cost is that a very wide logo loses its edges — worth confirming against a real logo during manual QA rather than asserting it here. */ object-fit: cover; } /* ==== MoreAppsMenu (wiki: Suite Navigation — More-app menu; Figma `3gwifp9Rkgj4R7FiQ8ac2l` `1:381` "Tool Bar | More Menu Item") ==== evolve-suite#1178 — built on the shared Popover (`position="left"`), which is where the card's position:absolute, radius, padding, shadow, background and caret now come from — see `.evsh-popover`/`.evsh-popover--left`. This class overrides only the WIDTH: figma-1582 measured 294px on this menu, wider than the base Popover card's 251 (measured from a different node, `1:1225` — the two cards agree on radius 32 and padding 16, which is why neither is redeclared here). The menu no longer supplies its own position/top/left/z-index/background/shadow — a SIDE popover with a caret (Figma's `Position: Left` variant) replaces the below-anchored `left: 0` dropdown this used to be. ⛔ TWO CLASSES, ON PURPOSE (#627 review). As a single class this rule TIED with `.evsh-popover { width: 251px }` on specificity, and the Popover section comes later in the file, so the later rule won: the desktop More menu rendered 251 wide, not Figma's 294. The menu is always a Popover card, so `.evsh-popover.evsh-more-apps-menu` out-ranks the base wherever it is declared — and the mobile app switcher, which carries this same class, inherits the fix. Pinned on the resolved cascade by `more-apps-menu-figma.test.tsx`. */ .evsh-popover.evsh-more-apps-menu { width: 294px; } .evsh-more-apps-heading { padding: 8px 8px 4px; color: var(--evsh-neutral-2); } .evsh-more-apps-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; box-sizing: border-box; padding: 8px; border-radius: 12px; /* Every not-enabled row is itself the clickable target (a