/* Utilities (.u-*) and layout helpers (.l-*) live here. */

.hidden { display: none !important; }

.type-xxl,
.text-xxl { font-size: var(--type-xxl-size); line-height: var(--type-xxl-line); }

.type-xl { font-size: var(--type-xl-size); line-height: var(--type-xl-line); }

.type-lg-title { font-size: var(--type-lg-title-size); line-height: var(--type-lg-title-line); }

.type-title { font-size: var(--type-title-size); line-height: var(--type-title-line); }

.type-subtitle { font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line); }

.type-lg-body { font-size: var(--type-lg-body-size); line-height: var(--type-lg-body-line); }

.type-body,
.text-body { font-size: var(--type-body-size); line-height: var(--type-body-line); }

.type-sm-body,
.text-small { font-size: var(--type-sm-body-size); line-height: var(--type-sm-body-line); }

.type-xs-body,
.text-xs { font-size: var(--type-xs-body-size); line-height: var(--type-xs-body-line); }

.type-base {
  font-family: var(--font-family-base);
}

/* .h1–.h5 moved to components.css (BS5 adoption Stage 2C).
   Bootstrap 5 defines .h1–.h5 with its own font-sizes; portal definitions
   must load after BS5 to win. Class names and usage unchanged. */

.w-regular { font-weight: var(--font-weight-regular); }
.w-semibold { font-weight: var(--font-weight-semibold); }
.w-bold { font-weight: var(--font-weight-bold); }

/* .text-primary/.text-secondary moved to components.css (BS5 adoption Stage 2C).
   Bootstrap 5 defines both with !important; portal rules require !important
   and must load after BS5 to win. Class names and usage unchanged. */
.text-disabled { color: var(--text-disabled); }
.text-error { color: var(--text-error); }
.text-h1 { color: var(--text-h1); }
.text-h2 { color: var(--text-h2); }

.type-link,
a.type-link {
  color: var(--link-active);
  text-decoration: underline;
}

.type-link:hover,
a.type-link:hover {
  color: var(--link-active);
}

.type-link:visited,
a.type-link:visited {
  color: var(--link-active);
}

/* .text-muted moved to components.css (BS5 adoption Stage 2C).
   Bootstrap 5 defines this with !important. Class name and usage unchanged. */


/* ================================================================
   UTILITY LAYER (u-* / l-*)
   Added PR2 — additive only, no existing classes changed.
   All classes use token references, not hardcoded values.
   ================================================================ */


/* ----- Spacing: margin ----- */

.u-m-0  { margin: 0; }
.u-m-1  { margin: var(--space-1); }
.u-m-2  { margin: var(--space-2); }
.u-m-3  { margin: var(--space-3); }
.u-m-4  { margin: var(--space-4); }
.u-m-5  { margin: var(--space-5); }
.u-m-6  { margin: var(--space-6); }
.u-m-7  { margin: var(--space-7); }
.u-m-8  { margin: var(--space-8); }

.u-mt-0  { margin-top: 0; }
.u-mt-1  { margin-top: var(--space-1); }
.u-mt-2  { margin-top: var(--space-2); }
.u-mt-2h { margin-top: var(--space-2h); }
.u-mt-3  { margin-top: var(--space-3); }
.u-mt-4  { margin-top: var(--space-4); }
.u-mt-5  { margin-top: var(--space-5); }
.u-mt-6  { margin-top: var(--space-6); }
.u-mt-7  { margin-top: var(--space-7); }
.u-mt-8  { margin-top: var(--space-8); }

.u-mr-0  { margin-right: 0; }
.u-mr-1  { margin-right: var(--space-1); }
.u-mr-2  { margin-right: var(--space-2); }
.u-mr-3  { margin-right: var(--space-3); }
.u-mr-4  { margin-right: var(--space-4); }

.u-mb-0  { margin-bottom: 0; }
.u-mb-1  { margin-bottom: var(--space-1); }
.u-mb-2  { margin-bottom: var(--space-2); }
.u-mb-3  { margin-bottom: var(--space-3); }
.u-mb-4  { margin-bottom: var(--space-4); }
.u-mb-5  { margin-bottom: var(--space-5); }
.u-mb-6  { margin-bottom: var(--space-6); }
.u-mb-7  { margin-bottom: var(--space-7); }
.u-mb-8  { margin-bottom: var(--space-8); }

.u-ml-0  { margin-left: 0; }
.u-ml-1  { margin-left: var(--space-1); }
.u-ml-2  { margin-left: var(--space-2); }
.u-ml-3  { margin-left: var(--space-3); }
.u-ml-4  { margin-left: var(--space-4); }

.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-ml-auto  { margin-left: auto; }


/* ----- Spacing: padding ----- */

.u-p-0  { padding: 0; }
.u-p-1  { padding: var(--space-1); }
.u-p-2  { padding: var(--space-2); }
.u-p-3  { padding: var(--space-3); }
.u-p-4  { padding: var(--space-4); }
.u-p-4h { padding: var(--space-4h); }
.u-p-5  { padding: var(--space-5); }
.u-p-6  { padding: var(--space-6); }
.u-p-7  { padding: var(--space-7); }
.u-p-8  { padding: var(--space-8); }

.u-pt-0  { padding-top: 0; }
.u-pt-2  { padding-top: var(--space-2); }
.u-pt-3  { padding-top: var(--space-3); }
.u-pt-4  { padding-top: var(--space-4); }
.u-pt-6  { padding-top: var(--space-6); }

.u-pr-2  { padding-right: var(--space-2); }
.u-pr-4  { padding-right: var(--space-4); }

.u-pb-0  { padding-bottom: 0; }
.u-pb-2  { padding-bottom: var(--space-2); }
.u-pb-3  { padding-bottom: var(--space-3); }
.u-pb-4  { padding-bottom: var(--space-4); }
.u-pb-6  { padding-bottom: var(--space-6); }

.u-pl-2  { padding-left: var(--space-2); }
.u-pl-4  { padding-left: var(--space-4); }

.u-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.u-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.u-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.u-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.u-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.u-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.u-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.u-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }


/* ----- Spacing: gap ----- */

.u-gap-0 { gap: 0; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3  { gap: var(--space-3); }
.u-gap-3h { gap: var(--space-3h); }
.u-gap-4  { gap: var(--space-4); }
.u-gap-5 { gap: var(--space-5); }
.u-gap-6 { gap: var(--space-6); }
.u-gap-7 { gap: var(--space-7); }
.u-gap-8 { gap: var(--space-8); }


/* ----- Display ----- */

.u-d-none       { display: none; }
.u-d-block      { display: block; }
.u-d-inline     { display: inline; }
.u-d-inline-block { display: inline-block; }
.u-d-flex       { display: flex; }
.u-d-inline-flex { display: inline-flex; }
.u-d-grid       { display: grid; }


/* ----- Flex ----- */

.u-flex-row     { flex-direction: row; }
.u-flex-col     { flex-direction: column; }
.u-flex-wrap    { flex-wrap: wrap; }
.u-flex-nowrap  { flex-wrap: nowrap; }
.u-flex-1       { flex: 1 1 0%; }
.u-flex-auto    { flex: 1 1 auto; }
.u-flex-none    { flex: none; }

.u-items-start   { align-items: flex-start; }
.u-items-center  { align-items: center; }
.u-items-end     { align-items: flex-end; }
.u-items-stretch { align-items: stretch; }

.u-justify-start   { justify-content: flex-start; }
.u-justify-center  { justify-content: center; }
.u-justify-end     { justify-content: flex-end; }
.u-justify-between { justify-content: space-between; }

.u-self-start  { align-self: flex-start; }
.u-self-center { align-self: center; }
.u-self-end    { align-self: flex-end; }

/* Composite shortcuts — match the most common inline-style patterns */
.u-flex-between { display: flex; justify-content: space-between; align-items: center; }
.u-flex-center  { display: flex; justify-content: center; align-items: center; }


/* ----- Grid ----- */

.l-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.l-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.l-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }


/* ----- Width / max-width ----- */

.u-w-full   { width: 100%; }
.u-w-auto   { width: auto; }

.u-max-w-form { max-width: var(--max-w-form); }   /* form fields in create-case screens */
.u-max-w-sm   { max-width: 460px; }   /* case-type-group */
.u-max-w-md   { max-width: 720px; }   /* signatory options */
.u-max-w-lg   { max-width: 970px; }   /* submitted filings shell */
.u-max-w-xl   { max-width: 1200px; }  /* container */
.u-max-w-full { max-width: 100%; }


/* ----- Text alignment ----- */

.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }


/* ----- Typography (u- prefixed aliases) ----- */

.u-type-xxl      { font-size: var(--type-xxl-size);      line-height: var(--type-xxl-line); }
.u-type-xl       { font-size: var(--type-xl-size);       line-height: var(--type-xl-line); }
.u-type-lg-title { font-size: var(--type-lg-title-size); line-height: var(--type-lg-title-line); }
.u-type-title    { font-size: var(--type-title-size);    line-height: var(--type-title-line); }
.u-type-subtitle { font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-line); }
.u-type-lg       { font-size: var(--type-lg-body-size);  line-height: var(--type-lg-body-line); }
.u-fs-lg         { font-size: var(--type-lg-body-size); }  /* font-size only — preserves inherited line-height */
.u-type-body     { font-size: var(--type-body-size);     line-height: var(--type-body-line); }
.u-type-sm       { font-size: var(--type-sm-body-size);  line-height: var(--type-sm-body-line); }
.u-type-xs       { font-size: var(--type-xs-body-size);  line-height: var(--type-xs-body-line); }


/* ----- Font weight (u- prefixed aliases) ----- */

.u-fw-regular  { font-weight: var(--font-weight-regular); }
.u-fw-semibold { font-weight: var(--font-weight-semibold); }
.u-fw-bold     { font-weight: var(--font-weight-bold); }


/* ----- Text colour (u- prefixed aliases) ----- */

.u-text-primary   { color: var(--text-primary); }
.u-text-secondary { color: var(--text-secondary); }
.u-text-muted     { color: var(--text-muted); }
.u-text-disabled  { color: var(--text-disabled); }
.u-text-error     { color: var(--text-error); }
.u-text-success   { color: var(--success); }
.u-text-brand     { color: var(--primary-default); }  /* brand blue — e.g. icon highlights */
.u-text-h1        { color: var(--text-h1); }
.u-text-h2        { color: var(--text-h2); }


/* ----- Background ----- */

.u-bg-white          { background-color: var(--n-0); }
.u-bg-page           { background-color: var(--surface-page); }
.u-bg-sunken         { background-color: var(--n-20); }
.u-bg-primary-bg     { background-color: var(--primary-bg); }
.u-bg-success-bg     { background-color: var(--success-bg); }
.u-bg-error-bg       { background-color: var(--error-bg); }
.u-bg-attention-bg   { background-color: var(--attention-bg); }
.u-bg-info-bg        { background-color: var(--info-bg); }
.u-bg-tint-primary   { background-color: var(--surface-tint-primary); }
.u-bg-tint-success   { background-color: var(--surface-tint-success); }
.u-bg-tint-attention { background-color: var(--surface-tint-attention); }


/* ----- Border ----- */

.u-border          { border: 1px solid var(--border-primary); }
.u-border-subtle   { border: 1px solid var(--border-subtle); }
.u-border-accent   { border: 1px solid var(--border-accent); }
.u-border-muted    { border: 1px solid var(--border-muted); }
.u-border-success  { border: 1px solid var(--border-success); }
.u-border-error    { border: 1px solid var(--border-error); }
.u-border-0        { border: 0; }

.u-border-top      { border-top: 1px solid var(--border-primary); }
.u-border-bottom   { border-bottom: 1px solid var(--border-primary); }
.u-border-top-subtle    { border-top: 1px solid var(--border-subtle); }
.u-border-bottom-subtle { border-bottom: 1px solid var(--border-subtle); }


/* ----- Border radius ----- */

.u-radius-0    { border-radius: 0; }
.u-radius-sm   { border-radius: var(--radius-sm); }
.u-radius-md   { border-radius: var(--radius-md); }
.u-radius-lg   { border-radius: var(--radius-lg); }
.u-radius-pill { border-radius: var(--radius-pill); }


/* ----- Box shadow ----- */

.u-shadow-none { box-shadow: none; }
.u-shadow-sm   { box-shadow: var(--shadow-app-default-subtle); }
.u-shadow-md   { box-shadow: var(--shadow-app-default-medium); }
.u-shadow-lg   { box-shadow: var(--shadow-app-default-strong); }


/* ----- Visibility / accessibility ----- */

.u-hidden { display: none !important; }

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-visible     { visibility: visible; }
.u-invisible   { visibility: hidden; }
.u-overflow-hidden   { overflow: hidden; }
.u-overflow-x-auto  { overflow-x: auto; }


/* ----- Misc ----- */

.u-cursor-pointer  { cursor: pointer; }
.u-pointer-none    { pointer-events: none; }
.u-va-middle       { vertical-align: middle; }
.u-select-none     { user-select: none; }
.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}