wraps a textarea */ .char-count__status { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: var(--numeric); } .char-count__status--over { color: var(--color-danger); font-weight: var(--weight-semibold); } /* radios & checkboxes — native inputs, enlarged, label is the target */ .choice { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target-min); padding-block: var(--space-1); } .choice input[type="radio"], .choice input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; accent-color: var(--color-primary); flex: none; } .choice__label { cursor: pointer; } .choice__hint { display: block; color: var(--color-text-muted); font-size: var(--text-sm); } fieldset.choices { border: 0; padding: 0; margin: 0; } fieldset.choices legend { font-weight: var(--weight-semibold); padding: 0; margin-bottom: var(--space-2); } /* field markers — one deliberate pattern, not scattered emoji. Two of them, sharing a shape and meaning different things: `.encrypted` is about sensitivity (this value is PII), `.suggested` about provenance (this value was read off a receipt, not typed). Both sit beside a field's label, in the slot `components.md` gives the field anatomy. */ .encrypted, .suggested { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-muted); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); padding: 0 var(--space-2); line-height: 1.6; } /* `.suggested` deliberately draws no glyph: the lock says "encrypted" without words, and there is no comparable mark for "we read this" — so the label carries it alone, which the no-icon-set rule wants anyway. */ /* the group-level disclosure: one note for a section whose every field is encrypted, instead of a pill on every row. Mixed sections keep the pills. */ .encrypted-note { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .encrypted::before, .encrypted-note::before { content: ""; width: 0.6em; height: 0.75em; flex: none; border: 1.5px solid currentColor; border-radius: 2px 2px 1px 1px; margin-top: 0.1em; box-shadow: inset 0 -0.35em 0 currentColor; } /* error summary — top of page, focused on render, links to fields */ .error-summary { border: var(--border-width-accent) solid var(--color-danger); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-6); } .error-summary__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-bold); } .error-summary ul { margin: 0; padding-left: var(--space-4); } .error-summary a { color: var(--color-danger); font-weight: var(--weight-semibold); } /* notification banner — success / info / error; error is the live region */ .banner { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); border-left: var(--border-width-accent) solid; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .banner--info { background: var(--banner-info-bg); border-color: var(--banner-info-border); } .banner--success { background: var(--banner-success-bg); border-color: var(--banner-success-border); } .banner--error { background: var(--banner-error-bg); border-color: var(--banner-error-border); } .banner__title { display: block; font-weight: var(--weight-bold); margin-bottom: var(--space-1); } .banner__close { flex: none; min-width: var(--target-min); min-height: var(--target-min); border: 0; background: transparent; color: inherit; font-size: var(--text-lg); line-height: 1; cursor: pointer; border-radius: var(--radius-sm); } .banner__close:hover { background: rgb(0 0 0 / 0.06); } /* tag / status badge — tint + dark text + border; label carries the meaning */ .tag { display: inline-flex; align-items: center; padding: 0.125rem var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; border: var(--border-width) solid currentColor; background: var(--status-neutral-bg); color: var(--status-neutral-text); } .tag--positive { background: var(--status-positive-bg); color: var(--status-positive-text); } .tag--attention { background: var(--status-attention-bg); color: var(--status-attention-text); } .tag--danger { background: var(--status-danger-bg); color: var(--status-danger-text); } .tag--info { background: var(--status-info-bg); color: var(--status-info-text); } /* table — dense by default (expert tool); zebra + row affordance */ .table { font-size: var(--text-sm); } .table tbody tr:nth-child(even) { background: var(--color-zebra); } .table tbody tr.table__row--clickable { cursor: pointer; } .table tbody tr.table__row--clickable:hover { background: var(--color-surface); } .table__empty { padding-block: var(--space-6); text-align: center; color: var(--color-text-muted); } .table caption { text-align: left; font-weight: var(--weight-semibold); margin-bottom: var(--space-2); } .table__sort { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: none; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; } .table__sort:hover { color: var(--color-link); } .table__sort-arrow { color: var(--color-link); font-size: 0.75rem; min-width: 0.75rem; } /* A cell that stacks several facts rather than holding one — the receipts inbox puts what a receipt is, what file it is, and when it was captured in a single column, so that the row reads the same here as it does on a phone. Each line is a `

`; the muted ones are supporting, and the first is the heading. */ .table__lines p { margin: 0; } .table__lines p + p { margin-top: var(--space-1); } .table__line--muted { color: var(--color-text-muted); } /* summary list — key/value detail view */ .summary-list { margin: 0; } .summary-list__row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: var(--space-4); padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); } .summary-list__key { color: var(--color-text-muted); } /* an opaque value (a sign-in subject like auth0|8f2c1d) has no break opportunity, and its min-content width would push the row past its card */ .summary-list__value { margin: 0; overflow-wrap: break-word; } .summary-list__value--numeric { font-variant-numeric: var(--numeric); } /* the third column: per-row action(s), stacked so two of them don't widen the row, top-aligned so a wrapping value can't stretch a 44px control */ .summary-list__action { display: flex; flex-direction: column; gap: var(--space-1); align-self: start; } @media (max-width: 32rem) { .summary-list__row { grid-template-columns: 1fr; gap: var(--space-1); } .summary-list__action { align-items: flex-start; } } /* card */ .card { background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); } .card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0; } .card__lead { margin: 0; color: var(--color-text-muted); } /* user-authored free text (a bio, a skills narrative): keep the paragraph breaks the author typed — the value arrives as the raw string, not as markup */ .card__narrative { margin: 0; white-space: pre-line; } .card__figure { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: var(--numeric); line-height: var(--leading-tight); } .card__figure small { font-size: var(--text-md); font-weight: var(--weight-regular); color: var(--color-text-muted); } .card--danger { border-color: var(--color-danger); border-width: var(--border-width-strong); } .card--danger .card__title { color: var(--color-danger); } /* avatar — a person's profile photo, or their initials when there is none. The photo fills the circle with `object-fit: cover` (centre-crop) rather than being squashed: there is no crop UI, so the shells crop and the server only downscales. Initials sit on --color-zebra with --color-text (14.9:1 light, 13.3:1 dark) — never colour-coded, since the name beside it carries the meaning. Decorative: the image is alt="" and the initials aria-hidden. */ .avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 6rem; height: 6rem; overflow: hidden; border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-border); background: var(--color-zebra); color: var(--color-text); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1; user-select: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the row/card size: same crop, same initials fallback, half the diameter, so a row avatar is never a different *kind* of thing from a page one */ .avatar--sm { width: 3rem; height: 3rem; font-size: var(--text-md); } /* media frame — a captured document shown at reading size (a receipt photo). `contain`, not the avatar's `cover`: a till receipt is much taller than it is wide, and cropping it would take off the total, which is what the person came to read. The height cap keeps a tall one from pushing its own actions off the screen. The border stays in both themes so a white receipt still has a visible edge against a light background. */ .media { margin: 0 0 var(--space-4); } .media__image { display: block; width: auto; max-width: 100%; max-height: 60vh; margin-inline: auto; object-fit: contain; background: var(--color-zebra); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); } .media__caption { margin-top: var(--space-2); color: var(--color-text-muted); text-align: center; } /* person list — a short list of linked records inside a card (home's "Your team" and "Waiting for you"): one link per row plus its supporting figures. The moment a row needs a second comparable column or sorting, it is a table. */ .person-list { list-style: none; margin: 0; padding: 0; } .person-list__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); } .person-list__item:last-child { border-bottom: none; } .person-list__meta { color: var(--color-text-muted); font-size: var(--text-sm); font-variant-numeric: var(--numeric); } /* badger card — a new joiner: avatar, name, and two muted lines. Sized so a row of them scrolls rather than squeezing; the card is the unit, not the grid cell, because how many fit is a function of the viewport and not of the content. */ .badger-card { flex: 0 0 14rem; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); } .badger-card__meta { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; } /* empty state — why it's empty + the next action */ .empty-state { text-align: center; padding-block: var(--space-8); max-width: 28rem; margin-inline: auto; } .empty-state__title { font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); } .empty-state__text { color: var(--color-text-muted); margin: 0 0 var(--space-4); } /* dialog — native