/* Harrier :: the product sheet of the concept stand, prefix dr-. Shared by design/concept/directions.html and design/concept/concept.html so the two cannot drift: a component copied into a second page is where drift starts, and stages 07 and 08 would inherit it silently. VALUES come from design/system/ and nowhere else. Nothing here invents a colour, a radius or a tracking value. Direction A is the composition chosen at step 4; directions B and C stay local to directions.html because they were not chosen. The documentation sheet (research/_page.css) owns bare ELEMENT selectors, `p{max-width:74ch}` and an h2 colour among them. A prefix does not protect against an element selector, so this sheet UNSETS those properties rather than merely setting its own. Both were found in a browser: the queue footer clamped to 444px, which is exactly 74ch of the mono at 10px. */ /* the frame: each direction is drawn at a real 1440 and scaled to the column, so the proportions on this page are the proportions on the desk, not an impression of them */ .dr-hold{width:100%;height:616px;overflow:hidden;border:1px solid var(--line-edge); background:var(--bg-page);margin:0 0 14px} .dr-scale{width:1440px;height:900px;transform:scale(.6847);transform-origin:0 0} /* below the documentation shell's own breakpoint the column is narrower than 986, so the sheet is scrolled rather than silently cropped: a cropped direction reads as a design decision that was never made */ @media (max-width:1080px){.dr-hold{overflow-x:auto;overflow-y:hidden}} /* ---- the product, one brand. Shared components first. ---- */ .dr-s{width:1440px;height:900px;display:flex;flex-direction:column; background:var(--bg-page);color:var(--text-primary); font:400 14px/1.4 var(--font-sans);letter-spacing:0} .dr-s .m{font-family:var(--font-mono);letter-spacing:var(--track-mono)} /* The documentation sheet owns bare ELEMENT selectors: `p{max-width:74ch}` and an h2 colour. A prefix does not protect against an element selector, so the product sheet has to UNSET the property rather than merely set its own. Found in a browser: the queue footer was clamped to 444px, which is exactly 74ch of the mono at 10px, and the pane heading rendered in the documentation accent instead of a colour from kit.css. */ .dr-s p{max-width:none;margin:0} .dr-s h1,.dr-s h2,.dr-s h3{color:var(--text-primary);font-family:var(--font-sans);margin:0} .dr-z1{height:46px;flex:0 0 46px;display:flex;align-items:center;gap:26px;padding:0 20px; border-bottom:1px solid var(--line-edge)} .dr-z1 .wm{font:600 14px var(--font-sans);letter-spacing:var(--track-wordmark)} .dr-z1 nav{display:flex;gap:20px;font-family:var(--font-mono);font-size:11px; letter-spacing:var(--track-mono);color:var(--text-secondary)} .dr-z1 nav .on{color:var(--text-primary);border-bottom:2px solid var(--text-accent);padding-bottom:3px} .dr-z1 .sp{margin-left:auto;font-family:var(--font-mono);font-size:10px; letter-spacing:var(--track-mono);color:var(--text-secondary)} .dr-z2{height:26px;flex:0 0 26px;display:flex;align-items:center;padding:0 20px; font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-mono); color:var(--text-accent);border-bottom:1px solid var(--line-edge)} .dr-scope{display:flex;gap:7px;align-items:center} .dr-scope i,.dr-chip{font-style:normal;display:inline-block;border:1px solid var(--line-control); border-radius:var(--radius-ui);padding:4px 8px;font-family:var(--font-mono);font-size:10px; letter-spacing:var(--track-mono);color:var(--text-secondary)} /* inverted, exactly as the product inverts it. It was on the accent here and not on the real screen, which the stage 06 audit caught: the stand may not show a component the product does not have. */ .dr-chip.sol{background:var(--text-primary);color:var(--bg-page);border-color:var(--text-primary)} .dr-read{font-size:21px;font-weight:500;letter-spacing:var(--track-display);margin:0} .dr-read span{color:var(--text-secondary);font-weight:400;letter-spacing:0;font-size:15px} .dr-bars{display:inline-flex;gap:2px;vertical-align:middle;margin-right:6px} .dr-bars i{width:3px;height:9px;background:var(--line-edge);display:block} .dr-bars i.on{background:var(--text-accent)} /* Severity is the one place besides the accent where saturation is spent, and the set is closed at three. The word and the bars take the same value, so the row reads at a glance rather than on a count. Attribute A2 was amended for this, and the amendment is written into design/concept/docs/concept.md rather than left implicit. */ .sev-hi .sv{color:var(--text-sev-high)} .sev-me .sv{color:var(--text-sev-medium)} .sev-lo .sv{color:var(--text-sev-low)} .sev-hi .dr-bars i.on{background:var(--text-sev-high)} .sev-me .dr-bars i.on{background:var(--text-sev-medium)} .sev-lo .dr-bars i.on{background:var(--text-sev-low)} .a-row .sv,.c-row .sv{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-mono)} .dr-foot{margin:0;padding:9px 20px;border-top:1px solid var(--line-edge);display:flex;gap:22px; font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-mono);color:var(--text-secondary)} .dr-foot kbd{border:1px solid var(--line-edge);padding:1px 4px;font:inherit} .dr-pane{background:var(--bg-surface);border-left:1px solid var(--line-edge); display:flex;flex-direction:column;min-width:0} .dr-ph{padding:14px 18px 12px;border-bottom:1px solid var(--line-edge)} .dr-ph h2{margin:0 0 4px;font-size:17px;font-weight:500;letter-spacing:var(--track-display)} .dr-ph p{margin:0;font-size:12px;color:var(--text-secondary);max-width:none} .dr-fr{display:grid;grid-template-columns:1fr 108px 96px;gap:10px;padding:9px 18px; border-bottom:1px solid var(--line-separator);font-size:12px;align-items:baseline} .dr-fr.h{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-mono); color:var(--text-secondary);text-transform:uppercase} .dr-fr .l{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-mono); color:var(--text-accent)} .dr-fr .r{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-mono);text-align:right} .dr-fr .r em{display:block;font-style:normal;font-size:9px;color:var(--text-secondary)} .dr-fmore{padding:11px 18px;font-family:var(--font-mono);font-size:9px; letter-spacing:var(--track-mono);color:var(--text-secondary)} /* ---------- A, the ledger. 62 / 38, scope on its own band, one line per row ---------- */ .a-body{flex:1;display:grid;grid-template-columns:62% 38%;min-height:0} .a-q{display:flex;flex-direction:column;min-width:0} .a-band{padding:12px 20px 11px;border-bottom:1px solid var(--line-edge)} .a-head{padding:14px 20px 10px} .a-rows{flex:1;min-height:0} .a-row{display:grid;grid-template-columns:88px 150px 1fr 190px 68px 118px 40px;gap:12px; padding:11px 20px;border-bottom:1px solid var(--line-separator);align-items:center;font-size:13px} .a-row.h{font-family:var(--font-mono);font-size:9px;letter-spacing:var(--track-mono); color:var(--text-secondary);text-transform:uppercase;padding:7px 20px;border-bottom-color:var(--line-edge)} .a-row.sel{background:var(--bg-selected);box-shadow:inset 3px 0 var(--text-accent)} .a-row .v{font-weight:500} .a-row .v em{font-style:normal;display:block;font-size:11px;color:var(--text-accent)} .a-row .c,.a-row .g{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track-mono); color:var(--text-secondary)} .a-row .g{text-align:right} .a-row .st{display:flex;gap:4px;justify-content:flex-end} .a-row .st .dr-chip{padding:3px 5px;font-size:8px} /* ---- the shell is a DOCUMENT here, and the design system says it is a screen ---- Both pages take their column from research/_page.css `.shell`, and both link design/system/index.css AFTER it, which brings components/shell.css. That file claims the same generic class for the PRODUCT shell: `align-items:stretch` and `height:100vh`, which is right for a screen that scrolls inside its own zones. Same specificity, later sheet, so it wins, and the collision is the one this file already exists for reaching one step further: not the light documentation sheet this time, but the system. Measured at 1440 in the shipped dark theme rather than read off the file: .shell height 900px, align-items stretch, while the document ran to 4747px on directions.html and 6333px on concept.html #sidebar position sticky, and it still left the page: its getBoundingClientRect().top went 56 to -3544 over 3600px of scroll, against 56 to 56 on research/research.html and 0 to 0 on design/kit/btn.html, which use .shell and .k-shell without the system A sticky element sticks only inside its containing block, so the panel travelled for exactly one viewport and then left with the row that held it, and the reader was given an empty column for the remaining 3847px. Same defect, same mechanism and same three declarations as docs/decisions.md settled on 2026-08-25 for a document page; design/_nav.js injects these three under the name .wf-shell for the stage 07 pages. Below 1279.98 shell.css turns the box into a block and base.css turns the panel static, so all three are inert there and the panel stacks above the article, which is what it does on every other stage at 360. */ .shell{align-items:flex-start;height:auto;min-height:100vh} /* AND THE SAME SHEET TOOK THE PANEL'S OFFSET WITH IT. base.css sets `top:0` and `max-height:100vh` because the surfaces it was written for carry no top padding; research/_page.css, which is the document chrome these two pages actually use, sets `top:56px` and `max-height:calc(100vh - 96px)` because it does. With the system loaded last, the stuck panel measured top 0 and its first roadmap link measured 0, glued to the edge of the window, against 56 and 56 on both research/research.html and handoff/handoff.html, which are the two other stages built on this same chrome. The offset is restored to the sheet that owns the column, not invented here. */ #sidebar{top:56px;max-height:calc(100vh - 96px)} /* ---- the dark-document layer, and why this block exists ---- Both pages that load this sheet are DARK documents that link research/_page.css for their document chrome: the .shell/#sidebar/main column, the heading scale, list and paragraph rhythm. That sheet is a LIGHT theme. It owns bare element selectors and eleven variable names, of which these two pages used four, and kit.css declares none of the eleven, so every use of them here resolved to the documentation palette rather than the product one. Measured in a browser rather than reasoned about, at 1440 and at 360: .lede 1.42:1 the opening paragraph of both pages, near invisible code 1.14:1 a near white pill with near white text, every file path .eyebrow, h2 2.40:1 #0d5a66, a teal that is in no Harrier palette at all --faint,--muted 3.73:1 below 4.5 on every label that used them --rule #e3e4e6 six near white frames around the specimens --mono the system mono, so the stand documenting IBM Plex Mono did not use it table min-width:560px, which overflowed the document at 360 The uses of those four names are gone from both pages; what remains here is what the light sheet still paints and these pages do not write themselves. Most of it is bare ELEMENT selectors, against which a page-local prefix is no protection, so the property is set rather than left to cascade; .eyebrow, .lede, .mono and .who are generic CLASS names the light sheet also claims, which is the same collision reaching one step further. This is the same class the block at the top of this file already names, found there inside the product mock and fixed only there: the document around the mock was never looked at. */ .eyebrow{color:var(--text-accent)} .lede{color:var(--text-secondary)} main h2{color:var(--text-accent);border-top-color:var(--line-edge)} /* square, because A1 is precise rather than soft and a 3px pill contradicts it on the very page that states the attribute */ code,.mono{background:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-ui)} table{min-width:0} th,td{border-bottom:1px solid var(--line-separator)} /* white-space:nowrap on a header cell is right in a light research document at full width and is the whole of the 360 overflow here: it set the intrinsic width of the table to 376 on a 360 board, and neither min-width:0 nor a narrower cell could get under it. */ th{background:var(--bg-surface);color:var(--text-secondary);border-bottom:1px solid var(--line-edge); white-space:normal} /* a four column comparison cannot be made to fit 360 and should not be made to try: below the narrow breakpoint the table scrolls inside itself rather than pushing the document, which is what .tw does for the research sheets and what these two pages never wrapped their tables in. The columns stay aligned because the row groups keep their own box. */ @media (max-width:600px){ th,td{padding:9px 10px} table{display:block;overflow-x:auto} } .who{font-family:var(--font-mono)}