/* ============================================================ * member-management.css — app component styles * ============================================================ * Colours, spacing, radii, and type all come from the design system's --ds-* * tokens (shipped by the design-system RCL; the "takt" brand is activated * by ). Components use the design system's * class-marker convention, ds-c-{name}, styled from the matching * --ds-{name}-* component tokens. * * The only literals left are values the token set does not model: unitless * line-height ratios, 50%/full-round shapes, the 1px hairline border the * card/table tokens already carry as widths, optical letter-spacing, and the * ch-based reading measure. Everything dimensional resolves from a token. * ============================================================ */ /* The brand-scoped Takt compositions' layout (slice 5 Task 3). Imported here rather than linked from App.razor: App.razor is Task 2's file for the whole slice, and this stylesheet is already downstream of the theme and the DS baseline through this file's own . */ @import url("takt-compositions.css"); /* The admin screens' page-level styling (slice 5 Task 8 — roster/workshops-admin/ locations/payments). Same import rationale as takt-compositions.css above. */ @import url("takt-admin.css"); /* ── Utilities ── */ /* Tabular lining numerals — aligns columns of figures (amounts, counts, prices) so digits line up vertically and don't jitter as values change. Backed by the design-system token; the DS emits --ds-typography-numeric-tabular but ships the matching .ds-u-tabular-nums class only in the RCL, so a tokens-first consumer defines it locally (still no hardcoded values). */ .ds-u-tabular-nums { font-feature-settings: var(--ds-typography-numeric-tabular); } /* ── DS-003: adjustments for the design-system RCL components we consume ── Layout/usage fixes for our app (not token overrides): - DsButton's icon slot expects a DS icon-font glyph we don't ship (we use our own SVG in the button content instead), so collapse the empty slot to keep the label optically centered. - DsPageHeader centers its title row; we bottom-align the title with its subtitle so the heading and lead sit on the same baseline. */ /* DS-004 — the only ds-c-* selectors we still write, and deliberately so: these ADJUST the package's own components for our layout, they do not re-implement them. The guard test carries them as documented exceptions rather than pretending the count is zero. The card rule below is the one that matters. DsCard's body is a flex column, so an inline-level child — a badge, a button — is blockified and STRETCHES to the card's full width. That turned the membership badge and its pay button into full-width bars the moment cards migrated, because our old hand-written card rule was a plain block. Cross-axis only and scoped to direct children, so tables, form grids and prose still fill the card as they should. (Two more adjustments used to sit here — hiding DsButton's empty icon slot and baseline-aligning DsPageHeader's title group — and both became the component's own behaviour in DS 1.6.0, so they are gone.) */ .ds-c-card__body > .ds-c-badge, .ds-c-card__body > .ds-c-btn, .ds-c-card__body > .md-badge { align-self: flex-start; } /* Table name-cell rendered as a