` and its class sets font-size, weight and tracking but * NOT line-height -- so for that one property nothing in the design system applies * and legacy's `h2` rule wins by default, not by specificity. Measured: a card title * came out at 20.8px line-height where the approved mock is 23.2px. * * The fix is to declare the value, not to reset the tag. My first attempt was a * blanket `font: inherit` on every bare tag inside a card, which has HIGHER * specificity than the component classes (0,1,1 against 0,1,0) and so clobbered * every component's own font-size -- card titles dropped to 12.5px. Stated here * because the blanket version looks like the tidier fix and is the wrong one. */ .sl-h, .sl-h-sm { line-height: 1.45; } /* `.sl-lead` is a
and hits the same leak: its class sets font-size 15px and no * line-height, so legacy's bare `p` rule (1.55) applied instead of the design's 1.45 * -- 23.25px where the mock is 21.75px. */ .sl-lead { line-height: 1.45; } /* --- the page head sits on the same left edge as the cards ----------------------------- * * bundle.css gives `.sl-hello` `padding-left: 8px`. On Today that is invisible: the * greeting is the first thing on the page and there is nothing above it to line up * with. On every other screen the headline is directly above a column of cards, and * measured on team detail it started at 273px while the cards started at 265 -- a * visible 8px step that reads as a mistake because it is one. * * The padding is kept on the row's children where bundle.css wants the breathing room * and removed from the block's left edge, so nothing moves vertically. */ .sl-hello { padding-left: 0; } /* The week grid takes the whole card, and its detail cards sit under it. * * With a 333px rail the day column measured 130px, so a three-way overlap drew each * event at 41px -- "Pricing review" rendered as "Pri ci...". The overlap packing was * correct; it had nowhere to put the result. Full width gives ~223px a day and ~74px * per column in a 3-up, which is legible. Google's week view has no rail either; it * opens a meeting OVER the grid rather than beside it. * * The detail cards lose nothing by moving: they were in a 333px column and are now in * a three-up row that is wider per card below 1180px and no narrower above it. */ .cal-stack { display: flex; flex-direction: column; gap: 15px; min-width: 0; } .cal-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; align-items: start; margin-top: 15px; } @media (max-width: 900px) { .cal-below { grid-template-columns: minmax(0, 1fr); } } /* --- Company pace rows --------------------------------------------------------------- * * These were `display: flex; justify-content: space-between; align-items: baseline`, * which means every row negotiated its own proportions and no two shared a column. * With four rows of different shapes -- one figure alone, three with a sparkline and * a delta pill -- the result was four different layouts stacked: "Merged per / week" * and "Incidents / Customer- / facing" wrapping to two and three lines against * single-line neighbours, the big numbers landing at four different heights, and the * sparklines floating at four different x positions. * * A grid instead, so the four rows are four instances of one row. The label takes * what is left, the figure column is sized to the widest number in the card * (`max-content` across rows is not a thing in CSS grid, so the floor is set to fit * "10 hours" at 24px), and both columns start at the TOP rather than on a baseline -- * a baseline is the wrong anchor when one side is one line and the other is three. */ .normal-list { gap: 0; } .normal-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, auto); align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-4) 0; border-bottom: 0; } .normal-row2 + .normal-row2 { border-top: 1px solid var(--line-divider); } .normal-head { gap: 1px; } .normal-figure { align-items: flex-end; gap: var(--space-2); } /* The number, the shape and the delta sit in one right-aligned stack, so the three * rows that have all three line up with the one row that has only a number. */ .normal-figure .normal-value { line-height: 1.1; } .normal-figure .sparkline, .normal-figure svg { display: block; } .normal-figure .sl-pill { white-space: normal; text-align: right; height: auto; padding-top: 3px; padding-bottom: 3px; } /* --- text inside a card --------------------------------------------------------------- * * The design system styles no list and no paragraph. bundle.css has rules for every * component's own text -- `.sl-att-body`, `.sl-stat-cap`, `.sl-answer-lines` -- and * nothing at all for a plain
- or
that a screen puts inside `.sl-card`. Six
* cards across Track record, the Backtest report and Connections do exactly that, and
* what renders is the BROWSER DEFAULT: disc bullets at a 40px indent, so the text
* starts on a different left edge from every other thing on the card, and the bullets
* hang outside the card's own text column.
*
* Measured on Track record at 1440 before this: `list-style: disc`, `padding-left:
* 40px`, and prose running the full 735px of the card -- about 100 characters a line,
* where 45-75 is the readable range and every other text block on the page is inside
* it.
*
* So: a list reads as rows, not as a bulleted memo, and prose stops at 68ch. The cap
* is a max-width, so it never stretches anything narrow -- a rail card is unaffected.
*/
.sl-card ul, .sl-card ol { margin: 0; padding: 0; list-style: none; display: flex;
flex-direction: column; gap: var(--space-2); }
.sl-card ul > li, .sl-card ol > li { min-width: 0; }
/* A list that is genuinely enumerating gets its marker back, inside the text column
* rather than hanging outside it. Opt in with `sl-bullets`; the default is rows. */
.sl-card ul.sl-bullets { list-style: disc; padding-left: 1.1em; }
.sl-card ul.sl-bullets > li::marker { color: var(--icon-faint); }
/* Prose measure. Only bites above ~68 characters, so nothing narrow moves. */
.sl-card > p, .sl-card > div > p, .sl-note { max-width: 68ch; }
/* `.sl-today-l` has NO RULE ANYWHERE in the design system. bundle.css styles
* `.sl-today-r` and `.sl-today-b` and simply forgets `-l`, and five templates use it
* -- home, calendar, schedule, warning_detail, waiting. It survives as the grid's
* first child, so the column lands in the right place and nobody notices; what it
* does not get is the flex column and the gap, so every card in the main column of
* all five screens sat EDGE TO EDGE, doubled hairline and no air, while the rail
* beside it kept its proper 18px rhythm.
*
* tests/test_sl_components.py already records it as a design-system gap. This is the
* rule it needed.
*
* 16px, NOT the 15px this rule first carried, and the correction is the owner's:
* "why is there not equal spacing between each box". 15px is `.sl-today`'s COLUMN
* gap; its ROW gap is 16, and so is `.sl-today-b`'s. So the main column stacked its
* cards 15px apart while every other vertical join on the same screen measured 16 --
* see the Today rhythm block further down this section for the measured before and
* after of all six. */
.sl-today-l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* `.sl-aside` is `display: inline-flex` with `text-overflow: ellipsis`, which does
* nothing at all for a bare text node in a flex container -- People's aside was hard
* cut at "...one perso" with no ellipsis. The text needs its own shrinkable box. */
.sl-aside-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* WorkTable holds real values, not the mock's short ones.
*
* bundle.css fixes Status at 111px and floors Risk at 90px, which fits "In review" and
* "6x usual". A real Jira status is "Waiting for approval" and a real risk cell is
* "Not measured", and both overran -- Status was clipped mid-word by the Risk column.
*
* Ellipsising them was the wrong fix (and was the first thing tried): a status you
* cannot read is not better than one you have to scroll to.
*
* SIZING THE COLUMNS TO THEIR CONTENT WAS ALSO WRONG, and it is what this rule used
* to do (`max-content` tracks plus `min-width: max-content`). Every `.sl-tr` is its
* OWN grid -- the component builds a row per record, not one grid for the table -- so
* content-sized tracks are computed nine times and come out nine different widths.
* Measured on Today at 1440: the rows were 571, 593, 593, 795, 636, 641, 648, 641 and
* 614px wide, and "In progress" started at a different x on every single line. A
* column of figures that does not line up is the defect the audit's rule 2 exists to
* catch, and it was being caused here.
*
* So the tracks are the SAME on every row, and they are sized to the widest value
* Soil actually prints rather than to the mock's: 146px fits "Waiting for approval",
* 126px fits a "Not measured" pill and its chevron, and the two text columns flex.
* `column-gap` is new -- the design system sets none, which is fine for its short
* sample names and is why a real 39-character Jira summary ran flush into the owner's
* avatar with no space at all between them.
*
* 722px is the sum of the five minimums plus the gaps, so a row is never narrower
* than its own content; the card below is wide enough to hold it at every width above
* 1180px, and `.sl-table { overflow-x: auto }` plus section 2's
* `.sl-today-b .sl-card { overflow: hidden }` keep the phone's scroll inside the card
* so the PAGE still never moves. Verified 0px of document overflow at 1440 and 390 in
* both themes. */
.sl-table { overflow-x: auto; }
.sl-tr { grid-template-columns: minmax(200px, 1.6fr) minmax(120px, 1fr) 82px 146px minmax(126px, 0.9fr);
column-gap: var(--space-3); min-width: 722px; }
/* An attention card's own secondary controls, below its actions: the score disclosure
* and the "Not useful" mute. bundle.js has no slot for them -- the mock's cards carry
* nothing but the one action -- and rendering them in a detached loop after the row,
* which is what the conversion first did, left five control rows under the cards with
* nothing tying each to its card.
*
* A HAIRLINE, because without one these two read as a third and fourth action. The
* card's own order is severity, title, body, recommendation, then the black primary
* and the white secondary -- and "Why am I seeing this?" and "Not useful" were
* landing 12px under that pair in the same tint, so the card looked like it offered
* four things to press when it offers two plus a disclosure and a mute. The rule is
* the design's own `--line-divider`, inset to the card's text column so it does not
* run into the padding.
*
* `margin-top: auto` pins the footer to the bottom of the card, which is what keeps
* five cards of different content lengths showing their footers on one baseline per
* row -- measured identical at 1440 (y=951 across the first row) and correct at 390,
* where each card sizes to its own content. */
.sl-att-foot { margin-top: auto; padding-top: var(--space-3); display: flex;
align-items: center; gap: var(--space-3); flex-wrap: wrap;
border-top: 1px solid var(--line-divider); margin-left: 4px; margin-right: 4px; }
.sl-att-foot > * { min-width: 0; }
/* FIVE attention cards, on a screen the design drew with three.
*
* `repeat(3, minmax(0, 1fr))` is right for three and leaves a hole for four or five:
* the fourth and fifth cards took a third of the row each and the third cell stayed
* empty, so the second row read as a grid that had run out rather than as a decision.
* `attention_list` is as long as the ranking makes it, so three is a shape this page
* will keep being handed more than.
*
* Flex-wrap instead, with a one-third basis and `flex-grow`, so a short last row
* SPREADS to fill its width rather than leaving a gap: five cards are 3 + 2, and the
* two are half-width each. `max-width` caps that growth at a half, so four cards are
* 3 + 1-at-half rather than 3 + 1 running the whole width -- a single full-bleed
* attention card would be the loudest thing on Today and would be loudest for the
* LEAST important item in the list.
*
* Items in one flex line stretch to the tallest, so the cards in each row still share
* a top edge and a height, which is what the grid gave and what rule 2 asks for. At
* 900px section 2 stacks them and the basis below hands that back.
*
* `:has(> .sl-att)` on purpose, and it is not decoration. `.sl-att-row` is the design
* system's ONLY equal-cards grid, so three other screens borrow it for plain
* `.sl-card`s -- dashboard.html's connect-a-tool cards, mcp_connections.html's server
* cards, billing.html's plan cards. A bare `display: flex` here sizes those to their
* own content and stacks them one per line (measured on billing: 351 / 803 / 412px),
* which is somebody else's screen broken by a change made for this one. Scoped like
* this, the row is a flex row only where it actually holds attention cards and stays
* the design's 3-up grid everywhere else. */
.sl-att-row:has(> .sl-att) { display: flex; flex-wrap: wrap; }
.sl-att-row > .sl-att { flex: 1 1 calc((100% - 30px) / 3);
max-width: calc((100% - 15px) / 2); min-width: 0; }
/* ...except when it is ALONE on its line, which the half-width cap turns into a hole.
* Measured at 1440 on a real org with one attention card: the card took 520px of a
* 1057px row and left 535px of nothing beside it. Four cards did the same thing on the
* second line. The cap is right when a card has a neighbour -- a single card stretched
* across a full 1057px row is a very wide, very short box -- but a lone card with
* half the row empty next to it reads as a rendering fault, which is what it was
* reported as. `:only-child` covers one card; `:nth-child(3n+1):last-child` covers a
* lone card left on a wrapped line (the 4th of four, the 7th of seven). */
.sl-att-row > .sl-att:only-child,
.sl-att-row > .sl-att:nth-child(3n + 1):last-child { max-width: 100%; }
@media (max-width: 900px) {
.sl-att-row > .sl-att { flex-basis: 100%; max-width: 100%; }
}
/* The sidebar's second nav region. bundle.js renders ONE flat nav; this app groups,
* and Connections/Settings are neither money nor a feature -- they are the workspace.
* A hairline instead of a fifth 42px eyebrow gap, because the list is already tall. */
.sl-nav-list-end { margin-top: var(--space-4); padding-top: var(--space-3);
border-top: 1px solid var(--line-sidebar); }
.sl-nav-list-end .sl-eyebrow-sm { margin-top: 0; }
/* Work at risk gets the width its five columns actually need, and the bottom row
* collapses again on a phone.
*
* TWO BUGS WERE IN THIS ONE DECLARATION. The first: section 2 collapses `.sl-today-b`
* to a single column inside `@media (max-width: 1180px)`, and an unconditional rule
* further down the same stylesheet beats a media query of equal specificity. So the
* three-across row survived all the way down to 390px, where it measured
* 160px / 67px / 67px -- "What changed" and "Agents" were each 67 pixels wide, one
* word per line, with the card titles clipped to "W..." and "Manag". The media query
* is restated below so the collapse works again.
*
* The second: 1.8fr (or 2.4fr) of a 1183px row is about 630px for the table card, and
* Work at risk needs 722px plus its padding before anything can be read. The mock fits
* in less only because its sample statuses are short ("In review"); Soil prints the
* workflow state the tool recorded, so "Waiting for approval" is the normal case, and
* every Risk cell on this account says "Not measured" because no multiplier is
* computed anywhere yet. That sentence is the honest answer -- but it was arriving on
* screen as "Not measure", "Not meas", "Not n", "Not", clipped at the card edge by a
* sideways scroll nobody can see on a desktop. A column cut mid-word does not read as
* honest, it reads as broken, which is the opposite of what it is there to say.
*
* So the five-column table takes the whole row and the two short cards share the row
* under it. That is a departure from the mock's three-across bottom band, and a
* deliberate one: the mock's own Work at risk is clipped in exactly the same place
* (audit/today/today-mock-1440-light.png, the "6x usual" column), so this is a defect
* the reference inherits rather than an intention it has. Both remaining cards keep a
* real card's width, and the page's own `1fr`-based rhythm is unchanged.
*
* The two text cells still get `overflow: hidden`, so an unusually long owner or status
* is cut at its own column edge rather than over its neighbour.
*/
.sl-today-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Work at risk is unconditionally the first card in this region (home.html), and it
* is the only one of the three with a table in it. */
.sl-today-b > :first-child { grid-column: 1 / -1; }
.sl-today-b .sl-tr > span:nth-child(2),
.sl-today-b .sl-tr > span:nth-child(4) { min-width: 0; overflow: hidden; }
@media (max-width: 1180px) {
.sl-today-b { grid-template-columns: minmax(0, 1fr); }
.sl-today-b > :first-child { grid-column: auto; }
}
/* A textarea and a checkbox, neither of which the design system has. bundle.css styles
* `.sl-field input` only, so both rendered browser-default inside a design-system card. */
.sl-field textarea { width: 100%; box-sizing: border-box; padding: 9px var(--space-3);
border: 1px solid var(--line-control); border-radius: var(--radius-md);
background: var(--bg-surface); color: var(--ink); font: inherit; letter-spacing: inherit;
line-height: 19px; resize: vertical; }
.sl-field textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px;
box-shadow: 0 0 0 3px var(--focus-glow); }
.sl-check { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; cursor: pointer; }
.sl-check input { margin: 2px 0 0; accent-color: var(--soil-violet); flex-shrink: 0; }
.sl-check-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-check-t small { color: var(--text-faint); }
.sl-check.is-off { cursor: default; color: var(--text-faint); }
/* Visually hidden, but read aloud. Only legacy.css had `sr-only`, so a converted
* screen either lost its screen-reader-only labels or kept a legacy class -- two
* survived on Custom agents for exactly that reason. */
.sl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* --- the week grid's block positions -------------------------------------------------
*
* THE LAST INLINE STYLE IN THE APP. calendar.html placed each meeting with
* `style="--slot-top: 37.5%; --slot-height: 5.6%"` -- a genuinely continuous value,
* which is why it outlived the other 152. With it gone, `docs/SECURITY.md` section 3's
* remaining hole, `style-src-attr 'unsafe-inline'`, can finally be closed.
*
* THE TRADE, stated plainly: these steps are 1% of the 9-hour day
* (calendar_view.DAY_START_HOUR..DAY_END_HOUR), so a block can sit up to ~3 minutes off
* its true position. That is invisible at any realistic column height, the grid is an
* overview rather than a measuring instrument, and the exact time is printed inside
* every block as `slot.time_label`. If that ever stops being true, halve the step --
* this block is generated, not typed.
*/
.sl-cal-t-0 { --slot-top: 0%; } .sl-cal-t-1 { --slot-top: 1%; } .sl-cal-t-2 { --slot-top: 2%; } .sl-cal-t-3 { --slot-top: 3%; } .sl-cal-t-4 { --slot-top: 4%; } .sl-cal-t-5 { --slot-top: 5%; } .sl-cal-t-6 { --slot-top: 6%; } .sl-cal-t-7 { --slot-top: 7%; } .sl-cal-t-8 { --slot-top: 8%; } .sl-cal-t-9 { --slot-top: 9%; } .sl-cal-t-10 { --slot-top: 10%; } .sl-cal-t-11 { --slot-top: 11%; } .sl-cal-t-12 { --slot-top: 12%; } .sl-cal-t-13 { --slot-top: 13%; } .sl-cal-t-14 { --slot-top: 14%; } .sl-cal-t-15 { --slot-top: 15%; } .sl-cal-t-16 { --slot-top: 16%; } .sl-cal-t-17 { --slot-top: 17%; } .sl-cal-t-18 { --slot-top: 18%; } .sl-cal-t-19 { --slot-top: 19%; } .sl-cal-t-20 { --slot-top: 20%; } .sl-cal-t-21 { --slot-top: 21%; } .sl-cal-t-22 { --slot-top: 22%; } .sl-cal-t-23 { --slot-top: 23%; } .sl-cal-t-24 { --slot-top: 24%; } .sl-cal-t-25 { --slot-top: 25%; } .sl-cal-t-26 { --slot-top: 26%; } .sl-cal-t-27 { --slot-top: 27%; } .sl-cal-t-28 { --slot-top: 28%; } .sl-cal-t-29 { --slot-top: 29%; } .sl-cal-t-30 { --slot-top: 30%; } .sl-cal-t-31 { --slot-top: 31%; } .sl-cal-t-32 { --slot-top: 32%; } .sl-cal-t-33 { --slot-top: 33%; } .sl-cal-t-34 { --slot-top: 34%; } .sl-cal-t-35 { --slot-top: 35%; } .sl-cal-t-36 { --slot-top: 36%; } .sl-cal-t-37 { --slot-top: 37%; } .sl-cal-t-38 { --slot-top: 38%; } .sl-cal-t-39 { --slot-top: 39%; } .sl-cal-t-40 { --slot-top: 40%; } .sl-cal-t-41 { --slot-top: 41%; } .sl-cal-t-42 { --slot-top: 42%; } .sl-cal-t-43 { --slot-top: 43%; } .sl-cal-t-44 { --slot-top: 44%; } .sl-cal-t-45 { --slot-top: 45%; } .sl-cal-t-46 { --slot-top: 46%; } .sl-cal-t-47 { --slot-top: 47%; } .sl-cal-t-48 { --slot-top: 48%; } .sl-cal-t-49 { --slot-top: 49%; } .sl-cal-t-50 { --slot-top: 50%; } .sl-cal-t-51 { --slot-top: 51%; } .sl-cal-t-52 { --slot-top: 52%; } .sl-cal-t-53 { --slot-top: 53%; } .sl-cal-t-54 { --slot-top: 54%; } .sl-cal-t-55 { --slot-top: 55%; } .sl-cal-t-56 { --slot-top: 56%; } .sl-cal-t-57 { --slot-top: 57%; } .sl-cal-t-58 { --slot-top: 58%; } .sl-cal-t-59 { --slot-top: 59%; } .sl-cal-t-60 { --slot-top: 60%; } .sl-cal-t-61 { --slot-top: 61%; } .sl-cal-t-62 { --slot-top: 62%; } .sl-cal-t-63 { --slot-top: 63%; } .sl-cal-t-64 { --slot-top: 64%; } .sl-cal-t-65 { --slot-top: 65%; } .sl-cal-t-66 { --slot-top: 66%; } .sl-cal-t-67 { --slot-top: 67%; } .sl-cal-t-68 { --slot-top: 68%; } .sl-cal-t-69 { --slot-top: 69%; } .sl-cal-t-70 { --slot-top: 70%; } .sl-cal-t-71 { --slot-top: 71%; } .sl-cal-t-72 { --slot-top: 72%; } .sl-cal-t-73 { --slot-top: 73%; } .sl-cal-t-74 { --slot-top: 74%; } .sl-cal-t-75 { --slot-top: 75%; } .sl-cal-t-76 { --slot-top: 76%; } .sl-cal-t-77 { --slot-top: 77%; } .sl-cal-t-78 { --slot-top: 78%; } .sl-cal-t-79 { --slot-top: 79%; } .sl-cal-t-80 { --slot-top: 80%; } .sl-cal-t-81 { --slot-top: 81%; } .sl-cal-t-82 { --slot-top: 82%; } .sl-cal-t-83 { --slot-top: 83%; } .sl-cal-t-84 { --slot-top: 84%; } .sl-cal-t-85 { --slot-top: 85%; } .sl-cal-t-86 { --slot-top: 86%; } .sl-cal-t-87 { --slot-top: 87%; } .sl-cal-t-88 { --slot-top: 88%; } .sl-cal-t-89 { --slot-top: 89%; } .sl-cal-t-90 { --slot-top: 90%; } .sl-cal-t-91 { --slot-top: 91%; } .sl-cal-t-92 { --slot-top: 92%; } .sl-cal-t-93 { --slot-top: 93%; } .sl-cal-t-94 { --slot-top: 94%; } .sl-cal-t-95 { --slot-top: 95%; } .sl-cal-t-96 { --slot-top: 96%; } .sl-cal-t-97 { --slot-top: 97%; } .sl-cal-t-98 { --slot-top: 98%; } .sl-cal-t-99 { --slot-top: 99%; } .sl-cal-t-100 { --slot-top: 100%; }
.sl-cal-h-1 { --slot-height: 1%; } .sl-cal-h-2 { --slot-height: 2%; } .sl-cal-h-3 { --slot-height: 3%; } .sl-cal-h-4 { --slot-height: 4%; } .sl-cal-h-5 { --slot-height: 5%; } .sl-cal-h-6 { --slot-height: 6%; } .sl-cal-h-7 { --slot-height: 7%; } .sl-cal-h-8 { --slot-height: 8%; } .sl-cal-h-9 { --slot-height: 9%; } .sl-cal-h-10 { --slot-height: 10%; } .sl-cal-h-11 { --slot-height: 11%; } .sl-cal-h-12 { --slot-height: 12%; } .sl-cal-h-13 { --slot-height: 13%; } .sl-cal-h-14 { --slot-height: 14%; } .sl-cal-h-15 { --slot-height: 15%; } .sl-cal-h-16 { --slot-height: 16%; } .sl-cal-h-17 { --slot-height: 17%; } .sl-cal-h-18 { --slot-height: 18%; } .sl-cal-h-19 { --slot-height: 19%; } .sl-cal-h-20 { --slot-height: 20%; } .sl-cal-h-21 { --slot-height: 21%; } .sl-cal-h-22 { --slot-height: 22%; } .sl-cal-h-23 { --slot-height: 23%; } .sl-cal-h-24 { --slot-height: 24%; } .sl-cal-h-25 { --slot-height: 25%; } .sl-cal-h-26 { --slot-height: 26%; } .sl-cal-h-27 { --slot-height: 27%; } .sl-cal-h-28 { --slot-height: 28%; } .sl-cal-h-29 { --slot-height: 29%; } .sl-cal-h-30 { --slot-height: 30%; } .sl-cal-h-31 { --slot-height: 31%; } .sl-cal-h-32 { --slot-height: 32%; } .sl-cal-h-33 { --slot-height: 33%; } .sl-cal-h-34 { --slot-height: 34%; } .sl-cal-h-35 { --slot-height: 35%; } .sl-cal-h-36 { --slot-height: 36%; } .sl-cal-h-37 { --slot-height: 37%; } .sl-cal-h-38 { --slot-height: 38%; } .sl-cal-h-39 { --slot-height: 39%; } .sl-cal-h-40 { --slot-height: 40%; } .sl-cal-h-41 { --slot-height: 41%; } .sl-cal-h-42 { --slot-height: 42%; } .sl-cal-h-43 { --slot-height: 43%; } .sl-cal-h-44 { --slot-height: 44%; } .sl-cal-h-45 { --slot-height: 45%; } .sl-cal-h-46 { --slot-height: 46%; } .sl-cal-h-47 { --slot-height: 47%; } .sl-cal-h-48 { --slot-height: 48%; } .sl-cal-h-49 { --slot-height: 49%; } .sl-cal-h-50 { --slot-height: 50%; } .sl-cal-h-51 { --slot-height: 51%; } .sl-cal-h-52 { --slot-height: 52%; } .sl-cal-h-53 { --slot-height: 53%; } .sl-cal-h-54 { --slot-height: 54%; } .sl-cal-h-55 { --slot-height: 55%; } .sl-cal-h-56 { --slot-height: 56%; } .sl-cal-h-57 { --slot-height: 57%; } .sl-cal-h-58 { --slot-height: 58%; } .sl-cal-h-59 { --slot-height: 59%; } .sl-cal-h-60 { --slot-height: 60%; } .sl-cal-h-61 { --slot-height: 61%; } .sl-cal-h-62 { --slot-height: 62%; } .sl-cal-h-63 { --slot-height: 63%; } .sl-cal-h-64 { --slot-height: 64%; } .sl-cal-h-65 { --slot-height: 65%; } .sl-cal-h-66 { --slot-height: 66%; } .sl-cal-h-67 { --slot-height: 67%; } .sl-cal-h-68 { --slot-height: 68%; } .sl-cal-h-69 { --slot-height: 69%; } .sl-cal-h-70 { --slot-height: 70%; } .sl-cal-h-71 { --slot-height: 71%; } .sl-cal-h-72 { --slot-height: 72%; } .sl-cal-h-73 { --slot-height: 73%; } .sl-cal-h-74 { --slot-height: 74%; } .sl-cal-h-75 { --slot-height: 75%; } .sl-cal-h-76 { --slot-height: 76%; } .sl-cal-h-77 { --slot-height: 77%; } .sl-cal-h-78 { --slot-height: 78%; } .sl-cal-h-79 { --slot-height: 79%; } .sl-cal-h-80 { --slot-height: 80%; } .sl-cal-h-81 { --slot-height: 81%; } .sl-cal-h-82 { --slot-height: 82%; } .sl-cal-h-83 { --slot-height: 83%; } .sl-cal-h-84 { --slot-height: 84%; } .sl-cal-h-85 { --slot-height: 85%; } .sl-cal-h-86 { --slot-height: 86%; } .sl-cal-h-87 { --slot-height: 87%; } .sl-cal-h-88 { --slot-height: 88%; } .sl-cal-h-89 { --slot-height: 89%; } .sl-cal-h-90 { --slot-height: 90%; } .sl-cal-h-91 { --slot-height: 91%; } .sl-cal-h-92 { --slot-height: 92%; } .sl-cal-h-93 { --slot-height: 93%; } .sl-cal-h-94 { --slot-height: 94%; } .sl-cal-h-95 { --slot-height: 95%; } .sl-cal-h-96 { --slot-height: 96%; } .sl-cal-h-97 { --slot-height: 97%; } .sl-cal-h-98 { --slot-height: 98%; } .sl-cal-h-99 { --slot-height: 99%; } .sl-cal-h-100 { --slot-height: 100%; }
/* --- the page shell every screen except Today needs -----------------------------------
*
* The design system ships three layouts and none of them is "an ordinary page":
* `.sl-today` is Today's two-column grid, `.sl-today-r` is Today's 333px rail, and
* `.sl-shell` is for pages outside the app frame. `.sl-card` has no margin, so a
* screen that emits cards gets them flush together and running to the sidebar edge.
* Six separate screen conversions hit this and each worked around it differently;
* several borrowed `.sl-today > .sl-today-r`, which stacks correctly and leaves a dead
* 333px column above 1180px.
*
* Padding and gap are the same values `.sl-today` uses, so a converted screen lines
* up with Today exactly rather than nearly.
*/
.sl-page { padding: 15px 16px 24px 19px; display: grid; gap: 16px 15px; align-content: start; }
.sl-page-full { grid-template-columns: minmax(0, 1fr); }
.sl-page-rail { grid-template-columns: minmax(0, 1fr) 333px; }
.sl-page-r { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (max-width: 1180px) { .sl-page-rail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .sl-page { padding: 8px 16px 24px; } }
/* Tabular figures for any number the components do not already cover. bundle.css binds
* font-variant-numeric to ten named classes, so a total inside a StatCard lines up and
* the same money on the line beneath it does not -- visibly disagreeing on one screen. */
.sl-num { font-variant-numeric: tabular-nums; }
/* The same rule as a CONTAINER, for the column of figures `sl_num` must not touch.
*
* `sl_num` wraps its figure in an element, and three honesty tests grep the rendered
* page for the contiguous strings "0 warnings" and "1 merged" (test_backtest_screens,
* test_agent_handoff): `0 warnings` is not that string, so the
* wrapper would make the guard vacuous while changing nothing a reader sees. The
* backtest's five counts and the coding-agent handoff counts are therefore the one
* place a per-figure wrapper is not available -- and they are a column of five
* numbers, which is exactly the case the README's "Numbers" rule is about.
*
* Pass it as `sl_card_open(extra_class="sl-nums")`: the card is all counts, the
* figures line up, and not one character of the markup inside the sentence moves. */
.sl-nums { font-variant-numeric: tabular-nums; }
/* Repeated rows inside ONE card, separated.
*
* Revenue at risk and Cash leaks both draw a list whose row is a name, a money figure,
* a reason list with its own source chips and one or two forms -- more than any row
* component in the system can hold (`sl_work_table` has five fixed columns,
* `sl_customer_row` one line), and a card inside a card is forbidden. So both render a
* bare `