`, and Bootstrap's `.py-4` is `padding-bottom: 1.5rem !important` — important beats non-important whatever the specificity, so `main` computed 24px, not 88px, on every page of the app. Measured with a geometric intersection test: the dock pill covered real table cells, including the money column ("$500.00" on /clients/, "$1,010.00" on /finance/). The comment above described a behaviour the stylesheet never had. THIRD instance of this exact trap in one day — see the landing page's `main{padding:0}` and `body{background}`. */ main.container-fluid, main.container { padding-bottom: 5.5rem !important; } /* The pill sits on the page too, so it gets the same treatment: a control floating over content should never be darker than the content. */ [data-bs-theme="dark"] .dock__pill:not(.dock__pill--wide) { background: color-mix(in srgb, var(--bs-body-bg) 84%, #fff 16%); } /* `:not(--wide)` is load-bearing. Without it this rule outranks `.dock__pill--wide` (attribute + class beats class, and it is later in the file), so it replaced the wide pill's GOLD background while leaving its ink `color: #0b0b0d` behind: #0b0b0d on the lifted grey measures 2.14:1 against a 4.5:1 floor, on the one control that is on every page of the app. The pill had been rendering grey instead of gold since the lift was added, in dark mode only — which is the default theme. */ /* Notification icons: drawn from the sprite in templates/_icons.html, sized to sit on the first line of the title. They were emoji until 2026-08-06 and rendered as missing-glyph boxes wherever a colour emoji font was absent. */ .notif-icon { width: 20px; height: 20px; flex: 0 0 20px; margin-top: .12rem; color: var(--bs-secondary-color); } .notif-unread .notif-icon { color: var(--brand-primary); } /* UNREAD, in the one hue. Was a Bootstrap-blue background wash on both the dock feed and the notifications page — a second hue, and a fill where the lineage uses a rule. A gold edge marks the row instead. */ .notif-unread { border-left: 2px solid var(--brand-primary); } .notif-unread .fw-semibold { color: var(--bs-emphasis-color); } .dock__scroll { max-height: min(42vh, 21rem); overflow-y: auto; } /* Installed to the home screen, the home indicator owns the bottom strip — lift clear of it. */ html.pwa-standalone .dockstack { bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px)); } /* INSTALLED APP: clear the status bar and the rounded corners. Every safe-area inset in this file was a BOTTOM one — nothing ever reserved the TOP, so in the installed app the navbar painted underneath the clock and signal icons. It is only visible once the app is on a home screen, which is why months of browser testing never showed it. The side insets matter in landscape, where the notch eats the left or right edge. */ html.pwa-standalone .navbar { padding-top: calc(.35rem + env(safe-area-inset-top, 0px)); } html.pwa-standalone body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* NO PAGE MAY SCROLL SIDEWAYS. DESIGN.md states it as a rule and the suite pins it at one text size, but the installed app runs at whatever scale WebKit's per-site zoom left behind — and at 1.25x the dashboard pushed 13px past the edge, at 1.5x 60px. A table that cannot fit must scroll INSIDE its own container; the page itself never does. `clip` rather than `hidden` because `hidden` on a scroll container silently kills position:sticky inside it. */ html { overflow-x: clip; } body { overflow-x: clip; } /* The setup checklist, PINNED at the top of the feed. Tinted and sticky so it reads as "this stays until you deal with it" rather than as the oldest notification in the list. */ .notif-pinned { position: sticky; top: 0; z-index: 2; background: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-body-bg)); border-bottom: 1px solid var(--bs-border-color); } .notif-pinned .progress { height: 5px; } .notif-pinned__steps { list-style: none; margin: 0; padding: 0; } .notif-pinned__steps li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; } .notif-pinned__done summary { cursor: pointer; } @media (max-width: 575.98px) { .dockstack { right: calc(1.1rem + env(safe-area-inset-right, 0px)); bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); width: min(19rem, calc(100vw - 2.2rem)); } .dock__panel { max-height: 42vh; } .dock__scroll { max-height: 36vh; } /* The label stays on a phone: it is what gives the button its width, and width is what makes it hittable. (It used to be hidden here, which is how the button ended up as a small circle tucked into the screen's rounded corner.) */ .dock__pill--wide { min-height: 3.25rem; padding: 0 1.1rem; font-size: .875rem; } } /* The × on a widget must stay clickable in EDIT MODE, where you actually need it. The drag pad is inset only 15%/10% and sits at z-index 3, so on a short stat card it lands directly over the button — the one control edit mode exists for was the one the handle swallowed. Raised above the pad, and given a real touch target: it is a 1.15rem glyph, which is not a tap area. */ .dash-editing #dash-grid [data-mod] .dash-del { position: relative; z-index: 4; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; min-height: 1.9rem; border-radius: 50%; background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent); box-shadow: 0 1px 5px rgba(0, 0, 0, .2); } .dash-editing #dash-grid [data-mod] .dash-del:hover { background: color-mix(in srgb, var(--bs-danger) 16%, var(--bs-body-bg)); } /* BACK / UP control — one step toward the dashboard from wherever you are (services/navigation). A BREADCRUMB, not a button: the first version was a bordered pill on its own row, which took a full line of vertical space on every page and competed with the page heading and its action buttons for attention. It is a wayfinding hint, so it reads like one — small, quiet, tucked above the title — while keeping a 44px tap target through padding rather than bulk. */ .app-back { display: inline-flex; align-items: center; gap: .15rem; /* Small to look at, generous to hit: the padding carries the touch target (~40px) and the negative margins take that space back out of the layout, so it still reads as a quiet line above the title rather than a button. Making it visually smaller shrank the target to 29px, which the check caught. */ margin: -.7rem 0 -.1rem -.45rem; padding: .85rem .6rem .85rem .45rem; color: var(--bs-secondary-color); text-decoration: none; font-size: .8125rem; font-weight: 600; line-height: 1; } .app-back:hover { color: var(--brand-primary); } .app-back__chev { font-size: 1.05rem; line-height: .8; margin-top: -.08rem; } /* PAGE HEADER ROWS ON A PHONE. Nearly every page opens with a `d-flex justify-content-between` holding the title and its action buttons. With no wrap the two fight over ~390px: the title breaks mid-word and the buttons stack into a narrow column beside it. Letting the row wrap puts the buttons on their own line, where they are both readable and hittable. Scoped to direct children of

so it only ever affects page headers, not the many flex rows inside cards and tables. */ @media (max-width: 575.98px) { main > .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .5rem; } main > .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; } } /* --------------------------------------------------------------------------------------------- LINE ITEMS ON A PHONE — the builder's worst defect, measured before the fix: an 8-column table rendered 545px of content inside a 337px container at 390px wide, so Unit Rate (a 35px-wide input), Tax, Line Total and Delete all sat behind a NESTED horizontal scroll. The price — the entire reason the document exists — was off-screen, and the delete button's right edge was at x=567 in a 390px viewport. The fix is CSS-only on purpose. The markup stays a real , so every selector in builder.js, recomputeRow(), and collect() are untouched — a presentation change cannot disturb the tax or discount arithmetic, which mirrors the server's recompute_totals. Below lg each row becomes a card: description on its own line, quantities paired, the rate and its total paired, and the money right-aligned and bold. Labels come from `data-label`, set in addRow(), because the is hidden here and an unlabelled column is unusable stacked. --------------------------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* The wrapper's horizontal scroll is what hid the price. Nothing overflows once stacked. */ .table-responsive:has(#itemsTable) { overflow-x: visible; } #itemsTable, #itemsTable tbody, #itemsTable td { display: block; width: auto; } #itemsTable thead { display: none; } /* CSS GRID, not inline-block. The first attempt paired fields with inline-block widths and they each took their own line: whitespace between inline-blocks plus a margin pushed the pair past 100%. Grid has no whitespace and no width arithmetic to get wrong. */ #itemsTable tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .6rem; align-items: end; border: 1px solid rgba(255,255,255,.14); border-radius: .6rem; /* control radius, per DESIGN.md Shapes */ padding: .6rem; padding-right: 3.2rem; /* clear of the delete button in the corner */ margin-bottom: .75rem; position: relative; } [data-bs-theme="light"] #itemsTable tbody tr { border-color: rgba(0,0,0,.14); } #itemsTable td { border: 0; padding: 0; } /* The label a hidden can no longer provide. */ #itemsTable td[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; opacity: .7; margin-bottom: .1rem; } /* Description and the money each own a full row; the four quantity fields pair up. */ #itemsTable td[data-label="Description"] { grid-column: 1 / -1; } #itemsTable td[data-label="Line Total"] { grid-column: 1 / -1; } #itemsTable td[data-label="Line Total"] .li-total { font-weight: 700; font-size: 1.05rem; } /* Tax is a toggle, not a value: its label sits beside it rather than above. */ #itemsTable td.li-taxcell { text-align: left !important; display: flex; align-items: center; gap: .5rem; } #itemsTable td.li-taxcell::before { margin-bottom: 0; } /* A 16px checkbox was the smallest target on the page. 28px plus the cell's own padding gives a thumb something to land on; a literal 44px checkbox looks like a button. */ #itemsTable td.li-taxcell .li-tax { width: 1.75rem; height: 1.75rem; margin: 0; flex: 0 0 auto; } /* Delete was 26x31 next to the fields a thumb was hunting for. Move it to the card's own corner and give it a real target. */ #itemsTable td.li-delcell { position: absolute; top: .5rem; right: .5rem; padding: 0; } #itemsTable td.li-delcell .li-del { min-width: 44px; min-height: 44px; line-height: 1; font-size: 1.1rem; } /* THE THUMB RULE: every control a finger lands on clears 44px. */ #itemsTable .form-control, #itemsTable .form-control-sm { min-height: 44px; font-size: 1rem; } /* Recovered-work offer. Restore and Discard are a one-shot, irreversible-feeling pair, and the same rule applies to them: a 31px btn-sm for "give me back the invoice I just lost" is the wrong place to make someone aim. Full width so the two choices can't be mis-tapped for each other, Restore first because it is what the banner is for. */ #draftBanner .btn { min-height: 44px; flex: 1 1 100%; } /* ---- The builder's phone action bar ------------------------------------------------------ The running total and Save, pinned to the thumb zone. Above the content (1030) but BELOW the dock stack (1035), and the dock is lifted clear of it below — a floating pill parked on top of the Save button is the obvious way to get this wrong. */ #builderBar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); box-shadow: 0 -.4rem 1rem rgba(0, 0, 0, .25); } #builderBar .bb-total { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } #builderBar .bb-total__label { font-size: .6875rem; opacity: .7; } #builderBar #tTotalBar { font-size: 1.3rem; font-weight: 700; } #builderBar .btn { margin-left: auto; min-height: 48px; padding-inline: 1.1rem; flex: 0 0 auto; } /* The bar is fixed, so it covers whatever the page ends with unless the page makes room. `!important` because

carries Bootstrap's `.py-4`, and every Bootstrap spacing utility is declared !important — a plain rule here loses however specific it is, which is exactly what happened: the padding read 24px and the bar sat across the last card. */ body.has-builder-bar main { padding-bottom: 6rem !important; } /* Lift the floating dock clear of the bar. Equal specificity to the PWA-standalone rule above, and this one comes later, so it wins there too — deliberately: 6rem is the larger offset, so the dock stays clear either way. */ body.has-builder-bar .dockstack { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); } } /* Desktop keeps the sidebar, where Totals and Save are already in view. */ @media (min-width: 992px) { #builderBar { display: none; } } /* ------------------------------------------------------------------------------------------ .text-secondary is MUTED TEXT here, in all 597 places we use it. Bootstrap 5.3 disagrees, and the difference fails WCAG AA across the whole app in dark mode. 5.3 kept two variables whose names invite exactly this mistake: --bs-secondary-rgb the BRAND grey #6c757d, identical in both themes --bs-secondary-color the MUTED TEXT colour, theme-aware `.text-secondary` reads the first. The theme-aware utility is `.text-body-secondary`, which 5.3 introduced when it renamed `.text-muted` — so a class that had meant "muted text" for years quietly became a brand-colour utility, and nothing announced it. Measured on a real page before this rule: #6c757d on the dark card surface #212529 is 3.29:1, against the 4.5:1 AA needs for body text — and it was carrying the client's own rep name and contact details. Bootstrap already computes a passing value; nothing was reading it. One line rather than rewriting 597 call sites across 81 templates, because "muted text" is what every one of them means. If you are tempted to delete this and switch the templates to .text-body-secondary, that is the idiomatic fix and it is welcome — but do all 597 at once, because half a migration leaves the other half failing contrast with nothing to notice it. */ .text-secondary { color: var(--bs-secondary-color) !important; } /* THE SAME TRAP, ON THE MONEY. `.text-success` and `.text-danger` read --bs-success/--bs-danger, which are fixed brand colours tuned for white: #198754 and #dc3545 measure 3.4:1 on the dark ledger surface #212529, against the 4.5:1 AA needs for body text. That is not a decorative failure. These two classes colour the AMOUNT on every row of the finance ledger and the dashboard's transactions widget — the +$1,035.00 and the −$200.00 — so the least readable text on a dark screen was the figure the product exists to report. 23 of them on /finance/ alone, measured on the rendered page. Bootstrap 5.3 already computes passing, theme-aware values for exactly this (--bs-*-text-emphasis: #75b798 / #ea868f in dark = 6.6:1 and 6.1:1); as with .text-secondary above, nothing was reading them. Dark only: on the light theme the originals already pass, and the emphasis pair would be too pale. */ [data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; } [data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; } /* ============================================================================ THE LEDGER — the app's hard-ruled surface, per DESIGN.md's lineage section. DNA Lounge -> Vorperian Cyberarts -> BatBill. What we inherit is STRUCTURE: a black field, square corners, rules and filled uppercase section bars, and density. What we leave behind is the grandparent's uniform 1px harshness and its several competing hues — here rules carry hierarchy (a section bar is not a row divider) and there is exactly ONE hue, Vorperian gold. These are primitives, not page styles: the documents list is the first surface converted, and clients/finance follow onto the same classes. ========================================================================= */ .ledger { border: 1px solid var(--bs-border-color); border-radius: 0; /* square by rule — the rounded Bootstrap card is the single biggest reason the app read as generic SaaS */ box-shadow: none; background: var(--bs-body-bg); } /* The filled section bar. Structure is drawn, never floated: a solid band with a gold rule on top, which is where the hierarchy lives. Gold is the marker, not the fill — a full gold band would spend the one hue on furniture. */ .ledger__bar { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .5rem .85rem; background: var(--brand-secondary); color: #fff; border-bottom: 1px solid var(--bs-border-color); /* The TRIPLE RULE — three gold lines with black gaps, off the technician jacket's collar and cuffs (DESIGN.md). This is the ambient band: it says "ours". The hazard diagonal below is its rare sibling and says "this can cost you". Same family, never confusable. */ border-top: 7px solid transparent; border-image: repeating-linear-gradient( to bottom, var(--brand-primary) 0 1px, var(--brand-secondary) 1px 3px, var(--brand-primary) 3px 4px, var(--brand-secondary) 4px 6px, var(--brand-primary) 6px 7px) 7; font-family: 'Orbitron', system-ui, -apple-system, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; /* 13px — above the 11px functional floor */ line-height: 1.3; } .ledger__bar-note { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .8125rem; color: rgba(255,255,255,.72); } .ledger__bar-note strong { color: var(--brand-primary); font-weight: 700; } /* Controls that sit INSIDE the bar. The bar is dark in BOTH themes, so the theme-mapped outline buttons (dark-on-light in light mode) would vanish on it. Buttons in a bar are light-on-dark by construction, and stay in the body font (The Buttons Are Not Signage Rule — the bar shouts, its controls don't). */ .ledger__bar .btn { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: rgba(255, 255, 255, .7); --bs-btn-active-color: var(--brand-secondary); --bs-btn-active-bg: #fff; font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; } /* ---- The hazard band ------------------------------------------------------ DNA Lounge's actual signature, per the owner's photographs (DESIGN.md, "warning signs and stanchions"): diagonal stripes running the full width of a sign or strung between stanchions as barrier tape. Ours is gold where theirs is hi-vis yellow-green — Vorperian Cyberarts is the gold version. RESERVED, never ambient. A warning sign means "something here can hurt you", which on this product is overdue money, a live-money confirm, or the alpha banner. Stripe every section and the device becomes furniture, leaving nothing to say the one thing that matters. */ .hazard { background-image: repeating-linear-gradient( -45deg, var(--brand-primary) 0 10px, var(--brand-secondary) 10px 20px); height: 6px; } .hazard--band { /* a full sign: stripes above and below */ height: auto; background-image: none; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-image: repeating-linear-gradient( -45deg, var(--brand-primary) 0 10px, var(--brand-secondary) 10px 20px) 6; background-color: var(--brand-secondary); color: #fff; padding: .55rem .85rem; font-family: 'Orbitron', system-ui, -apple-system, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .hazard--band .amt { color: var(--brand-primary); font-variant-numeric: tabular-nums; } /* PROSE INSIDE THE BAND returns to the reading face. The band shouts in uppercase Orbitron, which is right for "3 PROJECTS OWING" and wrong for a sentence: the sandbox banner ran 88 characters of uppercase, and DESIGN.md's Short Shout Rule says two or three words, "never for prose". Same shout/note split as .ledger__bar / .ledger__bar-note, so the two bands stay relatives. */ .hazard__note { font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .8125rem; line-height: 1.45; } .hazard__note strong { font-weight: 700; } /* PHONE: keep the WARNING, drop the operator tooling. The mail-redirect field and its button stacked into ~250px of banner at the top of EVERY page — the single biggest thing making the app feel cluttered on a phone. The alpha/sandbox message itself stays (PRODUCT.md: alpha honesty is required, the banner is not to be designed away); only the redirect control, which is a deliberate desk action, waits for a wider screen. */ @media (max-width: 640px) { /* !important because the form carries Bootstrap's .d-flex, which is itself `display: flex !important` — a plain `display: none` loses to it silently. */ .hazard--band form { display: none !important; } .hazard--band { padding: .45rem .85rem; } } @media (prefers-reduced-motion: no-preference) { .hazard { transition: none; } } /* Rows. Hairline dividers — deliberately lighter than the frame, so the eye reads the block first and the rows second. */ .ledger table { margin: 0; width: 100%; } .ledger thead th { font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); padding: .5rem .85rem; white-space: nowrap; border-bottom: 1px solid var(--bs-border-color); } .ledger tbody td { padding: .6rem .85rem; vertical-align: middle; } .ledger tbody tr + tr > td { border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 45%, transparent); } .ledger tbody tr:hover > td { background: var(--bs-tertiary-bg); } /* Money reads as a column of figures, so it gets lining tabular numerals and right alignment. Everything else is left-aligned — a centred column of figures cannot be scanned, which is the grandparent's mistake we skip. */ .ledger .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } .ledger .num--zero { color: var(--bs-secondary-color); } .ledger .num--owed { font-weight: 700; } /* ---- Status, in ONE hue ---------------------------------------------------- The old badges ran six Bootstrap colours (info / primary / success / warning / danger / secondary), which is exactly the "multiple competing hues" the lineage says to leave behind — and it made every row shout equally. Here gold means ONE thing: this row wants something from you. Everything settled or in-progress is a hairline chip; a finished document recedes. */ /* Bootstrap's `.badge` is `font-size: .75em` — RELATIVE, so inside a `.btn-sm` it computed 10.5px, below this app's own 11px functional floor and a size nobody chose. Same em-compounding trap as `.actor-agent`. The ledger world replaced badges with `.st`; the stragglers are pinned to the micro step rather than left to inherit their way downward. */ .badge { font-size: .6875rem; } .st { display: inline-block; padding: .1rem .45rem; border: 1px solid var(--bs-border-color); border-radius: 0; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; line-height: 1.5; white-space: nowrap; color: var(--bs-body-color); } .st--quiet { color: var(--bs-secondary-color); } /* draft, void, superseded */ .st--done { color: var(--bs-secondary-color); /* paid, signed — finished, so it recedes */ border-color: color-mix(in srgb, var(--bs-border-color) 60%, transparent); } .st--live { border-color: var(--brand-primary); color: var(--brand-primary); } /* overdue, partial */ /* NOT A VERDICT — "we could not run this check at all". The verifier needs a fourth state next to verified / within noise / beyond noise, and it is the one that gets collapsed into "failed" if nothing distinguishes it: a document sealed under an older canonicalisation is UNCHECKABLE, and reporting our own version bump as tampering is the worst answer that page can give. DASHED, NOT A NEW COLOUR. The palette is one hue by rule (see DESIGN.md), and this state is precisely not an alarm — spending gold on it would rank it beside "read this clause now". The dash carries "indeterminate" structurally, which survives greyscale printing and colour-blindness in a way a second hue would not. */ .st--unknown { color: var(--bs-secondary-color); border-style: dashed; } /* THE SAME SHADE, FOR THE CHIP. The link fix above shaded gold for light mode and stopped there; `.st--live` — the chip that means THIS ROW WANTS SOMETHING FROM YOU — kept the raw hue and measured 2.14:1 on white. The most urgent state in the system was its least readable one, on every page that renders a status, not just admin. Same derivation as the links (60% of the tenant's own hue over black) so this is a shade and not a second colour. ORDER MATTERS: this sits BEFORE the bar rules below on purpose. `[data-bs-theme= "light"] .st--live` and `.ledger__bar .st--live` are both (0,2,0), so the tie is broken by document order — putting this first lets the bar keep the pure gold it needs against its dark background. Moving it below would silently un-fix the bars. */ [data-bs-theme="light"] .st--live { color: color-mix(in srgb, var(--brand-primary) 60%, #000); border-color: color-mix(in srgb, var(--brand-primary) 60%, #000); } /* Bootstrap's semantic text utilities are authored for its own palette, not a white page: `.text-warning` on white is 1.63:1 and `.text-success` 3.96:1, both under the 4.5 floor, and both were carrying the headline number on the self-test tiles — the count you open that page to read. Darkened for light mode only; dark mode keeps the brighter values, which already clear 7:1 on the near-black page. */ [data-bs-theme="light"] .text-warning { color: color-mix(in srgb, var(--brand-primary) 60%, #000) !important; } [data-bs-theme="light"] .text-success { color: color-mix(in srgb, #198754 78%, #000) !important; } /* #dc3545 measures 3.96:1 on the light `row--bad` tint — under the floor, and it is the FAILED count on the self-test history, i.e. the number that decides whether you keep reading. Darkened rather than replaced: red here is not decoration, it is the one place the design system tolerates a second hue because "this one broke" has to be distinguishable at a glance from "this one is merely urgent" (which is the gold). */ [data-bs-theme="light"] .text-danger { color: color-mix(in srgb, #dc3545 82%, #000) !important; } /* Bootstrap amber (#ffc107) is a THIRD hue and reads at 1.63:1 on white — it was the "Drain" control on the fleet page, an action that takes a node out of service. Mapped onto the same shaded gold as everything else that wants attention, so the console does not introduce a colour the rest of the product never uses. */ [data-bs-theme="light"] .btn-outline-warning { --bs-btn-color: color-mix(in srgb, var(--brand-primary) 60%, #000); --bs-btn-border-color: color-mix(in srgb, var(--brand-primary) 60%, #000); --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 60%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 60%, #000); --bs-btn-hover-color: #fff; } /* 4.45:1 against a 4.5 floor — the kind of miss that survives every eyeball review and fails every audit. Bootstrap's grey, one step darker for light mode only. */ [data-bs-theme="light"] .btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #8b9197; } /* AND THE BAR TAKES ITS COLOUR BACK. `.ledger__bar .btn` is (0,2,0) and so is `[data-bs-theme="light"] .btn-outline-secondary`, so the tie goes to whichever sits later — and mine does. Without this, darkening those buttons "for light mode" pushed the Reload / Re-settle controls on the fleet page from 4.45:1 to 3.23:1, because they live on a bar that is dark in BOTH themes. The fix made the thing worse and looked like progress; it was caught by re-measuring rather than by re-reading the rule. Three selectors, not one, because the same tie exists for every light-mode button override above. */ [data-bs-theme="light"] .ledger__bar .btn-outline-secondary, [data-bs-theme="light"] .ledger__bar .btn-outline-warning, [data-bs-theme="light"] .hazard--band .btn-outline-secondary, [data-bs-theme="light"] .hazard--band .btn-outline-warning { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, .45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .12); --bs-btn-hover-border-color: rgba(255, 255, 255, .7); } [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-hover-color: #12100e; } /* Chips that sit INSIDE a section bar. The bar is dark in both themes (same reasoning as .ledger__bar .btn above), so the theme-mapped chip colors would go invisible in light mode. st--live stays gold — gold reads on the bar. */ .ledger__bar .st, .hazard--band .st, .hostbar .st { color: #fff; border-color: rgba(255, 255, 255, .45); font-family: "Liberation Sans", Arial, Helvetica, sans-serif; letter-spacing: .06em; } .ledger__bar .st--quiet, .ledger__bar .st--done, .ledger__bar .st--unknown, .hazard--band .st--quiet, .hazard--band .st--done, .hazard--band .st--unknown, .hostbar .st--quiet, .hostbar .st--done, .hostbar .st--unknown { color: rgba(255, 255, 255, .65); border-color: rgba(255, 255, 255, .25); } /* The host band is a SATURATED violet on dev, not the near-black the other bands use, so the .65 alpha that clears AA on #0b0b0d only reaches 3.73:1 here. Same idea, more of it — measured 5.8:1 on the violet and better still on prod's near-black band. */ .hostbar .st--quiet, .hostbar .st--done { color: rgba(255, 255, 255, .92); border-color: rgba(255, 255, 255, .45); } .ledger__bar .st--live, .hazard--band .st--live, .hostbar .st--live { color: var(--brand-primary); border-color: var(--brand-primary); } /* The SAME inversion, for text. `.ledger__bar .st` was fixed when the chips moved onto the bar, but muted TEXT there was not: `.text-secondary` and `.small` map to a dark grey in light mode, and the bar is dark in BOTH themes, so a timestamp on the estate bar rendered at 1.18:1 — present, aligned, and unreadable. Measured on a rendered page in light mode; the dark theme it was authored in hid it completely, which is the whole reason this rule is written against the bar rather than the theme. Scoped to the bar's own descendants so nothing in the panel body is touched. */ .ledger__bar .text-secondary, .hazard--band .text-secondary, .ledger__bar .text-body-secondary, .hazard--band .text-body-secondary, .ledger__bar small, .hazard--band small { color: rgba(255, 255, 255, .72) !important; } /* ---- The taped-off control ------------------------------------------------- A destructive button wearing the barrier tape, per the two-tier band system: the triple gold rule is ambient and means "ours"; the hazard diagonal means THIS CAN COST YOU. Bootstrap red said the same thing in a hue this product does not otherwise own, and said it identically for "delete a draft" and "bill every customer". The stripes are the button's TOP AND BOTTOM EDGE, never behind the label — diagonal tape under text is unreadable at any contrast, which is why the band carries its stripes on borders too. The body stays solid so the text keeps a flat surface, and the face stays the reading font: a button is not signage, even a dangerous one. Deliberately NOT the default for every destructive control. If the tape is on everything it stops meaning anything — it is for actions that move money, send mail to real people, or destroy data that is not recoverable from the thing in front of you. */ .btn-hazard { --bs-btn-color: var(--brand-primary); --bs-btn-bg: var(--brand-secondary); --bs-btn-border-color: transparent; --bs-btn-hover-color: #12100e; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: #12100e; --bs-btn-active-bg: var(--brand-primary); --bs-btn-disabled-color: rgba(255, 255, 255, .5); --bs-btn-disabled-bg: var(--brand-secondary); border-radius: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-image: repeating-linear-gradient( -45deg, var(--brand-primary) 0 10px, var(--brand-secondary) 10px 20px) 5; font-family: "Liberation Sans", Arial, Helvetica, sans-serif; font-weight: 700; min-height: 44px; /* the touch floor, on the one control you least want mis-tapped */ padding-inline: .9rem; } /* The tape is the emphasis; don't let a focus ring double it into noise, but never remove the ring — this is the control that most needs to be keyboard-visible. */ .btn-hazard:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; box-shadow: none; } /* On a bar the surround is already dark; the tape would fight the bar's own rule, so the button keeps the tape and drops to a quieter body. */ .ledger__bar .btn-hazard, .hazard--band .btn-hazard { --bs-btn-bg: transparent; --bs-btn-color: #fff; } /* ---- Notes, in ONE hue ----------------------------------------------------- The square sibling of Bootstrap's .alert, which ran cyan (info), green (success) and blue-grey (secondary) panels — three hues the lineage leaves behind, all found on the Settings domain tab and the bank pages. Same semantics as the .st chips: gold means "this wants something from you", everything settled or merely informational recedes to a hairline box. */ .note { border: 1px solid var(--bs-border-color); border-radius: 0; background: var(--bs-tertiary-bg); padding: .6rem .85rem; font-size: .875rem; line-height: 1.45; } .note--live { /* needs your attention / action — gold frame, same grammar as .st--live */ border-color: var(--brand-primary); } /* ---- Row state, dark-native ------------------------------------------------ Bootstrap's `.table-danger` / `.table-warning` / `.table-active` set a LIGHT background and dark cell text. In this app's native dark theme any cell also carrying `.text-secondary` or `.text-danger` keeps its dark-theme token, so the row renders light-on-light. Measured: the check name on /admin/selftest at **1.02:1** and the cause note on /admin/usage at **1.13:1** — effectively invisible, and always on THE ROW THAT IS THE PROBLEM. 50 uses across 31 files. This is the same defect class as the money-at-3.4:1 bug: a Bootstrap colour tuned for white paper, used on a dark surface. The replacement marks a row the way the rest of the system marks anything — a rule in the one hue, plus a tonal step — and never touches the text colour, so whatever the cell already uses stays legible. */ .ledger tbody tr.row--warn > td, .ledger tbody tr.row--bad > td, .ledger tbody tr.row--now > td { background: color-mix(in srgb, var(--bs-body-color) 6%, transparent); } .ledger tbody tr.row--warn > td:first-child { box-shadow: inset 3px 0 0 var(--brand-primary); } .ledger tbody tr.row--bad > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); } .ledger tbody tr.row--now > td:first-child { box-shadow: inset 3px 0 0 var(--bs-body-color); } /* Outside a .ledger (plain tables) the same treatment, without the frame. */ tr.row--warn > td:first-child { box-shadow: inset 3px 0 0 var(--brand-primary); } tr.row--bad > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); } tr.row--now > td:first-child { box-shadow: inset 3px 0 0 var(--bs-body-color); } /* AND ON A BLOCK, which is how twelve of these are actually written. Every selector above is scoped to a table cell, but `.row--warn` has been used on a plain `

` since long before this rule existed — the SSN notice in Team Settings, the W-9 gaps on a client page, four admin banners — and every one of them rendered as unmarked body text. The class was doing nothing at all there, which is worse than a wrong colour: the page looks like it is saying something ordinary. Same vocabulary as the row, laid on the leading edge. */ :where(div, p, section).row--warn, :where(div, p, section).row--bad, :where(div, p, section).row--now { background: color-mix(in srgb, var(--bs-body-color) 6%, transparent); } :where(div, p, section).row--warn { box-shadow: inset 3px 0 0 var(--brand-primary); } :where(div, p, section).row--bad { box-shadow: inset 3px 0 0 var(--bs-danger); } :where(div, p, section).row--now { box-shadow: inset 3px 0 0 var(--bs-body-color); } /* `.btn-outline-danger`'s red is Bootstrap's paper-tuned #dc3545: 3.41:1 on the dark page, on every destructive control in the admin console (Restore x10, Unlock commit deploys, Revoke all outstanding). The emphasis token passes. */ [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-border-subtle); --bs-btn-hover-bg: var(--bs-danger); --bs-btn-hover-border-color: var(--bs-danger); --bs-btn-hover-color: #fff; } /* ---- Row actions (edit / delete on a ledger row) -------------------------- Real buttons with a visible edge on approach, not 10×23px glyph links: the finance ledger had 23 delete controls at that size, unnamed, 8px from the edit pencil — over a route that rewrites recognised revenue. */ .row-act { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0 .3rem; background: transparent; border: 1px solid transparent; border-radius: 0; color: var(--bs-secondary-color); text-decoration: none; line-height: 1; } .row-act:hover, .row-act:focus-visible { border-color: var(--bs-border-color); color: var(--bs-body-color); } .row-act--danger { color: var(--bs-danger); } .row-act--danger:hover, .row-act--danger:focus-visible { border-color: var(--bs-danger); color: var(--bs-danger); } @media (max-width: 640px) { .row-act { min-width: 44px; min-height: 44px; } } /* ---- Phone: THE TWO-LINE ROW (.ledger--rows) ------------------------------- The label/value restack below gives every column its own line. On a six-column list that is ~250px per row: /documents/ measured **10,507px for 38 projects — 12.5 phone screens** — with no search and no filter, to answer the one question the product exists for. DESIGN.md specifies the alternative and (wrongly) describes it as what this list already does: "a constant narrow key column, bold primary line, quieter secondary under it, money right-aligned." line 1 Project title ............................ $1,000.00 line 2 CLIENT Acme · STATUS Sent · TOTAL $1,000.00 ONE MODEL PER TABLE, NOT TWO FIGHTING. The restack below now carries `:not(.ledger--rows)`, so nothing here has to out-specify it. The first attempt at this layered overrides on top instead and lost four times over — a bare `.ledger--rows` losing to `.ledger:not(.ledger--flat)`, then the title cell (which carries no data-label) being captured by the controls rule and rendering the row name-last. Opting out is what makes the rest of this simple. Opt-in per table, because each must nominate its headline number (`.td--lead`). On a money product that is almost never the last column, and guessing wrong buries the figure being looked for. */ @media (max-width: 640px) { .ledger--rows .table-responsive { overflow-x: visible; } .ledger--rows table { width: 100%; max-width: 100%; } .ledger--rows thead { display: none; } /* removed from layout, not clipped */ .ledger--rows tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: .15rem; padding: 11px 13px; } .ledger--rows tbody tr + tr { border-top: 1px solid var(--bs-border-color); } .ledger--rows tbody td { display: inline-flex; align-items: baseline; gap: .3rem; padding: 0; border: 0; overflow-wrap: anywhere; } /* LINE 1 — the name, and the number the page exists to report. */ .ledger--rows tbody td.td--title { /* grow:0 — with flex-grow the title absorbed the free space and the lead figure sat next to it instead of at the edge, so the money did not form a column. */ order: 1; flex: 0 1 auto; max-width: 68%; display: block; font-size: 1rem; font-weight: 700; } .ledger--rows tbody td.td--lead { order: 2; margin-left: auto; display: block; text-align: right; font-size: 1rem; font-weight: 700; } /* THE LINE BREAK. A flex container's own ::after IS a flex item, so this is a real break with no markup change — and it is what makes the auto margin work: without it the first secondary cell kept landing on line 1 beside the figure, so the money never formed a column (measured right edges scattered 141-364px). Orders are spaced to leave room for it: title 1, figure 2, BREAK 3, secondaries 4, controls 5. */ .ledger--rows tbody tr::after { content: ""; flex: 0 0 100%; order: 3; height: 0; } /* LINE 2 — everything else, inline and quiet, each behind a tiny label. */ .ledger--rows tbody td[data-label]:not(.td--title):not(.td--lead) { order: 4; flex: 0 0 auto; font-size: .8125rem; color: var(--bs-secondary-color); } .ledger--rows tbody td[data-label]:not(.td--title):not(.td--lead)::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; } /* Derived detail stays a desk concern. Showing it inline put FOUR money figures on a row whose job is telling you one. */ .ledger--rows tbody td.td--hide-phone { display: none; } /* Controls last. `:not(.td--title)` matters — the title carries no data-label either, and without it this rule captures the title and wins the tie. */ /* The select checkbox LEADS the row — order 0, before the title. At order 5 it landed alone on a third line under the metadata, reading as an orphan rather than as the row's own control. */ .ledger--rows tbody td:not([data-label]):not(.td--title):not(.text-end) { order: 0; align-self: center; } .ledger--rows tbody td.text-end { order: 6; margin-left: auto; } .ledger--rows .num { text-align: right; } } /* ---- Phone: the table becomes a list -------------------------------------- At 390px the old table was 847px wide inside a 364px container, which put the money 291px off-screen — on the figure the whole product exists to tell you. A phone is a first-class place to run a business from, so the row restacks rather than scrolling sideways. */ @media (max-width: 640px) { /* .ledger--flat opts OUT of the restack: a 2-3 column widget table already fits at 390px, and restacking it doubles its height for nothing. */ .ledger:not(.ledger--flat):not(.ledger--rows) .table-responsive { overflow-x: visible; } /* Genuinely removed from layout, not just clipped: a 1000px-wide absolutely positioned thead still measures as horizontal overflow. */ .ledger:not(.ledger--flat):not(.ledger--rows) thead { display: none; } /* Row padding in px, not rem: at a scaled-up text size rem padding alone ate 54px of a 440px screen before any content was drawn. */ .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr { display: block; padding: 11px 13px; } /* …EXCEPT A COLLAPSED ONE, which must stay collapsed. The restack above is three classes deep and so outranks Bootstrap's own `.collapse:not(.show) { display: none }` (two), which meant every `

` inside a ledger table was permanently OPEN below 640px and closed on a desktop — the toggle looked broken on a phone and fine everywhere it was tested. On the service-accounts page that is a rename form AND 41 rights checkboxes forced open for every account on the list. Bootstrap drops `.collapse` for `.collapsing` mid- transition, so this rule stays out of the animation's way and only pins the resting state. */ .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr.collapse:not(.show) { display: none; } .ledger:not(.ledger--flat):not(.ledger--rows) table { width: 100%; max-width: 100%; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr + tr { border-top: 1px solid var(--bs-border-color); } .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr + tr > td { border-top: 0; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td { display: block; padding: 0; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .2rem; /* WRAP, and let both halves shrink. A flex item's default min-width is its min-content, so at a scaled-up text size the label and the value together set a floor WIDER than the phone — the row then pushed the table past the edge even though it had restacked. The label drops onto its own line instead. `gap` in ch rather than rem so it does not scale with the text. */ flex-wrap: wrap; gap: .25rem 2ch; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label] > * { min-width: 0; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label]::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td.td--title { font-size: 1rem; padding-bottom: .15rem; } .ledger:not(.ledger--flat):not(.ledger--rows) tbody td.td--hide-phone { display: none; } .ledger:not(.ledger--flat):not(.ledger--rows) .num { text-align: right; } /* A restacked row still cannot be narrower than its longest WORD, and this app is full of unbreakable ones — invoice numbers, emails, company names. At a scaled-up text size those pushed past the edge even restacked. Let them break rather than overhang; nothing here reads as prose where a mid-word break would hurt. */ .ledger:not(.ledger--flat):not(.ledger--rows) tbody td { overflow-wrap: anywhere; } /* Fixed-width filter fields (min-width/max-width in rem, several of them set INLINE, which beats a class selector — hence !important) grow with the text scale and stop fitting. They may shrink; flex-wrap on the toolbar does the rest. Scoped to phone width, so the desktop toolbars keep their comfortable sizes. */ main .form-control, main .form-select, main input[type="search"], main input[type="date"] { min-width: 0 !important; } /* The classic flex floor: a flex child will not shrink below its min-content unless told to. Every full-width search form in the app is one of these. */ main .flex-grow-1, main form.flex-grow-1 { min-width: 0; } /* Expanded project rows: the document list inside a collapsed row is a flex row of a badge, a number and a total, and could not shrink either. */ .proj-detail .list-group-item { flex-wrap: wrap; gap: .25rem; } .proj-detail .list-group-item > * { min-width: 0; } } /* ---- COMPENSATED VIEWPORT: the library breakpoints we cannot re-scope ------------------- The generated section below mirrors OUR sub-tablet media blocks so they still apply when uiscale.js is compensating. It cannot do the same for Bootstrap: the grid, and every other vendor media query, is answering about the layout viewport, which in this state is roughly twice the hardware. On the owner's phone that laid the finance tiles four across a 440pt screen — 110pt each — and clipped a six-figure amount inside its own tile. So when compensation is ACTIVE and the physical screen is phone-sized, the grid stacks. Gated on .ui-compensated and not on width, deliberately: a real phone's media queries work, and a deliberate two-up grid there must keep its two columns. This only ever fires in the state that is already wrong. */ /* ONE RULE, because one rule is what carries it. The obvious companion — `[class*="col-"] { flex: 0 0 100% }` — was tried and is neither necessary nor sufficient here, and it matches Bootstrap's `.col-form-label` too, which is a layout bug waiting on an unrelated page. Verified by removing each in turn: without this line the finance tiles clip a six-figure amount; without the other nothing changes. */ /* STACK THE GRID, NOT EVERY ROW. This said `.row > *` and meant "the dashboard's col-12 col-lg-6 panels go one per line on a compensated phone" — but it is unscoped, so it also flattened the three-across stat row INSIDE the Platform widget, and the owner's phone showed 6 / 6 / 21 stacked vertically down a whole screen. It does not reproduce at a plain 390px viewport: the compensation class only exists when iOS text scaling is on, which is why the bug lived on his device and not in my measurements. An author who wrote col-4 or col-6 already chose a layout that survives narrow — honour it; col-12 (and anything with no explicit narrow column) still stacks. */ html.ui-compensated.ui-max-576 .row > *:not([class*="col-3"]):not([class*="col-4"]):not([class*="col-6"]) { width: 100%; } /* ==== BEGIN GENERATED: compensated-viewport copies — do not edit by hand ==== */ /* Generated by scripts/gen_compensated_css.py — see that file for why. These mirror the sub-tablet @media blocks above so they still apply when uiscale.js is compensating and the layout viewport is wider than the screen. */ :where(html.ui-max-768) .xscroll::after { border-right: 2px solid var(--brand-primary); } :where(html.ui-max-576) main.container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; } :where(html.ui-max-576) .card-body { padding: .85rem; } :where(html.ui-max-576) .ledger > .p-3 { padding: .85rem !important; } :where(html.ui-max-576) .stat-card.p-3 { padding: 12px !important; } :where(html.ui-max-576) .row.g-3 { --bs-gutter-x: 12px; --bs-gutter-y: 12px; } :where(html.ui-max-576) h1.h3 { font-size: 1.3rem; } :where(html.ui-max-576) .toolbar, :where(html.ui-max-576) .page-actions, :where(html.ui-max-576) .d-flex.gap-2:not(.flex-nowrap) { flex-wrap: wrap; } :where(html.ui-max-576) .btn-group.flex-wrap-sm { flex-wrap: wrap; } :where(html.ui-max-576) .dockstack { right: calc(1.1rem + env(safe-area-inset-right, 0px)); bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); width: min(19rem, calc(100vw - 2.2rem)); } :where(html.ui-max-576) .dock__panel { max-height: 42vh; } :where(html.ui-max-576) .dock__scroll { max-height: 36vh; } :where(html.ui-max-576) .dock__pill--wide { min-height: 3.25rem; padding: 0 1.1rem; font-size: .875rem; } :where(html.ui-max-576) main > .d-flex.justify-content-between { flex-wrap: wrap; row-gap: .5rem; } :where(html.ui-max-576) main > .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; } :where(html.ui-max-640) .hazard--band form { display: none !important; } :where(html.ui-max-640) .hazard--band { padding: .45rem .85rem; } :where(html.ui-max-640) .row-act { min-width: 44px; min-height: 44px; } :where(html.ui-max-640) .ledger--rows .table-responsive { overflow-x: visible; } :where(html.ui-max-640) .ledger--rows table { width: 100%; max-width: 100%; } :where(html.ui-max-640) .ledger--rows thead { display: none; } :where(html.ui-max-640) .ledger--rows tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: .15rem; padding: 11px 13px; } :where(html.ui-max-640) .ledger--rows tbody tr + tr { border-top: 1px solid var(--bs-border-color); } :where(html.ui-max-640) .ledger--rows tbody td { display: inline-flex; align-items: baseline; gap: .3rem; padding: 0; border: 0; overflow-wrap: anywhere; } :where(html.ui-max-640) .ledger--rows tbody td.td--title { order: 1; flex: 0 1 auto; max-width: 68%; display: block; font-size: 1rem; font-weight: 700; } :where(html.ui-max-640) .ledger--rows tbody td.td--lead { order: 2; margin-left: auto; display: block; text-align: right; font-size: 1rem; font-weight: 700; } :where(html.ui-max-640) .ledger--rows tbody tr::after { content: ""; flex: 0 0 100%; order: 3; height: 0; } :where(html.ui-max-640) .ledger--rows tbody td[data-label]:not(.td--title):not(.td--lead) { order: 4; flex: 0 0 auto; font-size: .8125rem; color: var(--bs-secondary-color); } :where(html.ui-max-640) .ledger--rows tbody td[data-label]:not(.td--title):not(.td--lead)::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; } :where(html.ui-max-640) .ledger--rows tbody td.td--hide-phone { display: none; } :where(html.ui-max-640) .ledger--rows tbody td:not([data-label]):not(.td--title):not(.text-end) { order: 0; align-self: center; } :where(html.ui-max-640) .ledger--rows tbody td.text-end { order: 6; margin-left: auto; } :where(html.ui-max-640) .ledger--rows .num { text-align: right; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) .table-responsive { overflow-x: visible; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) thead { display: none; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr { display: block; padding: 11px 13px; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr.collapse:not(.show) { display: none; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) table { width: 100%; max-width: 100%; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr + tr { border-top: 1px solid var(--bs-border-color); } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody tr + tr > td { border-top: 0; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td { display: block; padding: 0; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: .2rem; flex-wrap: wrap; gap: .25rem 2ch; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label] > * { min-width: 0; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td[data-label]::before { content: attr(data-label); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td.td--title { font-size: 1rem; padding-bottom: .15rem; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td.td--hide-phone { display: none; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) .num { text-align: right; } :where(html.ui-max-640) .ledger:not(.ledger--flat):not(.ledger--rows) tbody td { overflow-wrap: anywhere; } :where(html.ui-max-640) main .form-control, :where(html.ui-max-640) main .form-select, :where(html.ui-max-640) main input[type="search"], :where(html.ui-max-640) main input[type="date"] { min-width: 0 !important; } :where(html.ui-max-640) main .flex-grow-1, :where(html.ui-max-640) main form.flex-grow-1 { min-width: 0; } :where(html.ui-max-640) .proj-detail .list-group-item { flex-wrap: wrap; gap: .25rem; } :where(html.ui-max-640) .proj-detail .list-group-item > * { min-width: 0; } /* ==== END GENERATED ==== */