/* prd S5: app chrome layout. Structural CSS only - color/type tokens come from /tokens.css. Values on elements the fidelity harness checks (.leftpane, .side-nav, [data-testid="side-nav-v2-workspaces"], .board-item) are copied verbatim from captures/2026-09-23/board-sales-pipeline-desktop.json; nothing here is estimated. Only the 8 EXACT_PROPS + width/height that _Build/test/helpers/fidelity.js actually diffs need to match - properties outside that list (display, position, margin, padding, border shorthand, flex layout, etc.) are ours to choose. */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* ------------------------------------------------------------- shell layout The page is a vertical stack of chrome (optional S11 banner, then the topbar) with a single horizontal row underneath it: left pane beside main content. Before 2026-09-23 this rule set did not exist - .topbar, .leftpane and .main-content were three unwrapped siblings of with no container arranging them, so .leftpane took a full block line and .main-content flowed BELOW it, one whole viewport down. Every individual element was still pixel-correct against the capture, which is why the element-by-element fidelity checks, the board view story and the clickable-path crawl all passed over it. test/composed-layout.test.js is the check that does not. The column here is also what makes the banner safe: chrome height is measured by the layout instead of being hardcoded, so adding or removing a strip above the topbar cannot push the board off the bottom of the screen. */ body { display: flex; flex-direction: column; } .app-body { display: flex; flex-direction: row; flex: 1 1 auto; /* Without this an overflowing child (the board's own scroller) would refuse to shrink below its content height and push the row past the viewport. */ min-height: 0; } body { font-family: var(--font-family); } /* ---------------------------------------------------------------- topbar */ .topbar { display: flex; align-items: center; height: 88px; /* Fixed chrome: never absorbs the column's leftover space, never compresses when the board below it is tall. */ flex: 0 0 88px; background-color: #ffffff; border-bottom: 1px solid #c3c6d4; } .topbar-left { display: flex; align-items: center; padding-left: 14px; } /* Placeholder mark where monday's own logo sits - not a reproduction of it. */ .logo-placeholder { width: 28px; height: 28px; border-radius: 6px; background-color: var(--primary-color); } /* ---------------------------------------------------------------- leftpane */ .leftpane { display: flex; flex-direction: row; width: 351px; /* Neither grow nor shrink, but the basis stays `auto` so the `width` above remains the single source of the 351px the capture specifies. Writing this as `0 0 351px` states that number twice AND silently defeats S5's positive control, which proves the fidelity check can fail by overriding `width` inline - a flex-basis outranks that, so the control passed against an unchanged layout. (Caught by that test going red, 2026-09-23.) Height now comes from the row: it was calc(100vh - 88px), which assumed the topbar was the only thing above it and was already wrong once the S11 banner shipped. */ flex: 0 0 auto; height: 100%; min-height: 0; margin: 0; padding: 0; border-radius: 0px; background-color: rgba(0, 0, 0, 0); color: rgb(50, 51, 56); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: normal; } .side-nav { display: flex; flex-direction: column; align-items: center; width: 72px; flex: 0 0 72px; padding-top: 8px; border-radius: 0px; background-color: rgb(246, 247, 251); color: rgb(50, 51, 56); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: normal; } .side-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 64px; margin: 0; padding: 6px 0; border-radius: 0px; background-color: rgba(0, 0, 0, 0); color: rgb(50, 51, 56); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; line-height: 22.5px; letter-spacing: normal; } .side-nav-item__icon { width: 32px; height: 32px; border-radius: 8px; background-color: rgb(204, 229, 255); } .workspace-panel { display: flex; flex-direction: column; width: 279px; flex: 0 0 279px; overflow-y: auto; } .workspace-panel__header { padding: 16px; font-family: var(--title-font-family); font-size: 18px; font-weight: 500; } .board-list { display: flex; flex-direction: column; padding: 0 16px; gap: 4px; } .board-item { display: flex; align-items: center; width: 245px; height: 32px; margin: 0; padding: 8px; border-radius: 4px; background-color: rgba(0, 0, 0, 0); color: rgb(103, 104, 121); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: normal; text-decoration: none; cursor: pointer; } .board-item--selected { background-color: rgb(204, 229, 255); color: rgb(50, 51, 56); } .board-item__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------ main content */ .main-content { /* Takes the row's remaining width beside the fixed 351px left pane. min-width is what stops a wide board (many columns) from expanding this past the viewport and shoving the layout sideways - a flex item's default min-width:auto refuses to shrink below its content. */ flex: 1 1 auto; min-width: 0; overflow: auto; padding: 24px; color: rgb(103, 104, 121); } /* -------------------------------------------------------------- board view prd S6. Values on the elements the fidelity harness checks (the row-pulse wrapper's height, .column-header-cell__label, .cell__text, .group-title) are copied verbatim from captures/2026-09-23/board-sales-pipeline-desktop.json - see src/views/board.js for exactly which id/text maps to which capture element. Everything else here (flex layout, spacing, the left rail) is ours to choose, same as S5's leftpane. */ .board { color: rgb(50, 51, 56); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; } .board__name { font-family: var(--title-font-family); font-size: 24px; font-weight: 500; margin: 0 0 16px; } .board-group { margin-bottom: 24px; border-left: 4px solid; background-color: #ffffff; } .group-header-bar { display: flex; align-items: center; height: 40px; padding: 0 12px; } .group-title { font-family: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.1px; border-radius: 4px; } .column-header-row { display: flex; height: 36px; border-bottom: 1px solid #c3c6d4; } .column-header-cell { display: flex; align-items: center; padding: 0 12px; flex: 0 0 auto; } .column-header-cell__label { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: normal; color: rgb(50, 51, 56); border-radius: 4px; } .row { display: flex; height: 36px; border-bottom: 1px solid #d0d4e4; } .cell { display: flex; align-items: center; padding: 0 12px; flex: 0 0 auto; overflow: hidden; } .cell__text { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; line-height: 36px; letter-spacing: normal; color: rgb(50, 51, 56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* prd S7: full-bleed status/label chip - background-color is set inline per item (src/views/board.js statusCell), sourced from monday's own column config (status_label table), not a value chosen here. No border-radius override - the default computed 0px is what "radius 0" asks for. */ .cell--status { height: 36px; padding: 0; justify-content: center; } .cell--status .cell__text { color: #ffffff; } /* prd S14: blocked_by chip/badge. cell--name now has two possible siblings after .cell__text (see src/views/board.js nameCell) - shrink the name text instead of the fixed-width cell so a long name still truncates with ellipsis and the chip(s) stay visible, un-clipped. */ .cell--name .cell__text { flex: 1 1 auto; min-width: 0; } /* Not a monday capability - no capture exists to measure this against (see src/import-snapshot.js insertBlockedByEdges), so built from tokens already sourced from monday's own :root (S4) rather than an invented color: border/text reuse the same values S6/S7 already measured off the real capture. --primary-color is the one other real captured hex besides the per-label status colors, reserved here for "blocking N" since it is the stronger of the two signals (the thing another deal is waiting on) while "blocked by" itself stays neutral/informational. */ .chip { display: inline-flex; align-items: center; flex: 0 0 auto; height: 20px; padding: 0 8px; margin-left: 8px; border-radius: var(--border-radius-4, 4px); font-family: var(--font-family); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; } .chip--blocked-by { border: 1px solid #c3c6d4; color: #323338; } .chip--blocking { background-color: var(--primary-color, #0073ea); color: #ffffff; } /* prd S8: subitem expand. Not fidelity-gated (S8's done_when tests behavior, not style - no capture exists of monday's subitems expanded, see plans/progress.txt [S8]), so these values are ours to choose, same latitude S5/S6 had for layout properties outside the harness's EXACT_PROPS list. */ .item-row-details > summary { list-style: none; cursor: pointer; } .item-row-details > summary::-webkit-details-marker { display: none; } .chevron { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; margin-right: 10px; border-right: 2px solid rgb(103, 104, 121); border-bottom: 2px solid rgb(103, 104, 121); transform: rotate(-45deg); } .item-row-details[open] > summary .chevron { transform: rotate(45deg); } .subitem-table { display: flex; flex-direction: column; padding-left: 40px; background-color: rgb(246, 247, 251); } .subitem-header-row, .subitem-row { display: flex; gap: 24px; height: 36px; align-items: center; border-bottom: 1px solid #d0d4e4; } .subitem-header-cell { width: 140px; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; color: rgb(103, 104, 121); } .subitem-value { width: 140px; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; color: rgb(50, 51, 56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------------------- prd S13 Editing. No capture exists for any of this (monday's own edit surfaces - a status label picker, an item pane, a "move to group" menu - were never captured, same "not fidelity-gated" latitude S8 already established for interactive elements) - restrained to the app's own existing type scale (Figtree 13-14px) and spacing rhythm (8/12/16/24px), one accent color (--primary-color) reserved for the affirmative action in each form, never decorative. */ .item-expand { padding: 12px 12px 16px 40px; background-color: rgb(246, 247, 251); border-bottom: 1px solid #d0d4e4; display: flex; flex-direction: column; gap: 16px; } .panel-title { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 600; color: rgb(103, 104, 121); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .fields-panel, .tasks-panel, .notes-panel { max-width: 640px; } .field-edit, .task-edit, .task-add, .note-add { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .field-edit__label { width: 140px; flex: 0 0 auto; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; color: rgb(103, 104, 121); } .field-edit__control, .task-edit__title, .task-edit__owner, .task-edit__status, .task-edit__date, .task-add__title, .task-add__owner, .task-add__status, .task-add__date { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; color: rgb(50, 51, 56); padding: 4px 8px; border: 1px solid #c3c6d4; border-radius: 4px; background-color: #ffffff; } .task-edit__title, .task-add__title { flex: 1 1 auto; min-width: 140px; } .field-edit__button, .task-edit button, .task-add button, .note-add button { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 500; color: #ffffff; background-color: var(--primary-color); border: none; border-radius: 4px; padding: 5px 12px; cursor: pointer; } .task-complete button { background-color: #037f4c; } .task-delete button { background-color: transparent; color: rgb(103, 104, 121); border: 1px solid #c3c6d4; } .task-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding-left: 24px; } .note { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; color: rgb(50, 51, 56); background-color: #ffffff; border: 1px solid #d0d4e4; border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; white-space: pre-wrap; } .note-add { align-items: flex-start; } .note-add__text { flex: 1 1 auto; min-width: 280px; min-height: 32px; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; padding: 6px 8px; border: 1px solid #c3c6d4; border-radius: 4px; resize: vertical; } /* ---------------------------------------------------------------- my work prd S9. Values on the elements the fidelity harness checks (.my-work__title via [data-testid="my-monday-header"], the Group/Board/People/Date/Status header cells via text+testid="text", .bucket-title--past) are copied verbatim from captures/2026-09-23/my-work-desktop.json. Everything else (layout, the toolbar, unmeasured bucket colors) is ours to choose, same latitude every prior view story had - see plans/progress.txt [S9]. */ .nav-link { display: block; padding: 8px 16px; color: rgb(103, 104, 121); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; text-decoration: none; } .my-work__title { font-family: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 32px; font-weight: 500; line-height: 40px; letter-spacing: -0.5px; color: rgb(50, 51, 56); margin: 0 0 16px; } .my-work-toolbar { display: flex; gap: 12px; margin-bottom: 24px; } .my-work-filter-link { color: rgb(103, 104, 121); font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; text-decoration: none; } .my-work-filter-link--selected { color: var(--primary-color); font-weight: 600; } .my-work-bucket { margin-bottom: 32px; } /* Poppins 18px/24px weight 500, -0.1px - identical to .group-title (prd S6) and to the one bucket capture actually measured, Past Dates. The color is measured (rgb(127, 83, 71)) only for that one bucket; no capture exists of any other bucket populated, so the rest inherit .main-content's default text color instead of an invented per-bucket accent (rule: never estimate a value that isn't in a capture). */ .bucket-title { display: flex; align-items: baseline; gap: 8px; font-family: Poppins, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.1px; margin: 0 0 8px; } .bucket-title--past { color: rgb(127, 83, 71); } .bucket-title__count { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 400; color: rgb(103, 104, 121); } /* Figtree 14px/20px weight 600, color rgb(103, 104, 121) - measured off Group/Board/People/Date/Status in my-work-desktop.json (text2Medium, a semibold weight distinct from the board view's own 400-weight column headers - a real difference between the two monday surfaces, not a typo). */ .my-work-header-row { display: flex; gap: 24px; height: 20px; margin-bottom: 8px; } .my-work-header-cell { width: 140px; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 14px; font-weight: 600; line-height: 20px; color: rgb(103, 104, 121); text-decoration: none; } .my-work-header-cell--item { width: 320px; } .my-work-header-cell--sortable { cursor: pointer; } .my-work-row { display: flex; gap: 24px; height: 36px; align-items: center; border-bottom: 1px solid #d0d4e4; } .my-work-cell { width: 140px; overflow: hidden; } .my-work-cell--item { width: 320px; } .my-work-cell__text { font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; font-weight: 400; line-height: 36px; color: rgb(50, 51, 56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Full-bleed color block, not a rounded pill - same finding as prd S7's board-view status chip (see progress.txt [S7]), applied here too since monday's own my-work screenshot shows the identical edge-to-edge fill. */ .my-work-cell--status { display: flex; align-items: center; justify-content: center; height: 36px; } .my-work-cell--status-chip .my-work-cell__text { color: #ffffff; } .my-work-empty { padding: 8px 0; font-family: Figtree, Roboto, "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif; font-size: 15px; color: rgb(103, 104, 121); } /* prd S10: login / change-password. No monday capture exists for either surface (see src/views/login.js) so this is hand-styled against the shared tokens rather than fidelity-gated. */ .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; font-family: var(--font-family); } .auth-form { display: flex; flex-direction: column; gap: 12px; width: 320px; padding: 32px; border: 1px solid #c3c6d4; } .auth-form h1 { font-family: var(--title-font-family); font-size: 20px; margin: 0 0 8px; } .auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgb(103, 104, 121); } .auth-form input { font-family: var(--font-family); font-size: 15px; padding: 8px; border: 1px solid #c3c6d4; } .auth-form button { margin-top: 8px; padding: 8px; background-color: var(--primary-color); color: #ffffff; border: none; font-family: var(--font-family); font-size: 15px; cursor: pointer; } .auth-required { color: #323338; background: #fff4d6; padding: 8px 12px; border-radius: 4px; } .auth-error { color: #d83a52; font-size: 14px; margin: 0; } .auth-success { color: #00854d; font-size: 14px; margin: 0; } /* ------------------------------------------------------------- prd S11 Banner strip + admin view. No monday capture exists for either (neither has a monday counterpart at all), so hand-styled against the shared tokens, same latitude S10's auth pages already had. */ .banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 16px; background-color: #fff2cc; border-bottom: 1px solid #dfc879; font-family: var(--font-family); font-size: 13px; color: rgb(50, 51, 56); } .banner__notice { flex: 1 1 auto; } .banner__nudge { flex: 0 0 auto; color: var(--primary-color); font-weight: 600; text-decoration: none; white-space: nowrap; } .admin-view { max-width: 640px; } .admin-view__title { font-family: var(--title-font-family); font-size: 24px; font-weight: 500; margin: 0 0 16px; } .admin-view__summary { font-family: var(--font-family); font-size: 15px; margin: 0 0 16px; } .admin-view__table { border-collapse: collapse; width: 100%; font-family: var(--font-family); font-size: 14px; } .admin-view__table th, .admin-view__table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #d0d4e4; }