/* ========================================================================== headings.css — THE ONE HEADING STANDARD FOR THE WHOLE SITE. Written 09/25/2026 (R362) from claude/HEADING-AUDIT-2026-09-25.md. !! WHY THIS FILE EXISTS. The audit measured 63 pages and found 425 section headings in TWELVE families and 40+ size variations: a 70px band on one page and a 52px band on the next doing the same job, a pale teal pill with no colour meaning on seven pages, 128 headings that were just bold text. Scott asked for one standard across the whole site in one round. !! IT IS SERVED LAST, AFTER buttons.css, ON EVERY PAGE INCLUDING THE STANDALONE PRINT VIEWS. Source order is the whole point, exactly as it is for buttons.css: the rules this has to beat are spread across style.css, style-v2.css and surface-c.css at equal or lower weight, and a later file with the same shape wins without an arms race. ⛔ THREE LEVELS. NOTHING ELSE IS A SECTION HEADING. L1 section the coloured band: a titled block on a page L2 sub-section a group of fields inside a section (the floating pill) L3 group label a small label splitting one sub-section (no colour) SCOTT'S DECISIONS, 09/25/2026 — the code was `1A 2B 3A 4A 5A 6A`: 1A L1 band = the Owner Dashboard band as it is: 52px, 19px/800 white words on the kind gradient, --r-md top corners 2B L1 left end = AN ICON IN A CIRCLE, not a dot. ⚠️ He picked the harder option; one icon per KIND is what makes 425 headings finishable, and a section may still pass its own. 3A L2 = the assessment's floating pill on the top edge of its own light-edged card, 14px in from the left 4A L2 words = 12px, uppercase, letter-spacing .12em, weight 800 5A L2 colour = the PARENT section's kind, never a colour of its own 6A L3 = 11.5px uppercase, letter-spacing .1em, 700, --slate-500, no box ========================================================================== */ /* ------------------------------------------------------------ L1 — section Decision 1A: the band it already is, at ONE height. The audit found the same band at 28, 52, 55, 56, 60, 62 and 70px across the site. */ .ds-section-head, .ds-section > .ds-section-head { min-height: 52px; padding: 0 20px; box-sizing: border-box; border-radius: var(--r-md) var(--r-md) 0 0; } h2.ds-section-title { font-size: 19px; line-height: 24px; font-weight: 800; } /* ⛔ THE HOUSE BANDS KEEP THE LARGER NAME. Scott, 09/18/2026: "make the house name a little bigger so it stands out". Only the HEIGHT follows 1A. */ .ds-hband h2.ds-section-title { font-size: 23px; line-height: 28px; } /* 2B — an icon in a circle at the left end, replacing the dot. */ .ds-section-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); color: var(--text-onbrand); } /* Icon sizes (Scott, 09/28/2026): 20px in a heading's circle, 16px in the compact band's 22px one. */ .ds-section-ico .ico, .ds-section-ico svg { width: 20px; height: 20px; color: var(--text-onbrand); } /* The dot is gone. Left in the markup nowhere; hidden here so a page this round has not reached does not draw both. */ /* ------------------------------------------------- L1 — the COMPACT band Decision H-7, Scott 09/28/2026, pick B: the same band -- the same kind gradient, the same icon in its circle, the same corners -- at 40px with 15px/800 words and a 22px circle. It is `c_ds_section(..., compact=True)` and nothing else: the Playbook's, Repairs', Call-Offs', the To-do list's and Licenses' own 34px `kv-band` copies were retired the same day, and the Documents tab's 28px/13px one goes with them -- ONE compact size, not two. ⛔ WHERE IT IS ALLOWED is not a per-page list: design_check rule H-COMPACT holds every Level 1 section on a page to one size, and allows the compact size only where a page shows four or more of them (a list of houses, document types, topics). Scott: "they are useful in some places, but i don't know how to tell you where to keep them" -- so the rule decides. */ .ds-section.ds-compact > .ds-section-head { min-height: 40px; padding: 0 14px; } .ds-compact h2.ds-section-title, .ds-compact.ds-hband h2.ds-section-title { font-size: 15px; line-height: 20px; } .ds-compact .ds-section-ico { width: 22px; height: 22px; } .ds-compact .ds-section-ico .ico, .ds-compact .ds-section-ico svg { width: 16px; height: 16px; } .ds-compact .ds-section-head .ds-count { height: 18px; min-width: 20px; font-size: 11px; } /* ------------------------------------------- the COUNT BUBBLE, centred Scott, 10/03/2026: the number in "Seminole House I [1 open]", "Deferred maintenance [0]", "Completed history [4]" sat low in its pill. MEASURED: inside a band's flex title the pill is a flex item, so it was an 18px box holding a 20px line inherited from the title, with the words hung from a 1px top padding -- 2px low (3px on the compact band); on a full-size band the same inheritance made it 28px tall. ONE rule for every count pill that rides on a heading: a centred flex box whose line is exactly one em tall, so the bubble's height comes from the bubble and never from the heading. (A count in a tab or a chip is not a heading's bubble and is left alone.) */ .ds-section-title .ds-count, summary .ds-count, .kv-count, .ds-sub-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1; white-space: nowrap; vertical-align: middle; } /* ⚠️ THE 1px AT THE BOTTOM OF THE SMALL (11px) BUBBLES IS LATO'S, NOT A TYPO: at that size its figures sit about three-quarters of a pixel below the middle of their em box (MEASURED on the compact band), so the 18px bubbles lift their words half a pixel -- here and in `.ds-sub-count` and the kv-band `.kv-count` below. The 20px/12px bubble measured centred without it. */ .ds-section-title .ds-count, summary .ds-count { height: 20px; min-width: 22px; padding: 0 8px; } .ds-compact .ds-section-head .ds-count { padding: 0 6px 1px; } /* ------------------------------------------- a section that folds shut `c_ds_section(..., open_=...)`: the band is the and a chevron sits at its right end, the same shape the Level 2 fold uses. */ details.ds-section-fold > summary.ds-section-head { cursor: pointer; list-style: none; } details.ds-section-fold > summary.ds-section-head::-webkit-details-marker { display: none; } .ds-section-chev { flex: none; width: 10px; height: 10px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; } details.ds-section-fold[open] > summary .ds-section-chev { transform: rotate(-135deg) translate(-2px, -2px); } /* --------------------------------------------------- L2 — the floating pill Decision 3A. The card is `.ds-sub`; the pill is `.ds-sub-title`, pulled up so it sits ON the card's top edge rather than inside it. This is the assessment's own fieldset/legend geometry, written once. */ .ds-sub { position: relative; display: block; background: var(--surface); border: 1px solid var(--border-1, var(--slate-150)); border-radius: var(--r-md); margin: 22px 0 0; padding: 0 16px 14px; } .ds-sub:first-child { margin-top: 16px; } .ds-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: -16px 0 10px; padding: 0; list-style: none; } .ds-sub-head::-webkit-details-marker { display: none; } .ds-sub-title { display: flex; width: fit-content; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: var(--r-pill); /* ⛔ ON TOP OF THE CARD IT STRADDLES -- the same reason as the bridged pill, said here too so the two ways of drawing an L2 cannot drift apart. */ position: relative; z-index: 1; /* 4A: 12px, uppercase, letter-spaced, 800 -- the assessment's own words. */ font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--text-onbrand); /* 5A: the parent section's KIND, from the same custom properties the band uses -- ⛔ AND THE SAME TWO ENDS, IN THE SAME ORDER. The first draft ran --ds-tone -> --ds-b, which puts the LIGHT end where white type sits: MEASURED 09/25/2026, 3.57:1 on `reference` and 4.09:1 on `people`, both under the 4.5:1 the site holds itself to and both caught by tests/unsaved_guard_and_calendar_test.py. `--ds-lite` exists precisely because of this -- it is the same colour carrying a fifth of --slate-900, and the band has used it since the day white type measured 3.57 there too. A pill outside any .ds-kind-* falls back to the brand teal. */ background: linear-gradient(135deg, var(--ds-b, var(--teal-800)), var(--ds-lite, var(--ds-tone, var(--teal-600))) 100%); box-shadow: 0 2px 6px rgba(20, 40, 50, .22); } .ds-sub-count { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px 1px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; letter-spacing: 0; background: rgba(0, 0, 0, .24); border: 1px solid rgba(255, 255, 255, .28); } .ds-sub-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; } .ds-sub-body { margin: 0; } .ds-sub-body > :first-child { margin-top: 0; } .ds-sub-body > :last-child { margin-bottom: 0; } /* A collapsible sub-section: the chevron INSIDE the capsule, after its words, turning when open. ⛔ ONE COLLAPSIBLE LOOK. The audit found SEVEN sizes of collapsible heading, 18px to 48px, on Call-Offs, Repairs, Meetings, Wage Reduction, the Weekly Report, Groceries and the To-do page. ✅ 10/09/2026, SCOTT (Licenses' "Add a license"): the chevron sat at the card's far right, ON the card's top edge, under nothing -- "a weird place". It is the capsule's own now, in its white, so the label and the thing that opens it read as one; a shut fold's card is only a slim edge under the capsule, not an empty strip. */ .ds-sub-fold > .ds-sub-head { cursor: pointer; } .ds-sub-chev { flex: none; width: 7px; height: 7px; margin: 0 1px 3px 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .12s ease; } .ds-sub-fold[open] > .ds-sub-head .ds-sub-chev { transform: rotate(-135deg); margin-bottom: -3px; } .ds-sub-fold:not([open]) { padding-bottom: 0; } .ds-sub-fold:not([open]) > .ds-sub-head { margin-bottom: 0; } /* ------------------------------------------------------- L3 — group label Decision 6A. No box, no colour, no kind. */ .ds-group-label { margin: 14px 0 6px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); line-height: 1.3; } .ds-group-label:first-child { margin-top: 0; } /* ------------------------------------------------------------ page titles ⛔ FIXED, NOT A DECISION: every page's title is `c_ds_page_header` -- 28px/700 in the page's own ink, no icon (DESIGN-RULES part 1, Scott 09/18/2026). ⛔ THE BRIDGE THAT USED TO LIVE HERE IS GONE (09/28/2026). It restyled `.list-head > h1` and `.page-heading-row > h1` to LOOK like the part while the markup stayed old, and the Cowork audit that day found the title standard on 24 pages of 84. Every page writes the part now; a rule that makes an old class look like a part is the thing rule X-BRIDGE forbids. */ /* ========================================================================== THE BRIDGE — every older heading family now wears one of the three levels. !! THIS IS WHAT MAKES ONE ROUND POSSIBLE, and it is the same argument the button round's bridge rested on: the old classes already carry the LEVEL. `section-heading`, `house-panel-header` and `ad-fold-head` are all somebody drawing an L1; `kv-section-head`, `mt-sectitle`, `mi-section-head` and every `` are somebody drawing an L2; `panel-subheading` and `task-head` are an L3. Mapping the class onto the level converts 425 headings in one pass and leaves only the genuinely mis-levelled ones for the markup. ========================================================================== */ /* ---- L1: the older, taller bands -------------------------------------- */ /* Waitlist & Tours, Interviewees, the Weekly Report, Projections, Census and the Administrator Dashboard drew the same band at 70px, 55px and 56px, some with 400-weight words and square corners. ⛔ THE SELECTOR IS COPIED FROM THE INCUMBENT, NOT SIMPLIFIED. style-v2.css writes this band as main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > :is(...) which is far heavier than a tidy `.panel > h2`. MEASURED 09/25/2026: the tidy version left Waitlist & Tours at 70px while every other page moved to 52px -- half-converted, and the sort of thing that reads as "some pages were missed" rather than as a specificity loss. */ main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > :is(.house-panel-header, h2:first-child) { min-height: 52px; height: auto; padding: 0 20px; box-sizing: border-box; border-radius: var(--r-md) var(--r-md) 0 0; /* ⛔ `width: auto` HAS TO BE SAID HERE, and leaving it out is the whole of Scott's 09/28/2026 report: "on the projections tab, why do these two headings not span the width of the page? ... same thing on the waitlist and tours page." ⚠️ MEASURED 09/28/2026 at 1440px: Occupancy Scenarios drew 217px inside a 1136px card and Annual Figures 165px. Nothing in THIS rule was wrong -- the band won every declaration it makes. It is the L2 pill family below that also matches an `h2` in a `.panel`, and that family says `width: fit-content`. A property this rule never mentions is not a property this rule wins, however much heavier its selector is. So every rule that promotes a heading back to Level 1 must say `width: auto` out loud, exactly as the `kv-band` block already does. */ width: auto; } main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2:first-child { font-size: 19px; line-height: 24px; font-weight: 800; text-transform: none; letter-spacing: -.01em; } /* 2B -- the disc at the left end is the same size on every band. This family already drew one at 38px, which is where the shape comes from; 28px is what fits a 52px band. */ main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2:first-child > .ico, main[data-bands] .house-panel-title > span:first-child:not(.badge) { width: 28px; height: 28px; box-sizing: border-box; } main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2:first-child > .ico { padding: 4px; } /* a 20px glyph in the 28px disc */ main[data-bands] .house-panel-title > span:first-child:not(.badge) .ico { width: 20px; height: 20px; } .ad-fold-head { min-height: 52px; height: auto; padding: 0 20px; box-sizing: border-box; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; border-radius: var(--r-md) var(--r-md) 0 0; font-size: 19px; font-weight: 800; line-height: 24px; letter-spacing: -.01em; } /* ⚠️ The house bands are the ONE exception to the 19px, and they are exempt because Scott asked for the larger name by hand on 09/18/2026. */ main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) .house-panel-title { font-size: 23px; line-height: 28px; } /* ========================================================================== ⛔ WHICH LEVEL A `kv-band` IS DEPENDS ON WHETHER IT HEADS A CARD. MEASURED 09/25/2026, AND SCOTT SAW IT BEFORE THE CHECKS DID: the first cut of this file sent EVERY `kv-section-head kv-band` to the L2 pill, because that is what the audit's "becomes" column said. It is wrong, and the picture he sent of Repairs & Maintenance shows why -- those headings are the FIRST CHILD OF THEIR OWN `.panel`. They head a white card, so they are Level 1, and drawing them as a pill left the pill hanging over the card's top-left corner with the card's own outline running under it. His words: "the level one headings should overlap the section box and outside of the section box ... this does not look right, you can't tell the sections apart from one another." ✅ THE TEST IS STRUCTURAL, NOT A LIST OF PAGES: a band that heads a card is L1; a band inside a card is L2. the retired page band (Repairs), the retired page band (the Playbook), the retired page band (Licenses), the retired page band (Call-Offs), the retired page band (the To-do page), `.mt-sectitle` (Care Specifics, Meetings) and every house band are the first kind. The profile tabs, the Documents tab, the Waitlist Move-In page and the assessment's legends are the second. ========================================================================== */ .kv-section-head.kv-band.ds-hband, body.ds-c .kv-section-head.kv-band.ds-hband { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; width: auto; min-height: 52px; height: auto; padding: 0 20px; box-sizing: border-box; border-radius: 0; box-shadow: none; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 24px; text-transform: none; color: var(--text-onbrand); /* ⛔ FULL WIDTH OF THE CARD'S CONTENT, AND NO NEGATIVE MARGINS. Pulling the band out to the card's own edges needs to know that card's padding, and MEASURED 09/25/2026 there is no one answer: Repairs, the Playbook, Call-Offs and the To-do page pad 24px, Licenses pads 0, and the top padding is 0 on three of them and 20px on two. A fixed -20px made the band 20px WIDER than the Playbook's card, which `tests/ playbook_page_design_test.py` caught as a block that does not hold its own contents. A band that fills the card's content width needs to know nothing, and it is still unmistakably the card's heading. */ /* ⚠️ `width: auto`, NOT `width: 100%`. A band is block-level and already fills its card; `100%` measures the CONTENT box and then any margin the page gives it pushes that full width sideways -- MEASURED on the Community Playbook, where `main[data-bands]` gives every panel child 24px of margin with `!important` and the band hung 24px out of its own card. */ width: auto; margin-bottom: var(--sp-4); border-radius: var(--r-md); } /* ⛔ AND THE WAGE REDUCTION PANELS ARE THE SAME KIND OF HEADING, which the first cut of this file got wrong. SCOTT, 09/28/2026: "The wage reduction page has headings that are all messed up." ⚠️ MEASURED 09/28/2026: `.wr-panel-head` is a `.wr-panel`'s OWN first row -- it already spans the card, already carries `justify-content: space-between`, and already holds that card's controls. Drawing it as the floating capsule shrank the row to its words and left the controls it contains ON TOP of the capsule: Final checks put its All / Paid / Not paid buttons through the middle of its own heading. That is the structural test this file states two blocks up -- a band that heads a card is Level 1 -- applied to the one family the audit's "becomes" column had mis-levelled. ✅ `border-radius` is the TOP CORNERS ONLY here, unlike the kv-bands above: this row is flush with the top of its card, where they sit inside one. */ .wr-panel > .wr-panel-head, body.ds-c .wr-panel > .wr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; width: auto; min-height: 52px; height: auto; padding: 0 20px; box-sizing: border-box; /* ⚠️ `--r-md`, THE BAND'S RADIUS, NOT `--r-lg`, THE CARD'S. Measured 09/28/2026: 10px here against every other L1 band's 8px made a SEVENTH distinct heading look on the site, which `tests/r362_heading_standard_ test.py` counts and refuses to let rise. Every banded card on the site already has a corner 2px softer than its own band. */ border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: none; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 24px; text-transform: none; white-space: normal; color: var(--text-onbrand); background: linear-gradient(120deg, var(--ds-b, var(--teal-800)) 0%, var(--ds-lite, var(--ds-tone, var(--teal-600))) 100%); margin: 0 0 var(--sp-4); } /* The words inside it are the band's words, not the card's teal ones. */ .wr-panel > .wr-panel-head .wr-panel-title, body.ds-c .wr-panel > .wr-panel-head .wr-panel-title { font-size: 19px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--text-onbrand); text-transform: none; } .wr-panel > .wr-panel-head .wr-panel-title .ico, .wr-panel > .wr-panel-head .wr-panel-hint { color: var(--text-onbrand); } .wr-panel > .wr-panel-head .wr-panel-hint { opacity: .82; } /* ...and the chevron on the folding one turns white with the rest of the row. */ .wr-panel > .wr-panel-head .wr-chev { border-color: var(--text-onbrand); } /* ⛔ A CLOSED FOLD HAS NOTHING UNDER ITS BAND, so the 16px gap the band keeps for its card's contents becomes a white strip hanging off the bottom of the heading. MEASURED 09/28/2026 on "The formulas": 16px of empty card below a band with nothing in it. Closed, the band IS the card. */ details.wr-panel:not([open]) > .wr-panel-head { margin-bottom: 0; border-radius: var(--r-md); } /* ⚠️ THE FILTER USED TO BE STYLED FOR THE BAND, AND THAT RULE IS GONE. 09/28/2026 morning: the chips were left inside the Final checks band and given a glass look so they could be read on it. ⛔ That was the wrong answer to the right observation -- a band holds a title, an icon, a count and buttons that act on the section; a filter changes what the section SHOWS and belongs to the content. It is a `.ds-toolbar` row under the band now (applib/wage_reduction.py), so it wears the site's ordinary chip. */ .wr-panel > .wr-filter-bar { margin: 0 var(--card-pad) var(--card-pad); } /* ...and the icon at the left end is the band's 28px disc, not the pill's 14px glyph. */ .kv-section-head.kv-band.ds-hband .kv-section-icon { width: 28px; height: 28px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .34); } .kv-section-head.kv-band.ds-hband .kv-section-icon .ico { width: 20px; height: 20px; } /* A band that IS the of a fold keeps the chevron at its right end. */ details > summary.kv-section-head.kv-band { cursor: pointer; list-style: none; } details > summary.kv-section-head.kv-band::-webkit-details-marker { display: none; } /* ---- L2: every smaller band, pill and panel heading ------------------- */ /* The profile's 82 `kv-band`s, the Playbook's 28, Licenses, Repairs, Call-Offs, the To-do page -- and the Documents tab's 28px compact variant, which was the one place the same heading had two sizes. */ .kv-section-head.kv-band, .mi-section-head, .au-group-head, .seo-section-head, fieldset.assessment-section > legend, fieldset.ir-card > legend, legend.ir-legend { display: flex; width: fit-content; align-items: center; gap: 8px; /* ⛔ `fit-content`, NOT `auto`. MEASURED 09/25/2026: this line said `auto` while the line above said `fit-content`, and the LAST one wins -- so every bridged pill drew the full width of its card and read as a bar, not a pill. The straddle only looks right on a capsule. */ height: 32px; min-height: 32px; padding: 0 14px; width: fit-content; max-width: none; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: visible; color: var(--text-onbrand); /* ⛔ AND IT PAINTS ON TOP OF THE CARD IT SITS ON. The card is the NEXT element in the page, so without this it paints over the pill's lower half and the words are cut through the middle -- which is what a screenshot showed the first time the straddle was right. */ position: relative; z-index: 1; background: linear-gradient(135deg, var(--ds-b, var(--teal-800)), var(--ds-lite, var(--ds-tone, var(--teal-600))) 100%); box-shadow: 0 2px 6px rgba(20, 40, 50, .22); border-bottom: 0; /* ⚠️ ONE GAP UNDER A HEADING, AND IT HAS TO BE SAID HERE. The pill is `inline-flex` where several of these were block-level, and an inline box does not collapse its margin with what follows -- MEASURED on the Care Plan tab: most headings kept 14px and two drifted to 16.4px and 12.1px, which `tests/care_plan_spacing_test.py` exists to catch because "four different gaps lived on this page for weeks, each near enough to the last that nothing said so". */ /* ⛔ ONLY THE MARGIN UNDER. Zeroing the one ABOVE took 16px of air off the Repairs & Maintenance bands -- which is the exact thing Scott reported on 09/22/2026: the headings were "pushed way to the top of the section with no white space above it". A heading's air above belongs to the page; the gap under it belongs to the standard. */ margin-bottom: 14px; } /* ---- the phone forms' legend pill wears its section KIND's color (Scott, 09/28/2026: every color a named token). The same two ends as `.ds-kind-*` in style-v2.css, which these standalone pages do not load; tests/design_consistency_test.py (LG-KIND) holds the two tables together. */ .ir-legend.ir-kind-people { --ds-b: var(--violet-800); --ds-lite: var(--band-lite-people); } .ir-legend.ir-kind-care { --ds-b: var(--band-care-b); --ds-lite: var(--band-lite-care); } .ir-legend.ir-kind-alert { --ds-b: var(--red-700); --ds-lite: var(--band-lite-alert); } .ir-legend.ir-kind-money { --ds-b: var(--band-money-b); --ds-lite: var(--band-lite-money); } .ir-legend.ir-kind-facility { --ds-b: var(--band-facility-b); --ds-lite: var(--band-lite-facility); } .ir-legend.ir-kind-staff { --ds-b: var(--violet-900); --ds-lite: var(--band-lite-staff); } .ir-legend.ir-kind-reference { --ds-b: var(--slate-800); --ds-lite: var(--band-lite-reference); } .ir-legend[class*="ir-kind-"] { background: linear-gradient(135deg, var(--ds-b), var(--ds-lite)); box-shadow: 0 2px 6px rgba(20, 40, 50, .22); } /* ...and whatever follows a heading starts where the gap ends. An inline box does not collapse margins with its next sibling, so a list that carried its own top margin used to hide inside the collapse and now adds to it -- MEASURED on Eligibility Screening: 16.4px against everybody else's 14. */ .kv-section-head.kv-band + *, .mi-section-head + *, .wr-panel-head + *, .au-group-head + *, .seo-section-head + *, fieldset.assessment-section > legend + *, fieldset.ir-card > legend + *, legend.ir-legend + * { margin-top: 0; } /* The count bubble that rides on several of them. */ .kv-section-head.kv-band .kv-count { min-width: 18px; height: 18px; padding: 0 5px 1px; border-radius: var(--r-pill); font-size: 11px; font-weight: 800; letter-spacing: 0; background: rgba(0, 0, 0, .24); border: 1px solid rgba(255, 255, 255, .28); color: var(--text-onbrand); } /* An icon inside an L2 pill is 14px, not the band's 15px. */ .kv-section-head.kv-band .kv-section-icon .ico, .kv-section-head.kv-band .kv-section-icon svg { width: 14px; height: 14px; } /* ---- the page-specific SIZES the standard supersedes ------------------- ⛔ THESE ARE DELIBERATE DELETIONS, NOT COLLATERAL. Each was a page deciding its own size for the same heading, which is the whole finding of the audit: the Documents tab drew the L2 band at 28px/13px "so fourteen of them do not add 180px of air", the Playbook at 15px, Call-Offs at 34px. One standard means one size; if a page is too tall the answer is fewer headings on it, not a smaller heading. */ .documents-panel .kv-section-head.kv-band, body.ds-c .documents-panel .kv-section-head.kv-band { height: 32px; min-height: 32px; padding: 0 14px; font-size: 12px; line-height: 1; border-radius: var(--r-pill); } .documents-panel .kv-section-head.kv-band .kv-section-icon .ico { width: 14px; height: 14px; } /* ⛔ ONE BOX PER SECTION ON THE DOCUMENTS TAB, SET UP LIKE THE CARE PLAN TAB'S. Scott, 10/02/2026, after the 10/01 round took every box away: "Each section ... needs ONE box around it -- no box inside it ... Match how the Care Plan tab sets up its sections." The section is the card (the shared rule further down draws it); what follows the label inside it draws nothing. MEASURED against the Care Plan tab: card 16px in from the tab's edge, label on the card's top edge 14px in, 22px of air above every label, the first included. */ body.ds-c .documents-panel .docs-section:has(> .kv-section-head) { margin: 38px 16px 0 !important; } body.ds-c .documents-panel .docs-section:last-of-type { margin-bottom: 16px !important; } body.ds-c .documents-panel .docs-section > .kv-section-head.kv-band { margin: -17px 0 14px -3px !important; } @media (max-width: 760px) { body.ds-c .documents-panel .docs-section:has(> .kv-section-head) { margin: 30px 12px 0 !important; } body.ds-c .documents-panel .docs-section > .kv-section-head.kv-band { margin: -15px 0 9px 1px !important; } /* On a phone each document used to be its own tile -- a box inside the section's box. It is a plain block now, with a line between one document and the next. */ body.ds-c .documents-panel .docs-section table.docs-table tr { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } body.ds-c .documents-panel .docs-section table.docs-table tr > td { background: transparent !important; } body.ds-c .documents-panel .docs-section table.docs-table tr + tr { border-top: 1px solid var(--border-1, var(--slate-150)) !important; margin-top: 12px !important; padding-top: 12px !important; } } /* (weighs more than Shape B's rule further down, which gives "the element after a pill" its own card) */ body.ds-c .documents-panel.profile-panel .docs-section > .kv-section-head.kv-band + :not(script):not(style) { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .documents-panel .docs-section table.docs-table, body.ds-c .documents-panel .docs-section table.docs-table { border: 0; border-radius: 0; } /* ⚠️ THE PLAYBOOK'S AND CALL-OFFS' OWN SIZES ARE SUPERSEDED BY THE LEVEL 1 BAND, NOT BY THE PILL -- those headings each head a card, so their overrides are answered in the Level 1 block above. Naming them here as well is what held the retired page band at 32px after it had been promoted. */ /* ---- L2: the pale teal pill that carried no meaning ------------------- ⛔ 44 HEADINGS ON SEVEN PAGES, AND THE AUDIT'S POINT ABOUT THEM IS THE COLOUR: `.panel > h2` drew a pale teal capsule with a short gradient rule under it on SEO x3, Financials, the Financial dashboard, RingCentral, the Groceries upload, Staff accounts and the move-in email preview -- the same look whatever the section was ABOUT, which is exactly what decision 5A rejects. They are the L2 pill in the section's own kind now. ⚠️ The `::after` rule is what drew the 40px underline; it has to be turned off by name or a pill grows a tail. */ .panel > h2:not(.section-heading):not(.ds-section-title):not(.house-panel-header), .panel-heading-row h2:not(.section-heading) { display: flex; width: fit-content; align-items: center; gap: 8px; /* ⛔ `fit-content`, NOT `auto`. MEASURED 09/25/2026: this line said `auto` while the line above said `fit-content`, and the LAST one wins -- so every bridged pill drew the full width of its card and read as a bar, not a pill. The straddle only looks right on a capsule. */ height: 32px; min-height: 32px; padding: 0 14px; width: fit-content; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--text-onbrand); background: linear-gradient(135deg, var(--ds-b, var(--teal-800)), var(--ds-lite, var(--ds-tone, var(--teal-600))) 100%); box-shadow: 0 2px 6px rgba(20, 40, 50, .22); margin: 0 0 12px; } .panel > h2:not(.section-heading):not(.ds-section-title)::after, .panel-heading-row h2:not(.section-heading)::after { content: none; display: none; } .panel > h2:not(.section-heading):not(.ds-section-title) .ico, .panel > h2:not(.section-heading):not(.ds-section-title) svg { width: 14px; height: 14px; color: var(--text-onbrand); } /* The teal-text-with-a-rule heading on SEO is the same level; it loses its rule for the same reason. */ h2.seo-section-head::after { content: none; display: none; } /* ---- ⛔ THE BOX THAT GOES AROUND A LEVEL-2 HEADING ---------------------- SCOTT, 09/25/2026: "the level two headings are missing the box that goes around them ... you can't tell the sections apart from one another." He is right, and it is the half of decision 3A this file left out: the pill is only half the shape. The other half is the light-edged white card it sits ON -- the assessment's fieldset, which is the look he picked. ⛔ THE CARD IS THE SECTION'S CONTENT, NOT A WRAPPER NOBODY WROTE. Across 82 sections there are exactly three shapes, and all three are selectable: 1. a
that already IS the card (the assessment, the care plan form, the incident form) -- draw it; 2. a band followed by ONE block (a table, a form, a list) -- box the block and let the pill ride up onto it; 3. a `table.kv` whose first row IS the band (the profile tabs) -- box the table. ⚠️ AND NOT THE COLUMN OF A PAIR. A pair's column sometimes holds two or three sections -- Code Status, Vitals and Respiratory share one -- so boxing the column drew ONE card round all three with only the first pill on its edge. MEASURED on the Care Plan tab: VITALS sat inside the CODE STATUS card. */ .ds-sub, fieldset.assessment-section, fieldset.ir-card, .docs-section:has(> .kv-section-head), .profile-panel > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > form > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .panel > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script), table.kv:has(> tbody > tr.kv-section-row), .cp-pair-col > table.kv:has(> tbody > tr.kv-section-row) { border: 1px solid var(--border-1, var(--slate-150)); border-radius: var(--r-md); background: var(--surface); box-sizing: border-box; } .ds-sub, fieldset.assessment-section, fieldset.ir-card, .docs-section:has(> .kv-section-head) { padding: 0 16px 14px; margin: 22px 0 0; } /* ⛔ ONE GAP UNDER A HEADING, WHATEVER SHAPE ITS CARD IS. The three shapes put the pill in different places -- inside the card (1 and 3) or just above it (2) -- so the air under the words is said once per shape, in that shape's own rule. `tests/care_plan_spacing_test.py` exists because four different gaps once lived on one page. */ .profile-panel > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > form > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .panel > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script), .profile-panel > .kv-section-head.kv-band + .rp-actions, body.ds-c .profile-panel > .kv-section-head.kv-band + .rp-actions { padding: 30px 16px 14px !important; margin: -16px 0 0 !important; } /* ⚠️ 10px, NOT 16px, AND MEASURED. A profile section's table carries fixed label columns, and inside a pair it only has half the card to live in: 16px of card padding on each side pushed the date box and its calendar button 13px out of Demographics -- caught by tests/sections_side_by_side_test.py. The pill keeps its 16px inset through its own margin, so the look is unchanged. */ /* ⛔ THE MARGIN COUNTS THE PILL. This card's pill rises 16px above its top edge (the straddle below), so a plain 22px left 6px between the pill and the section above -- 0px on a phone. Scott, 10/02/2026, a phone photo of the Profile tab: "the residency bubble heading and the general notes heading are touching the section directly above it, not spaced properly like the pricing section is ... Like care plan and hospice on the care plan tab." The pill now stands the same 22px (a phone: 14.4px) clear of the section above as a pill drawn outside its card does. */ table.kv:has(> tbody > tr.kv-section-row) { padding: 0 10px 12px; margin: 38px 0 0; } /* ⚠️ 3px, MEASURED, NOT 6px. The table card's own 1px outline and the grid cell's 2px of padding already sit between the card's edge and the pill; 6px put this shape's pill 3px further in than the other two and `tests/profile_quick_actions_band_test.py` reads the left edges of every full-width section on the profile and demands one number. */ /* ⛔ 1px, AND THE NUMBER IS MEASURED AGAINST THE CAPSULES BESIDE IT, NOT AGAINST THIS TABLE. ⚠️ SCOTT, 09/28/2026: "some of them are shifted to the right and some are aligned to the left of the box, they should be shifted to the right." ⚠️ AND THE FIRST FIX FOR IT WAS WRONG IN A WAY THAT MEASURED RIGHT. Setting this to 14px -- the same number every other shape uses -- read as "14px from its own box" on every tool that asked, and left these three 13px to the RIGHT of the eighteen beside them on the page, because the `` they sit in is already inset by its own cell padding. ⛔ THE STANDARD'S "14px in from the left" is not a number that can be checked against a page: each shape's container pads differently. What a person sees is whether two headings in one section start at the same place, and that is what `tools/design_check.py::H-INSET` measures now -- it is the only reason this 1px is right and the 14px was not. */ table.kv:has(> tbody > tr.kv-section-row) > tbody > tr.kv-section-row .kv-section-head.kv-band { position: relative; z-index: 1; margin-top: -16px; margin-left: 1px; } /* ...and the 20px the card does take comes off the widest thing in the row, not off the card's right edge. A date box and its calendar button carry their own minimum width, so without this they simply hang out. */ /* ⛔ AND IT IS NOT SCOPED TO A PAIR ANY MORE. It said `.cp-pair ...` because that was the only place these tables were narrow. SCOTT, 09/28/2026: "on the careplan screen, lets go back to making each section span the width of the page instead of using two columns" -- so Care Team, Hospice, Code Status and the rest are full-width tables now, and at 960px the Hospice select's own 200px minimum pushed 20px past the right edge of the window and the whole page scrolled sideways. MEASURED 09/28/2026, and caught by `tests/sections_side_by_side_test.py`, which still renders that tab. */ table.kv:has(> tbody > tr.kv-section-row) td, table.kv:has(> tbody > tr.kv-section-row) .date-combo, table.kv:has(> tbody > tr.kv-section-row) .date-combo input, table.kv:has(> tbody > tr.kv-section-row) form.live-edit, /* ⚠️ AND THE BOX ITSELF. `style.css` gives every `.profile-panel .live-edit` input and select a 200px minimum, which is right on a wide screen and is what actually ran off the page at 960: the cell shrank, the box did not. */ table.kv:has(> tbody > tr.kv-section-row) form.live-edit > input, table.kv:has(> tbody > tr.kv-section-row) form.live-edit > select { min-width: 0; max-width: 100%; } table.kv:has(> tbody > tr.kv-section-row) .date-combo { flex-wrap: nowrap; } /* ...and the pill rides UP onto that card's top edge, inset from the left -- never hanging off the corner -- with one gap under it. ⚠️ SAID ONCE, not once here and once below: `tests/css_duplicate_rules_test.py` refuses a selector written twice in one scope, because the older copy then decides half the declarations and nothing says so. */ .ds-sub > .ds-sub-head, .ds-sub > .kv-section-head.kv-band, fieldset.assessment-section > legend, fieldset.ir-card > legend, .docs-section > .kv-section-head.kv-band { position: relative; margin-top: -16px; margin-left: 0; margin-bottom: 14px; z-index: 1; } .profile-panel > .kv-section-head.kv-band, .cp-pair-col > .kv-section-head.kv-band, .cp-pair-col > form > .kv-section-head.kv-band, .panel > .kv-section-head.kv-band:not(.ds-hband) { position: relative; z-index: 1; margin: 22px 0 0 16px; } .docs-section > .kv-section-head.kv-band + * { margin-top: 0; } /* ---- L3: the small caps labels ---------------------------------------- */ .panel-subheading, .task-head { margin: 14px 0 6px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); line-height: 1.3; border: 0; background: none; } /* ---- the last families the audit named --------------------------------- The Care Specifics and meeting-agenda topic headings (uppercase 14-15.5px bold) and the Call-Offs explainer headings. Groceries' own section blocks and sub-headings were bridged here until decision 8A (09/28/2026) rebuilt that page on the standard parts. */ .co-guide h3, .co-explainer h3, /* The Care Specifics and meeting-agenda topic headings -- CALL BELLS, BED RAILS, AM/PM CARE -- are written into the document body as

, which is why they are reached through `.mt-rich` rather than a class of their own. */ .mt-rich h4, .mt-rich h5, .mt-topic, .cs-topic { margin: 14px 0 6px; padding: 0; border: 0; background: none; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); line-height: 1.3; } /* ---- the last few that a page rule still outweighed ------------------- ⚠️ EACH ONE MEASURED, NOT GUESSED. A heading that takes the new SHAPE and keeps its old COLOUR is the half-converted state the button round already paid for once: the shape says it moved, so nobody looks again. */ /* Care Specifics / Meetings: `.mt-sectitle` sets its own teal ink (0-1-0 in style-v2 but written later than the bridge's file-level rule is read for `color`), and `.mt-sec.is-off` a muted one. */ /* Staff accounts and the archived-accounts block: an `h2.section-heading` that is NOT on a banded page was the pale teal pill with no kind at all. */ main:not([data-bands]) h2.section-heading, .panel > h2.section-heading { display: flex; width: fit-content; align-items: center; gap: 8px; /* ⛔ `fit-content`, NOT `auto`. MEASURED 09/25/2026: this line said `auto` while the line above said `fit-content`, and the LAST one wins -- so every bridged pill drew the full width of its card and read as a bar, not a pill. The straddle only looks right on a capsule. */ height: 32px; min-height: 32px; padding: 0 14px; width: fit-content; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; white-space: nowrap; color: var(--text-onbrand); background: linear-gradient(135deg, var(--ds-b, var(--teal-800)), var(--ds-lite, var(--ds-tone, var(--teal-600))) 100%); box-shadow: 0 2px 6px rgba(20, 40, 50, .22); margin: 0 0 12px; } main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2.section-heading:first-child { display: flex; border-radius: var(--r-md) var(--r-md) 0 0; height: auto; min-height: 52px; padding: 0 20px; font-size: 19px; letter-spacing: -.01em; text-transform: none; box-shadow: none; margin: 0 0 var(--sp-4); white-space: normal; /* ⚠️ NO `width` HERE, AND THAT IS MEASURED, NOT AN OVERSIGHT. Interviewees drew "Add an interviewee" at 244px and "The list" at 169px inside their 1136px cards, and Waitlist & Tours drew all four of its headings that way -- the same 09/28/2026 report. But these headings ALSO match the band rule at the top of this block, which is heavier than the capsule family, so the `width: auto` said once up there answers them too. A second copy here is a declaration no mutation can reach, which is the same as a declaration nobody is checking. */ } /* The Call-Offs explainer headings. (Groceries' sub-headings were here too until decision 8A, 09/28/2026, put that page on the standard parts.) */ .co-guide h3, .co-explainer h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-500); line-height: 1.3; margin: 14px 0 6px; } /* The To-do page's per-person folds ARE the collapsible L1 (the audit's own "becomes" column), so they wear the band, not a white row. */ .ad-fold-head.td-personhead { color: var(--text-onbrand); background: linear-gradient(120deg, var(--ds-b, var(--slate-800)) 0%, var(--ds-lite, var(--ds-tone, var(--slate-700))) 100%); } /* ⛔ AND A FORM'S OWN CONTROL-GROUP LABEL IS NOT A SECTION HEADING. The first draft bridged `fieldset > legend` and turned "Start from" -- the label above two radio buttons on the new-meeting form -- into a coloured section pill. The audit lists three headings on Meetings and that is not one of them. The bridge names the three fieldsets that really carry sections instead. */ fieldset.mt-start > legend { font-size: 13px; font-weight: 700; color: var(--text); background: none; padding: 0; height: auto; border-radius: 0; text-transform: none; letter-spacing: 0; box-shadow: none; } /* -------------------------------------------------------------- on a phone L1 44px / 17px, L2 pill 28px / 11px, L3 unchanged. */ @media (max-width: 760px) { .ds-section-head, .ds-section > .ds-section-head, .panel > h2.section-heading, .panel > .house-panel-header, main[data-bands] .panel > h2:first-child, main[data-bands] .panel > .house-panel-header, .ad-fold-head { min-height: 44px; padding: 0 14px; font-size: 17px; line-height: 22px; } /* A band whose buttons or figures wrap under its title keeps a margin top and bottom (Scott, 10/02/2026, a phone photo of the dashboards: the second row sat on the band's bottom edge). 8px + the 28px circle + 8px is the 44px a one-line band already is, so only a wrapped band grows. */ .ds-section-head, .ds-section > .ds-section-head { padding-top: 8px; padding-bottom: 8px; } h2.ds-section-title { font-size: 17px; line-height: 22px; } .ds-hband h2.ds-section-title, main[data-bands] .panel > .house-panel-header { font-size: 19px; line-height: 24px; } /* the compact band on a phone: 36px, 14px words (decision H-7) */ .ds-section.ds-compact > .ds-section-head { min-height: 36px; padding: 6px 12px; } .ds-compact h2.ds-section-title, .ds-compact.ds-hband h2.ds-section-title { font-size: 14px; line-height: 18px; } .ds-sub { padding: 0 12px 12px; } .ds-sub-head { margin-top: -14px; } /* ⚠️ A PHONE HAS ITS OWN, TIGHTER RHYTHM -- Scott, 09/24/2026, with a photograph of the Care Plan tab "spaced far apart". 8.8px under every heading, said once per card shape. */ .ds-sub > .ds-sub-head, .ds-sub > .kv-section-head.kv-band, fieldset.assessment-section > legend, fieldset.ir-card > legend, .docs-section > .kv-section-head.kv-band { margin-bottom: 8.8px; margin-top: -14px; } .profile-panel > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > form > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .panel > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script), .profile-panel > .kv-section-head.kv-band + .rp-actions, body.ds-c .profile-panel > .kv-section-head.kv-band + .rp-actions { padding-top: 22.8px !important; margin-top: -14px !important; } table.kv:has(> tbody > tr.kv-section-row) > tbody > tr.kv-section-row .kv-section-head.kv-band { margin-top: -14px; } /* ⛔ A PHONE GIVES THE SIDE PADDING BACK. Scott asked on 09/24/2026 for the Care Plan tab CONDENSED on a phone, and two checks hold that: the tab may not pass its ceiling and every Pricing question must fit one line. 10px of card padding each side cost both. The outline still says where the section is. ⚠️ THE TOP PADDING IS NOT NEGOTIABLE THE SAME WAY -- it is half of the straddle (see the block at the foot of this file) and changing it moves the pill off the card's edge. */ table.kv:has(> tbody > tr.kv-section-row) { padding-left: 0; padding-right: 0; } /* ⛔ 17px, MEASURED AGAINST THE CAPSULES BESIDE IT (09/28/2026). It said 10px, a number about this table; at 390px that put the Care Plan and Profile tabs' three table capsules at x=38 while the eighteen beside them stood at 47. ⚠️ SCOTT REPORTED THE DESKTOP VERSION OF THE SAME THING: "some of them are shifted to the right and some are aligned to the left of the box." `tools/design_check.py::H-INSET` reads both widths. ⚠️ AND THE FIRST GUESS HERE WAS 8px, reasoned from `--card-pad`; it moved them the wrong way, because the phone's narrower card room is not a redefinition of that token. This number is read off the browser. */ table.kv:has(> tbody > tr.kv-section-row) > tbody > tr.kv-section-row .kv-section-head.kv-band { margin-left: 17px; } .ds-sub, fieldset.assessment-section, fieldset.ir-card, .docs-section:has(> .kv-section-head) { padding-bottom: 6px; } .profile-panel > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .cp-pair-col > form > .kv-section-head.kv-band + :not(.kv-section-head):not(script), .panel > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script), .profile-panel > .kv-section-head.kv-band + .rp-actions, body.ds-c .profile-panel > .kv-section-head.kv-band + .rp-actions { padding-bottom: 2px !important; padding-left: 10px !important; padding-right: 10px !important; } table.kv:has(> tbody > tr.kv-section-row) { padding-bottom: 2px; } /* ...and the air ABOVE a heading is the phone's own 14.4px, not the desktop's 22px. Same source: Scott's "spaced far apart" photograph. */ .profile-panel > .kv-section-head.kv-band, .cp-pair-col > .kv-section-head.kv-band, .cp-pair-col > form > .kv-section-head.kv-band, .panel > .kv-section-head.kv-band:not(.ds-hband), .ds-sub, fieldset.assessment-section, fieldset.ir-card, .docs-section:has(> .kv-section-head) { margin-top: 14.4px; } table.kv:has(> tbody > tr.kv-section-row) { margin-top: 28.4px; } /* 14.4px + the pill's 14px */ /* ⛔ THE PAGE-SCOPED COPIES ARE NAMED HERE TOO. The Documents tab, the Playbook and Call-Offs each set the L2's size at two or three classes deep, so a bare `.kv-section-head.kv-band` in this block loses to them and those three pages kept the desktop size on a phone. MEASURED at 390px: 12px against everybody else's 11px. */ /* ⛔ THE LEVEL 1 BANDS ARE EXCLUDED BY NAME. They are 44px/17px on a phone like every other band; pinning them to the pill's 28px/11px here is what left the Community Playbook drawing 11px words in a band while Repairs drew 19px -- MEASURED at 390px, two looks where there should be one. */ .ds-sub-title, .kv-section-head.kv-band:not(.ds-hband), .mi-section-head, .au-group-head, .seo-section-head, .documents-panel .kv-section-head.kv-band, body.ds-c .documents-panel .kv-section-head.kv-band, .panel > h2:not(.section-heading):not(.ds-section-title):not(.house-panel-header), main:not([data-bands]) h2.section-heading, fieldset.assessment-section > legend, fieldset.ir-card > legend, legend.ir-legend, .assessment-form .assessment-section legend, .assessment-form .cp-code-section legend, .assessment-section legend { height: 28px; min-height: 28px; padding: 0 12px; font-size: 11px; /* ⚠️ A PHONE HAS ITS OWN, TIGHTER RHYTHM, AND THAT IS DELIBERATE. Scott, 09/24/2026, with a photograph: the Care Plan tab was "spaced far apart" on his phone and he asked for it condensed. 8.8px is the number that page already holds; tests/care_plan_spacing_test.py owns it. */ margin-bottom: 8.8px; } main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2:first-child, main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) > h2.section-heading:first-child { font-size: 17px; line-height: 22px; min-height: 44px; padding: 0 14px; } main[data-bands] .panel:is(.house-panel, :has(> .house-panel-header), :has(> h2:first-child)) .house-panel-title { font-size: 19px; line-height: 24px; } .wr-panel > .wr-panel-head, body.ds-c .wr-panel > .wr-panel-head { /* ⛔ `height: auto` AS WELL AS `min-height`, AND IT IS NOT BELT AND BRACES. MEASURED 09/28/2026 on the Community Playbook at 390px: the 17px title leaves no room for the two icon buttons at the right end, so they wrap to a second line -- and the band stayed 44px tall, which put both of them BELOW it, white on the card's white. Two controls you cannot see and cannot find. Found by the new page-look sweep on the day it was written; nobody had reported it because nobody could see it. */ min-height: 44px; height: auto; padding: 0 14px; font-size: 17px; line-height: 22px; } /* ⛔ AND ON A PHONE THE BAND TAKES THE WHOLE LINE AND THE CONTROLS DROP UNDER IT. MEASURED 09/28/2026 at 390px: the Include tick and two buttons took 258px of a 320px strip and squeezed "Dreyfous House" into 62px. A band that has to share a line with three controls has no line. */ /* ⛔ AND THE TITLE WRAPS RATHER THAN CLIPPING. MEASURED 09/28/2026 at 390px on the staff meeting agenda: "Professional Communication in the Workplace" is a section a person WROTE, so its length is theirs to choose -- and the band inherits `white-space: nowrap` from the capsule family two blocks up, so the words ran out of the box and were cut. ⚠️ A band whose words do not fit is `tools/design_check.py::H-SPAN`, and this was the only one left on the site. A heading somebody typed must be allowed a second line. */ .wr-panel > .wr-panel-head .wr-panel-title { font-size: 17px; line-height: 22px; } .kv-section-head.kv-band.ds-hband, body.ds-c .kv-section-head.kv-band.ds-hband { min-height: 44px; padding: 0 14px; font-size: 19px; line-height: 24px; } } /* ----------------------------------------------------------------- print ⛔ NO FILLS AND NO GRADIENTS ON PAPER. A printed band is a solid block of toner and the words inside it come out grey on grey. L1 and L2 are 16px/700 with a 1px rule; L3 is as on screen. ⚠️ `var(--text)` RATHER THAN `#000`: it is the near-black the whole site already reads in, it prints as black, and tests/raw_hex_ratchet_test.py is right to refuse a new colour literal for something a token already says. */ @media print { .ds-section-head, .ds-section > .ds-section-head, .ds-sub-title, .kv-section-head.kv-band, .mi-section-head, .wr-panel-head, .au-group-head, .seo-section-head, fieldset.assessment-section > legend, fieldset.ir-card > legend, legend.ir-legend, .panel > h2.section-heading, .panel > .house-panel-header, .ad-fold-head { background: none !important; color: var(--text) !important; box-shadow: none !important; border-radius: 0 !important; border-bottom: 1px solid var(--text) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; height: auto !important; min-height: 0 !important; padding: 0 0 3px !important; } .ds-section-ico, .ds-sub-chev { display: none !important; } .ds-sub { border: 0 !important; padding: 0 !important; } .ds-group-label { color: var(--text) !important; } } /* ========================================================================== ⛔ THE STRADDLE AND THE CARD — SAID LAST, SAID ONCE PER SHAPE, AND MEANT. SCOTT, 09/25/2026, WITH A PHONE SCREENSHOT: "the level 2 heading is completely inside the section when it should be half in and half out of the section just like it is on the assessments tab ... it needs to be fixed everywhere on the webpage." ⚠️ MEASURED ON 41 PAGES AT 390, 760, 1024 AND 1440px BEFORE WRITING THIS, and again after. Five things were wrong and not one was visible in the source -- the last of them needed a screenshot: 1. ⛔ THE PILL WAS `display: inline-flex`, AND VERTICAL MARGINS DO NOTHING ON AN INLINE-LEVEL BOX. Every negative top margin meant to lift it onto the card's edge was simply ignored, on every shape that lifts the pill rather than the card. `display: flex; width: fit-content` is the same shrink-to-fit capsule as a block-level box, and it moves. 2. ⛔ THE PAGES OVERWRITE THE `margin` SHORTHAND, not the longhand. Three rules that each wanted something reasonable -- two halves of a pair starting level, a tighter Documents tab, an empty state's own spacing -- each silently decided where a pill sits. Out-specifying them one at a time is how the next one gets missed. 3. ⛔ A SELECTOR LIST IS NOT A SHAPE LIST. Contacts, Rates, Notes and Comms wrap a section in an anchor `
`, so the heading's parent is a div with NO CLASS -- four headings had no card at all. 4. ⚠️ THE PILL'S OWN BOTTOM MARGIN IS PART OF THE SUM (8.8px on some pages, 0 on others), and a `table.kv` is 2px deeper than a div because it is `border-collapse: separate` with 2px of spacing. 5. ⛔ AND THE PILL HAS TO PAINT ON TOP OF THE CARD, or the card -- which comes after it in the page -- paints over its lower half and cuts the words through the middle. No measurement sees that one. ⛔ SO THE GEOMETRY IS `!important`, AND ONLY THE GEOMETRY. Colour, size, case and spacing stay negotiable; where the pill sits on its card does not, because that shape IS decision 3A. THE ARITHMETIC, ONCE: the card's top edge runs through the pill's middle. screen pill 32px -> card margin-top -16px, padding-top 30px (gap 14) phone pill 28px -> card margin-top -14px, padding-top 22.8px (gap 8.8) ========================================================================== */ /* Shape A -- the pill is INSIDE its card: lift the pill. */ .docs-section > .kv-section-head.kv-band, .ds-sub > .ds-sub-head, .ds-sub > .kv-section-head.kv-band { margin-top: -17px !important; /* half the pill, plus the 1px edge */ } /* ⚠️ A TABLE IS TWO PIXELS DEEPER THAN A DIV, and it is not the border. These tables are `border-collapse: separate` with `border-spacing: 2px`, so the first row starts 3px below the table's own top edge, not 1px. MEASURED: the same -17px that lands a div's pill exactly on the edge leaves a table's 2px inside it. ⛔ Do not "simplify" this back into the group above. */ table.kv:has(> tbody > tr.kv-section-row) tr.kv-section-row > td > .kv-section-head.kv-band { margin-top: -19px !important; /* 16 + 1 edge + 2 of border-spacing */ } /* ⚠️ AND THE CELL'S OWN TOP PADDING IS PART OF THE SAME SUM. MEASURED on the profile's kv tables: 2px on seven sections and 3.6px on General Notes, so one lift produced three answers again. The pill is lifted clear of the table either way, so the cell has nothing to pad. */ table.kv:has(> tbody > tr.kv-section-row) tr.kv-section-row > td { padding-top: 0 !important; } /* Shape B -- the pill is ABOVE its card: lift the card onto the pill. ⛔ THE PARENT LIST IS FOUR SHAPES, NOT THREE. `.profile-panel > div` is the fourth and it is the one that was missed: Contacts, Rates, Notes and Comms each wrap a section in an anchor div (`
`) so the heading's parent is a DIV WITH NO CLASS AT ALL. Four headings had no card whatsoever and four more sat 22.8px inside one. ⚠️ A selector list is not a shape list -- look at the markup. */ :is(.profile-panel, .profile-panel > div, .cp-pair-col, .cp-pair-col > form, .panel) > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script):not(style) { border: 1px solid var(--border-1, var(--slate-150)) !important; border-radius: var(--r-md) !important; background: var(--surface) !important; margin-top: -16px !important; /* ⛔ ALL FOUR SIDES, NOT JUST THE TOP. The straddle only ever needed the top number, so that is all this rule said -- and the four anchor-div tabs got a card with NO SIDE PADDING AT ALL. Their contents ran flush into the border: the Notes and Communications forms had their boxes touching both edges, and the Documents and Contacts tables the same. ⚠️ SCOTT SAW IT ON 09/28/2026, in a batch of screenshots: "the box within a box is off within some of these ... spacing between wording and the internal box". The shapes that ARE listed in the rule above have carried `30px 16px 14px` all along, so this is that same number, said once more for the shape that was missed -- not a new value. ⛔ AND IT IS WHY NO CHECK CAUGHT IT: every rule so far asks where a box STARTS, and none asks how much air is inside it. */ padding: 30px 16px 14px !important; } /* ⛔ AND THE PILL'S OWN BOTTOM MARGIN IS PART OF THE SUM. MEASURED: the pill carries 8.8px of it on the Care Plan pairs and on the four anchor-div tabs, and 0 everywhere else -- which is the whole reason one negative number produced three different answers on three pages. Zero it and the card's lift is the only term left. */ :is(.profile-panel, .cp-pair-col, .cp-pair-col > form, .panel) > .kv-section-head.kv-band:not(.ds-hband) { margin-bottom: 0 !important; /* ⚠️ AND THE SAME INSET THE ASSESSMENT HAS. There the card is a fieldset and the browser insets the legend for us; here the pill and the card are siblings sharing a left edge, so it has to be said. ⛔ AND IT IS MEASURED FROM THE CARD, NOT FROM THE PANEL. A flat 14px was right only where the pill's parent IS the card. Where they are siblings, `spacing.css` has already pushed the CARD in by `--card-pad`, so 14px from the panel left the pill 2px to the LEFT of the box it straddles. ⚠️ SCOTT SAW IT, 09/28/2026: "some of them are shifted to the right and some are aligned to the left of the box, they should be shifted to the right." MEASURED on the Care Plan tab that day: 18 pills at -2px and three at +3px, on one page, and four values across the site (-2, 0, 3, 14) where decision 3A says 14. */ margin-left: calc(var(--card-pad) + 14px) !important; } /* ⛔ AND THE OTHER GEOMETRY, WHICH NEEDS THE OTHER NUMBER. Contacts, Rates, Notes, Comms and the Documents tab each wrap a section in an anchor div (`
`, `
`), so the pill's PARENT is the card and the card is not itself inset -- 14px lands right there, and `--card-pad + 14` would push it 16px too far. ⚠️ MEASURED 09/28/2026: the first cut of this fix moved the Documents tab's eight headings from 14px to 30px while fixing the Care Plan's eighteen. Two shapes, two numbers, and the only way to tell them apart is the markup -- which is trap 6 of this file, verbatim: "a selector list is not a shape list; look at the markup, not at the class names." */ :is(.profile-panel, .panel) > div > .kv-section-head.kv-band:not(.ds-hband) { /* ⛔ `margin-bottom: 0` COMES WITH IT. Splitting this rule off the one above dropped that declaration for the anchor-div shapes, and the pill's own bottom margin is a TERM IN THE STRADDLE SUM -- trap 7 of this file, in its own words. `tests/heading_standard_test.py` caught it at both widths within the hour. */ margin-bottom: 0 !important; margin-left: 14px !important; } /* ⛔ AND THE LICENCE HEADING, WHICH IS THE SAME CAPSULE IN A THIRD SHAPE. It sits in an `.fl-row` above its own body rather than straddling it, so none of the straddle rules reached it -- and it drew flush with the left edge while every other capsule on the site stood 14px in. MEASURED 09/28/2026: six of them at 0px. */ @media (max-width: 760px) { /* ⚠️ ON A PHONE THE TABLE NEEDS NO EXTRA 2px -- the spacing is 0 at this width, MEASURED, which is why one number covers all four shapes here. */ .docs-section > .kv-section-head.kv-band, table.kv:has(> tbody > tr.kv-section-row) tr.kv-section-row > td > .kv-section-head.kv-band, .ds-sub > .ds-sub-head, .ds-sub > .kv-section-head.kv-band { margin-top: -15px !important; /* half the 28px pill, plus the 1px edge */ } :is(.profile-panel, .profile-panel > div, .cp-pair-col, .cp-pair-col > form, .panel) > .kv-section-head.kv-band:not(.ds-hband) + :not(.kv-section-head):not(script):not(style) { margin-top: -14px !important; padding-top: 22.8px !important; } } /* ⚠️ THE BACK ARROW HAS A SIZE OF ITS OWN. `back_link()` draws it on every page with a Back button, and inside the site's shell a general icon rule sizes it; the two phone-shaped forms are not in that shell, and there it drew at the SVG's natural size -- a black triangle the height of the header (MEASURED in the form-field round's own phone screenshot, 09/25/2026). */ .ic-back { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; flex: none; } /* ⛔ TEXT THAT RIDES ON A BAND WEARS THE BAND'S OWN INK. A count or a short note in a band's right end is the one thing besides a button that belongs there, and every page that has tried it so far has used a class coloured for a white card -- dark grey on a dark gradient. MEASURED 09/28/2026 on Automations ("13 active") and, the same morning, on the Wage Reduction filter. One class, said once, so the next page cannot get it wrong. */ .ds-section-head .ds-section-note, .ds-section-actions .ds-section-note { color: var(--text-onbrand); font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; } /* ========================================================================== THE SURFACES THAT WERE HAND-DRAWN (D3, 09/30/2026): the pop-up dialog, the tooltip, a person's photo and the progress bar. `c_ds_message` wears the existing `flash` look and adds nothing here. ========================================================================== */ dialog.ds-dialog { width: min(460px, calc(100vw - 32px)); border: 0; padding: 22px 24px; background: var(--surface-0); color: var(--text); border-radius: var(--r-md); box-shadow: var(--sh-key); } dialog.ds-dialog::backdrop { background: var(--scrim); } .ds-dialog-title { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--text); } .ds-dialog-body { color: var(--text-muted); font-size: 14px; line-height: 1.5; } .ds-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 18px 0 0; } /* THE PICTURE VIEWER -- c_ds_viewer() (U6): a row of small pictures; one opens its item large, side by side. */ .ds-viewer-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; } .ds-viewer-thumb { display: block; width: 200px; text-decoration: none; color: var(--link); font-weight: 600; cursor: zoom-in; } .ds-viewer-thumb:hover .ds-viewer-cap { text-decoration: underline; } .ds-viewer-thumb img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: var(--r-xs); } .ds-viewer-thumb:hover img, .ds-viewer-thumb:focus-visible img { border-color: var(--teal-600); } .ds-viewer-cap { display: block; font-size: 13px; margin: 4px 0 0; } dialog.ds-dialog.ds-viewer { width: min(1400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 16px 20px; } .ds-viewer-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .ds-viewer-head .ds-dialog-title { margin: 0; flex: 1; } .ds-viewer-count { color: var(--text-muted); font-size: 13px; } .ds-viewer-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; } .ds-viewer-pics figure { margin: 0; min-width: 0; } .ds-viewer-pics img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--r-xs); } .ds-viewer-pics figcaption { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 4px 0 0; } @media (max-width: 760px) { .ds-viewer-thumb { width: calc(50% - 6px); } .ds-viewer-thumb img { height: 120px; } .ds-viewer-pics { grid-template-columns: 1fr; } } .ds-tip { position: relative; display: inline-flex; align-items: center; cursor: help; } .ds-tip:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; border-radius: var(--r-xs); } .ds-tip-box { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 50; width: max-content; max-width: 260px; padding: 6px 10px; background: var(--slate-800); color: var(--text-onbrand); border-radius: var(--r-xs); font-size: 12px; line-height: 16px; font-weight: 600; text-align: left; white-space: normal; visibility: hidden; opacity: 0; pointer-events: none; } .ds-tip:hover > .ds-tip-box, .ds-tip:focus-visible > .ds-tip-box, .ds-tip:focus-within > .ds-tip-box { visibility: visible; opacity: 1; } /* A tooltip with a title and a "What to do" line (c_ds_tooltip title=/action=). */ .ds-tip-rich { max-width: 300px; padding: 10px 12px; font-size: 13px; line-height: 18px; font-weight: 400; } .ds-tip-rich > span { display: block; } .ds-tip-rich .ds-tip-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; } .ds-tip-rich .ds-tip-do { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .25); } .ds-tip-rich .ds-tip-do b { font-weight: 800; } .ds-photo { display: inline-grid; place-items: center; flex: none; border-radius: 50%; object-fit: cover; background: var(--teal-100); color: var(--teal-800); font-weight: 800; overflow: hidden; } .ds-photo-sm { width: 32px; height: 32px; font-size: 12px; } .ds-photo-md { width: 48px; height: 48px; font-size: 16px; } .ds-photo-lg { width: 96px; height: 96px; font-size: 28px; } progress.ds-progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: var(--r-pill); background: var(--slate-100); overflow: hidden; color: var(--teal-600); } progress.ds-progress::-webkit-progress-bar { background: var(--slate-100); border-radius: var(--r-pill); } progress.ds-progress::-webkit-progress-value { background: var(--teal-600); border-radius: var(--r-pill); } progress.ds-progress::-moz-progress-bar { background: var(--teal-600); border-radius: var(--r-pill); } /* ========================================================================== THE ONE PRINT HEADER -- D10 (Scott 09/29/2026, "all of MORE-IDEAS-0929.md EXCEPT S6"). c_print_header() in applib/print_and_mail.py; every printout links this sheet. design_check rule PR-FRAME reads each printout for one header and no footer (Scott, 10/01/2026: "remove everything in that footer area"). ========================================================================== */ .pr-head { text-align: center; border-bottom: 3px solid var(--teal-500); padding: 0 0 10px; margin: 0 0 14px; } .pr-head .pr-logo { display: block; height: 48px; width: auto; margin: 0 auto; } .pr-head .pr-title { margin: 6px 0 2px; font-size: 24px; line-height: 30px; font-weight: 700; color: var(--text); } /* no short accent line under a printout's title: style.css draws one under every

, and here it sat alone at the sheet's left edge (Scott, 10/02/2026) */ .pr-head .pr-title::after { content: none; } .pr-head .pr-meta { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--teal-700); } /* A small button that sits right beside a band's title (c_ds_section(lead_html=), the Administrator Dashboard's Incident Reports band). Scott, 10/02/2026: "put it right next to the heading, not all the way to the right." */ .ds-section-lead { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; vertical-align: middle; } /* The screen after an incident report is sent (the phone forms' page links this sheet). The tick is a LINE drawing in the site's teal -- left to the browser it filled in solid black. Scott, 10/02/2026. */ .ir-card.ir-sent { text-align: center; padding: 32px 20px 28px; margin-top: 20px; } /* The white card stands in the MIDDLE of the pale green under the page's top bar, up and down as well as across (Scott, 10/02/2026: "the section with the white and text in it is not centered in the light green section that is behind it"). The page fills the screen and its body centres the one card. */ body:has(.ir-card.ir-sent) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body:has(.ir-card.ir-sent) > .ir-main { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 16px 14px; } body:has(.ir-card.ir-sent) > .ir-main > .ir-form { width: 100%; margin: 0 auto; } body:has(.ir-card.ir-sent) > .ir-main > .ir-form > .ir-card.ir-sent { margin: 0 !important; } .ir-sent-tick { line-height: 0; margin: 0 0 14px; } .ir-sent-tick svg { width: 52px; height: 52px; fill: none; stroke: var(--teal-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ir-sent-thanks { font-size: 20px; line-height: 26px; font-weight: 800; margin: 0 0 10px; color: var(--text); } .ir-sent-text { font-size: 16px; line-height: 24px; margin: 0; color: var(--text-muted); } /* ========================================================================== THE ADL SHEET (10/03/2026) -- the phone form's notes, its spam trap, and the printout drawn from a description (ds_print_response). Scott's mockups: mockups/adl-sheets-10-03/. ========================================================================== */ /* DESIGN-PENDING: DP-106 (closest rule: 4.15 c_ds_message). A colored note inside or under a card: green (whose shower day it is), yellow (an incident needs its own report), plain (not a shower day). */ .ir-note { margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 15px; line-height: 22px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); } .ir-note[hidden], .adl-bm-more[hidden] { display: none; } .ir-note-success { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); font-weight: 700; } .ir-note-warn { margin-top: 24px; background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); } .ir-note-warn a { color: inherit; font-weight: 700; text-decoration: underline; } .ir-main > .ir-note { max-width: 760px; margin: 20px auto 24px; } /* the spam trap: off the screen, never seen or tabbed to by a person */ .ir-trap { position: absolute; left: -5000px; } .adl-bm-more { margin-top: 12px; } .adl-bm-more .ir-q { margin-top: 12px; } /* a question under another one's chips (the builder marks its own follow boxes ps-follow) */ .ir-form .ir-chips + .ir-q, .ir-form .ps-follow + .ir-q, .ir-form .ps-follow > .ir-q:first-child { margin-top: 14px; } /* the care plan's shower days as small pills, on the ADL form and the ADLs tab (10/12/2026) */ .adl-shower-days { vertical-align: middle; margin-right: 6px; } /* the ADLs tab: Needs attention's lines, the grid's key */ .adl-attention { list-style: none; margin: 0; padding: 0; } .adl-attention li { padding: 8px 0; border-bottom: 1px solid var(--line); } .adl-attention li:last-child { border-bottom: 0; } /* an ADL alert's Mark reviewed: on the alert's own row, at its right end (Scott, 10/12/2026); it wraps under the words only when the row is too narrow */ .adl-attention .adl-alert-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .adl-attention .adl-review { margin: 0 0 0 auto; } .adl-attention.adl-older { border-top: 1px solid var(--line); } /* the owner's link to the 6:30 missing-sheets email, under the dashboards' ADL Alerts */ .adl-mail-link { margin: 12px 0 0; font-size: 14px; } .adl-key { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; } /* the printout: one sheet of paper's width, its toolbar's delete form on the row */ .ps-print { margin: 0; background: var(--surface); color: var(--text); font-family: Lato, Arial, sans-serif; } .ps-print-page { max-width: 780px; margin: 16px auto 32px; padding: 0 16px; } .ps-print .print-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 12px; } .ps-print .print-tools { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; } .ps-inline { display: inline; } /* Every button on the row is one size (Scott, 10/04/2026: "The buttons on the top of the page are all not the same size"). On a phone the Delete button -- a submit button inside its own little form -- took the phone forms' 44px send-button size while the rest of the row is the toolbar's 36px. */ @media (max-width: 760px) { .ps-print .print-toolbar .ds-btn, .ps-print .print-toolbar form button.ds-btn[type="submit"]:not(.ghost) { height: 36px; min-height: 36px; padding: 0 10px; font-size: 13px; } } /* THE PRINTOUT'S PARTS, A PAPER FORM (Scott, 10/04/2026: "this needs to be formatted way better, it's all just text on a screen"). ds_print_response() in applib/page_spec.py draws them: a bordered box per part with its title in a tinted strip, boxed facts, every choice with the picked ones ticked, grids with column headings, ruled note lines and signature lines. The same white page and dark-ruled tables as the care plan and incident report printouts. One US Letter page, portrait; a part never splits. DESIGN-PENDING: DP-107 (closest rule: PR-FRAME / PR-PRINT, the frame only). */ .ps-paper { font-size: 14px; line-height: 20px; } .ps-part { border: 1px solid var(--slate-700); border-radius: var(--r-xs); margin: 0 0 10px; break-inside: avoid; page-break-inside: avoid; overflow: hidden; } .ps-part-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 5px 10px; font-size: 14px; line-height: 20px; font-weight: 800; color: var(--teal-700); background: var(--teal-50); border-bottom: 1px solid var(--slate-700); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-part-title::after { content: none; } .ps-part-hint { font-size: 12px; font-weight: 600; color: var(--text-muted); text-align: right; } /* boxed facts: label over value */ .ps-facts { display: grid; grid-template-columns: repeat(var(--ps-cols, 2), minmax(0, 1fr)); } .ps-facts.ps-cols-3 { --ps-cols: 3; } .ps-facts.ps-cols-4 { --ps-cols: 4; } .ps-fact { padding: 5px 10px 6px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); min-width: 0; } .ps-cols-2 > .ps-fact:nth-child(2n), .ps-cols-3 > .ps-fact:nth-child(3n), .ps-cols-4 > .ps-fact:nth-child(4n) { border-right: 0; } .ps-fact-l { font-size: 11px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .ps-fact-v { font-weight: 700; color: var(--text); overflow-wrap: anywhere; } .ps-facts { margin-bottom: -1px; } /* the tick box */ .ps-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 14px; height: 14px; vertical-align: middle; border: 1.5px solid var(--slate-700); border-radius: 2px; background: var(--surface); font-size: 12px; line-height: 1; font-weight: 800; color: var(--text); } .ps-box.is-on { border-color: var(--teal-700); background: var(--teal-100); color: var(--teal-800); -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* every choice, the picked ones ticked and bold */ table.ps-choices, table.ps-grid { width: 100%; border-collapse: collapse; font-size: inherit; line-height: inherit; } .ps-choices th, .ps-choices td { padding: 5px 10px; border-bottom: 1px solid var(--line-strong); vertical-align: top; text-align: left; } .ps-choices tr:last-child > * { border-bottom: 0; } .ps-choices th { width: 30%; font-size: 13px; font-weight: 700; color: var(--text); border-right: 1px solid var(--line-strong); } .ps-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; } .ps-opt { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--text-muted); } .ps-opt.is-on { color: var(--text); font-weight: 800; } .ps-opt-extra { font-weight: 700; } /* a grid with column headings */ .ps-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ps-grid th, .ps-grid td { padding: 5px 6px; border: 1px solid var(--line-strong); text-align: center; vertical-align: middle; } .ps-grid tr > :first-child { border-left: 0; } .ps-grid tr > :last-child { border-right: 0; } .ps-grid thead tr:first-child > * { border-top: 0; } .ps-grid tbody tr:last-child > * { border-bottom: 0; } .ps-grid thead th { font-size: 12px; line-height: 16px; font-weight: 700; color: var(--text-muted); } .ps-grid thead th.ps-group { font-weight: 800; color: var(--text); background: var(--surface-2); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-grid tbody th { text-align: left; font-size: 13px; font-weight: 700; color: var(--text); width: 18%; } .ps-grid td { font-weight: 700; } .ps-grid .ps-corner { text-align: left; } /* notes on ruled lines */ .ps-note { min-height: 60px; padding: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 24px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, var(--line-strong) 23px, var(--line-strong) 24px); -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* signature and date lines */ .ps-lines { display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; gap: 0 18px; padding: 6px 12px 8px; } .ps-line-ink { min-height: 26px; display: flex; align-items: flex-end; padding: 0 2px 2px; border-bottom: 1px solid var(--slate-700); font-weight: 700; } .ps-line-l { padding-top: 3px; font-size: 12px; line-height: 16px; color: var(--text-muted); } @media (max-width: 640px) { .ps-facts.ps-cols-3, .ps-facts.ps-cols-4 { --ps-cols: 2; } .ps-cols-3 > .ps-fact:nth-child(3n), .ps-cols-4 > .ps-fact:nth-child(4n) { border-right: 1px solid var(--line-strong); } .ps-facts > .ps-fact:nth-child(2n) { border-right: 0; } .ps-choices th { width: 38%; } .ps-lines { grid-template-columns: 2fr 1fr; gap: 4px 14px; } .ps-grid th, .ps-grid td { padding: 4px 2px; } .ps-grid thead th { font-size: 11px; line-height: 13px; } .ps-grid tbody th { padding-left: 6px; width: auto; } } /* AN INSTRUCTION SHEET a new hire follows (page_spec.py "say", "big", "qr", "steps"; Background Checks, Scott 10/16/2026: "super easy to follow" -- so the words stay big on paper too) */ .ps-say { margin: 0; padding: 8px 12px 8px 30px; font-size: 16px; line-height: 23px; } .ps-say li + li { margin-top: 4px; } .ps-plain { padding: 8px 12px; font-size: 16px; line-height: 23px; } .ps-plain p { margin: 0; } .ps-plain p:first-child { font-weight: 800; margin-bottom: 4px; } /* the hours: a soft panel of rows, the days on the left a touch bolder, the times lined up on the right of them (Scott, 10/16/2026: "they should stand out, but not too much") */ .ps-plain .ps-plain-row { display: flex; gap: 12px; margin: 0; padding: 5px 12px; font-weight: 400; background: var(--teal-50); border-left: 3px solid var(--teal-500); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-plain .ps-plain-row + .ps-plain-row { border-top: 1px solid var(--surface); } .ps-plain p:first-child + .ps-plain-row { margin-top: 6px; border-top-left-radius: var(--r-xs); border-top-right-radius: var(--r-xs); } .ps-plain .ps-plain-row:last-child { border-bottom-left-radius: var(--r-xs); border-bottom-right-radius: var(--r-xs); } .ps-plain-k { flex: 0 0 15.5rem; font-weight: 700; color: var(--teal-700); } .ps-plain-row > span:last-child { font-variant-numeric: tabular-nums; } .ps-step-t .ds-btn { margin-left: 8px; vertical-align: middle; min-height: 40px; } @media print { .ps-step-t .ds-btn { display: none; } } @media (max-width: 640px) { .ps-plain .ps-plain-row { flex-direction: column; gap: 0; } .ps-plain-k { flex: none; } } /* highlighted like a marker on paper (Scott, 10/16/2026: "highlight the state law sentence in yellow") */ .ps-notice { margin: 0 0 10px; padding: 10px 14px; border: 0; border-radius: var(--r-xs); background: var(--yellow); color: var(--text); font-size: 16px; line-height: 23px; font-weight: 800; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* a one-row form (page_spec "inline"): boxes sized to their data, the button right after them */ main.container form.ds-form[data-inline] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } main.container form.ds-form[data-inline] .ds-field { margin: 0; } main.container form.ds-form[data-inline] .ds-form-actions { margin: 0; padding: 0; border: 0; } .ds-size-s { width: 10rem; } .ds-size-m { width: 15rem; } .ds-size-l { width: 20rem; } @media (max-width: 640px) { .ds-size-s, .ds-size-m, .ds-size-l { width: 100%; } main.container form.ds-form[data-inline] .ds-form-actions { width: 100%; } } .ps-big-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line-strong); } .ps-big-row:last-child { border-bottom: 0; } .ps-big-l { font-size: 16px; line-height: 21px; font-weight: 800; color: var(--text); } .ps-big-l span { display: block; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--text-muted); } .ps-big-v { font-family: "Courier New", Courier, monospace; font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: .06em; color: var(--teal-700); padding: 4px 12px; border: 2px solid var(--teal-500); border-radius: var(--r-xs); background: var(--teal-50); overflow-wrap: anywhere; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-big-val { display: flex; align-items: center; gap: 10px; } .ps-big-val .ds-btn { min-height: 44px; padding: 0 18px; font-size: 16px; } @media print { .ps-big-val .ds-btn { display: none; } } @media (max-width: 640px) { .ps-big-val { justify-content: space-between; } .ps-big-val .ps-big-v { flex: 1 1 auto; } } .ps-qr { display: flex; align-items: center; gap: 14px; padding: 8px 12px; } .ps-qr img { flex: 0 0 auto; width: 120px; height: 120px; } .ps-qr .ps-say { padding: 0 0 0 18px; } .ps-part:has(.ps-steps) { break-inside: auto; page-break-inside: auto; } /* a value with its Copy button (page_spec cell "copy") */ .ds-copy-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .ds-copy-cell code { font-family: "Courier New", Courier, monospace; font-size: 16px; font-weight: 700; letter-spacing: .04em; color: var(--text); } /* a card of values to copy, by row and column (page_spec "copygrid": the token card) -- its column numbers and row letters bold, large and teal so a value is found at a glance (Scott, 10/19/2026) */ .ds-copygrid { display: grid; grid-template-columns: 3rem repeat(var(--cg-cols, 5), minmax(0, 1fr)); border: 1px solid var(--border-1); border-radius: var(--r-md); overflow: hidden; } .ds-copygrid > div { padding: 10px 12px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; } .ds-cg-corner, .ds-cg-col { background: var(--teal-50); } .ds-cg-col, .ds-cg-row { font-size: 19px; font-weight: 800; color: var(--teal-700); } .ds-cg-row { justify-content: center; background: var(--teal-50); } @media (max-width: 640px) { .ds-copygrid { grid-template-columns: 2.25rem repeat(var(--cg-cols, 5), minmax(8.5rem, 1fr)); overflow-x: auto; } } /* a tile that is a link out (page_spec tile "href") */ .ds-tile-link { display: block; color: var(--link); font-weight: 600; text-decoration: none; border-radius: var(--r-md); } .ds-tile-link .ds-tile { height: 100%; transition: box-shadow .15s ease, border-color .15s ease; } .ds-tile-link:hover .ds-tile, .ds-tile-link:focus-visible .ds-tile { border-color: var(--teal-500); box-shadow: 0 0 0 2px var(--teal-100); } /* a box with its send button to its right (page_spec "button" on a field) */ .ds-field-btn { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .ds-fb-box { flex: 0 1 20rem; min-width: 0; } .ds-fb-box > .ds-field { margin: 0; } .ds-fb-status { margin-top: 6px; } .ds-field-btn > .ds-btn { flex: 0 0 auto; margin-top: 22px; white-space: nowrap; } .ds-copy { display: flex; align-items: flex-start; gap: 12px; } .ds-copy-text { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface-2); font-size: 14px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; } @media (max-width: 640px) { .ds-copy { flex-direction: column; align-items: stretch; } } @media (max-width: 640px) { .ds-field-btn { flex-direction: column; align-items: stretch; gap: 8px; } .ds-fb-box { flex: none; } .ds-field-btn > .ds-btn { margin-top: 0; } } .ps-link { padding: 12px; } .ps-link .ds-btn { display: flex; justify-content: center; width: 100%; min-height: 48px; font-size: 16px; } .ps-link .ps-say { padding: 10px 0 0 18px; } @media print { .ps-link .ds-btn { display: none; } } .ps-steps { list-style: none; margin: 0; padding: 0; } .ps-step { display: flex; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); break-inside: avoid; page-break-inside: avoid; } .ps-step:last-child { border-bottom: 0; } .ps-step-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal-600); color: var(--surface); font-size: 16px; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-step-b { min-width: 0; flex: 1 1 auto; } .ps-step-t { font-size: 16px; line-height: 23px; font-weight: 800; color: var(--text); padding-top: 4px; } .ps-code { display: inline-block; margin: 0 2px; padding: 0 8px; font-family: "Courier New", Courier, monospace; font-size: 20px; line-height: 30px; font-weight: 800; letter-spacing: .06em; color: var(--teal-700); border: 2px solid var(--teal-500); border-radius: var(--r-xs); background: var(--teal-50); vertical-align: baseline; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-step-m { font-size: 15px; line-height: 21px; font-weight: 700; color: var(--teal-700); overflow-wrap: anywhere; } .ps-step-img { display: block; max-width: 100%; max-height: 260px; width: auto; margin-top: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); } @media (max-width: 640px) { .ps-big-row { flex-direction: column; align-items: stretch; gap: 6px; } .ps-big-v { font-size: 20px; line-height: 28px; } .ps-qr { flex-direction: column; align-items: flex-start; } } /* on paper the steps start a sheet of their own, and the first sheet keeps the big words */ @media print { .ps-part:has(.ps-steps) { break-before: page; page-break-before: always; } .ps-qr img { width: 1.6in; height: 1.6in; } .ps-step { padding: 4px 10px; } .ps-step-t { font-size: 14px; line-height: 19px; padding-top: 2px; } .ps-step-m { font-size: 13px; line-height: 18px; } .ps-step-n { width: 26px; height: 26px; font-size: 15px; } .ps-step-img { max-height: 1.3in; margin-top: 3px; } } /* on paper (the browser's own margins, about 0.4 inch): smaller words and tighter rows so a whole sheet fits one US Letter page */ @media print { .ps-print-page { margin: 0; max-width: none; padding: 0; } .ps-paper { font-size: 12px; line-height: 16px; } .ps-print .pr-head { padding-bottom: 4px; margin-bottom: 8px; border-bottom-width: 2px; } .ps-print .pr-head .pr-logo { height: 32px; } .ps-print .pr-head .pr-title { margin-top: 2px; font-size: 19px; line-height: 24px; } .ps-print .pr-head .pr-meta { font-size: 12px; line-height: 16px; } .ps-part { margin-bottom: 6px; } .ps-part-title { padding: 2px 8px; font-size: 12px; line-height: 17px; } .ps-part-hint { font-size: 11px; } .ps-fact { padding: 2px 8px 3px; } .ps-fact-l { font-size: 10px; line-height: 13px; } .ps-choices th, .ps-choices td { padding: 2px 8px; } .ps-choices th { font-size: 12px; } .ps-grid th, .ps-grid td { padding: 2px 5px; } .ps-grid thead th { font-size: 11px; line-height: 14px; } .ps-grid tbody th { font-size: 12px; } .ps-box { width: 13px; height: 13px; font-size: 11px; } .ps-note { min-height: 48px; } .ps-lines { padding: 2px 10px 4px; } .ps-line-ink { min-height: 20px; } .ps-line-l { padding-top: 1px; font-size: 11px; line-height: 14px; } .ps-grid-wrap { overflow: visible; } } /* A ROSTER TO READ AT A GLANCE (page_spec.py "table"; Resident Cheat Sheets, Scott 10/16/2026: one page per house, "look very nice when printed and laminated", lightly shaded alternating rows, a clear Hospice tag, the food allergy in red and bold). Portrait, inside the browser's own margins like every other printout (Scott, 10/16/2026: the landscape sheet ran to the paper's edges). DESIGN-PENDING: DP-107 (closest rule: PR-FRAME / PR-PRINT, the frame only). */ .ps-part:has(> .ps-tb) { overflow-x: auto; } table.ps-tb { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; font-size: 13px; line-height: 17px; } .ps-tb thead th { padding: 6px 6px; text-align: left; vertical-align: bottom; font-size: 11px; line-height: 14px; white-space: pre-line; font-weight: 800; letter-spacing: .02em; color: var(--surface); background: var(--teal-700); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-tb td { padding: 6px 6px; vertical-align: middle; border-bottom: 1px solid var(--line-strong); overflow-wrap: break-word; } .ps-tb td + td, .ps-tb th + th { border-left: 1px solid var(--line-strong); } .ps-tb thead th + th { border-left-color: var(--teal-600); } .ps-tb tbody tr:last-child td { border-bottom: 0; } .ps-tb tbody tr:nth-child(even) td { background: var(--teal-50); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-tb td:nth-child(1), .ps-tb td:nth-child(2), .ps-tb th:nth-child(1), .ps-tb th:nth-child(2) { text-align: center; } .ps-tb td:nth-child(1) { font-size: 16px; font-weight: 900; color: var(--teal-700); } .ps-tb td:nth-child(2) { font-weight: 700; color: var(--text-muted); } .ps-tb td:nth-child(3) { font-weight: 800; color: var(--text); } /* a sideways sheet ("paper": "landscape" -- the Activity Calendar, Scott 10/19/2026: "a slick, elegant design"): the page in a fine double frame, the logo over the house name, WEEKLY ACTIVITY SCHEDULE in spaced capitals between gold rules, a teal row of days, a tinted column of times, every day's box alike and tall, the bold ones naming a therapist, the note in quiet italics at the foot (no company name under it: Scott, 10/19/2026). */ .ps-landscape .ps-print-page { max-width: 1040px; } .ps-landscape .ps-paper { position: relative; padding: 26px 30px 26px; border: 2px solid var(--teal-700); border-radius: 10px; box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 6px var(--gold-300); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-landscape .pr-head { border: 0; padding: 0; margin: 0 0 16px; } .ps-landscape .pr-head .pr-logo { height: 66px; } .ps-landscape .pr-head .pr-title { margin: 8px 0 4px; font-size: 28px; line-height: 34px; font-weight: 900; letter-spacing: .01em; color: var(--teal-800); } .ps-landscape .pr-head .pr-meta { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-700); } .ps-landscape .pr-head .pr-meta::before, .ps-landscape .pr-head .pr-meta::after { content: ""; width: 90px; border-top: 1px solid var(--gold-400); } .ps-landscape .ps-part { border: 0; border-radius: 0; margin: 0; overflow: visible; } .ps-landscape .ps-part-title { display: none; } .ps-landscape .ps-tb { min-width: 0; outline: 1px solid var(--teal-200); } .ps-landscape .ps-tb thead th { padding: 9px 6px; background: var(--teal-700); color: var(--surface); text-align: center; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; border-color: var(--teal-600); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-landscape .ps-tb td { height: 1.05in; padding: 8px 10px; text-align: center; font-size: 14px; line-height: 19px; font-weight: 400; color: var(--text); background: var(--surface); border-color: var(--teal-100); } .ps-landscape .ps-tb tbody tr:nth-child(even) td { background: var(--surface); } .ps-landscape .ps-tb td strong { font-weight: 800; color: var(--teal-900); } .ps-landscape .ps-tb td:nth-child(1), .ps-landscape .ps-tb tbody tr:nth-child(even) td:nth-child(1) { background: var(--teal-50); font-size: 15px; font-weight: 900; color: var(--teal-700); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ps-landscape .ps-tb td:nth-child(2), .ps-landscape .ps-tb td:nth-child(3) { font-weight: 400; color: var(--text); } .ps-landscape #staff-note { margin: 16px auto 0; max-width: 86%; } .ps-landscape #staff-note .ps-plain { padding: 12px 0 0; border-top: 1px solid var(--gold-300); text-align: center; font-size: 13px; line-height: 19px; font-style: italic; color: var(--text-muted); } .ps-landscape .ps-plain p:first-child { font-weight: 400; margin-bottom: 0; } @media print { /* the frame fills the sheet (8.5in less the 0.4in margins, room left for the practice site's banner), the note at its foot */ .ps-landscape .ps-paper { display: flex; flex-direction: column; box-sizing: border-box; min-height: 7.1in; padding: 18px 24px 20px; } .ps-landscape #staff-note { margin-top: auto; padding-top: 14px; } .ps-landscape.ps-print .pr-head { margin-bottom: 12px; padding: 0; border: 0; } .ps-landscape.ps-print .pr-head .pr-logo { height: 54px; } .ps-landscape.ps-print .pr-head .pr-title { font-size: 24px; line-height: 30px; } .ps-landscape.ps-print .pr-head .pr-meta { font-size: 11px; line-height: 14px; } .ps-landscape .ps-tb td { height: 1.2in; font-size: 13px; line-height: 17px; } } /* the Activity Calendar's grid on screen: the time, then seven days of the same width, then the trash */ /* (the boxes-that-save-themselves rules in tables.css are sized for the Cheat Sheets' columns) */ table.ds-table.ac-grid:has(.ps-live) td { min-width: 140px; width: 13%; } table.ds-table.ac-grid:has(.ps-live) td:first-child { min-width: 96px; width: 96px; } table.ds-table.ac-grid:has(.ps-live) td:last-child { min-width: 44px; width: 44px; } table.ds-table.ac-grid:has(.ps-live) td:nth-child(n) .ps-live { min-width: 0; width: auto; } .ps-tb-alert { color: var(--red-700); font-weight: 900; } .ps-tb-tag { display: inline-block; margin-top: 2px; padding: 0 6px; border: 1px solid var(--violet-300); border-radius: 999px; background: var(--violet-50); color: var(--violet-700); font-size: 9px; line-height: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media print { .ps-part:has(> .ps-tb) { overflow: visible; } table.ps-tb { min-width: 0; font-size: 12.5px; line-height: 16px; } .ps-tb thead th { padding: 5px 4px; font-size: 10px; line-height: 12px; } .ps-tb td { padding: 10px 5px; } .ps-tb td:nth-child(1) { font-size: 16px; } table.ps-tb.ps-tb-dense { font-size: 12px; line-height: 15px; } .ps-tb-dense td { padding: 7px 5px; } .ps-tb-tag { font-size: 8px; line-height: 12px; padding: 0 4px; } }