/* ============================================================================ Moedatech Sales — design system v1 Built from scratch for the sales product. Deliberately NOT the dashboard's system: this is a separate product with its own palette, type and shape. Do not import design-system/tokens.css here. Direction: the white studio equipment render. White body, cool graphite ground, darks reserved for the few parts that are genuinely dark. One signal colour, borrowed from hi-vis, spent only on urgency. Laptop first. The phone is the field case, not the design target. ========================================================================= */ /* ---- palette ------------------------------------------------------------ Cool graphite. The dashboard's neutrals are warm, so the two products can never be mistaken for each other even on a shared screen. */ :root{ --s0:#ffffff; --s5:#fafbfc; --s10:#f3f5f7; --s20:#e8eaee; --s30:#d7dae0; --s40:#b6bbc4; /* Measured, not asserted. The value that used to sit here claimed 4.6:1 and was actually 3.19:1 on --s5 and 2.74:1 on --s20, so every secondary line in the app failed AA. This one clears 4.5:1 on every ground it is used on. If it changes, measure it again. */ --s50:#667080; --s60:#5d646f; --s70:#3d434c; --s80:#262a31; --s90:#14171b; /* Signal. Hi-vis, and spent ONLY on time running out. If this colour shows up anywhere that is not urgency, the system is already leaking. */ /* #c8461a measured 4.42:1 on --bg: close enough to look fine and still a fail. This clears 4.5 on every ground the clock sits on while staying the same hi-vis hue. */ --signal:#bf4118; --signal-soft:#fbe9e3; /* Outcome. Rare by design: a queue row is neutral until it is resolved. */ --good:#1f6b4a; --good-soft:#e2efe9; /* Caution. Lived on .bidpanel alone until 10 Sep 2026, which meant three rules in the outreach worklist -- .rq.spsp, .rc-star and the "talking" status -- resolved to NOTHING, because #wl-body is a top-level view and never had the variable in scope. An SPSP chip rendered with no pill at all and "Negotiating" printed in body ink. Palette-level, so a surface cannot reference it and silently get nothing. */ --warn:#8a5a12; --warn-soft:#fdf3e3; --bg:var(--s10); --panel:var(--s0); --line:var(--s20); --line-strong:var(--s30); --ink:var(--s90); --ink-2:var(--s60); --ink-3:var(--s50); --font:'Instrument Sans','Noto Sans Arabic',-apple-system,BlinkMacSystemFont,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace; /* Type scale. Four steps, nothing between them. A dense table tempts you into 11.5 / 12.5 / 13.5 to make a row fit; that is drift, not hierarchy. If a size is not one of these four, it is a bug. */ /* Ratios checked, not assumed: 1.27 / 1.29 / 1.28. The first version of this scale was 11/13/16/20, which replaced drift with four numbers but left two of the three steps under 1.25 -- close enough that nothing separated a label from body text. Body moved 13 -> 14, which costs about 2px of row height and reads better. */ --t-micro:11px; --lh-micro:15px; /* labels, counts, secondary meta */ --t-body:14px; --lh-body:20px; /* everything a rep actually reads */ --t-mid:18px; --lh-mid:24px; /* page and panel titles */ --t-head:23px; --lh-head:30px; /* the one heading on a screen */ /* Shape lock: one radius. Chips are the single exception and they are pills. */ --r:6px; --r-pill:999px; /* Two curves, three durations. Never ease-in on interface. */ --out:cubic-bezier(.22,1,.36,1); --in-out:cubic-bezier(.65,0,.35,1); --t-fast:110ms; --t:180ms; --t-slow:320ms; --detail:400px; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --s0:#16191e; --s5:#1a1e24; --s10:#12151a; --s20:#272c34; --s30:#353b45; --s40:#4c545f; --s50:#8e96a2; --s60:#aeb5bf; --s70:#cbd1d9; --s80:#e4e8ed; --s90:#f5f7f9; --signal:#f0733f; --signal-soft:#3a221a; --good:#5cb98d; --good-soft:#163025; --warn:#e0a350; --warn-soft:#3a2a12; --bg:var(--s10); --panel:var(--s5); --line:var(--s20); --line-strong:var(--s30); } } :root[data-theme="dark"]{ --s0:#16191e; --s5:#1a1e24; --s10:#12151a; --s20:#272c34; --s30:#353b45; --s40:#4c545f; --s50:#8e96a2; --s60:#aeb5bf; --s70:#cbd1d9; --s80:#e4e8ed; --s90:#f5f7f9; --signal:#f0733f; --signal-soft:#3a221a; --good:#5cb98d; --good-soft:#163025; --warn:#e0a350; --warn-soft:#3a2a12; --bg:var(--s10); --panel:var(--s5); --line:var(--s20); --line-strong:var(--s30); } *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--t-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } [dir="rtl"] body{ font-feature-settings:"ss01"; } /* Every number is mono. In a queue the eye scans columns of figures, and proportional digits make that column ragged. */ .num,time,.metric{font-family:var(--mono);font-variant-numeric:tabular-nums} button,input,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0} a{color:inherit} ::selection{background:var(--s80);color:var(--s0)} :where(a,button,input,select,[tabindex]):focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:var(--r); } /* ---- viewing as -------------------------------------------------------- Deliberately outside the app's palette: it is not part of the product, it is a state the product is in. Same treatment as the dashboard banner. */ .viewing{ position:sticky;top:0;z-index:60; display:flex;align-items:center;justify-content:center; padding:7px 14px; background:#7c2d12;color:#fff; font-size:var(--t-micro);line-height:var(--lh-micro);font-weight:600; letter-spacing:.01em; } /* The frame is a full-height grid, so a banner above it has to come out of that height or the bottom of the app falls off the screen. */ body:has(.viewing) .app{height:calc(100dvh - 29px)} /* ---- app frame --------------------------------------------------------- One column. The rail is gone: its nine destinations hang off the page title instead, which gives the table the full window. The detail panel still docks on the side; on a phone it still becomes a sheet and the bottom bar still carries navigation, exactly as before. */ .app{ display:grid; grid-template-columns:minmax(0,1fr); height:100dvh; overflow:hidden; } /* The old rail, now a menu under the title. Same children, same ids: only the box around them changed. */ .navmenu{ position:absolute;top:52px;left:50%;transform:translateX(-50%); z-index:60;width:250px;max-height:min(70vh,560px);overflow:auto; background:var(--panel);border:1px solid var(--line-strong); border-radius:10px;box-shadow:0 14px 40px rgba(20,23,27,.16); padding:8px 0 4px; } .navmenu[hidden]{display:none} .nav{padding:6px 8px;display:flex;flex-direction:column;gap:1px} .nav-item{ display:flex;align-items:center;gap:10px; padding:7px 8px;border-radius:var(--r); color:var(--ink-2); transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out); text-decoration:none; width:100%; } .nav-item svg{width:16px;height:16px;flex:none;stroke-width:1.6} .nav-item:hover{background:var(--s10);color:var(--ink)} .nav-item[aria-current="page"]{background:var(--s20);color:var(--ink);font-weight:550} .nav-count{ margin-inline-start:auto; font-family:var(--mono);font-size:var(--t-micro); color:var(--ink-3);font-variant-numeric:tabular-nums; } .rail-foot{padding:8px;border-top:1px solid var(--line);margin-top:4px} .new-btn{ display:flex;align-items:center;justify-content:center;gap:7px; width:100%;padding:9px;border-radius:var(--r); background:var(--ink);color:var(--s0); font-size:var(--t-body);font-weight:550; transition:transform var(--t-fast) var(--out),opacity var(--t-fast) var(--out); } .new-btn svg{width:15px;height:15px;stroke-width:2} .new-btn:hover{opacity:.88} .new-btn:active{transform:translateY(1px)} /* ---- main --------------------------------------------------------------- */ .main{display:flex;flex-direction:column;min-width:0;min-height:0} .topbar{ position:relative; /* The header is a LAYER, not just a bar, and it has to be one for the account menu to be usable at all. The menu hangs out of this header over the table and already carried z-index:140, which by the rules should have settled it -- the table's sticky header cells are z-index:2. It did not. A position:sticky cell inside a scrolling container gets its own composited layer, and that layer painted OVER the menu: elementsFromPoint at the "Open" column returned TH -> whoas -> whomenu, so the top third of the menu was covered by table headings and half its rows were unclickable. Raising the menu further would not have fixed it, because the two were not really being compared. Giving the header its own stacking context is: the whole header subtree now sorts above the whole scroll subtree in one decision, and no individual z-index inside either has to be tuned again. 100, not 200: it must sit BELOW the modal veil at 120, so a dialog still covers the header rather than the header punching through it. */ z-index:100; display:flex;align-items:center;gap:12px; padding:0 18px;height:58px;flex:none; border-bottom:1px solid var(--line); background:var(--panel); } .hdr-right{margin-inline-start:auto;display:flex;align-items:center;gap:10px;z-index:1} /* Centred on the HEADER, not on the space left between the tabs and the identity chip -- flowed centring drifts every time either side changes width, and the right side changes width the moment initials go from two letters to one. */ .ttl{ position:absolute;inset-inline:0; display:flex;justify-content:center;pointer-events:none; } .ttl-b{ pointer-events:auto; display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--r); font-size:var(--t-mid);line-height:var(--lh-mid);font-weight:650; letter-spacing:-.01em;color:var(--ink); transition:background var(--t-fast) var(--out); } .ttl-b:hover{background:var(--s10)} .ttl-b .caret{width:15px;height:15px;opacity:.55} .ttl-b[aria-expanded="true"] .caret{transform:rotate(180deg)} .ttl-b[aria-expanded="true"]{background:var(--s10)} /* The page title is the top of the hierarchy and was sitting at the same size as a panel heading, so the tallest thing on screen was only 1.3x body. --t-head existed and was going unused outside the sign-in screen. */ .h1{font-size:var(--t-head);line-height:var(--lh-head);font-weight:600;letter-spacing:-.02em;margin:0} .search{ position:relative;width:260px;max-width:38vw; } .search input{ width:100%;padding:7px 10px 7px 30px; background:var(--bg); border:1px solid transparent;border-radius:var(--r); transition:border-color var(--t-fast) var(--out),background var(--t-fast) var(--out); } .search input::placeholder{color:var(--ink-3)} .search input:focus{background:var(--panel);border-color:var(--line-strong);outline:none} .search svg{ position:absolute;left:9px;top:50%;transform:translateY(-50%); width:14px;height:14px;color:var(--ink-3);pointer-events:none; } [dir="rtl"] .search input{padding:7px 30px 7px 10px} [dir="rtl"] .search svg{left:auto;right:9px} .who{ width:26px;height:26px;border-radius:var(--r-pill); background:var(--s20);color:var(--ink-2); display:grid;place-items:center; font-size:var(--t-micro);font-weight:600;flex:none; } /* ---- the side filter ---------------------------------------------------- The master control: which half of the market a rep is working. It sits immediately left of the search because it governs the search too, and reading left to right the narrowing happens before the query. */ .sides{ display:flex;align-items:center;gap:18px;flex:none;z-index:1; } /* Underlined text, not pills. Exactly one is pressed at any moment, so the selected one has to be unmistakable rather than merely darker -- the rule under it is what carries that, and the weight change backs it up. */ .side-x{ font:inherit;font-size:var(--t-body);font-weight:550; color:var(--ink-3);background:none;border:0;cursor:pointer; padding:19px 0 17px;line-height:1;white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--t-fast) var(--out),border-color var(--t-fast) var(--out); } .side-x:hover{color:var(--ink)} .side-x[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:650} /* The same New, in reach of the filters a rep is already using. Icon only: the sidebar button carries the word, this is the shortcut. */ .side-new{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:var(--r-pill); border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2); cursor:pointer;flex:none; transition:background var(--t-fast) var(--out),border-color var(--t-fast) var(--out), color var(--t-fast) var(--out); } .side-new svg{width:16px;height:16px;display:block} .side-new:hover{background:var(--ink);border-color:var(--ink);color:var(--panel)} /* Rewind undoes a close. Quiet by default: it is a correction, not an action a rep should be invited to take on a row they closed correctly. */ .rewind{ font:inherit;font-size:var(--t-micro);line-height:1; padding:6px 11px;border-radius:var(--r-pill); border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2); cursor:pointer; transition:background var(--t-fast) var(--out),border-color var(--t-fast) var(--out), color var(--t-fast) var(--out); } .rewind:hover{background:var(--ink);border-color:var(--ink);color:var(--panel)} .rewind:disabled{opacity:.55;cursor:default} /* ---- grouped buckets ---------------------------------------------------- A family of buckets behind one chip. The count reads as the family total until something is picked, then as how many of the family are on -- so the chip always answers "how much is in here" or "how much have I narrowed to". */ .chip.grp{display:inline-flex;align-items:center;gap:6px} .chip.grp .caret{width:13px;height:13px;opacity:.55;flex:none} .chip.grp[aria-expanded="true"] .caret{transform:rotate(180deg)} .bkt-menu{ position:fixed;z-index:60;min-width:216px; background:var(--panel);border-radius:var(--r); box-shadow:0 1px 2px rgba(20,23,27,.10), 0 10px 26px -8px rgba(20,23,27,.24); padding:5px; } .bkt-opt{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:var(--r);cursor:pointer; font-size:var(--t-body);color:var(--ink); transition:background var(--t-fast) var(--out); } .bkt-opt:hover{background:var(--s10)} .bkt-opt span{flex:1;min-width:0} .bkt-opt input{ width:15px;height:15px;flex:none;accent-color:var(--ink);cursor:pointer;margin:0; } .bkt-opt .n{ font-family:var(--mono);font-size:var(--t-micro);font-weight:400; color:var(--ink-3);font-variant-numeric:tabular-nums; } /* The forward move in the OS pipeline is the one a rep is usually here to make, so it carries weight; the reverse ones stay quiet. */ .rewind.go{background:var(--ink);border-color:var(--ink);color:var(--panel)} .rewind.go:hover{opacity:.9} .bucket[data-b="os_prospect"]{background:var(--s20);color:var(--ink-2)} .bucket[data-b="os_trial"]{background:var(--accent-soft,#e4edf5);color:#1f5c8b} .bucket[data-b="os_paid"]{background:var(--good-soft);color:var(--good)} .bucket[data-b="os_churned"]{background:var(--s20);color:var(--ink-3)} /* ---- status as a row tone ----------------------------------------------- A stripe on the row instead of a word in a column. Only the two failures carry a tint as well: if every state were tinted, none of them would read as a warning. */ .q tbody tr[data-tone]{box-shadow:inset 3px 0 0 var(--tone, transparent)} .q tbody tr[data-tone="bad"] {--tone:#bf4118;background:rgba(191,65,24,.045)} .q tbody tr[data-tone="warn"] {--tone:#c98a2e;background:rgba(201,138,46,.04)} .q tbody tr[data-tone="live"] {--tone:#1f5c8b} .q tbody tr[data-tone="good"] {--tone:#1f6b4a} .q tbody tr[data-tone="done"] {--tone:var(--line-strong)} .q tbody tr[data-tone="bad"]:hover {background:rgba(191,65,24,.075)} .q tbody tr[data-tone="warn"]:hover{background:rgba(201,138,46,.07)} /* The key for the row stripes. Quiet, and next to the rows it explains. */ .legend{display:flex;align-items:center;gap:12px;flex:none;padding-inline-start:14px} .lg-i{display:inline-flex;align-items:center;gap:5px; font-size:var(--t-micro);line-height:1;color:var(--ink-3);white-space:nowrap} .lg-i i{width:9px;height:9px;border-radius:2px;display:block;background:var(--line-strong)} .lg-i i[data-tone="bad"] {background:#bf4118} .lg-i i[data-tone="warn"]{background:#c98a2e} .lg-i i[data-tone="live"]{background:#1f5c8b} .lg-i i[data-tone="good"]{background:#1f6b4a} .lg-i i[data-tone="done"]{background:var(--line-strong)} /* Three controls, one cell. Forward and gone are quiet until hovered; the trophy is the one worth noticing. */ .row-acts{display:inline-flex;align-items:center;gap:2px} .tick.trophy:hover{color:#a8791f;background:rgba(168,121,31,.10)} .tick.bad:hover{color:var(--signal);background:var(--signal-soft)} @media (max-width:1100px){ .legend{display:none} } /* Verified. Green, small, and only ever present when true. Sits on the text baseline so it reads as part of the name rather than a column of its own. */ .ver{ width:13px;height:13px;display:inline-block;vertical-align:-2px; margin-inline-start:6px;color:var(--good);flex:none; } /* The machine mark. Fixed at two states -- one machine or several -- so a rep learns two shapes instead of decoding a different silhouette every row. */ .equip-btn{position:relative} .equip-n{ position:absolute;top:-2px;inset-inline-end:-4px; min-width:14px;height:14px;padding:0 3px;border-radius:99px; background:var(--ink);color:var(--panel); font:500 9px/14px var(--mono);text-align:center; } /* ---- the fulfillment wizard --------------------------------------------- */ .ff-seg{display:flex;gap:4px;padding:12px 12px 0;flex-wrap:wrap} .ff-seg-b{ font:inherit;font-size:var(--t-micro);line-height:1;padding:8px 11px; border:1px solid var(--line-strong);background:var(--panel);color:var(--ink-2); border-radius:var(--r-pill);cursor:pointer; } .ff-seg-b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--panel)} .ffa-list{display:flex;flex-direction:column;gap:8px} .ffa{border:1px solid var(--line-strong);border-radius:var(--r);padding:9px 10px;background:var(--panel)} .ffa-top{display:flex;align-items:baseline;gap:8px} .ffa-mode{ font:500 9px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase; padding:3px 5px;border-radius:3px;background:var(--s20);color:var(--ink-3);flex:none; } .ffa-name{flex:1;min-width:0;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ffa-ph{font-weight:400;color:var(--ink-3);font-family:var(--mono);font-size:var(--t-micro)} .ffa-tot{font-family:var(--mono);font-size:var(--t-micro);color:var(--good);font-variant-numeric:tabular-nums} .ffa-x{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;padding:0 3px} .ffa-x:hover{color:var(--signal)} .ffa-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .ffa-f label{ display:flex;flex-direction:column;gap:3px; font-size:10px;color:var(--ink-3);letter-spacing:.03em; } .ffa-f input,.ffa-f select{ font:inherit;font-size:var(--t-micro);padding:6px 7px; border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink); width:88px;font-variant-numeric:tabular-nums; } .ffa-f input[type=date]{width:126px} /* The documented data error in this product: a monthly rate typed as daily. */ .ffa-warn{margin-top:7px;font-size:var(--t-micro);color:var(--signal)} .ff-bids{display:flex;flex-direction:column;gap:4px} .ff-bid{ display:flex;align-items:baseline;gap:10px;width:100%;text-align:start; padding:7px 9px;border-radius:var(--r);border:1px solid var(--line); background:var(--panel);cursor:pointer;font:inherit; } .ff-bid:hover{border-color:var(--ink-3)} .ff-bid-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ff-bid-amt{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2)} .ff-off{display:flex;gap:6px;flex-wrap:wrap} .ff-off input{ flex:1;min-width:110px;font:inherit;font-size:var(--t-body);padding:8px 10px; border:1px solid var(--line-strong);border-radius:var(--r);background:var(--panel);color:var(--ink); } .ff-tot{ display:flex;justify-content:space-between;align-items:baseline; padding:12px;border-top:1px solid var(--line); font-size:var(--t-micro);color:var(--ink-3); } .ff-tot b{font-family:var(--mono);font-size:var(--t-mid);color:var(--ink);font-variant-numeric:tabular-nums} /* ---- drawer detail rows -------------------------------------------------- */ .f-row{display:flex;gap:12px;align-items:baseline;padding:5px 12px} .f-k{width:118px;flex:none;font-size:var(--t-micro);color:var(--ink-3)} .f-v{flex:1;min-width:0;font-size:var(--t-body);color:var(--ink);unicode-bidi:plaintext;overflow-wrap:anywhere} .chips{display:flex;gap:6px;flex-wrap:wrap;padding:12px} .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px} .tile{border:1px solid var(--line);border-radius:var(--r);padding:9px 10px} .tile b{display:block;font-size:var(--t-mid);font-weight:600;font-variant-numeric:tabular-nums} .tile span{font-size:var(--t-micro);color:var(--ink-3)} .cust-req{ display:flex;align-items:baseline;gap:9px;width:100%;text-align:start; padding:7px 12px;border:0;background:none;cursor:pointer;font:inherit; transition:background var(--t-fast) var(--out); } .cust-req:hover{background:var(--s10)} .cr-code{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);flex:none} .cr-eq{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cr-when{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-3);flex:none} /* ---- scrollbars --------------------------------------------------------- Hidden everywhere the app scrolls. The platform bar here renders with arrow buttons and a heavy track, which reads as a control to operate rather than the passive edge of a list -- and the content already runs to the edge, so there is nothing to discover. Scrolling itself is untouched: wheel, trackpad, keys and touch all behave exactly as before, and focus still scrolls into view. */ .scroll,.dock-body,.sheet-body,.find,.bkt-menu,.q-wrap,.view{ scrollbar-width:none; /* Firefox */ -ms-overflow-style:none; /* old Edge */ } .scroll::-webkit-scrollbar, .dock-body::-webkit-scrollbar, .sheet-body::-webkit-scrollbar, .find::-webkit-scrollbar, .bkt-menu::-webkit-scrollbar, .q-wrap::-webkit-scrollbar, .view::-webkit-scrollbar{width:0;height:0;display:none} /* A printed phone number is a control. It looks like text until you approach it, so it never shouts, but the cursor and the hover say it can be taken. */ .tel{ font:inherit;font-family:var(--mono);font-size:inherit; color:inherit;background:none;border:0;padding:1px 3px;margin:0 -3px; border-radius:3px;cursor:pointer;unicode-bidi:plaintext; transition:background var(--t-fast) var(--out),color var(--t-fast) var(--out); } .tel:hover{background:var(--s20);color:var(--ink)} .tel.copied{background:var(--good-soft);color:var(--good)} .find-meta .tel{font-size:var(--t-micro)} .ffa-ph + .tel{font-size:var(--t-micro);color:var(--ink-3)} /* ---- find --------------------------------------------------------------- */ .find{ /* Anchored to the input's end edge and allowed to be wider than it: the input is a compact affordance, the results are the actual reading. FIXED, not absolute. .app is the 100dvh grid shell and carries overflow:hidden -- that clip is load-bearing, it is what stops the page itself scrolling while .scroll does the scrolling. An absolutely positioned dropdown inside it is clipped by it, which costs nothing at a tall window and silently cuts the results off at a short one. Fixed escapes the clip; findAnchor() puts it under the input and sizes it to the room actually left on screen. */ /* NO min-width HERE. There used to be one, with a comment saying it "has to yield to the max-width findAnchor() sets" — which is not how the cascade works. min-width beats max-width, always, so the floor won and the panel ran off the edge of the window exactly as the comment feared. findAnchor() now sets BOTH bounds inline from one measurement of the room available; leaving a floor here would be a second opinion about the same number. */ position:fixed;z-index:50; box-sizing:border-box;overflow-x:hidden; /* Elevation, not elevation plus a drawn edge. A tight contact shadow does the work a border was doing -- separating the panel from what it covers -- and the wider ambient one carries the height. */ background:var(--panel);border-radius:var(--r); box-shadow:0 1px 2px rgba(20,23,27,.10), 0 8px 20px -6px rgba(20,23,27,.20); overflow:auto;display:none;padding:4px; /* max-height is set by findAnchor */ } .find.on{display:block} .find-h{ font-size:var(--t-micro);line-height:var(--lh-micro);color:var(--ink-3); letter-spacing:.03em;padding:8px 10px 4px; } /* A grid, not a flex row. Under flex the name was the only shrinkable child, so a long company tag squeezed it to nothing -- a result row that showed a phone number and no name at all. Columns give the name a guaranteed share and make the tag the thing that truncates. */ .find-row{ display:grid;grid-template-columns:minmax(0,1.5fr) auto minmax(0,1fr); align-items:baseline;gap:10px;width:100%; padding:7px 10px;border-radius:var(--r);text-align:start; transition:background var(--t-fast) var(--out); } .find-row:hover{background:var(--s10)} .find-nm,.find-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* plaintext: an Arabic name in an otherwise-English list keeps its own direction, so it truncates at its own end rather than losing its first word */ .find-nm{font-weight:550;unicode-bidi:plaintext} .find-meta{font-family:var(--mono);font-size:var(--t-micro);color:var(--ink-2);white-space:nowrap} .find-tag{font-size:var(--t-micro);color:var(--ink-3);text-align:end} .find-empty{padding:12px 10px;font-size:var(--t-micro);color:var(--ink-3)} /* ---- filter strip ------------------------------------------------------- */ /* Search and the chips filter the same list, so they share one row. The row owns the padding and the rule; .strip is just the scrolling part inside it. */ .filters{ display:flex;align-items:center;gap:10px; padding:9px 18px;flex:none; border-bottom:1px solid var(--line); background:var(--panel); min-width:0; } .filters .search{width:230px;flex:none} .filters .search input{border-radius:var(--r-pill);background:var(--s10);border-color:transparent} .filters .search input:focus{background:var(--panel);border-color:var(--line-strong)} .strip{ display:flex;align-items:center;gap:6px; flex:1;min-width:0; background:var(--panel); overflow-x:auto;scrollbar-width:none; } .strip::-webkit-scrollbar{display:none} .chip{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:var(--r-pill); border:1px solid var(--line-strong); color:var(--ink-2);white-space:nowrap; font-size:var(--t-body); transition:border-color var(--t-fast) var(--out),background var(--t-fast) var(--out),color var(--t-fast) var(--out); } .chip:hover{border-color:var(--s40);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--s0)} .chip .n{font-family:var(--mono);font-size:var(--t-micro);font-variant-numeric:tabular-nums;opacity:.7} .chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px} #pf-body .facts{grid-template-columns:92px 1fr} .strip-sep{width:1px;height:18px;background:var(--line);flex:none;margin:0 4px} .strip-right{ margin-inline-start:auto; display:flex;align-items:center;gap:6px;flex:none; padding-inline-start:14px; } /* ---- queue table ------------------------------------------------------- Laptop gets a real table. The phone gets the same rows as cards, driven by data-label, so there is one renderer and not two. */ .scroll{overflow:auto;flex:1;min-height:0} .q{width:100%;border-collapse:collapse} .q thead th{ position:sticky;top:0;z-index:2; background:var(--bg); text-align:start;font-weight:500;font-size:var(--t-micro);line-height:var(--lh-micro); letter-spacing:.02em;color:var(--ink-3); padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap; } .q tbody tr{ border-bottom:1px solid var(--line); transition:background var(--t-fast) var(--out); cursor:pointer; } .q tbody tr:hover{background:var(--panel)} .q tbody tr[aria-selected="true"]{background:var(--panel);box-shadow:inset 2px 0 0 var(--ink)} .q td{padding:9px 12px;vertical-align:middle} .lead-name{font-weight:550;letter-spacing:-.005em} /* The supplier name is a way into the supplier page, so it has to look like one -- but quietly. A blue link in a dense table is the loudest thing on the row and it is not the most important thing on the row. */ .lead-link{ color:inherit;text-decoration:underline;text-decoration-color:var(--s30); text-underline-offset:3px;cursor:pointer; transition:text-decoration-color var(--t-fast) var(--out); } .lead-link:hover{text-decoration-color:var(--ink)} /* Put in a bucket by a person rather than computed into it. Said on the row, not on hover: a row that is there because somebody decided so is a different fact from one the definition caught, and a rep reading the list is entitled to know which they are looking at. */ .lead-hand{ color:var(--ink-3);font-size:var(--t-micro);line-height:var(--lh-micro); margin-top:2px;font-family:var(--mono); } /* Machines and yards, in words. "70 · 1y" joined two different quantities with a dot and labelled only the second, with a single letter. */ .fleetcell{line-height:var(--lh-body)} .fleetcell b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600} .fleetcell-sub{color:var(--ink-3);font-size:var(--t-micro);line-height:var(--lh-micro)} /* One person, not a business. Outlined rather than filled: it is a fact about the record, not a status somebody should act on, and the row it sits on is already carrying a stage chip that IS one. Deliberately not --signal — a one-man yard is a perfectly good customer, not a problem. */ .indiv{ display:inline-block;margin-inline-start:6px;padding:1px 7px; border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink-3);font-size:var(--t-micro);line-height:var(--lh-micro); vertical-align:middle;white-space:nowrap; } /* ---- the pager ---------------------------------------------------------- Prospect stopped being 72 rows the day it started meaning every supplier by latest role. It lives in #state, the strip the empty and error states already own, so there is one place under the table rather than three. */ .pager{ display:flex;align-items:center;gap:8px; padding:10px 18px;border-top:1px solid var(--line); } .pager-txt{ flex:1;min-width:0;font-family:var(--mono);font-size:var(--t-micro); color:var(--ink-3);font-variant-numeric:tabular-nums; } .pg{ font:inherit;font-size:var(--t-micro);padding:5px 12px; border-radius:var(--r-pill);border:1px solid var(--line-strong); background:var(--panel);color:var(--ink-2);cursor:pointer; transition:border-color var(--t-fast) var(--out),color var(--t-fast) var(--out); } .pg:hover:not(:disabled){border-color:var(--ink);color:var(--ink)} .pg:disabled{opacity:.45;cursor:default} .lead-sub{color:var(--ink-3);font-size:var(--t-micro);line-height:var(--lh-micro);margin-top:2px} /* Equipment thumbnail. The silhouette is the label — this is why the render set has to keep one facing direction. */ /* Drawn, not photographed. Inherits currentColor so it themes with everything else, and holds its shape at 38px where a photo would be a smudge. */ .equip{ width:38px;height:26px; color:var(--ink-3); flex:none;display:block; transition:color var(--t-fast) var(--out); } tr:hover .equip, tr[aria-selected="true"] .equip{color:var(--ink)} .empty-mark{width:64px;height:44px;color:var(--s30);display:block} .bucket{ display:inline-block;padding:2px 8px;border-radius:var(--r-pill); background:var(--s20);color:var(--ink-2); font-size:var(--t-micro);line-height:var(--lh-micro);white-space:nowrap; } /* A disqualify is not a step on any ladder, so it does not borrow a ladder colour. Its own chip, in the signal colour the disqualify block itself uses, because the two are the same decision seen from either end. */ .bucket.dq{background:var(--signal-soft);color:var(--signal);font-weight:550} /* The reason it left, under the chip. Wraps -- a reason worth recording is usually a sentence, and truncating it to one line would leave the record looking like a label. */ .cl-note{ margin-top:3px;max-width:38ch;white-space:normal; font-size:var(--t-micro);line-height:var(--lh-micro);color:var(--ink-3); } /* The request ladder is ORDINAL, so it reads as one deepening ramp rather than a set of unrelated hues. The dashboard says the same thing in a warm family; this system is monochrome, and a monochrome ramp carries "further along" better than colour does anyway. Recurring is the one break in the ramp, and it earns it: at four requests they are not a lead with a request, they are a customer with a habit, and that is a different call. */ .bucket[data-b="first_request"]{background:var(--s20);color:var(--ink-2)} .bucket[data-b="second_request"]{background:var(--s30);color:var(--ink)} /* --ink, not --s0. White on s40 measures 1.93:1 and fails AA outright; ink on the same ground is 9.33:1. The ramp still deepens through the background, which is what carries the ordering anyway. */ .bucket[data-b="third_request"]{background:var(--s40);color:var(--ink)} .bucket[data-b="recurring_request"]{background:var(--good-soft);color:var(--good)} /* The two shared-link buckets are one story, not two: money on the table from someone never signed. Outlined rather than filled, so they read as a pair and stay distinct from the ladder without adding a second accent. */ .bucket[data-b="link_no_account"], .bucket[data-b="link_not_converted"]{ background:transparent;color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line-strong); } .bucket[data-b="link_not_converted"]{color:var(--ink)} /* A bucket this row also qualified for, but did not win. Present, secondary, never mistaken for the one that decides the call. */ .bucket.ghost{ background:transparent;color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); margin-inline-start:4px; } /* ============ THE QUEUE'S CELLS SPEAK ONE LANGUAGE ======================== Six columns had six visual systems: a 44px fill track, a 16px SVG ring, a filled black pill, three numbers joined by slashes with a 16px (i) beside them, five coloured status variants, and five different renderings of an em dash. Every one of them was defensible alone. Together they made a row that has to be READ rather than scanned, and colour that meant four unrelated things within 900 pixels. The rule now: THE VALUE IS THE CELL. One numeric treatment, one chip, one absence, and colour reserved for the single thing on this desk worth interrupting a scan for — work that has gone cold or cannot be served. ======================================================================== */ /* Every number in the table, one treatment. Tabular so a column scans as a column: without it, 8 and 11 sit at different widths and the eye has to re-find the left edge on every row. */ .metric{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:var(--t-body);color:var(--ink-2);line-height:1; } /* Weight, not colour, carries the distinction — a thin request is quiet and a strong one is not, and neither of them is an alarm. */ .metric.hi{color:var(--ink);font-weight:600} .metric.lo{color:var(--ink-3)} /* ONE ABSENCE. This was .sup-na, .real-n, .bids-0, .mini-empty and a bare string, all rendering the same character at four different weights, so a column of nothing looked like four different kinds of nothing. */ .dash{ font-family:var(--mono);font-size:var(--t-body);color:var(--s40); font-variant-numeric:tabular-nums; } .bids{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:var(--t-body)} /* The bid count. It was a filled black pill and it pulled the eye off the lead's name on every row, including the ones reading 1. A count is not a decision: it sits at the weight of every other number, and the affordance arrives when the pointer does. */ .bid-chip{ display:inline-flex;align-items:center;gap:3px; padding:2px 6px;margin-inline-start:-6px;border-radius:var(--r); background:transparent;color:var(--ink); transition:background var(--t-fast) var(--out); } .bid-chip-n{ font-family:var(--mono);font-variant-numeric:tabular-nums; font-size:var(--t-body);font-weight:600; } /* The chevron is the promise that this opens something. It costs nothing until it is wanted, and reserving its width stops the row shifting on hover. */ .bid-chip svg{ width:11px;height:11px;opacity:0; transition:opacity var(--t-fast) var(--out); } @media (hover:hover) and (pointer:fine){ .bid-chip:hover{background:var(--s10)} .bid-chip:hover svg{opacity:.55} } .bid-chip:focus-visible svg{opacity:.55} .bid-chip:active{transform:scale(.97)} /* Status is context, not a call to action, so it stays quiet next to the chip. Only the two that mean "stop working this" carry any colour. */ .req-status{ display:inline-block;padding:2px 8px;border-radius:var(--r-pill); background:var(--s10);color:var(--ink-2); font-size:var(--t-micro);line-height:var(--lh-micro);white-space:nowrap; } /* The per-STATUS rules are gone with the per-status labels. Nothing emits data-s on a request any more — every surface folds through reqState and carries data-fam — so these could only ever have matched a caller that had not been folded yet, which is the drift they would have hidden. */ /* The age. The ring is gone; what it did that the number could not was give a glance, and a dot does that at a tenth of the ink. Present only when the row has gone cold — a marker on every row marks nothing. */ .clock{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:var(--t-body); font-variant-numeric:tabular-nums;color:var(--ink-2); white-space:nowrap;line-height:1; } .clock-n{line-height:1} .clock.warm{color:var(--ink)} .clock.hot{color:var(--signal);font-weight:600} .clock-dot{ width:5px;height:5px;border-radius:var(--r-pill); background:currentColor;flex:none; } .owner{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--t-body)} .owner-dot{ width:22px;height:22px;border-radius:var(--r-pill); background:var(--s20);display:grid;place-items:center; font-size:var(--t-micro);font-weight:600;color:var(--ink-2);flex:none; } .unowned{color:var(--ink-3)} .tick{ width:26px;height:26px;border-radius:var(--r); border:1px solid var(--line-strong); display:grid;place-items:center;color:var(--ink-3); transition:border-color var(--t-fast) var(--out),color var(--t-fast) var(--out),background var(--t-fast) var(--out); } .tick svg{width:14px;height:14px;stroke-width:2} .tick:hover{border-color:var(--good);color:var(--good);background:var(--good-soft)} /* ---- ownership controls ------------------------------------------------ One control per cell. The previous version drew the owner as a chip and then put a separate select underneath it repeating the same name, which read as two answers to one question and made every row two lines tall. */ .claim{ padding:3px 10px;border-radius:var(--r-pill); border:1px solid var(--line-strong);color:var(--ink-2); font-size:var(--t-micro); transition:border-color var(--t-fast) var(--out),color var(--t-fast) var(--out),background var(--t-fast) var(--out); } .claim:hover{border-color:var(--ink);color:var(--ink);background:var(--s10)} /* The card is the button. The