/*
Arij global styles, in the Jira Cloud (Atlassian) look. Tokens live in tokens.css.
Component styles live next to their component in *.razor.css (CSS isolation). The classes below are global so any
page or component can use them. Type sizes on a screen: 12px (--text-xs), 14px (--text-sm, the default), 20px+ for page titles.
Buttons .btn (default: grey) .btn-primary (brand blue) .btn-subtle (transparent) .btn-link .btn-danger .btn-sm .btn-sel (pressed)
.icon-btn (32px square, icon only; give it an aria-label)
Forms .field (label + control + .field-help / .field-error, stacked) .input .select .textarea
.req (red asterisk) .check (checkbox or radio + text on one line) .form-actions
.search-input (wrapper: an then an .input inside)
Layout .page (main column) .page-head (h1 + .page-actions on the right) .page-lead (muted intro)
.section-title (16px semibold) .toolbar (row of filters) .grid-2 .grid-3 .hstack .vstack .ml-auto
Surfaces .card (white, 1px border, 3px radius) .card-title .banner (.banner-success, .banner-error) .codeblock
Tables .table (bold subtle th, 40px rows) td.name (semibold) .table .actions (right-aligned cell)
Tabs .tabs > .tab (.tab.on or aria-current="page" / aria-selected="true"): blue underline when selected
.seg > button[aria-pressed="true"] (segmented control)
Menus .menu-item (button or link inside