/* ========================================================================== ONE SPACING SCALE FOR THE WHOLE SITE — 09/25/2026, ROUND R364. ⛔ SCOTT ASKED FOR SPACING TO BE STANDARDIZED AND PICKED `1A 2A 3A 4A` from `claude/SPACING-AUDIT-2026-09-25.md`, with the same instruction the button and heading rounds got, VERBATIM: "i don't want to do one page at a time, i want all the pages done at the same time, it takes too long to do one page at a time." ⚠️ WHAT THE AUDIT MEASURED ON 67 PAGES AT 1440px, 09/25/2026: - the room inside a card ran 10px → 41px, in nine different values - the gap between two sections ran 0px → 66px, in a dozen values - the gap between two form rows ran 9px → 114px - six email pages were capped at 820px with 352px of empty screen beside them, while 61 other pages filled the window - text boxes were 32, 36, 40 or 48px tall depending on the page ✅ HIS FOUR PICKS, AND THEY ARE THE ONLY NUMBERS IN THIS FILE: 1A 20px between sections, and between the page title and the first card 2A 16px of room inside a card, and below a section's band 3A 14px between form rows (a label to its own box stays 6px) 4A the email pages fill the window; the letter being written keeps a readable ~820px, and what it is about sits BESIDE it on a wide screen ⛔ THIS FILE IS SERVED LAST, AFTER `headings.css`, FOR THE SAME REASON THAT ONE IS SERVED AFTER `buttons.css`: the numbers it has to beat are spread across three older stylesheets at equal or lower weight, and source order is what settles a tie. ⛔ A SPACING NUMBER WRITTEN ANYWHERE ELSE IS A DEFECT, and `tests/spacing_standard_test.py` counts them. ⚠️ OUT OF SCOPE, BY SCOTT ON 09/25/2026: table row heights. The compact 41–49px rows stay exactly as they are. ========================================================================== */ /* ========================================================================== 1. THE PAGE FILLS THE WINDOW — 36px of gutter, and no cap. ⚠️ MEASURED: the Admin Manual stopped 122px from the right edge, the Meetings list 112px and the Staff Meeting Agenda 62px, each because the page had written its own width. Scott, 09/25/2026: "fill the screen". ========================================================================== */ main.container { /* ⛔ `!important` ON THE GUTTER ALONE. Scott, 09/25/2026: "fill the screen". MEASURED: the assessment set its own 14px at phone width and the Admin Manual, the Meetings list and the agenda each wrote their own width a different way. A page does not get to choose how far from the edge it starts. */ max-width: none !important; padding-left: var(--page-gutter) !important; padding-right: var(--page-gutter) !important; margin-left: 0; margin-right: 0; } /* ⛔ THE THREE PAGES THAT WROTE THEIR OWN WIDTH. Each says it a different way -- a max-width, an auto margin, a wider padding -- so each is named. */ main[data-page="admin-manual"], main[data-page="meetings"], main[data-page="meeting"], main[data-page="care-specifics"] { max-width: none; padding-left: var(--page-gutter); padding-right: var(--page-gutter); } /* ========================================================================== 2. 1A — 20px BETWEEN SECTIONS. ⛔ THE GAP BELONGS TO THE CARD ABOVE IT, NEVER TO THE ONE BELOW. Writing it both ways is how the audit found 32px and 40px gaps that nobody had asked for: two rules each adding their own half. ⚠️ AND A PAGE WRAPS ITS SECTIONS IN A BARE DIV MORE OFTEN THAN IT DOES NOT (`
`), so the second level is named too. ========================================================================== */ /* ⛔ EVERY TOP-LEVEL BLOCK, NOT A LIST OF THE ONES SOMEBODY REMEMBERED. The audit found 0px, 4px, 8px, 12px, 16px, 18px, 22px, 26px, 28px, 32px and 66px gaps, and most of them were between a card and something that is not a card -- a title, a toolbar, a paragraph, a bare wrapper a page happens to use. ⚠️ A NAMED LIST IS HOW THIS DRIFTS BACK: the next page that wraps its sections in a new class is not in it. */ /* ⛔ AND THE NUMBER IS `!important`, WHICH NOTHING ELSE IN THIS FILE IS. The gap between two sections is the decision itself, and MEASURED 09/25/2026 it was being set by a dozen page rules that each out-weighed a plain one: `p.muted.small` beats `main.container > *` on specificity alone, so the Audit log kept 12.8px; `.pb-type-panel` kept the Playbook at 8px. ⚠️ Out-specifying them one at a time is how the next page gets missed -- the same argument the heading round's straddle rests on. */ main.container > * { margin-top: 0 !important; margin-bottom: var(--section-gap) !important; } /* ...and a bare wrapper is not a section: its children are. ⛔ EXCEPT WHERE THE WRAPPER IS A ROW. ⚠️ SCOTT, 09/28/2026, of the Owner Dashboard: "last tile is bigger than the others". MEASURED: `.ds-tiles` is a `div` under `main.container`, so its four tiles were each given 20px of SECTION GAP underneath -- and the `:last-child` rule below then took that margin off the fourth one alone. The grid row is sized by the three tiles WITH a margin (88 + 20 = 108), and the fourth, having none, stretched to fill it. One tile 20px taller than its neighbours, from a rule about the space between sections. ⛔ A ROW OF TILES IS ONE BLOCK, NOT FOUR STACKED ONES. The same is true of any grid or flex row a page uses to lay things out side by side, which is why this is `display`-based and not a list of class names -- a list is how this drifts back the moment somebody adds another row. */ main.container > div:not(.ds-section):not(.panel):not(.card):not(.ds-card):not(.ds-tiles):not(.ds-toolbar):not(.todo-line):not(.action-grid):not(.ds-form-actions) > * { margin-top: 0 !important; margin-bottom: var(--section-gap) !important; } /* ⚠️ AND THE SAME FAULT, ON THE SAME DAY'S RULE, ON THE ADMINISTRATOR DASHBOARD. Scott, 09/29/2026: "Administrator dashboard has the fourth tile bigger than the others." MEASURED: `.action-grid` is a div of four cards under `main.container`; three carried the 20px section gap and the fourth, as `:last-child`, did not -- 93px beside 113px. */ /* ⚠️ AND AGAIN, 10/01/2026, Care Plans Due: "the icon next to no care plans due is not aligned with the wording". MEASURED: `.todo-line` is a flex row under `main.container`; its icon carried the 20px section gap and its words, as `:last-child`, did not -- the icon sat 11px high. */ /* ⚠️ AND 10/03/2026, the Incident Report review page: its actions row (Complete review, Save as draft, Delete) sits straight under `main.container`; the first two buttons carried the 20px section gap and Delete, as `:last-child`, did not -- it sat 10px lower than the other two. */ main.container > .todo-line > *, main.container > .ds-tiles > *, main.container > .ds-toolbar > *, main.container > .action-grid > *, main.container > .ds-form-actions > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* ⛔ AND WHERE THE PAGE STACKS ITS SECTIONS WITH `gap` RATHER THAN MARGINS, THE GAP IS THE SAME NUMBER. MEASURED: the Residents page read 28px between its search box and the first house with BOTH margins at zero -- the number was the flex container's own `gap` and no margin rule could have touched it. */ main.container, main.container > div:not(.ds-section):not(.panel):not(.card):not(.ds-card):not(.ds-form-actions) { row-gap: var(--section-gap); } /* ...and the last one owes the page nothing. */ main.container > :last-child, main.container > div:not(.ds-section):not(.panel):not(.card):not(.ds-card):not(.ds-tiles):not(.ds-toolbar):not(.todo-line):not(.action-grid):not(.ds-form-actions) > :last-child { margin-bottom: 0 !important; } /* ⛔ AND A CARD'S OWN CHILDREN ARE NOT SECTIONS -- that is section 3 below, and without this exclusion the two rules fight over every paragraph. */ /* ========================================================================== 3. 2A — 16px OF ROOM INSIDE A CARD. ⚠️ MEASURED: 41px on the SEO, Financials and RingCentral pages, 25px on the nine profile tabs, 39px on the Move-In and Move-Out tabs, 17px on the Playbook. All of it written page by page, none of it decided. ========================================================================== */ /* ⛔ THE ROOM IS THE CHILDREN'S MARGIN, NOT THE CARD'S PADDING, AND THAT IS NOT A STYLE CHOICE. MEASURED 09/25/2026: of the cards on this site, some pad themselves, some pad an inner wrapper, and some pad neither and let each child do it -- so a rule that pads the card doubled the room on a third of the pages and did nothing on another third. ⚠️ Asking every child for the same margin is the one form that lands identically on all three. */ main.container .ds-section, main.container .panel, main.container .card, main.container .ds-card { padding: 0; } /* ⛔ `!important`, AND THE BANDS, BODIES AND THE ONE SCROLLER ARE NAMED OUT OF IT RATHER THAN OVERRIDDEN AFTER. MEASURED on the Care Plan tab: the Quick Actions row and the allergy form sat at the card's edge while every pair beside them was 12px in, because `body.ds-c .profile-panel form.allergy-form { margin: 0 }` out-weighs any plain rule -- and `tests/profile_quick_actions_band_test.py` read it as two columns on one page. The room inside a card is decision 2A; a page does not get a vote. */ main.container .ds-section:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .panel:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .card:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .ds-card:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body) { margin-left: var(--card-pad) !important; margin-right: var(--card-pad) !important; } /* ⛔ AND ONE MECHANISM INSIDE A CARD, NOT TWO. ⚠️ MEASURED on Call-Offs: the card stacks its content with `gap`, so a band that also carried 16px underneath put 28px between itself and the first row -- two rules each adding their own half, which is the same failure the section gap had. ✅ The gap goes to zero and every child carries its own 12px, so the space under anything is that thing's margin and nothing else. ⚠️ 12px, not 16: the room at the card's EDGE and the gap BETWEEN two things inside it are different numbers, and the audit's scale names both. */ main.container .ds-section, main.container .panel, main.container .card, main.container .ds-card { row-gap: 0; } main.container .ds-section:not(form) > * + *, main.container .panel:not(form) > * + *, main.container .card:not(form) > * + *, main.container .ds-card:not(form) > * + * { margin-top: var(--inside-gap); } /* ⚠️ AND THE PROFILE'S TAB HEADING GETS THAT GAP WHETHER OR NOT SOMETHING SITS BEFORE IT. Scott, 09/29/2026: "The word contacts on the resident profile contacts page is not the same distance from the top of the section as the word Profile is from the top of it's section ... everyone from contacts on is not correct." MEASURED: Profile and Care Plan read 13px because the lock button is the card's first child and the heading its second; the seven tabs with no lock button read 1px (Contacts 3px). */ main.container .panel > .tab-heading:first-child, main.container .panel > .contacts-title-row:first-child { margin-top: var(--inside-gap); } /* ⚠️ A CARD THAT IS ITSELF THE FORM IS GOVERNED BY THE FORM GAP, NOT THE INSIDE GAP. MEASURED on the residency contract, which is one `
`: its rows took the row gap AND the card's inside gap AND the label's own 6px, and read 32px where 6px was meant. */ main.container form.panel > * + *, main.container form.card > * + * { margin-top: 0; } /* ⛔ AND A CARD THAT IS THE FORM PADS ITSELF INSTEAD OF MARGINING ITS ITEMS. MEASURED on the residency contract at 390px: its boxes are grid items sized to the card's FULL width, so a 12px left margin pushed each of them 11px past the card's right edge -- `tests/field_standard_test.py` caught it. ⚠️ Padding the form is the same 16px of room and the items size to what is left, which a margin cannot do. */ main.container form.panel, main.container form.card, main.container form.ds-section { /* ⚠️ ALL FOUR SIDES. The first cut padded left and right only, and the residency contract's first group title sat on the card's top edge (MEASURED in the form-field round's own screenshot, 09/25/2026). */ padding: var(--card-pad); } main.container form.panel > *, main.container form.card > *, main.container form.ds-section > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } /* ⛔ AND A TABLE THAT IS ASKED TO STEP IN MUST ALSO BE ASKED TO NARROW. MEASURED 09/25/2026: a `` inset by the card room is 100% of the CARD, so it ran 11-15px past its own card's right edge on Repairs, the Playbook, Call-Offs, Staff accounts and the To-do list -- `tests/field_standard_test.py` caught all five on a 390px screen. */ main.container .ds-section:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .panel:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .card:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body), main.container .ds-card:not(form) > *:not(.kv-section-head):not(.ds-section-head):not(.house-panel-header):not(.panel-header):not(h2:first-child):not(.wk-panel-scroll):not(.ds-section-body):not(.panel-body):not(.ds-card-body) { max-width: calc(100% - 2 * var(--card-pad)) !important; } /* ⚠️ EXCEPT THE ONE THING THAT RUNS EDGE TO EDGE ON PURPOSE: the Weekly Report's sideways scroller. `#weeks > .wk-panel-scroll` zeroes its own margins with `!important` so a table wider than any screen can be dragged; capping its width put a 32px step back in front of it (`tests/weekly_report_table_test.py`). */ main.container .panel > .wk-panel-scroll { max-width: none; } /* ⚠️ AND A TABLE INSIDE A CARD BODY STAYS INSIDE IT. MEASURED on the Owner Dashboard: the house table measured 1105px in a 1104px body -- one pixel of border rounding -- and `tests/dashboard_house_rows_test.py` reads that as a page that scrolls sideways. */ /* ⛔ A BODY THAT PADS ITSELF IS NOT ALSO MARGINED. `.ds-section-body` has always carried the room as padding, so the children's-margin rule above gave it 16px MORE -- 32px of room in a card that measured 16 at its edge, because the probe reads where the body starts, not where its table does. MEASURED on the Owner Dashboard: the house table lost 32px and its longest row then ran 1px past the body (`tests/dashboard_house_rows_test.py`). */ main.container .ds-section > .ds-section-body, main.container .panel > .panel-body, main.container .ds-card > .ds-card-body { margin-left: 0; margin-right: 0; max-width: none; padding: var(--inside-gap) var(--card-pad); } main.container .ds-section > table, main.container .panel > table, main.container .card > table, main.container .ds-card > table { width: calc(100% - 2 * var(--card-pad)); } /* ⛔ A BAND RUNS EDGE TO EDGE. That is decision 1A of the heading round of the same day, and insetting it here would undo it. ⚠️ The Level 2 pill is NOT in this list: it carries its own 14px inset from `headings.css`, said there with `!important` because where it sits is that round's decision. */ main.container .ds-section > .ds-section-head, main.container .panel > .house-panel-header, main.container .panel > .panel-header, main.container .panel > h2:first-child, main.container .kv-section-head.kv-band.ds-hband { margin-left: 0; margin-right: 0; } /* ⛔ AND THE GAP UNDER A BAND IS ONE NUMBER, SAID IN ONE PLACE. MEASURED on Call-Offs: the band carried 12px of its own underneath and the row below it carried 16px, and the page read 28. ⚠️ AND FIXING IT ON THE CHILD IS HOW IT CAME BACK THE OTHER WAY -- the Playbook's bands then read 0, because there the gap had always been the band's. ✅ So the gap belongs to the BAND, which is the same rule the section gap follows: the space under a thing belongs to the thing above it. ⛔ ONLY UNDERNEATH -- the air ABOVE a band belongs to the page, and zeroing that stripped 16px off every band on Repairs & Maintenance, the exact thing Scott reported on 09/22/2026. */ /* ⛔ AND A BAND THAT IS ITS CARD'S FIRST CHILD SITS FLUSH WITH THE TOP. ⚠️ SCOTT, 09/28/2026, WITH TWO SCREENSHOTS OF REPAIRS & MAINTENANCE among a batch of "spacing is off in many of these". MEASURED that day, the top of the first band in a card, across the site: Owner Dashboard, Projections 0px Call-Offs, To-do 1px (the card's own outline) Licenses 14px Playbook 15px Repairs & Maintenance 17px FIVE ANSWERS. The last three leave a white ledge above the band with the card's rounded corners showing through it, which reads as a mistake because it is one. ⚠️ AND THE MARGIN IS LEFT OVER FROM BEFORE THIS FILE EXISTED. headings.css records why it was added -- Scott, 09/22/2026: the bands were "pushed way to the top of the section with no white space above it". That white space is the gap BETWEEN sections, and since 09/25/2026 it is `--section-gap`, set here, 20px, on every page. A second copy of it inside the card is the ledge. ✅ Decision 1A is the Owner Dashboard's band: it starts where its card starts. */ /* ⛔ AND FLUSH AT THE SIDES TOO, FOR THE SAME REASON. MEASURED the same day: the first band's left inset was 0px on the Owner Dashboard and Projections, 1px on Call-Offs and the To-do page, and 16px on Repairs' house cards, the Playbook's type panels and Licenses -- so a band could start at the card's edge on one page and 16px inside it on the next. A band is the card's own top row; it starts where the card starts. */ main.container .panel > .kv-section-head.kv-band:first-child, main.container .ds-section > .kv-section-head.kv-band:first-child, main.container .panel > .house-panel-header:first-child, main.container .panel > h2:first-child, main.container .ds-section > .ds-section-head:first-child, /* ⛔ AND A FOLD'S OWN BAND, WHICH IS ONE LEVEL DEEPER. A collapsible section is `
`, so the band's parent is the summary and none of the selectors above reach it. ⚠️ THIS IS SCOTT'S OUTSTANDING "COMPLETED HISTORY ALIGNMENT" FROM 09/25/2026, which an earlier round could not reproduce and asked him for a window size about. It is not a width at all: on Repairs & Maintenance six bands sat at 0px above their cards and "Completed history" at 16px, so it alone stood a ledge lower than everything else on the page. */ main.container summary > .kv-section-head.kv-band:first-child { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } main.container .ds-section > .ds-section-head, main.container .panel > .house-panel-header, main.container .panel > .panel-header, main.container .panel > h2:first-child, main.container .panel > .kv-section-head.kv-band.ds-hband { margin-bottom: var(--card-pad); } /* ⛔ BUT A CLOSED FOLD HAS NOTHING UNDER ITS BAND, so that 16px is a white strip hanging off the bottom of the heading (MEASURED 10/03/2026 on the Weekly Report's "How to keep payroll costs low": a 52px band in a 68px card). Closed, the band IS the card -- the same answer Wage Reduction's own folds already had (headings.css, `details.wr-panel:not([open])`). */ main.container details.ds-section-fold:not([open]) > .ds-section-head { margin-bottom: 0; } /* ⛔ AND CLOSED, THE BAND OWNS ALL FOUR CORNERS, AND NOTHING ELSE IS DRAWN. Scott, 10/03/2026, of Repairs & Maintenance's "Completed history": a white strip under the dark band when it is shut. The band's own bottom corners are square (it is the top row of an open card), so a closed fold relied on the card's clip to round them, and on the browser to hide the body; either one failing shows the white card under the band. Neither is left to chance. */ main.container details.ds-section-fold:not([open]) > .ds-section-head { border-radius: inherit; } main.container details.ds-section-fold:not([open]) > .ds-section-body { display: none; } main.container details.ds-section-fold:not([open]) { padding-bottom: 0; min-height: 0; } main.container .ds-section > .ds-section-head + *, main.container .panel > .house-panel-header + *, main.container .panel > .panel-header + *, main.container .panel > h2:first-child + *, main.container .panel > .kv-section-head.kv-band.ds-hband + * { margin-top: 0; } /* ⛔ AND THE ROOM ABOVE AND BELOW THE CARD'S CONTENT IS THE SAME 16px. */ main.container .ds-section > :last-child, main.container .panel > :last-child, main.container .card > :last-child, main.container .ds-card > :last-child { margin-bottom: var(--card-pad); } /* ========================================================================== 4. 3A — 14px BETWEEN FORM ROWS, 6px FROM A LABEL TO ITS OWN BOX. ⚠️ MEASURED: 39px on Add a resident, Edit resident, Staff accounts and My profile; 54, 80 and 104px on the residency contract; 34px on the email pages; 46px on the Groceries upload. ========================================================================== */ /* ⛔ A ROW IS "THE LAST BOX TO THE NEXT LABEL", AND THAT IS THE 14px. The 6px is the label to its OWN box. ⚠️ MEASURED: the site's forms do not wrap a row in anything -- `form.stack-form` is a grid of alternating labels and boxes -- so one `gap` would have to serve both distances and every form on the site read 6.4px in both places, which is why a label looked as attached to the box above it as to its own. ✅ The gap is the ROW gap; the label gives back the difference. */ main.container .ds-form, main.container form.stack-form, main.container .ds-form-grid, main.container .wc-form { display: grid; row-gap: var(--form-gap); } main.container .ds-form > label, main.container form.stack-form > label, main.container .ds-form-grid > label { /* ⚠️ AND THE TOP MARGIN GOES. MEASURED: the labels carried 8px of their own, which the row gap then added to -- 22px above a label and 6px below it, when the whole point of 3A is that a label belongs to the box UNDER it. */ /* ⛔ `!important` for the same reason the row gap is the decision: MEASURED on the residency contract, whose labels set their own 6px bottom margin two classes deep and read 20px above every box. */ margin-top: 0 !important; margin-bottom: calc(var(--tight-gap) - var(--form-gap)) !important; } main.container .ds-field { display: grid; row-gap: var(--tight-gap); } main.container .ds-field > label, main.container .ds-field > .ds-label { margin: 0; } main.container .ds-form > .ds-field, main.container .ds-form > .ds-row { margin: 0; } /* ⛔ AND ON A SCREEN, SHORT FIELDS STAND TWO ACROSS. ⚠️ MEASURED 09/25/2026: Add a resident, Edit resident, Staff accounts and My profile were one column of nine boxes, each 820px wide for a first name -- half a screen of white space beside them and a page you have to scroll. ⛔ AND IT IS `columns`, NOT A TWO-COLUMN GRID, FOR A REASON: these forms are a flat run of `