*{box-sizing:border-box;margin:0;padding:0} body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.68;-webkit-font-smoothing:antialiased} body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:repeating-linear-gradient(0deg,rgba(26,26,24,.035) 0 1px,transparent 1px 27px), repeating-linear-gradient(90deg,rgba(26,26,24,.035) 0 1px,transparent 1px 27px)} header,.tab,footer{position:relative;z-index:1} body.locked{overflow:hidden;height:100dvh} img,svg{display:block;max-width:100%} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} /* ---------- primitives ---------- */ .wrap{max-width:1440px;margin:0 auto;padding:0 clamp(18px,3.4vw,48px)} .mono{font-family:var(--m);font-size:10px;letter-spacing:2.2px;text-transform:uppercase} .eyebrow{font-family:var(--m);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--rust)} .grey{color:var(--grey)} h1,h2,h3,h4{font-weight:800;letter-spacing:-.028em;line-height:1.04} /* Ten percent off the title. Every term of the clamp is scaled by 0.9 and nothing else moves: clamp(36px,4.6vw,62px) becomes clamp(32.4px,4.14vw, 55.8px). 62 to 55.8 at 1440 and 1366, 58.88 to 52.99 at 1280. The family, the weight, the letter spacing, the colour and the leading are untouched. h1 is written once in this document, on Home, so no other tab is reached. */ h1{font-size:clamp(32.4px,4.14vw,55.8px);letter-spacing:-.036em;line-height:.98} h2{font-size:clamp(24px,2.7vw,34px)} h3{font-size:19px;letter-spacing:-.018em} h4{font-size:15.5px;letter-spacing:-.008em} p{color:var(--body)} .col{max-width:66ch} .col p+p{margin-top:15px} .chip{display:inline-block;background:var(--ink);color:var(--paper);padding:3px 9px; font-family:var(--m);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:500} .chipline{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap} .chipline .t{font-weight:700;font-size:15px;letter-spacing:-.01em} #plansets .chipline{justify-content:space-between} #plansets .chipline .t{font-weight:600;font-size:12.5px;color:var(--body);flex:1 1 auto} #plansets .chipline .gs{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey);flex:0 0 auto} .block{padding:clamp(38px,4.6vw,68px) 0;border-top:1px solid var(--line)} .block:first-child{border-top:0;padding-top:clamp(30px,3.6vw,50px)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(16px,2.6vw,36px)} .stat{border-top:1.5px solid var(--ink);padding-top:10px} .stat .v{font-size:clamp(24px,2.9vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1} .stat .v.sm{font-size:clamp(17px,1.9vw,21px)} .stat .k{font-size:13px;color:var(--body);margin-top:6px;line-height:1.4} table.t{width:100%;border-collapse:collapse;border:1px solid var(--line2);background:var(--panel);font-size:13.5px} table.t th{text-align:left;font-size:13px;font-weight:700;padding:10px 12px;border-bottom:1px solid var(--line2); border-right:1px solid var(--line);background:var(--paper);vertical-align:bottom} table.t td{padding:9px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);color:var(--body);vertical-align:top} table.t th:last-child,table.t td:last-child{border-right:0} table.t tr:last-child td{border-bottom:0} table.t td.n{font-family:var(--m);font-size:12.5px} table.t td.hl{background:#E3DCCB;font-weight:600;color:var(--ink)} .foot{font-size:11.5px;color:var(--grey);line-height:1.5;margin-top:12px} .p{font:inherit;color:inherit;background:none;border:0;border-bottom:1.5px dotted var(--rust);cursor:pointer;padding:0 1px;white-space:nowrap} .p:hover{background:rgba(176,85,47,.14)} .p sup{font-family:var(--m);font-size:8.5px;color:var(--rust);vertical-align:super;margin-left:1px} /* the same chip where the record states no value. It is still a control and still opens the trace; it is not a figure, so it does not wear a figure's mark. AN HONEST GAP IS NOT A FAULT AND MUST NOT BE TINTED LIKE ONE. */ .p.none{border-bottom-color:var(--line2);color:var(--grey)} .p.none:hover{background:rgba(26,26,24,.07)} .p.none sup{color:var(--grey)} /* ---------- header ---------- */ header{position:sticky;top:0;z-index:400;background:var(--paper);border-bottom:1px solid var(--ink);height:var(--hdr)} /* The header inner container is .wrap. Not similar to it, the same three values: max-width 1440, margin 0 auto, padding 0 clamp(18px,3.4vw,48px). It was capped at 1560 and centred while the page content is capped at 1440 and centred, so the two boxes were the same width only while both were narrower than 1440. Above that they diverged and kept diverging: the right edges sat 86 px apart on every .wrap page from 1600 up, and on Home, whose own content box is left anchored at 1560, the header ran 180 px past the content at 1920 and 500 at 2560. Tracking the container rather than offsetting against it is what makes this hold at every width instead of at one. The brand mark sits on the content's left margin and FIGURES finishes on its right margin, at 1280 and at 2560 alike, with no fixed offset anywhere. Nothing inside the bar moves. justify-content space-between holds the nav against the right edge and the group travels as one block, .tabs button:last-child still carries no right padding, and the per item padding, the gap, the size, the letter spacing, the case and the rust underline are untouched. The bar height, its background and the hairline under it are untouched. Below 1440 both boxes fill the viewport and take the same clamp, so nothing moves by a pixel there either. */ .hin{max-width:1440px;margin:0 auto;padding:0 clamp(18px,3.4vw,48px);height:100%; display:flex;align-items:stretch;justify-content:space-between;gap:20px} .mark{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer; font-weight:800;font-size:16px;letter-spacing:-.028em} .mark i{width:9px;height:9px;background:var(--rust);transform:rotate(45deg);display:block} .mark span{color:var(--grey);font-weight:500} .tabs{display:flex} /* 10px raised fifteen percent to 11.5px. Letter spacing, case, family, the nav height, the padding and the underline are all as they were. */ .tabs button{background:none;border:0;border-bottom:2.5px solid transparent;padding:0 clamp(10px,1.5vw,20px);cursor:pointer; font-family:var(--m);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)} .tabs button:last-child{padding-right:0} .tabs button:hover{color:var(--ink)} .tabs button[aria-current="true"]{color:var(--ink);border-bottom-color:var(--rust)} .tab{display:none} .tab.on{display:block} /* ---------- home, one page where one page fits ---------- The footer is measured at runtime into --foot, because its height moves with its own padding clamp, and Home is asked to fill the screen that is left. Asked, not forced. The lock used to be a fixed height with the base row as the only 1fr track, so when the screen was short the row took the whole reduction: at 1280 x 800 the ten figure rows were cut to 14.5 px each and the tenth was clipped away entirely, and at 900 wide they were 5 px. The row is now minmax(min-content,1fr). It fills the screen when there is room and it stops at its own content when there is not, and the page scrolls instead. A page that scrolls is worth more than a table that cannot be read. */ #t-home{display:none} #t-home.on{display:block} /* Home's content box is .wrap's box horizontally: the same max-width, the same margin and the same left and right clamp. It was capped at 1560 and left anchored with two different paddings of its own, so it was the one page whose content edges the header could not track. With .hin on .wrap, Home was the only page where FIGURES did not finish on the content's right margin: 94 px past it at 1920 and 414 at 2560, because the content stopped at 1538 while the header ran on. Only the horizontal box changes. The vertical padding, the grid rows and the row gap are the ones it had, so the two column stacks are untouched. The columns narrow by about 15 px at 1440 and 73 at 1920, and the cover image does not move at all: it is capped at min(586.16px,100%) and the column stays wider than that at every width. */ /* ---------- the section ends where its content ends ---------- min-height was calc(100dvh - var(--hdr) - var(--foot)), which held the section to the fold whether it had the content for it or not, and the single 1fr row stretched .htitle to fill what it held. The two columns finish at 297 and 529 px against a section 986 tall at 1440, so the last 457 px under the collaborators panel was empty paper between the block and the footer. There was no margin or padding under the block to take away: this was the whole of the band, and the section is content driven without it. The declaration is gone rather than set to zero, because zero is already min-height's initial value and a rule that states it says nothing. The footer keeps its own 36 px standoff above it, which is the footer's and is on every page. On a viewport taller than the content the page now ends above the fold rather than reaching it. */ .home{max-width:1440px;margin:0 auto; padding:clamp(16px,2.2vw,28px) clamp(18px,3.4vw,48px) 0; display:grid;grid-template-rows:minmax(min-content,1fr);gap:clamp(14px,2vw,26px)} /* Each of the two columns is its own stack, so the drawing sits one gap under the collaborators panel rather than in a row whose top the title column set. The gap between blocks in a column is .home's own row gap, the same clamp(14px,2vw,26px) that separated the two rows before. */ .hcol{display:flex;flex-direction:column;gap:clamp(14px,2vw,26px);min-width:0} /* ---------- the right column starts at the title, not the eyebrow ---------- The drop is the two fixed things standing between them: the eyebrow's own line box at its 10.5px, and the 16px margin-top the h1 carries. Both are fixed lengths, so the offset is the same 33.6px at every width, which is what the measurement shows from 1280 to 2560. It is a margin on the column, so the column travels as one block and the gap between the drawing and the panel below it is still .hcol's own. It is scoped above 1100 because below that .hcol goes display:contents, the four blocks stack in one flow and there is no column left to drop. */ /* THE DROP IS RETIRED, 2026-08-26. It landed the drawing's top on the h1 rather than on the top of the text column, which is what "level with the title" meant while the title was the only thing being aligned to. Against a chart it read as the picture sitting low: the left column starts at the eyebrow and the right started 33.6px under it, so the two columns began at different heights and the page looked settled on one side and dropped on the other. THE TWO COLUMNS NOW START LEVEL. Everything the comment above says about the offset being two fixed lengths is still true; it is simply no longer wanted. The gap between the drawing and the panel below it is untouched, and below 1100 this rule never applied. */ /* The gap between the collaborators panel and the drawing under it is taken up by the same fifth as the column itself: every arm of the clamp multiplied by 1.2, so 26 becomes 31.2 at 1920 and 1440, 25.6 becomes 30.72 at 1280 and 22.02 becomes 26.42 at 1101. It is written on the second column alone rather than on .hcol, because .hcol is both columns and the left one uses the same gap to separate the title from the heat map. Scaling it there would carry the heat map down the page, and the left column is to hold still. Below 1100 .hcol is display:contents and has no gap of its own to change, so this reaches nothing on a stacked page. */ .htitle .hcol:last-child{gap:clamp(14.28px,2.04vw,26.52px)} /* ---------- the two columns end together ---------- The collaborators panel used to finish wherever its own content ran out, which was 53.95px above the left column's last row at 1920 and 69.94 at 1440. Those two numbers are not a constant: the left column ends at the legend under an eight row table, and the table's height moves with the record. THE ANCHOR IS THE LAYOUT'S JOB, NOT A FIXED MARGIN. A typed offset would be right on the day it was measured and wrong the next time a count changes, and nothing on the page would say so. Two declarations do it, and neither carries a number: align-self:stretch .htitle sets align-items:start, so each column is only as tall as its own content and the right one stopped short. Stretched, this column fills the grid row, and the row is as tall as the taller column, which is the left one. THE LEFT COLUMN IS NOT TOUCHED BY THIS: it is already the taller of the two and sets the row either way, so stretching its neighbour moves nothing in it. margin-top:auto the column is a flex column, so an auto top margin on its last child absorbs whatever free space is left and pushes the panel to the bottom edge. It is zero when there is no slack, so the panel can never be dragged below the row or overlap the drawing above it. Scoped above 1100 because below that .hcol is display:contents: there is no column to stretch and no flex container to absorb anything, and the four blocks are one stacked flow where the panel belongs where it falls. */ @media(min-width:1101px){ .htitle .hcol:last-child{align-self:stretch} .htitle .hcol:last-child .collab{margin-top:auto} } /* Two columns. The left one is sized to hold the title on one line: the h1 sets at 62px above 1280 and its text measures 533.9 px, 507 px at 1280, and 0.44fr of the band gives 589 at 1440, 559 at 1366 and 524 at 1280. The sentence keeps its own 46ch cap inside that. The panel takes the rest and both columns start at the top, so the panel's top edge is level with the eyebrow. */ /* The same two tracks and the same gap as .hmid below, so the panel sits in the photograph's column exactly: same left edge, same right edge, same width, at every viewport. The left track is 669.6 at 1440, 635.2 at 1366 and 595.2 at 1280, all of them clear of the 533.9 px title. */ /* The right track is no longer an equal share of the band. Half of it was empty paper: at 1440 the panel was 669.6 wide and every cell in it carried 82 px of dead space between the name and the organisation, and the drawing below took the same 669.6 for a frame it did not need. It is a measured track now rather than a fraction, so it holds still while the band grows and the whole of the growth falls to the left column: 506 at 1920 and 1600, 460.8 at 1440, and the 460 floor from 1366 down to the 1101 breakpoint. The floor is what the collaborator cells need, not a round number: at 460 a cell is 152.9 wide and its content box 141.9, against the 127.7 the widest single line pair asks for, Head of Design beside MicroLink. Below that the first row's roles would start wrapping and the row would grow. The left track stays minmax(0,1fr) and simply takes what the right one gives back, which moves nothing in it: the sentence and the heat map are both capped at 46ch, 502.6 px, and the title is set nowrap at 533.9, all of them already clear of the narrowest left track this leaves, 572.6 at 1101. ---------- the column is then taken up by a fifth ---------- Every figure in the clamp is multiplied by 1.2 and nothing else about the track changes: 460 becomes 552, 32vw becomes 38.4vw, 506 becomes 607.2. The ratio holds at every viewport rather than only at the ends, because all three arms move together, so the column is exactly 20 percent wider everywhere: 607.2 at 1920 and 1600, 552.96 at 1440, and the 552 floor from 1366 down to the breakpoint. The right edge does not move, because the right edge is set by the page padding and that is not touched. The track grows leftward into the left track, which is what the anchor asks for. The left column is not reached. What it needs is the widest of its three blocks, which is the title at 548.66 above 1280 and the 46ch cap below it, 465.78 at 1101. What it is left with is 862.4 at 1920, 803.52 at 1440, 733.9 at 1366, 651.7 at 1280 and 480.6 at 1101, clear at every one of them. The gutter is therefore untouched: it is only there to be spent if the left column ever runs out of room, and it does not. */ /* ---------- the drawing's track, and why the cap came back down ---------- The three arms were 469.2, 32.64vw and 516.12, and on 2026-08-27 all three were multiplied by 1.095 to spend room the anchor had freed. THE UPPER ARM WENT TOO FAR AND IS BACK AT 530. The other two are unchanged at 513.77 and 35.741vw, because they are only reached below about 1483 and the columns end together there already. WHAT THE OLD FIGURE RESTED ON DID NOT REPRODUCE. The block that stood here said the columns were level "with 0.765px in hand at 1920", computed against a ONE LINE caption at 28.5. Measured on the served build the right column finished 17.22px BELOW the left at 1920, and the caption sets TWO lines at 34.5. A NUMBER COMPUTED AGAINST A BLOCK THAT HAS SINCE CHANGED HEIGHT IS NOT A MEASUREMENT. 530 IS DRIVEN, NOT DERIVED. The upper arm was swept and the page measured at each value, at both widths. .collab's bottom against #hnum-heat .tlegend's: 565.15 +17.22 535 +2.07 531 +0.05 555 +12.13 534 +1.55 530.9 0.00 <- the crossing 545 +7.10 532 +0.55 530 0.00 <- taken Below the crossing nothing further happens: .collab carries margin-top:auto, so once the right column is the shorter of the two the card is held at the left column's bottom and the page stops moving. 530 is 0.9 under the crossing rather than exactly on it, so a sub-pixel change does not put it back over. THE CAPTION STAYS AT TWO LINES at every value swept down to 515. SHRINKING IT MEANS NARROWING IT. The box is 1151/579 and that declaration is not touched, so the height follows the width: 284.28 -> 266.61 at 1920, both measuring 1.9879 to four places. -6.22 per cent on each side. AT 1440 NOTHING MOVES AT ALL: 35.741vw returns 514.66 there, which is under both the old cap and the new one, so the hero is the same 514.66 x 258.89 it was. The right edge does not move: it is set by the page padding, which is not touched. The gutter is untouched at 40 and 34.55. */ .htitle{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) clamp(513.77px,35.741vw,530px); gap:clamp(18px,2.4vw,40px);align-items:start} /* ---------- the gutter is spent before the table is ---------- The heat block asks for 653.32 at its new 59.8ch. The left track gives it 734.49 at 1280 and more above, but only 658 at 1200 and 563.36 at 1101, and the right hand column is fixed by its own track and the page's right margin and is not allowed to give. The gutter is the first thing to spend, which is what happens here: 2.4vw is held at its own 18px floor from 1300 down, which returns 12.72 px to the left track at 1300, 10.8 at 1200 and 8.42 at 1101. Bounded below at 1101 so it cannot reach the stacked layout, where .htitle is one column and the 22px gap is the space between stacked blocks rather than a gutter between columns. It is enough from about 1187 up, where the block reaches a full 1.3. Below that the 46ch cap's own maximum keeps it inside the track and it lands short of 1.3 rather than crossing into the column: 1.27 at 1150 and 1.23 at 1101. Short is the correct failure here, because the one thing that must not happen is the two columns touching. */ @media(min-width:1101px) and (max-width:1300px){.htitle{column-gap:18px}} .htx{min-width:0} .htitle h1{white-space:nowrap} /* Below 1100 the two tracks become one. The columns dissolve so the four blocks stack in the order they read in: title, collaborators, heat map, drawing, which is the order they stacked in before the columns existed. */ @media(max-width:1100px){.htitle{grid-template-columns:1fr;gap:22px}.htitle h1{white-space:normal} .hcol{display:contents} .htx{order:1}.collab{order:2}.hnum.heat{order:3}.hstack{order:4}} /* The left column's rhythm. The heading and the sentence were tight against the eyebrow and against each other, and the table sat one .home row gap under the sentence, 26 px, which is the same gap the whole grid uses. Six pixels of headroom go above the heading and six above the sentence, and the sentence carries the rest below it on the page's own viewport scale: 28.8 px at 1920, 21.6 at 1440, 19.2 at 1280, on top of the row gap that was already there. Nothing about the type changes, not the size, the weight, the letter spacing or the leading, and the table is not touched. The table and the photograph are the two cells of one grid row, so the space moves both. That is what keeps their top edges level, which the brief asks for: the photograph's width, height, aspect and side edges are untouched and it simply sits lower with the table it is aligned to. */ .htitle .sub{font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:-.012em;line-height:1.4; margin-top:18px;margin-bottom:clamp(16px,1.5vw,29px);max-width:46ch} /* Two columns: the figures table left, the photograph right, an equal share each. The gap is the one the three column row carried. align-self start on the row itself is what makes the photograph match the table rather than the screen: .hmid takes its content height, the photograph contributes none of its own because its img is absolutely positioned, so the height of the row is the height of the table. The photograph then stretches to exactly that and crops the excess. */ .hmid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,2.4vw,40px);align-items:stretch;align-self:start} /* The figures table is the thing that sets the height of this row. It renders at its natural height and is never the thing that gives way. */ .hnum{border-top:2px solid var(--ink);align-self:start;width:100%; font-size:clamp(15px,1.6vw,19px);font-weight:600;max-width:46ch; display:flex;flex-direction:column} /* Two tracks, not a flex pushing the value to the far edge of a 669 px column. The label track is sized to the longest label, "Derived loop rise" at 108.8 px, and the value track to the longest value, "3 dry coolers, N plus one" at 157.4 px, both measured. justify-content start keeps the pair at the left of the column; the value stays right aligned inside its own track so the numbers line up under each other. */ .hnum .row{display:grid;grid-template-columns:112px minmax(0,1fr);gap:24px;align-items:baseline; flex:0 0 auto;padding:3px 0;border-bottom:1px solid var(--line)} .hnum .row:last-child{border-bottom:0} .hnum .l{font-family:var(--m);font-size:8.5px;font-weight:400;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey);line-height:1.3} .hnum .v{font-size:clamp(12px,1.05vw,14px);font-weight:700;letter-spacing:-.014em;line-height:1.2;text-align:right;white-space:nowrap} /* ---------- the heat map that replaced the figures table ---------- It sits in the same box: .hnum still sets the column width, the 46ch cap, the left edge and align-self, so the block does not move. What changes is where the 2 px ink rule sits. The figures table carried it along its top. The head carries it along its bottom instead, so the two mono lines read first and the rule closes them, and .hnum's own top rule is dropped so there is only ever one. */ /* The weight stays on .hnum. Its max-width is 46ch, and ch is the advance of the zero at the element's own weight, so dropping the weight here would pull the column in by 1.75 px and the block would not be where it was. The lighter weight is set on the inner block instead, where nothing measures against it. */ /* ---------- the heat block is taken up by 30 percent ---------- The width is the cap: 46ch becomes 59.8ch, which is 46 x 1.3 exactly. It is written on .hnum.heat rather than .hnum so the strapline, which carries its own 46ch, is not touched and does not move. ch resolves against .hnum's own font size and its 600 weight, both unchanged, so the unit is the one the block was already measured in and 59.8ch is 1.3 x 502.55 = 653.32 at every viewport wide enough to give it the room. The cap is a maximum, not a width, so where the left track is narrower than 653.32 the block takes the track instead and stops short of 1.3. That is the whole of what keeps it off the right hand column. */ .hnum.heat{border-top:0;max-width:59.8ch} .tinyheat{font-weight:400} .tinyheat .th{display:flex;justify-content:space-between;gap:15.6px;font-family:var(--m);font-size:11.05px; letter-spacing:1.69px;text-transform:uppercase;color:var(--grey);line-height:1.3; padding-bottom:9.1px;border-bottom:2px solid var(--ink);margin-bottom:9.1px} .tinyheat table{border-collapse:collapse;width:100%;table-layout:auto} .tinyheat td{padding:0;border:0} .tinyheat th{font-family:var(--m);font-size:9.1px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);padding:0 0 5.2px;border:0;text-align:center;font-weight:400} .tinyheat th.rl{text-align:left} /* ---------- the four data columns are equal ---------- table-layout is auto, so each column was sizing to its own heading text: Figures 93.23, Locked 79.91, Unresolved 133.19 and Sourced 93.25 at 1440. Unresolved is the longest word and took the widest column, which is why the bars down that column were wider than the rest. Giving all four the same width is not enough on its own: auto layout never takes a column below the minimum content width of its cells, and Unresolved is a single unbreakable word, so it kept a floor the others did not have and stayed 15.8 px wider. overflow-wrap anywhere drops that floor to one character, the equal width then governs, and the heading still sets on one line because the column it gets is far wider than the word. The bars were already flush with their headings and unragged, because a bar is the same table column as the heading above it, and that does not change. TAB and TOTAL keep sizing to their own content: the layout stays auto. 20 and not 25. Four columns at 25 sum to the whole table while TAB and TOTAL still need their own 40 per cent of it, and the solver settles that over-constraint by shorting the last column: Sourced came out 94.11 against 97.91 for the other three. At 20 the four are asked for less than the space they will actually get, so the request is satisfiable and they land equal, 96.97 each, with TAB at 208.23 and TOTAL at 57.2 exactly as before. */ .tinyheat th:not(.rl):not(.tot){width:20%;overflow-wrap:anywhere} /* Roughly double, 11.7 to 23.4, so the totals stand clear of the last bar. */ .tinyheat th.tot{text-align:right;padding-left:23.4px} .tinyheat td.rl{font-family:var(--m);font-size:10.4px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);white-space:nowrap;padding-right:11.7px;width:1%; max-width:230px;overflow:hidden;text-overflow:ellipsis} /* ---------- the bars ---------- td.hc, A SHADED BLOCK FILLING ITS WHOLE CELL, STOOD HERE. It carried its quantity in a tint alone, so a reader could tell more from less and could not tell 146 from 74. A bar carries the quantity in its length. .wbar is the track, the full width of the column and the height of one row. .wfill is the bar, absolutely placed at the left of it, so a bar always starts at the same origin down the whole column and lengths can be compared by eye. A ZERO GETS NO .wfill AT ALL, written that way in drawHeat rather than as a zero width here, so there is no element to inherit a border or a minimum and paint a mark where there is nothing. */ .tinyheat td{height:23px;vertical-align:middle;border-bottom:1px solid rgba(26,26,24,.07)} .tinyheat tbody tr:last-child td{border-bottom:0} .wbar{display:block;position:relative;height:11px;width:100%} .wfill{position:absolute;left:0;top:0;bottom:0} /* EACH RAMP RUNS DEEP AT THE ORIGIN TO PALE AT THE TIP, which puts the weight where the bar starts. Locked takes one solid and no ramp: locked is not a degree of anything, and a gradient would imply a scale that does not exist. The legend's swatches take these same four classes, so the key and the bars are the same rules and cannot drift apart. */ .wfill.fig{background:linear-gradient(90deg,var(--fig-deep),var(--fig-pale))} .wfill.unres{background:linear-gradient(90deg,var(--unres-deep),var(--unres-pale))} .wfill.src{background:linear-gradient(90deg,var(--src-deep),var(--src-pale))} .wfill.lock{background:var(--lock-ink)} .tinyheat td.tot{font-family:var(--m);font-size:11.7px;color:var(--ink);text-align:right; padding-left:23.4px;width:1%} .tlegend{display:flex;gap:15.6px;margin-top:10.4px;flex-wrap:wrap;font-family:var(--m);font-size:9.75px; letter-spacing:1.43px;text-transform:uppercase;color:var(--grey)} /* the swatch is a .wfill, so it is painted by the rules above and not by a second copy of them. position:static undoes the bar's absolute placement. */ .tlegend i.wfill{position:static;width:26px;height:11px;display:inline-block; vertical-align:middle;margin-right:5.2px} /* one block, not two stacked slots. The gap is closed and the single panel takes the full height the two slots and their gap used to occupy. */ /* The right column carries the photograph alone. No floor and no second row: it takes the full height of the row, which the figures table sets. */ /* The photograph is no longer sized by the figures table. It was a box of whatever height the table happened to set, plus ten percent, and cover threw away whatever did not fit: 54.4 px off the width at 1440, 108.4 at 1280. The block now carries the ratio of the file itself, 1760 / 747 = 2.35609, so the height follows from the width and the whole frame is shown. The width is set by the column and does not move, and neither does the top edge: the block grows downward into the paper the row already had. */ .hstack{display:block;min-height:0;align-self:start} /* ---------- collaborators, top right of Home ---------- */ /* The panel is as wide as its cells and no wider, and it sits against the right edge of the band, level with the photograph beneath it. */ /* The panel had been pushed to the bottom of its track with align-self end and a margin-bottom that made up the difference between the row gap and the column gap. That was what left a band of empty paper above it. Both are gone. .htitle already carries align-items start, so with nothing overriding it the panel starts at the top of its track and its top border sits on the same line as the eyebrow in the left column. Nothing else about it moves: no negative margin, and its height, width, padding, row pitch, border, type and colour are all untouched. Everything below it, the cover image included, comes up with it. */ /* ---------- the panel is enlarged by a fifth, not restyled ---------- Everything inside it that carries a length is multiplied by 1.2 and nothing else changes. The type: 8.5 to 10.2 on the header and the 06 counter, 11 to 13.2 on a name, 9 to 10.8 on an organisation, 7 to 8.4 on a role caption. The letter spacing with it, 2.2 to 2.64 and 1.3 to 1.56, because spacing set in px would otherwise stay behind and the type would not scale as drawn; the name's own spacing is in em and follows its font size on its own. The padding: 5 and 9 to 6 and 10.8 on the header, 5 to 6 on a cell. The gap between a name and its caption, 3 to 3.6, and the gap between the name block and the organisation, 6 to 7.2. The line heights are left alone on purpose. All three are unitless, 1.2, 1.3 and 1.25, so each is already a multiple of a font size that has just grown by a fifth and each row grows with it. Writing a scaled figure here would apply the fifth twice. The hairlines are left at 1px, as asked: the panel border, the two column rules and the row rule are the same weight they were. That is the one thing in the block that does not scale, so the block finishes a little under an exact 1.2 in height, 127.7 against 129.5, which is the four unscaled pixels of rule and border and nothing else. Because the cells widen by the same fifth as the type inside them, the fit is unchanged: the first row keeps its one line captions and the second row keeps the two line captions it already had. */ .collab{border:1px solid var(--line2);background:var(--panel);justify-self:stretch} .collabhead{display:flex;justify-content:space-between;align-items:center;gap:12.24px;padding:5.1px 9.18px; border-bottom:1px solid var(--line2);font-family:var(--m);font-size:8.67px;letter-spacing:2.244px; text-transform:uppercase;color:var(--ink)} .collabhead .c{color:var(--grey)} /* The rows are auto and there is no row height stated anywhere: each takes the tallest cell in it and stops. align-items is written out rather than left to the initial normal, which behaves as stretch on a grid item but says nothing about intent. It is now the only thing levelling the cells, since the cell's min-height is gone, so it is worth naming: the three cells of a row are one height, and the role line's auto top margin hangs off the floor it makes. No padding and no margin under the grid, so the last row meets the panel's bottom border with nothing in between. */ .collabgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch} /* The side padding was cut from 9 to 5 and the gap between the name block and the organisation from 9 to 6, so the pair sits close together and close to the cell edges. That tightness is kept here: both figures are carried up by the same fifth as everything else, 5 to 6 and 6 to 7.2, so the content does not spread out inside the wider cell, it only grows with it. */ /* ---------- the name and the organisation share the top row again ---------- The pair sat on one line once before and collided: neither half would shrink and neither would wrap, so as soon as the two together wanted more than the cell is wide the organisation slid left underneath the name. Stacking them fixed the collision by giving each the full width, at the cost of the row. The row is back and the collision cannot return, because the thing that caused it is gone from both halves. The organisation wraps and is capped at 45 percent of the cell, so it takes at most a share and gives the rest to the name rather than pushing it; the name wraps too and takes whatever the organisation leaves. Neither can push the other past the cell edge, so neither has anything to overrun. align-items is flex-start rather than center, so when the organisation runs to two lines the name stays level with the first of them rather than dropping to the middle of the pair. justify-content is flex-start on the cell so the text starts at the top. The grid stretches every cell in a row to the height of the tallest, and that is now the only thing equalising heights anywhere in the panel. ---------- the cell is its content and nothing more ---------- There was a min-height of 51.51px here, a floor measured against content the panel no longer carries: Alberto Lamadrid at 51.27 when his role still ran to two lines. Every cell of the six had come down to 43.31 or less under it, so the floor was holding 8.2 px of paper open in all six, which read as a band under the bottom row and as a role line adrift of its border in every card. It is gone. The height is the content's, and the stretch is what makes the three cells of a row agree on it. The two rows come out a pixel apart on the border box, 43.31 against 42.31, and that pixel is the divider between them: every cell carries a bottom border except the last three, where .collab's own border closes the panel. The content boxes are the same 42.31, so the rows read level and the line between them is drawn once rather than twice. The gap is 3.06px, which is the separation the role line used to carry as its own margin-top. It moves here because the role now takes margin-top auto to sit on the floor of the cell, and an auto margin would have swallowed that margin whole and closed the space between the organisation and the role on the tallest cell of a row. As a gap it is a minimum the auto margin cannot eat: the role never comes closer than 3.06px to the line above it, and the free space that is left over still goes under it. */ .person{padding:5.1px 5.1px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3.06px; min-width:0} .person:nth-child(3n){border-right:0} .person:nth-last-child(-n+3){border-bottom:0} .person .ptop{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between; gap:5.1px;min-width:0} /* The name takes what the organisation leaves and nothing more: flex-basis 0, so it asks for none of the row of its own accord and the organisation is served its cap first. min-width 0 is what lets it come down to that share rather than holding its content width and pushing the pair wide, and it is also what keeps the two halves apart, because the name can no longer reach across the gap into the organisation's column. It kept its width and refused to shrink while the organisation's cap was 45 percent of the cell, which at 1280 was 70 px of the 144.5 the content box has. The cap is 44 px now, so the name is 26 px better off than it was under the arrangement that was protecting it, and the longest of the six, Alberto Lamadrid at 92 px, is inside its share on one line at 1920, 1440 and 1280. overflow-wrap is the backstop for a longer name added later. */ .person .n{font-weight:700;font-size:11.22px;letter-spacing:-.014em;line-height:1.2; white-space:normal;overflow-wrap:break-word;flex:1 1 0;min-width:0} /* ---------- the role is two steps smaller ---------- The role is the line that overran the cell, and at 7.14px the longest of them could not be held inside it at any letter spacing worth keeping. It comes down two steps of the panel's own 0.51px unit, 14 units to 12, and the spacing with it, 2.6 units to 2, which is what puts Infrastructure and Energy inside a single line. The uppercase, the mono family and the rust are untouched. white-space is normal and nothing here hides overflow, so a role longer than the cell can hold wraps to a second line rather than being clipped at the border. margin-top is auto, so the role sits on the floor of the cell rather than directly under the organisation with the leftover height beneath it. Two things follow. The distance from the role to the bottom border is the cell's own bottom padding, 5.1px, the same as the padding over the name, so the cell reads even top and bottom. And because the three cells of a row are stretched to one height, every role line in a row lands on the same floor: they align across the row whether the organisation above them took one line or two, which they did not do while each hung from the line above it. */ .person .r{font-family:var(--m);font-size:6.12px;letter-spacing:1.02px;text-transform:uppercase; color:var(--grey);margin-top:auto;line-height:1.3;white-space:normal;overflow-wrap:break-word} /* THE ROLE LINE WAS RUST, SIX TIMES ON ONE SCREEN. The accent on this site is spent once a page, on the kicker that names what the page is; six job titles in the accent is an accent nowhere. It takes the grey every other micro label takes and nothing else about it moves. */ /* ---------- the cap is a measured width, not a share ---------- Every affiliation of two words or more takes two lines, and only Lehigh University did while the cap was 45 percent of the cell: Rice University wanted 61.17 px and Arctos Labs 48.36 of the 70 that share gave them at 1280, so both sat on one line and the block read unevenly against the card that wrapped. The cap is a width now rather than a fraction, because the type is a fixed 9.18px and the words it has to sort are therefore the same measure at every viewport: a share of the cell moves under them as the panel grows, a width does not. It has to fall under the narrowest pair, Arctos Labs at 48.36, and stay above the longest single word, University at 40.72, or overflow-wrap would break that word across two lines rather than the phrase. 44 px sits in that window, 4.36 under the one and 3.28 over the other, and it clears the two single word affiliations that are to stay whole, MicroLink at 39.67 and Akila3D at 32.13, so those are untouched. Nothing here refuses a break, ends in an ellipsis or hides what does not fit. The line height is tight at 1.15 so the two lines sit close, and the right alignment is the one it has always had, which is what reads it as the quieter half of the pair. No top margin, because it starts on the name's line. */ .person .o{font-size:9.18px;color:var(--grey);text-align:right;line-height:1.15; white-space:normal;overflow-wrap:break-word;max-width:44px;flex:0 1 auto;min-width:0} /* The box takes the exact ratio of the file it carries, so cover has nothing to crop and contain would have nothing to letterbox. What the block carries is now a drawing rather than a photograph, so the two are no longer interchangeable at the sub pixel: cover would take rounding off the frame, and on a process diagram the outermost thing is a border line. The image is on contain instead, so rounding is left as a fraction of a pixel of paper beside the frame, which is invisible on paper coloured ground, and no part of the drawing is ever removed. No border, no radius, no shadow, no caption. */ /* ONE DECLARATION OWNS THE SHAPE, AS THE TWO NUMBERS THE FILE CARRIES. This read aspect-ratio:1760/747 = 2.35609, which matched NOTHING: not the wastewater plan that used to sit here at 1600/873 = 1.83276, and not the chart that sits here now at 1200/699 = 1.716738. It was a rule whose reason had gone, kept because it looked harmless, and above 1100 a second rule was turning it off again so that the image's own ratio could drive the box. TWO OWNERS OF ONE SHAPE IS ONE TOO MANY. The declaration is now the card file's own width and height, and it is the only thing that sets this box at any width; the image scales to fill it and sets nothing. */ /* 1151/579 = 1.9879102, the card file's own two numbers. It was 1199/698 = 1.7177650, and 1151/670 and 1200/699 before that. THE BOX AND THE FILE SHIP TOGETHER, so this moves in the same commit as the webp and never in a later one. A CHART IS NOT A PLAN AND CARRIES ITS OWN SHAPE. 821/478 = 1.7175732 IS THE DRAWINGS' RATIO: it is the viewBox every ME 4xx schematic is drawn at, and it governs the boxes that hold a drawing -- plan boxes, sheet tiles, topology tiles, sink tiles, the section wells and the finding well, all five selectors of the one rule further down this file. THIS BOX HOLDS NONE OF THOSE. It holds a chart, and a chart is drawn to whatever proportion its own argument needs. Earlier revisions of this rule chased the plan ratio and reported how near they had landed to it, which was measuring the wrong thing: the hero was never obliged to be 1.7179 and is not now. THE FILE IS WIDE ON PURPOSE AND IS NOT PADDED TO REACH ANY RATIO. At 1151x579 the card is 91 rows shorter than the 1151x670 it replaces, and that height is the whole point of the crop: HOME is one static screen and the right column is what it is spent on. A previous revision padded 217px of ground back into this artwork to hold a ratio, which undid exactly the saving the crop was made for. AN IMAGE IS NEVER PADDED TO FIT A RATIO; the ratio follows the image. THE FULL IS 2302x1159 = 1.9861950, one row off twice the card's 579. It is the zoom target and never sizes this box, so the card's two numbers are the ones written here. Neither file is re-encoded, resized, recoloured or normalised: their ground is #EEE7DC and it is correct as it stands. */ .himg{position:relative;min-height:0;overflow:hidden;aspect-ratio:1151/579} .himg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block} /* THE WELL OPENS THE FULL FILE, so it says so with the cursor, and it says it off the attribute that does the opening rather than off a class beside it: a well with no data-img cannot get the zoom cursor by mistake. The same affordance the section cards carry, written once for this one. */ .himg[data-img]{cursor:zoom-in} /* ---------- the right column no longer sets the height of the row ---------- Carrying the file's own ratio made the right column 84.31 px taller than the left at 1440, 69.70 at 1366 and 52.74 at 1280, and that difference was the whole of what pushed Home past the fold. The nominal sizes hid it, because .home carries a min-height floor taller than the content, but the page needed 731, 714 and 687 px of viewport height, and a browser window on a 768 px screen does not have that once its own chrome is taken off. Above 1100 the drawing block stops carrying a ratio and takes the height of the row instead, and the row is set by the heat map, which does not move and does not change. The width, the left edge and the right edge still come from the column. The image is already on contain, so the drawing scales down whole inside the shorter box, centred, nothing cropped and nothing distorted, with paper either side of it rather than a cut frame. This has to sit after the rule above rather than beside .hstack: both are one class, so the later one wins, and written earlier it never applied. Below 1100 the two tracks become one, the image goes static and the block sizes to it, so the ratio is what it needs there and is left alone. */ @media(min-width:1101px){ /* A padding-right of clamp(20px,1.4vw,22px) stood here, pulling Home's right page margin in above 1100. It is gone: it was the last thing holding Home's right content edge off the margin every other page uses, 26 px inside it at 1600 and above, and the header tracks that margin now. Home takes the same clamp on both sides as .wrap does. */ .hstack{align-self:stretch} /* .himg{aspect-ratio:auto} STOOD HERE AND IS GONE. It existed to turn off the base 1760/747, which matched no file that has ever been in this box, so that the image could drive the height instead. The base now IS the file's ratio, so turning it off would only hand the shape back to the image and give this box two owners again. The block below still takes its height from its content, and the content and the declaration agree exactly. */ /* ---------- the drawing is sized and anchored, not letterboxed ---------- The block took the row's height and the image sat inside it on contain, centred. The frame was already the full width of the column, so its left edge was already on the collaborators border above it, but the drawing painted inside that frame was not: at 1.83276 in a box of 3.35 it was height governed, 366.35 px wide whatever the viewport, and centred, which left it 72.80 px inset at 1101 and 179.32 px inset at 1920. It is sized by width now and the block takes its height from it, so the picture itself starts on the column's left edge and there is nothing left to centre. 366.35 x 1.6 = 586.16. Height follows from the intrinsic 1600 by 873, so the ratio is held exactly and nothing is cropped. min() caps it at the column, which binds below about 1280: at 1101 the column is 511.97 and the drawing takes that rather than overflowing. With the column narrowed to 506 at its widest the cap bound at every viewport above the breakpoint, so 100% was what was read and the drawing was exactly the width of the panel. The ceiling is retired rather than scaled. Taking the column up by a fifth puts it at 607.2 at 1920 and 1600, which is past the 586.16 the min() was holding, and the cap would have started binding again: the drawing would have stopped at 586.16 inside a 607.2 panel and its left edge would have come off the collaborators border above it by 21 px. The requirement is that the two are flush at both edges at every width, and 100% is that requirement written down, where a number that happens to be larger than today's widest column is only that requirement until the column changes again. Height still follows from the intrinsic 1600 by 873, so the ratio is held exactly, the whole plan is shown and nothing is cropped at any width. The panel grows downward as it widens and the page is allowed to get taller, which is what .home's minmax(min-content,1fr) row was already written for. The cream ground, the border and the padding around the drawing are inside the file itself rather than on this element, so they scale with the image and hold their proportion without anything here to set. */ .himg{height:auto} .himg img{position:static;width:100%;height:auto;object-fit:contain} } .himg .cap{position:absolute;left:11px;bottom:7px;font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey)} /* ---------- mlp, components added when the site began reading the record ---- Namespaced so nothing here collides with the existing card, doc or chip classes. mlp-gap is a stated absence and is grey. It is never used for a value and never shares a class with an indicator or a verdict pill. */ /* the generated line drawings on the IT and thermal blocks take the same minimum height as the photographed blocks */ .story .art .aw svg{width:100%;height:100%} /* An image block takes the exact ratio of its file: the well stops imposing a box and the image drives the height, so there is no letterbox and no crop. The module blocks keep the 1.83 box because they carry a generated drawing with no natural size. */ /* mlp-imgblock sits on the .story element itself, so these are written as .story.mlp-imgblock .art ... at 0,4,0 to beat .story .art ... at 0,3,0. At 0,2,0 they never applied and --mlp-ar was never read. */ .story.mlp-imgblock .art .aw{min-height:0} .story.mlp-imgblock .art img{width:100%;height:100%;max-width:100%;max-height:100%; object-fit:contain;object-position:center} /* the same chip the token component uses, carrying a literal value rather than a parameter identifier, so it is not clickable */ /* the label and the three tokens on one line, sharing a baseline, with the same gap between the label and the first token as between the tokens */ .mlp-figrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-top:6px} .mlp-figlabel{flex:0 0 auto} @media(max-width:900px){.mlp-figlabel{flex:1 0 100%}} .mlp-fig{display:inline-block} .mlp-carried{margin-top:9px;font-family:var(--m);font-size:8px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey);line-height:1.6} /* stat rows one per line at the width of the text column */ .story .txt .sgrid.mlp-stats{grid-template-columns:1fr} .mlp-imgblock{cursor:pointer} .mlp-gap{color:#9B9B93} /* every card the same height in every group, and the footer on one baseline */ .setgrid{grid-auto-rows:1fr} .card.mlp-card{display:flex;flex-direction:column;min-width:0} .card.mlp-card .ct{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical; overflow:hidden;min-height:0} /* the figures block always reserves four lines. Without this a group of cards carrying no figures is shorter than a group that does, and the grids are separate per group so grid-auto-rows cannot equalise across them. */ /* A fixed four line block, not a minimum. Four figures plus a plus n more line is five lines and was making those cards one line taller than the rest, and the groups are separate grids so nothing equalised across them. The list clamps first, which is the intended order. */ /* the captured drawing sits inside the existing thumbnail block at its existing height, whole rather than cropped, on the panel bright ground */ .card.mlp-card .th.mlp-thumb{background:#F7F3EA;overflow:hidden;display:flex; align-items:center;justify-content:center} .card.mlp-card .th.mlp-thumb img{width:100%;height:100%;object-fit:contain;display:block} .card.mlp-card .cl{margin-bottom:0;height:41px;overflow:hidden} .card.mlp-card .mlp-more{font-family:var(--m);font-size:7px;letter-spacing:.7px; text-transform:uppercase;color:var(--grey);line-height:1.45} /* the footer sits on one baseline on every card, and neither of its two cells is allowed to wrap and take a second line */ .card.mlp-card .cf{margin-top:auto;flex-wrap:nowrap;align-items:baseline} .card.mlp-card .cf > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .card.mlp-card .ch{flex-wrap:nowrap} .card.mlp-card .ch > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .mlp-card{cursor:pointer} .mlp-card--notissued{cursor:default;opacity:.62} .mlp-card--notissued .ct{color:var(--grey)} .mlp-card--image{cursor:pointer} .mlp-th{padding:0;overflow:hidden} .mlp-th img{width:100%;height:100%;object-fit:cover;display:block} .mlp-docgroup{grid-column:1/-1;font-family:var(--m);font-size:10px;letter-spacing:2.2px; text-transform:uppercase;color:var(--rust);border-top:2px solid var(--ink); padding-top:8px;margin-top:10px} .mlp-doc{cursor:pointer} .mlp-doc--dup{opacity:.62} /* The viewer is the page while it is open. It sits above the header, which is z-index 400, and above the drawers at 800 and 850, and the chrome is hidden outright rather than merely covered. */ #mlp-full{position:fixed;inset:0;z-index:950;background:var(--paper);display:none; width:100vw;height:100dvh;border:0;padding:0;grid-template-rows:auto minmax(0,1fr)} #mlp-full.on{display:grid} body.mlp-fullopen{overflow:hidden} body.mlp-fullopen header,body.mlp-fullopen footer,body.mlp-fullopen .tab{display:none} /* a sheet carries its own way out, so it gets the whole viewport with no bar */ #mlp-full.mlp-full--sheet{grid-template-rows:minmax(0,1fr)} #mlp-full.mlp-full--sheet .mlp-fullbar{display:none} .mlp-fullbody{border:0;padding:0} .mlp-fullbar{display:flex;justify-content:space-between;align-items:center;gap:14px; padding:8px 14px;border-bottom:1px solid var(--line2);background:var(--panel)} .mlp-fulllabel{font-family:var(--m);font-size:10px;letter-spacing:2.2px;text-transform:uppercase} .mlp-fullclose{font-family:var(--m);font-size:10px;letter-spacing:2.2px;text-transform:uppercase; background:var(--guide);color:var(--panel);border:0;padding:5px 12px;cursor:pointer} .mlp-fullbody{min-height:0;overflow:auto;background:var(--paper)} .mlp-fullbody iframe{width:100%;height:100%;border:0;display:block} .mlp-fullbody img{width:100%;height:100%;object-fit:contain;display:block} @media(max-width:1100px){ body.locked{overflow:auto;height:auto} .home{grid-template-rows:none;min-height:0;padding-bottom:0} /* the lock releases and the page scrolls. The photograph comes off cover and sits at its natural ratio under the table. */ .pagehead{grid-template-columns:1fr;gap:14px;align-items:start} .pagehead .lede{text-align:left;margin-left:0;justify-self:start} .hmid{grid-template-columns:1fr;gap:26px;align-items:start} .hstack{grid-template-rows:none} .collabgrid{grid-template-columns:repeat(2,1fr)} .person:nth-child(3n){border-right:1px solid var(--line)} .person:nth-child(2n){border-right:0} .person:nth-last-child(-n+3){border-bottom:1px solid var(--line)} .person:nth-last-child(-n+2){border-bottom:0} .himg{min-height:0} .himg img{position:static;width:100%;height:auto;object-fit:fill} } /* ---------- sections ---------- */ .pagehead{padding:clamp(12px,1.4vw,20px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr); gap:clamp(20px,3vw,48px);align-items:end} .pagehead .lede{font-size:clamp(15px,1.5vw,18px);font-weight:600;letter-spacing:-.012em;line-height:1.42; max-width:46ch;margin:0 0 4px auto;color:var(--body);text-align:right;justify-self:end} /* ==================== NAVIGATION ==================== One breadcrumb and one sub navigation control for the whole site. Neither is scoped to a tab: any tab may carry either, and they must not drift apart. The breadcrumb bar sits between the header and the panels, so it is in the same place on every view by construction rather than by each renderer remembering to put it there. It is empty and hidden on a tab root. */ .crumbbar{background:var(--paper)} .crumbbar .wrap{padding-top:0;padding-bottom:0} .crumbnav{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--grey);display:flex;align-items:center;gap:7px;flex-wrap:wrap; padding:clamp(14px,1.8vw,22px) 0 0} .crumbnav:empty{display:none} .crumbnav a{color:var(--teal);cursor:pointer;text-decoration:none;font:inherit; letter-spacing:inherit;text-transform:inherit;background:none;border:0;padding:0} .crumbnav a:hover{border-bottom:1px solid var(--teal)} .crumbnav .sep{color:var(--line2)} .crumbnav .here{color:var(--grey)} /* The class page's way back. Only that one segment takes it, set by the router where the class page builds its trail: the chevron and the class name after it stay plain breadcrumb text on the same line with the same gap. The label keeps the breadcrumb's own mono, 8.5 px, 1.4 px letter spacing and caps. The container is the part profile's button.act: 7px 11px of padding, no border, square, and the same outline the site's other focus states use. */ .crumbnav a.crumbback{background:var(--blue);color:var(--paper);padding:7px 11px;border:0; display:inline-block;line-height:1} .crumbnav a.crumbback:hover{background:var(--blue-over);border-bottom:0} .crumbnav a.crumbback:focus-visible{outline:2px solid var(--rust);outline-offset:1px} /* The sub navigation. Teal outline on the selected item with a transparent fill, a line border and grey text on the rest, and teal on hover. No solid button and no ink fill: the tab underline is what says which tab you are on, and a filled black block here competed with it. */ .subnav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding-bottom:12px; border-bottom:1px solid var(--line)} .subnav button{font-family:var(--m);font-size:10px;letter-spacing:1.8px;text-transform:uppercase; padding:8px 14px;border:1px solid var(--line2);background:transparent;color:var(--grey); cursor:pointer;display:inline-flex;align-items:baseline;gap:7px} .subnav button:hover{color:var(--teal);border-color:var(--teal)} .subnav button[aria-current="true"]{color:var(--teal);border-color:var(--teal);background:transparent} .subnav button .c{font-family:var(--m);font-size:8px;letter-spacing:1.2px;color:inherit} /* The fallback line an unknown address leaves behind, so a bad hash says what happened instead of showing a blank panel. */ .routenote{font-family:var(--m);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--rust);border:1px solid var(--rust);padding:7px 10px;margin:12px 0 0} /* ==================== FIGURES ==================== The record read over its own endpoints. Nothing here holds a literal. */ #t-figures .figcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:6px} @media(max-width:1240px){#t-figures .figcards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){#t-figures .figcards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){#t-figures .figcards{grid-template-columns:1fr}} #t-figures .figcard{border:1px solid var(--line2);background:var(--panel);cursor:pointer; text-align:left;font-family:var(--f);color:var(--body);display:flex;flex-direction:column; padding:11px 12px 10px} #t-figures .figcard:hover{background:var(--bright)} #t-figures .figcard .nm{font-weight:700;font-size:13px;letter-spacing:-.014em;line-height:1.22; color:var(--ink);flex:1} #t-figures .figcard .cnts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; margin-top:11px;padding-top:9px;border-top:1px solid var(--line)} #t-figures .figcard .ck{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey)} #t-figures .figcard .cv{font-family:var(--m);font-size:15px;font-weight:600;color:var(--ink);margin-top:2px} /* THE UNRESOLVED COUNT WAS AMBER ON FORTY TWO CARDS. Amber is a fifth colour on a palette of three neutrals and one accent, and an unresolved figure is an HONEST GAP, not a fault: it must not be tinted like one. The column already carries the word UNRESOLVED over it, which is what says which count it is. */ #t-figures .figcard .cv.u{color:var(--ink)} #t-figures .figfilters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:12px 0} #t-figures .figfilters .lab{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey)} #t-figures .figfilters select,#t-figures .figfilters input{font-family:var(--m);font-size:10px; color:var(--ink);background:var(--bright);border:1px solid var(--line2);padding:5px 8px} #t-figures table.figtab{width:100%;border-collapse:collapse;background:var(--panel); border:1px solid var(--line2);font-size:12px} #t-figures table.figtab th{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey);text-align:left;font-weight:400;padding:7px 9px; border-bottom:1px solid var(--line2)} #t-figures table.figtab td{padding:6px 9px;line-height:1.4;border-bottom:1px solid var(--line); vertical-align:top} #t-figures table.figtab tr:last-child td{border-bottom:0} #t-figures table.figtab tr.clk{cursor:pointer} #t-figures table.figtab tr.clk:hover{background:var(--bright)} #t-figures table.figtab td.s{font-weight:600;color:var(--ink)} #t-figures table.figtab td.m{font-family:var(--m);font-size:10px;color:var(--grey)} #t-figures table.figtab td.rust{font-family:var(--m);font-size:9px;letter-spacing:1.2px; text-transform:uppercase;color:var(--rust)} #t-figures .pill{font-family:var(--m);font-size:7.5px;letter-spacing:1.3px;text-transform:uppercase; padding:2px 6px;border:1px solid var(--ink);color:var(--ink);display:inline-block;white-space:nowrap} /* "missing" is a stated absence, not a warning. The word says it; the colour was saying it a second time in a fifth hue. */ #t-figures .pill.warnp{color:var(--grey);border-color:var(--line2)} #t-figures .pill.disputed{color:var(--rust);border-color:var(--rust);background:rgba(176,85,47,.09)} /* the profile */ #t-figures .figprof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.56fr); gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(12px,1.4vw,20px) 0 0} @media(max-width:1100px){#t-figures .figprof{grid-template-columns:1fr;gap:22px}} #t-figures .figprof h2{margin-top:9px;font-size:clamp(19px,2.1vw,26px)} #t-figures .bigval{font-family:var(--m);font-size:clamp(20px,2.4vw,30px);font-weight:600; color:var(--ink);margin-top:14px;line-height:1.2;word-break:break-word} #t-figures .bigval small{font-size:13px;color:var(--grey);margin-left:8px} #t-figures .figbasis{font-size:12.5px;color:var(--grey);line-height:1.5;margin-top:8px;max-width:64ch} #t-figures .figmeta{border:1px solid var(--line2);background:var(--panel)} #t-figures .figmeta .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:6px 11px;border-bottom:1px solid var(--line)} #t-figures .figmeta .r:last-child{border-bottom:0} #t-figures .figmeta .k{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey)} #t-figures .figmeta .v{font-family:var(--m);font-size:10.5px;color:var(--ink);text-align:right; word-break:break-word} #t-figures .stale{font-family:var(--m);font-size:9px;letter-spacing:1.3px;text-transform:uppercase; padding:8px 11px;border:1px solid var(--warn);color:var(--warn);margin-top:12px;display:block} #t-figures .stale.rustm{border-color:var(--rust);color:var(--rust)} #t-figures .prov{border:1px solid var(--line2);background:var(--panel);padding:11px 12px;margin-top:8px} #t-figures .prov .t{font-weight:700;font-size:12.5px;color:var(--ink);line-height:1.3;word-break:break-word} #t-figures .prov .m{font-family:var(--m);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--grey);margin-top:6px} #t-figures .prov .m.rust{color:var(--rust)} #t-figures .timebox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px} @media(max-width:900px){#t-figures .timebox{grid-template-columns:1fr}} #t-figures .timebox .b{border:1px solid var(--line2);background:var(--panel);padding:11px 12px} #t-figures .timebox .b .k{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--rust)} #t-figures .timebox .b .v{font-family:var(--m);font-size:14px;color:var(--ink);margin-top:6px; word-break:break-word} #t-figures .timebox .b .n{font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:6px} #t-figures .act{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; padding:7px 12px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer} #t-figures .figerr{font-family:var(--m);font-size:9.5px;letter-spacing:1.1px; border:1px solid var(--rust);color:var(--rust);background:rgba(176,85,47,.06); padding:11px 12px;margin-top:12px;line-height:1.7} /* ---------- writing: the form, and who it writes as ---------- */ #t-figures .wform{border:1px solid var(--line2);background:var(--panel);padding:14px 15px;margin-top:10px} #t-figures .wform .who{font-family:var(--m);font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase; padding:7px 9px;border:1px solid var(--line2);background:var(--bright);margin-bottom:12px} #t-figures .wform .who.no{border-color:var(--rust);color:var(--rust)} #t-figures .wform .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(max-width:900px){#t-figures .wform .grid{grid-template-columns:1fr}} #t-figures .wform label{display:block;font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey);margin-bottom:4px} #t-figures .wform input,#t-figures .wform select,#t-figures .wform textarea{ width:100%;font-family:var(--m);font-size:11px;color:var(--ink);background:var(--bright); border:1px solid var(--line2);padding:6px 8px} #t-figures .wform textarea{min-height:56px;font-family:var(--f);font-size:12px} #t-figures .reason{display:grid;gap:8px;margin-top:12px} #t-figures .reason .opt{border:1px solid var(--line2);background:var(--bright);padding:9px 11px;cursor:pointer; display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start} #t-figures .reason .opt.on{border-color:var(--rust)} #t-figures .reason .opt .t{font-weight:700;font-size:12.5px;color:var(--ink)} #t-figures .reason .opt .d{font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:3px} #t-figures .wcur{border:1px solid var(--line2);background:var(--bright);padding:10px 11px; font-family:var(--m);font-size:10.5px;line-height:1.6} #t-figures .wcur .k{color:var(--grey);font-size:8px;letter-spacing:1.3px;text-transform:uppercase} #t-figures .wmsg{font-family:var(--m);font-size:9.5px;letter-spacing:1.1px;padding:10px 11px; border:1px solid var(--line2);margin-top:10px;line-height:1.7} #t-figures .wmsg.bad{border-color:var(--rust);color:var(--rust);background:rgba(176,85,47,.06)} #t-figures .wmsg.good{border-color:var(--teal);color:var(--teal)} /* ---------- curves ---------- */ #t-figures .curvebox{border:1px solid var(--line2);background:var(--panel);margin-top:10px} #t-figures .curvebox .h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px; padding:11px 12px;border-bottom:1px solid var(--line2);align-items:start} #t-figures .curvebox .h .t{font-weight:700;font-size:12.5px;color:var(--ink)} #t-figures .curvebox .h .m{font-family:var(--m);font-size:8.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey);margin-top:5px} #t-figures .curvebox .plot{padding:12px;background:var(--bright)} #t-figures .curvebox .plot svg{display:block;width:100%;height:auto} #t-figures .curvebox .gl{stroke:var(--line);fill:none} #t-figures .curvebox .ax{stroke:var(--line2);fill:none} /* THE ONE DRAWN FIGURE ON THIS TAB, ON THE THREE WEIGHTS. The curve being read is the thing being measured and takes .c-hvy, 1.6, and the accent, once. Its comparison was a fourth weight at 1.4 in a fifth colour, --slate; it takes .c-thin, 0.7, in the grey every other secondary line takes. */ #t-figures .curvebox .ln{fill:none;stroke:var(--rust);stroke-width:1.6} #t-figures .curvebox .ln2{fill:none;stroke:var(--grey);stroke-width:.7} #t-figures .curvebox .pt{fill:var(--ink)} #t-figures .curvebox .tx{font-family:var(--m);font-size:7px;letter-spacing:.8px;fill:var(--grey)} #t-figures .curvebox .cond{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0; border-top:1px solid var(--line2)} @media(max-width:800px){#t-figures .curvebox .cond{grid-template-columns:1fr}} #t-figures .curvebox .cond .r{display:flex;justify-content:space-between;gap:10px;padding:5px 12px; border-bottom:1px solid var(--line)} #t-figures .curvebox .cond .k{font-family:var(--m);font-size:8px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey)} #t-figures .curvebox .cond .v{font-family:var(--m);font-size:10px;color:var(--ink);text-align:right} #t-figures .nameplate{border:1px solid var(--rust);color:var(--rust);background:rgba(176,85,47,.06); padding:11px 12px;font-size:12px;line-height:1.55;margin-top:10px} /* ==================== QUEUE ==================== The state of the record in one number, then a card per category, then four surfaces. Nothing here resolves anything. */ #t-queue .qbig{border:1px solid var(--line2);background:var(--panel);padding:16px 18px;margin-top:6px} #t-queue .qbig .n{font-family:var(--m);font-size:clamp(30px,4vw,52px);font-weight:600;color:var(--rust); line-height:1} #t-queue .qbig .n small{font-size:clamp(14px,1.6vw,20px);color:var(--grey);margin-left:10px} #t-queue .qbig .d{font-size:12.5px;color:var(--body);line-height:1.5;margin-top:10px;max-width:80ch} #t-queue .qcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px} @media(max-width:1100px){#t-queue .qcards{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){#t-queue .qcards{grid-template-columns:1fr}} #t-queue .qcard{border:1px solid var(--line2);background:var(--panel);padding:12px 13px; display:flex;flex-direction:column} #t-queue .qcard .k{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey)} #t-queue .qcard .v{font-family:var(--m);font-size:24px;font-weight:600;color:var(--ink);margin-top:4px} #t-queue .qcard .b{font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:7px;flex:1} #t-queue .qcard .act{margin-top:10px;align-self:flex-start} #t-queue .act{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; padding:7px 12px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer} #t-queue .act.on{background:var(--ink);color:var(--paper)} #t-queue table.qt{width:100%;border-collapse:collapse;background:var(--panel); border:1px solid var(--line2);font-size:12px;margin-top:8px} #t-queue table.qt th{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);text-align:left;font-weight:400;padding:7px 9px;border-bottom:1px solid var(--line2)} #t-queue table.qt td{padding:6px 9px;line-height:1.4;border-bottom:1px solid var(--line);vertical-align:top} #t-queue table.qt tr:last-child td{border-bottom:0} #t-queue table.qt td.m{font-family:var(--m);font-size:10px;color:var(--grey)} #t-queue table.qt td.n{font-family:var(--m);font-size:11px;text-align:right;white-space:nowrap} #t-queue .grp{border:1px solid var(--line2);background:var(--panel);margin-top:10px} #t-queue .grp .h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start; padding:11px 12px;border-bottom:1px solid var(--line2)} #t-queue .grp .h .t{font-weight:700;font-size:12.5px;color:var(--ink);word-break:break-word} #t-queue .grp .h .m{font-family:var(--m);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--grey);margin-top:5px} #t-queue .grp .h .m.rust{color:var(--rust)} #t-queue .step{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px; padding:7px 12px;border-bottom:1px solid var(--line);font-size:12px;align-items:baseline} #t-queue .step .s{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey)} #t-queue .step .r{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase} #t-queue .step .r.yes{color:var(--teal)} #t-queue .step .r.no{color:var(--warn)} #t-queue .rec{padding:10px 12px;font-size:12px;color:var(--body);line-height:1.5; border-top:1px solid var(--line2)} #t-queue .rec b{color:var(--rust)} #t-queue .why{font-size:11.5px;color:var(--grey);line-height:1.5;max-width:84ch;margin-top:8px} #t-queue .warnbox{border:1px solid var(--warn);color:var(--warn);background:rgba(138,90,0,.06); padding:11px 12px;font-size:12px;line-height:1.55;margin-top:10px} #t-queue .rustbox{border:1px solid var(--rust);color:var(--rust);background:rgba(176,85,47,.06); padding:11px 12px;font-size:12px;line-height:1.55;margin-top:10px} #t-queue input[type=number],#t-queue input[type=text]{font-family:var(--m);font-size:11px; color:var(--ink);background:var(--bright);border:1px solid var(--line2);padding:5px 7px;width:90px} /* ==================== SOURCES ==================== The queue that works down the largest blocker in the record. Flat rules, one rust for emphasis, mono for every count and every score. */ #t-sources .srchead{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0; border:1px solid var(--line2);background:var(--panel);margin-top:6px} @media(max-width:900px){#t-sources .srchead{grid-template-columns:repeat(2,1fr)}} #t-sources .srchead .c{padding:9px 12px;border-right:1px solid var(--line2)} #t-sources .srchead .c:last-child{border-right:0} #t-sources .srchead .k{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey)} #t-sources .srchead .v{font-family:var(--m);font-size:20px;font-weight:600;color:var(--ink);margin-top:4px} #t-sources .srchead .c.on .v{color:var(--rust)} #t-sources .srcfilters{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0 12px} #t-sources .srcfilters .lab{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey)} #t-sources .srcfilters select{font-family:var(--m);font-size:10px;color:var(--ink); background:var(--bright);border:1px solid var(--line2);padding:5px 8px;cursor:pointer} #t-sources table.srctab{width:100%;border-collapse:collapse;background:var(--panel); border:1px solid var(--line2);font-size:12px} #t-sources table.srctab th{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey);text-align:left;font-weight:400;padding:7px 9px; border-bottom:1px solid var(--line2)} #t-sources table.srctab td{padding:6px 9px;line-height:1.4;border-bottom:1px solid var(--line); vertical-align:top} #t-sources table.srctab tr:last-child td{border-bottom:0} #t-sources table.srctab tr.clk{cursor:pointer} #t-sources table.srctab tr.clk:hover{background:var(--bright)} #t-sources table.srctab td.n{font-family:var(--m);font-size:11px;text-align:right;white-space:nowrap} #t-sources table.srctab td.s{font-weight:600;color:var(--ink)} #t-sources table.srctab td.m{font-family:var(--m);font-size:9.5px;color:var(--grey)} #t-sources .bkt{font-family:var(--m);font-size:7.5px;letter-spacing:1.3px;text-transform:uppercase; padding:2px 6px;border:1px solid;display:inline-block;white-space:nowrap} #t-sources .bkt.exact{color:var(--ink);border-color:var(--ink)} #t-sources .bkt.strong{color:var(--rust);border-color:var(--rust)} #t-sources .bkt.weak{color:var(--warn);border-color:var(--warn)} #t-sources .bkt.none{color:var(--grey);border-color:var(--grey)} /* the matching view */ #t-sources .srcstr{font-size:clamp(19px,2.2vw,27px);letter-spacing:-.024em;line-height:1.15; color:var(--ink);margin-top:8px;word-break:break-word} #t-sources .srcsub{font-family:var(--m);font-size:9px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);margin-top:8px} #t-sources .cand{border:1px solid var(--line2);background:var(--panel);padding:11px 12px; display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start;margin-top:8px} #t-sources .cand:hover{background:var(--bright)} #t-sources .cand .t{font-weight:700;font-size:12.5px;letter-spacing:-.012em;line-height:1.3; color:var(--ink);word-break:break-word} #t-sources .cand .meta{font-family:var(--m);font-size:8px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey);margin-top:6px} #t-sources .cand .sig{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px} #t-sources .cand .sig span{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px; text-transform:uppercase;border:1px solid var(--line2);color:var(--grey);padding:1px 5px} #t-sources .cand .sig span.on{color:var(--rust);border-color:var(--rust)} #t-sources .cand .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:7px} #t-sources .cand .score{font-family:var(--m);font-size:17px;font-weight:600;color:var(--ink)} #t-sources .act{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; padding:7px 12px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer; white-space:nowrap} #t-sources .act.ghost{background:none;color:var(--ink)} #t-sources .act.warnact{background:none;color:var(--warn);border-color:var(--warn)} #t-sources .act:disabled{opacity:.45;cursor:default} #t-sources .srcacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px; padding-top:12px;border-top:1px solid var(--line)} #t-sources .srcsearch{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap} #t-sources .srcsearch input{font-family:var(--m);font-size:11px;color:var(--ink); background:var(--bright);border:1px solid var(--line2);padding:7px 9px;min-width:min(420px,100%)} #t-sources .srcmsg{font-family:var(--m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase; padding:9px 11px;border:1px solid var(--line2);background:var(--bright);margin-top:12px} #t-sources .srcmsg.ok{border-color:var(--rust);color:var(--rust)} #t-sources .srcnote{font-size:11.5px;color:var(--grey);line-height:1.5;max-width:78ch;margin-top:10px} /* ==================== FINDINGS, SECTION FOUR ==================== Three or four a year reach this page, so it is built for a small number of things presented properly. The rank 01 finding takes the Details page's own treatment: one panel, a drawing in a 3 px rust border on the left, the text on the right, and the governing figures on a rule beneath it. Everything below it takes a card in a four column grid. */ #t-findings .findlede{font-size:clamp(13px,1.15vw,15px);color:var(--body);max-width:64ch; justify-self:end;align-self:end} @media(max-width:1100px){#t-findings .findlede{justify-self:start}} #t-findings .chipline{justify-content:space-between} #t-findings .chipline .t{font-weight:600;font-size:12.5px;color:var(--body);flex:1 1 auto} #t-findings .chipline .gs{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;color:var(--grey);flex:0 0 auto} /* the lead. The same panel, gutter and 3 px rust border the Details page puts round a drawing, at four to three because the finding drawing is not a sheet and has no natural size to inherit. */ /* ONE COLUMN, WHICH IS THE COLUMN COUNT THE STYLESHEET ALREADY DECLARED FOR THIS BLOCK below 1000px. The .78fr column existed to hold a 4:3 drawing frame. There is no drawing and there never was one: taking the frame out and leaving the column behind would have left a third of the panel empty at every width, which is the same hole one layer up. The rule is the narrow width rule applied at all widths, not a new one, and the prose is capped at the measure .rdoc already uses so the claim does not run the full width of the panel. */ #t-findings .lead{--find-gut:clamp(13px,1.5vw,21px); display:grid;grid-template-columns:minmax(0,1fr); gap:var(--find-gut);padding:var(--find-gut); border:1px solid var(--line2);background:var(--panel);align-items:start} #t-findings .lead .tx,#t-findings .lead .holeline{max-width:76ch} /* THE COLUMN COMES BACK, BECAUSE THERE IS A DRAWING TO PUT IN IT. The .78fr column above was removed when the frame in it was empty, and removing it was right: a column held open for a drawing that does not exist is the same hole one layer up. FND 01 resolves ME 400 through SIM 07's sheetList now, so the lead takes two columns in the proportion SIM 07's answer band already uses, claim left and drawing right. THE CLASS IS WRITTEN BY THE RENDERER ONLY WHEN A SHEET RESOLVED, so a lead with no sheet is still the one column it was and this rule never fires on it. The measure cap comes off in two columns: the column is already narrower than 76ch. */ #t-findings .lead.hasdw{grid-template-columns:minmax(0,1fr) minmax(0,0.42fr)} #t-findings .lead.hasdw .tx{max-width:none} @media(max-width:900px){#t-findings .lead.hasdw{grid-template-columns:minmax(0,1fr)}} /* The drawing itself takes the plan ratio from the one declaration that owns it, at the head of the #t-sim block, where it is listed as #t-findings .finddw. Nothing about the shape is stated here. */ #t-findings .finddw-tile{align-self:start} /* THE CAPTION IS ONE LINE. The sheet tile stacks its number, title and corpus id, which is right in a 240px grid track where three short lines read better than one long one. Under a drawing standing beside a published claim the caption NAMES THE DRAWING AND CITES IT, once, on a line: number, title, id. One declaration turns the stack into the line; nothing else about the tile changes and .n .t .d keep the rules they already had. It wraps rather than truncates, so a narrow column costs a second line and never a lost id. THE SELECTOR CARRIES .shtile AS WELL AS .finddw-tile DELIBERATELY. The shared tile rule is #t-findings .shtile .m, one id and two classes, and it is LATER IN THIS FILE, so an equal specificity rule here loses to it on source order and the caption stays a stack. Written that way first and MEASURED AT THREE VISUAL LINES, which is how the loss was found. Three classes wins on specificity and cannot be undone by moving a block. */ #t-findings .shtile.finddw-tile .m{flex-direction:row;flex-wrap:wrap; align-items:baseline;gap:0 9px} /* AND SO IS THE LINE THAT STANDS WHERE THERE IS NO DRAWING. .holeline puts its label on its own row, which is right where the line is a paragraph and wrong where it is a sentence. NOT A PARAGRAPH: the label and the sentence share a line here and wrap together. .holeline is used on this tab and nowhere else, checked, so this is scoped rather than changing the pattern for everyone. */ #t-findings .holeline .w{display:inline;margin-right:7px} /* THE SIX EMPTY FRAMES ARE GONE. .lead .art was a 3px rust box of graph paper 4:3, and .fcard .art five more at 16:10, each reading "Finding drawing" and nothing else. AN EMPTY FRAME IS A HOLE, NOT A PLACEHOLDER: it reserved the space a drawing would take, spent the page's accent on the reservation, and told a reader nothing about what would fill it or what had to happen first. .holeline says both, in a quarter of the height. The two rules are kept here, struck through in words rather than deleted silently, because the .art class is still used on the Simulations catalogue and must not be confused with it. #t-findings .lead .art was 3px rust, 4:3, graph paper #t-findings .fcard .art was 1px line2, 16:10, graph paper Neither selector matches anything on this tab now. */ #t-findings .lead .holeline{align-self:start;margin-top:2px} /* THE FINDING NUMBER IS A REFERENCE, NOT THE ANSWER. It was the accent on the lead and on all five cards, which is six spends of it on one screen before the kicker. It takes the grey every other mono reference on this site takes. */ #t-findings .lead .rk{display:flex;justify-content:space-between;gap:12px; font-family:var(--m);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey)} #t-findings .lead h3{font-size:clamp(17px,1.9vw,22px);letter-spacing:-.026em;line-height:1.15; color:var(--ink);margin-top:7px} #t-findings .lead p{font-size:13px;line-height:1.55;margin-top:10px;color:var(--body)} /* the governing figures. A large number underlined in rust with its mono label beside it, the treatment the Details page uses for a carried figure. */ #t-findings .gf{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;margin-top:14px; padding-top:10px;border-top:1px solid var(--line)} #t-findings .gf .gl{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey)} #t-findings .gf b{font-size:17px;font-weight:700;color:var(--ink); border-bottom:1.5px solid var(--rust);padding-bottom:1px} #t-findings .src{display:flex;justify-content:space-between;align-items:baseline;gap:12px; flex-wrap:wrap;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)} /* The button through to the entry, which reads START SIMULATION since 2026-08-27 and read another verb before it. The same blue the class page breadcrumb takes, the same token, and the container is the part profile's button.act: 7px 11px, no border, square. The label keeps its own mono, size and letter spacing, and the underline comes off because the button carries the affordance now. THE RULE IS NAMED FOR THE JOB, NOT THE WORD, so the next rename does not leave this comment describing a label nothing carries. */ #t-findings .findlink{background:var(--blue);border:0;padding:7px 11px;cursor:pointer; font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--paper);text-decoration:none;display:inline-block;line-height:1} #t-findings .findlink:hover{background:var(--blue-over)} #t-findings .findlink:focus-visible{outline:2px solid var(--rust);outline-offset:1px} /* the rest, four across */ #t-findings .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} @media(max-width:1300px){#t-findings .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1000px){#t-findings .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){#t-findings .fgrid{grid-template-columns:1fr}} #t-findings .fcard{border:1px solid var(--line2);background:var(--panel); display:flex;flex-direction:column;min-width:0} #t-findings .fcard .in{padding:11px 12px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto} /* the card is focusable so the replacement of a superseded finding can be put in front of the reader. The outline is the site's ink, not the accent. */ #t-findings .fcard:focus{outline:2px solid var(--ink);outline-offset:2px} #t-findings .fcard:focus:not(:focus-visible){outline:2px solid var(--ink)} /* the way to a replacement, in the words the paragraph already carried */ #t-findings .findjump{display:block;text-align:left;background:none;border:0;padding:0; margin-top:5px;font-family:var(--f);font-size:11.5px;line-height:1.45;color:var(--body); cursor:pointer;text-decoration:underline;text-decoration-color:var(--line2); text-underline-offset:2px} #t-findings .findjump:hover{color:var(--ink);text-decoration-color:var(--ink)} #t-findings .findjump:focus-visible{outline:2px solid var(--ink);outline-offset:2px} #t-findings .lead .findjump{font-size:13px;line-height:1.55} #t-findings .fcard .rk{font-family:var(--m);font-size:8px;letter-spacing:1.5px; text-transform:uppercase;color:var(--grey)} #t-findings .fcard .ft{font-weight:700;font-size:14px;letter-spacing:-.016em;line-height:1.25; color:var(--ink)} /* the body is shown whole. A long one grows its card rather than being cut, so no clamp, no ellipsis and no fixed height anywhere on this card. */ #t-findings .fcard .fb{font-size:11.5px;color:var(--grey);line-height:1.45;flex:1 1 auto} #t-findings .fcard .ff{display:flex;justify-content:space-between;align-items:center;gap:8px; border-top:1px solid var(--line);padding-top:8px} #t-findings .fcard .ff .rf{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey)} /* ---- a superseded finding --------------------------------------------------- IT IS SHOWN, NEVER HIDDEN AND NEVER GREYED OUT OF LEGIBILITY. The claim stands at full contrast because it is what the site published and a reader has to be able to read it. What is added is the state, the date, the reason and what replaced it. A STATE NEVER RESTS ON COLOUR ALONE. The word Superseded is the state; delete every rule in this block and the card still says so. The rule on the left is the site's own warn tone, on a card that already carries the word. */ /* SUPERSEDED IS NOT WRONG, AND IT WAS DRAWN IN THE WARNING AMBER. A finding is superseded, never edited or deleted: the record moved on and the earlier statement is kept whole, with the reason it was replaced and the way to what replaced it. That is orderly, not faulty. The rule and the word take the ink and the body, and the word SUPERSEDED, its date and its reason are what say it. The rule stays 2px because it is a marker rail, not a drawn line. */ #t-findings .fsup{border-left:2px solid var(--line2);padding:8px 0 2px 10px;margin-top:2px} #t-findings .fsup .w{font-family:var(--m);font-size:8px;letter-spacing:1.5px; text-transform:uppercase;color:var(--body);display:inline-block} #t-findings .fsup .dt{font-family:var(--m);font-size:8px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey);margin-left:8px} #t-findings .fsup .rs{font-size:11.5px;line-height:1.45;color:var(--grey);margin-top:5px} #t-findings .fsup .by{font-size:11.5px;line-height:1.45;margin-top:5px} #t-findings .lead .fsup .rs,#t-findings .lead .fsup .by{font-size:13px;line-height:1.55} /* the card's own border follows the word rather than replacing it, in the ink rather than the amber: the border says "this one is different", and the word inside it says how. */ #t-findings .fcard.sup{border-color:var(--ink)} /* the one line a page carries while it is being built. Prompt 3 replaces it with the Components page. */ .mlp-stub{padding-top:clamp(20px,2.6vw,38px);font-family:var(--m);font-size:9px; letter-spacing:1.3px;text-transform:uppercase} .setgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px} @media(max-width:1439px){.setgrid{grid-template-columns:repeat(5,minmax(0,1fr))}} @media(max-width:1180px){.setgrid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){.setgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} #plansets{padding-top:clamp(20px,2.6vw,38px)} #plansets .block{padding:14px 0 0;border-top:0} #plansets .block:first-child{padding-top:0} #plansets .chipline{margin-bottom:7px} #t-details .block{padding:14px 0 0;border-top:0} #t-details .block:first-child{padding-top:6px} #t-details .chipline{margin-bottom:7px} #modblocks{padding-top:clamp(20px,2.6vw,38px)} #t-docs .block{padding:clamp(19px,2.3vw,34px) 0} #t-docs .block:first-child{padding-top:clamp(15px,1.8vw,25px)} .card{border:1px solid var(--line2);background:#F7F3EA;cursor:pointer;padding:8px 8px 7px; display:flex;flex-direction:column;transition:border-color .16s,transform .16s} .card:hover{border-color:var(--ink);transform:translateY(-2px)} .card .ch{display:flex;justify-content:space-between;align-items:baseline;gap:6px; padding-bottom:4px;border-bottom:1px solid var(--line)} .card .cn{font-family:var(--m);font-size:8px;letter-spacing:1.4px;color:var(--rust)} .card .cr{font-family:var(--m);font-size:7px;letter-spacing:1.1px;color:var(--grey)} .card .ct{font-weight:700;font-size:11px;letter-spacing:-.012em;line-height:1.18;margin-top:5px;min-height:2.36em} .card .th{margin:5px 0 6px} .card .th svg{display:block;width:100%;height:auto} .card .cl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);padding-top:5px; font-family:var(--m);font-size:7px;letter-spacing:.7px;text-transform:uppercase;color:var(--grey);line-height:1.45} .card .cl li{display:flex;gap:5px} .card .cl li span{color:var(--ink);flex:0 0 auto} .card .cf{margin-top:auto;padding-top:5px;display:flex;justify-content:space-between;gap:6px; font-family:var(--m);font-size:7px;letter-spacing:1px;text-transform:uppercase;color:var(--grey)} .modhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.4vw,50px);align-items:start} /* One rectangle. Both columns occupy the full row height, the block is as tall as the taller of the two, and the same padding runs left of the frame, between the columns and right of the text, so every block bottoms out on the same gap. --mlp-pad is that one value. */ /* One gutter across the block. The block border is 1 px, so the padding is the gutter less that border and the column gap is the gutter itself. Measured from the border box, all five gaps then come out identical. */ .story{--mlp-gut:clamp(13px,1.5vw,21px); display:grid;grid-template-columns:minmax(0,0.96fr) minmax(0,1.04fr); gap:var(--mlp-gut);padding:calc(var(--mlp-gut) - 1px); border:1px solid var(--line2);background:var(--panel);margin-bottom:10px; align-items:stretch} /* One rectangle around the drawing. The rust is a 3 px border sitting directly against the image, with no inset inside it. The thin border in the drawing itself belongs to the sheet and stays. */ .story .art{border:3px solid #B0552F;background:#F7F3EA;padding:0; min-width:0;overflow:hidden;align-self:stretch;display:flex} /* Width comes from the column and height from the ratio, never the reverse. min-height was making the box resolve its width from its height, 420 x 1.83 = 768.6 px, which is wider than the 644 px column, so the well painted over the text. The 1100 px override existed only to undo that and has gone with it. */ .story .art .aw{background:#F7F3EA;padding:0;box-sizing:border-box; width:100%;max-width:100%;flex:1 1 auto;min-height:0; display:flex;align-items:center;justify-content:center} .story .art img{display:block;width:100%;height:100%;object-fit:contain} .story .art .aw > *{max-width:100%;max-height:100%} .story .art svg{display:block;width:100%;height:100%} .story .amt{display:flex;justify-content:space-between;gap:10px;align-items:baseline; font-family:var(--m);font-size:7.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey); margin-bottom:7px;padding-bottom:5px;border-bottom:1px solid var(--line)} .story .amt span:first-child{color:var(--rust)} .story .txt{padding:0;display:flex;flex-direction:column;align-self:stretch;min-width:0} .story .txt .sgrid{margin-bottom:0} .story .txt > :last-child{margin-bottom:0} .story .txt h3{font-size:clamp(15px,1.5vw,19px);letter-spacing:-.022em;line-height:1.1;margin-bottom:8px} /* 70 percent of 13px. The ratio opens from 1.5 to 1.7 so the paragraph stays readable at the smaller size rather than keeping the same absolute leading. */ /* 9.1px put the body below the mono labels sitting beside it, which is the wrong way round: the prose is the thing being read. */ .story .txt p{margin-bottom:0;font-size:12px;line-height:1.5} .story .txt .sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(14px,2vw,30px);margin-top:12px} .story .txt .sgrid div{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:4px 0;border-bottom:1px solid var(--line);font-size:12px} .story .txt .sgrid span{color:var(--body)} .story .txt .sgrid b{font-weight:600;color:var(--ink);text-align:right} @media(max-width:640px){.story .txt .sgrid{grid-template-columns:1fr}} @media(max-width:960px){.story{grid-template-columns:1fr}} .draw{border:1px solid var(--line2);background:var(--panel);padding:16px} .specs{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px} .specs td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--body)} .story .specs td{padding:4px 0} .specs td:last-child{text-align:right;font-weight:600;color:var(--ink)} .specs tr:last-child td{border-bottom:0} /* ---------- documentation ---------- */ #docs{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} @media(max-width:1400px){#docs{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:1000px){#docs{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){#docs{grid-template-columns:repeat(2,minmax(0,1fr))}} .doc{border:1px solid var(--line2);background:#F7F3EA;padding:9px 9px 8px;cursor:pointer; display:flex;flex-direction:column;transition:border-color .16s,transform .16s} .doc:hover{border-color:var(--ink);transform:translateY(-2px)} .doc:hover .dn{color:var(--rust)} .doc .dr{font-family:var(--m);font-size:8px;letter-spacing:1.4px;text-transform:uppercase;color:var(--rust); padding-bottom:5px;border-bottom:1px solid var(--line)} .doc .dn{font-weight:700;font-size:12px;letter-spacing:-.014em;line-height:1.18;margin-top:6px} .doc .dd{font-size:11px;color:var(--grey);margin-top:5px;line-height:1.38} .doc .df{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey); margin-top:auto;padding-top:9px} /* ---------- parts ---------- */ .partgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:900px){.partgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.partgrid{grid-template-columns:1fr}} .part{display:grid;grid-template-columns:88px minmax(0,1fr);gap:11px; border:1px solid var(--line2);background:#F7F3EA;padding:9px} .part .pi{background:var(--rust);padding:4px;align-self:start} /* the frame keeps its border and its outer size, and states its ratio rather than taking it from the drawing inside it */ .part .pi .pw{background:#F7F3EA;aspect-ratio:2/3;display:flex;align-items:center; justify-content:center;overflow:hidden;padding:6px;box-sizing:border-box} .part .pi .pw img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} .part .pi img{width:100%;height:100%;object-fit:contain;display:block} .part .pn{font-family:var(--m);font-size:8px;letter-spacing:1.4px;text-transform:uppercase;color:var(--rust)} .part .pt{font-weight:700;font-size:12.5px;letter-spacing:-.012em;line-height:1.2;margin-top:5px} .part .pd{font-size:11.5px;color:var(--grey);line-height:1.4;margin-top:5px} .part .ps{margin-top:8px;border-top:1px solid var(--line);padding-top:6px} .part .ps div{display:flex;justify-content:space-between;gap:8px;font-family:var(--m);font-size:7.5px; letter-spacing:1px;text-transform:uppercase;color:var(--grey);line-height:1.6} .part .ps b{color:var(--ink);font-weight:400} /* ---------- mlp simulation, the selection matrix and the live checks ------- Namespaced. The verdict pill stays the .v pass, .v warn and .v fail component already on the page; nothing here shares a class with it. */ .mlp-mxhead{border-bottom:1px solid var(--line2);padding-bottom:8px;margin-bottom:14px} .mlp-mxhead .t{flex:1 1 auto;font-family:var(--m);font-size:11px;letter-spacing:2.2px; text-transform:uppercase;font-weight:600} .mlp-mxhead .gs{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);flex:0 0 auto} /* The six column table is gone. It carried position, tag, role, quantity, redundancy, duty and a verdict pill beside the one control that did the picking, and only the control was a control. What is left is a picker: four labelled sections, and in every row the name of the thing on the left and the control for it on the right. Nothing else in a row. The table rules, the horizontal scroll wrapper the eight columns needed and the one part of this class note all go with it. The verdict pills stay in the stylesheet because the rules still run; they render nowhere until the verdict section is built. */ /* Four blocks, not one column thirty five rows tall. The single column put a 995 px label against a 320 px control with a 28.8 px gap and an empty band between them, four sections of it, 1 672.81 px in all at 1440. It read as a form. The rows now fill across a multi column grid and then down, three columns at 1440 and above, two from 1100 to 1440 and one below, and inside a row the control sits directly beside its label. */ .mlp-mxsec{margin-bottom:clamp(20px,2.4vw,30px)} .mlp-mxsec:last-child{margin-bottom:0} /* the same head the section above uses, so the four read as one family. The count at the right is the section's own row count, never typed. */ .mlp-mxsechead{border-bottom:1px solid var(--line2);padding-bottom:6px;margin-bottom:2px} .mlp-mxsechead .t{flex:1 1 auto;font-family:var(--m);font-size:11px;letter-spacing:2.2px; text-transform:uppercase;font-weight:600} .mlp-mxsechead .gs{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);flex:0 0 auto} /* Rows fill across, then down. The column gap is the only gap: the rows carry a hairline each and sit hard against one another, so a section reads as a block rather than as a list. */ .mlp-mxrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(18px,2.2vw,34px);row-gap:0} @media(max-width:1439.98px){.mlp-mxrows{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1099.98px){.mlp-mxrows{grid-template-columns:minmax(0,1fr)}} /* The label and its control adjacent, with a small fixed gap and nothing between them. The label gives way first, so a long name shortens before the control does. */ .mlp-mxrow{display:flex;align-items:center;gap:10px;padding:2px 0; border-bottom:1px solid var(--line);min-width:0} .mlp-mxname{font-size:11.5px;color:var(--body);line-height:1.25;flex:0 1 auto;min-width:0} .mlp-mxctl{flex:0 0 auto;min-width:0;max-width:220px} /* Only as wide as its longest option needs, and never wider than 220 px. */ .mlp-mxsel{font-family:var(--f);font-size:11.5px;width:auto;max-width:220px;min-width:0; border-radius:0;background:#F7F3EA;border:1px solid var(--line2);padding:3px 5px;color:var(--ink)} /* A number is narrower still: its field is sized to the value it carries and its unit sits directly beside it. */ .mlp-mxnum{display:flex;align-items:center;gap:6px} .mlp-mxin{font-family:var(--m);font-size:11px;letter-spacing:.3px;width:58px;flex:0 0 auto; border-radius:0;background:#F7F3EA;border:1px solid var(--line2);padding:3px 5px;color:var(--ink)} .mlp-mxu{font-family:var(--m);font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);flex:0 0 auto;white-space:nowrap} .mlp-mxacts{margin-top:14px} /* The matrix section carried its own bottom padding so it would close on the same rhythm as the sections under it. Nothing is under it now: Simulation ends at the matrix. That padding, and the one #t-sim .block gives every block, sat between Reset to fitted and the footer as a band of empty paper, 115.2 px against 72 on Plans and Details. The last block on Simulation closes on the footer margin alone. */ #t-sim .block:last-child{padding-bottom:0} .mlp-mxreset{font-family:var(--m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase; background:var(--guide);color:var(--panel);border:0;padding:8px 14px;cursor:pointer} /* ---------- mlp parts, built from the parts workbook ---------------------- Namespaced throughout. The cards keep the existing .part component and its image well. Nothing here shares a class with the verdict pills in the check table on Simulation, which stay on .v pass, .v warn and .v fail. The parts drawer reuses the .drawer shell the document reader already uses. */ .mlp-partshead{border-bottom:1px solid var(--line2);padding-bottom:8px;margin-bottom:16px} .mlp-partshead .t{flex:1 1 auto;font-family:var(--m);font-size:11px;letter-spacing:2.2px; text-transform:uppercase;font-weight:600} .mlp-partshead .gs{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);flex:0 0 auto} .mlp-partsgap{margin-top:12px;font-size:9px;letter-spacing:1.4px;line-height:1.6} /* two equal columns across the full content width, one below 900 px */ #parts.partgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.8vw,24px); align-items:stretch;grid-auto-rows:1fr} @media(max-width:1180px){#parts.partgrid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:900px){#parts.partgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){#parts.partgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* a part in the library that is not fitted anywhere. Outline, no fill, so it reads as a state and not as a position reference. IT IS AN ABSENCE AND NOT A FAULT, so it is the grey every stated absence on this site takes rather than the accent it used to wear. */ .mlp-part .mlp-pchip--none{background:none;color:var(--grey);border:1px solid var(--line2); padding:1px 6px} /* the card is now twice as wide, so the text side runs in two inner columns rather than one stretched column. The image well grows with the card and keeps its portrait ratio. */ /* the original proportions: an 88 px well on the left at every width, and one column beside it with nothing sitting beside anything else */ .mlp-part{cursor:pointer;grid-template-columns:88px minmax(0,1fr);align-content:start} .mlp-part .pi{align-self:start} .mlp-partbody{display:block} .mlp-partbody .ps{margin-top:8px;border-top:1px solid var(--line);padding-top:6px} /* Every card the same height whatever it carries. That used to be the drawn on line taking up the slack and clamping at three lines; the footnote lines are gone, so the set is matched on the tallest remaining card by grid-auto-rows 1fr and align-items stretch alone. */ .mlp-part .mlp-pchip{display:inline-block;background:var(--ink);color:var(--paper); padding:2px 7px;font-family:var(--m);font-size:8px;letter-spacing:1.6px;text-transform:uppercase} .mlp-part .mlp-pfit{font-family:var(--m);font-size:8.5px;letter-spacing:1px; text-transform:none;color:var(--slate);margin-top:5px;line-height:1.4} /* the profile drawer */ .mlp-pd-sec{margin-bottom:24px} .mlp-pd-h{font-family:var(--m);font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase; color:var(--ink);border-bottom:1px solid var(--line2);padding-bottom:6px;margin-bottom:10px} .mlp-pd-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px; border-bottom:1px solid var(--line);padding:5px 0} .mlp-pd-kv .k{font-family:var(--m);font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--grey);line-height:1.5} .mlp-pd-kv .v{font-family:var(--m);font-size:12px;letter-spacing:.2px;color:var(--ink); text-align:right;white-space:nowrap} .mlp-pd-row{border-bottom:1px solid var(--line);padding:8px 0} .mlp-pd-row .n{font-weight:700;font-size:13px;letter-spacing:-.012em} .mlp-pd-row .d{font-size:11.5px;color:var(--body);line-height:1.5;margin-top:3px} .mlp-pd-row .m{font-family:var(--m);font-size:8.5px;letter-spacing:1.1px;color:var(--grey); margin-top:4px;line-height:1.6} .mlp-pd-assumed{border:1px solid #8A5A00;color:#8A5A00;background:#F7F3EA;padding:8px 10px; font-family:var(--m);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:10px} .mlp-pd-sheet{display:inline-block;font-family:var(--m);font-size:9px;letter-spacing:1.4px; border:1px solid var(--guide);color:var(--guide);padding:3px 8px;margin:0 6px 6px 0; background:none;cursor:pointer} .mlp-pd-none{font-family:var(--m);font-size:9px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey)} /* ---------- workroom ---------- */ #t-work{height:calc(100dvh - var(--hdr));display:none} #t-work.on{display:block} #t-work>.wrap{height:100%;max-width:none;padding:clamp(8px,1vw,14px) clamp(12px,1.6vw,24px) clamp(10px,1.2vw,18px); display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(6px,0.8vw,12px);min-height:0} #t-work .pagehead{padding:0;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px} #t-work .pagehead h2{margin-top:0!important;font-size:clamp(22px,2.4vw,32px)} #t-work .block{padding:0;border-top:0;min-height:0;display:flex} .wr{border:1px solid var(--line2);background:var(--panel);display:flex;flex-direction:column;overflow:hidden; width:100%;min-height:0} .wrtop,.wrbot{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#F7F3EA} .wrtop{border-bottom:1px solid var(--line)} .wrbot{border-top:1px solid var(--line);justify-content:space-between} .wrtop .crumb{font-family:var(--m);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey)} .wrtop .crumb b{color:var(--body);font-weight:400} .wsearch{flex:0 0 180px;background:var(--paper);border:1px solid var(--line2);padding:5px 9px;font-size:12px} .wsearch:focus{outline:2px solid var(--rust);outline-offset:1px} .wfilters{display:flex;gap:5px;margin-left:auto} .wfilters button{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; border:1px solid var(--line2);background:none;color:var(--grey);padding:4px 8px;cursor:pointer} .wfilters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .who{display:flex;align-items:center;gap:6px} .av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; font-family:var(--m);font-size:8px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);position:relative} .av.out{background:none;color:var(--grey);border-color:var(--line2)} .av.on:after{content:"";position:absolute;right:-1px;bottom:-1px;width:6px;height:6px;border-radius:50%; background:#4E8A9B;border:1px solid #F7F3EA} .wrbody{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.05fr) minmax(0,1.5fr) minmax(0,0.85fr);min-height:0;flex:1 1 auto;overflow:hidden} .wpane{min-width:0;overflow:auto;border-right:1px solid var(--line)} .wpane:last-child{border-right:0} .wph{position:sticky;top:0;background:#F7F3EA;border-bottom:1px solid var(--line);padding:6px 10px; display:flex;align-items:center;justify-content:space-between;gap:8px; font-family:var(--m);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);z-index:2} .wph button{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:3px 8px;cursor:pointer} /* SIX GROUP HEADINGS IN THE ACCENT IS A HEADING STYLE, NOT AN ACCENT. */ .wgrp{font-family:var(--m);font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--body);padding:8px 10px 3px} .wsheet{display:flex;justify-content:space-between;gap:6px;width:100%;text-align:left;background:none;border:0; border-bottom:1px solid var(--line);padding:6px 10px;cursor:pointer;align-items:baseline} .wsheet:hover{background:rgba(26,26,24,.035)} .wsheet[aria-current="true"]{background:var(--ink);color:var(--paper)} .wsheet .sn{font-family:var(--m);font-size:9px;letter-spacing:1.3px;display:block} .wsheet .st{display:block;font-size:12px;letter-spacing:-.01em;line-height:1.25;margin-top:2px} .wsheet[aria-current="true"] .st{color:var(--paper)} .wsheet .sc{font-family:var(--m);font-size:8px;color:var(--grey)} .wsheet[aria-current="true"] .sc{color:rgba(244,242,236,.7)} /* ---- the rail row when it carries a SUBJECT, not a sheet ------------------- A ROW IS SIZED BY WHAT IT SAYS. The sheet row put the number in mono at 9px and the title beneath it, which is right for "AE 301 / IT POD PLAN" and wrong for "Heat recovery to a sink": the name is the thing being read now, so it takes the reading face and the line under it takes the grey. .sp is the count of plans the subject holds, in the mono the rest of this rail already uses, and it is what keeps the register one step away rather than gone. Four rows have room to breathe where thirty five did not, so the padding opens. .wsubj and .sp were both grepped to zero on 61b356f. */ .wsheet.wsubj{padding:11px 10px;align-items:start} .wsheet.wsubj .sn{font-family:var(--f);font-size:13px;font-weight:700;letter-spacing:-.014em; line-height:1.2;text-transform:none} .wsheet.wsubj .st{font-size:11.5px;line-height:1.35;color:var(--grey);margin-top:3px} .wsheet.wsubj[aria-current="true"] .st{color:rgba(244,242,236,.75)} .wsheet.wsubj .sp{display:block;margin-top:5px;font-family:var(--m);font-size:8px; letter-spacing:1.3px;text-transform:uppercase;color:var(--grey)} .wsheet.wsubj[aria-current="true"] .sp{color:rgba(244,242,236,.7)} .wthread{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line); padding:9px 11px;cursor:pointer} .wthread:hover{background:rgba(26,26,24,.035)} /* WHICH ASPECT IS OPEN IS A SELECTION, NOT A FINDING. The site draws a selected thing as an ink fill everywhere else it draws one. The rail and the wash keep their weight and their opacity; only the hue moves. */ .wthread[aria-current="true"]{background:rgba(26,26,24,.07);box-shadow:inset 2px 0 0 var(--ink)} .wthread .tt{font-weight:700;font-size:12.5px;letter-spacing:-.012em;line-height:1.22} .wthread .tm{font-size:11px;color:var(--grey);line-height:1.35;margin-top:3px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .wthread .tf{display:flex;justify-content:space-between;gap:8px;margin-top:5px; font-family:var(--m);font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)} .wchat{display:flex;flex-direction:column;overflow:hidden} .wfeed{flex:1 1 auto;overflow:auto;padding:12px 14px} .wempty{padding:20px 14px;color:var(--grey);font-size:12.5px} .bub{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;margin-bottom:13px} .bub .bx{background:var(--paper);border:1px solid var(--line2);padding:8px 11px;font-size:13px;line-height:1.45} .bub.me .bx{background:#F1EADC} .bub .bm{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey); margin-bottom:4px;display:flex;gap:7px;align-items:center;flex-wrap:wrap} .bub img{display:block;max-width:230px;width:100%;margin-top:7px;border:1px solid var(--line2)} .wcomp{border-top:1px solid var(--line);background:#F7F3EA;padding:8px 10px;display:flex;gap:7px;align-items:flex-end} .wcomp textarea{flex:1 1 auto;background:var(--paper);border:1px solid var(--line2);padding:7px 9px; font:inherit;font-size:12.5px;min-height:38px;max-height:110px;resize:vertical} .wcomp textarea:focus{outline:2px solid var(--rust);outline-offset:1px} .wcomp select{background:var(--paper);border:1px solid var(--line2);padding:6px 7px;font:inherit;font-size:11px} .wcomp .ic{border:1px solid var(--line2);background:var(--paper);color:var(--grey);padding:6px 9px;cursor:pointer; font-family:var(--m);font-size:9px;letter-spacing:1px} .wcomp .snd{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:7px 13px;cursor:pointer; font-family:var(--m);font-size:9px;letter-spacing:1.4px;text-transform:uppercase} .wside .si{padding:9px 11px;border-bottom:1px solid var(--line)} .wside .sl{font-family:var(--m);font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey);margin-bottom:6px} .wact{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;margin-bottom:9px;align-items:start} .wact .at{font-size:11.5px;line-height:1.35;color:var(--body)} .wact .ad{font-family:var(--m);font-size:7.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--grey);margin-top:2px} .dm{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .dm button{border:1px solid var(--line2);background:var(--paper);padding:4px 9px;cursor:pointer; font-family:var(--m);font-size:8px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)} .dm button:hover{border-color:var(--ink);color:var(--ink)} .wstat{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey)} /* the three counts on the status bar. They are counts, and the words beside them say which count each is. */ .wstat b{color:var(--body);font-weight:400} @media(max-width:1200px){.wrbody{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.5fr)}.wside{display:none}} @media(max-width:820px){.wrbody{grid-template-columns:1fr;height:auto;overflow:visible} .wpane{border-right:0;border-bottom:1px solid var(--line);max-height:250px} #t-work{height:auto} #t-work>.wrap{grid-template-rows:none;height:auto}} .msg{border-left:2px solid var(--line2);padding:2px 0 4px 14px;margin-bottom:18px} .msg.us{border-left-color:var(--ink)} .msg.them{border-left-color:var(--rust)} .msg .m{font-family:var(--m);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey);margin-bottom:4px} .msg .x{font-size:14.5px;color:var(--body)} .kind{font-family:var(--m);font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;padding:2px 7px; border:1px solid var(--line2);color:var(--grey);display:inline-block} .kind.exc{color:var(--rust);border-color:var(--rust)} .kind.q{color:var(--slate);border-color:var(--slate)} .field{display:block;width:100%;background:var(--paper);border:1px solid var(--line2);padding:9px 11px;margin-bottom:10px;font-size:14px} textarea.field{min-height:92px;resize:vertical} .field:focus{outline:2px solid var(--rust);outline-offset:1px} .btn{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:9px 17px;cursor:pointer; font-family:var(--m);font-size:9.5px;letter-spacing:2px;text-transform:uppercase} .btn.ghost{background:transparent;color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)} /* ---------- footer ---------- */ /* The band of paper above the footer was 239.5 px at 1440. Half of it was the footer's own top margin and the rest was .home's min-height holding the page to one screen. The margin halved to this clamp. THE min-height IS GONE, 2026 -08-26, and the second half of that sentence with it: .home now measures 0, the section is content driven, and this margin is the whole of what is left between the last thing on a page and the dark band. */ footer{background:var(--dark);color:#B9B5A7;margin-top:clamp(22px,2.5vw,37px)} /* ---------- CONTENT STOPS ABOVE THE FOOTER, IT DOES NOT MEET IT ---------- A rule stood here that set the footer's margin-top to 0 while HOME was the tab on screen, so that the page which fits a screen would end exactly on the band. IT IS DELETED, 2026-08-27, and the standoff above applies on HOME like everywhere else. WHAT IT ACTUALLY DID. The collaborators panel's bottom edge landed on the footer's top pixel for pixel: .collab bottom 552.67 against footer top 552.67 at 1920, and 528.25 against 528.25 at 1440. THE OVERLAP MEASURES ZERO AND THE CARD STILL HAS NO BOTTOM EDGE, because the last row of the border IS the row the band starts on. LEAD PROFESSOR, CHIEF EXECUTIVE and LEAD sat one pixel clear of black. Every measurement passed: the box heights were right, the page fitted the fold, no element's rectangle crossed another's. THE DEFECT WAS ONLY EVER VISIBLE BY LOOKING AT THE BOTTOM OF THE PAGE. THE GAP WAS NEVER DEAD PAPER. The block that stood here called it that on the grounds that HOME is engineered to fit one screen, and the arithmetic behind that was wrong in a way nothing caught: document.scrollHeight FLOORS AT THE VIEWPORT, so it read 1080 against a 1080 fold whether the content was 1080 or 676. Measured on the footer's own bottom instead, the page ends at 675.86 of 1080 at 1920 and 651.44 of 900 at 1440. THERE WERE 404px AND 249px OF CLEAR PAPER BELOW IT. Restoring the standoff costs 37px of a 404px surplus. Nothing replaces this rule. Deleting it is the whole change: the declaration above is the site's one standoff and it now governs every page. */ /* The stretch from the top of the band to the rule above the mark was .fin's top padding plus .fbar's margin, 46 + 26 = 72 px at 1440. Both halve. The bottom padding is written out longhand so it keeps the value it had and the space under the mark does not move. */ .fin{max-width:1560px;margin:0 auto; padding:clamp(14px,1.7vw,23px) clamp(18px,3.4vw,48px) clamp(28px,3.4vw,46px)} .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 32px} footer .n{color:var(--paper);font-weight:700;font-size:14.5px} footer .r{font-family:var(--m);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#C98E67;margin-top:2px} footer .e{font-size:12.5px;margin-top:2px} .fbar{border-top:1px solid rgba(244,242,236,.2);margin-top:13px;padding-top:15px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center} .fmark{display:flex;align-items:center;gap:9px;color:var(--paper);font-weight:800;font-size:15px;letter-spacing:-.02em} .fmark i{width:9px;height:9px;background:#C98E67;transform:rotate(45deg);display:block} /* ---------- drawers ---------- */ .scrim{position:fixed;inset:0;background:rgba(26,26,24,.44);z-index:800;opacity:0;pointer-events:none;transition:opacity .22s} .scrim.on{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;height:100%;width:min(500px,94vw);background:var(--paper); border-left:1px solid var(--ink);z-index:850;transform:translateX(101%); transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column} .drawer.on{transform:none} .drawer.wide{width:min(1040px,96vw)} .dtop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 22px 14px;border-bottom:1px solid var(--line2)} .dbody{padding:22px;overflow:auto;flex:1} .x{background:none;border:1px solid var(--line2);color:var(--grey);cursor:pointer;padding:3px 9px;font-family:var(--m);font-size:9px;letter-spacing:1.6px} /* ---------- the document drawer, and only the document drawer ------------- Everything below is keyed on #docdrawer, so the sheet drawer, the part drawer and the trace drawer keep the type and the head they already have. The head. Close used to be the second flex child and the title block the first, which left the title block 55 px of Close plus a 16 px gap short of the drawer's inner width and put a download control at 1347 rather than under Close at 1418. Close is taken out of the flow and pinned at the top and right padding it already sat on, 20 px and 22 px, so it does not move by a pixel and is not restyled, and the title block takes the full inner width beneath it. */ #docdrawer .dtop{position:relative} #docdrawer #dc-close{position:absolute;top:20px;right:22px} #docdrawer .dc-head{flex:1 1 auto;min-width:0} /* Close leaving the flow gave the whole head the full inner width, and the rev line, which is long enough to wrap on several documents, ran under the button. It gets the button's 55 px and the 16 px gap back as padding, so it breaks exactly where it broke before. Only the title row below Close takes the full width, which is what the download controls need. */ #docdrawer #dc-r{padding-right:71px} /* The title on the left, the download controls hard right on the same line. Baseline alignment, not top or centre, so the control sits on the title's own first baseline whatever the title's length. */ #docdrawer .dc-titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:12px} #docdrawer .dc-titlerow h3{min-width:0} /* One control per format, side by side, in the order the record holds them: the register's PDF then its workbook. */ #docdrawer .dc-dl{display:flex;gap:6px;flex:0 0 auto} /* Teal on a 1 px teal border with no fill. --guide is #4E8A9B, the blue the palette already carries. Mono, uppercase, the drawer's label convention, at the size the document cards' own footer line uses. No radius, no shadow, no gradient. */ #docdrawer .dc-dl a{font-family:var(--m);font-size:8px;letter-spacing:1.1px;text-transform:uppercase; color:var(--guide);border:1px solid var(--guide);background:none;border-radius:0;box-shadow:none; padding:3px 8px;text-decoration:none;white-space:nowrap;line-height:1.35;cursor:pointer} #docdrawer .dc-dl a:hover{background:var(--guide);color:var(--paper)} /* The body text and the section headings both come down thirty percent, and nothing else in the head does. The line heights are unitless everywhere they are set, 1.68 on body, 1.04 on the heading rule and 1.5 on .foot, so they scale with the size on their own and the text keeps its leading rather than crowding. 15 -> 10.5 / 25.2 -> 17.64. 15.5 -> 10.85 / 16.12 -> 11.28. The extract note follows at 11.5 -> 8.05 / 17.25 -> 12.08, because a note annotating the body cannot be left larger than the body it annotates. */ #docdrawer .dbody p{font-size:10.5px} #docdrawer .dbody h4{font-size:10.85px} #docdrawer .dbody p.foot{font-size:8.05px} .x:hover{color:var(--ink);border-color:var(--ink)} .bigval{font-size:48px;font-weight:800;letter-spacing:-.035em;line-height:1} .bigval small{font-family:var(--m);font-size:13px;font-weight:400;color:var(--grey);letter-spacing:1.2px;margin-left:10px} .kv{display:grid;grid-template-columns:90px minmax(0,1fr);gap:9px 16px;margin:20px 0} .kv dt{font-family:var(--m);font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--grey);padding-top:3px} .kv dd{font-size:14px;color:var(--body)} .stub{background:var(--paper);border:1px solid var(--ink);aspect-ratio:841/594;position:relative;padding:14px} .stubf{position:absolute;inset:8px;border:1px solid var(--ink)} .stubc{position:absolute;inset:20px 20px 78px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px} .stubt{position:absolute;left:20px;right:20px;bottom:20px;height:52px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;padding-top:8px;gap:16px} .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px} .hairline{height:1px;background:var(--line);margin:8px 0 12px} @media(max-width:900px){.modhead,.two{grid-template-columns:1fr} .doc .df{text-align:left}} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ==================== SIMULATION, SECTION THREE ==================== */ #t-sim .ind{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border:1px solid var(--line2); background:var(--panel);margin-top:clamp(6px,0.8vw,9px)} #t-sim .ind .cell{display:flex;flex-direction:column;border-right:1px solid var(--line2);min-width:0} #t-sim .ind .cell:last-child{border-right:0} #t-sim .ind .k{font-family:var(--m);font-size:9.5px;letter-spacing:1.3px;font-weight:500;text-transform:uppercase; color:var(--rust);background:#E5DDCB;border-bottom:1px solid var(--line2);padding:7px 8px 8px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #t-sim .ind .iv{background:#F9F6EE;padding:11px 8px 12px;display:flex;align-items:baseline; justify-content:center;gap:5px;flex:1} #t-sim .ind .iv b{font-size:clamp(16px,1.55vw,22px);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap} #t-sim .ind .iv small{font-family:var(--m);font-size:8px;font-weight:500;letter-spacing:1px;color:var(--grey);white-space:nowrap} #t-sim .hero{border:1px solid var(--line2);background:#F7F3EA;position:relative; margin-top:clamp(6px,0.8vw,9px);padding:clamp(6px,0.9vw,12px)} #t-sim .hero .cover{width:100%;height:auto} /* ---------- SI 100, the objects on the plan are selectable ---------------- Attributes only. Nothing is added to the drawing, no coordinate moves, no dimension line moves and the viewBox is untouched. Selection sits on the elements that are already there, found by the coordinates they already carry. Hover and focus take a 1 px outline in ink and nothing else. No fill change, no stroke change, no shadow, no scale, no gradient, no opacity change and no transition of any length, so there is nothing on this tab that moves. There is no keyframes rule here or anywhere else in the stylesheet. */ #si100 .si-hit{cursor:pointer} #si100 .si-hit:hover,#si100 .si-hit:focus,#si100 .si-hit:focus-visible{ outline:1px solid #1A1A18;outline-offset:0} #t-sim .foot{font-size:11px;max-width:76ch} #t-sim .block{padding:clamp(26px,3vw,44px) 0} #t-sim .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.4vw,32px);align-items:start} #t-sim table.t{font-size:12px} #t-sim table.t th{font-size:11px;padding:7px 9px;vertical-align:bottom} #t-sim table.t td{padding:6px 9px;line-height:1.4} #t-sim table.t td.n{font-size:10.5px} #t-sim table.t td.r{text-align:right;font-family:var(--m);font-size:10.5px;white-space:nowrap} #t-sim .v{font-family:var(--m);font-size:8px;letter-spacing:1.4px;text-transform:uppercase;padding:2px 7px; border:1px solid;display:inline-block;white-space:nowrap} #t-sim .v.pass{color:var(--slate);border-color:var(--slate)} #t-sim .v.warn{color:#8A5A00;border-color:#8A5A00} #t-sim .v.fail{color:var(--rust);border-color:var(--rust);background:rgba(176,85,47,.09);font-weight:600} /* ---------- the catalogue, a section, a profile, a block ---------------- Four views of one tab. Everything below is prefixed sim so nothing collides with .card, .part, .doc or the picker classes already in this stylesheet, and all of it sits inside #t-sim. Flat ink rules, no radius, no shadow, no gradient, one rust for emphasis. */ #t-sim .simcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--m); font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey); padding:clamp(14px,1.8vw,22px) 0 0} #t-sim .simcrumb button{background:none;border:0;padding:0;cursor:pointer;font:inherit; letter-spacing:inherit;text-transform:inherit;color:var(--rust);border-bottom:1px solid var(--rust)} #t-sim .simcrumb span.sep{color:var(--line2)} #t-sim .simlede{font-size:clamp(13px,1.15vw,15px);color:var(--body);max-width:70ch;margin-top:8px} /* ============================================================================ ONE SITE HAS ONE PLAN RATIO, AND THIS IS THE ONLY PLACE THE SITE STATES IT. 821 by 478 is the drawings' own extent. Every sheet in public/sheets carries viewBox="10 10 821 478" -- all fourteen ME 4xx schematics, checked, not assumed -- and the ME 400 plan inside SIM 07's answer has been drawn to it since 1e9fd367. It is 1.7175732 to 1. FOUR RULES USED TO STATE FOUR SHAPES FOR THE SAME KIND OF CONTENT, so a reader met the same drawing in four proportions on one walk through the site: 841/594 the sheet, topology and sink tiles 1.415825 16/10 the simulation card's artwork 1.6 1200/670 the section card's drawing well 1.791045 821/478 the plan inside the answer 1.7175732 The first three are gone. The tiles were the worst of them: they held an 821 by 478 drawing in an A1 box under contain, which spent 17 per cent of every tile's height on cream banding above and below the drawing. THE RATIO IS WRITTEN AS THE TWO NUMBERS THE DRAWINGS CARRY, never as a decimal. A MEASUREMENT IS TAKEN ON THE UNROUNDED VALUES: 1.7176 is about a pixel wrong on a full width box and 1.717 is nearly three. SCRIPT ONLY SCALES TO FILL. simPlanFit writes a transform on the frame inside .simplan .view and never writes the box a height. WHAT IS NOT A PLAN BOX, AND IS DELIBERATELY NOT LISTED HERE. A SHEET IS NOT A PLAN: the plan is the drawing area inside the sheet, and the sheet is that plus its title block, its border and its revision table. #t-sim .mesheet holds the whole A1 sheet, its layer toggles, its zoom and its note log, laid out at 841 by 594 by construction. .stub the same sheet's stub in the sheet drawer. It holds no drawing at all, only the line saying one loads there. .himg a photograph. Its box is auto above 1100px, so the image already sets its own shape, which is this rule's own principle applied to a file that is not a drawing. .pw .well .bigwell part photographs, 2/3, portrait. ============================================================================ */ #t-sim .shtile .v, #t-sim .simplan .view, #t-sim .simsec .simdw, #t-sim .simcard .art, #t-findings .finddw{aspect-ratio:821/478} /* The drawing well. It held grid paper with the section's caption set on it, standing in until a real drawing was put here. The drawings exist now, so the grid paper and the caption are gone from inside the well and the image fills it. The caption itself is untouched in data/sections.json: the section view still prints it, beneath the strip rather than over it. The well keeps its border and its background, which is what shows in the moment before the image paints. No overlay, no caption on the image, and nothing rounded. */ #t-sim .simdw{position:relative;border:1px solid var(--line2);background:var(--bright); display:flex;align-items:center;justify-content:center;overflow:hidden} /* Contain, not cover. Cover is the setting that silently removes the edge of a sheet the moment the block and the image stop agreeing: a redrawn image at another size, or a sub pixel of rounding on a fractional column. Contain guarantees the whole sheet is visible instead of it happening to be. The block is 821/478 and the four cards carrying a re-cropped render are 1151 by 670, which is 1.717910 against the block's 1.7175732: a quarter of a pixel on a full width card, so there contain and cover paint the same thing. THE FIVE CARDS STILL CARRYING OLDER ARTWORK ARE WHERE CONTAIN DOES ITS WORK, and what it costs them is stated rather than left to be discovered. Measured at 1920, where the well is 435.33 wide and now 253.45 tall: elec, ctrl 1280 by 720 1.777778 4.3 px of --bright top and bottom water, fut 1600 by 893 1.791713 5.2 px of --bright top and bottom fin 1600 by 995 1.608040 13.9 px of --bright left and right Two of those three got better and one got worse. The Commercial card was banded 22.2 px a side in the old 1200/670 block and is banded 13.9 now, because the block moved towards its 1.608; the 1280 by 720 pair traded 1.6 px of side band for 4.3 px of top band. NOTHING IS CROPPED IN EITHER DIRECTION, which is the whole reason the setting is contain. The leftover falls on the block's own --bright, and the renders are laid on the site paper #EFEFEA and the older drawings on a ground between #F5F1E6 and #FEFAF1, so it reads as the card rather than as a letterbox. THE FIVE OLDER FILES ARE THE FIX, not this rule: re-cropping them to the locked ratio is in NEXT STEPS. */ #t-sim .simdw img{display:block;width:100%;height:100%;object-fit:contain;object-position:center} /* The section view's wide drawing panel stood here, with .simdw.wide sizing it from its drawing and .simdwcap setting the caption under it. Both are gone with the panel: the section page runs breadcrumb, eyebrow, title, strapline, then the card grid. Nothing else used either rule, so neither is left behind as dead code. .simdw itself stays, because the section cards on the catalogue are built from it and are untouched. */ /* nine section cards, three across, two rows and one */ #t-sim .simsecs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:6px} @media(max-width:1240px){#t-sim .simsecs{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){#t-sim .simsecs{grid-template-columns:1fr}} #t-sim .simsec{border:1px solid var(--line2);background:var(--panel);cursor:pointer;text-align:left; font-family:var(--f);color:var(--body);display:flex;flex-direction:column;padding:0} #t-sim .simsec:hover{background:var(--bright)} #t-sim .simsec.fut{border:1px dashed var(--rust)} /* THE SECTION CARD'S IMAGE AREA NO LONGER OWNS ITS OWN SHAPE. This rule set 16/9 until 2026-08-26, then 1200/670 when the nine renders came in, and the card was one of four boxes on the site holding the same kind of drawing at a different proportion. The shape is the plan ratio's now, declared once at the head of this block, and the nine renders were re-cropped to it: 1151 by 670 card, 2302 by 1340 full. THE RULE KEEPS WHAT IS THE CARD'S OWN. No outer border, because the card already draws one, and a hairline under the well to divide it from the text. The dashed rust border on the Future projects card is on .simsec, around the whole card, and never on the image. */ #t-sim .simsec .simdw{border:0;border-bottom:1px solid var(--line2)} /* #t-sim .simsec .simdw.opens{cursor:zoom-in} STOOD HERE AND IS GONE, with the .opens class and the data-img that went with it. It put a zoom cursor over half of a card, which is exactly the promise a card must not make: the image is part of the card, the card is one click target, and NO CURSOR CHANGE MAY SUGGEST OTHERWISE. The card's own pointer, from .simsec, now runs edge to edge across it. Removed 2026-08-26. */ /* THE WATER CARD'S COVER RULE IS GONE, AND THIS IS WHY. It existed because the Water render is 1600 by 893, which is 1.791713, and the block was 1.7778: contain left a hairline of --bright down two edges of a card meant to read edge to edge, and cover spent the 0.78 percent difference as a crop instead. Both halves of that reasoning were about the gap between the image and the block. The block is the plan ratio now, 821/478, and Water is one of the five cards still on older artwork: at 1.791713 in a 1.7175732 block it is banded 5.2 px top and bottom, which is the largest band of the five short of Commercial. A cover rule would close that by cropping 4.1 per cent of the render's height, and A RULE THAT CROPS A DRAWING TO TIDY A BAND IS THE WRONG TRADE on a site where the drawing is the evidence. The band is the honest reading of a file that has not been re-cropped yet, and it goes when the file does. A RULE WHOSE REASON HAS GONE IS NOT KEPT BECAUSE IT IS HARMLESS: the next person to read it would have taken its comment for a live constraint and sized something to it. Contain governs all nine cards. Removed 2026-08-26. */ #t-sim .simsec .bd{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1} #t-sim .simsec .eyeb{font-family:var(--m);font-size:8px;letter-spacing:1.5px;text-transform:uppercase; color:var(--rust)} #t-sim .simsec .nm{font-weight:700;font-size:15px;letter-spacing:-.014em;line-height:1.2;margin-top:6px} #t-sim .simsec .ds{font-size:12px;color:var(--grey);line-height:1.45;margin-top:5px} #t-sim .simsec .cnts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; margin-top:11px;padding-top:9px;border-top:1px solid var(--line)} #t-sim .simsec .ck{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase; color:var(--grey)} #t-sim .simsec .cv{font-family:var(--m);font-size:15px;font-weight:600;color:var(--ink);margin-top:2px} /* ---------- the simulations in a section, on the Findings card pattern ---------- Four across, stepping down at the Findings grid's own breakpoints rather than the two this grid used to carry. The card is now structurally the same card, so it earns the same steps: 4, then 3 under 1300, 2 under 1000 and 1 under 680. The gap is the Findings gap, 14px, which is what this grid already had. Height is not set anywhere. A grid item stretches by default, so every card in a row is the height of the tallest, and .fb below takes flex 1 1 auto so the footer is pushed to the bottom of each one and the footers line up. */ #t-sim .simgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px} @media(max-width:1300px){#t-sim .simgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1000px){#t-sim .simgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){#t-sim .simgrid{grid-template-columns:1fr}} /* container-type inline-size so the footer below can ask how wide this card is rather than how wide the window is. The two are not the same question: the column band caps at 1440, so a four across card is 325.5 px at 1440 and still 325.5 px at 2560, and a viewport query would have flipped the footer to one row on a card that had not grown by a pixel. Containment is on the inline axis only, so the card's height still comes from its content and the row still stretches every card to the tallest. */ #t-sim .simcard{border:1px solid var(--line2);background:var(--panel);cursor:pointer;text-align:left; font-family:var(--f);color:var(--body);display:flex;flex-direction:column;min-width:0; container-type:inline-size} #t-sim .simcard:hover{background:var(--bright)} /* The cover block. Same --bright ground as the finding card's, same 20px grid wash, same hairline under it, and the plan ratio from the head of this block rather than the 16/10 it carried until 2026-08-26. It holds one image on the whole site, me-400.svg on SIM 07's card, and that drawing is 821 by 478: at 16/10 it sat in the box under contain with a fifth of the block's height spent on grid wash above and below it. AT THE LOCKED RATIO THE DRAWING IS THE BLOCK'S CONTENT and the wash shows only in the moment before it paints. */ #t-sim .simcard .art{border-bottom:1px solid var(--line2); background:var(--bright);display:flex;align-items:center;justify-content:center;overflow:hidden; background-image:linear-gradient(rgba(26,26,24,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(26,26,24,.05) 1px,transparent 1px);background-size:20px 20px} #t-sim .simcard .art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block} #t-sim .simcard .art .ph{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);text-align:center;padding:10px} /* ---- the sheet tiles on SIM 07's profile ----------------------------------- ONE SITE, ONE VISUAL SYSTEM. Nothing below is a new pattern. The tile takes .card's border and ground, the drawing well takes .simcard .art's 20px grid wash and its hairline, the sheet number takes the site's rust eyebrow lettering and the corpus id takes .chipline .t's mono. The only rule that is this block's own is the grid track. THE TILE HELD THE A1 SHEET RATIO, 841/594, AND SHOWED A PLAN. Every file the fifteen tiles link to is an ME 4xx schematic drawn at 821 by 478, so contain held the drawing to the tile's width and spent 17.5 per cent of every tile's height on cream banding above and below it: 31 px of band on a 180 px tile at 1920, on fifteen tiles at once. The tile takes the plan ratio from the head of this block now and the drawing fills it. A SHEET IS NOT A PLAN, and what these tiles carry is the plan. */ #t-sim .shgrid{display:grid;gap:14px;margin-top:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} /* EVERY RULE BELOW IS SHARED WITH THE INTERESTING TAB rather than copied on to it. The finding drawing IS a sheet tile: same markup, same rules, one extra line for the citation. The selectors carry both tab ids because they cannot be unscoped: #t-sim .v at the head of this file is one id and one class, so a bare .shtile .v of two classes would lose to it inside #t-sim and the fifteen tiles would take an 8px mono chip's styling. */ #t-sim .shtile,#t-findings .shtile{display:flex;flex-direction:column;border:1px solid var(--line2); background:var(--panel);text-decoration:none;color:inherit;overflow:hidden} #t-sim .shtile:hover,#t-findings .shtile:hover{border-color:var(--rust)} #t-sim .shtile .v,#t-findings .shtile .v{background:var(--bright);display:block;overflow:hidden; border-bottom:1px solid var(--line2); background-image:linear-gradient(rgba(26,26,24,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(26,26,24,.05) 1px,transparent 1px);background-size:20px 20px} #t-sim .shtile .v img,#t-findings .shtile .v img{width:100%;height:100%;object-fit:contain;display:block} #t-sim .shtile .m,#t-findings .shtile .m{padding:10px 11px;display:flex;flex-direction:column;gap:5px} #t-sim .shtile .n,#t-findings .shtile .n{font-family:var(--m);font-size:9.5px;letter-spacing:2px; text-transform:uppercase;color:var(--rust)} #t-sim .shtile .t,#t-findings .shtile .t{font-size:13px;line-height:1.35} #t-sim .shtile .s,#t-findings .shtile .s{font-size:12px;line-height:1.4;color:var(--grey)} #t-sim .shtile .d,#t-findings .shtile .d{font-family:var(--m);font-size:9px;letter-spacing:.4px; color:var(--grey);word-break:break-all} /* the one the subject is built on, and the one held only as a diagram. The accent is .simcard.built's, not a new colour. */ #t-sim .shtile.subj{border-color:var(--rust)} #t-sim .shtile.part .v{opacity:.75} #t-sim .shnote{font-size:13px;line-height:1.55;color:var(--grey);margin-top:10px;max-width:78ch} /* A STATEMENT, NOT A NOTE. This paragraph states the gap between what the entry claims and what the record holds, and it was set as grey small print under a heading. It reads at body size in the body colour now, with the rust rule the answer block uses, because it is the same kind of sentence: the page saying plainly what it does not have. */ #t-sim .shstate{font-size:15px;line-height:1.6;color:var(--body);margin-top:12px; max-width:var(--measure);border-left:var(--rule) solid var(--rust);padding-left:15px} /* ---- what the research came back with --------------------------------------- ONE SITE, ONE VISUAL SYSTEM. The block takes .card's border and ground and the sheet tile's eyebrow lettering. Nothing here is a new colour: the rule on the left is the rust the site already uses to mark the thing that matters on a card, and it is on a WORD as well, never instead of one, so deleting every colour rule still leaves the page saying what this is. AN ABSENCE IS A STATED ANSWER, so this reads like a finding and not like an empty state: no dashed border, no muted grey wash, no placeholder frame. */ #t-sim .resblk{border:1px solid var(--line2);background:var(--panel); border-left:2px solid var(--rust);padding:15px 17px;margin-top:14px;max-width:88ch} #t-sim .resblk .abshead{font-size:15px;line-height:1.4;font-weight:500} #t-sim .resblk .absbody{font-size:13.5px;line-height:1.6;color:var(--grey);margin-top:8px} #t-sim .resblk .resdoc{display:flex;flex-direction:column;gap:4px;margin-top:13px; padding-top:12px;border-top:1px solid var(--line2);text-decoration:none;color:inherit} #t-sim .resblk .resdoc:hover .t{color:var(--rust)} #t-sim .resblk .resdoc .n{font-family:var(--m);font-size:9px;letter-spacing:2px; text-transform:uppercase;color:var(--grey)} #t-sim .resblk .resdoc .t{font-size:13px;line-height:1.4} #t-sim .resblk .resdoc .d{font-family:var(--m);font-size:9px;letter-spacing:.4px; color:var(--grey);word-break:break-all} /* the forty nine that have no sheet. NOT a frame: a frame the width of the card with nothing in it reads as a drawing that failed to load. One line, the site's own eyebrow lettering, on the card's own ground, with the same hairline under it that the drawing frame had, so the cards still line up. */ #t-sim .simcard .nosheet{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line2); padding:9px 12px;display:block} #t-sim .simcard .in{padding:11px 12px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto;min-width:0} /* the eyebrow row: the SIM number in rust on the left, the classification it already carried on the right, on the one line */ #t-sim .simcard .rk{display:flex;justify-content:space-between;align-items:baseline;gap:10px; font-family:var(--m);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--rust)} #t-sim .simcard .rk .cls{color:var(--grey);text-align:right} #t-sim .simcard .ft{font-weight:700;font-size:14px;letter-spacing:-.016em;line-height:1.25; color:var(--ink)} /* shown whole, as on a Findings card: no clamp, no ellipsis, no fixed height, and it is the element that takes up the slack so the footers line up */ #t-sim .simcard .fb{font-size:11.5px;color:var(--grey);line-height:1.45;flex:1 1 auto} /* The footer. Three things on one row at four across on a wide screen: the solve chip left, the counts right of it, the button on the end. The counts are the item that gives way, taking the line above rather than letting the button shrink or wrap, which is what the two row form below does. */ #t-sim .simcard .ff{display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"cnt cnt" "pill open";align-items:center;gap:7px 8px; border-top:1px solid var(--line);padding-top:8px} /* justify-self start, or the chip stretches to its grid column and the compact outlined pill becomes a wide empty box. It keeps its own intrinsic width. */ #t-sim .simcard .ff .simpill{grid-area:pill;justify-self:start} #t-sim .simcard .ff .cnt{grid-area:cnt;text-align:right;font-family:var(--m);font-size:8px; letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)} #t-sim .simcard .ff .findlink{grid-area:open} /* One row only where the card is actually wide enough to hold all three. The threshold is measured rather than guessed: the widest chip is 89.41, the widest counts line is 126.00 at "28 options and 2 sheets", the button is 119.50, and two 8px gaps, so the footer needs 350.91 and the card's content box needs 374.91. 384 is that with a little headroom for a font that renders a shade wider. Below it the counts take their own line above the chip and the button, which is the item the brief nominates to give way; the button never shrinks and never wraps. The two row form is the default rather than the exception, so a browser without container query support gets the layout that always fits rather than the one that only fits sometimes. */ @container (min-width:384px){ #t-sim .simcard .ff{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pill cnt open"} } /* the same blue button the Findings card carries, to the token. It is written out rather than shared with #t-findings .findlink because that rule is scoped to the Findings tab, and the brief holds those cards unchanged. */ #t-sim .findlink{background:var(--blue);border:0;padding:7px 11px;cursor:pointer; font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; color:var(--paper);text-decoration:none;display:inline-block;line-height:1;white-space:nowrap} #t-sim .findlink:hover{background:var(--blue-over)} #t-sim .findlink:focus-visible{outline:2px solid var(--rust);outline-offset:1px} /* THE LEFT RULE IS GONE. .simcard.built carried border-left, a 3px rust stripe inset from the edge on ::before, and 18px of extra left padding on .in to clear it. Between them they made the one built card a different SHAPE from the five beside it, and its text block start in a different place, which is half of why it read as a different component rather than as the same card further along. The state it marked is said in words twice on the same card now, WORK COMPLETE across the head and EVIDENCED under the title, so the stripe was carrying nothing the reader could not already read. THE CLASS STAYS IN THE MARKUP AND HAS NO RULE. status built is a field on the record and the card still carries it, so a later rule can find it without the renderer being touched. Removed 2026-08-26. */ #t-sim .simpill{font-family:var(--m);font-size:7.5px;letter-spacing:1.3px;text-transform:uppercase; padding:2px 6px;border:1px solid;display:inline-block;white-space:nowrap} #t-sim .simpill.net{color:var(--rust);border-color:var(--rust)} #t-sim .simpill.look{color:var(--slate);border-color:var(--slate)} #t-sim .simpill.imp{color:var(--grey);border-color:var(--grey)} #t-sim .simempty{border:1px dashed var(--line2);padding:20px;font-family:var(--m);font-size:9px; letter-spacing:1.3px;text-transform:uppercase;color:var(--grey);text-align:center} /* =========================================================================== WHAT THE RECORD HOLDS FOR AN ENTRY, on the card. Added 2026-08-24. Scoped under #t-sim so nothing here can reach another tab. No rule above this comment is modified. Every class name below was grepped to zero across public/, src/ and dist/ before it was written. THE STATE NEVER RESTS ON COLOUR ALONE. The word is the signal and the tint is reinforcement: with every colour rule below deleted, a card still reads Evidenced, Not built yet or Nothing recorded, and the detail line still says what is behind it or what is not. That is the point. A reader who cannot separate a teal from a grey loses nothing but emphasis. NO TOKEN IS ADDED. --teal, 4E8A9B, already exists and is already the affirmative on this site: #t-figures .wmsg.good and #t-queue .step .r.yes both take it. It is read ZERO times under #t-sim, so nothing on this tab changes meaning by its arrival. The three tokens that WOULD have collided were checked and rejected: --rust is the built card's stripe and the network solve pill, --slate is the look up pill on this same card, --grey is the count line beside it. CLAIMED AND EMPTY TAKE NO COLOUR AT ALL. Tinting them would be this page grading the catalogue, and an unchecked claim is not a failure: nobody has looked yet. Grey is the absence of a claim to have looked. =========================================================================== */ #t-sim .simcard .simstate{display:block;margin-top:2px} #t-sim .simcard .simstate .w{display:block;font-family:var(--m);font-size:8px; letter-spacing:1.3px;text-transform:uppercase;color:var(--grey)} #t-sim .simcard .simstate.evidenced .w{color:var(--teal)} #t-sim .simcard .simstate .d{display:block;margin-top:2px;font-size:10.5px; line-height:1.4;color:var(--grey)} /* the profile head, with the meta block down the right */ #t-sim .simprofhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.62fr); gap:clamp(20px,3vw,44px);align-items:start;padding:clamp(12px,1.4vw,20px) 0 0} @media(max-width:1100px){#t-sim .simprofhead{grid-template-columns:1fr;gap:22px}} #t-sim .simprofhead h2{margin-top:9px} #t-sim .simprofhead .sub{font-size:clamp(13px,1.2vw,15.5px);font-weight:600;letter-spacing:-.012em; line-height:1.45;margin-top:10px;max-width:52ch} /* ---------- ADD SIMULATION: the control, and the page it opens ---------- 2026-08-27. Every name below was grepped to zero across index.html and all three stylesheets before it was written, which is the check that caught .r, .k, .v and .p being taken when the score card was built. THE CONTROL ITSELF HAS NO RULE HERE AND THAT IS THE POINT. It is an a.simact, the site's own control, in the same ink block with the same monospace label as every other one. It carries no [disabled] attribute, so it is ENABLED by construction rather than by a rule overriding a disabled look: the three on a profile head are disabled and this is not, and the difference between them is one attribute rather than one stylesheet. THE FORM IS THE SITE'S OWN FORM TOO: .field and .btn already exist and are unscoped, so the input, the textarea, the submit and the cancel are the controls the Workroom and the trade card already use. Nothing new was drawn for this page. */ /* The second column of a section head holds two things now. The card keeps width:fit-content and stays hard right; the control sits in the space to its LEFT, which was empty. Neither moves the other: the card's own justify-self is a grid property and does nothing in a flex row, so flex-end here is what holds it where it was, and that was measured rather than assumed. */ #t-sim .headright{display:flex;align-items:flex-start;justify-content:flex-end; gap:clamp(14px,1.6vw,26px);min-width:0} /* Under 900 the head is one column and the two stack, so the control goes back to the reading order it has in the markup: before the card, left aligned. */ @media(max-width:900px){#t-sim .headright{justify-content:flex-start;flex-wrap:wrap}} #t-sim .simaddwrap{max-width:52ch;margin-top:18px} #t-sim .simaddlab{display:block;font-family:var(--m);font-size:var(--t-label); letter-spacing:1.4px;text-transform:uppercase;color:var(--grey);margin:0 0 5px} #t-sim .simaddhint{display:block;font-family:var(--m);font-size:var(--t-small); line-height:1.4;color:var(--grey);opacity:.78;margin:-4px 0 12px} /* WHAT FAILED, IN THE SAME PLACE EVERY TIME. Rust rather than a red nobody else on this site uses, and the words carry the state as well as the colour: a reader who sees no colour at all still reads the sentence. */ #t-sim .simaddmsg{display:block;margin-top:12px;font-size:13.5px;line-height:1.5; color:var(--rust);border-left:2px solid var(--rust);padding-left:10px} #t-sim .simaddmsg:empty{display:none} #t-sim .simacts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} #t-sim a.simact{text-decoration:none;display:inline-block} #t-sim .simact{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase; padding:8px 13px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer} #t-sim .simact.ghost{background:none;color:var(--ink)} /* The right column of the profile head: the three buttons in one row above the meta panel. The column starts where the left one does, so the top of the button row sits level with the eyebrow, and the row is pushed right so it ends on the panel's right edge. */ #t-sim .simprofhead .simright{display:flex;flex-direction:column;align-items:stretch;min-width:0} /* THE THREE CONTROLS, STACKED, EACH OVER ITS OWN REASON. They used to sit in a row with one centred paragraph beneath all three. */ #t-sim .simacts.prof{margin:0;flex-direction:column;align-items:stretch;gap:11px} #t-sim .simacts.prof .simactrow{display:flex;flex-direction:column;gap:3px;min-width:0} /* A DISABLED CONTROL IS NOT AN OUTLINED ONE. The border is gone: an outline is what the site uses to say "press this", and keeping it while adding disabled said both things at once. What is left says it cannot be pressed four ways and NOT ONE OF THEM IS COLOUR: no frame, the cursor, the browser's own refusal, and the line underneath naming what it waits on. */ #t-sim .simacts.prof .simact[disabled]{border:0;background:none;padding:0;text-align:left; color:var(--grey);cursor:not-allowed;opacity:1} #t-sim .simacts.prof .simact[disabled]:hover{background:none;color:var(--grey)} #t-sim .simacts.prof .simactwait{font-family:var(--m);font-size:var(--t-small);line-height:1.4; color:var(--grey);opacity:.78} @media(max-width:1100px){#t-sim .simacts.prof{flex-direction:row;flex-wrap:wrap;gap:18px} #t-sim .simacts.prof .simactrow{flex:1 1 200px}} /* A CONTROL THAT CANNOT BE PRESSED SAYS SO IN MORE THAN ONE WAY: the browser refuses the click, the cursor changes, the border goes dotted and the ink drops to grey. Not one of those is colour alone, and the line underneath names what each is waiting on in words. */ #t-sim .simact[disabled]{color:var(--grey);border-style:dotted;cursor:not-allowed;opacity:1} /* ---------- THE REFERENCE TABLE, IN TWO PARTS ---------- One panel split seven and six was a split by what fits in a column. These are two questions: what the simulation IS, and what the record HOLDS about it. Each half carries its own heading and they are separated by the same hairline the rows already use, so nothing new is introduced to say it. */ #t-sim .simfacts{margin-top:22px;border:1px solid var(--line2);background:var(--panel); display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);align-items:stretch} #t-sim .simfacts .fcol{min-width:0} #t-sim .simfacts .fcol + .fcol{border-left:1px solid var(--line2)} #t-sim .simfacts .h{font-family:var(--m);font-size:var(--t-label);letter-spacing:1.4px; text-transform:uppercase;color:var(--ink);padding:9px 11px 8px; border-bottom:1px solid var(--line2);background:var(--bright)} #t-sim .simfacts .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px; flex-wrap:wrap;padding:6px 11px;border-bottom:1px solid var(--line)} #t-sim .simfacts .fcol .r:last-child{border-bottom:0} #t-sim .simfacts .k{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey)} #t-sim .simfacts .val{font-family:var(--m);font-size:10.5px;color:var(--ink);text-align:right} /* AN HONEST GAP IS NOT A FAULT. These two read in the warn amber on the right edge of the panel and scanned as two red errors beside eleven good rows. They are quieter now: the same grey the keys use, with the dotted underline doing the marking. NOT COLOUR ALONE, and in fact barely colour at all: the words "no state table" and "dependency empty" say it, the underline marks it as a thing with a reason behind it, and the title carries the reason. */ #t-sim .simfacts .simwait{color:var(--grey);border-bottom:1px dotted var(--line2);cursor:help} @media(max-width:820px){#t-sim .simfacts{grid-template-columns:1fr} #t-sim .simfacts .fcol + .fcol{border-left:0;border-top:1px solid var(--line2)}} /* the hero drawing is full width now, under the evidence heading, and no longer inside the header's left column */ #t-sim .simband + .simplan{margin-top:0;margin-bottom:22px} /* Thirteen rows in two columns inside the one panel, filled down the first and then the second: seven left, six right, so the panel is about half the height it was. One vertical hairline between the columns, the weight and the colour the horizontal ones already carry. A row wraps rather than overflowing when its column is narrow: no type size or tracking changes to make it fit. */ #t-sim .simmeta{border:1px solid var(--line2);background:var(--panel); display:grid;grid-template-columns:1fr 1fr;align-items:stretch} #t-sim .simmeta .mcol{min-width:0} #t-sim .simmeta .mcol + .mcol{border-left:1px solid var(--line)} #t-sim .simmeta .r{display:flex;justify-content:space-between;align-items:baseline;gap:12px; flex-wrap:wrap;padding:6px 11px;border-bottom:1px solid var(--line)} #t-sim .simmeta .mcol .r:last-child{border-bottom:0} #t-sim .simmeta .k{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey)} #t-sim .simmeta .nh{color:var(--rust)} #t-sim .simmeta .val{font-family:var(--m);font-size:10.5px;color:var(--ink);text-align:right} @media(max-width:640px){#t-sim .simmeta{grid-template-columns:1fr} #t-sim .simmeta .mcol + .mcol{border-left:0;border-top:1px solid var(--line)}} /* A ROW THE RECORD CANNOT FILL. It used to read "Not held" in rust, which told a reader the page had nothing and not why. It now names what is missing and carries the reason on its title, so the word itself is the request. The tint is the warn amber rather than the rust, because rust on this page means a figure and this is the absence of one. THE TINT GOES ON A WORD, never instead of one: the dotted underline carries the same meaning without it. */ #t-sim .simmeta .simwait{color:var(--warn);border-bottom:1px dotted var(--warn);cursor:help} /* ---------- THE ANSWER ---------- What the simulation found, directly under the header and above everything else on the page. The claim is the largest type below the title because it is the most important sentence here; the scope sits under it at body size; the figures the finding carries are set at --t-figure, a name the scale already defined and nothing read. Rust for the values, the site's figure colour. No new token. */ #t-sim .simanswer{margin-top:26px;border:1px solid var(--line2);border-left:var(--rule-hvy) solid var(--rust); background:var(--panel);padding:18px 20px 16px} #t-sim .simanswer .chipline{margin-bottom:11px} /* ---------- THE ANSWER IS TWO COLUMNS ---------- The text on the left at the width it always had, the drawing on the right in the space that was empty. Measured before the move at 1920: 1304px of inner width against a 620px --measure cap on the claim, so 684px sat unused beside it while the drawing was 1344 wide in a band of its own below the fold. The right column is 0.42fr against 1fr, which lands it near a third of the band. It is deliberately not wider: the whole block has to finish above the fold at 1440x900, and the drawing is illustration beside the claim, not the evidence for it. The two views that answer are the evidence and they are below, large. */ #t-sim .ansgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.42fr); gap:clamp(18px,2.2vw,34px);align-items:start} #t-sim .anstext{min-width:0} #t-sim .ansplan{min-width:0} /* the drawing carries no top margin here: it starts level with the claim */ #t-sim .ansplan .simplan{margin-top:0} @media(max-width:900px){#t-sim .ansgrid{grid-template-columns:1fr} #t-sim .ansplan .simplan{margin-top:18px}} #t-sim .ansclaim{font-size:var(--t-h2);font-weight:800;letter-spacing:-.022em;line-height:1.18; color:var(--ink);max-width:var(--measure)} #t-sim .ansscope{margin-top:10px;color:var(--body);max-width:var(--measure);font-size:14px} #t-sim .ansfigs{display:flex;flex-wrap:wrap;gap:0;margin-top:15px;border-top:1px solid var(--line);padding-top:13px} #t-sim .ansfigs .af{display:flex;flex-direction:column;gap:3px;padding-right:34px;margin-right:34px; border-right:1px solid var(--line)} #t-sim .ansfigs .af:last-child{border-right:0;padding-right:0;margin-right:0} #t-sim .ansfigs .af .v{font-family:var(--m);font-size:var(--t-figure);line-height:1;color:var(--rust)} #t-sim .ansfigs .af .l{font-family:var(--m);font-size:var(--t-label);letter-spacing:1.3px; text-transform:uppercase;color:var(--grey)} /* WHERE A NUMBER CAME FROM, said in one line wherever one is printed. Small, grey, never competing with the figure it describes. */ #t-sim .simsrc{margin-top:12px;font-family:var(--m);font-size:var(--t-small);line-height:1.5; color:var(--grey);max-width:var(--measure)} /* ME 400 inside SIM 07's Drawing block. The sheet is an A1 landscape that maps its own height to 594 mm, so it is given the A1 ratio and left alone: every control inside it, the layer toggles, the zoom, the thirds guides, the notes panel and the note log, is the sheet's own and runs untouched. */ #t-sim .mesheet{border:1px solid var(--line2);background:var(--paper); aspect-ratio:841/594;width:100%;min-height:440px} #t-sim .mesheet iframe{display:block;width:100%;height:100%;border:0} #t-sim .meline{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:9px; font-family:var(--m);font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)} #t-sim .meline b{font-weight:500;color:var(--ink)} #t-sim .meline .rust{color:var(--rust)} #t-sim .meline .sw{display:inline-block;width:8px;height:8px;background:var(--rust); margin-right:5px;vertical-align:-1px} /* The plan view under the strapline. A fixed height preview, not a window on to the sheet: it never scrolls in either direction and it carries nothing but the drawing. The sheet's own drawing area is 821 by 478 of its millimetre units, so that is the block's ratio, and the frame inside is given xMidYMid meet, which is what guarantees the whole drawing is visible with nothing cropped at any edge. The block is capped to the height of the column beside it; past that the drawing scales down further and the leftover falls on the block's own ground, centred. The panel keeps the drawing panel's border, ground and padding. The whole block is a link to the Drawing view, which is the address this site already opens a sheet at, and it takes the hover a clickable panel already has. */ #t-sim .simplan{margin-top:16px} #t-sim a.simplanlink{display:block;text-decoration:none;color:inherit;cursor:pointer} /* clip, not hidden: a clipped box is not a scroll container at all, so the block has no scroll of its own to be given in either direction, not even programmatically. hidden is left first for anything that does not know clip. */ #t-sim .simplan .panel{border:1px solid var(--line2);background:var(--paper)} #t-sim a.simplanlink:hover .panel{background:var(--bright)} /* The title strip, in the panel header treatment the charts already carry: small uppercase mono at 8px on 1.3px, a hairline under it, the sheet number and title on the left and the affordance right aligned on the same line. */ #t-sim .simplan .ttl{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:9px 11px;border-bottom:1px solid var(--line2);font-family:var(--m);font-size:8px; letter-spacing:1.3px;text-transform:uppercase} #t-sim .simplan .ttl .t{color:var(--ink)} #t-sim .simplan .ttl .lk{color:var(--rust);white-space:nowrap} /* The drawing's own box. It was the first box on the site to take 821 by 478 and for a while it was the only one; the ratio it proved is declared at the head of this block now and four other boxes take it too, so this rule states only what is this box's own. simPlanFit writes a transform on the frame inside and NEVER WRITES THIS BOX A HEIGHT: it used to, from whatever it measured, which gave 1.7183 and made the shape an accident of the measurement rather than the drawing's stated proportion. */ #t-sim .simplan .view{position:relative;width:100%; overflow:hidden;overflow:clip} /* The frame is held at the sheet's own size, 841 by 594 of its millimetre units, so the sheet lays itself out exactly as it does when it is opened. The whole frame is then scaled and placed by simPlanFit, which is what keeps the drawing's proportions and fills the box with it rather than cropping an edge. It is hidden until the suppressing stylesheet is in, so the sheet's chrome never flashes. */ #t-sim .simplan .view iframe{position:absolute;top:0;left:0;width:841px;height:594px; border:0;overflow:hidden;background:transparent;pointer-events:none; transform-origin:0 0;visibility:hidden} #t-sim .simplan .simempty{background:var(--paper)} /* the section blocks, four across */ #t-sim .simblocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} @media(max-width:1240px){#t-sim .simblocks{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){#t-sim .simblocks{grid-template-columns:1fr}} #t-sim a.simblk{text-decoration:none} #t-sim .simblk{border:1px solid var(--line2);background:var(--panel);cursor:pointer;text-align:left; font-family:var(--f);color:var(--body);display:flex;flex-direction:column;padding:0} #t-sim .simblk:hover{background:var(--bright)} /* THE .thumb AND .gen RULES ARE DELETED. The four section graphics were generic illustrations derived from nothing, and captioning each of them put four identical admissions across four pictures. The artwork is gone, the admission is made once in a line under the heading, and the cards are text and counts. Nothing else on the site reads either class: grepped before deleting, .thumb 0 hits and .gen 0 hits outside this block. */ #t-sim .simblk .in{padding:10px 11px 10px;display:flex;flex-direction:column;flex:1} #t-sim .simblk .id{font-family:var(--m);font-size:7.5px;letter-spacing:1.3px;text-transform:uppercase; color:var(--rust)} #t-sim .simblk .nm{font-weight:700;font-size:13px;letter-spacing:-.014em;margin-top:5px} #t-sim .simblk .ds{font-size:11px;color:var(--grey);line-height:1.42;margin-top:4px;flex:1} #t-sim .simblk .ft{display:flex;justify-content:space-between;align-items:baseline;gap:8px; flex-wrap:wrap;margin-top:9px;padding-top:7px;border-top:1px solid var(--line); font-family:var(--m);font-size:7.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--grey)} /* two status lines now stand where one did, so the left of the footer wraps onto a second line rather than losing the second status to an ellipsis */ #t-sim .simblk .ft .st{flex:1 1 auto;min-width:0;line-height:1.45} #t-sim .simblk .ft .lk{color:var(--rust)} /* three drawn charts, no library */ #t-sim .simcharts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} @media(max-width:1100px){#t-sim .simcharts{grid-template-columns:1fr}} #t-sim .simchart{border:1px solid var(--line2);background:var(--panel);display:flex;flex-direction:column} #t-sim .simchart .ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:9px 11px;border-bottom:1px solid var(--line2);font-family:var(--m);font-size:8px; letter-spacing:1.3px;text-transform:uppercase} #t-sim .simchart .ch .t{color:var(--ink)} #t-sim .simchart .ch .u{color:var(--grey)} #t-sim .simchart .body{padding:11px 11px 4px} #t-sim .simchart .body svg{display:block;width:100%;height:auto} #t-sim .simchart .cf{padding:8px 11px 10px;border-top:1px solid var(--line);font-size:11px;color:var(--grey)} #t-sim .simchart .gl{stroke:var(--line);fill:none} #t-sim .simchart .ax{stroke:var(--line2);fill:none} #t-sim .simchart .tx{font-family:var(--m);font-size:7px;letter-spacing:1px;fill:var(--grey)} #t-sim .simchart .tv{font-family:var(--m);font-size:9px;font-weight:600;fill:var(--ink)} #t-sim .simchart .bigv{font-family:var(--m);font-size:12px;font-weight:600;fill:var(--ink)} /* ============================================================================ THE CHART VOCABULARY, TAKEN OFF ME 400. THE SAME PAGE WAS SPEAKING TWO LANGUAGES. The drawings above these charts have a drafting language: three stroke weights and no more, monospace annotation in small caps, leaders that land on a dot, filled triangular arrowheads, a stated scale, and four colours. The charts had none of it: thick bars, default axes, no scale statement, no annotation. The weaker language was the one the answer was written in. WHAT WAS READ OFF THE SHEET, and what each becomes here. The sheet is an A1 at 821mm in its own viewBox; a chart is 380 units rendered at about 660px. THE ABSOLUTE SIZES DO NOT TRANSFER AND THE RELATIONSHIPS DO, so what is carried across is the ratio between the weights, not the millimetre. sheet .hair 0.25 -> .c-hair 0.4 grid, extension lines sheet .thin 0.4 -> .c-thin 0.7 axes, dimension lines, leaders sheet .s-pipe 1.6 -> .c-hvy 1.6 the one thing being measured sheet .guide 0.3 dashed 5 2.5 -> .c-guide, same dash, same intent TYPE. The sheet annotates in IBM Plex Mono at four sizes, 2.8 micro, 3.1 header, 3.6 note, 4.4 label, all letter-spaced and mostly uppercase. The chart already had .tx, .tv and .bigv in the same face; .c-mic is the fourth, the micro size the sheet uses for units and conditions. COLOUR. The sheet's root is four tokens, --ink --paper --grey --guide, plus two media colours for hot and cold pipe. A CHART GETS THE THREE NEUTRALS AND ONE ACCENT, and the accent is used ONCE per chart: an accent everywhere is an accent nowhere. No fifth token, no gradient, no shadow, no rounded corner, nothing that is not on the sheet. ============================================================================ */ #t-sim .simchart .c-hair{fill:none;stroke:var(--line2);stroke-width:.4;stroke-linecap:square} #t-sim .simchart .c-thin{fill:none;stroke:var(--ink);stroke-width:.7;stroke-linecap:square} #t-sim .simchart .c-hvy{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:butt} #t-sim .simchart .c-guide{fill:none;stroke:var(--guide);stroke-width:.5;stroke-dasharray:5 2.5} /* a dimension line and its extension lines, the way the sheet draws a length */ #t-sim .simchart .c-dim{fill:none;stroke:var(--rust);stroke-width:.7;stroke-linecap:butt} #t-sim .simchart .c-tick{fill:none;stroke:var(--rust);stroke-width:.7} #t-sim .simchart .carrow{fill:var(--rust);stroke:none} /* a leader lands on a dot at the thing it names, exactly as leader() does */ #t-sim .simchart .c-lead{fill:none;stroke:var(--grey);stroke-width:.5} #t-sim .simchart .c-leaddot{fill:var(--grey);stroke:none} #t-sim .simchart .c-mic{font-family:var(--m);font-size:6px;letter-spacing:.9px;fill:var(--grey)} #t-sim .simcharts.big .simchart .c-mic{font-size:7px} /* the scale statement. A sheet states its scale or says NOT TO SCALE rather than drawing a bar that lies; a chart states its axis the same way. */ #t-sim .simchart .c-scale{font-family:var(--m);font-size:6px;letter-spacing:1.1px; text-transform:uppercase;fill:var(--grey)} #t-sim .simcharts.big .simchart .c-scale{font-size:7px} /* ---------- ANIMATION, ON THE SHEET'S OWN GATE ---------- The sheet runs its five keyframes behind body:has(#t-animate:checked) and kills every one under prefers-reduced-motion and in print. The charts use the same selector, the same two off-switches, and only two of the five keyframes, because only two carry meaning here: draw a dimension being drawn across, which is the measurement happening grow a bar reaching its value, which is the count being counted A BAR THAT BOUNCES IS NOT MEANING. Nothing else on any chart moves, and no placeholder animates at all: a placeholder that animates is a more convincing lie. */ @keyframes c-draw{from{stroke-dashoffset:var(--c-len,300)}to{stroke-dashoffset:0}} @keyframes c-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}} body:has(#t-animate:checked) #t-sim .simchart .anim-draw{ stroke-dasharray:var(--c-len,300);animation:c-draw 1.15s cubic-bezier(.22,.7,.2,1) both} body:has(#t-animate:checked) #t-sim .simchart .anim-grow{ transform-box:fill-box;transform-origin:left center; animation:c-grow .9s cubic-bezier(.22,.7,.2,1) both} body:has(#t-animate:checked) #t-sim .simchart .anim-fade{ animation:c-draw 0s both;opacity:1} @media(prefers-reduced-motion:reduce){#t-sim .simchart *{animation:none!important}} @media print{#t-sim .simchart *{animation:none!important}} /* the gate itself carries no affordance on this page yet: see the log */ #t-animate{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* ---------- THE TWO TIERS ---------- The two that answer, side by side and large. The rest below, smaller, under their own heading. The grid is the only thing that changes between them: same border, same ground, same type, so this reads as one family at two sizes and not as two components. */ #t-sim .simcharts.big{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:30px} #t-sim .simcharts.big .simchart .ch{padding:11px 14px;font-size:9px} #t-sim .simcharts.big .simchart .body{padding:16px 16px 6px} #t-sim .simcharts.big .simchart .cf{padding:10px 14px 13px;font-size:12px} #t-sim .simcharts.big .simchart .tx{font-size:8px} #t-sim .simcharts.big .simchart .tv{font-size:11px} #t-sim .simcharts.big .simchart .bigv{font-size:15px} @media(max-width:820px){#t-sim .simcharts.big{grid-template-columns:1fr}} /* TWO ACROSS, FOR THE REASON THE LARGE PAIR IS TWO ACROSS. At three columns a detail view was 438px wide and its axis labels, its bar values and its caption were all too small to read, which is exactly why Verdicts and The gap were made two. Same rule, same reason, applied here: seven views, two per row. Nothing else about them changes, not the captions, not the marks, not the content, not the type sizes below. */ #t-sim .simcharts.detail{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:820px){#t-sim .simcharts.detail{grid-template-columns:1fr}} #t-sim .detailhead{margin-top:30px;margin-bottom:12px} /* ---------- A BAND, THE LEVEL ABOVE A CHIPLINE ---------- The page ran six identical chiplines top to bottom, so the answer, the evidence and the machinery read as equally important. A band is one rule and one heading above a group of them. Three on the page: the evidence, the documents, the machinery, with the answer above all three carrying its own accent. Nothing below a band changed. */ #t-sim .simband{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; margin:38px 0 16px;padding-top:11px;border-top:var(--rule-hvy) solid var(--ink)} #t-sim .simband .w{font-size:var(--t-h3);font-weight:800;letter-spacing:-.014em; text-transform:uppercase;color:var(--ink)} #t-sim .simband .l{font-size:13px;color:var(--body);flex:1 1 auto} #t-sim .simband .gs{font-family:var(--m);font-size:var(--t-label);letter-spacing:1.3px; text-transform:uppercase;color:var(--grey);white-space:nowrap} /* ---------- THE LADDER ---------- Four bands at one weight made the answer, the evidence behind it and the machinery under that read as equally important. They step down now. The answer is above all three and carries the rust; these are the three under it, loudest first. EVERY VALUE IS A TOKEN THE SHEET ALREADY DEFINED. */ #t-sim .simband.lvl2{margin-top:34px;border-top-width:var(--rule);border-top-color:var(--line2)} #t-sim .simband.lvl2 .w{font-weight:700;color:var(--body)} #t-sim .simband.lvl2 .l{font-size:12.5px;color:var(--grey)} #t-sim .simband.lvl3{margin-top:30px;border-top-width:1px;border-top-color:var(--line)} #t-sim .simband.lvl3 .w{font-size:var(--t-label);font-weight:600;letter-spacing:1.4px; color:var(--grey)} #t-sim .simband.lvl3 .l{font-size:12px;color:var(--grey)} /* the answer keeps the rust and sits closer to the header it answers for */ #t-sim .simanswer + .simband{margin-top:30px} #t-sim .simcharts.detail .simchart .cf{font-size:10.5px;line-height:1.5} /* ---------- WHAT A VIEW IS, ON ITS OWN FACE ---------- THE STATE NEVER RESTS ON COLOUR ALONE: the word is the marker and the tint only reinforces it. A placeholder also takes a hatched ground, so a reader scanning the grid sees which are mockups without reading a single label. */ #t-sim .simchart .ch .mk{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px; text-transform:uppercase;white-space:nowrap;padding:2px 6px;border:1px solid currentColor} #t-sim .simchart.record .ch .mk{color:var(--rust)} #t-sim .simchart.computed .ch .mk{color:var(--ink)} #t-sim .simchart.assumed .ch .mk{color:var(--warn)} #t-sim .simchart.placeholder .ch .mk{color:var(--grey)} #t-sim .simchart.placeholder .body{background:repeating-linear-gradient(135deg, rgba(26,26,24,.035) 0 6px,transparent 6px 12px)} #t-sim .simchart.placeholder .body svg{opacity:.72} /* the two that answer carry the accent the rest do not */ #t-sim .simcharts.big .simchart.record, #t-sim .simcharts.big .simchart.computed{border-top:var(--rule-hvy) solid var(--rust)} /* a block opened, filling the page */ #t-sim .simblkhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px; flex-wrap:wrap;padding-top:6px} #t-sim .simverd{width:100%;border-collapse:collapse;font-size:12px;background:var(--panel); border:1px solid var(--line2)} #t-sim .simverd th{font-family:var(--m);font-size:8px;letter-spacing:1.3px;text-transform:uppercase; color:var(--grey);text-align:left;font-weight:400;padding:7px 9px;border-bottom:1px solid var(--line2)} #t-sim .simverd td{padding:6px 9px;line-height:1.4;border-bottom:1px solid var(--line);vertical-align:top} #t-sim .simverd tr:last-child td{border-bottom:0} #t-sim .simverd td.c{font-family:var(--m);font-size:10px;white-space:nowrap} #t-sim .simverd td.r{text-align:right;font-family:var(--m);font-size:10.5px;white-space:nowrap} @media(max-width:1200px){#t-sim .ind{grid-template-columns:repeat(3,1fr)} #t-sim .ind .cell:nth-child(3n){border-right:0} #t-sim .ind .cell:nth-child(-n+6){border-bottom:1px solid var(--line2)}} @media(max-width:1100px){#t-sim .split{grid-template-columns:1fr;gap:20px}} @media(max-width:760px){#t-sim .ind{grid-template-columns:repeat(2,1fr)} #t-sim .ind .cell:nth-child(2n){border-right:0} #t-sim .ind .cell{border-bottom:1px solid var(--line2)} #t-sim .ind .cell:nth-last-child(-n+2){border-bottom:0}} /* ============================================================================ COMPONENTS The card grid, the class blocks and the part profile, taken from components_workbench_v2.html. Every value below is the reference's own. Every rule is scoped to #t-components. None of these class names existed in this stylesheet before, so nothing here can reach another tab, and the type scale in the first rule stops at the panel edge. The other five tabs keep the 15 px base the site has always had. ============================================================================ */ #t-components{font-size:12.5px;line-height:1.4} #t-components table{width:100%;border-collapse:collapse} #t-components th{font-family:var(--m);font-size:7px;letter-spacing:1px;text-transform:uppercase; color:var(--grey);text-align:left;padding:5px 9px;border-bottom:1px solid var(--line); font-weight:400;white-space:nowrap} #t-components th.num,#t-components td.num{text-align:right} #t-components th.mid,#t-components td.mid{text-align:center} #t-components td{padding:4px 9px;border-bottom:1px solid var(--line);font-size:11px; vertical-align:middle} #t-components tbody tr:last-child td{border-bottom:0} #t-components tbody tr:hover td{background:var(--bright)} #t-components td.nm{font-weight:600;color:var(--ink)} #t-components td.fig{font-family:var(--m);font-size:10px;white-space:nowrap;color:var(--ink)} #t-components td.drv{font-family:var(--m);font-size:8px;letter-spacing:.4px;text-transform:uppercase; color:var(--grey)} #t-components td.miss{font-family:var(--m);font-size:10px;color:var(--rust)} #t-components .tbl{border:1px solid var(--line2);background:var(--panel)} #t-components .tbl-foot{padding:5px 10px;border-top:1px solid var(--line2);font-family:var(--m); font-size:7.5px;letter-spacing:1px;text-transform:uppercase;color:var(--grey);display:flex; justify-content:space-between;gap:10px;flex-wrap:wrap} #t-components .eyebrow{font-family:var(--m);font-size:8.5px;letter-spacing:2px; text-transform:uppercase;color:var(--rust)} #t-components h2{font-size:clamp(20px,2.3vw,31px);letter-spacing:-.032em;line-height:1.02; color:var(--ink);margin-top:6px} #t-components .sub{font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.38; margin-top:9px;max-width:60ch} #t-components .lede{font-size:12px;font-weight:600;line-height:1.42;max-width:46ch; margin:0 0 2px auto;text-align:right;justify-self:end} @media(max-width:1000px){#t-components .lede{text-align:left;margin-left:0;justify-self:start}} #t-components .crumb{font-family:var(--m);font-size:8.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--grey);display:flex;gap:7px;align-items:center; flex-wrap:wrap;margin-bottom:10px} #t-components .crumb button{color:var(--teal);background:none;border:0;cursor:pointer; font-family:var(--m);font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;padding:0} #t-components .chipline{display:flex;align-items:baseline;gap:10px; border-bottom:1px solid var(--line2);padding-bottom:6px;margin:24px 0 11px;flex-wrap:wrap} #t-components .chip{background:var(--ink);color:var(--paper);padding:1px 6px;font-family:var(--m); font-size:7.5px;letter-spacing:1.4px;text-transform:uppercase;flex:0 0 auto} #t-components .chipline .t{flex:1 1 auto;font-weight:700;font-size:12.5px;color:var(--ink); letter-spacing:-.013em} #t-components .chipline .gs{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey)} #t-components .refine{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-bottom:9px; border-bottom:1px solid var(--line2);margin-bottom:12px} #t-components .refine .lab{font-family:var(--m);font-size:7.5px;letter-spacing:1.2px; text-transform:uppercase;color:var(--grey)} #t-components select{font-family:var(--m);font-size:9.5px;background:var(--bright); border:1px solid var(--line2);padding:3px 5px;color:var(--ink)} /* ---------- the card, matching the pod parts grid ---------- */ #t-components .pgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px; align-items:stretch;grid-auto-rows:1fr} @media(max-width:1500px){#t-components .pgrid{grid-template-columns:repeat(4,1fr)}} @media(max-width:1180px){#t-components .pgrid{grid-template-columns:repeat(3,1fr)}} @media(max-width:820px){#t-components .pgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){#t-components .pgrid{grid-template-columns:1fr}} #t-components .pcard{border:1px solid var(--line2);background:var(--bright);padding:9px; cursor:pointer;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px; align-content:start;text-align:left;font-family:var(--f);color:var(--body)} #t-components .pcard:hover{background:var(--panel)} /* The class cards are anchors so the whole card is the click target, the back button works and the address can be sent to somebody. They take the part card's own rule, and only need the underline off. */ #t-components a.pcard{text-decoration:none} /* "No part recorded in this class yet" IS AN HONEST GAP AND MUST NOT BE TINTED LIKE A FAULT. It was the accent, on every class the bank has not reached yet. It takes the grey every stated absence on this site takes; the words are what say it, and they say it perfectly well. */ #t-components .pcard .pc.rust{color:var(--grey)} /* THE WELL WAS A 3px RUST FRAME AROUND EVERY ONE OF FIFTY EIGHT SYMBOLS. That is the accent spent fifty eight times on a page, which is an accent nowhere, and a fourth stroke weight on a page whose drawings are meant to be on three. It takes the same hairline every other box on this tab takes. */ #t-components .pcard .well{border:1px solid var(--line2);background:var(--panel);aspect-ratio:2/3; display:flex;align-items:center;justify-content:center;overflow:hidden} #t-components .pcard .well svg{width:100%;height:100%} #t-components .pcard .pchip{display:inline-block;margin-bottom:5px;background:var(--ink); color:var(--paper);padding:1px 6px;font-family:var(--m);font-size:7px;letter-spacing:1.4px; text-transform:uppercase} #t-components .pcard .pt{display:block;font-weight:700;font-size:12px;letter-spacing:-.014em; line-height:1.18;color:var(--ink)} #t-components .pcard .pd{display:block;font-size:10.5px;color:var(--grey);line-height:1.3; margin-top:3px} #t-components .pcard .pc{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.6px; color:var(--grey);line-height:1.35;margin-top:4px} #t-components .pcard .ps{display:block;margin-top:7px;border-top:1px solid var(--line); padding-top:4px} #t-components .pcard .ps div{display:flex;justify-content:space-between;gap:6px; font-family:var(--m);font-size:7px;letter-spacing:.9px;text-transform:uppercase; color:var(--grey);line-height:1.75} #t-components .pcard .ps b{color:var(--ink);font-weight:400;text-align:right} /* A ZERO IS A COUNT, NOT A FAULT. Every zero in every card's four count rows was the accent: parts, curves, uses and empty fields, on class after class. The row's own key says what the number is. */ #t-components .pcard .ps b.rust{color:var(--body)} #t-components .pcard .ps b.warn{color:var(--warn)} #t-components .gridfoot{font-family:var(--m);font-size:8px;letter-spacing:1.1px; text-transform:uppercase;color:var(--grey);margin-top:11px;line-height:1.7} /* The taxonomy is 58 classes in three groups, so the cards carry a heading per group. The heading uses the chipline's own treatment rather than a new one. */ /* A GROUP HEADING IS A HEADING. It takes the body colour and the hairline it already had; three of them in the accent made the accent a heading style. */ #t-components .clsgrouphead{font-family:var(--m);font-size:7.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--body);border-bottom:1px solid var(--line2); padding-bottom:6px;margin:18px 0 11px} #t-components .clsgrouphead:first-child{margin-top:0} /* The pager. Same mono label and line border as the filters above it. */ #t-components .cmppager{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding-bottom:9px;margin-bottom:7px;border-bottom:1px solid var(--line)} #t-components .cmppager button{font-family:var(--m);font-size:8px;letter-spacing:1.3px; text-transform:uppercase;background:transparent;color:var(--ink); border:1px solid var(--line2);padding:5px 11px;cursor:pointer} #t-components .cmppager button:hover:not([disabled]){color:var(--teal);border-color:var(--teal)} #t-components .cmppager button[disabled]{color:var(--line2);cursor:default} /* ---------- class blocks ---------- */ #t-components .cls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px} @media(max-width:1180px){#t-components .cls{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){#t-components .cls{grid-template-columns:1fr}} #t-components .clsbox{border:1px solid var(--line2);background:var(--panel);padding:10px 11px; cursor:pointer;display:flex;flex-direction:column;gap:5px;text-align:left;font-family:var(--f); color:var(--body)} #t-components .clsbox:hover{background:var(--bright)} #t-components .clsbox .n{font-weight:700;font-size:13px;letter-spacing:-.016em;color:var(--ink)} #t-components .clsbox .d{font-size:10.5px;color:var(--grey);line-height:1.35;flex:1 1 auto} #t-components .clsbox .st{display:flex;gap:10px;border-top:1px solid var(--line);padding-top:6px} #t-components .clsbox .st div{flex:1 1 auto} #t-components .clsbox .st .k{font-family:var(--m);font-size:7px;letter-spacing:1.1px; text-transform:uppercase;color:var(--grey)} #t-components .clsbox .st .v{font-family:var(--m);font-size:12px;color:var(--ink);margin-top:1px} /* ---------- profile ---------- */ #t-components .profhead{display:grid;grid-template-columns:120px minmax(0,1fr) 300px;gap:22px; align-items:start;margin-top:10px} @media(max-width:1100px){#t-components .profhead{grid-template-columns:100px minmax(0,1fr)}} @media(max-width:760px){#t-components .profhead{grid-template-columns:1fr}} #t-components .bigwell{border:1px solid var(--line2);background:var(--panel);aspect-ratio:2/3; display:flex;align-items:center;justify-content:center} #t-components .bigwell svg{width:100%;height:100%} #t-components .meta{border:1px solid var(--line2);background:var(--panel)} #t-components .meta .r{display:flex;justify-content:space-between;gap:8px;padding:3px 10px; border-bottom:1px solid var(--line);align-items:baseline} #t-components .meta .r:last-child{border-bottom:0} #t-components .meta .k{font-family:var(--m);font-size:7.5px;letter-spacing:1.1px; text-transform:uppercase;color:var(--grey)} #t-components .meta .v{font-family:var(--m);font-size:9.5px;color:var(--ink);text-align:right} #t-components .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px} #t-components button.act{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;padding:7px 11px; cursor:pointer} #t-components button.ghost{background:none;color:var(--ink);border:1px solid var(--line2)} #t-components .pill{font-family:var(--m);font-size:7px;letter-spacing:1.1px;text-transform:uppercase; padding:0 4px;border:1px solid;display:inline-block;white-space:nowrap;line-height:1.5} #t-components .pill.pass{color:var(--ink);border-color:var(--line2)} #t-components .pill.warn{color:var(--warn);border-color:var(--warn)} #t-components .pill.fail{color:var(--rust);border-color:var(--rust)} #t-components .pill.na{color:var(--grey);border-color:var(--line)} #t-components .pill.ds{color:var(--moss);border-color:var(--moss)} #t-components .gr{border:1px solid var(--line2);background:var(--panel);display:flex; flex-direction:column} #t-components .gr-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px; padding:6px 10px;border-bottom:1px solid var(--line2)} #t-components .gr-id{font-family:var(--m);font-size:7px;letter-spacing:1.3px; text-transform:uppercase;color:var(--rust)} #t-components .gr-name{font-weight:700;font-size:11.5px;color:var(--ink);letter-spacing:-.012em; margin-top:1px} #t-components .gr-unit{font-family:var(--m);font-size:7px;letter-spacing:1.1px; text-transform:uppercase;color:var(--grey)} #t-components .gr-viz{padding:9px 10px;background:var(--bright);flex:1 1 auto} #t-components .gr-viz svg{width:100%;height:auto;display:block} #t-components .gr-cap{padding:5px 10px;border-top:1px solid var(--line);font-family:var(--m); font-size:7.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--grey);line-height:1.5} #t-components .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} #t-components .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px} @media(max-width:1100px){#t-components .g3{grid-template-columns:1fr}} @media(max-width:820px){#t-components .g2{grid-template-columns:1fr}} #t-components .tx{font-family:var(--m);font-size:5.6px;fill:var(--grey);letter-spacing:.4px} #t-components .tv{font-family:var(--m);font-size:6.4px;fill:var(--ink)} #t-components .ax{stroke:var(--line2);stroke-width:.9} #t-components .gl{stroke:var(--line);stroke-width:.9;stroke-dasharray:2.5 2.5} #t-components .quality{border:1px solid var(--line2);background:var(--panel);padding:10px 11px} #t-components .qrow{display:flex;justify-content:space-between;gap:10px;align-items:center; padding:4px 0;border-bottom:1px solid var(--line)} #t-components .qrow:last-child{border-bottom:0} #t-components .qrow .k{font-family:var(--m);font-size:7.5px;letter-spacing:1px; text-transform:uppercase;color:var(--grey)} #t-components .qbar{height:6px;background:var(--bright);border:1px solid var(--line); position:relative;width:110px;flex:0 0 auto} #t-components .qbar i{position:absolute;left:0;top:0;bottom:0;display:block} /* WHAT HAS TO BE ASKED FOR IS A GAP, AND A GAP IS A REQUEST, NOT A FAULT. It was a dashed accent frame with an accent heading, which is how this site draws a warning. The dashed frame stays, because dashed is the mark for a thing that is not held yet; the colour goes to the line and the body. */ #t-components .ask{border:1px dashed var(--line2);background:var(--panel);padding:9px 11px; margin-top:11px} #t-components .ask .h{font-family:var(--m);font-size:7.5px;letter-spacing:1.4px; text-transform:uppercase;color:var(--body)} #t-components .ask ul{margin:6px 0 0 15px;font-size:11.5px;line-height:1.55} #t-components .view{display:none} #t-components .view.on{display:block} /* ============================================================================ THE SYSTEM PAGE TYPE, added 2026-08-17 Lifted from the approved design, C:\Users\Dell\Desktop\Profile Page.html, and reduced to the blocks the record can actually fill. Nothing above this line was touched: every rule below is new and every selector is scoped under .sysdoc, the wrapper src/system.js renders into #sim-view. A rule that cannot match outside that wrapper cannot move any of the six existing tabs. The template's own chrome is not here. It carried a fixed top bar, a scroll progress line, a contents drawer and a document footer, and the site shell already provides all four. What is left is page content. Token values are the site's, not the template's. --paper and --ink resolve to #EDE7DA and #1A1A18 from the root block, not the template's #E4DFD0 and #14140F, so the page sits a shade warmer than the mockup by decision. Fonts are --f and --m, the stacks this site defines: the template's --body is a font there and a colour here, and reading it as a font would have repainted the site. The accent cycle is --c, set on the section wrapper by .c1 to .c6 and never universally, so it cannot leak into a rule outside .sysdoc. ========================================================================== */ /* RECONCILED 2026-08-24. The body of a page type is now the site's body: 15px at 1.68, the values body{} carries in this file at line 2. It was 13.5px at 1.44, which is what made a System page read as a denser document sitting inside a looser website. Nothing outside .sysdoc is reached: the selector is unchanged and only the two values moved. */ .sysdoc{ color:var(--ink-body); font-size:15px; line-height:1.68; } .sysdoc .c1{ --c:var(--a1) } .sysdoc .c2{ --c:var(--a2) } .sysdoc .c3{ --c:var(--a3) } .sysdoc .c4{ --c:var(--a4) } .sysdoc .c5{ --c:var(--a5) } .sysdoc .c6{ --c:var(--a6) } .sysdoc .sysect{ --c:var(--a1) } /* ---- cover ---------------------------------------------------------------- */ .sysdoc .syscover{ display:grid; grid-template-columns:1.4fr .9fr; gap:var(--gut); align-items:start } @media (max-width:940px){ .sysdoc .syscover{ grid-template-columns:1fr } } /* RECONCILED 2026-08-24. The eyebrow takes the site's own .eyebrow, line 14 of this file: mono at 10.5px, letter-spacing 2.6px, uppercase, --rust. It was 9px at .14em in --ink-muted, so the one element that appears at the top of every page on this site was rendered two different ways depending on which page you were on. The flex layout is the page type's own, because this eyebrow carries a dot and several parts on one line, and it is KEPT. */ .sysdoc .syseyebrow{ font-family:var(--m); font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase; color:var(--rust); margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap } .sysdoc .syseyebrow i{ width:9px; height:9px; border-radius:50%; background:var(--a2); display:inline-block } /* RECONCILED 2026-08-24. The title takes the site's own h1, written at line 22 of this file: clamp(32.4px,4.14vw,55.8px), letter-spacing -.036em, line height .98. It was var(--t-title), clamp(30px,3.9vw,50px) at -.035em and 1, which is a different title on the same website. --t-title is left defined and is now read by nothing; it is not deleted here because it duplicates no site token, and the site has no h1 token to point it at. max-width:13ch is KEPT: the site sets no measure on h1 because h1 appears once, on Home, in a column that constrains it, and a subject title with no measure would run the full 1440. */ .sysdoc h1.systitle{ font-family:var(--f); font-weight:800; letter-spacing:-.036em; font-size:clamp(32.4px,4.14vw,55.8px); line-height:.98; color:var(--ink); margin:0 0 16px; max-width:13ch } .sysdoc .sysstand{ font-size:clamp(14px,1.15vw,16px); line-height:1.4; color:var(--ink); max-width:56ch; margin:0 0 20px; font-weight:500 } .sysdoc .sysfigs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; max-width:620px } @media (max-width:560px){ .sysdoc .sysfigs{ grid-template-columns:1fr 1fr } } .sysdoc .sysfigs .f{ border-top:var(--rule-hvy) solid var(--c); padding-top:12px } .sysdoc .sysfigs .n{ font-family:var(--f); font-weight:700; font-size:clamp(19px,1.9vw,24px); letter-spacing:-.03em; line-height:1; color:var(--ink); display:block; margin-bottom:6px } .sysdoc .sysfigs .l{ font-size:11px; line-height:1.3; color:var(--ink-body) } .sysdoc .sysdots{ margin-top:22px; max-width:620px } .sysdoc .sysdots .lbl{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:11px } .sysdoc .dotmatrix{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px } .sysdoc .dotmatrix span{ width:var(--dot); height:var(--dot); background:var(--flat); display:block } .sysdoc .dotmatrix span.ok{ background:var(--a1) } .sysdoc .dotmatrix span.warn{ background:var(--a2) } .sysdoc .dotmatrix span.fail{ background:var(--a4) } .sysdoc .keyline{ display:flex; gap:14px; flex-wrap:wrap; font-size:var(--t-small); color:var(--ink-muted); margin-bottom:var(--sp-block) } .sysdoc .keyline span{ display:flex; align-items:center; gap:8px } .sysdoc .keyline i{ width:7px; height:7px; display:block; flex:0 0 auto } .sysdoc .syssummary{ background:var(--plate); border:1px solid var(--hair); border-top:var(--rule-hvy) solid var(--a1); padding:15px 17px 14px } .sysdoc .syssummary h4{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 10px; font-weight:500 } .sysdoc .syssummary p{ font-size:11.5px; line-height:1.4; margin:0 0 10px } .sysdoc .syssummary ul{ margin:0 0 10px; padding:0; list-style:none } .sysdoc .syssummary li{ font-size:11.5px; line-height:1.38; margin-bottom:6px; padding-left:12px; position:relative } .sysdoc .syssummary li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; background:var(--c) } .sysdoc .sysmeta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:var(--rule) solid var(--ink); border-bottom:1px solid var(--hair); margin-top:30px } .sysdoc .sysmeta div{ padding:9px 14px 10px 0; border-right:1px solid rgba(185,178,160,.6) } .sysdoc .sysmeta div:last-child{ border-right:none } .sysdoc .sysmeta dt{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px; display:flex; align-items:center; gap:7px } .sysdoc .sysmeta dt::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--c) } .sysdoc .sysmeta dd{ margin:0; font-size:12.5px; font-weight:600; color:var(--ink) } /* ---- sections ------------------------------------------------------------- */ .sysdoc .sysect{ padding-top:var(--sp-section) } .sysdoc .sysect > .head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:20px; padding-bottom:9px; border-bottom:var(--rule) solid var(--ink) } .sysdoc .sysect .head .num{ flex:0 0 auto; width:30px; height:30px; display:grid; place-items:center; background:var(--ink); color:var(--paper); font-family:var(--m); font-weight:600; font-size:13px; box-shadow:3px 3px 0 var(--c) } /* RECONCILED 2026-08-24. A section head takes the site's own h2, line 23 of this file: clamp(24px,2.7vw,34px) at weight 800 and letter-spacing -.028em, inherited from the h1,h2,h3,h4 rule at line 16. It was var(--t-h2), clamp(19px,2.1vw,26px) at weight 700 and -.02em, so a section head on a System page was smaller and lighter than a section head on Components. The 34ch measure and the 4px top margin are the page type's own spacing and are KEPT. */ .sysdoc .sysect h2{ font-family:var(--f); font-weight:800; letter-spacing:-.028em; font-size:clamp(24px,2.7vw,34px); line-height:1.05; color:var(--ink); margin:4px 0 0; max-width:34ch } .sysdoc .sysect h3{ font-family:var(--m); font-weight:600; font-size:var(--t-h3); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0 0 8px; display:flex; align-items:center; gap:7px } .sysdoc .sysect h3::before{ content:""; width:7px; height:7px; background:var(--c); flex:0 0 auto } .sysdoc .syslede{ margin-bottom:var(--sp-block); max-width:var(--measure) } .sysdoc .syscols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut); margin-bottom:var(--sp-block) } @media (max-width:860px){ .sysdoc .syscols{ grid-template-columns:1fr } } /* ---- chips over a figure or table ---------------------------------------- */ .sysdoc .syschip{ display:flex; align-items:baseline; gap:10px; margin:0 0 10px; padding-top:4px } /* RECONCILED 2026-08-24. The tag over a figure or a table is the site's .chip, line 29 of this file: ink ground, paper text, mono 9.5px, letter-spacing 1.6px, padding 3px 9px, weight 500. It was .1em and 3px 8px 4px, which is the same idea drawn slightly differently. The caption beside it takes .chipline .t, line 32: 15px at weight 700 and letter-spacing -.01em, where it was 12px at weight 500. The accent stripe down the left of the tag is the page type's own and is KEPT, for the same reason as the row header stripe. */ .sysdoc .syschip .tag{ background:var(--ink); color:var(--paper); font-family:var(--m); font-weight:500; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; padding:3px 9px; white-space:nowrap; border-left:3px solid var(--c) } .sysdoc .syschip .cap{ font-size:15px; color:var(--ink); font-weight:700; letter-spacing:-.01em; line-height:1.25 } /* ---- tables --------------------------------------------------------------- */ /* --------------------------------------------------------------------------- RECONCILED 2026-08-24. A TABLE IS THE MOST OF WHAT THESE THREE PAGE TYPES ARE, so it is where the two systems differed most and where reconciling them buys the most. Every value below is table.t's, written at lines 43 to 50 of this file, and each change is named: size 11.5px -> 13.5px table.t ground --plate -> --panel table.t, and --plate now IS --panel outer rule 1px --hair on every cell -> 1px --line2 on the table inner rule 1px --hair -> 1px --line, and the last column and last row lose theirs, which is what stops a table drawing a box round itself twice head ink ground, paper text, mono 9px uppercase -> --paper ground, ink text, 13px weight 700, --line2 underneath, vertical-align bottom num cell mono 11px -> mono 12.5px table.t td.n KEPT, and why: tbody th border-left:3px solid var(--c). The accent stripe down the left of a row header is the page type's own and the site has no equivalent. Inventing one for the whole site is not this session's decision. the zebra stripe below. The site has no table zebra because no table on the six tabs runs long enough to need one. The dimensions table on the System page is 59 rows and the readiness table is 37, and losing the stripe there costs a reader more than the inconsistency does. white-space:nowrap on tbody th. Removing it is a layout change, not a reconciliation, and it is what keeps a reference column one line. --------------------------------------------------------------------------- */ .sysdoc .systable{ width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line2); font-size:13.5px; margin-bottom:9px } .sysdoc .systable caption{ caption-side:bottom; text-align:left; padding-top:7px; font-size:var(--t-small); line-height:1.4; color:var(--ink-muted) } .sysdoc .systable th, .sysdoc .systable td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; line-height:1.32 } .sysdoc .systable th:last-child, .sysdoc .systable td:last-child{ border-right:0 } .sysdoc .systable tbody tr:last-child td, .sysdoc .systable tbody tr:last-child th{ border-bottom:0 } /* The head takes the site's ground, colour, underline and baseline from table.t th at line 44: --paper behind ink text, a 1px --line2 rule under it, vertical-align bottom. It was paper text on an ink ground, which is the one thing that made a System page table unmistakable at a glance. THE LETTERING IS THE SITE'S .mono, line 12: 10px at 2.2px, uppercase. It is NOT table.t th's 13px weight 700 sentence case, and the reason is a hard one rather than a preference. text-transform is the only property in this whole reconciliation that changes the text a reader actually reads, and this session is required to leave the visible text of all 36 pages identical. Taking sentence case moved the head of every table on all 36, measured: FROM TO CARRIES became From To Carries and 35 more like it, with zero characters and zero numbers moved. .mono is the site's own idiom for a small uppercase label and is used across the six tabs, so this is the site's lettering rather than a hybrid invented here. */ .sysdoc .systable thead th{ background:var(--paper); color:var(--ink); font-family:var(--m); font-weight:600; font-size:10px; letter-spacing:2.2px; text-transform:uppercase; border-bottom:1px solid var(--line2); vertical-align:bottom } .sysdoc .systable tbody th{ font-weight:600; color:var(--ink); border-left:3px solid var(--c); white-space:nowrap } .sysdoc .systable td.num, .sysdoc .systable th.num{ text-align:right; font-family:var(--m); font-size:12.5px; white-space:nowrap } .sysdoc .systable tbody tr:nth-child(even){ background:rgba(20,20,15,.028) } .sysdoc .systable .void{ background:repeating-linear-gradient(45deg, transparent 0 6px, rgba(20,20,15,.12) 6px 7px); text-align:center; font-style:italic; color:var(--ink-muted) } .sysdoc .sysv{ display:inline-flex; align-items:center; gap:6px; font-family:var(--m); font-size:10px } .sysdoc .sysv::before{ content:""; width:7px; height:7px; flex:0 0 auto; background:var(--a1) } .sysdoc .sysv.fail::before{ background:var(--a4) } .sysdoc .sysv.watch::before{ background:var(--a2) } .sysdoc .sysv.off::before{ background:var(--flat) } /* ---- the drawing well ---------------------------------------------------- */ .sysdoc .sysplate{ background:var(--plate); border:1px solid var(--hair); padding:16px; margin-bottom:9px; overflow-x:auto } .sysdoc .sysplate svg{ display:block; width:100%; height:auto; min-width:640px } /* ---- fact grid ------------------------------------------------------------ */ .sysdoc .sysfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 var(--gut); margin-bottom:var(--sp-block) } .sysdoc .sysfacts .f{ border-top:var(--rule-hvy) solid var(--c); padding:9px 12px 0 0 } .sysdoc .sysfacts .f h4{ font-family:var(--m); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 9px } .sysdoc .sysfacts ul{ margin:0; padding:0; list-style:none } .sysdoc .sysfacts li{ font-size:11.5px; line-height:1.38; margin-bottom:6px; padding-left:12px; position:relative } .sysdoc .sysfacts li::before{ content:""; position:absolute; left:0; top:.5em; width:5px; height:5px; background:var(--c) } /* ---- bar comparison ------------------------------------------------------ */ .sysdoc .sysbars{ margin-bottom:var(--sp-block) } .sysdoc .sysbars .row{ display:grid; grid-template-columns:150px 1fr 92px; align-items:stretch; margin-bottom:3px } @media (max-width:640px){ .sysdoc .sysbars .row{ grid-template-columns:110px 1fr 84px } } .sysdoc .sysbars .name{ background:var(--ink); color:var(--paper); font-family:var(--m); font-weight:500; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; display:flex; align-items:center; padding:0 9px; border-left:3px solid var(--c) } .sysdoc .sysbars .track{ display:flex; height:var(--bar-h); background:var(--flat); background-image:linear-gradient(90deg, rgba(20,20,15,.16) 1px, transparent 1px); background-size:5% 100%; border-right:1px solid var(--hair) } .sysdoc .sysbars .seg{ display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--m); font-size:10px; white-space:nowrap; background:var(--c) } .sysdoc .sysbars .total{ display:flex; align-items:center; justify-content:flex-end; padding-right:9px; font-family:var(--m); font-weight:600; font-size:10.5px; color:var(--ink); border:1px solid var(--hair); border-left:none; background:var(--plate) } /* ---- pullquote, callout, honest empty state ------------------------------ */ .sysdoc .syspull{ border-top:var(--rule-hvy) solid var(--ink); border-bottom:var(--rule-hvy) solid var(--ink); padding:14px 0; margin:var(--sp-block) 0; max-width:620px } .sysdoc .syspull p{ font-family:var(--f); font-weight:600; font-size:clamp(14px,1.35vw,17px); line-height:1.25; letter-spacing:-.015em; color:var(--ink); margin:0 } .sysdoc .syscallout{ border-left:var(--rule-hvy) solid var(--c); background:var(--plate); padding:11px 14px; margin-bottom:var(--sp-block); font-size:11.5px; line-height:1.42 } .sysdoc .sysempty{ background:var(--plate); border:1px solid var(--hair); border-left:var(--rule-hvy) solid var(--a2); padding:13px 15px; margin-bottom:var(--sp-block) } .sysdoc .sysempty .lbl{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px } .sysdoc .sysempty p{ font-size:12px; line-height:1.42; color:var(--ink-body); margin:0 0 8px } .sysdoc .sysempty ul{ margin:0 0 8px; padding-left:16px } .sysdoc .sysempty li{ font-size:11.5px; line-height:1.4; margin-bottom:4px } .sysdoc .sysempty .act{ font-family:var(--m); font-size:var(--t-small); letter-spacing:.08em; color:var(--ink); margin:0 } /* ---- the value cell, beside the marks show.js already draws --------------- */ .sysdoc .sysval{ font-family:var(--m); font-size:11.5px; color:var(--ink); font-weight:600 } .sysdoc .sysprov{ font-family:var(--m); font-size:9.5px; letter-spacing:.06em; color:var(--ink-muted); margin-top:3px } /* ---- closing band -------------------------------------------------------- */ .sysdoc .sysclose{ margin-top:var(--sp-section); background:var(--ink); color:var(--paper); padding:28px 22px 24px } .sysdoc .sysclose h2{ color:var(--paper); font-family:var(--f); font-weight:700; font-size:var(--t-h2); letter-spacing:-.02em; margin:0 0 14px } .sysdoc .sysclose .rule{ display:flex; height:4px; margin-bottom:20px } .sysdoc .sysclose .rule i{ flex:1 } .sysdoc .sysclose ul{ margin:0; padding-left:18px } .sysdoc .sysclose li{ font-size:12.5px; line-height:1.45; margin-bottom:7px; color:rgba(240,236,225,.86) } .sysdoc .sysclose p{ color:rgba(240,236,225,.82); font-size:12.5px; line-height:1.45; margin:0 0 10px } /* ============================================================================ THE QUESTION PAGE TYPE, added 2026-08-17 Lifted from the approved design, C:\Users\Dell\Desktop\Question Page.html. Almost nothing is here, on purpose. The renderer emits class="sysdoc qdoc", so every rule the System port already wrote under .sysdoc applies to this page unchanged: the cover, the section heads, the tables, the chips, the empty states, the meta strip, the closing band. Only what the System page had no equivalent for is below, and every selector is scoped under .qdoc. That is the matrix controls and the four state marks. The template drew its state marks as a circle, a triangle, a ring and a dashed square, which is a shape per state rather than a colour per state, and that is the rule the record already holds: never a colour alone. ========================================================================== */ .sysdoc .qdocbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px } .sysdoc .qdocbar .lbl{ font-family:var(--m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-right:4px } /* The matrix filter buttons take the site's .btn.ghost SHAPE, lines 1460 to 1463: a 1px --ink border on transparent, padding 9px 17px, and on hover the ink ground with paper text. They were a --hair border with a --paper-deep hover, which is a fourth button treatment on a site that already has three. THE LETTERING IS NOT TAKEN. .btn is mono 9.5px at 2px UPPERCASE, and text-transform is the only property in this reconciliation that changes the text a reader reads: taking it turned All into ALL on all 18 question pages, measured, with zero characters and zero numbers moved. The size and tracking are left at the page type's own 11px and .06em to sit with the case that is being kept. The shape reconciles, the words do not move. */ .sysdoc .fbtn{ font-family:var(--m); font-size:11px; letter-spacing:.06em; padding:9px 17px; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer } .sysdoc .fbtn:hover{ background:var(--ink); color:var(--paper) } .sysdoc .fbtn.on{ background:var(--ink); color:var(--paper); border-color:var(--ink) } .sysdoc .qsearch{ font-family:var(--f); font-size:13px; padding:6px 10px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); margin-left:auto; min-width:200px } /* the matrix well, the plate the controls and the table sit on */ .sysdoc .qwell{ background:var(--plate); border:1px solid var(--hair); padding:18px 20px } .sysdoc .qsum{ font-family:var(--m); font-size:12px; color:var(--ink); margin:0 0 14px } .sysdoc .qshown{ font-family:var(--m); font-size:var(--t-small); color:var(--ink-muted); margin:8px 0 0 } /* one shape per state, carried beside the word */ .sysdoc .qst{ font-family:var(--m); font-size:11px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap } .sysdoc .sh{ display:inline-block; width:10px; height:10px; flex:none } .sysdoc .sh.run{ background:var(--a1); border-radius:50% } .sysdoc .sh.blk{ background:var(--a4); clip-path:polygon(50% 0,100% 100%,0 100%) } .sysdoc .sh.mis{ background:transparent; border:1.5px solid var(--a2); border-radius:50% } .sysdoc .sh.na{ background:transparent; border:1.5px dashed var(--hair) } .sysdoc tr.dimrow td, .sysdoc tr.dimrow th{ opacity:.45 } /* the four object lineage strip, generated from the record */ .sysdoc .qchain{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:var(--sp-block) } @media (max-width:860px){ .sysdoc .qchain{ grid-template-columns:1fr 1fr } } /* RECONCILED 2026-08-24. The four object cards take the site's .card, line 1119 of this file: a 1px --line2 border on #F7F3EA. They were a --hair border on --plate, which is the quiet-block treatment rather than the card treatment, so the one thing on a Question page that is a card did not look like a card anywhere else on the site. No hover lift is added: these four are not all clickable and a lift would promise otherwise. */ .sysdoc .qchain .o{ border:1px solid var(--line2); background:#F7F3EA; padding:11px 13px 12px } .sysdoc .qchain .o.here{ border-color:var(--ink); border-top:var(--rule-hvy) solid var(--c) } .sysdoc .qchain .k{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px } .sysdoc .qchain .nm{ font-family:var(--f); font-weight:700; font-size:13.5px; color:var(--ink); line-height:1.2; margin-bottom:6px } .sysdoc .qchain .id{ font-family:var(--m); font-size:9.5px; color:var(--ink-muted); word-break:break-all; line-height:1.35 } /* --------------------------------------------------------------------------- THE BANK BAR COMPARISON, System page section 3. Candidates per class against how many of them carry a typed specification. Both bars sit in one track so the second reads as a fraction of the first rather than as a separate quantity. The only arithmetic is the width, which is geometry: no engineering value is scaled here. Every selector is scoped under .sysdoc, so nothing here can reach the six existing tabs. No existing rule is modified. --------------------------------------------------------------------------- */ .sysdoc .sysbank{ margin:16px 0 6px } .sysdoc .sysbank .bkrow{ display:grid; grid-template-columns:96px 1fr 104px; align-items:center; gap:12px; margin-bottom:7px } .sysdoc .sysbank .bklab{ font-family:var(--m); font-size:var(--t-small); color:var(--ink-body); text-align:right; word-break:break-all } .sysdoc .sysbank .bktrack{ position:relative; height:var(--bar-h); background:var(--plate); border:1px solid var(--hair) } .sysdoc .sysbank .bkbar{ position:absolute; left:0; top:0; bottom:0; background:var(--grid) } .sysdoc .sysbank .bkbar.typed{ background:var(--c, var(--a1)) } .sysdoc .sysbank .bkval{ font-family:var(--m); font-size:var(--t-small); color:var(--ink-muted); white-space:nowrap } .sysdoc .sysbank .bkkey{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-top:10px; display:flex; align-items:center; gap:7px; flex-wrap:wrap } .sysdoc .sysbank .bkkey .k1, .sysdoc .sysbank .bkkey .k2{ display:inline-block; width:16px; height:9px; border:1px solid var(--hair) } .sysdoc .sysbank .bkkey .k1{ background:var(--grid) } .sysdoc .sysbank .bkkey .k2{ background:var(--c, var(--a1)); margin-left:12px } /* =========================================================================== COVERAGE SPLIT, Result page only. Added 2026-08-20. Scoped under .rdoc so nothing here can reach another page type. No rule above this comment is modified. Every class name below was grepped to zero references before it was written. ONE FILL COLOUR FOR EVERY BUCKET, DELIBERATELY. Colouring buckets against each other would tell the reader which ones are the good news, and on these two answers the honest reading is that most of the record is in the bucket nobody wants. The bar states a proportion and says nothing about it. =========================================================================== */ .rdoc .cvbar{ display:block; width:100%; min-width:110px; height:9px; background:var(--paper-deep); border:1px solid var(--hair) } .rdoc .cvbar .cvfill{ display:block; height:100%; background:var(--c, var(--a1)) } /* anything a bucket states beyond its label and count: refs, distinct strings */ .rdoc .cvdetail{ display:block; margin-top:4px; font-family:var(--m); font-size:var(--t-small); line-height:1.42; font-weight:400; color:var(--grey); letter-spacing:0; text-transform:none; overflow-wrap:anywhere } /* the residual, stated in words rather than left to the reader's arithmetic */ .rdoc .cvresid{ margin:10px 0 0; padding:10px 12px; background:var(--plate); border-left:var(--rule) solid var(--hair) } .rdoc .cvresid p{ margin:0; font-size:12px; line-height:1.46; color:var(--ink-body) } /* a named object the run attached to its answer, drawn beside its own numbers */ .rdoc .cvaside{ margin:0 0 14px; padding:12px 14px; background:var(--plate); border:1px solid var(--hair) } .rdoc .cvaside:last-child{ margin-bottom:0 } .rdoc .cvaside .lbl{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:8px } .rdoc .cvaside p{ margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--ink-body); max-width:76ch } /* =========================================================================== DIFFERENCE LIST, Result page only. Added 2026-08-20. Scoped under .rdoc so nothing here can reach another page type. No rule above this comment is modified. Every class name below was grepped to zero references before it was written. THE STATED NO IS NOT STYLED AS GOOD NEWS. dlnone uses the same plate and hairline as every other quiet block on this page and takes no accent colour. An empty difference list is a finding, not a pass mark, and a green panel would be this page deciding that for the reader. =========================================================================== */ .rdoc .dlcmp{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair); border:1px solid var(--hair); margin:0 0 14px } @media (max-width:640px){ .rdoc .dlcmp{ grid-template-columns:1fr } } .rdoc .dlcmp .dlside{ background:var(--plate); padding:11px 13px } .rdoc .dlcmp .dlside .lbl{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:6px } .rdoc .dlcmp .dlside p{ margin:0; font-size:12px; line-height:1.46; color:var(--ink-body); overflow-wrap:anywhere } /* the empty difference list, drawn as a statement rather than an empty state */ .rdoc .dlnone{ margin:12px 0 0; padding:13px 15px; background:var(--plate); border-left:var(--rule-hvy) solid var(--hair) } .rdoc .dlnone .lbl{ font-family:var(--m); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:8px } .rdoc .dlnone p{ margin:0 0 8px; font-size:12px; line-height:1.5; color:var(--ink-body); max-width:76ch } .rdoc .dlnone p:last-child{ margin-bottom:0 } /* =========================================================================== VERDICT, ATTRIBUTION AND BALANCE, Result page only. Added 2026-08-24. Scoped under .rdoc so nothing here can reach another page type. No rule above this comment is modified. Every class name below was grepped to zero references across public/, src/ and dist/ before it was written. ONE COMPONENT CARRIES TWO SHAPES. .bigans is the answer of a verdict and the difference of a balance, because those are the same job: the one thing on the block that must be read before anything else. Two components drawn the same way would be one component with two names. IT TAKES NO COLOUR AND NO STATE. A no is not red and a yes is not green; a balance that is out by 1 877 is not an alarm and one that reconciles is not a tick. The run reported what it found and this page reports what the run reported, which is the same rule .dlnone carries for a stated no. The only colour on these blocks is the section accent every section already has. THE SHARE BAR AND THE TWO SIDE GRID ARE NOT REBUILT. An attribution's share is a proportion of a whole, which is .cvbar, and a balance's two sides are a two side comparison, which is .dlcmp. Both already exist on this page and both are used as they stand. =========================================================================== */ /* the answer of a verdict, the difference of a balance: the largest thing on its block, between two heavy rules, the way .syspull states a pulled line */ .rdoc .bigans{ border-top:var(--rule-hvy) solid var(--ink); border-bottom:var(--rule-hvy) solid var(--ink); padding:16px 0 18px; margin:0 0 var(--sp-block); max-width:var(--measure) } .rdoc .bigans .w{ display:block; font-family:var(--f); font-weight:800; font-size:clamp(38px,5vw,64px); line-height:.92; letter-spacing:-.04em; color:var(--ink) } .rdoc .bigans .sub{ display:block; margin-top:12px; font-size:15px; line-height:1.5; color:var(--ink-body); max-width:76ch } /* the statements a verdict row objected to, under the row's own name. Same treatment as .cvdetail, which carries the same kind of thing on a bucket. */ .rdoc .vdfind{ display:block; margin-top:5px; font-family:var(--m); font-size:var(--t-small); line-height:1.45; font-weight:400; color:var(--grey); letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere } /* what a verdict examined, stated in words under the answer */ .rdoc .atresid{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-body); max-width:76ch } /* the count on each side of a balance, inside the .dlside it belongs to */ .rdoc .dlcmp .dlside p.balside{ margin-top:8px; font-family:var(--m); font-weight:600; font-size:clamp(18px,2vw,24px); line-height:1.1; letter-spacing:-.02em; color:var(--ink) } /* what one part of a difference is, under that part's own name */ .rdoc .balmake{ display:block; margin-top:5px; font-family:var(--m); font-size:var(--t-small); line-height:1.45; font-weight:400; color:var(--grey); letter-spacing:0; text-transform:none; white-space:normal; overflow-wrap:anywhere } /* ============================================================================ THE VOCABULARY, CARRIED ACROSS THE OTHER FIVE TABS 2026-08-25. SIM 07 was the only page that got any of it. A visitor leaving that page walked into a different standard on every other tab: an accent spent 188 times on one of them, honest gaps tinted like faults, drawn figures on seven stroke weights, and not one number anywhere saying where it came from. THE SPEC IS THE CHART VOCABULARY NOTE IN THE LOG, taken off ME400_heat_recovery_flow.html. Everything below is that spec applied. No new token: every value here is one tokens.css already defines. Nothing below reaches #t-sim, which is the reference and is not touched. ============================================================================ */ /* ---------- WHERE A NUMBER CAME FROM, said once wherever numbers are printed. The same metrics as #t-sim .simsrc, deliberately: this is the one line that makes the five tabs read as the same instrument as the profile. Small, grey, mono, and never competing with the figure it describes. */ .srcline{margin-top:12px;font-family:var(--m);font-size:var(--t-small);line-height:1.5; color:var(--grey);max-width:var(--measure)} .srcline b{font-weight:600;color:var(--body)} /* ---------- A SOURCE BADGE ON THE FACE OF A DRAWN THING. SIM 07 puts one word on every view saying whether it is read from the record, computed, assumed or a placeholder. The mark is the same one, in the same type, so a reader who has learned it on the profile reads it here. .placeholder is the only one that carries the accent's outline, and it carries it BECAUSE a placeholder is the one state a reader must not mistake for a measurement. Everything else is grey on grey. */ .srcmark{font-family:var(--m);font-size:var(--t-label);letter-spacing:1.6px; text-transform:uppercase;color:var(--grey);border:1px solid var(--line2); padding:2px 6px 3px;white-space:nowrap;display:inline-block;line-height:1.2} .srcmark.record{color:var(--body);border-color:var(--line2)} .srcmark.computed{color:var(--body);border-color:var(--line2)} .srcmark.assumed{color:var(--grey);border-color:var(--line)} .srcmark.placeholder{color:var(--grey);border-color:var(--line2);border-style:dashed} /* ---------- A SCALE LINE NAMES THE QUANTITY AND STOPS. It does not restate the range: the axis, or the key, already carries the numbers, and a statement that repeats them puts new numeric tokens on a page whose count is fixed. */ .scaleline{font-family:var(--m);font-size:var(--t-label);letter-spacing:1.6px; text-transform:uppercase;color:var(--grey);margin-top:10px} /* On Components the pair stands above a grid whose first group heading carries margin-top:0, so the heading came up against the last line of the source paragraph. The space is put here rather than on the heading, which has the spacing it needs everywhere else in the grid. */ #t-components .scaleline{margin-top:14px} #t-components .srcline{margin-bottom:18px} /* ---------- AN EMPTY FRAME IS A HOLE, NOT A PLACEHOLDER. A ruled box with a caption and nothing in it says a drawing is coming and says nothing about what it will show or what it is waiting on. This is the line that replaces it: what it will be, and what has to exist first. No graph paper, no dashed frame, no reserved rectangle pretending to be art. */ .holeline{border-left:2px solid var(--line2);padding:2px 0 2px 11px; font-family:var(--m);font-size:var(--t-small);line-height:1.5;color:var(--grey)} .holeline .w{display:block;font-size:var(--t-label);letter-spacing:1.6px; text-transform:uppercase;color:var(--body)} /* ---------- THE ANIMATION CONTROL, in the footer strip beside TOUR. The sheets put their toggle in a SHEET CONTROLS cell in the title block: a hidden checkbox, a square that fills with ink when it is on, and an uppercase mono label. This site has no title block; the strip that appears on every tab and already carries the document's own state is the footer line, which is where TOUR went for the same reason. The gate is site wide, so its control is site wide. The colours are the footer's own: --paper on the dark ground, not ink on paper, because that is the ground it sits on. THE MARKUP IS THE SHEET'S OWN, verbatim in shape: a label wrapping a hidden checkbox, a square that fills when it is checked, and the word. The input moves into the label rather than staying stranded in mid document with tabindex -1 and aria-hidden, which is what made it unreachable by keyboard and unannounced. body:has(#t-animate:checked) does not care where the input lives, so every chart's gate is unchanged. */ .animtog{display:inline-flex;align-items:center;gap:7px;margin-left:16px; font-family:var(--m);font-size:10px;letter-spacing:2.2px;text-transform:uppercase; color:#B9B5A7;cursor:pointer;-webkit-user-select:none;user-select:none; vertical-align:baseline;transition:color .15s linear;position:relative} .animtog:hover{color:var(--paper)} .animtog input{position:absolute;opacity:0;pointer-events:none;width:0;height:0} .animtog .box{width:9px;height:9px;flex:none;border:1px solid #B9B5A7; position:relative;display:block} .animtog .box::after{content:"";position:absolute;inset:2px;background:var(--paper); opacity:0;transition:opacity .15s linear} .animtog input:checked ~ .box::after{opacity:1} .animtog:has(input:checked){color:var(--paper)} .animtog:has(input:checked) .box{border-color:var(--paper)} .animtog input:focus-visible ~ .box{outline:2px solid var(--rust);outline-offset:2px} @media print{.animtog{display:none !important}} @media (prefers-reduced-motion:reduce){.animtog,.animtog .box::after{transition:none}} /* ============================================================================ THE SCORE CARD, TOP RIGHT OF EVERY SECTION PAGE AND EVERY SIMULATION PAGE TWO GROUPS SIDE BY SIDE RATHER THAN ONE STACK OF TWELVE ROWS, and the reason is measured rather than aesthetic. On SIM 07 the card sits under the three disabled controls in a right hand column that stands 6.75px shorter than the heading beside it, and the answer block below has 279.89px of clearance at 1440x900. A single stack of twelve rows and two headings comes to about 290 and would have pushed the answer through the fold. Two groups halve it. THE DRAWINGS' VOCABULARY AND NOTHING ELSE: mono, hairlines, three neutrals, and NO ACCENT ANYWHERE ON THIS CARD. Not one number here is a finding, and an accent spent on a count is an accent nowhere. Every value below is a token this site already defines. IT SIZES TO CONTENT AND HAS NO INNER SCROLLBAR: no height, no max-height and no overflow, so it can only ever be as tall as its rows. ============================================================================ */ /* EVERY CLASS NAME HERE IS ITS OWN WORD. The first cut used .r, .k, .v and .p and TWO OF THE FOUR WERE ALREADY TAKEN by rules of higher specificity that no descendant rule under .simscore could have overridden: #t-sim .v is the verdict pill, which drew a bordered box round all twelve values, and the global .p is the dotted rust mark a parameter in prose wears, which put an ACCENT and a pointer cursor on the four pending rows. THE SCREENSHOT SHOWED BOTH AND THE MEASUREMENT SHOWED NEITHER. Each name below was grepped to zero across index.html and all three stylesheets before it was written. */ .simscore{display:grid;grid-template-columns:repeat(2,minmax(0,auto)); gap:0 clamp(18px,2vw,34px);width:fit-content;max-width:100%; align-self:start;justify-self:end; font-family:var(--m);border-top:1px solid var(--line2);padding-top:9px} .simscore .scoreh{font-size:var(--t-label);letter-spacing:1.4px;text-transform:uppercase; color:var(--grey);margin:0 0 7px;white-space:nowrap} .simscore .scorerow{display:flex;justify-content:space-between;align-items:baseline; gap:16px;font-size:var(--t-small);line-height:1.5;padding:1px 0; border-bottom:1px solid var(--line)} .simscore .scoregrp .scorerow:last-child{border-bottom:0} .simscore .scorek{color:var(--grey);white-space:nowrap} .simscore .scorev{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} /* THE HEAD TOP ALIGNS WHERE IT CARRIES A CARD, AND ONLY THERE. .pagehead is align-items:end, which is right for the right aligned lede it was built for and wrong for a card: the card went to the top of the row and the title stayed at the bottom of it, so the heading sat 118px below the card with a void between them. THE MEASUREMENT SAID THE CARD WAS TOP RIGHT AND THE SCREENSHOT SAID THE PAGE HAD COME APART. :has scopes this to the two page kinds that carry a card, so every other .pagehead on the site is untouched. */ .pagehead:has(.simscore){align-items:start} /* PENDING IS NOT ZERO AND IT DOES NOT LOOK LIKE A NUMBER. It takes the label size and the grey every stated absence on this site takes, so a reader scanning the right hand column sees at a glance which rows carry a measurement and which carry a request. The word itself is in the markup, so nothing here is painting a state on with a stylesheet. */ .simscore .scorerow.pend .scorev{color:var(--grey);font-size:var(--t-label);letter-spacing:1.4px} @media(max-width:1100px){ .simscore{justify-self:start;border-top:0;padding-top:0} } /* ============================================================================ THE EVIDENCED ENTRY'S BAND, WHICH REPLACED ITS WASH IT READ AS A DIFFERENT COMPONENT, NOT AS THE SAME CARD FURTHER ALONG. The entry simEvidence calls evidenced took a light blue wash over the whole card, #t-sim .simcard.ev-evidenced{background:color-mix(in srgb,var(--teal) 12%, var(--panel))}, and a rust stripe down its left edge from .simcard.built. A reader scanning a row of six cards met one that was a different colour and a different shape, and read it as a different KIND of thing rather than as the one entry in the row that is finished. Both are gone. THE CARD BODY IS NOW IDENTICAL TO ITS NEIGHBOURS: same ground, same border, same padding. WHAT IT TAKES INSTEAD IS THE BAND EVERY OTHER CARD ALREADY CARRIES. The forty nine with no sheet carry .nosheet, a one line strip across the head of the card reading NO SHEET IS DRAWN YET. This is that strip, in the same place, at the same size, with the same padding and the same hairline under it, reading WORK COMPLETE and filled in --blue, which is the fill of the OPEN SUBJECT button on the same card. NO NEW TOKEN. A STATE NEVER RESTS ON COLOUR ALONE AND THE BAND IS THE COLOUR, so the band carries the words. Delete every colour rule here and the card still says WORK COMPLETE across its head and EVIDENCED under its title. THE BAND FOLLOWS THE FUNCTION, NEVER AN ENTRY. It is written off ev.state === 'evidenced', the same one call to simEvidence the card's class and its state line already come from, so no entry id appears in the renderer or in this stylesheet: the day the function calls two entries evidenced, both take the band with nothing edited, and the day SIM 07 stops being evidenced its band goes. ev-claimed and ev-empty are deliberately given NO RULE. AN HONEST GAP IS NOT A FAULT AND MUST NOT BE MARKED LIKE ONE. ============================================================================ */ #t-sim .simcard .workdone{font-family:var(--m);font-size:8px;letter-spacing:1.4px; text-transform:uppercase;color:var(--paper);background:var(--blue); border-bottom:1px solid var(--line2);padding:9px 12px;display:block}