/* The page column of every application on the platform: the margins and maximum width of the
   design system's sections, written once. `--portal-gutter` is the inset that puts content in
   that column, and is only valid on an element as wide as the page. `--portal-margin-block` is the
   room above a page's title, in a section or in a head of our own. */
:root {
  --portal-margin: var(--semantics-page-sections-lg-margin-inline);
  --portal-margin-block: var(--semantics-page-sections-lg-margin-block);
  --portal-gutter: max(
    var(--portal-margin),
    calc((100% - var(--semantics-page-sections-body-max-width)) / 2)
  );
}
@media (max-width: 1007px) {
  :root {
    --portal-margin: var(--semantics-page-sections-md-margin-inline);
    --portal-margin-block: var(--semantics-page-sections-md-margin-block);
  }
}
@media (max-width: 640px) {
  :root {
    --portal-margin: var(--semantics-page-sections-sm-margin-inline);
    --portal-margin-block: var(--semantics-page-sections-sm-margin-block);
  }
}

/* Points Forgejo's color roles at NLDD tokens. The tokens are light-dark()
   pairs, so one mapping serves the light and the dark theme. */
:root {
  --fonts-proportional: var(--primitives-font-family-sans-serif);
  --fonts-monospace: var(--primitives-font-family-monospace);

  --color-primary: var(--semantics-buttons-accent-filled-background-color);
  --color-primary-contrast: var(--semantics-buttons-accent-filled-content-color);
  --color-primary-dark-1: color-mix(in oklch, var(--color-primary) 92%, var(--semantics-content-color));
  --color-primary-dark-2: color-mix(in oklch, var(--color-primary) 84%, var(--semantics-content-color));
  --color-primary-dark-3: color-mix(in oklch, var(--color-primary) 76%, var(--semantics-content-color));
  --color-primary-dark-4: color-mix(in oklch, var(--color-primary) 68%, var(--semantics-content-color));
  --color-primary-light-1: color-mix(in oklch, var(--color-primary) 88%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-2: color-mix(in oklch, var(--color-primary) 72%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-3: color-mix(in oklch, var(--color-primary) 56%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-4: color-mix(in oklch, var(--color-primary) 40%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-5: color-mix(in oklch, var(--color-primary) 24%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-6: color-mix(in oklch, var(--color-primary) 12%, var(--semantics-surfaces-base-background-color));
  --color-primary-light-7: color-mix(in oklch, var(--color-primary) 6%, var(--semantics-surfaces-base-background-color));
  --color-primary-alpha-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --color-accent: var(--semantics-content-accent-color);
  --color-caret: var(--semantics-content-color);

  --color-secondary: var(--semantics-dividers-color);
  --color-secondary-bg: var(--semantics-surfaces-base-background-color);
  --color-body: var(--semantics-surfaces-base-background-color);
  --color-box-header: var(--primitives-color-neutral-50);
  --color-box-body: var(--semantics-surfaces-base-background-color);
  --color-box-body-highlight: var(--primitives-color-neutral-50);
  --color-header-wrapper: var(--semantics-surfaces-base-background-color);
  --color-nav-bg: var(--semantics-surfaces-base-background-color);
  --color-nav-hover-bg: var(--semantics-list-items-is-hovered-background-color);
  --color-secondary-nav-bg: var(--semantics-surfaces-base-background-color);
  --color-menu: var(--semantics-surfaces-base-background-color);
  --color-card: var(--semantics-surfaces-base-background-color);
  --color-footer: var(--semantics-surfaces-base-background-color);
  --color-hover: var(--semantics-list-items-is-hovered-background-color);
  --color-active: var(--semantics-list-items-is-selected-background-color);
  --color-text-dark: var(--semantics-content-color);
  --color-text: var(--semantics-content-color);
  --color-text-light: var(--semantics-content-secondary-color);
  --color-text-light-1: var(--semantics-content-secondary-color);
  --color-text-light-2: var(--semantics-content-secondary-color);
  --color-text-light-3: var(--semantics-content-secondary-color);
  --color-placeholder-text: var(--semantics-input-fields-placeholder-color);
  --color-input-text: var(--semantics-content-color);
  --color-input-background: var(--semantics-input-fields-background-color);
  --color-input-border: var(--semantics-input-fields-border-color);
  --color-input-border-hover: var(--semantics-input-fields-border-color);
  --color-success-bg: var(--semantics-surfaces-success-tinted-background-color);
  --color-success-border: var(--semantics-surfaces-success-tinted-highlight-border-color);
  --color-success-text: var(--semantics-content-success-color);
  --color-error-bg: var(--semantics-surfaces-critical-tinted-background-color);
  --color-error-border: var(--semantics-surfaces-critical-tinted-highlight-border-color);
  --color-error-text: var(--semantics-content-critical-color);
  --color-warning-bg: var(--semantics-surfaces-warning-tinted-background-color);
  --color-warning-border: var(--semantics-surfaces-warning-tinted-highlight-border-color);
  --color-warning-text: var(--semantics-content-warning-color);
  --color-info-bg: var(--semantics-surfaces-accent-tinted-background-color);
  --color-info-border: var(--semantics-surfaces-accent-tinted-highlight-border-color);
  --color-info-text: var(--semantics-content-accent-color);
  --border-radius: var(--semantics-surfaces-corner-radius);
}


/* button: generated from actions/button/button.styles.js */

	.ui.ui.ui.ui.ui.button {
		box-sizing: border-box;
	}

	.ui.ui.ui.ui.ui.button {
		--_button-corner-radius: var(--semantics-controls-md-corner-radius);
		--_button-width: var(--context-button-width, auto);
		--_button-min-size: var(--semantics-controls-md-min-size);
		--_button-block-padding: var(--semantics-controls-md-block-padding);
		--_button-inline-padding: var(--semantics-buttons-md-inline-padding);
		--_button-gap: var(--semantics-buttons-md-gap);
		--_button-font: var(--semantics-buttons-md-primary-text-font);
		--_button-icon-size: var(--semantics-buttons-md-icon-size);
		--_button-disclosure-icon-size: var(--primitives-space-20);
		--_button-supporting-font: var(--semantics-buttons-md-supporting-text-font);
		--_button-background-color: var(--semantics-buttons-neutral-tinted-background-color);
		--_button-primary-content-color: var(--semantics-buttons-neutral-tinted-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-neutral-tinted-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-active-highlight-border-color);

		
	text-align: start !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
		display: inline-flex;
		position: relative;
		width: fit-content;
		max-width: 100%;
		-webkit-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
	}

	.ui.ui.ui.ui.ui.button:is(.tiny,.mini) {
		--_button-corner-radius: var(--semantics-controls-xs-corner-radius);
		--_button-min-size: var(--semantics-controls-xs-min-size);
		--_button-block-padding: var(--semantics-controls-xs-block-padding);
		--_button-inline-padding: var(--semantics-buttons-xs-inline-padding);
		--_button-gap: var(--semantics-buttons-xs-gap);
		--_button-font: var(--semantics-buttons-xs-primary-text-font);
		--_button-icon-size: var(--semantics-buttons-xs-icon-size);
		--_button-disclosure-icon-size: var(--primitives-space-16);
		--_button-supporting-font: var(--semantics-buttons-xs-supporting-text-font);
	}

	.ui.ui.ui.ui.ui.button:is(.small,.compact) {
		--_button-corner-radius: var(--semantics-controls-sm-corner-radius);
		--_button-min-size: var(--semantics-controls-sm-min-size);
		--_button-block-padding: var(--semantics-controls-sm-block-padding);
		--_button-inline-padding: var(--semantics-buttons-sm-inline-padding);
		--_button-gap: var(--semantics-buttons-sm-gap);
		--_button-font: var(--semantics-buttons-sm-primary-text-font);
		--_button-icon-size: var(--semantics-buttons-sm-icon-size);
		--_button-disclosure-icon-size: var(--primitives-space-18);
		--_button-supporting-font: var(--semantics-buttons-sm-supporting-text-font);
	}

	.ui.ui.ui.ui.ui.button.large {
		--_button-corner-radius: var(--semantics-controls-lg-corner-radius);
		--_button-min-size: var(--semantics-controls-lg-min-size);
		--_button-block-padding: var(--semantics-controls-lg-block-padding);
		--_button-inline-padding: var(--semantics-buttons-lg-inline-padding);
		--_button-gap: var(--semantics-buttons-lg-gap);
		--_button-font: var(--semantics-buttons-lg-primary-text-font);
		--_button-icon-size: var(--semantics-buttons-lg-icon-size);
		--_button-disclosure-icon-size: var(--primitives-space-24);
		--_button-supporting-font: var(--semantics-buttons-lg-supporting-text-font);
	}

	.ui.ui.ui.ui.ui.button {
		--_button-background-color: var(--semantics-buttons-neutral-base-background-color);
		--_button-primary-content-color: var(--semantics-buttons-neutral-base-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-neutral-base-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-neutral-base-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-neutral-base-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button:not(.basic).primary {
		--_button-background-color: var(--semantics-buttons-accent-filled-background-color);
		--_button-primary-content-color: var(--semantics-buttons-accent-filled-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-accent-filled-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-accent-filled-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-accent-filled-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.basic.primary {
		--_button-background-color: transparent;
		--_button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
		--_button-highlight-border-color: transparent;
		--_button-is-hovered-background-color: transparent;
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: transparent;
		--_button-is-active-background-color: transparent;
		--_button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: transparent;
	}

	.ui.ui.ui.ui.ui.button:not(.basic).red {
		--_button-background-color: var(--semantics-buttons-critical-tinted-background-color);
		--_button-primary-content-color: var(--semantics-buttons-critical-tinted-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-critical-tinted-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-critical-tinted-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.basic.red {
		--_button-background-color: transparent;
		--_button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
		--_button-highlight-border-color: transparent;
		--_button-is-hovered-background-color: transparent;
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: transparent;
		--_button-is-active-background-color: transparent;
		--_button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: transparent;
	}

	.ui.ui.ui.ui.ui.button.active {
		--_button-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
		--_button-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.active {
		--_button-background-color: var(--semantics-buttons-neutral-base-is-expanded-background-color);
		--_button-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-neutral-base-is-expanded-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.active:not(.basic).primary {
		--_button-background-color: var(--semantics-buttons-accent-filled-is-expanded-background-color);
		--_button-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-accent-filled-is-expanded-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.active.basic.primary {
		--_button-background-color: transparent;
		--_button-primary-content-color: var(--semantics-buttons-accent-transparent-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-accent-transparent-content-secondary-color);
		--_button-highlight-border-color: transparent;
		--_button-is-hovered-background-color: transparent;
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-accent-transparent-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: transparent;
		--_button-is-active-background-color: transparent;
		--_button-is-active-primary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-accent-transparent-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: transparent;
	}

	.ui.ui.ui.ui.ui.button.active:not(.basic).red {
		--_button-background-color: var(--semantics-buttons-critical-tinted-is-expanded-background-color);
		--_button-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-content-secondary-color);
		--_button-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-highlight-border-color);
		--_button-is-hovered-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-background-color);
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-hovered-highlight-border-color);
		--_button-is-active-background-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-background-color);
		--_button-is-active-primary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: var(--semantics-buttons-critical-tinted-is-expanded-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button.active.basic.red {
		--_button-background-color: transparent;
		--_button-primary-content-color: var(--semantics-buttons-critical-transparent-content-color);
		--_button-secondary-content-color: var(--semantics-buttons-critical-transparent-content-secondary-color);
		--_button-highlight-border-color: transparent;
		--_button-is-hovered-background-color: transparent;
		--_button-is-hovered-primary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-color);
		--_button-is-hovered-secondary-content-color: var(--semantics-buttons-critical-transparent-is-hovered-content-secondary-color);
		--_button-is-hovered-highlight-border-color: transparent;
		--_button-is-active-background-color: transparent;
		--_button-is-active-primary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-color);
		--_button-is-active-secondary-content-color: var(--semantics-buttons-critical-transparent-is-active-content-secondary-color);
		--_button-is-active-highlight-border-color: transparent;
	}

	.ui.ui.ui.ui.ui.button:is(:disabled,.disabled) {
		opacity: var(--primitives-opacity-disabled);
		pointer-events: none;
	}

	.ui.ui.ui.ui.ui.button {
		box-sizing: border-box;
		display: inline-flex;
		position: relative;
		margin: 0;
		border: none;
		border-radius: var(--_button-corner-radius);
		background: none;
		background-color: var(--_button-background-color);
		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_button-highlight-border-color) !important;
		width: var(--_button-width);
		min-width: var(--_button-min-size);
		max-width: 100%;
		min-height: var(--_button-min-size);
		padding: var(--_button-block-padding) var(--_button-inline-padding);
		gap: var(--_button-gap);
		align-items: center;
		justify-content: center;
		color: var(--_button-primary-content-color);
		font: var(--_button-font);
		text-align: center;
		text-decoration: none;
		text-wrap: pretty;
		transition:
			background-color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default),
			color var(--primitives-transition-duration-fast) var(--primitives-transition-easing-default)
		;
		appearance: none;
	}

	a.ui.ui.ui.ui.ui.button {
		cursor: var(--semantics-controls-link-cursor);
	}

	.ui.ui.ui.ui.ui.button:hover {
		@media (hover: hover) {
			background-color: var(--_button-is-hovered-background-color);
			color: var(--_button-is-hovered-primary-content-color);
			--_button-highlight-border-color: var(--_button-is-hovered-highlight-border-color);
		}
	}

	.ui.ui.ui.ui.ui.button:active {
		background-color: var(--_button-is-active-background-color);
		color: var(--_button-is-active-primary-content-color);
		--_button-highlight-border-color: var(--_button-is-active-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.button:focus-visible {
		outline: var(--semantics-focus-ring-outline);
		outline-offset: var(--semantics-focus-ring-outline-offset);
		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_button-highlight-border-color) !important;
	}

	.ui.ui.ui.ui.ui.button:focus:not(:focus-visible) {
		outline: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.ui.ui.ui.ui.ui.button {
			transition: none;
		}
	}


/* label: generated from content/tag/tag.styles.js */

	.ui.ui.ui.ui.ui.label {
		box-sizing: border-box;
	}

	.ui.ui.ui.ui.ui.label {
		--_tag-corner-radius: var(--primitives-corner-radius-xs);
		--_tag-background-color: var(--semantics-categories-neutral-tinted-background-color);
		--_tag-min-height: var(--primitives-space-24);
		--_tag-inline-padding: var(--primitives-space-6);
		--_tag-gap: var(--primitives-space-3);
		--_tag-content-color: var(--semantics-categories-neutral-tinted-content-color);
		--_tag-border-color: var(--semantics-categories-neutral-tinted-highlight-border-color);
		--_tag-border-width: var(--primitives-border-width-thin);
		--_tag-font: var(--primitives-font-body-sm-medium-flat);
		--_tag-icon-size: var(--primitives-space-16);
		--_tag-icon-offset-correction: var(--primitives-space-1);

		
	text-align: start !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;

		display: inline-flex;
		vertical-align: middle;
	}

	.ui.ui.ui.ui.ui.label:is(.tiny,.mini,.small) {
		--_tag-corner-radius: var(--primitives-corner-radius-xxs);
		--_tag-min-height: var(--primitives-space-20);
		--_tag-inline-padding: var(--primitives-space-4);
		--_tag-gap: var(--primitives-space-2);
		--_tag-font: var(--primitives-font-body-xs-medium-flat);
		--_tag-icon-size: var(--primitives-space-14);
	}

	.ui.ui.ui.ui.ui.label:is(.primary,.blue) {
		--_tag-background-color: var(--semantics-categories-accent-tinted-background-color);
		--_tag-content-color: var(--semantics-categories-accent-tinted-content-color);
		--_tag-border-color: var(--semantics-categories-accent-tinted-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.label.green {
		--_tag-background-color: var(--semantics-categories-success-tinted-background-color);
		--_tag-content-color: var(--semantics-categories-success-tinted-content-color);
		--_tag-border-color: var(--semantics-categories-success-tinted-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.label:is(.yellow,.orange) {
		--_tag-background-color: var(--semantics-categories-warning-tinted-background-color);
		--_tag-content-color: var(--semantics-categories-warning-tinted-content-color);
		--_tag-border-color: var(--semantics-categories-warning-tinted-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.label.red {
		--_tag-background-color: var(--semantics-categories-critical-tinted-background-color);
		--_tag-content-color: var(--semantics-categories-critical-tinted-content-color);
		--_tag-border-color: var(--semantics-categories-critical-tinted-highlight-border-color);
	}

	.ui.ui.ui.ui.ui.label {
		box-sizing: border-box;
		display: inline-flex;
		border-radius: var(--_tag-corner-radius);
		box-shadow: inset 0 0 0 var(--_tag-border-width) var(--_tag-border-color);
		background-color: var(--_tag-background-color);
		min-height: var(--_tag-min-height);
		padding: 0 var(--_tag-inline-padding);
		gap: var(--_tag-gap);
		align-items: center;
		color: var(--_tag-content-color);
		font: var(--_tag-font);
		white-space: nowrap;
	}

	@media (forced-colors: active) {
		.ui.ui.ui.ui.ui.label {
			border: var(--primitives-border-width-thin) solid CanvasText;
			background-color: Canvas;
			color: CanvasText;
		}
	}


/* input: generated from inputs/text-field/text-field.styles.js */

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea) {
		box-sizing: border-box;
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea) {
		--_text-field-width: 100%;
		--_text-field-corner-radius: var(--semantics-controls-md-corner-radius);
		--_text-field-background-color: var(--semantics-input-fields-background-color);
		--_text-field-min-size: var(--semantics-controls-md-min-size);
		--_text-field-inline-padding: var(--semantics-controls-md-inline-padding);
		--_text-field-font: var(--semantics-input-fields-md-text-font);
		--_text-field-validation-icon-size: var(--semantics-input-fields-md-validation-icon-size);

		
	text-align: start !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;
		max-width: 100%;
		-webkit-tap-highlight-color: transparent;
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea).small {
		--_text-field-corner-radius: var(--semantics-controls-sm-corner-radius);
		--_text-field-min-size: var(--semantics-controls-sm-min-size);
		--_text-field-inline-padding: var(--semantics-controls-sm-inline-padding);
		--_text-field-font: var(--semantics-input-fields-sm-text-font);
		--_text-field-validation-icon-size: var(--semantics-input-fields-sm-validation-icon-size);
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea) {
		box-sizing: border-box;
		border: var(--semantics-input-fields-border);
		border-radius: var(--_text-field-corner-radius);
		background-color: var(--_text-field-background-color);
		min-height: var(--_text-field-min-size);
		padding-left: calc(var(--_text-field-inline-padding) - var(--semantics-input-fields-border-width));
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea)[aria-invalid="true"] {
		border-color: var(--semantics-input-fields-is-invalid-border-color);
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea):read-only {
		--_text-field-background-color: var(--semantics-input-fields-is-read-only-background-color);
		border-color: var(--semantics-input-fields-is-read-only-border-color);
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea):disabled {
		opacity: var(--primitives-opacity-disabled);
	}

	:is(.ui.ui.input > input, .ui.ui.form input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], .search), .ui.ui.form textarea):focus-within {
		outline: var(--semantics-focus-ring-outline);
		outline-offset: var(--semantics-focus-ring-outline-offset);
		box-shadow: var(--semantics-focus-ring-box-shadow);
	}


/* message: generated from status-and-feedback/banner/banner.styles.js */

	.ui.ui.ui.message {
		box-sizing: border-box;
	}

	.ui.ui.ui.message {
		--_banner-corner-radius: var(--semantics-surfaces-corner-radius);
		--_banner-padding: var(--primitives-space-12);
		--_banner-background-color: var(--semantics-surfaces-tinted-background-color);
		--_banner-border-color: var(--semantics-surfaces-tinted-highlight-border-color);
		--_banner-border-width: var(--primitives-border-width-thin);
		--_banner-icon-color: var(--primitives-color-neutral-750);
		--_banner-icon-size: var(--primitives-space-32);
		--_banner-content-color: var(--semantics-content-color);
		--_banner-text-icon-offset: calc((var(--_banner-icon-size) - var(--primitives-font-size-100) * var(--primitives-line-height-tight)) / 2);
		--_banner-column-gap: var(--primitives-space-8);
		--_banner-dismiss-inset: 0px;
		--_banner-dismissible-padding-right: calc(var(--_banner-dismiss-inset) + var(--semantics-controls-md-min-size));
		--_banner-main-gap: var(--primitives-space-8);
		--_banner-actions-gap: var(--primitives-space-4);

		
	text-align: start !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	text-transform: none !important;

		display: block;
		width: 100%;
		color: var(--_banner-content-color);
	}

	.ui.ui.ui.message.info {
		--_banner-background-color: var(--semantics-surfaces-accent-tinted-background-color);
		--_banner-border-color: var(--semantics-surfaces-accent-tinted-highlight-border-color);
		--_banner-icon-color: var(--components-banner-accent-icon-color);
	}

	.ui.ui.ui.message:is(.success,.positive) {
		--_banner-background-color: var(--semantics-surfaces-success-tinted-background-color);
		--_banner-border-color: var(--semantics-surfaces-success-tinted-highlight-border-color);
		--_banner-icon-color: light-dark(var(--primitives-color-success-550), var(--primitives-color-success-650));
	}

	.ui.ui.ui.message.warning {
		--_banner-background-color: var(--semantics-surfaces-warning-tinted-background-color);
		--_banner-border-color: var(--semantics-surfaces-warning-tinted-highlight-border-color);
		--_banner-icon-color: light-dark(var(--primitives-color-warning-450), var(--primitives-color-warning-650));
	}

	.ui.ui.ui.message:is(.error,.negative,.red) {
		--_banner-background-color: var(--semantics-surfaces-critical-tinted-background-color);
		--_banner-border-color: var(--semantics-surfaces-critical-tinted-highlight-border-color);
		--_banner-icon-color: var(--primitives-color-critical-600);
	}

	.ui.ui.ui.message {
		box-sizing: border-box;
		display: grid;
		position: relative;
		border-radius: var(--_banner-corner-radius);
		box-shadow: inset 0 0 0 var(--_banner-border-width) var(--_banner-border-color);
		background-color: var(--_banner-background-color);
		padding: var(--_banner-padding);
		grid-template-columns: auto 1fr;
		gap: var(--_banner-column-gap);
	}

	@media (forced-colors: active) {
		.ui.ui.ui.message {
			border: var(--_banner-border-width) solid CanvasText;
		}
	}

	.ui.ui.ui.message > .header {
		display: flex;
		padding-top: var(--_banner-text-icon-offset);
		flex-direction: column;
	}


/* rich-text: generated from css/rich-text.css */
.markup.markup {
	--_rich-text-grid-size: calc(var(--primitives-font-size-100) * var(--primitives-line-height-snug));
	--_rich-text-spacing-snug: calc(var(--_rich-text-grid-size) / 2);
	--_rich-text-spacing: var(--_rich-text-spacing-snug);
	--_rich-text-dt-width: var(--primitives-area-200);
	--_rich-text-dl-column-gap: var(--primitives-space-16);
	--_rich-text-dl-gap: calc(var(--_rich-text-spacing) / 2);
	box-sizing: border-box;
	row-gap: var(--_rich-text-spacing);
	color: var(--semantics-content-color);
	font: var(--primitives-font-body-md-regular-snug);
}

.markup.markup > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, div, section, blockquote) {
	box-sizing: border-box;
}

.markup.markup > :first-child {
	margin-top: 0;
}

.markup.markup > :last-child {
	margin-bottom: 0;
}

.markup.markup *:focus-visible {
	outline: var(--semantics-focus-ring-outline);
	outline-offset: var(--semantics-focus-ring-outline-offset);
	box-shadow: var(--semantics-focus-ring-box-shadow);
}

.markup.markup *:focus:not(:focus-visible) {
	outline: none;
}

.markup.markup :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--_rich-text-spacing);
	margin-bottom: 0;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.markup.markup h1 {
	font: var(--primitives-font-display-1-sm);
}

.markup.markup h2 {
	font: var(--primitives-font-display-2-sm);
}

.markup.markup h3 {
	font: var(--primitives-font-display-3-sm);
}

.markup.markup h4 {
	font: var(--primitives-font-display-4-sm);
}

.markup.markup h5 {
	font: var(--primitives-font-display-5-sm);
}

.markup.markup h6 {
	font: var(--primitives-font-display-6-sm);
}

.markup.markup p {
	margin: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.markup.markup ul {
	margin: 0;
	padding-left: var(--_rich-text-grid-size);
	list-style-type: disc;
}

.markup.markup ol {
	margin: 0;
	padding-left: var(--_rich-text-grid-size);
	list-style-type: decimal;
}

.markup.markup > :is(ul, ol) {
	margin-block: calc(var(--_rich-text-spacing) / -2);
}

.markup.markup ol > li > ol {
	list-style-type: lower-alpha;
}

.markup.markup li {
	margin: calc(var(--_rich-text-spacing) / 2) 0;
	padding: 0;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.markup.markup li > * + * {
	margin-top: var(--_rich-text-spacing);
}

.markup.markup dl {
	margin: 0;
	column-gap: var(--_rich-text-dl-column-gap)
}

.markup.markup dt {
	font-weight: var(--primitives-font-weight-body-bold)
}

.markup.markup dd {
	text-wrap: pretty
}
.markup.markup dd + dt {
	margin-top: var(--_rich-text-dl-gap);
}
.markup.markup dd + dt + dd {
	@container (min-width: 40.0625rem) {
		margin-top: var(--_rich-text-dl-gap);
	}
}

.markup.markup a {
	border-radius: var(--primitives-corner-radius-xxs);
	color: var(--semantics-links-color);
	text-decoration: underline;
	text-underline-offset: var(--primitives-space-2);
	cursor: pointer;

	.markup.markup &:hover {
		color: var(--semantics-links-is-hovered-color);
	}

	.markup.markup &:active {
		color: var(--semantics-links-is-active-color);
	}
}

.markup.markup strong,
.markup.markup b {
	color: inherit;
	font-weight: var(--primitives-font-weight-body-bold);
}

.markup.markup em,
.markup.markup i {
	color: inherit;
	font-style: italic;
}

.markup.markup code {
	padding: var(--primitives-space-2) var(--primitives-space-4);
	border-radius: var(--semantics-controls-xs-corner-radius);
	box-shadow: inset 0 0 0 var(--semantics-surfaces-highlight-border-width) var(--semantics-surfaces-tinted-highlight-border-color);
	background-color: var(--semantics-surfaces-tinted-background-color);
	font-family: var(--primitives-font-family-monospace);
	font-size: var(--semantics-code-inline-font-size);
}
.markup.markup :is(th, td) code {
	overflow-wrap: anywhere;
}
.markup.markup pre {
	box-sizing: border-box;
	margin: 0;
	padding: var(--primitives-space-16);
	border-radius: var(--semantics-surfaces-corner-radius);
	box-shadow: inset 0 0 0 var(--semantics-surfaces-highlight-border-width) var(--semantics-surfaces-tinted-highlight-border-color);
	background-color: var(--semantics-surfaces-tinted-background-color);
	font: var(--primitives-font-monospace-sm-regular-snug);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	@media (forced-colors: active) {
		border: var(--semantics-surfaces-highlight-border-width) solid CanvasText;
	}
}
.markup.markup pre > code {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	font: inherit;
}

.markup.markup mark {
	padding: var(--primitives-space-1) var(--primitives-space-2);
	border-radius: var(--semantics-controls-xs-corner-radius);
	background-color: var(--semantics-content-mark-background-color);
	color: var(--semantics-content-mark-color);
}

.markup.markup figure {
	flex-direction: column;
	gap: var(--primitives-space-8);
	margin: 0;
}

.markup.markup figcaption {
	color: var(--semantics-content-secondary-color);
	font: var(--primitives-font-body-xs-regular-snug);
	text-align: left;
	text-wrap: pretty;
}

.markup.markup blockquote {
	flex-direction: column;
	gap: calc(var(--semantics-blockquotes-md-spacing) / 2);
	margin-block: max(
		0px,
		calc(var(--semantics-blockquotes-md-spacing) - var(--_rich-text-spacing))
	);
	padding-inline: var(--semantics-blockquotes-md-spacing);
	border-left: var(--semantics-blockquotes-border);
	font: var(--semantics-blockquotes-md-quote-font);
	text-wrap: pretty;

	@container (max-width: 40rem) {
		gap: calc(var(--semantics-blockquotes-sm-spacing) / 2);
		margin-block: max(
			0px,
			calc(var(--semantics-blockquotes-sm-spacing) - var(--_rich-text-spacing))
		);
		padding-inline: var(--semantics-blockquotes-sm-spacing);
		font: var(--semantics-blockquotes-sm-quote-font);
	}
}

.markup.markup blockquote > p {
	margin: 0;
}

.markup.markup q {
	font-style: italic;

	.markup.markup &::before {
		content: open-quote;
	}

	.markup.markup &::after {
		content: close-quote;
	}
}

.markup.markup img {
	border-radius: var(--semantics-controls-md-corner-radius);
	height: auto;
}

.markup.markup hr {
	margin: 0;
	border: none;
	border-top: var(--semantics-dividers-thickness) solid var(--semantics-dividers-color);
}

.markup.markup table {
	margin-block: max(
		0px,
		calc(var(--_rich-text-spacing-snug) - var(--_rich-text-spacing))
	);
	border-collapse: separate;
	border-spacing: 0;
	border: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	border-radius: var(--semantics-tables-corner-radius);
	background-color: var(--semantics-surfaces-base-background-color);
	font: var(--primitives-font-body-md-regular-tight);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;

	@container (min-width: 40.0625rem) {
		overflow-x: unset;
		scrollbar-width: unset;
	}
}

.markup.markup tr {
	height: var(--semantics-tables-row-min-height);
}

.markup.markup th {
	min-width: var(--primitives-area-160);
	padding-block: var(--semantics-tables-row-padding-block);
	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	font: var(--primitives-font-body-md-bold-tight);
	text-align: start;

	@container (min-width: 40.0625rem) {
		min-width: unset;
	}
}

.markup.markup td {
	min-width: var(--primitives-area-160);
	padding-block: var(--semantics-tables-row-padding-block);
	padding-inline: calc(var(--semantics-tables-column-gap) / 2);
	border-bottom: var(--semantics-tables-border-width) solid var(--semantics-tables-border-color);
	font: var(--primitives-font-body-md-regular-tight);
	text-align: left;

	@container (min-width: 40.0625rem) {
		min-width: unset;
	}
}

.markup.markup tr > :is(th, td):first-child {
	padding-inline-start: var(--semantics-tables-row-padding-inline);
}

.markup.markup tr > :is(th, td):last-child {
	padding-inline-end: var(--semantics-tables-row-padding-inline);
}
.markup.markup tbody tr:last-child > :is(th, td) {
	border-bottom: none;
}


/* Parts of Forgejo whose structure differs too much from an NLDD component to
   generate them. These rules only use tokens. */

/* Forgejo sets 14px on the root, and every NLDD size is in rem: the top bar has to come
   out exactly as it does in the portal. */
html { font-size: 100%; }

/* The same page width and gutters as the portal, in the design system's breakpoints. */
.page-content .ui.ui.ui.ui.container:not(.fluid) {
  --container-width: var(--semantics-page-sections-body-max-width);
  max-width: calc(100% - 2 * var(--portal-margin));
}
#navbar,
.page-content > .secondary-nav:not(:has(> .ui.container)),
.page-content > .ui.ui.ui.ui.container.fluid.padded {
  padding-inline: var(--portal-gutter);
}
.page-content .ui.ui.ui.ui.container > overflow-menu .overflow-menu-items > .item.item.item:first-child {
  padding-inline-start: 0 !important; /* the application sets this padding with !important too */
}
/* The pull request tabs sit inside the column already, so the column rule must not inset them. */
.page-content .ui.ui.ui.ui.ui.container > .ui.ui.ui.ui.ui.pull.tabs.container {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
/* The sticky bar above a diff hangs out of its column in the application. */
.repository .diff-detail-box.diff-detail-box {
  margin-inline: 0;
  padding-inline: 0;
}
/* The first item of a menu row starts on the page's line; only its hover area hangs outside. */
#navbar .navbar-left {
  margin-inline-start: calc(-1 * var(--primitives-space-12));
  min-width: 0;
}
#navbar .navbar-left > .item {
  padding-inline: var(--primitives-space-12);
}
.page-content > .secondary-nav:not(:has(> .ui.container)) .ui.menu {
  margin-inline: 0;
  padding-inline: 0;
}
.page-content > .secondary-nav:not(:has(> .ui.container)) .ui.menu > .item:first-child,
.page-content > .secondary-nav:not(:has(> .ui.container)) .ui.menu > .ui.dropdown:first-child {
  padding-inline-start: 0;
  margin-inline-start: 0;
}

/* Links */
a { color: var(--semantics-content-accent-color); }

/* Keyboard focus, same ring as the components */
:focus-visible {
  outline: var(--semantics-focus-ring-outline);
  outline-offset: var(--semantics-focus-ring-outline-offset);
}

/* Native buttons in NLDD keep the default cursor; links keep their pointer. */
button.ui.ui.ui.ui.ui.button { cursor: default; }
.ui.ui.ui.ui.ui.button { gap: var(--primitives-space-8); }
.ui.ui.ui.ui.ui.button.icon { padding-inline: var(--primitives-space-8); }

/* The button on a line of a diff stays as small as that line: at the size of a control it
   stretches every row, because all of them hold one. */
.ui.ui.ui.ui.ui.ui.button.add-code-comment {
  width: var(--primitives-space-20);
  min-width: 0;
  height: var(--primitives-space-20);
  min-height: 0;
  padding: 0;
  font-size: var(--primitives-font-size-70);
}
/* A file name in a diff is not a heading: at that size it no longer fits next to its buttons. */
.ui.ui.diff-file-header {
  font-size: var(--primitives-font-size-80);
}

/* A labeled button is a wrapper around a button and a counter, not a button itself. */
.ui.ui.ui.ui.ui.ui.labeled.button {
  box-shadow: none !important;
  background: none;
  min-height: 0;
  padding: 0;
}

/* The help link points at the documentation of the underlying software. */
a[href*="forgejo.org"] { display: none !important; }

/* Segments and attached headers */
.ui.ui.segment {
  border-color: var(--semantics-dividers-color);
  box-shadow: none;
}
.ui.ui.segment:not(.attached),
.ui.ui.attached.header.top,
.ui.ui.top.attached.segment { border-start-start-radius: var(--semantics-surfaces-corner-radius); border-start-end-radius: var(--semantics-surfaces-corner-radius); }
.ui.ui.segment:not(.attached),
.ui.ui.bottom.attached.segment { border-end-start-radius: var(--semantics-surfaces-corner-radius); border-end-end-radius: var(--semantics-surfaces-corner-radius); }

/* Tables */
.ui.ui.table {
  border-color: var(--semantics-tables-border-color);
  border-radius: var(--semantics-tables-corner-radius);
  color: var(--semantics-content-color);
}
.ui.ui.table th, .ui.ui.table td { border-color: var(--semantics-tables-border-color); }
.ui.ui.table > tbody > tr > td { padding-block: var(--semantics-tables-row-padding-block); }

/* Tabs */
.ui.ui.tabular.menu .item,
.ui.ui.secondary.pointing.menu .item { color: var(--semantics-content-color); font-weight: inherit; }
.ui.ui.tabular.menu .active.item,
.ui.ui.secondary.pointing.menu .active.item {
  border-color: var(--semantics-content-accent-color);
  color: var(--semantics-content-accent-color);
}

/* Menus and dropdowns */
.ui.ui.dropdown .menu, .ui.ui.vertical.menu {
  border-color: var(--semantics-dividers-color);
  border-radius: var(--semantics-overlays-corner-radius);
}
.ui.ui.dropdown .menu { box-shadow: var(--semantics-overlays-box-shadow); }
.ui.ui.dropdown .menu > .item:hover, .ui.ui.vertical.menu .item:hover { background: var(--semantics-list-items-is-hovered-background-color); }
.ui.ui.dropdown .menu > .active.item, .ui.ui.vertical.menu .active.item { background: var(--semantics-list-items-is-selected-background-color); color: var(--semantics-list-items-is-selected-content-color); }

/* Modals */
.ui.ui.modal { border-radius: var(--semantics-overlays-corner-radius); box-shadow: var(--semantics-overlays-box-shadow); }
.ui.ui.dimmer { background: var(--semantics-overlays-backdrop-color); }

/* Checkboxes and radio buttons stay native, in the design system's accent. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--semantics-content-accent-color); }

/* Forgejo's dark theme forces this label color with !important. */
.ui.ui.ui.ui.ui.primary.label { background-color: var(--_tag-background-color) !important; }

/* Inputs joined to a dropdown or button keep one shared corner radius. */
.ui.ui.ui.ui.ui.ui.ui.action.input:not([class*="left action"]) > input {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.ui.ui.selection.dropdown {
  border: var(--semantics-input-fields-border);
  border-radius: var(--semantics-controls-md-corner-radius);
  background: var(--semantics-input-fields-background-color);
}
.ui.ui.ui.action.input > .ui.selection.dropdown:last-child,
.ui.ui.ui.ui.ui.ui.action.input > .ui.button:last-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--semantics-controls-md-corner-radius);
  border-end-end-radius: var(--semantics-controls-md-corner-radius);
}

/* A small action input keeps its button as tall as the field next to it. */
.ui.ui.ui.ui.ui.ui.ui.action.input > :is(.ui.button, .ui.dropdown) { align-self: stretch; height: auto; }

/* Shell around the design system's top bar */
#rijk-header { display: block; }
#rijk-header nldd-top-navigation-bar { display: block; }
#navbar .navbar-left > a#navbar-logo, #navbar a[href="/"]:has(img) { display: none; }
/* The sections of this application are a nldd-tab-bar, see custom/extra_links.tmpl. The menu it
   replaces stays in the page for visitors who are not signed in. */
#navbar .navbar-left:has(nldd-tab-bar) > a.item {
  display: none;
}
/* Its own block: the bar measures its room against its parent, which a flex item cannot be. */
#navbar .navbar-left > .section-tabs {
  flex: 1;
  min-width: 0;
  margin-inline-start: var(--primitives-space-12);
}
/* One head, as in the portal: the rows under the top bar are separated by space, not by lines. */
#navbar {
  padding-block: var(--primitives-space-16);
  border-block: 0;
}
.page-content > .secondary-nav:not(:has(> .ui.container)) {
  border-block-end: 0;
}
/* Without a password the application leaves an empty section behind, which only explains that. */
.user.settings.account .user-setting-content > h4:has(+ .segment > .message:only-child),
.user.settings.account .user-setting-content > h4 + .segment:has(> .message:only-child) {
  display: none;
}
.user.settings.account .user-setting-content > h4 + .segment:has(> .message:only-child) + h4 {
  margin-block-start: 0;
}
/* The pages of a section open with its name above the tabs, as in the portal. */
#navbar:has(.section-title) {
  align-items: flex-end;
}
#navbar .navbar-left:has(.section-title) {
  flex-wrap: wrap;
}
#navbar .navbar-left > .section-title {
  order: -1;
  flex: 0 0 calc(100% - var(--primitives-space-12));
  /* The row already starts with its own padding. */
  margin-block: calc(var(--portal-margin-block) - var(--primitives-space-16)) var(--primitives-space-24);
  margin-inline-start: var(--primitives-space-12);
}
/* On a phone the tabs are the menu, so the menu button only remains for visitors without them.
   The bell and the plus stay next to the tabs, which put what no longer fits behind their button. */
@media (max-width: 767.98px) {
  #navbar:has(.section-tabs) #navbar-expand-toggle {
    display: none;
  }
  #navbar:has(.section-tabs) .navbar-right details.dropdown:not(:has(img.avatar)) {
    display: block;
  }
  #navbar:has(.section-tabs) .navbar-right details.dropdown:not(:has(img.avatar)) > summary {
    display: flex;
  }
  #navbar:has(.section-tabs) .navbar-right summary .only-mobile {
    display: none !important; /* the label belongs to the menu that is gone */
  }
  #navbar .navbar-left:has(.section-tabs) {
    flex-wrap: wrap;
  }
  #navbar .navbar-left > .section-tabs {
    flex: 1 1 0;
  }
  #navbar .navbar-left:has(.section-tabs) > .navbar-mobile-right {
    order: 1;
    margin-inline-start: var(--primitives-space-8) !important; /* the application sets auto with !important */
  }
}
/* A generated picture says nothing about someone, so it does not get a quarter of the page. */
#profile-avatar img {
  width: calc(2 * var(--primitives-space-48));
  height: calc(2 * var(--primitives-space-48));
}
/* Personal settings are not a section of this application, so none of its tabs applies there. */
body:has(.page-content.user.settings) #navbar nldd-tab-bar {
  display: none;
}
/* The account control lives in the top bar. The sign-in link stays in the DOM: header.tmpl reads it. */
#navbar .navbar-right details:has(> summary img.avatar), #navbar .navbar-right a[href*="/user/login"] { display: none; }