/* ============================================================================
crm-shell2.css — the new CRM shell. DELIBERATELY EMPTY.
Created 11 Aug 2026, Track B slice 3. This file is the VAN, and it ships
before anything is loaded into it: the delivery mechanism is proved to work
— new file on disk, linked from the page, reachable behind the switch, seen
by the gates, byte-identical screenshots on both sides — while it still
contains nothing that could have changed a pixel. A mechanism proved after
it carries cargo cannot be told apart from the cargo.
── WHY A SECOND FILE AT ALL ─────────────────────────────────────────────────
There is ONE stylesheet for both pages, and 49 classes appear in both pages'
markup. Redesigning the CRM by editing that file edits the quote portal in
the same breath — and the quote portal is what the BD team quotes real
customers with, on production, today. A file that only crm.html loads cannot
reach index.html. That is a guarantee made by a file boundary rather than by
being careful, and this codebase has a written record of being careful
failing silently.
── WHAT MAY GO IN HERE ──────────────────────────────────────────────────────
The new shell's layout, and nothing else. Specifically NOT:
· Colour literals. The raw-hex ratchet stands at 302 with hexOutside at
exactly 302 — ZERO headroom — and D17 says the ratchet may fall, never
rise. Use var(--token) against the 36 tokens styles.css already declares.
If this file ever needs its own :root, uicheck now sums every :root block
rather than only the first (fixed in the same commit as this file), but
the ratchet still has no slack: adding a colour is a deliberate act that
goes to Shaf, not a side effect of a layout change.
· Re-declarations of a class styles.css already defines, until the D20
question is settled. uicheck's rule-conflict check keys on
selector|property across the CONCATENATION of every stylesheet, so a
deliberate cross-file override reads to it as the same class defined
twice — a hard error with no legal way to silence it, because
KNOWN_CONFLICTS may shrink and never grow. Deciding what D20 means across
a file boundary is a doctrine change, and doctrine is Shaf's.
⚠ The way to sidestep it entirely is to give the new shell NEW class
names. A new shell is not a re-skin of the old classes; it is a different
shell that happens to sit on the same page. Prefer that.
── AND THE TRAP THAT IS ALREADY PROVEN ──────────────────────────────────────
styles.css:2552 is `.crm-page .main-nav .nav-btn` — specificity (0,3,0).
Every scoping scheme proposed for this file so far is weaker and LOSES in
every file order, no matter which stylesheet is linked second: `.crm-shell2
.nav-btn` is (0,2,0) and `body.shell-v2 .nav-btn` is (0,2,1). A rule that
cannot WIN is a lie (D33), and the sidebar would have shipped with the old
nav padding silently winning while every gate stayed green.
Measure computed style on the real element. Never infer it from this file.
============================================================================ */
/* ============================================================================
SLICE 4 — the deal list, read on a phone. The first cargo in the van.
Shaf named this surface in his own words on 9 Aug — "ye senarai deal nak baca
di phone" — which is what makes it the fourth screen held to 390px as a build
gate (N7). It was named that day and gated NOWHERE until 11 Aug.
Nine columns of a table do not fit in 390px and never will: measured, the
panel scrolled sideways by 493px. Sideways scrolling to read one deal row is
not reading, so below 768px each row becomes a CARD and each cell becomes a
labelled field.
⚠ NOTHING IS DROPPED, SEN INCLUDED. Not a design flourish — Shaf's reason,
recorded: a number that vanishes on a phone is a number somebody will assume
is zero. The easy version of this pattern hides the columns that do not fit;
that version is forbidden here, and the gate counts the labels against the
table's own headings so a quietly dropped column fails the build.
── Why every selector is this long ──────────────────────────────────────────
`.crm-table { min-width: 460px }` at styles.css:3280 is what forces the
sideways scroll, and `.browse-table tbody td` (0,1,2) sets the cell padding.
A rule that cannot WIN is a lie (D33), so each rule below is deliberately
more specific than the one it must beat rather than relying on this file
being linked second — file order is not a specificity strategy, and the day
somebody reorders the tags it would fail silently.
⚠ And a media query adds NO specificity of its own. The @media around these
rules buys nothing in the cascade; only the selectors do.
── Scoped to NAMED SURFACES, never to the class ─────────────────────────────
`.crm-table` is worn by several tables, and a screen joins the phone standard
when somebody NAMES the job it does there — not by inheriting a class.
Widening this to `.crm-table` would silently enrol every other table in a
standard nobody asked for. So the selector list names the surfaces, one by one.
⚠ UPDATED 13 Aug 2026 — this comment said "only the DEAL LIST has had a phone
job named for it", which stopped being true the moment Shaf said *"The Leads
table is not responsive on phone"*. **#crmLeads is the FIFTH phone-gated
surface** (Approvals · the shell · My work · the deal list · Leads) and joins
the SAME rules rather than getting a copy of them: two blocks saying one thing
drift within a week (D20), and this file has already paid for a note that
stated a fact instead of pointing at one. **The next surface to be named is
added to these selector lists — it does not get its own block.**
⚠ Adding a surface here means adding it to `nfr.md` §N7 in the SAME change.
The standard is N7's to state; this file only implements it.
============================================================================ */
@media (max-width: 767px) {
/* The panel stops being a scroll container. Its frame goes too: each card
carries its own, and a border around a stack of bordered cards reads as a
box somebody forgot to remove. */
[data-shell="2"] #crmList .browse-tablewrap,
[data-shell="2"] #crmLeads .browse-tablewrap,
[data-shell="2"] #crmAccount .browse-tablewrap {
overflow: visible;
max-height: none;
border: 0;
background: transparent;
}
/* The floor that made it scroll. */
[data-shell="2"] #crmList .crm-table,
[data-shell="2"] #crmLeads .crm-table,
[data-shell="2"] #crmAccount .crm-table {
min-width: 0;
display: block;
}
/* The headings move into the cells as labels, so the row of them is redundant
— but it is REMOVED FROM VIEW, not from the document: it is still what the
labels are read from, and screen readers still need it. `display: none`
would take it from both. */
[data-shell="2"] #crmList .crm-table thead,
[data-shell="2"] #crmLeads .crm-table thead,
[data-shell="2"] #crmAccount .crm-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
[data-shell="2"] #crmList .crm-table tbody,
[data-shell="2"] #crmLeads .crm-table tbody,
[data-shell="2"] #crmAccount .crm-table tbody {
display: block;
}
/* The card. */
[data-shell="2"] #crmList .crm-table tbody tr,
[data-shell="2"] #crmLeads .crm-table tbody tr,
[data-shell="2"] #crmAccount .crm-table tbody tr {
display: block;
margin: 0 0 10px;
padding: 4px 2px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
}
/* THE MARK MOVES TO THE CARD, because on a phone the CARD is the row.
⚠ Found by LOOKING at it, which is the only way it could have been (D14):
every measurement passed and the computed style was correct. The shared rule
puts the bar on the first CELL — right on a desktop table, where the first
cell spans the row's full height — but a card stacks its cells, so the bar
became a 3px stub beside CODE and read as a rendering artifact rather than a
deliberate mark. The band was doing all the work and the bar was noise.
Same shape as the slice-5 finding where a status badge stretched to the full
width of its value column: right colour, right position, WRONG SHAPE. */
[data-shell="2"] #crmList .crm-table tbody tr.row-peeked {
box-shadow: inset 3px 0 0 var(--primary-text);
}
[data-shell="2"] #crmList .crm-table tbody tr.row-peeked > td:first-child {
box-shadow: none;
}
/* Label left, value right, on one line each. `minmax(0, …)` on BOTH tracks
because a grid track's default minimum is min-content (D21): without it the
long client name — "Perbadanan Pengurusan Sisa Pepejal dan Pembersihan Awam
Wilayah Persekutuan Labuan" — would refuse to shrink and push the card back
off the screen edge, which is the defect this whole rule exists to remove.
⚠ The label column is a TOKEN, not a number typed twice, because the two
surfaces have different longest headings and one width cannot serve both:
the deal list tops out at "Weighted" (8 characters) while Leads carries
"Organisation" (12). Hard-coding 8.5ch here would wrap every Leads label
onto two lines; hard-coding 12ch would steal three characters of value
column from every deal card. Each surface states its own below, and the
shared rule reads the token — one definition, two widths (D20). */
[data-shell="2"] #crmList .crm-table tbody td,
[data-shell="2"] #crmLeads .crm-table tbody td,
[data-shell="2"] #crmAccount .crm-table tbody td {
display: grid;
grid-template-columns: minmax(0, var(--card-label-w, 8.5ch)) minmax(0, 1fr);
gap: 12px;
align-items: baseline;
padding: 6px 12px;
border-bottom: 0;
text-align: left;
overflow-wrap: anywhere;
/* ⚠ A grid item's justify-self defaults to STRETCH, so a badge inside a cell
grows to the full width of the value column and a one-word status renders
as a bar across the card. Found by LOOKING at the Leads cards (D14) — every
measurement passed, because a stretched pill has exactly the right text,
the right colour and the right position, and is simply the wrong shape.
`start` makes each value hug its own content; text still wraps inside the
track, because the track is what caps it. */
justify-items: start;
}
/* "Organisation" is the longest label on this screen. Measured, not guessed. */
[data-shell="2"] #crmLeads { --card-label-w: 12ch; }
/* ⚠ Its own width, because its longest heading is longer than either sibling's:
the deal list tops out at "Weighted" (8), Leads at "Organisation" (12), and this
screen carries "Last contacted" (14). One number cannot serve three surfaces —
which is exactly why the width is a token each surface sets rather than a
figure typed into the shared rule (D20). */
[data-shell="2"] #crmAccount { --card-label-w: 14ch; }
/* ⚠ THE EMPTY-STATE ROW IS A SENTENCE, NOT A FIELD, and it was rendering
broken on both card surfaces until 13 Aug 2026.
`
No leads are visible to your role.
`
carries no data-label, so its ::before resolves to "" — but an empty
pseudo-element is still a GRID ITEM, and it held the label column open.
Measured at 390px: the message started 126px in and wrapped inside a
176px column, with a third of the card left blank beside it.
⚠ NO GATE HAD EVER SEEN THIS, and could not have: the fixture always
draws rows, so the zero-rows extreme (D22) was never rendered on a phone.
It was found by deliberately building the empty case and looking at it.
⚠ It was live on the DEAL LIST too, from slice 4 (11 Aug) — inherited, not
introduced, by Leads. Both are fixed here, which is the point of the two
surfaces sharing one rule rather than owning copies (D20). */
[data-shell="2"] #crmList .crm-table tbody td:not([data-label]),
[data-shell="2"] #crmLeads .crm-table tbody td:not([data-label]),
[data-shell="2"] #crmAccount .crm-table tbody td:not([data-label]) {
display: block;
}
/* ⚠ `justify-items: start` above is right for a VALUE and wrong for a CONTROL,
and this pair is the correction — found by a review of the commit that added
it, 13 Aug 2026.
A value should hug its text, which is why the rule exists (a one-word status
was rendering as a bar across the card). But the slice-9 value EDITOR is a
control, and `start` let it take its intrinsic 216px inside a 201px track:
measured, its right edge landed exactly on the card's 1px border and spilled
3px past the cell's content box. Under the previous `stretch` it was 201px
and sat 15px clear. So the editor opts back IN to stretching, and is told it
may shrink — `min-width: 0`, because a flex container's default minimum is
its own min-content and that is what pushed it out in the first place. */
[data-shell="2"] #crmList .crm-table tbody td .dl-editbox {
justify-self: stretch;
width: 100%;
min-width: 0;
}
/* ⚠ AND THE BUTTONS INSIDE IT WERE 29px WIDE — "Cancel" stacked as six
one-character lines. PRE-EXISTING, not introduced here, but it lives in the
rule this work touched and it breaks the phone standard the same media block
declares: the 44px minimum is honoured on HEIGHT and silently missed on
WIDTH. The cause is the card's own `overflow-wrap: anywhere`, which exists so
a long client name cannot push the card off-screen — correct for prose,
wrong for a two-word button, and it inherits into everything in the cell.
Turned off for the controls only. */
[data-shell="2"] #crmList .crm-table tbody td .dl-editbox button,
[data-shell="2"] #crmList .crm-table tbody td .dl-editbox .dl-input {
overflow-wrap: normal;
word-break: normal;
white-space: nowrap;
}
[data-shell="2"] #crmList .crm-table tbody td::before,
[data-shell="2"] #crmLeads .crm-table tbody td::before,
[data-shell="2"] #crmAccount .crm-table tbody td::before {
content: attr(data-label);
color: var(--text-3);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.03em;
text-align: left;
}
/* A card whose every field is empty is still a card, and an empty VALUE must
look empty rather than looking like a missing label. */
[data-shell="2"] #crmList .crm-table tbody td:empty::after,
[data-shell="2"] #crmLeads .crm-table tbody td:empty::after,
[data-shell="2"] #crmAccount .crm-table tbody td:empty::after {
content: "—";
color: var(--text-3);
}
/* Money keeps the mono/tabular treatment it has everywhere else, but stops
being right-aligned: against a left-aligned label column, a right-aligned
value leaves a gap in the middle of a 390px card and the eye loses the pair.
The figures still line up with each other, because they share a column. */
[data-shell="2"] #crmList .crm-table tbody td.ta-r,
[data-shell="2"] #crmLeads .crm-table tbody td.ta-r,
[data-shell="2"] #crmAccount .crm-table tbody td.ta-r {
text-align: left;
}
/* The whole row is the tap target — it always was, but at 44px of finger the
affordance has to be obvious rather than inferred from a cursor nobody has. */
[data-shell="2"] #crmList .crm-table tbody tr.row-open,
[data-shell="2"] #crmLeads .crm-table tbody tr.row-open,
[data-shell="2"] #crmAccount .crm-table tbody tr.row-open {
cursor: pointer;
}
}
/* ============================================================================
SLICE 5 — the left sidebar. The shell itself.
Shaf's direction: the CRM moves from a top bar to a left sidebar, and the
Portal follows for consistency. This is that sidebar, behind ?shell=2, with
the OLD shell left completely intact beside it — the team quotes on the old
one every day for however many weeks this is under review.
── Every class here is NEW, and that is a decision, not a naming accident ───
The plan recorded a trap: `.crm-page .main-nav .nav-btn` is (0,3,0), and every
scoping scheme proposed for re-styling the old classes is weaker and loses in
every file order (D33). Rather than fight that cascade, the new shell does not
use those classes at all. `sb-*` names were checked against styles.css before
a line was written: all twelve appear ZERO times.
⚠ That also side-steps the D20 question rather than answering it: uicheck's
duplicate-rule check reads only BARE single-class selectors, so a new class
nothing else declares cannot collide, and the scoped rules below are invisible
to it either way (the plan's trap #2). **The doctrine question is still open.**
It is dodged here because a new shell genuinely is new, not because the gate
was satisfied — and those are different things worth not confusing.
============================================================================ */
/* ⚠ `[data-shell="2"] .topbar, .nav2 { display: none }` stood here until slice 11.
There is nothing left to hide — the markup is gone from crm.html — so the rule
went with it rather than being left as a rule about an element that does not
exist (D33's neighbour: a declaration that can never MATCH is as dead as one
that can never win).
⚠ `[data-shell="2"]` STAYS on every other selector in this file, deliberately,
and it is not laziness. Removing it lowers each rule's specificity by one
class, and several of them exist precisely because they must BEAT a rule in
styles.css. Stripping the hook in the same commit as an irreversible deletion
would change the cascade silently, everywhere, with no way back — the exact
D33 trap this redesign was warned about on day one. shell.js now sets the
attribute unconditionally, so the hook always matches and costs nothing.
Tidying it is a separate, reversible change. */
/* ---- the sidebar ---------------------------------------------------------- */
/* ⚠ THE WIDTH IS A TOKEN BECAUSE TWO PLACES HAVE TO AGREE. The sidebar sets its
own width and the body pads by the same amount; when those two disagree the
content sits under the menu or floats away from it, and nothing fails — it just
looks wrong. The rail changes ONE number and both follow. */
[data-shell="2"] { --sb-w: 232px; }
[data-shell="2"][data-rail="1"] { --sb-w: 60px; }
[data-shell="2"] .sb-nav {
position: fixed;
/* Cleared of the staging banner, which is fixed at z-index 300 and would
otherwise paint over the brand. The value is MEASURED and set by crm.js —
see the comment there — and falls back to 0 on production, where there is
no banner at all. */
top: var(--sb-top, 0px);
left: 0;
width: var(--sb-w, 232px);
height: calc(100vh - var(--sb-top, 0px));
overflow-y: auto;
padding: 14px 10px 24px;
background: var(--primary-dark);
color: var(--on-primary);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 40;
}
[data-shell="2"] .sb-brand {
display: flex;
align-items: center;
gap: 9px;
padding: 2px 8px 16px;
}
/* The logo is dark artwork on transparency, so on this dark sidebar it needs a
light chip behind it exactly as the old shell gives it (styles.css:1292) —
without one it is technically rendered and practically invisible, which a
screenshot shows and no assertion does.
⚠ The old rule uses a raw `#fff`. This one must not: the hex ratchet stands at
302 with ZERO headroom and D17 says it may fall, never rise. `--panel` is the
light surface token and is the right semantic anyway — this is a surface the
logo sits on, not a foreground colour.
Width-capped at 104px because N7 caps it there for the phone: it was once
303px of a 390px window. */
[data-shell="2"] .sb-logo {
width: 104px;
height: auto;
background: var(--logo-chip);
padding: 4px 10px;
border-radius: 6px;
box-sizing: content-box;
}
[data-shell="2"] .sb-app {
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 12.5px;
opacity: 0.85;
}
/* A section heading, not a control — it must not read as something to tap. */
[data-shell="2"] .sb-group {
padding: 14px 10px 5px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.55;
}
/* The icon is sized here rather than left to inherit: the sprite draws on a 24x24
box, and at that size it would dwarf a 13px label. It takes currentColor, so it
costs the hex ratchet nothing (D17). */
[data-shell="2"] .sb-ico { width: 17px; height: 17px; flex: none; opacity: 0.9; }
[data-shell="2"] .sb-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 9px 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: 14px;
text-align: left;
text-decoration: none;
cursor: pointer;
}
[data-shell="2"] .sb-item:hover { background: rgba(255, 255, 255, 0.09); }
/* The current screen. It carries BOTH a background and a left edge: on this
dark ground a background alone is a difference somebody has to look for. */
[data-shell="2"] .sb-item.active {
background: rgba(255, 255, 255, 0.14);
box-shadow: inset 3px 0 0 var(--accent-grn);
font-weight: 600;
}
[data-shell="2"] .sb-mark { margin-left: auto; opacity: 0.6; font-size: 12px; }
[data-shell="2"] .sb-count { margin-left: auto; }
/* ---- the bar above the content ------------------------------------------- */
/* ⚠ The sidebar is FIXED, so it is out of flow and reserves no space. The room
for it is made by padding the BODY, not by putting a margin on each child.
The first attempt did the latter and the page scrolled sideways by exactly
232px: `.crm-layout` carries `width: 100%` (styles.css:2556), so a 232px
margin plus a full-width box is 232px too wide. Padding the body narrows the
containing block instead, and every `100%` inside it resolves correctly
without a single child rule fighting one it cannot see. Measured, not
reasoned about — the overflow was found by reading computed geometry (D33). */
[data-shell="2"] body { padding-left: var(--sb-w, 232px); }
[data-shell="2"] .sb-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-bottom: 1px solid var(--border);
background: var(--panel);
}
/* The title carries the job the permanently visible menu used to do (D3), so it
is the loudest thing in this bar rather than a caption on it. */
[data-shell="2"] .sb-title {
margin: 0;
font-size: 17px;
font-weight: 600;
}
/* No drawer to open on a desktop, so no handle. */
[data-shell="2"] .sb-burger { display: none; }
[data-shell="2"] .sb-bar .umenu { margin-left: auto; }
/* ⚠ THE ACCOUNT BUTTON WAS INVISIBLE IN LIGHT MODE, and had been since the flip.
`.umenu-btn` in styles.css is `color: var(--on-primary)` on a 10% WHITE wash —
correct, and written for the OLD shell, whose top bar was --primary dark green.
Slice 5 MOVED the button into the new bar, which is --panel. In light that is
white: white text on a white wash over white. **Measured 1.00:1**, the worst
ratio arithmetic allows.
⚠ IT LOOKED FINE IN DARK — 11.99:1 — which is why it survived the theme work,
and it is the reason Shaf found it and no gate did. Nothing we own measures
whether text can be read against what is behind it: uicheck reads files,
layoutcheck reads geometry, the suites read values. A colour that renders
perfectly and cannot be seen passes all three.
⚠ AND LOOKING DID NOT CATCH IT EITHER, which is the part worth keeping. The
light-mode screenshot taken this morning CONTAINED this defect and it was read
as an empty corner. **Invisible and absent are the same picture.** D14 says look
at the surface; this is the case where looking is not enough and the answer is
to measure the two colours (the `.btn-ghost` scar, in a second costume).
The button belongs to the bar it sits in, so it is scoped to that bar and takes
the bar's own text colour: 14.04:1 in light, 12.27:1 in dark. */
[data-shell="2"] .sb-bar .umenu-btn {
background: var(--row-band);
color: var(--text);
border: 1px solid var(--border);
}
[data-shell="2"] .sb-bar .umenu-btn:hover { background: var(--accent-soft); }
[data-shell="2"] .sb-scrim { display: none; }
/* ---- below 1200px the sidebar becomes a drawer (D3, Shaf's ruling) ---------
⚠ THE THRESHOLD MOVED FROM 900px TO 1200px IN SLICE 11, and it is a fix for a
class of defect rather than for one screen. A fixed 232px sidebar takes that
width away from every screen behind it, and by the time the full width sweep
ran against the new shell it had broken FOUR: the costing board at 1280 (99px
over), the capabilities band at 1024 (6px), and the Clients and Settings
screens at 1024 (167px each — a 220px action column with nowhere to go).
Four patches would have been four scroll containers, and each one clips
anything absolutely positioned inside it. The arithmetic says the sidebar is
simply not affordable below about 1200px: those rows need ~935px, and 232px
of sidebar plus gutters leaves 768px at 1024.
So below 1200px it overlays instead of displacing — the content gets the full
width back, exactly as it had before the sidebar existed, and the whole class
goes away including the next one.
⚠ The trade, stated: on a 1024px laptop the menu is now behind a tap rather
than always visible. That is Shaf's D3 arrangement applied at a wider
threshold than "phone", and it is the arrangement he chose — the header title
still says where you are. If he wants it visible at 1024 the answer is a
narrower icons-only rail, which is a design change and not a patch. */
@media (max-width: 1200px) {
/* Off-canvas, not display:none — it slides, and a keyboard user tabbing into
a menu that is off screen would otherwise scroll the page sideways to reach
it, which is why it is also made inert until opened. */
[data-shell="2"] .sb-nav {
transform: translateX(-100%);
transition: transform 0.18s ease-out;
visibility: hidden;
width: 264px;
}
[data-shell="2"] .sb-nav.sb-open {
transform: translateX(0);
visibility: visible;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.001);
}
[data-shell="2"] .sb-burger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--panel);
color: var(--text);
cursor: pointer;
}
/* The drawer overlays rather than displaces, so no room is reserved for it. */
[data-shell="2"] body { padding-left: 0; }
[data-shell="2"] .sb-nav.sb-open ~ .sb-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 35;
background: var(--scrim);
}
}
/* The Catalogue genuinely LEAVES this page for the quote portal. The old shell
says so with an arrow and a title, and pretending otherwise is what made Shaf
ask twice why "the old portal" opens. It is dimmed and set apart from the
items that stay inside the CRM, so the difference is visible before the tap
rather than discovered after it. */
[data-shell="2"] .sb-away {
margin-top: 6px;
opacity: 0.72;
font-size: 13.5px;
}
[data-shell="2"] .sb-away:hover { opacity: 1; }
/* ---- what a 232px sidebar costs the widest screen -------------------------
The sidebar is not free: it takes 232px out of the content box, and one screen
could not absorb it. `.cost-row` is an eight-track grid whose fixed minimums
come to 1100px (110 + 150 + 4×120 + 90 + 200, plus 7 × 10px of gaps). At
1280px the old shell leaves it 1240px and it fits; the new shell leaves 1008px
and the PAGE scrolled sideways by 99px. layoutcheck caught it as an error on
the first run of the new walk — which is precisely why that walk had to exist
before this sidebar shipped.
The fix is the rule N7 already sets for wide tables: content too wide for the
screen scrolls INSIDE its own container, and the page body never scrolls. Not
a narrower grid — those eight columns are money and their widths are already
the minimum that keeps the figures readable, and squeezing them is how a sen
column becomes unreadable on the screen where costs are approved. */
[data-shell="2"] #costingList {
overflow-x: auto;
}
/* ---- slice 6: where the sixteen screens live ------------------------------
Shaf's D2 ruling executed. Two things need styling that the old shell never
had a use for.
1. A group NOTE. The "Retiring" group would otherwise read as an insult to
three working screens — it has to say what is actually happening to them,
on the screen, not in a commit message (D10: say what the system did).
2. Settings now lives in Management, and it was already behind the avatar.
Two doors to one screen is the shape that drifts (D26), so the avatar's
copy is hidden IN THIS SHELL ONLY — shell 1 keeps it exactly where the
team expects it, because that menu is shared markup and this rule is
scoped rather than a deletion. */
[data-shell="2"] .sb-note {
margin: 0 10px 6px;
font-size: 11px;
line-height: 1.35;
opacity: 0.5;
}
/* Going somewhere else soon. Dimmed rather than struck through: they still work
and are still the only place that work lives today, so they must not look
broken — only unfinished. */
[data-shell="2"] .sb-going { opacity: 0.66; }
[data-shell="2"] .sb-going:hover { opacity: 1; }
[data-shell="2"] #umenuPop [data-crmview="admin"] { display: none; }
/* ============================================================================
SLICE 8 — the new table view. READ-ONLY.
The first time the new shell shows real money in a new layout, and the first
surface born under slice 7's gate: every Value and Weighted figure below is
read back off the screen and compared to what the system computed, on every
run, in both shells.
READ-ONLY is the whole point of shipping it separately. Editing is slice 9 and
arrives one field per shipment, each with the confirm-first behaviour Shaf
chose (D5). Nothing here writes anything; clicking a row still only OPENS the
deal, which is navigation, not editing.
⚠ The columns and the data are UNCHANGED — same nine, same figures, row for
row against today's. That is deliberate. Restructuring columns would change
what the phone cards show, and "nothing dropped, sen included" is Shaf's rule
about those cards; a table restyle is not the place to quietly renegotiate it.
The language is the one he reviewed in the prototype: a panel with a quiet
banded header, uppercase micro-caps, hairline rules, and money in the mono
tabular face so figures line up down the column. Colour is tokens only — the
hex ratchet is 302 against a baseline of 302.
============================================================================ */
@media (min-width: 768px) {
/* The wrapper stops being the frame; the table becomes the panel, so the
header band and the rounded corner belong to the same object. */
[data-shell="2"] #crmList .browse-tablewrap {
border: 0;
background: transparent;
border-radius: 0;
}
[data-shell="2"] #crmList .crm-table {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 9px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
font-size: 13.5px;
}
/* Micro-caps on a band: a heading has to be findable without competing with
the figures underneath it, which are the reason anyone opened the screen.
⚠ TRIMMED 13 Aug 2026 to the ONE declaration that still differs. This block
used to carry the whole treatment — band, micro-caps, colour, weight — and
on that date the same treatment moved onto `.browse-table` in styles.css so
all eight tables share it (D20: a shared class is defined once). Everything
except this padding became a duplicate of the base rule the moment it did,
and a duplicate is what drifts. The padding stays because slice 8 shipped
the deal list 1px tighter than the browse tables and density is settled —
unifying it would be a density change dressed up as a tidy-up. */
[data-shell="2"] #crmList .crm-table thead th { padding: 9px 11px; }
[data-shell="2"] #crmList .crm-table tbody td {
padding: 9px 11px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
/* A rule under the last row draws a line under a border that is already
there — two lines where the design has one. */
[data-shell="2"] #crmList .crm-table tbody tr:last-child td { border-bottom: 0; }
/* The row is the tap target and always was; hover is what says so. */
[data-shell="2"] #crmList .crm-table tbody tr:hover { background: var(--row-band); }
}
/* The stage, as a pill. Read at a glance down the column instead of being read
as a word — and it carries meaning rather than decoration: a won deal is the
accent green, a lost or dropped one is muted so a dead deal does not shout as
loudly as a live one.
⚠ Scoped to shell 2, so in the shell the team uses today this span is
unstyled and renders as the plain text it has always been. Nothing about the
live CRM moves.
⚠ THE `#crmList` SCOPE CAME OFF ON 14 AUG 2026 (slice 5), and it had to: the
peek draws the same stage on the same deal, and a rule scoped to the list would
have rendered NOTHING inside the panel — a declaration that cannot win is a lie
(D33), and it is the failure mode that looks like a styling oversight rather
than a bug. One stage pill, two surfaces, one definition (D20) — the selector
gains a surface rather than a second block, exactly as the phone card rules did
when Leads joined them. Nothing else on either page emits `.dl-pill`, verified
by grep before widening, so the list is unchanged BY IDENTITY. */
[data-shell="2"] .dl-pill {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
background: var(--primary);
color: var(--on-primary);
font-size: 11.5px;
font-weight: 600;
white-space: nowrap;
}
/* ⚠ THE WON PILL WAS THE WORST-MEASURED TEXT SITE ON THE PLATFORM: white on
`--accent-grn`, 4.54:1 in light and **2.54:1 in dark**, against a 4.5 floor —
the top row of `contrastcheck`'s list since the walk first reached the CRM.
It is repaired here rather than carried onto a new surface, because slice 5's
own gate is "contrast on every new text site in both themes" and the peek shows
the won stage on 11 of the 74 deals. Shipping it unchanged would have painted
the platform's worst defect onto a screen built this week.
The replacement is not a new colour and not a judgement call: it is the pair
Shaf's own badge contract already names for the won end — `--ok-bg`/`--ok-text`,
which flip with the theme and measure **6.97:1 light / 8.25:1 dark**.
⚠ THE DEAL LIST VISIBLY CHANGES: a Won pill goes from solid mid-green with white
text to a pale green chip with dark green text. That is the only visual change
this slice makes outside the peek, and it is stated rather than buried. */
[data-shell="2"] .dl-won { background: var(--ok-bg); color: var(--ok-text); }
/* ⚠ Lost and dropped deliberately DEPART from the contract's "lost = --bad-bg /
--bad-text". The reason is already written above and predates this slice: a dead
deal must not shout as loudly as a live one, and 18 of 74 deals are lost or
dropped. Measured, so the departure is not also a defect: --muted on --panel is
4.96:1 light / 7.11:1 dark, and the border clears the 3:1 non-text floor. */
[data-shell="2"] .dl-off {
background: transparent;
border: 1px solid var(--text-3);
color: var(--muted);
}
@media (min-width: 768px) {
/* ⚠ MONEY MUST NOT WRAP, and this is a D14 catch: every assertion passed
while the screen read "RM" on one line and "1,250,000.50" on the next.
Slice 7's gate reads textContent, which a line break does not change, so
the number was correct and unreadable at the same time — the two are not
the same property and only a screenshot tells them apart.
The deal code broke across three lines for the same reason.
Nowrap raises the table's minimum width; if that outgrows the panel the
panel scrolls, which is N7's own rule and is the right trade — a figure
split down the middle is worse than one you scroll to. */
[data-shell="2"] #crmList .crm-table tbody td.ta-r,
[data-shell="2"] #crmList .crm-table tbody td.mono,
[data-shell="2"] #crmList .crm-table thead th { white-space: nowrap; }
/* The panel takes the scroll when the columns genuinely need more room than
the sidebar leaves them. */
[data-shell="2"] #crmList .browse-tablewrap { overflow-x: auto; }
}
/* ---- slice 9: the confirm dialog ------------------------------------------
Built on the shared modal contract — `.modal-overlay`, `.modal`,
`.modal-header`, `.modal-footer` all already exist in styles.css and are what
the quote portal uses (D13: use the classes this app already has). The CRM
has never had a modal of its own, so only the two parts the contract does not
cover need a rule: the body's padding and the footer's button row.
The overlay is created by JS and removed on close, so the old shell ships no
markup for a dialog it does not use. */
[data-shell="2"] .mv-body {
padding: 14px 18px 4px;
font-size: 14px;
line-height: 1.5;
}
[data-shell="2"] .mv-body p { margin: 0 0 10px; }
/* The destructive-consequence line has to outweigh the polite one above it, or
a person reads "move this deal" and stops. */
[data-shell="2"] .mv-body .warn { color: var(--alert-text); }
[data-shell="2"] .mv-foot {
gap: 8px;
justify-content: flex-end;
padding: 10px 18px 16px;
}
/* ---- slice 9 shipment 3: the value editor --------------------------------
Two cells, two different promises, and they must not look the same.
`dl-edit` can be changed here; `dl-fixed` shows a Final TCV and cannot,
because the only door writes the budget figure and 51 of 74 deals have a TCV
that would win the COALESCE. D5: a control that offers a change must be able
to deliver it — so only one of these offers anything. */
[data-shell="2"] #crmList .dl-edit { cursor: text; }
/* A dotted underline rather than a button: it says "this is changeable" without
turning a table of figures into a wall of controls. */
[data-shell="2"] #crmList .dl-edit:hover {
box-shadow: inset 0 -1px 0 var(--muted);
}
/* Deliberately NOT styled as interactive. It still answers a click — with the
sentence explaining where the number comes from — but it must not look like
something that will let you type (D5: two visible states, no no-ops). */
[data-shell="2"] #crmList .dl-fixed { cursor: help; }
[data-shell="2"] #crmList .dl-editbox {
display: inline-flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
[data-shell="2"] #crmList .dl-input {
width: 130px;
text-align: right;
font-family: var(--mono);
font-variant-numeric: tabular-nums;
font-size: 13px;
padding: 3px 6px;
}
/* ---- the sidebar's cost, and the general answer to it --------------------
232px out of the content box overflows bands whose columns have fixed
minimums. Costing was the first (99px at 1280px). The capabilities band was
the second (6px at 1024px), and two occurrences in two slices says the next
one is coming rather than that this one is special.
⚠ The first attempt here was `overflow-x: auto` on the band, and it did NOT
work — the assertion asks whether the band overflows, and making it scrollable
does not change scrollWidth. Scrolling is the right answer where content is
genuinely wider than any screen (the deal table, the costing grid); it is the
wrong answer to being SIX PIXELS short.
So: give the content back some of what the sidebar took. Below 1200px the
page gutter drops from 20px to 12px — 16px recovered on every screen at
exactly the widths where the sidebar bites, without touching a single band's
internals. The gutter is the app's own slack; the old shell already narrows
it at 720px for the same reason. */
@media (max-width: 1200px) {
[data-shell="2"] .crm-layout { padding-left: 12px; padding-right: 12px; }
}
/* ============================================================================
THE RAIL — Shaf's ask, 12 Aug 2026: "enable the menu to be minimized to show
the icon only instead of full item name."
⚠ THE LABELS ARE HIDDEN, NEVER REMOVED. icons.js states the house rule — "an
icon accompanies a label; it never replaces one" — and a deliberately collapsed
rail is the case that rule did not anticipate. It is honoured rather than
dodged: `.sb-label` is taken out of the PICTURE and left in the DOM, so a screen
reader still reads every item; each button also carries an `aria-label` and a
`title` set unconditionally, so the accessible name never depends on whether the
rail happens to be collapsed. Widening that rule is a skill edit, made with this
change rather than left for somebody to discover.
⚠ NOT `display: none` on the label. That would take it from the accessibility
tree as well as the screen, which is exactly the difference between collapsing
a menu and deleting half of it.
⚠ AND THIS IS WHY THE RAIL WAS WANTED. Slice 11 moved the drawer threshold to
1200px because a fixed 232px sidebar left the costing and client rows too little
room at 1024px, and the note recorded then said: "if he wants it visible at 1024
the answer is a narrower icons-only rail — a design change, not a patch." This
is that design change. Whether the threshold now comes back down is a SEPARATE
decision with its own measurement, and it is not taken here.
============================================================================ */
[data-shell="2"][data-rail="1"] .sb-label,
[data-shell="2"][data-rail="1"] .sb-group,
[data-shell="2"][data-rail="1"] .sb-note,
[data-shell="2"][data-rail="1"] .sb-mark {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
[data-shell="2"][data-rail="1"] .sb-item {
justify-content: center;
padding: 10px 0;
gap: 0;
}
/* The brand shrinks to the mark rather than being hidden: a rail with nothing at
the top reads as a page that failed to load its header. */
[data-shell="2"][data-rail="1"] .sb-brand { padding: 2px 6px 12px; justify-content: center; }
[data-shell="2"][data-rail="1"] .sb-brand .sb-app { display: none; }
/* ⚠ THE RAIL SHOWS THE "EMT" MARK ONLY — Shaf, 12 Aug 2026. Shrinking the whole
lockup to 44px was the first attempt and it is unreadable: `emt-logo.png` is
2000x300, an aspect of 6.67, so the wordmark "ENVIROMET / From Data to
Intelligence" collapses to a smear at rail width. A logo nobody can read is
decoration taking up the one place a rail has none to spare.
CROPPED, not replaced, so there is no second asset to keep in step with the
first (D26 — one logo, one file). The arithmetic, written down because the
numbers look arbitrary otherwise: `object-fit: cover` scales the image to fill
the box, and since the image is far wider than the box it scales by HEIGHT —
18px tall renders 18 x 6.67 = 120px wide, of which the box shows the leftmost
42px. That is 35% of the lockup, which is exactly the EMT badge.
`object-position: left` is what keeps the crop on the badge rather than the
middle of the word.
⚠ Change the box and you change the crop. If the image is ever re-exported at a
different aspect these numbers move with it — which is why the ratio is stated
here rather than left to be re-derived from a screenshot. */
[data-shell="2"][data-rail="1"] .sb-logo {
width: 42px;
height: 18px;
object-fit: cover;
object-position: left center;
padding: 3px 4px;
}
/* A count cannot be read at 60px, so it becomes a presence rather than a number —
and the number is still on the button's accessible name. A badge that says
nothing is worse than a dot that says "something is here". */
[data-shell="2"][data-rail="1"] .sb-count {
min-width: 8px;
width: 8px;
height: 8px;
padding: 0;
font-size: 0;
line-height: 0;
position: absolute;
top: 6px;
right: 10px;
}
[data-shell="2"][data-rail="1"] .sb-item { position: relative; }
/* The toggle itself. ⚠ MOVED TO THE TOP OF THE MENU — Shaf, 24 Aug 2026, it used
to be the last thing in the list, after "Retiring", so reaching it meant
scrolling past every group. `shell-nav.js` now emits it first, right after the
brand; the rule beneath it moved from `border-top`/`margin-top` to
`border-bottom`/`margin-bottom` for the same reason — the divider still marks
the toggle off from what follows, just on the other side of it now. */
[data-shell="2"] .sb-railtoggle {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
margin-bottom: 6px;
padding: 9px 10px;
border: 0;
border-bottom: 1px solid var(--sb-rule, rgba(255,255,255,0.10));
border-radius: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: 12.5px;
opacity: 0.75;
cursor: pointer;
text-align: left;
}
[data-shell="2"] .sb-railtoggle:hover { opacity: 1; }
[data-shell="2"][data-rail="1"] .sb-railtoggle { justify-content: center; padding: 10px 0; gap: 0; }
[data-shell="2"][data-rail="1"] .sb-railtoggle .ico { transform: rotate(180deg); }
/* The Retiring group's heading doubles as a native toggle now (24 Aug
2026), so it needs to read as tappable — the plain `.sb-group` opacity (0.55)
was deliberately too quiet for that; a summary gets a little more weight and a
hover state, same idiom as every other clickable row in this sidebar. */
[data-shell="2"] .sb-group-details > summary {
cursor: pointer;
opacity: 0.75;
}
[data-shell="2"] .sb-group-details > summary:hover { opacity: 1; }
/* ⚠ Below the drawer threshold the sidebar is already an overlay you open and
dismiss, so "make it narrower" would offer a change the layout cannot deliver
(D5). The control is hidden there, and the rail width is not applied either —
a 60px drawer would be a worse drawer, not a narrower menu. */
@media (max-width: 1200px) {
[data-shell="2"] .sb-railtoggle { display: none; }
[data-shell="2"][data-rail="1"] { --sb-w: 232px; }
[data-shell="2"][data-rail="1"] .sb-label,
[data-shell="2"][data-rail="1"] .sb-group,
[data-shell="2"][data-rail="1"] .sb-note,
[data-shell="2"][data-rail="1"] .sb-mark {
position: static; width: auto; height: auto; overflow: visible; clip-path: none;
}
[data-shell="2"][data-rail="1"] .sb-item { justify-content: flex-start; padding: 9px 10px; gap: 9px; }
}
/* ============================================================================
THE PEEK — slice 4, 14 Aug 2026
============================================================================
Shaf's brief: "Deal detail (slide-over panel from the right, opens on row/card
click)". It REUSES the quote portal's `.drawer` contract rather than declaring
a second panel (D20) — so the slide, Escape, the focus trap and focus-return
all arrive from `overlay.js` and cannot drift from the portal's.
⚠ Nothing here redefines `.drawer` or `.drawer-overlay`. It adds `.peek-overlay`
beside them, which is why this file can carry the CRM's variant without the
cross-file conflict the D20 question is still open about. */
/* 620px is arithmetic, not taste: the peek carries a row of number tiles, and at
the portal's 560px a figure like "RM 1,240,000" does not fit its column. The
portal keeps 560px BY IDENTITY — it never reads this token. */
[data-shell="2"] .peek-overlay { --drawer-w: 620px; }
/* ⚠ ON A PHONE IT IS A BOTTOM SHEET, NOT A NARROW RIGHT PANEL, and the reason is
behavioural rather than aesthetic. At 390px a right panel at 94vw is 367px —
indistinguishable from a page navigation — so it teaches people to press Back
to dismiss it. A sheet that leaves a strip of the list showing above it says
"you are still on the list, and it kept your place", which is the literal truth.
⚠ The slide direction changes with it: `overlay.js` animates whatever transform
the panel declares, so the axis lives HERE and the mechanism does not care. */
@media (max-width: 768px) {
[data-shell="2"] .peek-overlay,
[data-shell="2"] #newClientOverlay { justify-content: stretch; align-items: flex-end; }
[data-shell="2"] .peek-overlay .peek-panel,
[data-shell="2"] #newClientOverlay .newclient-panel {
width: 100%;
height: 92%;
border-radius: 14px 14px 0 0;
transform: translateY(100%);
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
}
[data-shell="2"] .peek-overlay.is-open .peek-panel,
[data-shell="2"] #newClientOverlay.is-open .newclient-panel { transform: translateY(0); }
}
/* THE NEW-CLIENT DRAWER (slice 3, 18 Aug 2026).
⚠ The sheet treatment above NAMES this overlay rather than getting a copy of the
block — the same reason the phone-card rules list their surfaces one by one (D20).
It matters more here than for the peek: the sheet is what stops a 94vw right panel
reading as a page change, and Back on this panel does not merely close it, it
rebuilds the approve form underneath and destroys everything typed into it.
🛑 `.if-grid` CANNOT BE LEFT ALONE IN A 560px DRAWER, and the breakpoint is why.
It is 12 columns with `.field { grid-column: span 3 }`, dropping to 6 columns at
`max-width: 900px` — of the VIEWPORT, not of the container. On a 1512px desktop that
never fires, so eight controls get ~130px each inside 560px, and a `